Modal Window

<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#subscribeModal"
   data-modal-target="#subscribeModal">
  Open Subscribe Modal
</a>
<!-- End Modal Window Trigger -->

<!-- Subscribe Modal Window -->
<div id="subscribeModal" class="js-modal-window svg-preloader u-modal-window position-relative" style="width: 600px;">
  <!-- Modal Close Button -->
  <button type="button" class="close close-light position-absolute top-0 right-0 z-index-2 p-2" aria-label="Close" onclick="Custombox.modal.close();">
    <span aria-hidden="true">×</span>
  </button>
  <!-- End Modal Close Button -->

  <div class="card border-0 bg-primary text-white text-center py-5 px-md-5">
    <div class="card-body">
      <!-- Title -->
      <div class="mb-4">
        <h4 class="h1 font-weight-semi-bold mb-1">Subscribe</h4>
        <p class="text-white-70 mb-0">Get the latest updates from Front.</p>
      </div>
      <!-- End Title -->

      <!-- SVG Icon -->
      <figure class="w-80 mx-auto mb-1 ie-subscribe-2-flat-icons">
        <img class="js-svg-injector" src="../../assets/svg/flat-icons/subscribe-2.svg" alt="Image Description"
             data-parent="#subscribeModal">
      </figure>
      <!-- End SVG Icon -->

      <!-- Subscribe Form -->
      <form class="js-validate js-form-message w-80 mx-auto">
        <label class="sr-only" for="subscribeSrEmail">Enter your email address</label>
        <div class="input-group input-group-borderless">
          <input type="email" class="form-control" name="email" id="subscribeSrEmail" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeButton" required
                 data-msg="Please enter a valid email address.">
          <div class="input-group-append">
            <button type="button" class="btn btn-success" id="subscribeButton">Subscribe</button>
          </div>
        </div>
      </form>
      <!-- End Subscribe Form -->
    </div>

    <!-- SVG Background Shape -->
    <div class="w-100 content-centered-y z-index-n1">
      <figure class="ie-bg-elements-1">
        <img class="js-svg-injector" src="../../assets/svg/components/bg-elements-1.svg" alt="Image Description"
             data-parent="#subscribeModal">
      </figure>
    </div>
    <!-- End SVG Background Shape -->
  </div>
</div>
<!-- End Subscribe Modal Window -->

<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(window).on('load', function () {
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
      autonomous: true
    });
  });
</script>

<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#loginModal"
   data-modal-target="#loginModal">
  Open Account Modal
</a>
<!-- End Modal Window Trigger -->

 <!-- Account Modal Window -->
<div id="loginModal" class="js-modal-window u-modal-window" style="width: 400px;">
  <div class="card">
    <form class="js-validate">
      <!-- Login -->
      <div id="login" data-target-group="idForm">
        <!-- Header -->
        <header class="card-header bg-light py-3 px-5">
          <div class="d-flex justify-content-between align-items-center">
            <h3 class="h6 mb-0">Welcome Back!</h3>

            <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
              <span aria-hidden="true">×</span>
            </button>
          </div>
        </header>
        <!-- End Header -->

        <div class="card-body p-5">
          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="signinSrEmail">Email</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="signinEmail">
                    <span class="fas fa-user"></span>
                  </span>
                </div>
                <input type="email" class="form-control" name="email" id="signinSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signinEmail" required
                       data-msg="Please enter a valid email address."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Form Group -->

          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="signinSrPassword">Password</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="signinPassword">
                    <span class="fas fa-lock"></span>
                  </span>
                </div>
                <input type="password" class="form-control" name="password" id="signinSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signinPassword" required
                       data-msg="Your password is invalid. Please try again."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Form Group -->

          <div class="d-flex justify-content-end mb-4">
            <a class="js-animation-link small link-muted" href="javascript:;"
               data-target="#forgotPassword"
               data-link-group="idForm"
               data-animation-in="fadeIn">Forgot Password?</a>
          </div>

          <div class="mb-2">
            <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Login</button>
          </div>

          <div class="text-center mb-4">
            <span class="small text-muted">Do not have an account?</span>
            <a class="js-animation-link small" href="javascript:;"
               data-target="#signup"
               data-link-group="idForm"
               data-animation-in="fadeIn">Signup
            </a>
          </div>

          <div class="text-center">
            <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
          </div>

          <!-- Login Buttons -->
          <div class="d-flex">
            <a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
              <span class="fab fa-facebook-square mr-1"></span>
              Facebook
            </a>
            <a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
              <span class="fab fa-google mr-1"></span>
              Google
            </a>
          </div>
          <!-- End Login Buttons -->
        </div>
      </div>

      <!-- Signup -->
      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Header -->
        <header class="card-header bg-light py-3 px-5">
          <div class="d-flex justify-content-between align-items-center">
            <h3 class="h6 mb-0">Welcome to Front.</h3>

            <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
              <span aria-hidden="true">×</span>
            </button>
          </div>
        </header>
        <!-- End Header -->

        <div class="card-body p-5">
          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="signupSrEmail">Email</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="signupEmail">
                    <span class="fas fa-user"></span>
                  </span>
                </div>
                <input type="email" class="form-control" name="email" id="signupSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signupEmail" required
                       data-msg="Please enter a valid email address."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Input -->

          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="signupSrPassword">Password</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="signupPassword">
                    <span class="fas fa-lock"></span>
                  </span>
                </div>
                <input type="password" class="form-control" name="password" id="signupSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signupPassword" required
                       data-msg="Your password is invalid. Please try again."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Input -->

          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="signupSrConfirmPassword">Confirm Password</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="signupConfirmPassword">
                    <span class="fas fa-key"></span>
                  </span>
                </div>
                <input type="password" class="form-control" name="confirmPassword" id="signupSrConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="signupConfirmPassword" required
                       data-msg="Password does not match the confirm password."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Input -->

          <div class="mb-2">
            <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Get Started</button>
          </div>

          <div class="text-center mb-4">
            <span class="small text-muted">Already have an account?</span>
            <a class="js-animation-link small" href="javascript:;"
               data-target="#login"
               data-link-group="idForm"
               data-animation-in="fadeIn">Login
            </a>
          </div>

          <div class="text-center">
            <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
          </div>

          <!-- Login Buttons -->
          <div class="d-flex">
            <a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
              <span class="fab fa-facebook-square mr-1"></span>
              Facebook
            </a>
            <a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
              <span class="fab fa-google mr-1"></span>
              Google
            </a>
          </div>
          <!-- End Login Buttons -->
        </div>
      </div>
      <!-- End Signup -->

      <!-- Forgot Password -->
      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
        <!-- Header -->
        <header class="card-header bg-light py-3 px-5">
          <div class="d-flex justify-content-between align-items-center">
            <h3 class="h6 mb-0">Recover Password.</h3>

            <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
              <span aria-hidden="true">×</span>
            </button>
          </div>
        </header>
        <!-- End Header -->

        <div class="card-body p-5">
          <!-- Form Group -->
          <div class="form-group">
            <div class="js-form-message js-focus-state">
              <label class="sr-only" for="recoverSrEmail">Your email</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="recoverEmail">
                    <span class="fas fa-user"></span>
                  </span>
                </div>
                <input type="email" class="form-control" name="email" id="recoverSrEmail" placeholder="Your email" aria-label="Your email" aria-describedby="recoverEmail" required
                       data-msg="Please enter a valid email address."
                       data-error-class="u-has-error"
                       data-success-class="u-has-success">
              </div>
            </div>
          </div>
          <!-- End Form Group -->

          <div class="mb-2">
            <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Recover Password</button>
          </div>

          <div class="text-center mb-4">
            <span class="small text-muted">Remember your password?</span>
            <a class="js-animation-link small" href="javascript:;"
               data-target="#login"
               data-link-group="idForm"
               data-animation-in="fadeIn">Login
            </a>
          </div>
        </div>
      </div>
      <!-- End Forgot Password -->
    </form>
  </div>
