/* Minification failed. Returning unminified contents.
(23,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(76,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(83,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(87,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(95,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(122,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(130,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(138,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(141,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(142,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(174,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(178,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(248,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(319,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(320,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(328,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(329,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(380,25): run-time error CSS1039: Token not allowed after unary operator: '-white'
(388,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(389,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(393,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(411,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(423,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(427,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(449,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(561,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(562,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(568,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(578,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(614,14): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(638,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(642,14): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(685,14): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(752,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(755,22): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(759,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(760,22): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(764,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(765,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(769,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(770,42): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(774,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(775,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(808,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(809,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(810,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(814,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(815,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(816,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(820,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(821,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(822,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(826,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(827,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(828,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(833,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(834,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(840,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(841,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(842,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(846,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(847,25): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(848,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(853,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(854,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(890,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(912,17): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(927,14): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(944,17): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(966,17): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(975,17): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(991,25): run-time error CSS1039: Token not allowed after unary operator: '-tplcharcoal'
(992,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(996,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(1000,14): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(1005,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1010,25): run-time error CSS1039: Token not allowed after unary operator: '-tplblue'
(1200,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1269,21): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1284,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1294,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1392,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1423,21): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1432,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1442,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
(1510,15): run-time error CSS1039: Token not allowed after unary operator: '-tplbordercolor'
 */

/*.currentpage, .carparkdetails, .left_align_children {
	border-left: 1px solid red !important;
}*/

*, *::before, *::after {
	margin: 0;
	padding: 0;
}

/** {
    outline: 1px solid yellow!important;
}


div{
	outline : solid red 1px !important;
}
*/


:root {
	--white: white;
	--black: black;
	--tplcharcoal: #1a1a1a;
	--tplblue: #0082c6;
	--tplbordercolor: #7c7c7c;
}

.contentmain {
	background-color: var(--tplcharcoal);
}

::-webkit-input-placeholder {
	text-align: center;
}

