<div class="overlay" (click)="cancel()">
  <div class="pop-up-ctn" id="deleteAccountConfirmation">

    <div class="close-ctn" (click)="stopPropagation($event)">
      <a id="closeButton" (click)="cancel()">
        <i class="material-icons">close</i>
      </a>
    </div>

    <div class="pop-up-ctn-header" (click)="stopPropagation($event)">
      <p class="header-text">
        <i class="material-icons cancel-payment-icon">filter_list</i> Sort Payments By</p>
    </div>
    <div class="pop-up-ctn-body text-left" (click)="stopPropagation($event)">

      <form>

        <p>Pick A Category:</p>
        <label>
          <input id="payToSort" name="sort-by-category" type="radio" value="payTo" />
          <span class="sort-option">Pay To</span>
        </label>

        <label>
          <input id="payFromSort" name="sort-by-category" type="radio" value="payFrom" />
          <span class="sort-option">Pay From</span>
        </label>

        <label>
          <input id="sendOnSort" name="sort-by-category" type="radio" value="sendOn" />
          <span class="sort-option">Send On</span>
        </label>

        <label>
          <input id="estDeliverySort" name="sort-by-category" type="radio" value="estDelivery" />
          <span class="sort-option">Est. Delivery</span>
        </label>

        <label>
          <input id="amountSort" name="sort-by-category" type="radio" value="amount" />
          <span class="sort-option">Amount</span>
        </label>

        <p>Pick A Direction:</p>
        <label>
          <input id="downwardSort" name="sort-by-direction" type="radio" value="downward" />
          <span class="sort-option direction">
            <i class="material-icons cancel-payment-icon">arrow_downward</i>
          </span>
        </label>

        <label>
          <input id="upwardSort" name="sort-by-direction" type="radio" value="upward" />
          <span class="sort-option direction">
            <i class="material-icons cancel-payment-icon">arrow_upward</i>
          </span>
        </label>

        <p>Example:</p>

        <div class="example-ctn">
          <div class="example-col">
            <div class="example-cell">Account A</div>
            <div class="example-cell">Account B</div>
            <div class="example-cell"> Account C</div>
          </div>
          <div class="example-col">
            <div class="example-cell">03/01/18</div>
            <div class="example-cell">02/01/18</div>
            <div class="example-cell">01/01/18</div>
          </div>
          <div class="example-col">
            <div class="example-cell">$2</div>
            <div class="example-cell">$3</div>
            <div class="example-cell">$1</div>
          </div>
        </div>

        <button id="sortPaymentsButton" type="button" class="action-button">
          <span class="button-inside">Sort Payments</span>
        </button>

      </form>

    </div>
  </div>
</div>

./payment-sort.component.css

#deleteAccountConfirmation .delete-options {
  color: #dc8e49;
  margin-bottom: 0px;
  text-align: right;
}

#deleteAccountConfirmation .delete-option {
  margin-right: 15px;
  cursor: pointer;
}

.para-dark {
  margin-bottom: 0px;
}

.text-center {
  margin-bottom: 0px;
  line-height: 20px;
}

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

p {
  margin: 10px 0px 5px 0px;
}

.sort-option {
  padding: 5px 10px;
  background-color: #f7f8fc;
  display: inline-block;
  margin: 3px 1px;
  cursor: pointer;
}

.active-sort-option {
  background-color: #ccc;
}

.sort-option:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

.active-sort-option:hover {
  background-color: #ccc;
  cursor: default;
}

input[type='radio']:checked + span {
  background-color: #ccc;
  border: none;
  color: #39474f;
}

input[type='radio']:checked + span i {
  margin: 0px;
  color: #39474f;
}

.direction {
  border-radius: 50%;
  padding: 5px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  text-align: center;
}

.example-ctn {
  display: grid;
  grid-template-columns: 34% 34% 34%;
  cursor: default;
}

.example-cell {
  background-color: #ccc;
  padding: 3px;
  font-size: 12px;
  margin: 5px 5px 5px 0px;
  text-align: center;
}