</div>
<!-- End Account Modal Window -->

<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
      autonomous: true
    });

    // initialization of forms
    $.HSCore.components.HSFocusState.init();

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate', {
      rules: {
        confirmPassword: {
          equalTo: '#signupPassword'
        }
      }
    });

    // initialization of show animations
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>

<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#emptyShoppingCartModal"
   data-modal-target="#emptyShoppingCartModal">
  Open Shopping Empty Cart Modal
</a>
<!-- End Modal Window Trigger -->

<!-- Shopping Cart Modal Window -->
<div id="emptyShoppingCartModal" class="js-modal-window u-modal-window" style="width: 370px;">
  <div class="card">
    <!-- Header -->
    <header class="card-header bg-light py-3 px-5">
      <div class="d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0">Your Shopping Cart</h3>

        <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </header>
    <!-- End Header -->

    <!-- Body -->
    <div class="card-body text-center p-5">
      <span class="btn btn-icon btn-soft-primary rounded-circle">
        <span class="fas fa-shopping-basket btn-icon__inner"></span>
      </span>
    </div>
    <!-- End Body -->

    <!-- Footer -->
    <div class="card-footer text-center p-5">
      <div class="mb-3">
        <span class="d-block font-weight-semi-bold">Order Total</span>
        <span class="d-block">$56.99</span>
      </div>
      <div class="mb-2">
        <a class="btn btn-sm btn-soft-primary disabled transition-3d-hover" href="#">Review Bag and Checkout</a>
      </div>
      <p class="small mb-0"><a class="link-muted" href="javascript:;">Start Shopping</a></p>
    </div>
    <!-- End Footer -->
  </div>
</div>
<!-- End Shopping Cart Modal Window -->

<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
      autonomous: true
    });
  });
</script>

<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#shoppingCartWithItemsModal"
   data-modal-target="#shoppingCartWithItemsModal">
  Open Shopping Cart with Items Modal
</a>
<!-- End Modal Window Trigger -->

<!-- Shopping Cart Modal Window -->
<div id="shoppingCartWithItemsModal" class="js-modal-window u-modal-window" style="width: 370px;">
  <div class="card">
    <!-- Header -->
    <header class="card-header bg-light py-3 px-5">
      <div class="d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0">Your Shopping Cart</h3>

        <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </header>
    <!-- End Header -->

    <!-- Body -->
    <div class="card-body p-5">
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded" src="../assets/img/100x100/img14.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <div class="d-flex justify-content-between align-items-center">
            <span class="d-block font-weight-semi-bold">Nike</span>
            <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <span class="d-block font-size-1">Flex 2017 RN Lightweight Casual Hoodie - Men's</span>
          <span class="d-block text-primary font-weight-semi-bold">$56.99</span>
          <small class="d-block text-muted">Color: Red</small>
          <small class="d-block text-muted">Size: 8 Medium</small>
          <small class="d-block text-muted">Quantity: 1</small>
        </div>
      </div>
    </div>
    <!-- End Body -->

    <!-- Footer -->
    <div class="card-footer text-center p-5">
      <div class="mb-3">
        <span class="d-block font-weight-semi-bold">Order Total</span>
        <span class="d-block">$56.99</span>
      </div>
      <div class="mb-2">
        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
      </div>
      <p class="small mb-0"><a class="link-muted" href="javascript:;">Continue Shopping</a></p>
    </div>
    <!-- End Footer -->
  </div>
</div>
<!-- End Shopping Cart Modal Window -->

<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
      autonomous: true
    });
  });
</script>

<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#requestPaymentModal"
   data-modal-target="#requestPaymentModal">
  Open Request a Payment Modal
