<div class="modal-body" style="background-color: #252525 !important">
  <h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
  <p style="color: #ffffff">Building : {{ buildingName }}</p>
  <p style="color: #ffffff">Periode : {{ formattedDate }}</p>
  <form [formGroup]="myForm">
    <div class="form-group">
      <div class="input-group">
        <div
          class="input-group-prepend"
          style="background-color: #252525 !important"
        >
          <span
            class="input-group-text"
            id="basic-addon1"
            style="
              background-color: #252525 !important;
              color: #ffffff;
              height: calc(1.5em + 0.75rem + 2px) !important;
            "
            >Rp</span
          >
        </div>
        <input
          type="text"
          class="form-control"
          id="real_cost"
          aria-describedby="basic-addon1"
          formControlName="real_cost"
          placeholder="..............."
          mask="separator"
          thousandSeparator="."
        />
      </div>
    </div>
  </form>
</div>
<div class="modal-footer justify-content-between" style="background-color: #252525 !important; border-style: none !important;">
  <button
    type="button"
    class="btn btn-secondary"
    style="
      color: #c3f164;
      width: 25%;
      background-color: #252525 !important;
      border-color: #c3f164 !important;
      border-radius: 10px;
    "
    (click)="activeModal.dismiss('Cross click')"
  >
    Close
  </button>
  <button
    type="button"
    class="btn btn-primary"
    style="
      color: #252525 !important;
      width: 25%;
      background-color: #c3f164 !important;
      border-color: #c3f164 !important;
      border-radius: 10px;
    "
    (click)="addRow()"
  >
    Add
  </button>
</div>

