<div [hidden]="isLoading">
  <div class="scroller" id="sendMoneyScroller">
    <form #sendMoneyForm="ngForm" name="sendMoneyForm" (ngSubmit)="submitPayment()">
      <div id="sendingMoneyFormCtn">
        <!-- Amount To Send -->
        <div class="amount-to-send-ctn">
          <div id="amountLabel"><p class="para-dark">Amount to Transfer:</p></div>

          <div id="settingUpAmount">
            <div id="dollarSymbol"><p>$</p></div>

            <div id="dollarAmount">
              <input
                #integralInput
                #Amount="ngModel"
                [ngModel]="integralAmount"
                value="integralAmount"
                (ngModelChange)="updateIntegral($event)"
                id="amountSend"
                type="tel"
                [maxlength]="maxInputLength"
                name="integralAmount"
                tabindex="1"
                placeholder="0"
                value="app.amount"
                autocomplete="off"
                pattern="[0-9]{1,}"
                (keydown)="keyDown($event)"
                required
              />
              <input
                #decimalInput
                [ngModel]="decimalAmount"
                (ngModelChange)="updateDecimal($event)"
                id="amountSendCent"
                type="tel"
                maxlength="2"
                name="decimalAmount"
                tabindex="2"
                autocomplete="off"
                placeholder="00"
                (keydown)="decimalKeyDown($event)"
              />
            </div>
          </div>

          <div id="amountNotValidLabel" [hidden]="isAmountNotValid()" class="alert alert-danger alert-amount">
            Please enter an amount for this transfer
          </div>

          <div class="limit-alert-ctn" [ngClass]="{ show: loadingLimits }">
            <div class="limit-alert-loader">
              <app-loading-linear [loadingLinearMessage]="'Checking your limits'" *ngIf="loadingLimits"></app-loading-linear>
            </div>

            <div *ngIf="!loadingLimits && limitResult && !limitResult.isAllowed"
              class="alert alert-danger alert-amount limit-alert">
              {{ limitResult.errors[0].message }}
            </div>
          </div>

          <div id="amountActionLabel">
            <p class="para-medium" id="tt4">
              <span class="is-mobile">Tap</span> <span class="is-desktop">Click</span> above to
              change amount
            </p>
            <div class="mdl-tooltip" for="tt4">
              You can change how much you want to send by
              <span class="is-mobile">tapping</span>
              <span class="is-desktop">clicking</span> on the amount above
            </div>
          </div>
        </div>

        <!-- Form -->
        <div class="form-ctn">
          <p class="first-label">From Account</p>
          <div id="fromAccountContainer" class="input-select" (click)="showDebit = true">
            <input
              type="text"
              name="debitTemplateInput"
              [value]="debitTemplateDisplayName"
              class="cursor-pointer"
              placeholder="Select Account"
              (focus)="showDebit = true"
              tabindex="3"
              required
              minlength="1"
              autocomplete="off"
              disabled
              id="fromAccountInput"
            />
            <span class="select cursor-pointer">
              <i class="material-icons"> arrow_drop_down </i>
            </span>
          </div>

          <!-- To -->
          <p>To Account</p>
          <div id="toAccountContainer" class="input-select" (click)="showCredit = true">
            <input
              type="text"
              name="creditTemplateInput"
              [value]="creditTemplateDisplayName"
              class="cursor-pointer"
              placeholder="Select Account"
              (focus)="showCredit = true"
              required
              minlength="1"
              autocomplete="off"
              disabled
              id="toAccountInput"
            />
            <span class="select cursor-pointer">
              <i class="material-icons"> arrow_drop_down </i>
            </span>
          </div>

          <!-- Memo -->
          <p class="paying-again">Note</p>
          <input
            type="text"
            #memoInput="ngModel"
            (ngModelChange)="updateMemo($event)"
            [(ngModel)]="memo"
            id="memo"
            name="note"
            [value]="app.memo"
            tabindex="3"
            pattern="[A-Za-z0-9,\s!.'-]+"
          />

          <span>
            <div
              [hidden]="memoInput.valid || memoInput.value.length == 0"
              class="alert alert-danger text-align"
            >
              Please only use A-Z, a-z, 0-9, periods, commas, dashes, spaces, apostrophes, and
              exclamation points
            </div>
          </span>

          <p class="timeline-note">Funds transferred are usually available in the "transfer to" account within 1-3 business days.</p>

          <div *ngIf="hasPaymentFee">
            <!-- Fee Confirmation -->

            <div class="fee-verification">
              <p>Fee Verification</p>
              <label class="cursor-pointer">
                <input
                  ng-control="accountType"
                  type="checkbox"
                  name="accountType"
                  (click)="verifyFee()"
                />
                <span class="custom-checkbox"> <i class="material-icons">check</i> </span>
                <span class="fee-verify"
                  >I verify that there is a
                  {{ feeAmount | currency: 'USD':'symbol':'1.2-2' }} fee and I wish to
                  continue</span
                >
              </label>
            </div>
          </div>

          <button
            type="submit"
            class="action-button cursor-pointer"
            tabindex="5"
            id="submitPaymentButton"
            [disabled]="
              sendMoneyForm.invalid ||
              debitTemplateDisplayName.length < 1 ||
              creditTemplateDisplayName.length < 1 ||
              (!hasVerifyFee && hasPaymentFee) ||
              loadingLimits ||
              !limitResult ||
              (!loadingLimits && limitResult && !limitResult.isAllowed)
            "
          >
            <span class="button-inside">Transfer Money</span>
          </button>

          <div
            [style.display]="missingAmount ? 'block' : 'none'"
            [hidden]="integralAmount > 0"
            class="alert alert-danger alert-missing-amount"
          >
            Don't forget to add an amount
          </div>
        </div>
        <div class="two-action-ctn" *ngIf="!app.hasPassedMfa && authRequired">
          <p class="para-dark">
            <a id="iAlreadyHaveAuthButton" (click)="isAuthCheck()">
              <i class="material-icons">lock_outline</i> I Already Have An Authentication
              Code</a
            >
          </p>
          <p id="transferAuthenticatedLabel" class="para-dark status-positive" *ngIf="app.hasPassedMfa">
            <i class="material-icons">lock_open</i> This Transfer Is Authenticated
          </p>
        </div>
        <div class="two-action-ctn">
          <p id="cancelTransferButton" class="para-dark"><a (click)="resetForm()">Cancel Current Transfer</a></p>
        </div>
      </div>
    </form>
  </div>
