<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Basic Example
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Use any icon in input group from <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/flaticon' ) ?>">Flaticon</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/fontawesome5' ) ?>">Fontawesome 5</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/duo-tone' ) ?>">Duotone</a>,
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/lineawesome' ) ?>">Lineawesome</a> or
													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/socicons' ) ?>">Socicons</a> icons.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text">@</span></div>
												<input type="text" class="form-control" placeholder="Email" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Addon</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text">@example.com</span></div>
											</div>
										</div>
										<div class="separator separator-dashed my-8"></div>
										<div class="form-group">
											<label>Joint Addons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
													<span class="input-group-text">0.00</span>
												</div>
												<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Addons</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text">#</span></div>
												<input type="text" class="form-control" placeholder="Units" />
												<div class="input-group-append"><span class="input-group-text">px</span></div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										With Icons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Tools/Compass.svg", "svg-icon-primary svg-icon-xl");?></div>
												<div class="alert-text">
													Easily extend form controls by adding text, buttons, icons, or button groups on either side of the input.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
												<input type="text" class="form-control" placeholder="Email" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Addon</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
											</div>
										</div>

										<div class="separator separator-dashed my-8"></div>

										<div class="form-group">
											<label>Joint Addons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" placeholder="0.00" aria-label="Amount (to the nearest dollar)"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-registered"></i></span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Both Addons</label>
											<div class="input-group">
												<div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-refresh"></i></span></div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="flaticon-user"></i></span></div>
											</div>
										</div>
										<div class="form-group">
											<label>Duotone Icons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text line-height-0 py-0">
														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/General/Search.svg");?>
													</span>
												</div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append">
													<span class="input-group-text line-height-0 py-0">
														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Code/Compiling.svg");?>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Keenthemes Icons</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text line-height-0 py-0">
														<i class="ki ki-arrow-back icon-sm"></i>
													</span>
												</div>
												<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
												<div class="input-group-append">
													<span class="input-group-text line-height-0 py-0">
														<i class="ki ki-arrow-next icon-sm"></i>
													</span>
												</div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Sizing
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Add the relative form sizing classes to the <code>.input-group</code> itself and contents within
													will automatically resize.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Large Input Group</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle "></i></span></div>
												<input type="text" class="form-control" placeholder="Large size" />
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Large Input Group</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend">
													<span class="input-group-text"><i class="flaticon-refresh"></i></span>
													<span class="input-group-text">0.00</span>
												</div>
												<input type="text" class="form-control" aria-label="Large size"/>
											</div>
										</div>
										<div class="form-group">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
											</div>
										</div>
										<div class="form-group">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Small Input Group</label>
											<div class="input-group input-group-sm">
												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
												<input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Checkboxes and Radio addons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Place any checkbox or radio option within an input group’s addon instead of text.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline checkbox-success">
															<input type="checkbox" checked=""/>
															<span></span>
														</label>
													</span>
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline checkbox-primary">
															<input type="checkbox" checked=""/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Right & Left Checkbox Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline">
															<input type="checkbox" checked="checked"/>
															<span></span>
														</label>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with checkbox"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="checkbox checkbox-inline">
															<input type="checkbox"/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="radio radio-single radio-success">
															<input type="radio" checked=""/>
															<span></span>
														</label>
													</span>
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">$</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="radio radio-single radio-primary">
															<input type="radio" checked=""/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Right & Left Radio Addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<label class="radio radio-single">
															<input type="radio"/>
															<span></span>
														</label>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Text input with radio"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<label class="radio radio-single">
															<input type="radio"/>
															<span></span>
														</label>
													</span>
												</div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Button Addons
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													Buttons in input groups must wrapped in a <code>.input-group-prepend</code> or <code>.input-group-append</code> for proper alignment and sizing.
												This is required due to default browser styles that cannot be overridden.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Addon Button</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left & Right Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-secondary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-primary" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
											</div>
										</div>
										<div class="form-group">
											<label>Right Addon Button</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-primary" type="button">Go!</button>
												</div>
											</div>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Addon Button</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button class="btn btn-success" type="button">Go!</button>
												</div>
												<input type="text" class="form-control" placeholder="Search for..."/>
												<div class="input-group-append">
													<button class="btn btn-warning" type="button">Go!</button>
												</div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Buttons With Dropdowns
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<div class="alert alert-custom alert-default" role="alert">
												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
												<div class="alert-text">
													The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>Left Button Dropdown</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group">
											<label>Right Button Dropdown</label>
											<div class="input-group">
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
										<div class="form-group mb-2">
											<label>Left & Right Button Dropdown</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
												<input type="text" class="form-control" aria-label="Text input with dropdown button"/>
												<div class="input-group-append">
													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
													Action
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
														<div role="separator" class="dropdown-divider"></div>
														<a class="dropdown-item" href="#">Separated link</a>
													</div>
												</div>
											</div>
											<span class="form-text text-muted">Some help content goes here</span>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>
								<!--end::Form-->
							</div>