<div class="scroller">
  <app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
  <div *ngIf="!isLoading">
    <h1 id="accountInformationLabel" class="page-headers">Account Information</h1>
    <div class="page-description">
      <p class="para-medium">Please fill out the form below to manually add a new account.</p>
    </div>
    <div class="form-ctn">
      <form (ngSubmit)="create()" #form="ngForm" autocomplete="off" novalidate>
        <!-- Name -->
        <p class="form-first-child">Name of the Account</p>
        <input
          #nameInput
          type="text"
          id="name"
          tabindex="1"
          [(ngModel)]="model.name"
          name="name"
          #name="ngModel"
          [placeholder]="nameOfAccountMessage"
          pattern="[a-zA-Z0-9\s]+"
          required
        />
        <span class="approve">
          <i class="material-icons status-positive">check</i>
        </span>
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
          Please provide a valid account name using <br />
          alphabetic
          <span> a-z, </span>
          <span> A-Z </span> or numeric
          <span> 0-9 </span>
        </div>

        <!-- DisplayName -->
        <p>Nickname</p>
        <input
          type="text"
          id="displayName"
          tabindex="1"
          [(ngModel)]="model.displayName"
          name="displayName"
          #displayName="ngModel"
          [placeholder]="nickNameOfAccountMessage"
        />

        <div class="two-items-one-row">
          <!-- Routing Number -->
          <div class="item-one">
            <p>Routing Number</p>
            <input
              class="input-no-validation-styles"
              type="tel"
              maxlength="9"
              tabindex="1"
              id="routingNumber"
              [(ngModel)]="model.routingNumber"
              name="routingNumber"
              #routingNumber="ngModel"
              pattern="[0-9]{9,}"
              (blur)="lookup()"
              required
            />
            <div
              *ngIf="!routingNumber.untouched && routingNumber.invalid"
              class="alert alert-danger"
              id="pleaseProvideRoutingNumberLabel"
            >
              Please provide your 9 digit routing number
            </div>
            <div
              id="invalidRoutingNumberLabel"
              *ngIf="
                routingNumber.touched &&
                routingNumber.valid &&
                bankName.length === 0 &&
                !isRoutingLoading
              "
              class="alert alert-danger"
            >
              Invalid routing number
            </div>
          </div>

          <!-- Account Number -->
          <div class="item-two">
            <p>Account Number</p>
            <input
              class="input-no-validation-styles"
              type="text"
              id="accountNumber"
              tabindex="2"
              [(ngModel)]="model.accountNumber"
              name="accountNumber"
              #accountNumber="ngModel"
              pattern="[a-zA-Z0-9]+"
              required
            />
            <div
              id="pleaseProvideAccountNumberAlert"
              *ngIf="!accountNumber.untouched && accountNumber.invalid"
              class="alert alert-danger"
            >
              Please provide your account number
            </div>
          </div>
        </div>

        <!-- Financial Institution Display -->
        <div *ngIf="showFILookup">
          <p>Financial Institution</p>
          <div class="fi-lookup">
            <p id="bankNameLabel" *ngIf="!isRoutingLoading && bankName" class="text-center">
              {{ bankName }}
            </p>
            <app-loading-linear
              *ngIf="isRoutingLoading"
              [loadingLinearMessage]="loadingLinearMessage"
            ></app-loading-linear>
          </div>
        </div>

        <!-- Account Type -->
        <hr style="margin-bottom: 8px" />
        <p>Account Type</p>
        <div class="two-items-one-row cursor-pointer">
          <div
            id="checkingTypeContainer"
            class="item-one"
            (click)="model.accountType = accountTypes.Checking"
          >
            <label class="cursor-pointer" for="account-type-option-1">
              <input
                ng-control="accountType"
                type="radio"
                id="account-type-option-1"
                name="accountType"
                [value]="accountTypes.Checking"
                [(ngModel)]="model.accountType"
                checked
                id="accountTypeCheckingInput"
              />
              <span class="custom-checkbox"> <i class="material-icons">check</i> </span
              >Checking
            </label>
          </div>
          <div
            (click)="model.accountType = accountTypes.Savings"
            id="savingsTypeContainer"
            class="item-two"
          >
            <label class="cursor-pointer" for="account-type-option-2">
              <input
                ng-control="accountType"
                type="radio"
                id="account-type-option-2"
                name="accountType"
                [value]="accountTypes.Savings"
                [(ngModel)]="model.accountType"
                id="accountTypeSavingsInput"
              />
              <span class="custom-checkbox"> <i class="material-icons">check</i> </span>Savings
            </label>
          </div>
        </div>
        <hr style="margin-top: 20px; margin-bottom: 8px" />

        <button
          id="addAccountButton"
          type="submit"
          class="action-button"
          tabindex="3"
          [disabled]="form.pristine || form.invalid || bankName.length === 0"
        >
          <span class="button-inside">Add Account</span>
        </button>
      </form>
    </div>

    <div class="two-action-ctn">
      <p class="para-dark">
        <a id="cancelAccountButton" [routerLink]="['/templates']" class="action-link"
          >Cancel Creating Account</a
        >
      </p>
    </div>
  </div>
