/* Mobile specific stylesheet */
@media screen and (max-width: 749px) {
	/* General styles
	---------------------------------------------------------------------------------------------- */
	#main {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
		position: relative;
	}

	/* Header
	---------------------------------------------------------------------------------------------- */
	#header-wrapper {
		width: 100%;
		margin: 0 auto;
		padding: var(--mobile-header-wrapper-padding, 0);
		background-color: var(--desktop-header-bg-color, white);
		height: auto;
	}
	#header {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: auto;
		min-height: 70px;
	}
	#branding {
		width: var(--mobile-branding-width, 90%); /*90%;*/
		height: 70px;
		margin: 0 5%;
		padding: 0;
		float: left;
	}
	a#advam-logo {
		display: block;
		float: left;
		width: var(--mobile-advam-logo-width, 190px); /*190px;*/
		height: 100%;
		background-image: var(--header-image-name, url('/styles/common/images/headerLogo.png'));
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}


	#wrapper {
		margin: 0 auto;
		background-color: #333f50;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		position: relative;
		z-index: 1;
	}
	
	#wrapper::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: var(--wrapper-background-image, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))),
						  var(--background-image-mobile-name, var(--background-image-name));
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		opacity: var(--background-image-opacity, 1);
		z-index: -1; 
	}
	
	/* Navigation
	---------------------------------------------------------------------------------------------- */
	.mobile-menu-wrapper {
		float: right;
		margin: 23px 0 0 0;
		width: 20%;
		max-width: 24px;
		text-align: right;
	}
	a.menu-icon {
		width: 24px;
		height: 24px;
		display: block;
		background-image: url(images/icon-menu@2x.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 24px;
		filter: invert(1); 
	}
	#navigation {
		display: none;
		float: none;
		margin: 0 0 0 0;
		width: 100%;
		padding: 0;
		height: auto;
		background-color: #fff;
		clear: both;
		/* position: absolute;
		top: 70px;
		z-index: 1000; */
	}
	ul.menu {
		list-style: none;
		margin: 0 0 0 0;
		height: auto;
		padding: 0;
		float: none;
	}
	ul.menu.logged-in {
		margin-top: 0;
	}
	ul.menu.logged-in li.menu-item {
		margin-left: 0;
	}
	#navigation ul.menu li.menu-item {
		float: none;
		font-size: 1.3em; /* 13px */
		line-height: 38px;
		text-transform: uppercase;
		margin-right: 0;
		font-style: normal;
		font-weight: normal;
	}
	li.menu-item {
		margin-left: 0;
	}
	li.menu-item a, li.menu-item a:link, li.menu-item a:visited {
		display: block;
		height: 40px;
		padding: 0 3%;
		color: #555;
		background-color: #eee;
		text-decoration: none;
		margin: 0;
		border-bottom: 1px solid #ccc;
		width: 95%;
	}
	li.menu-item a:hover, li.menu-item a:active, li.current-menu-item a:link,
		li.current-menu-item a:visited {
		color: #61acec;
		border-bottom: 1px solid #ccc;
	}
	a#home-icon, a#topup-icon, a#modify-icon, a#password-icon, a#review-icon,
		a#review-invoice-icon, a#close-icon, a#logout-icon,a#managepass-icon {
		/* background-image: none; */
		background-position: 4% center;
		padding-left: 14%;
	}

	/* Content
	---------------------------------------------------------------------------------------------- */
	#content {
		padding: 0;
	}
	#intro-text-home {
		width: 70%;
		padding: 0 15%;
		/* min-height: 120px; */
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	#intro-text {
		width: 100%;
		/* min-height: 60px; */
		height: auto;
		margin: 0 auto;
		text-align: center;
		margin-top: var(--intro-text-margin-top, 0);
	}
	.content-row {
		float: left;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 12px;
	}
	
	.content-row.one-and-half-col-mobile {
		width: 75%;
	}
	.content-row.product-details {
		margin-left: 0;
	}
	body.entry-page .content-row {
		margin-bottom: 12px;
	}
	p.field-label {
		font-size: 1.4em; /* 14px */
		line-height: 20px;
		padding-top: 6px;
		float: left;
		clear: both;
	}
	p.field-description {
		font-size: 1.5em; /* 15px */
		line-height: 20px;
		float: none;
		clear: both;
	}
	.password-link {
		
	}
	.form-wrapper {
		width: 100%;
		border-radius: 0px;
	}

	/* Entry page
	---------------------------------------------------------------------------------------------- */
	.register-details, .content-wrapper {
		width: 100%;
		background-color: #ffffff;
		float: left;
		padding: 0;
		margin-bottom: 30px;
		border-radius: 0;
		margin-top: var(--register-details-margin-top, 30px);
	}
	#content > form{
		width: 100%;
		background-color: #ffffff;
		float: left;
		padding: 0;
		margin-bottom: 30px;
		border-radius: 0;
	}
	
	#content>form {
		background-color: transparent;
	}
	.existing-customer {
		float: left;
		width: 90%;
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.existing-customer-section-center-aligned{
		margin-left: 0;
	}
	
	.new-customer {
		float: left;
		width: 90%;
		padding: 30px 5%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	/* Logged in page styles
	---------------------------------------------------------------------------------------------- */
	.logged-in-wrapper {
		float: left;
		width: 90%;
		background-color: var(--element-body-container-background-color-logged-in-wrapper, white);
		padding: 30px 5%;
		border-radius: 0;
	}
	.user-summary {
		float: left;
		width: 90%;
		background-color: var(--element-body-container-background-color-user-summary, #eeeeee); /*#eeeeee;*/
		border-bottom: var(--element-body-container-border-bottom-user-summary, 1px solid #cccccc);
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	.user-summary .content-row {
		margin-bottom: 0;
	}
	.user-summary p {
		font-size: 1.5em; /* 15px */
		line-height: 20px;
		margin: 0;
		text-align: left;
	}

	/* Top up page
	---------------------------------------------------------------------------------------------- */
	.credit-card-details {
		float: left;
		width: 90%;
		background-color: var(--element-body-container-background-color-credit-card-details, white);
		padding: 30px 5%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	.account-summary {
		float: left;
		width: 90%;
		background-color: #f3fcfb;
		border-bottom: 1px solid #9bd7d4;
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	.account-summary .content-row {
		margin-bottom: 0;
	}
	.account-summary p {
		font-size: 1.5em; /* 15px */
		line-height: 30px;
		margin: 0;
	}
	.account-summary .register-input {
		background-color: #ffffff;
		border: 1px solid #9bd7d4;
		color: #00a59d;
		font-weight: 600;
	}
	
	.text-area-public {
		width: 328px;
	}

	.tooltip-small-margin {
		margin-right:0px;
	}

	.tooltip-large-margin {
		margin-right: 0px;
	}

	.right-button-small-margin {
		margin-right: 0px;
	}

	/* Steps styling
	---------------------------------------------------------------------------------------------- */
	.steps-header {
		width: 90%;
		background-color: #f4f4f4;
		border-top: 1px solid #cccccc;
		float: left;
		padding: 10px 5%;
	}
	.steps-header.open-step {
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
	}
	.steps-header:last-child {
		border-bottom: 1px solid #cccccc;
	}
	.steps-header h2 {
		padding-bottom: 0;
		line-height: 32px;
	}
	.steps-wrapper {
		float: left;
		width: 90%;
		padding: 0 5% 20px 5%;
	}
	.step-number {
		font-size: 1.8em; /* 18px */
		line-height: 30px;
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: block;
		text-align: center;
		margin-right: 10px;
	}
	.steps-header.open-step .step-number {
		background-color: var(--steps-header-open-step-step-number-background-color, #93b7bb);
		border: 1px solid #93b7bb;
		color: var(--steps-header-open-step-step-number-color, white);
	}
	.steps-header.closed-step .step-number {
		background-color: #f8f8f8;
		border: 1px solid #cccccc;
		color: #777777;
	}

	/* Buttons
	---------------------------------------------------------------------------------------------- */
	.blue-button {
		width: var(--button-width, 100%);
		max-width: 100%;
		height: 50px;
	}
	.green-button {
		width: 100%;
		max-width: 100%;
	}
	.right-side {
		width: var(--button-width, 100%);
		float: right;
		margin-bottom: 20px;
	}
	.left-side {
		float: left;
		margin-bottom: 20px;
	}
	.center-aligned {
		float: right;
		margin-bottom: 20px;
	}
	.radio-button {
		margin-right: 10px;
	}
	.check-box {
		margin-right: 10px;
	}

	/* Input fields
	---------------------------------------------------------------------------------------------- */
	.content-row.one-col {
		width: 100%;
	}
	.content-row.one-and-half-col {
		width: 100%;
	}
	.content-row.two-col {
		width: 100%;
	}
	.content-row.two-and-half-col {
		width: 100%;
	}
	.content-row.three-col {
		width: 100%;
	}
	.content-row.four-col {
		width: 100%;
	}
	.content-row.five-col {
		width: 100%;
	}
	.content-row.six-col {
		width: 100%;
	}
	.content-row.seven-col {
		width: 100%;
	}
	.content-row.eight-col {
		width: 100%;
	}
	.content-row.last-child {
		margin-right: 0;
	}
	.content-row.space-below {
		margin-bottom: 12px;
	}
	
	.mobile-compatible-dropdown {
		float: none !important;
	}
	
	.dropdown-content-menu {
		position: inherit !important;
	}
	
	.dropdown-content-menu a {
		padding: 0 55px !important;
		transition: all 0.5s ease !important;
		background-image: none !important;
		height: 38px !important;
	}
	
	.menu-div-adjustments {
		margin-left: 0;
		margin-top: 0;
		text-transform: uppercase;
		font-size: 1.3em;
		line-height: 38px;
	}
	
	.menu-sub-item {
		color: var(--menu-sub-item-color, #555) !important;
		background-color: var(--menu-sub-item-background-color, #eee) !important;
		background-image: none !important;
		border-bottom: 1px solid #cccccc !important;
	}
	
	.mobile-compatible-menu-item {
		max-height: 23px;
	}
	
	.dropBtnDown:hover {pointer-events: auto}

	.dropBtnDown {pointer-events: auto}

	/* Typography
	---------------------------------------------------------------------------------------------- */
	h1.entry-header {
		font-family: var(--element-entry-header-font-family, 'Open Sans') !important;
		font-size: 2.5em; /* 25px */
		line-height: 32px;
		color: var(--element-header-h1-entry-color, white);
		font-weight: var(--mobile-element-header-h1-entry-font-weight, 300);
		padding: 30px 0 0;
	}
	h1 {
		font-size: 2.2em; /* 22px */
		line-height: 28px;
		color: var(--element-header-h1-color, white);
		font-weight: var(--mobile-element-header-h1-font-weight, 300);
		padding: 15px 0;
		/* 		text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); */
	}
	h2 {
		font-size: 2em; /* 20px */
		line-height: 25px;
		color: var(--element-header-h2-color, black); /*#555555*/
		font-weight: var(--mobile-element-header-h2-font-weight, 600); /*600*/
		padding-bottom: 20px;
	}
	h2.floated-left, h2.title {
		padding-bottom: 20px;
		float: none;
	}

	/* Responsive Table 
	---------------------------------------------------------------------------------------------- */
	table.responsive-table th, table.responsive-table td {
		display: block;
		width: calc(50% - 16px);
		float: left;
	}
	table#statement {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#statement th {
		display: none;
	}

	/* Responsive tables */
	table#statement, table#statement thead, table#statement tbody,
		table#statement td, table#statement tr {
		display: block;
	}
	table#statement tr {
		border-bottom: 4px solid #cccccc;
	}
	table#statement td, table#statement tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 20px;
	}
	table#statement td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
		font-weight: bold;
	}
	table#statement tr.odd td {
		background-color: white;
	}
	table#statement td.txn-client-id:before {
		content: "Client ID";
	}
	
	table#statement td.txn-access-id:before {
		content: var(--element-access-id-label, "Number\APlate"); 
		font-weight: bold;
	}
	table#statement td.txn-carpark:before {
		content: "Car Park";
	}
	table#statement td.txn-type:before {
		content: "Type";
	}
	table#statement td.txn-description:before {
		content: "Description";
	}
	table#statement td.txn-status:before {
		content: "Status";
	}
	table#statement td.txn-action:before {
		content: "Action";
	}
	table#statement td.txn-date:before {
		content: "Date/Time";
	}
	table#statement td.txn-amount:before {
		content: var(--element-currency-symbol, "Amount \0024");
		font-weight: bold;
	}
	table#statement td.txn-invoice:before {
		content: "Invoice";
	}
	table#statement td.txn-invoice-date:before {
	    content: "Invoice Date";
	}
	
	/* Following table is for Invoice list page*/
	
	table#invoice tr.odd td {
		background-color: white;
	}
	
	table#invoice td, table#invoice tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 20px;
	}
	
	table#invoice, table#invoice thead, table#invoice tbody,
		table#invoice td, table#invoice tr {
		display: block;
	}
	
	table#invoice {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	
	table#invoice td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
		font-weight: bold;
	}
	
	table#invoice td.invoice-number:before {
		content: "Invoice Number";
	}
	table#invoice td.issue-date:before {
		content: "Issue Date";
	}
	table#invoice td.newCharges:before {
		content: "New Charges";
	}
	table#invoice td.paymentRequired:before {
		content: "Payment Required";
	}
	table#invoice td.totalPaid:before {
		content: "Total Paid";
	}
	table#invoice td.amountOwing:before {
		content: "Amount Owing";
	}
	table#invoice td.invoice:before {
		content: "Invoice";
	}
	table#invoice td.remittance-notice:before {
		content: "Remittance Notice";
	}
	table#invoice td.invoice-notification-datetime:before {
		content: "Notification Sent Date/Time";
	}
	table#invoice td.invoice-notification-status:before {
		content: "Notification Status";
	}
	
	/* Following table is for Invoice notification*/
	table#notificationTable td.notification-subject:before {
		content: "Subject";
	}
	table#notificationTable td.notification-to:before {
		content: "To";
	}
	table#notificationTable td.notification-message:before {
		content: "Message";
	}
	table#notificationTable td.notification-datetime:before {
		content: "Date/Time";
	}
	table#notificationTable td.notification-status:before {
		content: "Status";
	}
	
	/* following table is for the case: we show Vehicle Registration, Vehicle Make, Vehicle Model and Vehicle Colour */
	table.folding-table {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table.folding-table th {
		display: none;
	}
	
	/* Responsive tables */
	table.folding-table, table.folding-table thead, table.folding-table tbody,
		table.folding-table td, table.folding-table tr {
		display: block;
	}
	table.folding-table tr {
		border-bottom: 4px solid #cccccc;
	}
	table.folding-table td, table.folding-table tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
	}
	table.folding-table td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
		
	}
	table.folding-table tr.odd td {
		background-color: white;
	}
	
	/* Existing RFID */
	table#rfid-identity-list td:nth-of-type(1):before {
		content: "Select";
	}
	table#rfid-identity-list td:nth-of-type(2):before {
		content: var(--rfid-desc-label, "Description");
	}
	table#rfid-identity-list td:nth-of-type(3):before {
		content: var(--rfid-number-label, "RFID Number");
	}
	table#rfid-identity-list td:nth-of-type(4):before {
		content: "Status";
	}
	/* Existing RFID */

	table#rfid-identity-list-with-delete td:nth-of-type(1):before {
		content: "Select";
	}
	table#rfid-identity-list-with-delete td:nth-of-type(2):before {
		content: var(--rfid-desc-label, "Description");
	}
	table#rfid-identity-list-with-delete td:nth-of-type(3):before {
		content: var(--rfid-number-label, "RFID Number");
	}
	table#rfid-identity-list-with-delete td:nth-of-type(4):before {
		content: "Status";
	}
	table#rfid-identity-list-with-delete td:nth-of-type(5):before {
		content: "Delete";
	}

	/* Existing Access Cards */
	table#access-card-list td:nth-of-type(1):before {
		content: "Select";
	}
	table#access-card-list td:nth-of-type(2):before {
		content: var(--access-card-text1-label, "text1");
	}
	table#access-card-list td:nth-of-type(3):before {
		content: var(--access-card-text2-label, "text2");
	}
	table#access-card-list td:nth-of-type(4):before {
		content: "Card Number";
	}
	table#access-card-list td:nth-of-type(5):before {
		content: var(--epass-label, "epass");
	}
	table#access-card-list td:nth-of-type(6):before {
		content: "Status";
	}
	
	/* Access Card without select option */
	table#access-card-list-without-select-option td:nth-of-type(1):before {
		content: var(--access-card-text1-label, "text1");
	}
	table#access-card-list-without-select-option td:nth-of-type(2):before {
		content: var(--access-card-text2-label, "text2");
	}
	table#access-card-list-without-select-option td:nth-of-type(3):before {
		content: "Card Number";
	}
	table#access-card-list-without-select-option td:nth-of-type(4):before {
		content: "Status";
	}
	
	/* New Access Cards with Delete option*/
	table#access-card-list-with-delete td:nth-of-type(1):before {
		content: "Select";
	}
	table#access-card-list-with-delete td:nth-of-type(2):before {
		content: var(--access-card-text1-label, "text1");
	}
	table#access-card-list-with-delete td:nth-of-type(3):before {
		content: var(--access-card-text2-label, "text2");
	}
	table#access-card-list-with-delete td:nth-of-type(4):before {
		content: "Card Number";
	}
	table#access-card-list-with-delete td:nth-of-type(5):before {
		content: var(--epass-label, "epass");
	}
	table#access-card-list-with-delete td:nth-of-type(6):before {
		content: "Status";
	}
	table#access-card-list-with-delete td:nth-of-type(7):before {
		content: "Delete";
	}
		
	table#vehicle-list td:nth-of-type(1):before {
		content: "Vehicle Registration";
	}
	table#vehicle-list td:nth-of-type(2):before {
		content: "Vehicle Make";
	}
	table#vehicle-list td:nth-of-type(3):before {
		content: "Vehicle Model";
	}
	table#vehicle-list td:nth-of-type(4):before {
		content: "Vehicle Colour";
	}
	table#vehicle-list td:nth-of-type(5):before {
		content: "Delete";
	}
	
	/* following table is for the case: we show Vehicle Registration, Vehicle Model and Vehicle Colour. And we hide Vehicle Make. */
	table#vehicle-list-hide-vehicle-make {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-hide-vehicle-make th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-hide-vehicle-make, table#vehicle-list-hide-vehicle-make thead, table#vehicle-list-hide-vehicle-make tbody,
		table#vehicle-list-hide-vehicle-make td, table#vehicle-list-hide-vehicle-make tr {
		display: block;
	}
	table#vehicle-list-hide-vehicle-make tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-hide-vehicle-make td, table#vehicle-list-hide-vehicle-make tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-hide-vehicle-make td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-hide-vehicle-make tr.odd td {
		background-color: white;
	}
	table#vehicle-list-hide-vehicle-make td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-make td:nth-of-type(2):before {
		content: "Vehicle Model";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-make td:nth-of-type(3):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-make td:nth-of-type(4):before {
		content: "Delete";
		font-weight: bold;
	}
	
	/* following table is for the case: we show Vehicle Registration, Vehicle Make and Vehicle Colour. And we hide Vehicle Model. */
	table#vehicle-list-hide-vehicle-model {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-hide-vehicle-model th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-hide-vehicle-model, table#vehicle-list-hide-vehicle-model thead, table#vehicle-list-hide-vehicle-model tbody,
		table#vehicle-list-hide-vehicle-model td, table#vehicle-list-hide-vehicle-model tr {
		display: block;
	}
	table#vehicle-list-hide-vehicle-model tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-hide-vehicle-model td, table#vehicle-list-hide-vehicle-model tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-hide-vehicle-model td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-hide-vehicle-model tr.odd td {
		background-color: white;
	}
	table#vehicle-list-hide-vehicle-model td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-model td:nth-of-type(2):before {
		content: "Vehicle Make";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-model td:nth-of-type(3):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-model td:nth-of-type(4):before {
		content: "Delete";
		font-weight: bold;
	}

	/* following table is for the case: we show Vehicle Registration and Vehicle Colour. And we hide Vehicle Make and Vehicle Model. */
	table#vehicle-list-hide-vehicle-make-model {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-hide-vehicle-make-model th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-hide-vehicle-make-model, table#vehicle-list-hide-vehicle-make-model thead, table#vehicle-list-hide-vehicle-make-model tbody,
		table#vehicle-list-hide-vehicle-make-model td, table#vehicle-list-hide-vehicle-make-model tr {
		display: block;
	}
	table#vehicle-list-hide-vehicle-make-model tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-hide-vehicle-make-model td, table#vehicle-list-hide-vehicle-make-model tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-hide-vehicle-make-model td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-hide-vehicle-make-model tr.odd td {
		background-color: white;
	}
	table#vehicle-list-hide-vehicle-make-model td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-make-model td:nth-of-type(2):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}
	table#vehicle-list-hide-vehicle-make-model td:nth-of-type(3):before {
		content: "Delete";
		font-weight: bold;
	}


	/* followings are for summary page */
	/* following table is for the case: we show Vehicle Registration, Vehicle Make, Vehicle Model and Vehicle Colour. */
	table#vehicle-list-sum {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-sum th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-sum, table#vehicle-list-sum thead, table#vehicle-list-sum tbody,
		table#vehicle-list-sum td, table#vehicle-list-sum tr {
		display: block;
	}
	table#vehicle-list-sum tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-sum td, table#vehicle-list-sum tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-sum td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-sum tr.odd td {
		background-color: white;
	}
	table#vehicle-list-sum td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-sum td:nth-of-type(2):before {
		content: "Vehicle Make";
		font-weight: bold;
	}
	table#vehicle-list-sum td:nth-of-type(3):before {
		content: "Vehicle Model";
		font-weight: bold;
	}
	table#vehicle-list-sum td:nth-of-type(4):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}

	/* following table is for the case: we show Vehicle Registration, Vehicle Model and Vehicle Colour. And hide Vehicle Make. */
	table#vehicle-list-sum-hide-vehicle-make {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-sum-hide-vehicle-make th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-sum-hide-vehicle-make, table#vehicle-list-sum-hide-vehicle-make thead, table#vehicle-list-sum-hide-vehicle-make tbody,
		table#vehicle-list-sum-hide-vehicle-make td, table#vehicle-list-sum-hide-vehicle-make tr {
		display: block;
	}
	table#vehicle-list-sum-hide-vehicle-make tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-sum-hide-vehicle-make td, table#vehicle-list-sum-hide-vehicle-make tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-sum-hide-vehicle-make td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-sum-hide-vehicle-make tr.odd td {
		background-color: white;
	}
	table#vehicle-list-sum-hide-vehicle-make td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-sum-hide-vehicle-make td:nth-of-type(2):before {
		content: "Vehicle Model";
		font-weight: bold;
	}
	table#vehicle-list-sum-hide-vehicle-make td:nth-of-type(3):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}

	/* following table is for the case: we show Vehicle Registration, Vehicle Make and Vehicle Colour. And hide Vehicle Model. */
	table#vehicle-list-sum-hide-vehicle-model {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-sum-hide-vehicle-model th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-sum-hide-vehicle-model, table#vehicle-list-sum-hide-vehicle-model thead, table#vehicle-list-sum-hide-vehicle-model tbody,
		table#vehicle-list-sum-hide-vehicle-model td, table#vehicle-list-sum-hide-vehicle-model tr {
		display: block;
	}
	table#vehicle-list-sum-hide-vehicle-model tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-sum-hide-vehicle-model td, table#vehicle-list-sum-hide-vehicle-model tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-sum-hide-vehicle-model td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-sum-hide-vehicle-model tr.odd td {
		background-color: white;
	}
	table#vehicle-list-sum-hide-vehicle-model td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-sum-hide-vehicle-model td:nth-of-type(2):before {
		content: "Vehicle Make";
		font-weight: bold;
	}
	table#vehicle-list-sum-hide-vehicle-model td:nth-of-type(3):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}
	
	/* following table is for the case: we show Vehicle Registration and Vehicle Colour. And hide Vehicle Make, Vehicle Model. */
	table#vehicle-list-sum-hide-vehicle-make-model {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#vehicle-list-sum-hide-vehicle-make-model th {
		display: none;
	}

	/* Responsive tables */
	table#vehicle-list-sum-hide-vehicle-make-model, table#vehicle-list-sum-hide-vehicle-make-model thead, table#vehicle-list-sum-hide-vehicle-make-model tbody,
		table#vehicle-list-sum-hide-vehicle-make-model td, table#vehicle-list-sum-hide-vehicle-make-model tr {
		display: block;
	}
	table#vehicle-list-sum-hide-vehicle-make-model tr {
		border-bottom: 4px solid #cccccc;
	}
	table#vehicle-list-sum-hide-vehicle-make-model td, table#vehicle-list-sum-hide-vehicle-make-model tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#vehicle-list-sum-hide-vehicle-make-model td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	table#vehicle-list-sum-hide-vehicle-make-model tr.odd td {
		background-color: white;
	}
	table#vehicle-list-sum-hide-vehicle-make-model td:nth-of-type(1):before {
		content: "Vehicle\ARegistration";
		font-weight: bold;
	}
	table#vehicle-list-sum-hide-vehicle-make-model td:nth-of-type(2):before {
		content: "Vehicle Colour";
		font-weight: bold;
	}
	
	/* Footer
	---------------------------------------------------------------------------------------------- */
	#footer {
		margin: 0;
		background-color: var(--desktop-header-bg-color, #363636);
		border-top: 1px solid #000000;
	}
	#footer-text {
		width: 90%;
		margin: 0 5%;
		padding: 15px 0 0;
		text-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#footer-text p {
		font-size: 1.2em; /* 12px */
		color: #999999;
		font-weight: 400;
		float: none;
	}
	#footer-text p br {
		display: block;
	}
	img.footer-logo {
		max-width: 180px;
		height: auto;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		clear: both;
	}

	/*Product Page
	--------------------------------------------------------------------------------------------------- */
	#addUnreservedBay, #addReserveBay, #addToWaitList {
		max-width: 90%;
	}
	
	#showReservedCarParkMap, #showUnreservedCarParkMap {
		max-width: 90%;
		height: 50px;
	}
	
	#sp-row-width-location-reserved-btn, #sp-row-width-location-unreserved-btn {
		width: 100% !important;
	}
	
	#unreservedCarParkSelect, #reservedCarParkSelect {
		max-width: 100% !important;
	}
	
	#sp-row-width-waitList-btn {
		width: 100% !important;
		margin-left: 0px !important;
	}
	
