<div class="container-fluid fade-in p-0 disable-user-select">

  <!-- INFO -->
  <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal">
    <div class="col-4 offset-1">
      <div class="row h-100">
        <div class="col-12 my-auto">
          <div class="card rounded">
            <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-5 mb-4">
            <div class="mb-5 mt-4">
              <p class="display-3 card-text text-center font-weight-bold">
                Atención
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 text-center text-white my-auto">
      <p class="display-3 font-weight-bold mb-5">
        ¿Desea Cancelar su compra?
      </p>
      <div class="d-flex justify-content-center mt-2">
        <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()">
          <span class="pr-2">Continuar con mi compra</span>
          <i class="fa fa-undo text-warning"></i>
        </button>
        <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()">
          <span class="pr-2">Si, Cancelar</span>
          <i class="fa fa-times text-danger"></i>
        </button>
      </div>
    </div>
  </div>

</div>