</div>

./template-create.component.css

#templateCtn {
  background-color: #fff;
  box-shadow: none;
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 20px;
}

#templateHeaderCtn h4 {
  margin: 0 0 16px;
}

.form-ctn input {
  padding: 0px 15px 0px 15px;
}

@media only screen and (min-width: 450px) {
  #templateCtn {
    padding: 25px;
    max-width: 450px;
  }
}

#templateCtn p {
  line-height: 14px;
  margin-bottom: 6px;
  display: inline-block;
  color: #474747;
}

p.input-label {
  margin-top: 10px;
}

#templateCtn input {
  height: 42px;
  background-color: #fff;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #474747;
}

#templateCtn [placeholder]:focus::-webkit-input-placeholder {
  opacity: 0;
}

#templateCtn input + p {
  margin-top: 15px;
}

#titleNDefault {
  width: 100%;
  position: relative;
}

#titleNDefaultTwo {
  width: 100%;
  position: relative;
  margin-top: 25px;
}

#setDefaultContact {
  display: inline-block;
  position: absolute;
  right: 0px;
}

#setDefaultContact label,
#setDefaultContact input {
  cursor: pointer;
  line-height: 14px;
  margin: 0px auto;
  color: #474747;
  font-size: 12px;
}

#setDefaultContact input {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: -13px;
}

input[type='radio'] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox; /* Firefox */
  -ms-appearance: checkbox; /* not currently supported */
}

#templateAccountHeaderCtn {
  position: relative;
  margin-bottom: 15px;
  text-align: center;
}

#templateAccountHeaderCtn h3 {
  display: inline-block;
  color: #3393a1;
  font-size: 24px;
  line-height: 24px;
  margin: 0px;
  vertical-align: middle;
}

#templateAccountHeaderCtn p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
}

.button-action .button-inside {
  margin-bottom: 0px;
  color: #fff;
  font-size: 14px;
}

#templateCtn .itable-row p {
  margin-bottom: 0px;
}

#templateCtn .itable-row i {
  font-size: 17px;
  margin-top: 2px;
}

#templateCtn .action-button {
  margin-top: 25px;
}

.itable-col-one {
  display: none;
}

.itable-col-three {
  float: right;
}

#formCtn {
  padding: 20px;
  background: #f7f8fc;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

#submitted-results {
  margin-top: -10px;
}

.itable-row {
  padding: 10px 0px 0px 0px;
  border-bottom: none;
}

/*----- FI Look Up Styles -----*/
.fi-lookup {
  height: 42px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/*----- Validation Styles -----*/

p.sw-criteria {
  line-height: 16px;
  width: 100%;
  max-width: 285px;
  margin: 0 auto 0 auto;
  font-variant: small-caps;
  font-size: 90%;
}

.sw-criteria-require {
  font-weight: bold;
}

.account-type-grid input[type='radio']:checked + span {
  background-color: inherit;
  border: inherit;
}

/*--- TODO Remove Temp Form Stuff ---*/
.temp {
  display: none;
}

.temp .mdl-radio__ripple-container {
  margin-right: 20px;
}