</div>
<app-select-account
  *ngIf="showDebit"
  [type]="templateTypes.Debit"
  (close)="showDebit = false"
></app-select-account>
<app-select-account
  *ngIf="showCredit"
  [type]="templateTypes.Credit"
  (close)="showCredit = false"
></app-select-account>
<app-authenticate-request
  *ngIf="showAuthRequest"
  (closeAuthRequest)="toggleAuthRequest()"
  (openAuthMethod)="toggleAuthMethod()"
  (openAuthRepeat)="toggleAuthRepeat()"
></app-authenticate-request>
<app-authenticate-method
  *ngIf="showAuthMethod"
  (closeAuthMethod)="toggleAuthMethod()"
  (openAuthInput)="toggleAuthInput()"
></app-authenticate-method>
<app-authenticate-repeat
  *ngIf="showAuthRepeat"
  (closeAuthRepeat)="toggleAuthRepeat()"
  (openAuthInput)="toggleAuthInput()"
></app-authenticate-repeat>
<app-authenticate-input
  *ngIf="showAuthInput"
  (closeAuthInput)="toggleAuthInput()"
  (openAuthMethod)="toggleAuthMethod()"
></app-authenticate-input>

<div *ngIf="isLoading">
  <app-loader [header]="loaderHeader" [message]="message"></app-loader>
</div>

./sending-money.component.css

.is-hidden {
  display: none;
}
/*----- Amount to Send -----*/

#amountLabel,
#amountActionLabel {
  text-align: center;
}

#amountLabel p {
  margin: 40px 0px 15px 0px;
}
#amountActionLabel p {
  margin: 0px 0px 10px 0px;
  cursor: default;
}
#changeAccount p {
  cursor: pointer;
  margin: 6px 0 0 0;
}

#changeAccount {
  margin: 0px 0px 15px 0px;
}

#dollarSymbol,
#dollarAmount {
  vertical-align: top;
  display: inline-block;
  margin-left: -5px;
}

#dollarSymbol p {
  margin: 10px 5px 0px 0px;
  padding: 0px;
  font-size: 30px;
  font-family: 'Open Sans', sans-serif;
  color: #3393a1;
}

#settingUpAmount {
  text-align: center;
}

/*----- Amount Input -----*/
#settingUpAmount input {
  border: none;
}

#amountSend {
  padding: 0px;
  width: 39px;
  min-width: 39px;
  max-width: 234px;
  font-size: 70px !important;
  line-height: 84px;
  margin-top: -8px;
  color: #3393a1;
  text-align: left;
  vertical-align: top;
}

#amountSendCent {
  padding: 0px;
  width: 48px;
  font-size: 40px !important;
  line-height: 40px;
  padding-bottom: 15px;
  color: #3393a1;
  text-align: left;
  vertical-align: top;
  margin-left: 2px;
}

#settingUpAmount input[type='number']::-webkit-inner-spin-button,
#settingUpAmount input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#settingUpAmount ::-webkit-input-placeholder {
  color: #3393a1;
}

#settingUpAmount :-moz-placeholder {
  /* Firefox 18- */
  color: #3393a1;
}

#settingUpAmount ::-moz-placeholder {
  /* Firefox 19+ */
  color: #3393a1;
}

#settingUpAmount :-ms-input-placeholder {
  color: #3393a1;
}

/*----- Form -----*/
#toWhoCtn {
  z-index: 999;
  position: fixed;
  width: 80%;
  padding: 20px;
}

@media only screen and (min-width: 500px) {
  .form-ctn {
    padding: 25px;
    max-width: 360px;
  }
}

.items-list-action i.material-icons {
  font-size: 14px;
}

.alert-amount {
  margin: 0px 0px 0px 0px;
  text-align: center;
}

.alert-missing-amount {
  text-align: center;
}

.para-dark i {
  font-size: 18px;
  vertical-align: bottom;
  margin-bottom: -1px;
}

.two-action-ctn:last-child {
  margin-top: -5px;
}

.fee-verify {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  line-height: 18px;
}

.fee-verification {
  margin-top: 13px;
  border-top: 1px solid #ccc;
}

.timeline-note {
  line-height: 18px;
  margin-bottom: 0px;
}

.limit-alert-ctn {
  height: 30px;
  vertical-align: middle;
}

.limit-alert-loader {
  margin: -25px auto -5px auto;
  height: 30px;
  overflow: hidden;
}

.limit-alert {
  margin-top: -15px;
}