Account - Filters
Component #1
Basic info
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Basic info</h5>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form Group -->
<div class="row form-group">
<label class="col-sm-3 col-form-label input-label">Profile photo</label>
<div class="col-sm-9">
<label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../../assets/img/160x160/img1.jpg" alt="Image Description">
</label>
<div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
<input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarImg",
"mode": "image",
"targetAttr": "src"
}'>
</div>
<span class="mx-1"></span>
<a class="btn btn-sm btn-white" href="javascript:;">Delete</a>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="firstNameLabel" class="col-sm-3 col-form-label input-label">Full name <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="Displayed on public forums, such as Front."></i></label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" name="firstName" id="firstNameLabel" placeholder="Clarice" aria-label="Clarice" value="Natalie">
<input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Boone" aria-label="Boone" value="Curtis">
</div>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="emailLabel" class="col-sm-3 col-form-label input-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" name="email" id="emailLabel" placeholder="clarice@example.com" aria-label="clarice@example.com" value="natalie@example.com">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="js-add-field row form-group"
data-hs-add-field-options='{
"template": "#addPhoneFieldTemplate",
"container": "#addPhoneFieldContainer",
"defaultCreated": 0
}'>
<label for="phoneLabel" class="col-sm-3 col-form-label input-label">Phone <span class="input-label-secondary">(Optional)</span></label>
<div class="col-sm-9">
<div class="input-group align-items-center">
<input type="text" class="js-masked-input form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx" value="+1(605)5618929"
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
<div class="input-group-append">
<!-- Select -->
<select class="js-custom-select custom-select dropdown-toggle" name="phoneSelect"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- Container For Input Field -->
<div id="addPhoneFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link btn btn-xs btn-no-focus btn-ghost-primary">
<i class="fas fa-plus mr-1"></i>
Add phone
</a>
</div>
</div>
<!-- End Form Group -->
<!-- Add Phone Input Field -->
<div id="addPhoneFieldTemplate" style="display: none;">
<div class="input-group input-group-add-field">
<input type="text" class="js-masked-input form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
<div class="input-group-append">
<!-- Select -->
<select class="js-custom-select-dynamic btn btn-white dropdown-toggle"
data-name="additionlPhoneSelect"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
<!-- End Select -->
</div>
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="fas fa-times"></i>
</a>
</div>
</div>
<!-- End Add Phone Input Field -->
<!-- Form Group -->
<div class="row form-group">
<label class="col-sm-3 col-form-label input-label">Gender</label>
<div class="col-sm-9">
<div class="input-group input-group-md-down-break">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio1">
<label class="custom-control-label" for="genderTypeRadio1">Male</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
<label class="custom-control-label" for="genderTypeRadio2">Female</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio3">
<label class="custom-control-label" for="genderTypeRadio3">Other</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label class="col-sm-3 col-form-label input-label">BIO</label>
<div class="col-sm-9">
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="min-height: 15rem;"
data-hs-quill-options='{
"placeholder": "Type your message...",
"modules": {
"toolbar": [
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
]
}
}'>Creative mind at Htmlstream
</div>
</div>
<!-- End Quill -->
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row align-items-center">
<label for="disableAdCheckbox" class="col-sm-3 col-form-label input-label">Disable ads <span class="badge badge-primary text-uppercase ml-1">PRO</span></label>
<div class="col-sm-9">
<!-- Custom Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="disableAdCheckbox">
<label class="custom-control-label" for="disableAdCheckbox">With your Pro account, you can disable ads across the site.</label>
</div>
<!-- End Custom Checkbox -->
</div>
</div>
<!-- End Form Group -->
</form>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="../../assets/vendor/quill/dist/quill.snow.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<script src="../../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
<script src="../../assets/vendor/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<script src="../../assets/vendor/quill/dist/quill.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<script src="../../assets/js/hs.mask.js"></script>
<script src="../../assets/js/hs.quill.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of masked input
$('.js-masked-input').each(function () {
var mask = $.HSCore.components.HSMask.init($(this));
});
// initialization of file attach
$('.js-file-attach').each(function () {
var customFile = new HSFileAttach($(this)).init();
});
// initialization of add input filed
$('.js-add-field').each(function () {
new HSAddField($(this), {
addedField: () => {
$('.js-add-field .js-custom-select-dynamic').each(function () {
var select2dynamic = $.HSCore.components.HSSelect2.init($(this));
});
}
}).init();
});
// initialization of select2
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
// initialization of quilljs editor
var quill = $.HSCore.components.HSQuill.init('.js-quill');
});
</script>
Component #2
Address
<!-- Card -->
<div id="editAddressCard" class="card mb-3 mb-lg-5">
<div class="card-header">
<h5 class="card-title">Address</h5>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form Group -->
<div class="row form-group">
<label for="locationLabel" class="col-sm-3 col-form-label input-label">Location</label>
<div class="col-sm-9">
<!-- Select -->
<div class="mb-3">
<select class="js-custom-select" id="locationLabel"
data-hs-select2-options='{
"customClass": "custom-select",
"placeholder": "Select country",
"searchInputPlaceholder": "Search a country"
}'>
<option label="empty"></option>
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" />Afghanistan</span>'>Afghanistan</option>
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" />Aland Islands</span>'>Aland Islands</option>
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" />Albania</span>'>Albania</option>
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" />Algeria</span>'>Algeria</option>
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" />American Samoa</span>'>American Samoa</option>
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" />Andorra</span>'>Andorra</option>
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" />Angola</span>'>Angola</option>
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" />Anguilla</span>'>Anguilla</option>
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" />Antigua and Barbuda</span>'>Antigua and Barbuda</option>
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" />Argentina</span>'>Argentina</option>
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" />Armenia</span>'>Armenia</option>
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" />Aruba</span>'>Aruba</option>
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" />Australia</span>'>Australia</option>
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" />Austria</span>'>Austria</option>
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" />Azerbaijan</span>'>Azerbaijan</option>
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" />Bahamas</span>'>Bahamas</option>
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" />Bahrain</span>'>Bahrain</option>
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" />Bangladesh</span>'>Bangladesh</option>
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" />Barbados</span>'>Barbados</option>
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" />Belarus</span>'>Belarus</option>
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" />Belgium</span>'>Belgium</option>
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" />Belize</span>'>Belize</option>
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" />Benin</span>'>Benin</option>
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" />Bermuda</span>'>Bermuda</option>
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" />Bhutan</span>'>Bhutan</option>
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" />Bolivia (Plurinational State of)</span>'>Bolivia (Plurinational State of)</option>
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" />Bonaire, Sint Eustatius and Saba</span>'>Bonaire, Sint Eustatius and Saba</option>
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" />Bosnia and Herzegovina</span>'>Bosnia and Herzegovina</option>
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" />Botswana</span>'>Botswana</option>
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" />Brazil</span>'>Brazil</option>
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" />British Indian Ocean Territory</span>'>British Indian Ocean Territory</option>
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" />Brunei Darussalam</span>'>Brunei Darussalam</option>
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" />Bulgaria</span>'>Bulgaria</option>
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" />Burkina Faso</span>'>Burkina Faso</option>
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" />Burundi</span>'>Burundi</option>
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" />Cabo Verde</span>'>Cabo Verde</option>
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" />Cambodia</span>'>Cambodia</option>
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" />Cameroon</span>'>Cameroon</option>
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" />Canada</span>'>Canada</option>
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" />Cayman Islands</span>'>Cayman Islands</option>
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" />Central African Republic</span>'>Central African Republic</option>
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" />Chad</span>'>Chad</option>
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" />Chile</span>'>Chile</option>
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" />China</span>'>China</option>
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" />Christmas Island</span>'>Christmas Island</option>
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" />Cocos (Keeling) Islands</span>'>Cocos (Keeling) Islands</option>
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" />Colombia</span>'>Colombia</option>
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" />Comoros</span>'>Comoros</option>
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" />Cook Islands</span>'>Cook Islands</option>
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" />Costa Rica</span>'>Costa Rica</option>
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" />Croatia</span>'>Croatia</option>
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" />Cuba</span>'>Cuba</option>
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" />Curaçao</span>'>Curaçao</option>
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" />Cyprus</span>'>Cyprus</option>
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" />Czech Republic</span>'>Czech Republic</option>
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" />Côte d'Ivoire</span>'>Côte d'Ivoire</option>
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" />Democratic Republic of the Congo</span>'>Democratic Republic of the Congo</option>
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" />Denmark</span>'>Denmark</option>
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" />Djibouti</span>'>Djibouti</option>
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" />Dominica</span>'>Dominica</option>
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" />Dominican Republic</span>'>Dominican Republic</option>
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" />Ecuador</span>'>Ecuador</option>
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" />Egypt</span>'>Egypt</option>
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" />El Salvador</span>'>El Salvador</option>
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" />England</span>'>England</option>
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" />Equatorial Guinea</span>'>Equatorial Guinea</option>
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" />Eritrea</span>'>Eritrea</option>
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" />Estonia</span>'>Estonia</option>
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" />Ethiopia</span>'>Ethiopia</option>
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" />Falkland Islands</span>'>Falkland Islands</option>
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" />Faroe Islands</span>'>Faroe Islands</option>
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" />Federated States of Micronesia</span>'>Federated States of Micronesia</option>
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" />Fiji</span>'>Fiji</option>
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" />Finland</span>'>Finland</option>
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" />France</span>'>France</option>
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" />French Guiana</span>'>French Guiana</option>
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" />French Polynesia</span>'>French Polynesia</option>
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" />French Southern Territories</span>'>French Southern Territories</option>
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" />Gabon</span>'>Gabon</option>
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" />Gambia</span>'>Gambia</option>
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" />Georgia</span>'>Georgia</option>
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" />Germany</span>'>Germany</option>
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" />Ghana</span>'>Ghana</option>
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" />Gibraltar</span>'>Gibraltar</option>
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" />Greece</span>'>Greece</option>
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" />Greenland</span>'>Greenland</option>
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" />Grenada</span>'>Grenada</option>
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" />Guadeloupe</span>'>Guadeloupe</option>
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" />Guam</span>'>Guam</option>
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" />Guatemala</span>'>Guatemala</option>
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" />Guernsey</span>'>Guernsey</option>
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" />Guinea</span>'>Guinea</option>
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" />Guinea-Bissau</span>'>Guinea-Bissau</option>
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" />Guyana</span>'>Guyana</option>
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" />Haiti</span>'>Haiti</option>
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" />Holy See</span>'>Holy See</option>
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" />Honduras</span>'>Honduras</option>
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" />Hong Kong</span>'>Hong Kong</option>
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" />Hungary</span>'>Hungary</option>
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" />Iceland</span>'>Iceland</option>
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/in.svg" alt="India Flag" />India</span>'>India</option>
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" />Indonesia</span>'>Indonesia</option>
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" />Iran (Islamic Republic of)</span>'>Iran (Islamic Republic of)</option>
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" />Iraq</span>'>Iraq</option>
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" />Ireland</span>'>Ireland</option>
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" />Isle of Man</span>'>Isle of Man</option>
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" />Israel</span>'>Israel</option>
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" />Italy</span>'>Italy</option>
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" />Jamaica</span>'>Jamaica</option>
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" />Japan</span>'>Japan</option>
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" />Jersey</span>'>Jersey</option>
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" />Jordan</span>'>Jordan</option>
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" />Kazakhstan</span>'>Kazakhstan</option>
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" />Kenya</span>'>Kenya</option>
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" />Kiribati</span>'>Kiribati</option>
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" />Kuwait</span>'>Kuwait</option>
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" />Kyrgyzstan</span>'>Kyrgyzstan</option>
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" />Laos</span>'>Laos</option>
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" />Latvia</span>'>Latvia</option>
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" />Lebanon</span>'>Lebanon</option>
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" />Lesotho</span>'>Lesotho</option>
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" />Liberia</span>'>Liberia</option>
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" />Libya</span>'>Libya</option>
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" />Liechtenstein</span>'>Liechtenstein</option>
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" />Lithuania</span>'>Lithuania</option>
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" />Luxembourg</span>'>Luxembourg</option>
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" />Macau</span>'>Macau</option>
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" />Madagascar</span>'>Madagascar</option>
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" />Malawi</span>'>Malawi</option>
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" />Malaysia</span>'>Malaysia</option>
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" />Maldives</span>'>Maldives</option>
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" />Mali</span>'>Mali</option>
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" />Malta</span>'>Malta</option>
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" />Marshall Islands</span>'>Marshall Islands</option>
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" />Martinique</span>'>Martinique</option>
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" />Mauritania</span>'>Mauritania</option>
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" />Mauritius</span>'>Mauritius</option>
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" />Mayotte</span>'>Mayotte</option>
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" />Mexico</span>'>Mexico</option>
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" />Moldova</span>'>Moldova</option>
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" />Monaco</span>'>Monaco</option>
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" />Mongolia</span>'>Mongolia</option>
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" />Montenegro</span>'>Montenegro</option>
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" />Montserrat</span>'>Montserrat</option>
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" />Morocco</span>'>Morocco</option>
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" />Mozambique</span>'>Mozambique</option>
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" />Myanmar</span>'>Myanmar</option>
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" />Namibia</span>'>Namibia</option>
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" />Nauru</span>'>Nauru</option>
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" />Nepal</span>'>Nepal</option>
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" />Netherlands</span>'>Netherlands</option>
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" />New Caledonia</span>'>New Caledonia</option>
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" />New Zealand</span>'>New Zealand</option>
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" />Nicaragua</span>'>Nicaragua</option>
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" />Niger</span>'>Niger</option>
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" />Nigeria</span>'>Nigeria</option>
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" />Niue</span>'>Niue</option>
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" />Norfolk Island</span>'>Norfolk Island</option>
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" />North Korea</span>'>North Korea</option>
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" />North Macedonia</span>'>North Macedonia</option>
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" />Northern Ireland</span>'>Northern Ireland</option>
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" />Northern Mariana Islands</span>'>Northern Mariana Islands</option>
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" />Norway</span>'>Norway</option>
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" />Oman</span>'>Oman</option>
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" />Pakistan</span>'>Pakistan</option>
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" />Palau</span>'>Palau</option>
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" />Panama</span>'>Panama</option>
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" />Papua New Guinea</span>'>Papua New Guinea</option>
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" />Paraguay</span>'>Paraguay</option>
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" />Peru</span>'>Peru</option>
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" />Philippines</span>'>Philippines</option>
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" />Pitcairn</span>'>Pitcairn</option>
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" />Poland</span>'>Poland</option>
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" />Portugal</span>'>Portugal</option>
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" />Puerto Rico</span>'>Puerto Rico</option>
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" />Qatar</span>'>Qatar</option>
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" />Republic of the Congo</span>'>Republic of the Congo</option>
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" />Romania</span>'>Romania</option>
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" />Russia</span>'>Russia</option>
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" />Rwanda</span>'>Rwanda</option>
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" />Réunion</span>'>Réunion</option>
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" />Saint Barthélemy</span>'>Saint Barthélemy</option>
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" />Saint Helena, Ascension and Tristan da Cunha</span>'>Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" />Saint Kitts and Nevis</span>'>Saint Kitts and Nevis</option>
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" />Saint Lucia</span>'>Saint Lucia</option>
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" />Saint Martin</span>'>Saint Martin</option>
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" />Saint Pierre and Miquelon</span>'>Saint Pierre and Miquelon</option>
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" />Saint Vincent and the Grenadines</span>'>Saint Vincent and the Grenadines</option>
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" />Samoa</span>'>Samoa</option>
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" />San Marino</span>'>San Marino</option>
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" />Sao Tome and Principe</span>'>Sao Tome and Principe</option>
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" />Saudi Arabia</span>'>Saudi Arabia</option>
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" />Scotland</span>'>Scotland</option>
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" />Senegal</span>'>Senegal</option>
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" />Serbia</span>'>Serbia</option>
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" />Seychelles</span>'>Seychelles</option>
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" />Sierra Leone</span>'>Sierra Leone</option>
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" />Singapore</span>'>Singapore</option>
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" />Sint Maarten</span>'>Sint Maarten</option>
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" />Slovakia</span>'>Slovakia</option>
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" />Slovenia</span>'>Slovenia</option>
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" />Solomon Islands</span>'>Solomon Islands</option>
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" />Somalia</span>'>Somalia</option>
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" />South Africa</span>'>South Africa</option>
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" />South Georgia and the South Sandwich Islands</span>'>South Georgia and the South Sandwich Islands</option>
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" />South Korea</span>'>South Korea</option>
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" />South Sudan</span>'>South Sudan</option>
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" />Spain</span>'>Spain</option>
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" />Sri Lanka</span>'>Sri Lanka</option>
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" />State of Palestine</span>'>State of Palestine</option>
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" />Sudan</span>'>Sudan</option>
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" />Suriname</span>'>Suriname</option>
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" />Svalbard and Jan Mayen</span>'>Svalbard and Jan Mayen</option>
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" />Swaziland</span>'>Swaziland</option>
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" />Sweden</span>'>Sweden</option>
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" />Switzerland</span>'>Switzerland</option>
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" />Syrian Arab Republic</span>'>Syrian Arab Republic</option>
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" />Taiwan</span>'>Taiwan</option>
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" />Tajikistan</span>'>Tajikistan</option>
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" />Tanzania</span>'>Tanzania</option>
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" />Thailand</span>'>Thailand</option>
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" />Timor-Leste</span>'>Timor-Leste</option>
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" />Togo</span>'>Togo</option>
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" />Tokelau</span>'>Tokelau</option>
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" />Tonga</span>'>Tonga</option>
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" />Trinidad and Tobago</span>'>Trinidad and Tobago</option>
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" />Tunisia</span>'>Tunisia</option>
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" />Turkey</span>'>Turkey</option>
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" />Turkmenistan</span>'>Turkmenistan</option>
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" />Turks and Caicos Islands</span>'>Turks and Caicos Islands</option>
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" />Tuvalu</span>'>Tuvalu</option>
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" />Uganda</span>'>Uganda</option>
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" />Ukraine</span>'>Ukraine</option>
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" />United Arab Emirates</span>'>United Arab Emirates</option>
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" />United Kingdom</span>'>United Kingdom</option>
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" />United States Minor Outlying Islands</span>'>United States Minor Outlying Islands</option>
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" />United States of America</span>'>United States of America</option>
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" />Uruguay</span>'>Uruguay</option>
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" />Uzbekistan</span>'>Uzbekistan</option>
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" />Vanuatu</span>'>Vanuatu</option>
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" />Venezuela (Bolivarian Republic of)</span>'>Venezuela (Bolivarian Republic of)</option>
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" />Vietnam</span>'>Vietnam</option>
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" />Virgin Islands (British)</span>'>Virgin Islands (British)</option>
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" />Virgin Islands (U.S.)</span>'>Virgin Islands (U.S.)</option>
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" />Wales</span>'>Wales</option>
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" />Wallis and Futuna</span>'>Wallis and Futuna</option>
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" />Western Sahara</span>'>Western Sahara</option>
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" />Yemen</span>'>Yemen</option>
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" />Zambia</span>'>Zambia</option>
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" />Zimbabwe</span>'>Zimbabwe</option>
</select>
</div>
<!-- End Select -->
<div class="mb-3">
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City" value="London">
</div>
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="addressLine1Label" class="col-sm-3 col-form-label input-label">Address line 1</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address" value="45 Roker Terrace, Latheronwheel">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="js-add-field row form-group"
data-hs-add-field-options='{
"template": "#addAddressFieldTemplate",
"container": "#addAddressFieldContainer",
"defaultCreated": 0
}'>
<label for="addressLine2Label" class="col-sm-3 col-form-label input-label">Address line 2 <span class="input-label-secondary">(Optional)</span></label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine2" id="addressLine2Label" placeholder="Your address" aria-label="Your address">
<!-- Container For Input Field -->
<div id="addAddressFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link btn btn-xs btn-no-focus btn-ghost-primary">
<i class="fas fa-plus mr-1"></i>
Add address
</a>
</div>
</div>
<!-- End Form Group -->
<!-- Add Phone Input Field -->
<div id="addAddressFieldTemplate" style="display: none;">
<div class="input-group-add-field">
<input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="fas fa-times"></i>
</a>
</div>
</div>
<!-- End Add Phone Input Field -->
<!-- Form Group -->
<div class="row form-group">
<label for="zipCodeLabel" class="col-sm-3 col-form-label input-label">Zip code <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="You can find your code in a postal address."></i></label>
<div class="col-sm-9">
<input type="text" class="js-masked-input form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code" value="KW5 8NW"
data-hs-mask-options='{
"template": "AA0 0AA"
}'>
</div>
</div>
<!-- End Form Group -->
</form>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of file attach
$('.js-file-attach').each(function () {
var customFile = new HSFileAttach($(this)).init();
});
// initialization of select2
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #3
Privacy
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Privacy</h5>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form Group -->
<div class="row form-group">
<div class="col-sm-3">
<span class="d-block font-size-1 mb-2">Who can see your profile photo? <i class="far fa-question-circle" data-toggle="tooltip" data-placement="top" title="Your visibility setting only applies to your profile photo. Your header image is always visible to anyone."></i></span>
</div>
<div class="col-sm-9">
<!-- Select -->
<div class="select2-custom">
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select"
}'>
<option value="privacy1" data-option-template='<span class="media"><i class="fas fa-globe-americas text-body mt-1 mr-2"></i><span class="media-body"><span class="d-block">Anyone</span><small class="select2-custom-hide">Visible to anyone who can view your content. Accessible by installed apps.</small></span></span>'>Anyone</option>
<option value="privacy2" data-option-template='<span class="media"><i class="fas fa-user-lock text-body mt-1 mr-2"></i><span class="media-body"><span class="d-block">Only you</span><small class="select2-custom-hide">Only visible to you.</small></span></span>'>Only you</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Form Group -->
</form>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select2
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #4
Delete your account
When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Delete your account</h5>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.</p>
<div class="form-group">
<!-- Custom Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="deleteAccountCheckbox">
<label class="custom-control-label" for="deleteAccountCheckbox">Confirm that I want to delete my account.</label>
</div>
<!-- End Custom Checkbox -->
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-danger transition-3d-hover">Delete</button>
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #5
Two-step verification
DisabledStart by entering your password so that we know it's you. Then we'll walk you through two more simple steps.
<!-- Card -->
<div class="card">
<div class="card-header">
<div class="d-flex align-items-center">
<h5 class="card-title">Two-step verification</h5>
<span class="badge badge-soft-danger ml-2">Disabled</span>
</div>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">Start by entering your password so that we know it's you. Then we'll walk you through two more simple steps.</p>
<form>
<!-- Form Group -->
<div class="row form-group">
<label for="accountPasswordLabel" class="col-sm-3 col-form-label input-label">Account password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="currentPassword" id="accountPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
<small class="form-text">This is the password you use to log in to your Front account.</small>
</div>
</div>
<!-- End Form Group -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Set up</button>
</div>
</form>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #6
Password
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Password</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- Form Group -->
<div class="row form-group">
<label for="currentPasswordLabel" class="col-sm-3 col-form-label input-label">Current password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="currentPassword" id="currentPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="newPassword" class="col-sm-3 col-form-label input-label">New password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="Enter new password" aria-label="Enter new password">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="confirmNewPasswordLabel" class="col-sm-3 col-form-label input-label">Confirm new password</label>
<div class="col-sm-9">
<div class="mb-3">
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPasswordLabel" placeholder="Confirm your new password" aria-label="Confirm your new password">
</div>
<h5>Password requirements:</h5>
<p class="card-text font-size-1">Ensure that these requirements are met:</p>
<ul class="font-size-1">
<li>Minimum 8 characters long - the more, the better</li>
<li>At least one lowercase character</li>
<li>At least one uppercase character</li>
<li>At least one number, symbol, or whitespace character</li>
</ul>
</div>
</div>
<!-- End Form Group -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Update Password</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #7
Connected accounts
Integrated features from these accounts make it easier to collaborate with people you know on Front.
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Connected accounts</h5>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">Integrated features from these accounts make it easier to collaborate with people you know on Front.</p>
<!-- Form -->
<form>
<div class="list-group list-group-flush list-group-no-gutters">
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<img class="avatar avatar-xs mr-3" src="../../assets/svg/brands/google.svg" alt="Image Description">
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Google</h6>
<small>Calendar and contacts</small>
</div>
<div class="col-sm-auto">
<!-- Checkbox Switch -->
<label class="toggle-switch" for="connectedAccounts1">
<input id="connectedAccounts1" type="checkbox" class="toggle-switch-input">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<img class="avatar avatar-xs mr-3" src="../../assets/svg/brands/spec.svg" alt="Image Description">
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Spec</h6>
<small>Project management</small>
</div>
<div class="col-sm-auto">
<!-- Checkbox Switch -->
<label class="toggle-switch" for="connectedAccounts2">
<input id="connectedAccounts2" type="checkbox" class="toggle-switch-input">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<img class="avatar avatar-xs mr-3" src="../../assets/svg/brands/slack.svg" alt="Image Description">
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Slack</h6>
<small>Communication <a class="link" href="#">Learn more</a></small>
</div>
<div class="col-sm-auto">
<!-- Checkbox Switch -->
<label class="toggle-switch" for="connectedAccounts3">
<input id="connectedAccounts3" type="checkbox" class="toggle-switch-input" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<img class="avatar avatar-xs mr-3" src="../../assets/svg/brands/mailchimp.svg" alt="Image Description">
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Mailchimp</h6>
<small>Email marketing service</small>
</div>
<div class="col-sm-auto">
<!-- Checkbox Switch -->
<label class="toggle-switch" for="connectedAccounts4">
<input id="connectedAccounts4" type="checkbox" class="toggle-switch-input" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="list-group-item">
<div class="media">
<img class="avatar avatar-xs mr-3" src="../../assets/svg/brands/google-webdev.svg" alt="Image Description">
<div class="media-body">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-0">Google Webdev</h6>
<small>Tools for Web Developers <a class="link" href="#">Learn more</a></small>
</div>
<div class="col-sm-auto">
<!-- Checkbox Switch -->
<label class="toggle-switch" for="connectedAccounts5">
<input id="connectedAccounts5" type="checkbox" class="toggle-switch-input">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End List Item -->
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #8
My network
Toggle all Untoggle all
We need permission from your browser to show notifications. Request permission
Send me:
Front emails
Toggle all Untoggle all
Subscribe me to:
Usage
Toggle all Untoggle all
Allow others to:
Turn all notifications on or off:
Turn OFF
Turn ON
<!-- Card -->
<div class="card mb-5">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">My network</h5>
<a id="toggleAll1" class="js-toggle-state link-underline" href="javascript:;"
data-hs-toggle-state-options='{
"targetSelector": "#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4"
}'>
<span class="link-underline-toggle-default">Toggle all</span>
<span class="link-underline-toggle-toggled">Untoggle all</span>
</a>
</div>
<!-- End Header -->
<!-- Alert -->
<div class="alert alert-soft-danger text-center rounded-0 mb-0" role="alert">
We need permission from your browser to show notifications. <a class="alert-link" href="#">Request permission</a>
</div>
<!-- End Alert -->
<div class="card-body">
<div class="mb-3">
<small class="card-subtitle">Send me:</small>
</div>
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch1">
<input type="checkbox" class="toggle-switch-input" id="customSwitch1">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">New for you</span>
<small class="d-block text-muted">A weekly email featuring shots from designers you follow</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch2">
<input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Account activity <span class="badge badge-success ml-1">New</span></span>
<small class="d-block text-muted">Get important notifications about you or activity you've missed</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch3">
<input type="checkbox" class="toggle-switch-input" id="customSwitch3" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Meetups near you <span class="badge badge-success ml-1">New</span></span>
<small class="d-block text-muted">Get an email when a Dribbble Meetup is posted close to my location</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch4">
<input type="checkbox" class="toggle-switch-input" id="customSwitch4">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Opportunities</span>
<small class="d-block text-muted">Get a daily email when new design jobs are posted in your area</small>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card mb-5">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Front emails</h5>
<a id="toggleAll3" class="js-toggle-state link-underline" href="javascript:;"
data-hs-toggle-state-options='{
"targetSelector": "#customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8"
}'>
<span class="link-underline-toggle-default">Toggle all</span>
<span class="link-underline-toggle-toggled">Untoggle all</span>
</a>
</div>
<!-- End Header -->
<div class="card-body">
<div class="mb-3">
<small class="card-subtitle">Subscribe me to:</small>
</div>
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch5">
<input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Company news</span>
<small class="d-block text-muted">Get Front news, announcements, and product updates</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch6">
<input type="checkbox" class="toggle-switch-input" id="customSwitch6">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Replay <span class="badge badge-success ml-1">New</span></span>
<small class="d-block text-muted">A weekly email featuring popular shots</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch7">
<input type="checkbox" class="toggle-switch-input" id="customSwitch7">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Courtside <span class="badge badge-success ml-1">New</span></span>
<small class="d-block text-muted">A weekly email featuring the latest stories from our blog</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch8">
<input type="checkbox" class="toggle-switch-input" id="customSwitch8">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Weekly jobs</span>
<small class="d-block text-muted">Weekly digest of design jobs</small>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card mb-5">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Usage</h5>
<a id="toggleAll4" class="js-toggle-state link-underline" href="javascript:;"
data-hs-toggle-state-options='{
"targetSelector": "#customSwitch9, #customSwitch10, #customSwitch11"
}'>
<span class="link-underline-toggle-default">Toggle all</span>
<span class="link-underline-toggle-toggled">Untoggle all</span>
</a>
</div>
<!-- End Header -->
<div class="card-body">
<div class="mb-3">
<small class="card-subtitle">Allow others to:</small>
</div>
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch9">
<input type="checkbox" class="toggle-switch-input" id="customSwitch9">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Encrypt data</span>
<small class="d-block text-muted">Encrypt all data associated with account</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch10">
<input type="checkbox" class="toggle-switch-input" id="customSwitch10" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Location services</span>
<small class="d-block text-muted">Allow third-party apps to use current location</small>
</span>
</label>
<!-- End Checkbox Switch -->
<hr class="my-3">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex" for="customSwitch11">
<input type="checkbox" class="toggle-switch-input" id="customSwitch11">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Allow private notes</span>
<small class="d-block text-muted">Members can send you private notes</small>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
<!-- End Card -->
<!-- Toggle Button -->
<div class="d-sm-flex justify-content-between align-items-center">
<div class="mb-3 mb-sm-0">
<small class="card-subtitle">Turn all notifications on or off:</small>
</div>
<a class="js-toggle-state btn btn-sm btn-primary" href="javascript:;"
data-hs-toggle-state-options='{
"targetSelector": "#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4, #customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8, #customSwitch9, #customSwitch10, #customSwitch11",
"slaveSelector": "#toggleAll1, #toggleAll2, #toggleAll3, #toggleAll4"
}'>
<span class="btn-toggle-default">
<i class="fas fa-toggle-off mr-1"></i> Turn OFF
</span>
<span class="btn-toggle-toggled">
<i class="fas fa-toggle-on mr-1"></i> Turn ON
</span>
</a>
</div>
<!-- End Toggle Button -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-toggle-state/dist/hs-toggle-state.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of toggle state
$('.js-toggle-state').each(function () {
var toggleState = new HSToggleState($(this)).init();
});
});
</script>
Component #9
Preferences
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Preferences</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- Form Group -->
<div class="row form-group">
<label for="languageLabel" class="col-sm-3 col-form-label input-label">Language</label>
<div class="col-sm-9">
<!-- Select -->
<select class="js-custom-select" id="languageLabel"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select",
"placeholder": "Select language"
}'>
<option label="empty"></option>
<option value="language2" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span>'>中文 (繁體)</option>
<option value="language3" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cz.svg" alt="Image description" width="16"/><span>Čeština</span>'>Čeština</option>
<option value="language4" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span>'>Dansk</option>
<option value="language5" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span>'>Nederlands</option>
<option value="language6" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span>'>English (US)</option>
<option value="language7" selected data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span>'>English (UK)</option>
<option value="language8" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span>'>Eesti</option>
<option value="language9" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fi.svg" alt="Image description" width="16"/><span>Suomi</span>'>Suomi</option>
<option value="language10" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fr.svg" alt="Image description" width="16"/><span>Français</span>'>Français</option>
<option value="language11" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span>'>Deutsch</option>
<option value="language12" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hu.svg" alt="Image description" width="16"/><span>Magyar</span>'>Magyar</option>
<option value="language13" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/is.svg" alt="Image description" width="16"/><span>Íslenska</span>'>Íslenska</option>
<option value="language14" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span>'>Italiano</option>
<option value="language15" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jp.svg" alt="Image description" width="16"/><span>日本語</span>'>日本語</option>
<option value="language16" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kr.svg" alt="Image description" width="16"/><span>한국어</span>'>한국어</option>
<option value="language17" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span>'>Eesti</option>
<option value="language9" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/no.svg" alt="Image description" width="16"/><span>Norsk</span>'>Norsk</option>
<option value="language18" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/><span>Polski</span>'>Polski</option>
<option value="language19" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/br.svg" alt="Image description" width="16"/><span>Português (Brasil)</span>'>Português (Brasil)</option>
<option value="language20" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pt.svg" alt="Image description" width="16"/><span>Português (Portugal)</span>'>Português (Portugal)</option>
<option value="language21" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ro.svg" alt="Image description" width="16"/><span>Română</span>'>Română</option>
<option value="language22" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ru.svg" alt="Image description" width="16"/><span>Русский</span>'>Русский</option>
<option value="language23" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sk.svg" alt="Image description" width="16"/><span>Slovenčina</span>'>Slovenčina</option>
<option value="language24" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/th.svg" alt="Image description" width="16"/><span>ภาษาไทย</span>'>ภาษาไทย</option>
<option value="language25" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tr.svg" alt="Image description" width="16"/><span>Türkçe</span>'>Türkçe</option>
<option value="language26" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span>'>Español</option>
<option value="language27" data-option-template='<img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ua.svg" alt="Image description" width="16"/><span>Українська</span>'>Українська</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="timeZoneLabel" class="col-sm-3 col-form-label input-label">Time zone</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="currentPassword" id="timeZoneLabel" placeholder="Your time zone" aria-label="Your time zone" value="GMT+01:00" readonly>
</div>
</div>
<!-- End Form Group -->
<!-- Toggle Switch -->
<label class="row form-group toggle-switch mb-3" for="preferencesSwitch1">
<span class="col-8 col-sm-9 toggle-switch-content ml-0">
<span class="card-text text-dark mb-0">Early release</span>
<span class="card-text font-size-1">Get included on early releases for new Front features.</span>
</span>
<span class="col-4 col-sm-3">
<input type="checkbox" class="toggle-switch-input" id="preferencesSwitch1">
<span class="toggle-switch-label ml-auto">
<span class="toggle-switch-indicator"></span>
</span>
</span>
</label>
<!-- End Toggle Switch -->
<!-- Toggle Switch -->
<label class="row form-group toggle-switch mb-3" for="preferencesSwitch2">
<span class="col-8 col-sm-9 toggle-switch-content ml-0">
<span class="card-text text-dark mb-0">See info about people who view my profile</span>
<span class="card-text font-size-1"><a class="link" href="#">More about viewer info</a>.</span>
</span>
<span class="col-4 col-sm-3">
<input type="checkbox" class="toggle-switch-input" id="preferencesSwitch2" checked>
<span class="toggle-switch-label ml-auto">
<span class="toggle-switch-indicator"></span>
</span>
</span>
</label>
<!-- End Toggle Switch -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select2
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #10
Overview
Download .CSV
Your plan (billed yearly):
Starter - April 2020
Total per year
$264 USD
Storage usage
4.27 GB used of 6 GB
Personal usage space
Shared space
Unused space
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Overview</h5>
<a class="btn btn-sm btn-ghost-secondary" href="#">
<i class="fas fa-file-download mr-1"></i>
Download .CSV
</a>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="row">
<div class="col-md-7 mb-4 mb-md-0">
<div class="mb-4">
<small class="text-cap">Your plan (billed yearly):</small>
<h5>Starter - April 2020</h5>
</div>
<div>
<small class="text-cap">Total per year</small>
<h3 class="text-primary">$264 USD</h3>
</div>
</div>
<div class="col-md-5 text-md-right">
<a class="btn btn-sm btn-white mr-1 mb-0 mb-md-2" href="#">Cancel subscription</a>
<a class="btn btn-sm btn-primary transition-3d-hover mb-0 mb-md-2" href="../pages/pricing.html">Update plan</a>
</div>
</div>
</div>
<!-- End Body -->
<hr class="my-3">
<!-- Body -->
<div class="card-body">
<div class="row align-items-center flex-grow-1 mb-2">
<div class="col">
<h4 class="card-header-title">Storage usage</h4>
</div>
<div class="col-auto">
<strong class="text-dark">4.27 GB</strong> used of 6 GB
</div>
</div>
<!-- Progress -->
<div class="progress rounded-pill mb-3">
<div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar opacity" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
<!-- Legend Indicators -->
<div class="list-inline">
<div class="list-inline-item">
<span class="legend-indicator bg-primary"></span>Personal usage space
</div>
<div class="list-inline-item">
<span class="legend-indicator bg-primary opacity"></span>Shared space
</div>
<div class="list-inline-item">
<span class="legend-indicator"></span>Unused space
</div>
</div>
<!-- End Legend Indicators -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #11
Payment method
Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.
-
Maria Williams Primary
MasterCard •••• 4242
Checking - Expires 12/22
-
Maria Williams Expired
Visa •••• 9016
Debit - Expires 04/20
Add a new card
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Payment method</h5>
</div>
<!-- Body -->
<div class="card-body">
<div class="mb-4">
<p>Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.</p>
</div>
<!-- List Group -->
<ul class="list-group mb-5">
<!-- List Item -->
<li class="list-group-item">
<div class="row">
<div class="col">
<div class="mb-2">
<h5>Maria Williams <span class="badge badge-primary ml-1">Primary</span></h5>
</div>
<div class="d-flex align-items-center">
<img class="avatar avatar-sm mr-3" src="../../assets/svg/brands/mastercard.svg" alt="Image Description">
<span class="d-block">
<span class="d-block text-dark">MasterCard •••• 4242</span>
<small class="d-block text-muted">Checking - Expires 12/22</small>
</span>
</div>
</div>
<div class="col-auto">
<div class="d-flex justify-content-end">
<a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#editCardModal">
<i class="fas fa-pencil-alt mr-1"></i> Edit
</a>
<span class="mx-1"></span>
<button type="button" class="btn btn-xs btn-white">
<i class="fas fa-trash-alt mr-1"></i> Delete
</button>
</div>
</div>
</div>
<!-- End Row -->
</li>
<!-- End List Item -->
<!-- List Item -->
<li class="list-group-item">
<div class="row">
<div class="col">
<div class="mb-2">
<h5>Maria Williams <span class="text-danger ml-1">Expired</span></h5>
</div>
<div class="d-flex align-items-center">
<img class="avatar avatar-sm mr-3" src="../../assets/svg/brands/visa.svg" alt="Image Description">
<span class="d-block">
<span class="d-block text-dark">Visa •••• 9016</span>
<small class="d-block text-muted">Debit - Expires 04/20</small>
</span>
</div>
</div>
<div class="col-auto">
<div class="d-flex justify-content-end">
<a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#editCardModal">
<i class="fas fa-pencil-alt mr-1"></i> Edit
</a>
<span class="mx-1"></span>
<button type="button" class="btn btn-xs btn-white">
<i class="fas fa-trash-alt mr-1"></i> Delete
</button>
</div>
</div>
</div>
<!-- End Row -->
</li>
<!-- End List Item -->
</ul>
<!-- End List Group -->
<!-- Card -->
<a class="card card-dashed" href="javascript:;" data-toggle="modal" data-target="#addNewCardModal">
<div class="card-body card-body-centered card-dashed-body">
<i class="fas fa-credit-card fa-lg mb-2"></i>
Add a new card
</div>
</a>
<!-- End Card -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Add New Card Modal -->
<div class="modal fade" id="addNewCardModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="addNewCardModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="addNewCardModalTitle" class="modal-title">Add card</h4>
<div class="modal-close">
<button type="button" class="btn btn-icon btn-xs btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<form>
<!-- Button Group -->
<div class="btn-group btn-group-toggle btn-group-segment d-flex form-group" data-toggle="buttons">
<label class="btn btn-sm flex-fill focus active">
<input type="radio" name="options" id="option1" checked> Credit or Debit card
</label>
<label class="btn btn-sm flex-fill disabled">
<input type="radio" name="options" id="option2"> PayPal <span class="badge badge-soft-primary">Coming soon</span>
</label>
</div>
<!-- End Button Group -->
<!-- Form Group -->
<div class="form-group">
<label for="cardNameLabel" class="input-label">Name on card</label>
<input type="text" class="form-control" id="cardNameLabel" placeholder="Payoneer" aria-label="Payoneer">
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group">
<label for="addNewCardNumberLabel" class="input-label">Card number</label>
<input type="text" class="js-masked-input form-control" name="cardNumber" id="addNewCardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"template": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form Group -->
<div class="row">
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group">
<label for="addNewCardExpirationDateLabel" class="input-label">Expiration date</label>
<input type="text" class="js-masked-input form-control" name="expirationDate" id="addNewCardExpirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx"
data-hs-mask-options='{
"template": "00/0000"
}'>
</div>
<!-- End Form Group -->
</div>
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group">
<label for="addNewCardsecurityCodeLabel" class="input-label">CVV Code <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="text" class="js-masked-input form-control" name="securityCode" id="addNewCardsecurityCodeLabel" placeholder="xxx" aria-label="xxx"
data-hs-mask-options='{
"template": "000"
}'>
</div>
<!-- End Form Group -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="custom-control custom-checkbox form-group">
<input type="checkbox" class="custom-control-input" id="addNewCardMakePrimaryCheckbox1">
<label class="custom-control-label" for="addNewCardMakePrimaryCheckbox1">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" type="button">Add Card</button>
</div>
</form>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Add New Card Modal -->
<!-- Edit Card Modal -->
<div class="modal fade" id="editCardModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="editCardModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="editCardModalTitle" class="modal-title">Edit card</h4>
<div class="modal-close">
<button type="button" class="btn btn-icon btn-xs btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<form>
<!-- Form Group -->
<div class="form-group">
<label for="cardNameLabel" class="input-label">Name on card</label>
<input type="text" class="form-control" id="cardNameLabel" placeholder="Maria Williams" aria-label="Maria Williams" value="Maria Williams">
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group">
<label for="editCardNumberLabel" class="input-label">Card number</label>
<input type="text" class="js-masked-input form-control" name="cardNumber" id="editCardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx" value="5200 7084 8243 4242"
data-hs-mask-options='{
"template": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form Group -->
<div class="row">
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group">
<label for="editCardExpirationDateLabel" class="input-label">Expiration date</label>
<input type="text" class="js-masked-input form-control" name="expirationDate" id="editCardExpirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx" value="12/2022"
data-hs-mask-options='{
"template": "00/0000"
}'>
</div>
<!-- End Form Group -->
</div>
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group">
<label for="editCardSecurityCodeLabel" class="input-label">CVV Code <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="password" class="js-masked-input form-control" name="securityCode" id="editCardSecurityCodeLabel" placeholder="xxx" aria-label="xxx" value="789"
data-hs-mask-options='{
"template": "000"
}'>
</div>
<!-- End Form Group -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="custom-control custom-checkbox form-group">
<input type="checkbox" class="custom-control-input" id="editCardMakePrimaryCheckbox2" checked>
<label class="custom-control-label" for="editCardMakePrimaryCheckbox2">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" type="button">Add Card</button>
</div>
</form>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Edit Card Modal -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of masked input
$('.js-masked-input').each(function () {
var mask = $.HSCore.components.HSMask.init($(this));
});
});
</script>
Component #12
My address
Your text location determines the taxes that are applied to your bill.
How do I correct my tax location?
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">My address</h5>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="row">
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Radio Checkbox -->
<div class="custom-control custom-radio custom-control-inline w-100 h-100">
<input type="radio" id="billingRadio1" name="billingRadio" class="custom-control-input" checked>
<label class="custom-control-label" for="billingRadio1">
<span class="h5 d-block">Billing address #1</span>
<span class="d-block mb-2">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle ml-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
<a class="btn btn-xs btn-white" href="index.html#editAddressCard">
<i class="fas fa-pencil-alt mr-1"></i> Edit address
</a>
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Radio Checkbox -->
<div class="custom-control custom-radio custom-control-inline w-100 h-100">
<input type="radio" id="billingRadio2" name="billingRadio" class="custom-control-input">
<label class="custom-control-label" for="billingRadio2">
<span class="h5 d-block">Billing address #2</span>
<span class="d-block mb-2">
27 Thornton St<br>
Hundleby<br>
PE23 0ZJ, Manchester<br>
UK <img class="avatar avatar-xss avatar-circle ml-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
<a class="btn btn-xs btn-white" href="index.html#editAddressCard">
<i class="fas fa-pencil-alt mr-1"></i> Edit address
</a>
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Card -->
<a class="card card-dashed" href="javascript:;" data-toggle="modal" data-target="#addNewAddressModal">
<div class="card-body card-body-centered card-dashed-body">
<i class="fas fa-building fa-lg mb-2"></i>
Add a new address
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
<div class="mb-4">
<h5>Tax location</h5>
<p class="mb-0">UK - 20.00% SST</p>
<a class="link" href="#">More info</a>
</div>
<p class="mb-0">Your text location determines the taxes that are applied to your bill.</p>
<a class="link" href="#">How do I correct my tax location?</a>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Add New Address Modal -->
<div class="modal fade" id="addNewAddressModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="addNewAddressModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="addNewAddressModalTitle" class="modal-title">Add address</h4>
<div class="modal-close">
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<form>
<!-- Form Group -->
<div class="row form-group">
<label for="addNewAddressLocationLabel" class="col-sm-3 col-form-label input-label">Location</label>
<div class="col-sm-9">
<!-- Select -->
<div class="mb-3">
<select class="js-custom-select" id="addNewAddressLocationLabel"
data-hs-select2-options='{
"dropdownParent": "#addNewAddressModal",
"customClass": "custom-select",
"placeholder": "Select country",
"searchInputPlaceholder": "Search a country"
}'>
<option label="empty"></option>
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" />Afghanistan</span>'>Afghanistan</option>
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" />Aland Islands</span>'>Aland Islands</option>
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" />Albania</span>'>Albania</option>
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" />Algeria</span>'>Algeria</option>
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" />American Samoa</span>'>American Samoa</option>
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" />Andorra</span>'>Andorra</option>
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" />Angola</span>'>Angola</option>
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" />Anguilla</span>'>Anguilla</option>
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" />Antigua and Barbuda</span>'>Antigua and Barbuda</option>
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" />Argentina</span>'>Argentina</option>
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" />Armenia</span>'>Armenia</option>
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" />Aruba</span>'>Aruba</option>
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" />Australia</span>'>Australia</option>
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" />Austria</span>'>Austria</option>
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" />Azerbaijan</span>'>Azerbaijan</option>
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" />Bahamas</span>'>Bahamas</option>
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" />Bahrain</span>'>Bahrain</option>
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" />Bangladesh</span>'>Bangladesh</option>
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" />Barbados</span>'>Barbados</option>
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" />Belarus</span>'>Belarus</option>
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" />Belgium</span>'>Belgium</option>
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" />Belize</span>'>Belize</option>
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" />Benin</span>'>Benin</option>
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" />Bermuda</span>'>Bermuda</option>
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" />Bhutan</span>'>Bhutan</option>
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" />Bolivia (Plurinational State of)</span>'>Bolivia (Plurinational State of)</option>
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" />Bonaire, Sint Eustatius and Saba</span>'>Bonaire, Sint Eustatius and Saba</option>
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" />Bosnia and Herzegovina</span>'>Bosnia and Herzegovina</option>
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" />Botswana</span>'>Botswana</option>
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" />Brazil</span>'>Brazil</option>
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" />British Indian Ocean Territory</span>'>British Indian Ocean Territory</option>
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" />Brunei Darussalam</span>'>Brunei Darussalam</option>
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" />Bulgaria</span>'>Bulgaria</option>
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" />Burkina Faso</span>'>Burkina Faso</option>
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" />Burundi</span>'>Burundi</option>
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" />Cabo Verde</span>'>Cabo Verde</option>
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" />Cambodia</span>'>Cambodia</option>
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" />Cameroon</span>'>Cameroon</option>
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" />Canada</span>'>Canada</option>
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" />Cayman Islands</span>'>Cayman Islands</option>
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" />Central African Republic</span>'>Central African Republic</option>
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" />Chad</span>'>Chad</option>
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" />Chile</span>'>Chile</option>
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" />China</span>'>China</option>
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" />Christmas Island</span>'>Christmas Island</option>
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" />Cocos (Keeling) Islands</span>'>Cocos (Keeling) Islands</option>
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" />Colombia</span>'>Colombia</option>
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" />Comoros</span>'>Comoros</option>
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" />Cook Islands</span>'>Cook Islands</option>
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" />Costa Rica</span>'>Costa Rica</option>
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" />Croatia</span>'>Croatia</option>
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" />Cuba</span>'>Cuba</option>
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" />Curaçao</span>'>Curaçao</option>
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" />Cyprus</span>'>Cyprus</option>
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" />Czech Republic</span>'>Czech Republic</option>
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" />Côte d'Ivoire</span>'>Côte d'Ivoire</option>
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" />Democratic Republic of the Congo</span>'>Democratic Republic of the Congo</option>
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" />Denmark</span>'>Denmark</option>
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" />Djibouti</span>'>Djibouti</option>
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" />Dominica</span>'>Dominica</option>
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" />Dominican Republic</span>'>Dominican Republic</option>
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" />Ecuador</span>'>Ecuador</option>
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" />Egypt</span>'>Egypt</option>
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" />El Salvador</span>'>El Salvador</option>
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" />England</span>'>England</option>
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" />Equatorial Guinea</span>'>Equatorial Guinea</option>
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" />Eritrea</span>'>Eritrea</option>
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" />Estonia</span>'>Estonia</option>
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" />Ethiopia</span>'>Ethiopia</option>
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" />Falkland Islands</span>'>Falkland Islands</option>
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" />Faroe Islands</span>'>Faroe Islands</option>
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" />Federated States of Micronesia</span>'>Federated States of Micronesia</option>
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" />Fiji</span>'>Fiji</option>
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" />Finland</span>'>Finland</option>
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" />France</span>'>France</option>
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" />French Guiana</span>'>French Guiana</option>
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" />French Polynesia</span>'>French Polynesia</option>
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" />French Southern Territories</span>'>French Southern Territories</option>
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" />Gabon</span>'>Gabon</option>
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" />Gambia</span>'>Gambia</option>
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" />Georgia</span>'>Georgia</option>
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" />Germany</span>'>Germany</option>
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" />Ghana</span>'>Ghana</option>
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" />Gibraltar</span>'>Gibraltar</option>
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" />Greece</span>'>Greece</option>
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" />Greenland</span>'>Greenland</option>
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" />Grenada</span>'>Grenada</option>
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" />Guadeloupe</span>'>Guadeloupe</option>
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" />Guam</span>'>Guam</option>
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" />Guatemala</span>'>Guatemala</option>
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" />Guernsey</span>'>Guernsey</option>
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" />Guinea</span>'>Guinea</option>
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" />Guinea-Bissau</span>'>Guinea-Bissau</option>
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" />Guyana</span>'>Guyana</option>
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" />Haiti</span>'>Haiti</option>
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" />Holy See</span>'>Holy See</option>
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" />Honduras</span>'>Honduras</option>
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" />Hong Kong</span>'>Hong Kong</option>
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" />Hungary</span>'>Hungary</option>
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" />Iceland</span>'>Iceland</option>
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/in.svg" alt="India Flag" />India</span>'>India</option>
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" />Indonesia</span>'>Indonesia</option>
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" />Iran (Islamic Republic of)</span>'>Iran (Islamic Republic of)</option>
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" />Iraq</span>'>Iraq</option>
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" />Ireland</span>'>Ireland</option>
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" />Isle of Man</span>'>Isle of Man</option>
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" />Israel</span>'>Israel</option>
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" />Italy</span>'>Italy</option>
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" />Jamaica</span>'>Jamaica</option>
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" />Japan</span>'>Japan</option>
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" />Jersey</span>'>Jersey</option>
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" />Jordan</span>'>Jordan</option>
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" />Kazakhstan</span>'>Kazakhstan</option>
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" />Kenya</span>'>Kenya</option>
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" />Kiribati</span>'>Kiribati</option>
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" />Kuwait</span>'>Kuwait</option>
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" />Kyrgyzstan</span>'>Kyrgyzstan</option>
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" />Laos</span>'>Laos</option>
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" />Latvia</span>'>Latvia</option>
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" />Lebanon</span>'>Lebanon</option>
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" />Lesotho</span>'>Lesotho</option>
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" />Liberia</span>'>Liberia</option>
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" />Libya</span>'>Libya</option>
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" />Liechtenstein</span>'>Liechtenstein</option>
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" />Lithuania</span>'>Lithuania</option>
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" />Luxembourg</span>'>Luxembourg</option>
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" />Macau</span>'>Macau</option>
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" />Madagascar</span>'>Madagascar</option>
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" />Malawi</span>'>Malawi</option>
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" />Malaysia</span>'>Malaysia</option>
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" />Maldives</span>'>Maldives</option>
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" />Mali</span>'>Mali</option>
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" />Malta</span>'>Malta</option>
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" />Marshall Islands</span>'>Marshall Islands</option>
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" />Martinique</span>'>Martinique</option>
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" />Mauritania</span>'>Mauritania</option>
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" />Mauritius</span>'>Mauritius</option>
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" />Mayotte</span>'>Mayotte</option>
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" />Mexico</span>'>Mexico</option>
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" />Moldova</span>'>Moldova</option>
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" />Monaco</span>'>Monaco</option>
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" />Mongolia</span>'>Mongolia</option>
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" />Montenegro</span>'>Montenegro</option>
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" />Montserrat</span>'>Montserrat</option>
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" />Morocco</span>'>Morocco</option>
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" />Mozambique</span>'>Mozambique</option>
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" />Myanmar</span>'>Myanmar</option>
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" />Namibia</span>'>Namibia</option>
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" />Nauru</span>'>Nauru</option>
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" />Nepal</span>'>Nepal</option>
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" />Netherlands</span>'>Netherlands</option>
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" />New Caledonia</span>'>New Caledonia</option>
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" />New Zealand</span>'>New Zealand</option>
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" />Nicaragua</span>'>Nicaragua</option>
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" />Niger</span>'>Niger</option>
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" />Nigeria</span>'>Nigeria</option>
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" />Niue</span>'>Niue</option>
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" />Norfolk Island</span>'>Norfolk Island</option>
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" />North Korea</span>'>North Korea</option>
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" />North Macedonia</span>'>North Macedonia</option>
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" />Northern Ireland</span>'>Northern Ireland</option>
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" />Northern Mariana Islands</span>'>Northern Mariana Islands</option>
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" />Norway</span>'>Norway</option>
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" />Oman</span>'>Oman</option>
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" />Pakistan</span>'>Pakistan</option>
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" />Palau</span>'>Palau</option>
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" />Panama</span>'>Panama</option>
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" />Papua New Guinea</span>'>Papua New Guinea</option>
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" />Paraguay</span>'>Paraguay</option>
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" />Peru</span>'>Peru</option>
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" />Philippines</span>'>Philippines</option>
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" />Pitcairn</span>'>Pitcairn</option>
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" />Poland</span>'>Poland</option>
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" />Portugal</span>'>Portugal</option>
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" />Puerto Rico</span>'>Puerto Rico</option>
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" />Qatar</span>'>Qatar</option>
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" />Republic of the Congo</span>'>Republic of the Congo</option>
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" />Romania</span>'>Romania</option>
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" />Russia</span>'>Russia</option>
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" />Rwanda</span>'>Rwanda</option>
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" />Réunion</span>'>Réunion</option>
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" />Saint Barthélemy</span>'>Saint Barthélemy</option>
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" />Saint Helena, Ascension and Tristan da Cunha</span>'>Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" />Saint Kitts and Nevis</span>'>Saint Kitts and Nevis</option>
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" />Saint Lucia</span>'>Saint Lucia</option>
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" />Saint Martin</span>'>Saint Martin</option>
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" />Saint Pierre and Miquelon</span>'>Saint Pierre and Miquelon</option>
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" />Saint Vincent and the Grenadines</span>'>Saint Vincent and the Grenadines</option>
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" />Samoa</span>'>Samoa</option>
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" />San Marino</span>'>San Marino</option>
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" />Sao Tome and Principe</span>'>Sao Tome and Principe</option>
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" />Saudi Arabia</span>'>Saudi Arabia</option>
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" />Scotland</span>'>Scotland</option>
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" />Senegal</span>'>Senegal</option>
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" />Serbia</span>'>Serbia</option>
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" />Seychelles</span>'>Seychelles</option>
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" />Sierra Leone</span>'>Sierra Leone</option>
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" />Singapore</span>'>Singapore</option>
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" />Sint Maarten</span>'>Sint Maarten</option>
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" />Slovakia</span>'>Slovakia</option>
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" />Slovenia</span>'>Slovenia</option>
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" />Solomon Islands</span>'>Solomon Islands</option>
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" />Somalia</span>'>Somalia</option>
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" />South Africa</span>'>South Africa</option>
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" />South Georgia and the South Sandwich Islands</span>'>South Georgia and the South Sandwich Islands</option>
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" />South Korea</span>'>South Korea</option>
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" />South Sudan</span>'>South Sudan</option>
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" />Spain</span>'>Spain</option>
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" />Sri Lanka</span>'>Sri Lanka</option>
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" />State of Palestine</span>'>State of Palestine</option>
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" />Sudan</span>'>Sudan</option>
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" />Suriname</span>'>Suriname</option>
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" />Svalbard and Jan Mayen</span>'>Svalbard and Jan Mayen</option>
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" />Swaziland</span>'>Swaziland</option>
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" />Sweden</span>'>Sweden</option>
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" />Switzerland</span>'>Switzerland</option>
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" />Syrian Arab Republic</span>'>Syrian Arab Republic</option>
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" />Taiwan</span>'>Taiwan</option>
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" />Tajikistan</span>'>Tajikistan</option>
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" />Tanzania</span>'>Tanzania</option>
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" />Thailand</span>'>Thailand</option>
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" />Timor-Leste</span>'>Timor-Leste</option>
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" />Togo</span>'>Togo</option>
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" />Tokelau</span>'>Tokelau</option>
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" />Tonga</span>'>Tonga</option>
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" />Trinidad and Tobago</span>'>Trinidad and Tobago</option>
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" />Tunisia</span>'>Tunisia</option>
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" />Turkey</span>'>Turkey</option>
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" />Turkmenistan</span>'>Turkmenistan</option>
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" />Turks and Caicos Islands</span>'>Turks and Caicos Islands</option>
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" />Tuvalu</span>'>Tuvalu</option>
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" />Uganda</span>'>Uganda</option>
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" />Ukraine</span>'>Ukraine</option>
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" />United Arab Emirates</span>'>United Arab Emirates</option>
<option value="GB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" />United Kingdom</span>'>United Kingdom</option>
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" />United States Minor Outlying Islands</span>'>United States Minor Outlying Islands</option>
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" />United States of America</span>'>United States of America</option>
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" />Uruguay</span>'>Uruguay</option>
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" />Uzbekistan</span>'>Uzbekistan</option>
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" />Vanuatu</span>'>Vanuatu</option>
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" />Venezuela (Bolivarian Republic of)</span>'>Venezuela (Bolivarian Republic of)</option>
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" />Vietnam</span>'>Vietnam</option>
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" />Virgin Islands (British)</span>'>Virgin Islands (British)</option>
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" />Virgin Islands (U.S.)</span>'>Virgin Islands (U.S.)</option>
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" />Wales</span>'>Wales</option>
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" />Wallis and Futuna</span>'>Wallis and Futuna</option>
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" />Western Sahara</span>'>Western Sahara</option>
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" />Yemen</span>'>Yemen</option>
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" />Zambia</span>'>Zambia</option>
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle mr-2" src="../../assets/vendor/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" />Zimbabwe</span>'>Zimbabwe</option>
</select>
</div>
<!-- End Select -->
<div class="mb-3">
<input type="text" class="form-control" name="city" id="addNewAddressCityLabel" placeholder="City" aria-label="City">
</div>
<input type="text" class="form-control" name="state" id="addNewAddressStateLabel" placeholder="State" aria-label="State">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="addNewAddressLine1Label" class="col-sm-3 col-form-label input-label">Address line 1</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine1" id="addNewAddressLine1Label" placeholder="Your address" aria-label="Your address">
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="row form-group">
<label for="addNewAddressZipCodeLabel" class="col-sm-3 col-form-label input-label">Zip code <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="You can find your code in a postal address."></i></label>
<div class="col-sm-9">
<input type="text" class="js-masked-input form-control" name="zipCode" id="addNewAddressZipCodeLabel" placeholder="Your zip code" aria-label="Your zip code"
data-hs-mask-options='{
"template": "AA0 0AA"
}'>
</div>
</div>
<!-- End Form Group -->
</form>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-white mr-2" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Add New Address Modal -->
<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select2
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>