<div style="display: flex;
			justify-content: center;
			align-items: center;">
	<div class="container">
		<div class="invoiceHeader">
				<img class="logo" src="/assets/logo-new-white.png" height="40px" />
				{{name}}
		</div>
		<div class="invoiceDetail"
			 *ngIf="!error" 
			 id="invoice">
			<div class="invoiceHdrTxt1">{{ vE.receiptReceiptLbl }}</div>
			<div class="invoiceHdrTxt2">{{ vE.receiptOrderId }}{{orderId}}</div>
			<div class="invoiceHdrTxt3">{{ vE.receiptOrderDate }}{{order.timestamp | date}}
			</div>
				<div style="height: 10px;"></div>
				<div class="zecData">{{ vE.receiptZcashPrice }}{{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
				<div style="height: 2px;"></div>
				<div class="zecData">{{ vE.receiptOrderTotal }}<img class="zecSign" src="/assets/zec_rv.png" />{{order.totalZec | number: '1.08'}}
				</div>
			<div>
				<div style="height: 10px;"></div>
				<table style="width: 100%;" 
				       cellspacing="0">
				    <tr class="invoice-title">
						<th width="55%"
							class="detailTitle1">
							Item
						</th>
						<th width="15%"
							class="detailTitle1">
							{{ vE.receiptQtyLbl }}
						</th>
						<th width="30%"
							class="detailTitle2">
							{{ vE.receiptOrderPrice }} ({{order.currency.toUpperCase()}}) 
						</th>
					</tr>
					<tr class="invoice-detail" 
					    *ngFor="let item of order.lines">
						<td width="55%" 
						    align="left">
						  {{item.name}}
						</td>
						<td width="15%"
						    align="center">
						  {{item.qty}}
						</td>
						<td width="30%" 
						    align="right">
						   {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} 
						</td>
					</tr>
				    <tr class="invoice-title">
						<th width="55%"
						    class="detailLineRight">
							Total:
						</th>
						<th width="15%"
						    class="detailLineLeft">

						</th>
						<th width="30%"
						    class="detailLineRight">
						   {{ order.total |  currency: order.currency.toUpperCase()}} 
						</th>
				    </tr>
				</table>
				<div style="height: 15px;"></div>

			</div>
		</div>

		<div align="center" *ngIf="error">
			<div style="height: 10px;"></div>
			<div style="font-family: Spartan !important;
						font-size: 20px;
						padding: 4px;
			            height: 24px;">
				{{ vE.receiptInvalidId }}
			</div>	
			<div style="font-family: Spartan !important;
						font-size: 16px;
						padding: 4px;">
				{{ vE.receiptInfoNotavail }}
			</div>
			<div style="height: 10px;"></div>
			<mat-card-actions>
				<div align="center">
				<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
				</div>
			</mat-card-actions>
		</div>
	</div>
</div>