</a>
<!-- End Modal Window Trigger -->

<!-- Request Payment Modal Window -->
<div id="requestPaymentModal" class="js-modal-window u-modal-window" style="width: 600px;">
  <div class="card mb-9">
    <!-- Header -->
    <header class="card-header bg-light py-3 px-5">
      <div class="d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0">Request a payment</h3>

        <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </header>
    <!-- End Header -->

    <div class="card-body bg-white">
      <!-- Request Payment Form -->
      <form class="js-validate js-step-form"
            data-progress-id="#progressStepForm"
            data-steps-id="#contentStepForm"
            novalidate="novalidate">
        <!-- Progress Step Form -->
        <nav id="progressStepForm" class="js-step-progress nav nav-icon nav-justified text-center p-5">
          <a class="nav-item" href="javascript:;">
            <span class="nav-icon-action">
              <span class="fas fa-user-circle nav-icon-action-inner"></span>
            </span>
            <span class="d-none d-sm-block">Select payer</span>
          </a>
          <a class="nav-item" href="javascript:;">
            <span class="nav-icon-action">
              <span class="fas fa-file-invoice-dollar nav-icon-action-inner"></span>
            </span>
            <span class="d-none d-sm-block">Payment details</span>
          </a>
          <a class="nav-item" href="javascript:;">
            <span class="nav-icon-action">
              <span class="fas fa-paperclip nav-icon-action-inner"></span>
            </span>
            <span class="d-none d-sm-block">Attachment</span>
          </a>
        </nav>
        <!-- End Progress Step Form -->

        <hr class="my-0">

        <!-- Content Step Form -->
        <div id="contentStepForm" class="p-5">
          <div id="selectPlayerStep" class="active">
            <!-- Recent Payers List -->
            <div id="recentPayersList" data-target-group="idAddNewPayer">
              <!-- Link -->
              <div class="d-flex justify-content-end mb-3">
                <a class="js-animation-link d-inline-block small link-muted" href="javascript:;"
                   data-target="#addNewPayer"
                   data-link-group="idAddNewPayer">
                  <span class="fas fa-plus mr-1"></span>
                  Add new payer
                </a>
              </div>
              <!-- End Link -->

              <!-- Add Members -->
              <div class="mb-4">
                <input class="form-control" type="email" placeholder="Enter email, name, or company" aria-label="Enter email, name, or company">
              </div>
              <!-- End Add Members -->

              <!-- Most Recent Payers List -->
              <div class="mb-4">
                <!-- Payers List -->
                <a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
                  <div class="card-body align-items-sm-center p-2">
                    <div class="media align-items-center">
                      <div class="u-avatar mr-3">
                        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h4 class="h6 mb-0">Sebastian Diaz</h4>
                        <small class="d-block text-secondary">sebastiandiaz@gmail.com</small>
                      </div>
                    </div>
                  </div>
                </a>
                <!-- End Payers List -->

                <!-- Payers List -->
                <a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
                  <div class="card-body align-items-sm-center p-2">
                    <div class="media align-items-center">
                      <span class="btn btn-icon btn-soft-success rounded-circle mr-3">
                        <span class="btn-icon__inner">CL</span>
                      </span>
                      <div class="media-body">
                        <h4 class="h6 mb-0">Cler Lockhart</h4>
                        <small class="d-block text-secondary">clerlockhart@gmail.com</small>
                      </div>
                    </div>
                  </div>
                </a>
                <!-- End Payers List -->

                <!-- Payers List -->
                <a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
                  <div class="card-body align-items-sm-center p-2">
                    <div class="media align-items-center">
                      <div class="u-avatar mr-3">
                        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h4 class="h6 mb-0">Joseph Mack</h4>
                        <small class="d-block text-secondary">josephmack@gmail.com</small>
                      </div>
                    </div>
                  </div>
                </a>
                <!-- End Payers List -->

                <!-- Payers List -->
                <a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
                  <div class="card-body align-items-sm-center p-2">
                    <div class="media align-items-center">
                      <div class="u-avatar mr-3">
                        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h4 class="h6 mb-0">Eliza Donovan</h4>
                        <small class="d-block text-secondary">eliz@gmail.com</small>
                      </div>
                    </div>
                  </div>
                </a>
                <!-- End Payers List -->
              </div>
              <!-- End Most Recent Payers List -->
            </div>
            <!-- End Recent Payers List -->

            <!-- Add New Payer -->
            <div id="addNewPayer" data-target-group="idAddNewPayer" style="display: none;">
              <!-- Button Group -->
              <div class="btn-group btn-group-toggle d-flex mb-5">
                <a class="js-animation-link btn btn-sm btn-soft-secondary flex-fill active" href="javascript:;"
                   data-target="#companyType"
                   data-link-group="idPayerType">
                  Company
                </a>
                <a class="js-animation-link btn btn-sm btn-soft-secondary flex-fill" href="javascript:;"
                   data-target="#individualType"
                   data-link-group="idPayerType">
                  Individual
                </a>
              </div>
              <!-- End Button Group -->

              <!-- Company Type Payer -->
              <div id="companyType" data-target-group="idPayerType">
                <div class="row">
                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="companyNameLabel" class="h6 small d-block text-uppercase">Company name</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="companyName" placeholder="Pixeel" aria-label="Pixeel" required
                               data-msg="Please enter a valid name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="websiteURLLabel" class="h6 small d-block text-uppercase">Website URL</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="URL" class="form-control" name="websiteURL" placeholder="example.com" aria-label="example.com" required
                               data-msg="Please enter a valid website URL."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="contactFirstNameLabel" class="h6 small d-block text-uppercase">Contact first name</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="contactFirstNameCompany" placeholder="Brian" aria-label="Brian" required
                               data-msg="Please enter a valid name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="contactLastNameLabel" class="h6 small d-block text-uppercase">Contact last name</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="contactLastNameCompany" placeholder="Williams" aria-label="Williams" required
                               data-msg="Please enter a valid name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="emailLabel" class="h6 small d-block text-uppercase">Email</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="email" class="form-control" name="emailCompany" required placeholder="example@gmail.com" aria-label="example@gmail.com"
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label class="form-label">Country</label>
                    <div class="js-form-message">
                      <div class="input-group">
                        <select class="form-control custom-select custom-select-sm" required
                                data-msg="Please select country."
                                data-error-class="u-has-error"
                                data-success-class="u-has-success">
                          <option value="">Select country</option>
                          <option value="AF">Afghanistan</option>
                          <option value="AX">Åland Islands</option>
                          <option value="AL">Albania</option>
                          <option value="DZ">Algeria</option>
                          <option value="AS">American Samoa</option>
                          <option value="AD">Andorra</option>
                          <option value="AO">Angola</option>
                          <option value="AI">Anguilla</option>
                          <option value="AQ">Antarctica</option>
                          <option value="AG">Antigua and Barbuda</option>
                          <option value="AR">Argentina</option>
                          <option value="AM">Armenia</option>
                          <option value="AW">Aruba</option>
                          <option value="AU">Australia</option>
                          <option value="AT">Austria</option>
                          <option value="AZ">Azerbaijan</option>
                          <option value="BS">Bahamas</option>
                          <option value="BH">Bahrain</option>
                          <option value="BD">Bangladesh</option>
                          <option value="BB">Barbados</option>
                          <option value="BY">Belarus</option>
                          <option value="BE">Belgium</option>
                          <option value="BZ">Belize</option>
                          <option value="BJ">Benin</option>
                          <option value="BM">Bermuda</option>
                          <option value="BT">Bhutan</option>
                          <option value="BO">Bolivia, Plurinational State of</option>
                          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                          <option value="BA">Bosnia and Herzegovina</option>
                          <option value="BW">Botswana</option>
                          <option value="BV">Bouvet Island</option>
                          <option value="BR">Brazil</option>
                          <option value="IO">British Indian Ocean Territory</option>
                          <option value="BN">Brunei Darussalam</option>
                          <option value="BG">Bulgaria</option>
                          <option value="BF">Burkina Faso</option>
                          <option value="BI">Burundi</option>
                          <option value="KH">Cambodia</option>
                          <option value="CM">Cameroon</option>
                          <option value="CA">Canada</option>
                          <option value="CV">Cape Verde</option>
                          <option value="KY">Cayman Islands</option>
                          <option value="CF">Central African Republic</option>
                          <option value="TD">Chad</option>
                          <option value="CL">Chile</option>
                          <option value="CN">China</option>
                          <option value="CX">Christmas Island</option>
                          <option value="CC">Cocos (Keeling) Islands</option>
                          <option value="CO">Colombia</option>
                          <option value="KM">Comoros</option>
                          <option value="CG">Congo</option>
                          <option value="CD">Congo, the Democratic Republic of the</option>
                          <option value="CK">Cook Islands</option>
                          <option value="CR">Costa Rica</option>
                          <option value="CI">Côte d'Ivoire</option>
                          <option value="HR">Croatia</option>
                          <option value="CU">Cuba</option>
                          <option value="CW">Curaçao</option>
                          <option value="CY">Cyprus</option>
                          <option value="CZ">Czech Republic</option>
                          <option value="DK">Denmark</option>
                          <option value="DJ">Djibouti</option>
                          <option value="DM">Dominica</option>
                          <option value="DO">Dominican Republic</option>
                          <option value="EC">Ecuador</option>
                          <option value="EG">Egypt</option>
                          <option value="SV">El Salvador</option>
                          <option value="GQ">Equatorial Guinea</option>
                          <option value="ER">Eritrea</option>
                          <option value="EE">Estonia</option>
                          <option value="ET">Ethiopia</option>
                          <option value="FK">Falkland Islands (Malvinas)</option>
                          <option value="FO">Faroe Islands</option>
                          <option value="FJ">Fiji</option>
                          <option value="FI">Finland</option>
                          <option value="FR">France</option>
                          <option value="GF">French Guiana</option>
                          <option value="PF">French Polynesia</option>
                          <option value="TF">French Southern Territories</option>
                          <option value="GA">Gabon</option>
                          <option value="GM">Gambia</option>
                          <option value="GE">Georgia</option>
                          <option value="DE">Germany</option>
                          <option value="GH">Ghana</option>
                          <option value="GI">Gibraltar</option>
                          <option value="GR">Greece</option>
                          <option value="GL">Greenland</option>
                          <option value="GD">Grenada</option>
                          <option value="GP">Guadeloupe</option>
                          <option value="GU">Guam</option>
                          <option value="GT">Guatemala</option>
                          <option value="GG">Guernsey</option>
                          <option value="GN">Guinea</option>
                          <option value="GW">Guinea-Bissau</option>
                          <option value="GY">Guyana</option>
                          <option value="HT">Haiti</option>
                          <option value="HM">Heard Island and McDonald Islands</option>
                          <option value="VA">Holy See (Vatican City State)</option>
                          <option value="HN">Honduras</option>
                          <option value="HK">Hong Kong</option>
                          <option value="HU">Hungary</option>
                          <option value="IS">Iceland</option>
                          <option value="IN">India</option>
                          <option value="ID">Indonesia</option>
                          <option value="IR">Iran, Islamic Republic of</option>
                          <option value="IQ">Iraq</option>
                          <option value="IE">Ireland</option>
                          <option value="IM">Isle of Man</option>
                          <option value="IL">Israel</option>
                          <option value="IT">Italy</option>
                          <option value="JM">Jamaica</option>
                          <option value="JP">Japan</option>
                          <option value="JE">Jersey</option>
                          <option value="JO">Jordan</option>
                          <option value="KZ">Kazakhstan</option>
                          <option value="KE">Kenya</option>
                          <option value="KI">Kiribati</option>
                          <option value="KP">Korea, Democratic People's Republic of</option>
                          <option value="KR">Korea, Republic of</option>
                          <option value="KW">Kuwait</option>
                          <option value="KG">Kyrgyzstan</option>
                          <option value="LA">Lao People's Democratic Republic</option>
                          <option value="LV">Latvia</option>
                          <option value="LB">Lebanon</option>
                          <option value="LS">Lesotho</option>
                          <option value="LR">Liberia</option>
                          <option value="LY">Libya</option>
                          <option value="LI">Liechtenstein</option>
                          <option value="LT">Lithuania</option>
                          <option value="LU">Luxembourg</option>
                          <option value="MO">Macao</option>
                          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                          <option value="MG">Madagascar</option>
                          <option value="MW">Malawi</option>
                          <option value="MY">Malaysia</option>
                          <option value="MV">Maldives</option>
                          <option value="ML">Mali</option>
                          <option value="MT">Malta</option>
                          <option value="MH">Marshall Islands</option>
                          <option value="MQ">Martinique</option>
                          <option value="MR">Mauritania</option>
                          <option value="MU">Mauritius</option>
                          <option value="YT">Mayotte</option>
                          <option value="MX">Mexico</option>
                          <option value="FM">Micronesia, Federated States of</option>
                          <option value="MD">Moldova, Republic of</option>
                          <option value="MC">Monaco</option>
                          <option value="MN">Mongolia</option>
                          <option value="ME">Montenegro</option>
                          <option value="MS">Montserrat</option>
                          <option value="MA">Morocco</option>
                          <option value="MZ">Mozambique</option>
                          <option value="MM">Myanmar</option>
                          <option value="NA">Namibia</option>
                          <option value="NR">Nauru</option>
                          <option value="NP">Nepal</option>
                          <option value="NL">Netherlands</option>
                          <option value="NC">New Caledonia</option>
                          <option value="NZ">New Zealand</option>
                          <option value="NI">Nicaragua</option>
                          <option value="NE">Niger</option>
                          <option value="NG">Nigeria</option>
                          <option value="NU">Niue</option>
                          <option value="NF">Norfolk Island</option>
                          <option value="MP">Northern Mariana Islands</option>
                          <option value="NO">Norway</option>
                          <option value="OM">Oman</option>
                          <option value="PK">Pakistan</option>
                          <option value="PW">Palau</option>
                          <option value="PS">Palestinian Territory, Occupied</option>
                          <option value="PA">Panama</option>
                          <option value="PG">Papua New Guinea</option>
                          <option value="PY">Paraguay</option>
                          <option value="PE">Peru</option>
                          <option value="PH">Philippines</option>
                          <option value="PN">Pitcairn</option>
                          <option value="PL">Poland</option>
                          <option value="PT">Portugal</option>
                          <option value="PR">Puerto Rico</option>
                          <option value="QA">Qatar</option>
                          <option value="RE">Réunion</option>
                          <option value="RO">Romania</option>
                          <option value="RU">Russian Federation</option>
                          <option value="RW">Rwanda</option>
                          <option value="BL">Saint Barthélemy</option>
                          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                          <option value="KN">Saint Kitts and Nevis</option>
                          <option value="LC">Saint Lucia</option>
                          <option value="MF">Saint Martin (French part)</option>
                          <option value="PM">Saint Pierre and Miquelon</option>
                          <option value="VC">Saint Vincent and the Grenadines</option>
                          <option value="WS">Samoa</option>
                          <option value="SM">San Marino</option>
                          <option value="ST">Sao Tome and Principe</option>
                          <option value="SA">Saudi Arabia</option>
                          <option value="SN">Senegal</option>
                          <option value="RS">Serbia</option>
                          <option value="SC">Seychelles</option>
                          <option value="SL">Sierra Leone</option>
                          <option value="SG">Singapore</option>
                          <option value="SX">Sint Maarten (Dutch part)</option>
                          <option value="SK">Slovakia</option>
                          <option value="SI">Slovenia</option>
                          <option value="SB">Solomon Islands</option>
                          <option value="SO">Somalia</option>
                          <option value="ZA">South Africa</option>
                          <option value="GS">South Georgia and the South Sandwich Islands</option>
                          <option value="SS">South Sudan</option>
                          <option value="ES">Spain</option>
                          <option value="LK">Sri Lanka</option>
                          <option value="SD">Sudan</option>
                          <option value="SR">Suriname</option>
                          <option value="SJ">Svalbard and Jan Mayen</option>
                          <option value="SZ">Swaziland</option>
                          <option value="SE">Sweden</option>
                          <option value="CH">Switzerland</option>
                          <option value="SY">Syrian Arab Republic</option>
                          <option value="TW">Taiwan, Province of China</option>
                          <option value="TJ">Tajikistan</option>
                          <option value="TZ">Tanzania, United Republic of</option>
                          <option value="TH">Thailand</option>
                          <option value="TL">Timor-Leste</option>
                          <option value="TG">Togo</option>
                          <option value="TK">Tokelau</option>
                          <option value="TO">Tonga</option>
                          <option value="TT">Trinidad and Tobago</option>
                          <option value="TN">Tunisia</option>
                          <option value="TR">Turkey</option>
                          <option value="TM">Turkmenistan</option>
                          <option value="TC">Turks and Caicos Islands</option>
                          <option value="TV">Tuvalu</option>
                          <option value="UG">Uganda</option>
                          <option value="UA">Ukraine</option>
                          <option value="AE">United Arab Emirates</option>
                          <option value="GB">United Kingdom</option>
                          <option value="US">United States</option>
                          <option value="UM">United States Minor Outlying Islands</option>
                          <option value="UY">Uruguay</option>
                          <option value="UZ">Uzbekistan</option>
                          <option value="VU">Vanuatu</option>
                          <option value="VE">Venezuela, Bolivarian Republic of</option>
                          <option value="VN">Viet Nam</option>
                          <option value="VG">Virgin Islands, British</option>
                          <option value="VI">Virgin Islands, U.S.</option>
                          <option value="WF">Wallis and Futuna</option>
                          <option value="EH">Western Sahara</option>
                          <option value="YE">Yemen</option>
                          <option value="ZM">Zambia</option>
                          <option value="ZW">Zimbabwe</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->
                </div>
              </div>
              <!-- End Company Type Payer -->

              <!-- Individual Type Payer -->
              <div id="individualType" data-target-group="idPayerType" style="display: none;">
                <div class="row">
                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="IndivContactFirstNameLabel" class="h6 small d-block text-uppercase">Contact first name</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="contactFirstNameIndividual" placeholder="Brian" aria-label="Brian" required
                               data-msg="Please enter a valid name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="indivContactLastNameLabel" class="h6 small d-block text-uppercase">Contact last name</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="contactLasttNameIndividual" placeholder="Williams" aria-label="Williams" required
                               data-msg="Please enter a valid name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label id="IndivemailLabel" class="h6 small d-block text-uppercase">Email</label>
                    <div class="js-form-message">
                      <div class="input-group input-group-sm">
                        <input type="email" class="form-control" name="emailIndividual" placeholder="example@gmail.com" aria-label="example@gmail.com" required
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="col-sm-6 mb-4">
                    <label class="form-label">Country</label>
                    <div class="js-form-message">
                      <div class="input-group">
                        <select class="form-control custom-select custom-select-sm" required
                                data-msg="Please select country."
                                data-error-class="u-has-error"
                                data-success-class="u-has-success">
                          <option value="">Select country</option>
                          <option value="AF">Afghanistan</option>
                          <option value="AX">Åland Islands</option>
                          <option value="AL">Albania</option>
                          <option value="DZ">Algeria</option>
                          <option value="AS">American Samoa</option>
                          <option value="AD">Andorra</option>
                          <option value="AO">Angola</option>
                          <option value="AI">Anguilla</option>
                          <option value="AQ">Antarctica</option>
                          <option value="AG">Antigua and Barbuda</option>
                          <option value="AR">Argentina</option>
                          <option value="AM">Armenia</option>
                          <option value="AW">Aruba</option>
                          <option value="AU">Australia</option>
                          <option value="AT">Austria</option>
                          <option value="AZ">Azerbaijan</option>
                          <option value="BS">Bahamas</option>
                          <option value="BH">Bahrain</option>
                          <option value="BD">Bangladesh</option>
                          <option value="BB">Barbados</option>
                          <option value="BY">Belarus</option>
                          <option value="BE">Belgium</option>
                          <option value="BZ">Belize</option>
                          <option value="BJ">Benin</option>
                          <option value="BM">Bermuda</option>
                          <option value="BT">Bhutan</option>
                          <option value="BO">Bolivia, Plurinational State of</option>
                          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                          <option value="BA">Bosnia and Herzegovina</option>
                          <option value="BW">Botswana</option>
                          <option value="BV">Bouvet Island</option>
                          <option value="BR">Brazil</option>
                          <option value="IO">British Indian Ocean Territory</option>
                          <option value="BN">Brunei Darussalam</option>
                          <option value="BG">Bulgaria</option>
                          <option value="BF">Burkina Faso</option>
                          <option value="BI">Burundi</option>
                          <option value="KH">Cambodia</option>
                          <option value="CM">Cameroon</option>
                          <option value="CA">Canada</option>
                          <option value="CV">Cape Verde</option>
                          <option value="KY">Cayman Islands</option>
                          <option value="CF">Central African Republic</option>
                          <option value="TD">Chad</option>
                          <option value="CL">Chile</option>
                          <option value="CN">China</option>
                          <option value="CX">Christmas Island</option>
                          <option value="CC">Cocos (Keeling) Islands</option>
                          <option value="CO">Colombia</option>
                          <option value="KM">Comoros</option>
                          <option value="CG">Congo</option>
                          <option value="CD">Congo, the Democratic Republic of the</option>
                          <option value="CK">Cook Islands</option>
                          <option value="CR">Costa Rica</option>
                          <option value="CI">Côte d'Ivoire</option>
                          <option value="HR">Croatia</option>
                          <option value="CU">Cuba</option>
                          <option value="CW">Curaçao</option>
                          <option value="CY">Cyprus</option>
                          <option value="CZ">Czech Republic</option>
                          <option value="DK">Denmark</option>
                          <option value="DJ">Djibouti</option>
                          <option value="DM">Dominica</option>
                          <option value="DO">Dominican Republic</option>
                          <option value="EC">Ecuador</option>
                          <option value="EG">Egypt</option>
                          <option value="SV">El Salvador</option>
                          <option value="GQ">Equatorial Guinea</option>
                          <option value="ER">Eritrea</option>
                          <option value="EE">Estonia</option>
                          <option value="ET">Ethiopia</option>
                          <option value="FK">Falkland Islands (Malvinas)</option>
                          <option value="FO">Faroe Islands</option>
                          <option value="FJ">Fiji</option>
                          <option value="FI">Finland</option>
                          <option value="FR">France</option>
                          <option value="GF">French Guiana</option>
                          <option value="PF">French Polynesia</option>
                          <option value="TF">French Southern Territories</option>
                          <option value="GA">Gabon</option>
                          <option value="GM">Gambia</option>
                          <option value="GE">Georgia</option>
                          <option value="DE">Germany</option>
                          <option value="GH">Ghana</option>
                          <option value="GI">Gibraltar</option>
                          <option value="GR">Greece</option>
                          <option value="GL">Greenland</option>
                          <option value="GD">Grenada</option>
                          <option value="GP">Guadeloupe</option>
                          <option value="GU">Guam</option>
                          <option value="GT">Guatemala</option>
                          <option value="GG">Guernsey</option>
                          <option value="GN">Guinea</option>
                          <option value="GW">Guinea-Bissau</option>
                          <option value="GY">Guyana</option>
                          <option value="HT">Haiti</option>
                          <option value="HM">Heard Island and McDonald Islands</option>
                          <option value="VA">Holy See (Vatican City State)</option>
                          <option value="HN">Honduras</option>
                          <option value="HK">Hong Kong</option>
                          <option value="HU">Hungary</option>
                          <option value="IS">Iceland</option>
                          <option value="IN">India</option>
                          <option value="ID">Indonesia</option>
                          <option value="IR">Iran, Islamic Republic of</option>
                          <option value="IQ">Iraq</option>
                          <option value="IE">Ireland</option>
                          <option value="IM">Isle of Man</option>
                          <option value="IL">Israel</option>
                          <option value="IT">Italy</option>
                          <option value="JM">Jamaica</option>
                          <option value="JP">Japan</option>
                          <option value="JE">Jersey</option>
                          <option value="JO">Jordan</option>
                          <option value="KZ">Kazakhstan</option>
                          <option value="KE">Kenya</option>
                          <option value="KI">Kiribati</option>
                          <option value="KP">Korea, Democratic People's Republic of</option>
                          <option value="KR">Korea, Republic of</option>
                          <option value="KW">Kuwait</option>
                          <option value="KG">Kyrgyzstan</option>
                          <option value="LA">Lao People's Democratic Republic</option>
                          <option value="LV">Latvia</option>
                          <option value="LB">Lebanon</option>
                          <option value="LS">Lesotho</option>
                          <option value="LR">Liberia</option>
                          <option value="LY">Libya</option>
                          <option value="LI">Liechtenstein</option>
                          <option value="LT">Lithuania</option>
                          <option value="LU">Luxembourg</option>
                          <option value="MO">Macao</option>
                          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                          <option value="MG">Madagascar</option>
                          <option value="MW">Malawi</option>
                          <option value="MY">Malaysia</option>
                          <option value="MV">Maldives</option>
                          <option value="ML">Mali</option>
                          <option value="MT">Malta</option>
                          <option value="MH">Marshall Islands</option>
                          <option value="MQ">Martinique</option>
                          <option value="MR">Mauritania</option>
                          <option value="MU">Mauritius</option>
                          <option value="YT">Mayotte</option>
                          <option value="MX">Mexico</option>
                          <option value="FM">Micronesia, Federated States of</option>
                          <option value="MD">Moldova, Republic of</option>
                          <option value="MC">Monaco</option>
                          <option value="MN">Mongolia</option>
                          <option value="ME">Montenegro</option>
                          <option value="MS">Montserrat</option>
                          <option value="MA">Morocco</option>
                          <option value="MZ">Mozambique</option>
                          <option value="MM">Myanmar</option>
                          <option value="NA">Namibia</option>
                          <option value="NR">Nauru</option>
                          <option value="NP">Nepal</option>
                          <option value="NL">Netherlands</option>
                          <option value="NC">New Caledonia</option>
                          <option value="NZ">New Zealand</option>
                          <option value="NI">Nicaragua</option>
                          <option value="NE">Niger</option>
                          <option value="NG">Nigeria</option>
                          <option value="NU">Niue</option>
                          <option value="NF">Norfolk Island</option>
                          <option value="MP">Northern Mariana Islands</option>
                          <option value="NO">Norway</option>
                          <option value="OM">Oman</option>
                          <option value="PK">Pakistan</option>
                          <option value="PW">Palau</option>
                          <option value="PS">Palestinian Territory, Occupied</option>
                          <option value="PA">Panama</option>
                          <option value="PG">Papua New Guinea</option>
                          <option value="PY">Paraguay</option>
                          <option value="PE">Peru</option>
                          <option value="PH">Philippines</option>
                          <option value="PN">Pitcairn</option>
                          <option value="PL">Poland</option>
                          <option value="PT">Portugal</option>
                          <option value="PR">Puerto Rico</option>
                          <option value="QA">Qatar</option>
                          <option value="RE">Réunion</option>
                          <option value="RO">Romania</option>
                          <option value="RU">Russian Federation</option>
                          <option value="RW">Rwanda</option>
                          <option value="BL">Saint Barthélemy</option>
                          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                          <option value="KN">Saint Kitts and Nevis</option>
                          <option value="LC">Saint Lucia</option>
                          <option value="MF">Saint Martin (French part)</option>
                          <option value="PM">Saint Pierre and Miquelon</option>
                          <option value="VC">Saint Vincent and the Grenadines</option>
                          <option value="WS">Samoa</option>
                          <option value="SM">San Marino</option>
                          <option value="ST">Sao Tome and Principe</option>
                          <option value="SA">Saudi Arabia</option>
                          <option value="SN">Senegal</option>
                          <option value="RS">Serbia</option>
                          <option value="SC">Seychelles</option>
                          <option value="SL">Sierra Leone</option>
                          <option value="SG">Singapore</option>
                          <option value="SX">Sint Maarten (Dutch part)</option>
                          <option value="SK">Slovakia</option>
                          <option value="SI">Slovenia</option>
                          <option value="SB">Solomon Islands</option>
                          <option value="SO">Somalia</option>
                          <option value="ZA">South Africa</option>
                          <option value="GS">South Georgia and the South Sandwich Islands</option>
                          <option value="SS">South Sudan</option>
                          <option value="ES">Spain</option>
                          <option value="LK">Sri Lanka</option>
                          <option value="SD">Sudan</option>
                          <option value="SR">Suriname</option>
                          <option value="SJ">Svalbard and Jan Mayen</option>
                          <option value="SZ">Swaziland</option>
                          <option value="SE">Sweden</option>
                          <option value="CH">Switzerland</option>
                          <option value="SY">Syrian Arab Republic</option>
                          <option value="TW">Taiwan, Province of China</option>
                          <option value="TJ">Tajikistan</option>
                          <option value="TZ">Tanzania, United Republic of</option>
                          <option value="TH">Thailand</option>
                          <option value="TL">Timor-Leste</option>
                          <option value="TG">Togo</option>
                          <option value="TK">Tokelau</option>
                          <option value="TO">Tonga</option>
                          <option value="TT">Trinidad and Tobago</option>
                          <option value="TN">Tunisia</option>
                          <option value="TR">Turkey</option>
                          <option value="TM">Turkmenistan</option>
                          <option value="TC">Turks and Caicos Islands</option>
                          <option value="TV">Tuvalu</option>
                          <option value="UG">Uganda</option>
                          <option value="UA">Ukraine</option>
                          <option value="AE">United Arab Emirates</option>
                          <option value="GB">United Kingdom</option>
                          <option value="US">United States</option>
                          <option value="UM">United States Minor Outlying Islands</option>
                          <option value="UY">Uruguay</option>
                          <option value="UZ">Uzbekistan</option>
                          <option value="VU">Vanuatu</option>
                          <option value="VE">Venezuela, Bolivarian Republic of</option>
                          <option value="VN">Viet Nam</option>
                          <option value="VG">Virgin Islands, British</option>
                          <option value="VI">Virgin Islands, U.S.</option>
                          <option value="WF">Wallis and Futuna</option>
                          <option value="EH">Western Sahara</option>
                          <option value="YE">Yemen</option>
                          <option value="ZM">Zambia</option>
                          <option value="ZW">Zimbabwe</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <!-- End Input Group -->
                </div>
              </div>
              <!-- End Individual Type Payer -->
            </div>
            <!-- End Add New Payer -->

            <!-- Buttons -->
            <div class="d-flex justify-content-end">
              <button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1" data-next-step="#paymentDetailsStep">Next</button>
              <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
            </div>
            <!-- End Buttons -->
          </div>

          <div id="paymentDetailsStep" style="display: none;">
            <div class="row">
              <!-- Input Group -->
              <div class="col-sm-6 mb-4">
                <label id="amountLabel" class="h6 small d-block text-uppercase">Amount</label>
                <div class="js-form-message">
                  <div class="input-group input-group-sm">
                    <input type="number" class="form-control" name="amount" placeholder="Pixeel" aria-label="Pixeel" aria-describedby="amountLabel" required
                           data-msg="Please enter a valid name."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                </div>
              </div>
              <!-- End Input Group -->

              <!-- Select -->
              <div class="col-sm-6 mb-4">
                <label class="form-label">Currency</label>

                <div class="input-group">
                  <select class="custom-select custom-select-sm">
                    <option value="usd">USD</option>
                    <option value="euro">Euro</option>
                    <option value="gbp">GBP</option>
                  </select>
                </div>
              </div>
              <!-- End Select -->
            </div>

            <!-- Input -->
            <div class="mb-4">
              <label id="descriptionLabel" class="h6 small d-block text-uppercase">Description</label>
              <div class="js-form-message">
                <div class="input-group input-group-sm">
                  <textarea class="form-control" rows="2" name="description" placeholder="Your payer will see this description on the payment request" aria-label="Your payer will see this description on the payment request" aria-describedby="descriptionLabel" required
                            data-msg="Please enter a valid reason."
                            data-error-class="u-has-error"
                            data-success-class="u-has-success"></textarea>
                </div>
              </div>
            </div>
            <!-- End Input -->

            <!-- Datepicker -->
            <div class="mb-4">
              <label id="paymentDueByLabel" class="form-label">Payment due by</label>
              <div id="datepickerWrapper" class="js-focus-state u-datepicker u-datepicker--top input-group input-group-sm">
                <input class="js-range-datepicker form-control bg-transparent" type="text" placeholder="Due date" aria-label="Due date" aria-describedby="paymentDueByLabel" required
                       data-rp-wrapper="#datepickerWrapper"
                       data-rp-date-format="d/m/Y">
                <div class="input-group-append">
                  <span class="input-group-text rounded-right">
                    <span class="far fa-calendar-alt"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- End Datepicker -->

            <!-- Buttons -->
            <div class="d-flex justify-content-end">
              <button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1" data-next-step="#attachDocumentsStep">Next</button>
              <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#selectPlayerStep">Back</a>
            </div>
            <!-- End Buttons -->
          </div>

          <div id="attachDocumentsStep" style="display: none;">
            <div class="mb-4">
              <p>Attach up to 3 documents (like your invoice or work contact) to your payment request.</p>
              <p>Do not have an invoice? <a href="#">Create a professional invoice for free and upload below.</a></p>
            </div>

            <!-- File Attachment Input -->
            <label class="file-attachment-input mb-4" for="fileAttachmentInput">
              Browse your device and upload documents
              <small class="d-block text-muted">Maximum file size 10MB</small>
              <input id="fileAttachmentInput" name="file-attachment" type="file" class="file-attachment-input__label">
            </label>
            <!-- End File Attachment Input -->

            <!-- Buttons -->
            <div class="d-flex justify-content-end">
              <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Request Payment</button>
              <a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#paymentDetailsStep">Back</a>
            </div>
            <!-- End Buttons -->
          </div>
        </div>
        <!-- End Content Step Form -->
      </form>
      <!-- End Request Payment Form -->
    </div>
  </div>
</div>
<!-- End Request Payment Modal Window -->