<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>