<?php
/**
 * Email Header Template.
 */

?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="viewport" content="width=device-width" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title><?php esc_html_e( 'WP Travel Engine Emails', 'wp-travel-engine' ); ?></title>
		<style>
		* {
			margin: 0;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			box-sizing: border-box;
			font-size: 14px
		}

		img {
			max-width: 100%
		}

		body {
			-webkit-font-smoothing: antialiased;
			-webkit-text-size-adjust: none;
			width: 100% !important;
			height: 100%;
			line-height: 1.6em
		}

		table td {
			vertical-align: top
		}

		body {
			background-color: #f6f6f6
		}

		.body-wrap {
			background-color: #f6f6f6;
			width: 100%
		}

		.container {
			display: block !important;
			max-width: 600px !important;
			margin: 0 auto !important;
			clear: both !important
		}

		.content {
			max-width: 600px;
			margin: 0 auto;
			display: block;
			padding: 20px
		}

		.main {
			background-color: #fff;
			border: 1px solid #e9e9e9;
			border-radius: 3px
		}

		.content-wrap {
			padding: 20px
		}

		.content-block {
			padding: 0 0 20px
		}

		.header {
			width: 100%;
			margin-bottom: 20px
		}

		.footer {
			width: 100%;
			clear: both;
			color: #999;
			padding: 20px
		}

		.footer a,
		.footer p,
		.footer td {
			color: #999;
			font-size: 12px
		}

		h1,
		h2,
		h3 {
			font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
			color: #000;
			margin: 40px 0 0;
			line-height: 1.2em;
			font-weight: 400
		}

		h1 {
			font-size: 32px;
			font-weight: 500
		}

		h2 {
			font-size: 24px
		}

		h3 {
			font-size: 18px
		}

		h4 {
			font-size: 14px;
			font-weight: 600
		}

		ol,
		p,
		ul {
			margin-bottom: 10px;
			font-weight: 400
		}

		ol li,
		p li,
		ul li {
			margin-left: 5px;
			list-style-position: inside
		}

		a {
			color: #348eda;
			text-decoration: underline
		}

		.btn-primary {
			text-decoration: none;
			color: #fff;
			background-color: #348eda;
			border: solid #348eda;
			border-width: 10px 20px;
			line-height: 2em;
			font-weight: 700;
			text-align: center;
			cursor: pointer;
			display: inline-block;
			border-radius: 5px;
			text-transform: capitalize
		}

		.last {
			margin-bottom: 0
		}

		.first {
			margin-top: 0
		}

		.aligncenter {
			text-align: center
		}

		.alignright {
			text-align: right
		}

		.alignleft {
			text-align: left
		}

		.clear {
			clear: both
		}

		.alert {
			font-size: 16px;
			color: #fff;
			font-weight: 500;
			padding: 20px;
			text-align: center;
			border-radius: 3px 3px 0 0
		}

		.alert a {
			color: #fff;
			text-decoration: none;
			font-weight: 500;
			font-size: 16px
		}

		.alert.alert-warning {
			background-color: #ff9f00
		}

		.alert.alert-bad {
			background-color: #d0021b
		}

		.alert.alert-good {
			background-color: #68b90f
		}

		.invoice {
			margin: 40px auto;
			text-align: left;
			width: 80%
		}

		.invoice td {
			padding: 5px 0
		}

		.invoice .invoice-items {
			width: 100%
		}

		.invoice .invoice-items .total td {
			border-top: 2px solid #333;
			border-bottom: 2px solid #333;
			font-weight: 700
		}

		td.title-holder {
			border: none !important;
			display: inline-block;
			min-width: 200px
		}

		@media only screen and (max-width:640px) {
			body {
				padding: 0 !important
			}

			h1,
			h2,
			h3,
			h4 {
				font-weight: 800 !important;
				margin: 20px 0 5px !important
			}

			h1 {
				font-size: 22px !important
			}

			h2 {
				font-size: 18px !important
			}

			h3 {
				font-size: 16px !important
			}

			.container {
				padding: 0 !important;
				width: 100% !important
			}

			.content {
				padding: 0 !important
			}

			.content-wrap {
				padding: 10px !important
			}

			.invoice {
				width: 100% !important
			}
		}
		</style>
	</head>

	<body itemscope itemtype="https://schema.org/EmailMessage">
		<table class="body-wrap">
			<tr>
				<td></td>
				<td class="container" width="600">
					<div class="content">
						<?php