:-moz-placeholder {
	text-align: center;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* color: var(--tplcharcoal);*/

@font-face {
	font-family: 'Inter-Bold';
	font-display: swap;
	src: url('../fonts/static/Inter-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Inter-Regular';
	font-display: swap;
	src: url('../fonts/static/Inter-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Piazzolla-Italic';
	font-display: swap;
	src: url('../fonts/static/Piazzolla/Piazzolla-Italic.ttf') format('truetype');
}

html {
	font-family: "Inter-Regular", Arial, sans-serif;
	font-size: 12px;
	hheight: 100%;
	background-color: var(--tplcharcoal);
}

body {
	font-family: "Inter-Regular", Arial, sans-serif;
	font-size: 12px;
	hheight: 100%;
	background-color: var(--tplcharcoal);
}

label, a {
	color: var(--white);
}

div {
	width: auto;
}

ddiv.pageviewer {
	background-color: var(--tplblue);
}
/*
div.pageviewer { 
    opacity: 0.56;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;

}

div.pageviewer div.pagecontents{ 
    opacity: 0.96;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;

}

*/


.ratedisabled, div.ratedisabled {
	color: var(--tplbordercolor);
}

div.subpage {
	display: none;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	background-color: var(--tplblue);
}

div.pagecontents {
	display: flex;
	min-height: 100vh;
	width:100vw;
	width: auto;
	background-color: var(--tplblue);
	flex-direction: column;
	justify-content: center;
	background-color: var(--tplcharcoal);
	color: var(--white);
}

div.pageviewer div.subpage {
	transition: opacity 0.5s ease-out,box-shadow 1s ease-in-out;
}

didv.pageviewer.hasContents div.pagecontents {
	transition: opacity 0.5s ease-in-out,box-shadow 1s ease-in-out;
}

div.pageviewer {
	transition: opacity 0.5s ease-out,box-shadow 1s ease-in-out;
}


/*div.pageviewer
{
   transition: opacity 0.5s ease-in-out,box-shadow 1s ease-in-out;
}
*/


div.pagecontents div.pagedata.badges{
	justify-content : center;
}

div.pagecontents.navigator {
	justify-content: flex-start;
}

div.pagecontents.startpage {
	background-color: var(--tplblue);
}

div.pagecontents.apppage {
	background-color: var(--tplcharcoal);
}

div.pagecontents.apppage div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

div.pagecontents.apppage div.badgecontainer #logo {
     margin-bottom: 20px;
}

div.pagecontents.apppage div.badgecontainer a {
    margin-top: 40px;
}

div.pagecontents.apppage div.badgecontainer img{
	width :200px;
}


div.pagecontents.startpage div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

div.pagecontents didv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

div.pagecontents div.left_align_children {
	align-items: start;
	width: 75%;
	position: relative;
	left: 30%;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: self-start;
	min-width: 50%;
}


div.pagecontents div.carparklistdata div.left_align_children {
	align-items: start;
	width: auto;
	margin: 0;
	position: inherit;
}

div.pagecontents div.carparklistdata div.left_align_children {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


div.pagecontents div.pagenavigation {
	padding-bottom: 15px;
	padding-top: 15px;
	background-color: var(--tplblue);
}

div.pagecontents div.pagenavigationcontent {
	display: flex;
	width: auto;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: self-start;
	flex-grow: 1;
}

div.pagecontents div.pagenavigationcontent div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-self: center;
}

div.pagecontents div.pagenavigationcontent div.pagelinks {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-self: center;
	width: 100px;
}

div.pagecontents div.pagenavigationcontent div.pagelinks a {
	font-size: 40px;
	text-decoration: none;
}

div.pagecontents div.pagenavigationcontent div.currentpage {
	display: block;
	margin-left: 20px;
	font-size: 20px;
	width: auto;
	margin: auto;
	position: absolute;
	left: 22%;
}

div.pagecontents div.pagenavigationcontent div.completedpage {
	display: block;
	margin-left: 20px;
	font-size: 20px;
	width: auto;
	margin: auto;
	position: absolute;
	left: 22%;
}

div.completedpage {
	font-size: 20px;
	width: 100%;
}

div.currentpage span {
	madrgin-left: -120px;
}


div.pagedata {
	flex-grow: 1;
}

div.pagecontents div.pagedata {
	justify-content: flex-start;
	background-color: var(--tplcharcoal);
	color: var(--white);
	display: flex;
	flex-direction: column;
	jdustify-content: center;
	align-items: center;
}

div.carparkheadercontainer {
	background-color: var(--tplcharcoal);
	color: var(--white);
	align-self: flex-start;
	width: 100%;
	height: auto;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}



div.carparkheadercontainer div.content {
	left: 22%;
}

div.subpage.showcontents {
	display: flex;
}

label.welcome {
	font-family: 'Inter-Regular';
	font-size: 5ex;
}

label.welcomeMsg {
	font-family: 'Piazzolla-Italic';
	font-size: 4ex;
}

div.buttonContainer {
	margin-top: 5em;
}

.button {
	font-family: 'Inter-Regular';
	font-size: 3.2ex;
	border: none;
	background-color: transparent;
	font-family: inherit;
	padding: 0;
	cursor: pointer;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	//box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
	padding: 0.25em 0.75em;
	border: 1px solid var(--white);
	text-decoration: none;
	/*transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;*/
	min-width: 130px;
	padding: 0.675rem 0.75rem;
}

.button.disabledbtn {
	border: 1px solid var(--tplbordercolor);
	color: var(--tplbordercolor);
}

.button:hover:not(.disabledbtn) {
	color: var(--white);
	transform: scale(1.05);
}

div.pagelinks {
	padding-left: 5px;
}

a.pagesnavigate {
	filter: brightness(0.90) !important;
}

a.pagesnavigate:hover {
	transition: 0.3s;
	filter: brightness(1.0) !important;
}

div.pagecontents div.carpark {
	background-color: var(--tplcharcoal);
	width: 100%;
	height: 250px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.pagecontents div.carparklistdata {
	background-color: var(--tplcharcoal);
}

div.pagecontents div.carparklistdata div.carpark {
	background-color: var(--tplcharcoal);
	width: 100%;
	height: 400px;
	height: 250px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	/*filter: brightness(0.75);*/
}

div.pagecontents div.carparklistdata div.carpark:hover {
	cursor: pointer;
	filter: brightness(1.0) !important;
}

div.content:hover {
	transition: 0.3s;
	filter: brightness(1.0) !important;
}

div.pagecontents div.carparklistdata div.carpark:hover span {
	filter: unset;
	color: var(--white) !important;
}

div.pagecontents div.carparklistdata div.content {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin: auto;
	position: absolute;
	left: 30%;
	width: auto;
}

div.pagecontents div.carparkheadercontainer > div.carpark div.content {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin: auto;
	position: absolute;
	left: 30%;
	width: auto;
}

div.pagecontents div.carparkheadercontainer.lefttweak > div.carpark div.content {
	/*padding-left: 4px;*/
}



div.pagecontents div.pagedata > div.carpark div.content {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin: auto;
	position: absolute;
	left: 30%;
	width: auto;
	padding-left: 4px;
}

div.carparklocation {
	dwidth: 50px;
	position: absolute;
	left: -15%;
}

div.carparkdetails {
	width: auto;
	max-width: 75vw;
	display: flex;
	flex-direction: column;
	pdosition: relative;
	lefdt: -10%;
}

div.left_align_children div.carparkdetails {
	widdth: 75vw;
	widdth: 400px;
	max-width: 75vw;
	display: flex;
	flex-direction: column;
}

div.carparkheadercontainer div.carparkdetails {
	width: auto;
}

div.carparkdetails span.carparkname {
	font-family: 'Inter-Regular';
	font-size: 3ex;
	font-weight: bold;
	width: 100%;
	text-align: left;
}

span.exitdetails {
	font-family: 'Piazzolla-Italic';
	font-size: 1.2rem;
}

div.carparkdetails span.carparkaddress {
	width: 100%;
	font-family: 'Piazzolla-Italic';
	font-size: 1.2rem;
	text-align: left;
}

div.carparklocation img {
	width: 30px;
	/*filter: brightness(0.75) !important;*/
	align-self: flex-start;
}

div.carparklocation img:hover {
	width: 30px;
	filter: brightness(1.0) !important;
}



div.carpark.selectedcarpark span {
	/*	color: var(--tplblue) !important;*/
}

div.pagecontents div.carparklistdata div.carpark.selectedcarpark {
	filter: brightness(1.0) !important;
}



div.pagecontents div.durationdata {
	justify-content: flex-start;
	background-color: var(--tplcharcoal);
	color: var(--white);
	display: flex;
	flex-direction: column;
}

div.pagecontents div.durationdata div.carparkduration {
	background-color: var(--tplcharcoal);
	width: 100%;
	min-height: 110px;
	left: 0%;
	border-bottom: 1px solid #7c7c7c;
	padding-top: 15px;
}


div.pagecontents div.durationdata div.carparkduration:not(.ratedisabled) {
	color: var(--white);
}

div.pagecontents div.durationdata div.carparkduration span {
	/*filter: brightness(0.7);*/
}

div.pagecontents div.durationdata div.carparkduration div.durationcontent {
	width: 75vw;
	width: fit-content;
	max-width: 75vw;
	ledft: 15%;
	position: relative;
}

div.pagecontents div.durationdata div.carparkduration span.durationName {
	font-family: 'Inter-Regular';
	font-size: 3ex;
	font-weight: bold;
	width: 100%;
	text-align: left;
}

span.durationdRateDesc {
	font-size: 1.5ex;
}

div.pagecontents div.durationdata div.carparkduration span.durationRateDesc {
    font-family: 'Inter-Bold';
    font-size: 2.2ex;
    width: 100%;
    text-align: left;
    padding: 2px 0;
}

div.pagecontents div.durationdata div.carparkduration:not(.ratedisabled) span.durationRateDesc {
	color: var(--tplblue);
}

div.pagecontents div.durationdata div.carparkduration span.durationAvailability {
	font-family: 'Piazzolla-Italic';
	font-size: 2ex;
	width: 100%;
	text-align: left;
}

div.pagecontents div.durationdata div.carparkduration span.durationExpiry {
	font-family: 'Piazzolla-Italic';
	font-size: 2ex;
	width: 100%;
	text-align: left;
}

div.pagecontents div.durationdata div.carparkduration:hover {
	cursor: pointer;
	filter: brightness(1.0) !important;
}

div.pagecontents div.durationdata div.carparkduration:not(.ratedisabled):hover span {
	filter: unset;
	color: var(--white) !important;
}

div.pagecontents div.durationdata div.carparkduration:not(.ratedisabled):hover span.durationRateDesc {
	color: var(--tplblue) !important;
}

div.durationdetails {
	display: flex;
	flex-direction: column;
	max-width: 70vw;
}

div.carparkduration .selected div.durationdetails {
	/*color: var(--tplblue) !important;*/
	filter: brightness(1.0) !important;
}

div.pagecontents div.durationdata div.carparkduration.selected, div.pagecontents div.durationdata div.carparkduration.selected div {
	/*	color: var(--tplblue) !important;*/
}

div.pagecontents div.durationdata div.carparkduration.selected span {
	filter: brightness(1.0) !important;
}

span.payratedesc {
	text-align: center;
	font-family: 'Inter-Regular';
	font-size: 3.0ex;
	width: 100%;
	font-weight: 700;
}

span.payfee {
	text-align: center;
	font-family: 'Inter-Regular';
	font-size: 2.2ex;
    margin-top: 5px;
	margin-bottom: 1em;
}

.payplate {
	text-align: center;
	font-family: 'Inter-Bold';
	font-size: 2.5ex;
	width: 100%;
	color: var(--tplblue);
    margin-top: 8px;
	/*font-weight: 700;*/
}

div.hrcontainer {
	display: flex;
	flex-direction: row;
	width: 100%;
}

div.hr {
	width: 78%;
	margin-top: 15px;
	margin-bottom: 10px;
	dleft: 22%;
	margin-left: 22%;
	display: flex;
	border-bottom: 1px solid #7c7c7c;
}

div.cardcontainer {
	pdosition: relative;
	left: 22%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}

div.cardcontainerin {
	/*left: 22%;
position: relative;
*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}


div.pagecontents div.pagedata.paymentdata .webcontrol {
	max-width: 290px;
	margin: 5px;
	text-align:center;
}

div.pagecontents div.cardsecurity {
	flex-direction: row;
	max-width: 320px;
	display: flex;
}


.webcontrol {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	padding: .375rem .25rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid var(--tplbordercolor);
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	outline-color: var(--tplbordercolor);
}

.webcontrol:focus-visible {
	border: 1px solid var(--tplbordercolor);
	outline-color: var(--tplbordercolor);
}

.webcontrol.tplcolors {
	background-color: var(--tplcharcoal);
	color: var(--white);
}

input:-webkit-autofill {
	color: var(--white) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--tplbordercolor) inset;
}

.webcontrol.tplcolors:-internal-autofill-selected {
	background-color: var(--tplcharcoal) !important;
	color: var(--white) !important;
	background-image: none !important;
}

div.pagecontents div.pagedata.paymentdata div.cardsecurity div.expyear .webcontrol {
	margin-left: 0px;
	margin-right: 0px;
}

div.pagecontents div.pagedata.platedata {
	justify-content: flex-start;
	padding-bottom: 30px;
	padding-top: 30px;
}

div.pagecontents div.pagedata .webcontrol {
	max-width: 170px;
    text-align: center;
}

div.pagecontents div.pagedata.platedata .webcontrol {
	max-width: 150px;
}

div.pagecontents div.pagedata.platedata .webcontrol.licenceplate {
	text-align: center;
}

div.pagecontents div.pagedata.platedata div.buttonContainer {
	margin-top: 2em;
}

div.pagecontents div.pagedata.platedata div.buttonContainer .button {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--white);
}

div.pagecontents div.pagedata.paymentdata div.buttonContainer .button {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--white);
}

div.pagecontents div.pagedata.paymentdata div.buttonContainer .button.disabledbtn {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--tplbordercolor);
}

div.pagecontents div.pagedata.platedata div.buttonContainer .button.disabledbtn {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--tplbordercolor);
}


div.pagecontents div.pagedata.platedata div.buttonContainer .button:not(.disabledbtn):hover {
	background-color: var(--tplblue);
	color: var(--white);
	transform: scale(1.05);
	/*box-shadow: 0 4px 6px rgba(255, 255, 255, 0.78);*/
}

div.pagecontents div.pagedata div.buttonContainer .button {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--white);
}

div.pagecontents div.pagedata div.buttonContainer .button.disabledbtn {
	background-color: var(--tplblue);
	border: 1px solid var(--tplbordercolor);
	color: var(--tplbordercolor);
}


div.pagecontents div.pagedata div.buttonContainer .button:not(.disabledbtn):hover {
	background-color: var(--tplblue);
	color: var(--white);
	transform: scale(1.05);
	/*box-shadow: 0 4px 6px rgba(255, 255, 255, 0.78);*/
}

label.error {
	margin: 2px;
}

div.pagecontents div.pagedata.paymentdata {
	justify-content: flex-start;
	padding-bottom: 30px;
	padding-top: 2em;
}




div.cardsecurity div {
	padding: 5px;
}

div.cardsecurity > div {
	padding: 0px;
}

div.pagecontents div.pagedata div.cardsecurity .webcontrol {
	max-width: 88px;
}

div.pageerror {
	background: red;
	display: none;
}

div.pagecontents div.pagedata.paymentdata div.paytc {
	color: var(--tplbordercolor);
	max-width: 290px;
	margin: 5px;
	text-align: center;
	padding: 10px;
}

div.pagecontents div.pagedata.paymentdata div.buttonContainer {
	margin-top: 2em;
}


div.pageerror.showerror {
	background: red;
	display: block;
	padding: 10px;
	margin: 5px;
	max-width: 290px;
}


div.pagecontents div.pagedata.platedata div.info {
    color: var(--tplbordercolor);
    max-width: 290px;
    margin: 5px;
    text-align: center;
    padding: 0 10px 10px 10px;
    font-size: 1.4rem;
}

div.pagecontents div.pagedata.emaildata {
	justify-content: flex-start;
	padding-bottom: 30px;
	padding-top: 30px;
}

div.pagecontents div.pagedata.emaildata div.info {
	color: var(--tplbordercolor);
	max-width: 290px;
	margin: 5px;
	text-align: center;
	padding: 10px;
	font-size: 1.4rem;
}

div.pagecontents div.pagedata.emaildata .webdcontrol {
	max-width: 250px;
}

div.pagecontents div.pagedata.emaildata div.buttonContainer {
	margin-top: 2em;
}

div.pagecontents div.pagedata.emaildata div.download {
    color: var(--tplbordercolor);
	max-width: 290px;
	margin: 5px;
	text-align: center;
	padding: 10px;
	font-size: 1.4rem;
	padding-top: 35px;
}

div.pagecontents div.pagedata.emaildata div.download img {
	padding-top: 0;
	margin-left: 2px;
	margin-right: 2px;
}

div.pagecontents div.pagedata.thankyoudata {
	justify-content: flex-start;
	padding-bottom: 30px;
	padding-top: 30px;
}

div.pagecontents div.pagedata.thankyoudata div.info {
    color: var(--tplbordercolor);
    max-width: 290px;
    margin: 5px;
    text-align: center;
    padding: 10px;
    font-size: 1.4rem;
}

div.pagecontents div.pagedata.thankyoudata div.download {
    color: var(--tplbordercolor);
    max-width: 290px;
    margin: 5px;
    text-align: center;
    padding: 10px;
    font-size: 1.4rem;
    padding-top: 35px;
}

div.pagecontents div.pagedata.thankyoudata div.download img {
    padding-top: 15px;
    margin-left: 2px;
    margin-right: 2px;
}

body.error-page-wrapper {
	background-color: var(--tplcharcoal);
	color: var(--white);
}

div.headerbar {
	background-color: var(--tplblue);
}

.plain.error-page-wrapper div.head-line.secondary-text-color {
	color: var(--tplblue);
}


.plain.error-page-wrapper div.head-line.primary-text-color {
	color: var(--white);
}

.plain.error-page-wrapper hr {
	height: 1px;
	background-color: var(--tplblue);
	border: none;
	width: 100%;
	margin: 15px 0;
}


.titlecontainer {
	width: 95%;
	margin-top: -100px;
	padding-top: 20px;
	max-width: 95%;
}

.titlecontainer {
	width: 100% !important;
	margin-top: -100px;
	padding-top: 13px;
	max-width: 100% !important;
	padding-left: 0px;
}

.titlecontainer row {
	margin: 0px !important;
	text-align: left !important;
}

.mbr-title.display-2 {
	font-size: 2.5rem;
	font-weight: 500;
	font-size: 36px;
}

.title {
	font-weight: 800;
	text-align: center;
	font-size: 20px;
}

div.headerbar {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

div.headerbar div {
	padding: 3px;
}

div.content-container {
	width: auto;
}

divd {
	border: solid 1px yellow;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#selectedplate {
	text-transform: uppercase;
}

::-webkit-input-placeholder { /* WebKit browsers */
	text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	text-transform: none;
}

::placeholder { /* Recent browsers */
	text-transform: none;
}

.qrmode {
	visibility : hidden;
}

@media screen and (max-width: 900px) {
	label.welcome {
		font-family: 'Inter-Regular';
		font-size: 4ex;
	}

	div.pagecontents div.pagedata.emaildata .webcontrol {
		max-width: 250px;
	}
	
	div.pagecontents div.pagedata.platedata div.buttonContainer {
		margin-top: 1em;
	}

	div.pagecontents div.pagedata.paymentdata div.buttonContainer {
		margin-top: 1em;
	}

	div.pagecontents div.pagedata.emaildata div.buttonContainer {
		margin-top: 1em;
	}


	div.pagecontents div.carparklistdata div.content {
		left: 20%;
	}

	div.pagecontents div.pagenavigationcontent div.currentpage {
		left: 22%;
	}

	div.pagecontents div.carparklistdata div.content {
		left: 22%;
	}

	div.pagecontents div.pagedata > div.carpark div.content {
		left: 20%;
	}

	div.pagecontents div.left_align_children {
		left: 27%;
	}

	div.pagecontents div.carparkheadercontainer > div.carpark div.content {
		left: 22%;
	}


	div.pagecontents div.pagenavigationcontent div.pagelinks {
		width: 100px;
	}


	label.welcomeMsg {
		font-family: 'Piazzolla-Italic';
		font-size: 3ex;
	}

	.button {
		font-size: 3ex;
	}

	div.pagecontents div.carparklistdata div.carpark {
		height: 200px;
	}

	div.pagecontents div.pagedata.paymentdata .webcontrol {
		max-width: 250px;
		margin: 5px;
	}

    div.pagecontents div.pagedata div.cardsecurity .webcontrol {
        max-width: 75px;
    }

	div.pagecontents div.carpark {
		height: 200px;
		filter: brightness(1);
	}

	div.carparklocation img {
		width: 30px;
		filter: brightness(1) !important;
	}


	div.carparkdetails {
		width: auto;
	}

	div.carparkdetails span.carparkname {
		font-family: 'Inter-Regular';
		font-size: 3.5ex;
		font-weight: bold;
		
	}

	div.pagecontents div.pagedata.paymentdata div.paytc {
		color: var(--tplbordercolor);
		max-width: 290px;
		margin: 5px;
		
		text-align: center;
		padding: 10px;
	}

	div.carparkdetails span.carparkaddress {
		font-family: 'Piazzolla-Italic';
		font-size: 2.0ex;
	}

	div.hr {
		width: 78%;
		margin-top: 2em;
		margin-bottom: 1em;
		border-bottom: 1px solid #7c7c7c;
	}

	div.pagecontents div.left_align_children {
		align-items: start;
		width: 78%;
		position: relative;
		left: 22%;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		align-self: self-start;
		min-width: 50%;
	}


	div.pagecontents div.pagenavigationcontent div.completedpage {
		display: block;
		margin-left: 20px;
		font-size: 20px;
		width: auto;
		margin: auto;
		position: absolute;
		left: 22%;
	}
}



@media screen and (max-width: 480px) {
	label.welcome {
		font-family: 'Inter-Regular';
		font-size: 4ex;
	}

	div.hr {
		width: 78%;
		margin-top: 2em;
		margin-bottom: 1em;
		border-bottom: 1px solid #7c7c7c;
	}

	div.pagecontents div.durationdata div.carparkduration div.durationcontent {
		width: 75vw;
		width: fit-content;
		max-width: 75vw;
		left: 0%;
		position: relative;
	}

    div.pagecontents div.pagedata.platedata div.info {
        color: var(--tplbordercolor);
        max-width: 290px;
        margin: 5px;
        text-align: center;
        padding: 0 10px 10px 10px;
        font-size: 1.2rem;
        max-width: 200px;
    }

	div.pagecontents div.pagedata.emaildata .webcontrol {
		max-width: 170px;
	}
	

	div.pagecontents div.pagedata.emaildata div.info {
		color: var(--tplbordercolor);
		max-width: 290px;
		margin: 5px;
		text-align: center;
		padding: 10px;
		font-size: 1.3rem;
	}


	div.pagecontents div.pagedata.thankyoudata div.info {
		color: var(--tplbordercolor);
		max-width: 290px;
		margin: 5px;
		text-align: center;
		padding: 10px;
		font-size: 1.3rem;
	}

	div.pagecontents div.carparklistdata div.content {
		left: 20%;
	}

	div.pagecontents div.pagenavigationcontent div.currentpage {
		left: 22%;
	}

	div.pagecontents div.carparklistdata div.content {
		left: 22%;
	}

	div.pagecontents div.pagedata > div.carpark div.content {
		left: 20%;
	}

	div.pagecontents div.left_align_children {
		left: 22%;
	}
	/*
	div.pagecontents div.carparkheadercontainer > div.carpark div.content {
		left: 10%;
	}*/


	div.pagecontents div.pagenavigationcontent div.pagelinks {
		width: 80px;
	}


	label.welcomeMsg {
		font-family: 'Piazzolla-Italic';
		font-size: 3ex;
	}

	.button {
		font-size: 3ex;
	}

	div.pagecontents div.carparklistdata div.carpark {
		height: 200px;
	}


	div.pagecontents div.carpark {
		height: 200px;
		filter: brightness(1);
	}

	div.carparklocation img {
		width: 30px;
		filter: brightness(1) !important;
	}

    span.payfee {
        max-width: 220px;
    }

	div.carparkdetails {
		width: auto;
	}

	div.carparkdetails span.carparkname {
		font-family: 'Inter-Regular';
		font-size: 3.5ex;
		font-weight: bold;
		inline-size: 250px;
	}

	div.carparkdetails span.carparkaddress {
		font-family: 'Piazzolla-Italic';
		font-size: 2.0ex;
	}

	div.pagecontents div.pagedata.paymentdata .webcontrol {
		max-width: 170px;
		margin: 5px;
	}

	div.pagecontents div.cardsecurity {
		flex-direction: row;
		max-width: 250px;
		display: flex;
	}

	div.pagecontents div.pagedata div.cardsecurity .webcontrol {
		max-width: 48px;
	}

	div.pagecontents div.pagedata.paymentdata div.paytc {
		color: var(--tplbordercolor);
		max-width: 260px;
		margin: 5px;
		text-align: center;
		padding: 10px;
	}
}

@media screen and (min-width: 901px) {
	label.welcome {
		font-family: 'Inter-Regular';
		font-size: 4ex;
	}

	div.pagecontents div.carparklistdata div.content {
		left: 30%;
	}

	div.pagecontents div.pagedata.platedata div.buttonContainer {
		margin-top: 1em;
	}

	div.pagecontents div.pagenavigationcontent div.currentpage {
		left: 27%;
	}

	div.pagecontents div.carparklistdata div.content {
		left: 27%;
	}

    div.pagecontents div.pagedata.platedata div.info {
        color: var(--tplbordercolor);
        max-width: 290px;
        margin: 5px;
        text-align: center;
        padding: 0 10px 10px 10px;
        font-size: 1.5rem;
    }

	div.pagecontents div.pagedata.emaildata div.info {
		color: var(--tplbordercolor);
		max-width: 290px;
		margin: 5px;
		text-align: center;
		padding: 10px;
		font-size: 1.5rem;
	}


	div.pagecontents div.pagedata.thankyoudata div.info {
		color: var(--tplbordercolor);
		max-width: 290px;
		text-align: center;
		padding: 10px;
		font-size: 1.5rem;
	}


	div.pagecontents div.pagedata > div.carpark div.content {
		left: 30%;
	}

	div.pagecontents div.left_align_children {
		left: 30%;
	}

	div.pagecontents div.carparkheadercontainer > div.carpark div.content {
		left: 27%;
	}


	div.pagecontents div.carparkheadercontainer.lefttweak > div.carpark div.content {
		paddidng-left: 4px;
	}

	div.hr {
		width: 73%;
		margin-left: 27%;
		margin-top: 2em;
		margin-bottom: 1em;
		border-bottom: 1px solid #7c7c7c;
	}

	



	div.pagecontents div.pagenavigationcontent div.pagelinks {
		width: 100px;
	}

	div.pagecontents div.left_align_children {
		align-items: start;
		width: 70%;
		position: relative;
		left: 27%;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		align-self: self-start;
		min-width: 50%;
	}

	label.welcomeMsg {
		font-family: 'Piazzolla-Italic';
		font-size: 3ex;
	}

	.button {
		font-size: 3ex;
	}

	div.pagecontents div.carparklistdata div.carpark {
		height: 200px;
	}

	div.pagecontents div.pagedata.paymentdata div.paytc {
		color: var(--tplbordercolor);
		max-width: 290px;
		margin: 5px;
		text-align: center;
		padding: 10px;
	}

	div.pagecontents div.carpark {
		height: 200px;
		filter: brightness(1);
	}

	div.carparklocation img {
		width: 30px;
		filter: brightness(1) !important;
	}


	div.carparkdetails {
		width: auto;
	}

	div.pagecontents div.pagedata.platedata div.buttonContainer {
		margin-top: 1em;
	}

	div.pagecontents div.pagedata.paymentdata div.buttonContainer {
		margin-top: 1em;
	}

	div.pagecontents div.pagedata.emaildata .webcontrol {
		max-width: 290px;
	}

	div.pagecontents div.pagedata.emaildata div.buttonContainer {
		margin-top: 1em;
	}

	div.carparkdetails span.carparkname {
		font-family: 'Inter-Regular';
		font-size: 3.5ex;
		font-weight: bold;
	}

	div.carparkdetails span.carparkaddress {
		font-family: 'Piazzolla-Italic';
		font-size: 2.0ex;
	}

	div.pagecontents div.pagenavigationcontent div.completedpage {
		display: block;
		margin-left: 20px;
		font-size: 20px;
		width: auto;
		margin: auto;
		position: absolute;
		left: 27%;
	}
}