#permitSelect, #baySelect, #bayGroupSelect {
	max-width: 100% !important;
	}
	
#bayMonthPrice {
	max-width: 100% !important;
	}

#baySelectForWaitList {
	width: 100% !important;
}
	
#baygroup-div, #reserved-baySelect-div, #reserved-Carpark-div, #unreserved-baySelect-div, #unreserved-Carpark-div, #reserved-baySelect-waitList-div {
	width: 90% !important;
	}
 
#selected-reserved-bay-list, #selected-unreserved-bay-list {
    max-width: 90% !important;
}

#ajax-error {
	margin-left: 0px !important;
}

table#product-list-sum {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#product-list-sum th {
		display: none;
	}

	/* Responsive tables */
	table#product-list-sum, table#product-list-sum thead, table#product-list-sum tbody,
		table#product-list-sum td, table#product-list-sum tr {
		display: block;
	}
	table#product-list-sum tr {
		border-bottom: 4px solid #cccccc;
	}
	table#product-list-sum td, table#product-list-sum tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#product-list-sum td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
		font-weight: bold;
	}
	table#product-list-sum tr.odd td {
		background-color: white;
	}
	table#product-list-sum td.product-name:before {
		content: "Product";
	}
	table#product-list-sum td.product-start-date:before {
		content: "Start Date";
	}
	table#product-list-sum td.product-carpark-name:before {
		content: "Car Park";
	}
	table#product-list-sum td.product-payment-method:before {
		content: "Payment Method";
	}
	table#product-list-sum td.product-payment-type:before {
		content: "Payment Type";
	}




