Make the Fluent Forms Payment Summary Table Responsive for smaller devices like Mobile

FF-responsive-payment-summary-table

/* Start of Payment Summary Table CSS */

@media only screen and (max-width: 530px) {

.fluentform .ffp_table thead{
  display:none;
}
 .fluentform table{
display: block;
  }
 .fluentform tbody{
  display: flex;
    width:100%;
  }
.fluentform .ffp_table td:before{
display:block;
font-weight: 700;
}
.fluentform .input_items_table tbody tr{
  display: flex;
flex-direction: column;
  }
.fluentform .ffp_table td:nth-of-type(1):before {
		content: "Product: ";
	}

.fluentform .ffp_table td:nth-of-type(2):before {
		content: "Price: ";
	}

.fluentform .ffp_table td:nth-of-type(3):before {
		content: "Quantity: ";
	}

.fluentform .ffp_table td:nth-of-type(4):before {
		content: "Line Total: ";
	}
}
.fluentform .ffp_table tfoot{
display: block;
}
.fluentform .ffp_table tfoot tr{
  display: flex;
}

.fluentform .ffp_table tfoot th:nth-of-type(1){
width:70%;
}
.fluentform .ffp_table tfoot th:nth-of-type(2){
width:30%;
}

/* End of Payment Summary table CSS */