<div
  [ngClass]="{ overlay: app.useMfaModal }"
  class="scroller"
  (click)="toggleAuthInput($event)"
>
  <div class="pop-up" id="authenticateUserInput" (click)="stopPropagation($event)">
    <div class="close-ctn">
      <a id="closeButton" (click)="toggleAuthInput($event)">
        <i class="material-icons">close</i>
      </a>
    </div>

    <h1
      class="page-headers"
      [hidden]="(isLoading && !app.useMfaModal) || (isFailure && !app.useMfaModal)"
    >
      Authenticate User
    </h1>

    <div class="pop-up-ctn-body">
      <div [hidden]="isLoading || isSuccess || isFailure">
        <div class="page-description">
          <p class="para-medium">
            We have sent the authentication code to:
            <br />
            <span class="auth-sent-to-email">
              <ng-container id="authMethodEmail" *ngIf="authMethod === 'email'">
                {{ selectMethod.target }}</ng-container
              >
              <ng-container id="authMethodSMS" *ngIf="authMethod === 'sms'">
                XXX-{{ maskedNumber }}</ng-container
              >
            </span>
          </p>
        </div>

        <div class="form-ctn" id="enterAuthCodeCtn">
          <p>Please Enter the 4 digit authentication code</p>

          <form #authUser="ngForm" id="authenticateForm" autocomplete="off">
            <input
              type="tel"
              #authInput
              [(ngModel)]="auth"
              pattern=".{4,}"
              id="auth"
              name="authInput"
              placeholder="0000"
              tabindex="1"
              maxlength="4"
              (keydown.Enter)="verify()"
              required
            />
            <span class="approve">
              <i class="material-icons status-positive">check</i>
            </span>

            <button
              id="authenticateUserButton"
              (click)="verify()"
              type="button"
              form="authenticateForm"
              class="action-button"
              tabindex="2"
              [disabled]="!authUser.form.valid"
            >
              <p class="button-inside" *ngIf="app.useMfaModal">Authenticate User</p>
              <p class="button-inside" *ngIf="!app.useMfaModal">
                Authenticate User &amp; Send Transfer Request
              </p>
            </button>
          </form>
        </div>

        <div class="two-action-ctn">
          <p class="para-dark">
            <a id="sendNewAuthenticationCodeButton" (click)="goBack()" class="action-link"
              >Send A New Authentication Code</a
            >
          </p>
        </div>
      </div>

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

      <div *ngIf="isSuccess" id="successScreen">
        <p class="status-icon-ctn">
          <i class="material-icons status-positive status-icon">done</i>
        </p>

        <p id="authenticatedLabel" class="status-header status-positive">Authenticated</p>

        <div id="swLabel" class="page-description">
          <p class="para-medium">
            You are successfully authenticated for the next payment during this session.
          </p>
        </div>

        <button
          id="continueToSendMoneyButton"
          type="button"
          class="action-button"
          (click)="toggleAuthInput($event)"
        >
          <p class="button-inside">Continue To Send Money</p>
        </button>
      </div>

      <div *ngIf="isFailure" id="failureScreen">
        <p class="status-icon-ctn">
          <i class="material-icons status-negative status-icon">cancel</i>
        </p>

        <p id="authenticationFailedLabel" class="status-header status-negative">
          Authentication Failed
        </p>

        <div id="swLabel" class="page-description">
          <p class="para-medium">
            Authentication was not successful. <br />
            Please try again.
          </p>
        </div>

        <button id="tryAgainButton" type="button" class="action-button" (click)="goBack()">
          <p class="button-inside">Try Again</p>
        </button>
      </div>
    </div>
  </div>
</div>

./authenticate-input.component.css

#authenticateUser .page-description {
  max-width: 325px;
  width: 86%;
}

.auth-sent-to-email {
  font-weight: bold;
}

#enterAuthCodeCtn input {
  text-align: center;
  padding-left: 11.5%;
  letter-spacing: 30px;
}

.close-ctn {
  display: none;
}

.pop-up-ctn-body {
  padding: 0px;
}

.pop-up-ctn-body p {
  text-align: center;
}

.pop-up-ctn-body .page-description {
  margin: -5px auto 20px auto;
}

.pop-up-ctn .loading-ctn {
  margin-top: 30%;
}

.loading-ctn {
  margin-top: 40%;
}

.status-header {
  margin: 10px auto 2px auto;
}

#failureScreen {
  width: 80%;
  max-width: 300px;
  padding: 20px;
  margin: 20% auto 0px auto;
  text-align: center;
}

#failureScreen .action-button {
  margin-top: 0px;
}

#loadingData p.page-description {
  text-align: center;
}

/*----- Overlay Styles -----*/
.overlay .pop-up {
  display: inline-block;
  width: 90%;
  max-width: 360px;
  z-index: 9999;
  background-color: #fff;
  margin: 125px auto 20px auto;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12),
    0 24px 38px 3px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  height: auto;
}

.overlay .pop-up-ctn-body {
  padding: 20px 20px;
}

.overlay .form-ctn {
  background-color: transparent;
  box-shadow: none;
  width: auto;
  padding: 10px 0px;
}

.overlay .close-ctn {
  display: block;
}

.overlay .page-headers {
  margin-top: 0px;
}

.overlay .pop-up-ctn-body p {
  text-align: center;
}

.overlay .pop-up-ctn-body .page-description {
  margin-bottom: 10px;
}

.overlay .para-medium {
  margin: 10px auto 10px 0px;
}

.overlay .two-action-ctn {
  margin-top: -10px;
}

.overlay .approve {
  margin-left: -35px;
  z-index: 99999999;
  margin-top: 10px;
  padding-top: 0px;
  float: right;
}

.overlay .status-icon-ctn {
  margin-top: 0px;
}

.overlay #failureScreen,
.overlay #successScreen {
  width: 100%;
  padding: 20px 0px 0px 0px;
  margin: 0px auto 10px auto;
}

.overlay #failureScreen .action-button,
.overlay #successScreen .action-button {
  margin-top: 0px;
}

.overlay h1 {
  width: 100%;
  background-color: #f7f8fc;
  border-bottom: 1px solid #ccc;
  padding: 15px;
  box-sizing: border-box;
  color: #39474f !important;
  font-size: 16px;
}