table#modify-product-list-sum, table#show-promoCodes-list {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#modify-product-list-sum th, table#show-promoCodes-list th {
		display: none;
	}

	/* Responsive tables */
	table#modify-product-list-sum, table#modify-product-list-sum thead, table#modify-product-list-sum tbody,
		table#modify-product-list-sum td, table#modify-product-list-sum tr, table#show-promoCodes-list,
		table#show-promoCodes-list thead, table#show-promoCodes-list tbody,
		table#show-promoCodes-list td, table#show-promoCodes-list tr {
		display: block;
	}
	table#modify-product-list-sum tr, table#show-promoCodes-list tr {
		border-bottom: 4px solid #cccccc;
	}
	table#modify-product-list-sum td, table#modify-product-list-sum tr.odd td, 
	table#show-promoCodes-list td, table#show-promoCodes-list tr.odd td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	table#modify-product-list-sum td:before, table#show-promoCodes-list td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
		font-weight: bold;
	}
	table#modify-product-list-sum tr.odd td, table#show-promoCodes-list tr.odd td {
		background-color: white;
	}
	table#modify-product-list-sum td.product-select:before {
		content: "Select";
	}
	table#modify-product-list-sum td.product-carParkName:before {
		content: "Car Park\ALocation";
	}
	table#modify-product-list-sum td.product-productRequest:before {
		content: "Product Type";
	}
	table#modify-product-list-sum td.product-bay:before {
		content: "Reserved Bays\A/ Permits";
	}
	table#modify-product-list-sum td.product-bayAllocated:before {
		content: "Bay Allocated";
	}
	table#modify-product-list-sum td.product-paymentType:before {
		content: "Payment Type";
	}
	table#modify-product-list-sum td.product-status:before {
		content: "Status";
	}
	table#modify-product-list-sum td.product-activation-status:before {
		content: "Activation Status";
		top:10px;
	}
	table#modify-product-list-sum td.product-cancellation-status:before {
		content: "Cancellation Status";
		top:10px;
	}
	
	table#show-promoCodes-list td.promoCodeSubscription-number:before {
		content: "Promo Code";
	}
	table#show-promoCodes-list td.promoCodeSubscription-description:before {
		content: "Description";
	}
	table#show-promoCodes-list td.promoCodeSubscription-expiryDate:before {
		content: "Expiry Date";
	}
	table#show-promoCodes-list td.promoCodeSubscription-totalUsage:before {
		content: "Usage";
	}
	table#show-promoCodes-list td.promoCodeSubscription-status:before {
		content: "Status";
	}
	
	
	 /* to show row span look and feel */
	.product-activation-status,.product-cancellation-status {
		padding: 10px 0 9px !important;
		border: 0 none !important;
	}

	
	table#selected-reserved-bay-list, table#selected-unreserved-bay-list {
		width: 100%;
		margin: 0;
		border: 1px solid #e4e4e3;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
		table-layout: fixed;
		word-wrap: break-word;
	}
	table#selected-reserved-bay-list th, table#selected-unreserved-bay-list th {
		display: none;
	}

	/* Responsive tables */
	table#selected-reserved-bay-list, table#selected-reserved-bay-list thead, table#selected-reserved-bay-list tbody,
		table#selected-reserved-bay-list td, table#selected-reserved-bay-list tr,
	table#selected-unreserved-bay-list, table#selected-unreserved-bay-list thead, table#selected-unreserved-bay-list tbody,
		table#selected-unreserved-bay-list td, table#selected-unreserved-bay-list tr 
	{
		display: block;
	}
	
	table#selected-reserved-bay-list tr, table#selected-unreserved-bay-list tr {
		border-bottom: 4px solid #cccccc;
	}
	
	table#selected-reserved-bay-list td, table#selected-reserved-bay-list tr.odd td,
	table#selected-unreserved-bay-list td, table#selected-unreserved-bay-list tr.odd td
	{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding-left: 50% !important;
		padding-bottom: 36px;
	}
	
	table#selected-reserved-bay-list td:before,
	table#selected-unreserved-bay-list td:before
	{
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45% !important;
		padding-right: 10px;
		white-space: pre;
	}
	
	table#selected-reserved-bay-list tr.odd td,
	table#selected-unreserved-bay-list tr.odd td
	{
		background-color: white;
	}
	
	table#selected-reserved-bay-list td:nth-of-type(1):before,
	table#selected-unreserved-bay-list td:nth-of-type(1):before 
	{
		content: "Car Park";
		font-weight: bold;
	}
	
	table#selected-reserved-bay-list td:nth-of-type(2):before,
	table#selected-unreserved-bay-list td:nth-of-type(2):before
	{
	content: "Bay";
		font-weight: bold;
	}
	
	table#selected-reserved-bay-list td:nth-of-type(3):before,
	table#selected-unreserved-bay-list td:nth-of-type(3):before
	{
		content: "Total Monthly Cost";
		font-weight: bold;
	}
	
	table#selected-reserved-bay-list td:nth-of-type(4):before,
	table#selected-unreserved-bay-list td:nth-of-type(4):before
	{
		content: "Remove";
		font-weight: bold;
	}
	
	.half-col{
	    width: 40%;
	}
	
	.radio-button-center {
		margin-top: 8px;
		margin-right: 8px;
	}
	
	p.subheading {
        display: var(--p-subheading-mobile, none);
    }
    .promocode-content.content-row {
		margin-bottom: 35px;
		width: 100%;
	}
	.promocode-input {
		width: 100%;
	}
	input:disabled {
	    background-color: #ebecec;
	    color: #555555;
	}
	.additional-link-wrap {
		float: left;
		width: 90%;
		padding: 30px 5%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	#home-subheading, #home-subheading a:link, #home-subheading a:visited, #home-subheading a:hover {
	font-size:  medium;
}
}

/* Avoid Invoice radio button overlapping*/
#INVOICE {
	margin-left: 15px !important;
}