/* Main setup */
html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	color: white;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	font-size: 42px;
	line-height: 52px;
	overflow: hidden;
}
div#bgscreen {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(https://storage.googleapis.com/cdn-tds-gcp-prod-1/kiosk/CNJ/mainbackground/background.jpg);
	background-color: rgba(22, 40, 67, .95);
    background-size: cover;
	background-position: center;
    background-blend-mode: multiply;
	z-index: 2;
}
div#bgscreen.home {
	background-color: rgba(37, 92, 159, .7);
}

/* Modals */
div#lightbox {
	background: #000000;
	opacity: 0.5;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	display: none;
}
div#modalcontain,
div#itinmodalcontain {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 101;
	display: none;
}
div#modal,
div#itinmodal {
	background: white;
	padding: 38px 43px 27px 43px;
	min-width: 300px;
	max-width: 700px;
	width: 45%;
}
div#modal h2 {
	color: #255C9F;
	margin: 0 0 30px 0;
	font-weight: bold;
	font-size: 55px;
	line-height: 65px;
	text-align: center;
}
div#modal p {
	color: black;
	margin: 20px 0 0 0;
	font-size: 30px;
	line-height: 37px;
	text-align: center;
}
div#modal p:first-child {
	margin-top: 0;
}
div#modal p.iconcontain {
	margin: 0 0 22px 0;
	font-size: 46px;
}
div#modal p.iconcontain span.warning {
	color: #F8BA02;
}
div#modal p.modalflex {
	display: flex;
	margin: 76px 0 0 0;
	align-items: center;
	justify-content: space-between;
}
div#modal p.modalflexc {
	display: flex;
	margin: 76px 0 0 0;
	align-items: center;
	justify-content: space-around;
}
div#modal label {
	position: relative;
	font-size: 50px;
}
div#modal label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
div#modal label span.radio {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	top: 0;
	left: 0;
	height: 42px;
	width: 42px;
	padding: 2px;
	background-color: white;
	border: 2px solid #777777;
	border-radius: 50%;
}
div#modal label span.radio:after {
	content: "";
	position: absolute;
	display: none;
	left: 5px;
	top: 5px;
	width: 0;
	height: 0;
	border: 18px solid #E15B12;
	border-radius: 50%;
}
div#modal label input:checked ~ span.radio {
	border-color: #E15B12;
}
div#modal label input:checked ~ span.radio:after {
	display: block;
}
div#modal button,
div#itinmodal button {
	background: #E15B12;
	color: white;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 36px;
	padding: 20px;
	border: none;
	border-radius: 5px;
	font-weight: bold;
}
div#modal button.secondary,
div#itinmodal button.secondary {
	background: #255C9F;
}
div#modal button.wider {
	width: 216px;
	height: 76px;
}
div#modal .error {
	color: #dd0000;
}
 
div#modal img.warning {
	width: 54px;
	height: 48px;
	margin-bottom: 15px;
}
div#modal p.warn {
	margin-top: 107px;
}
div#modal p.warnstd {
	margin-top: 4.69em;
}
div#modal p.warndec {
	margin-top: 3.55em;
}
div#itinmodal h2 {
	margin: -38px -43px 0 -43px;
	background: #E15B12;
	color: white;
	padding: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
}
div#itinmodal p {
	margin: 0.5rem 60px;
	display: flex;
	justify-content: space-between;
	color: #333333;
	font-size: 24px;
	line-height: 40px;
}
div#itinmodal p.header {
	margin-top: 2rem;
	padding-bottom: 2px;
	border-bottom: 1px solid #255c9f;
	color: #255c9f;
	font-weight: bold;
}
div#itinmodal div {
	text-align: center;
	margin-top: 2rem;
}

/* Home page */
div#homebuttons {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
	text-align: center;
	z-index: 3;
}
div#homebuttons img.logo {
	display: block;
	margin: 41px auto 0 auto;
}
div#homebuttons h1 {
	margin: 20px auto;
	text-align: center;
	font-weight: normal;
	font-size: 80px;
	line-height: 96px;
}
div#homebuttons p {
	margin: 10px auto;
	text-align: center;
}
div#homebuttons p.bigbuttons {
	margin: 86px auto 25px auto;
}

/* Purchase flexbox */
div#purchaseflex {
	position: fixed;
	top: 125px;
	bottom: 0;
	left: 0;
	width: calc(100% - 50px);
	padding: 25px 25px 0 25px;
	z-index: 4;
	display: flex;
}
div#purchaseflex.interior {
	top: 90px;
}
div#leftgutter,
div#rightgutter {
	width: 188px;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
}
div#leftgutter {
	left: 0;
}
div#rightgutter {
	right: 50px;
}
div#mainbody {
	flex-grow: 1;
	overflow-y: auto;
}
div#leftgutter span.fas,
div#rightgutter span.fas,
div#leftgutter span.far,
div#rightgutter span.far {
	font-size: 100px;
}
div#leftgutter span:focus,
div#leftgutter span:active {
	opacity: .6;
}
div#mainbody h1 {
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	text-align: center;
	font-weight: normal;
	font-size: 80px;
	line-height: 80px;
	margin: 65px auto 90px auto;
}
div#mainbody {
	text-align: center;
}
p.bigbuttons {
	margin: 0 auto;
	text-align: center;
}
div#mainbody p.bigbuttons button.bigbutton {
	margin: 0 60px;
}
div#mainbody p.note {
	margin-top: 95px;
	font-size: 28px;
	line-height: 34px;
}

/* Big circular buttons */
button.bigbutton,
span.bigbutton {
	border: none;
	height: 377px;
	width: 377px;
	border-radius: 190px;
	background: #E15B12;
	color: white;
	box-sizing: border-box;
	margin: 0 63px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.5);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 38px;
	line-height: 46px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	outline: none;
}
span.bigbutton {
	display: inline-flex;
	box-shadow: none;
	flex-flow: column;
	padding-top: 25px;
}
button.bigbutton:active {
	background: #255C9F;
	box-shadow: none;
	outline: none;
}
button.bigbutton.activated {
	background: white;
	color: #255C9F;
	box-shadow: -5px -5px 15px #255C9F, 5px 5px 15px black;
	outline: none;
}
button.bigbutton:first-child {
	margin-left: 0 !important;
}
button.bigbutton:last-child {
	margin-right: 0 !important;
}
button.bigbutton span.fas {
	display: block;
	font-size: 110px;
	line-height: 130px;
	margin-bottom: 32px;
}
button.bigbutton span.fa-ticket-alt {
	transform: rotate(80deg);
}
span.bigbutton span.counter {
	display: block;
	font-size: 160px;
	line-height: 160px;
	margin-bottom: 32px;
}
span.bigbutton span.note {
	display: block;
	font-size: 25px;
	line-height: 30px;
}
span.bigbutton.status {
	background: white;
	color: #255C9F;
}
span.bigbutton.status span.far.counter {
	font-size: 160px !important;
}
span.bigbutton.status span.note {
	font-size: 45px;
	line-height: 54px;
	text-transform: none;
}
span.bigbutton.nopaxlabel {
	justify-content: center;
	padding: 0;
}
span.bigbutton.nopaxlabel > span {
	margin: 0;
}

/* Welcome bar */
div#welcomebar {
	position: fixed;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 125px;
	background: #255C9F;
	color: white;
	z-index: 3;
}
div#welcomebar span.homelink {
	display: inline-block;
	margin: 15px 5px;
	border-right: 1px solid white;
	padding: 30px 30px;
	line-height: 35px;
}
div#welcomebar img {
	display: inline-block;
}
div#welcomebar img.logo {
	max-height: 105px;
	margin: 10px 25px;
}
div#welcomebar span.flexeat {
	flex-grow: 1;
}
div#welcomebar span.location {
	display: inline-block;
	height: 125px;
	background: white;
	color: #255C9F;
	font-weight: 500;
	font-size: 61px;
	line-height: 125px;
	font-family: "Ingra", "Arial", "Helvetica", sans-serif;
	padding-right: 50px;
}

/* Progress bar */
div#progressbar {
	position: fixed;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 95px;
	background: #255C9F;
	color: white;
	z-index: 3;
}
div#progressbar.complete {
	background: #668DBC;
}
div#progressbar > span {
	display: inline-flex;
	height: 100%;
	align-items: center;
}
div#progressbar > span.complete {
	background: #668DBC;
}
div#progressbar > span.homelink {
	background: white;
	padding: 0 20px;
	font-size: 30px;
	line-height: 35px;
	color: #255C9F;
	width: auto;
	white-space: nowrap;
}
div#progressbar > span > span:not(.fas) {
	margin: 10px 0 10px 25px;
	padding-right: 25px;
	border-right: 1px solid white;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
	height: 75px;
	line-height: 75px;
	width: 293px;
	display: flex;
	flex-flow: column;
	align-items: start;
	justify-content: flex-start;
}
div#progressbar > span:last-child > span:last-child {
	border-right: none;
}
div#progressbar > span > span > span.label {
	margin: 0;
	font-size: 15px;
	line-height: 18px;
}
div#progressbar > span > span > span.value {
	margin: 0;
	font-size: 20px;
	line-height: 24px;
}
div#progressbar > span.labeledincomplete > span > span.value,
div#progressbar > span.complete > span > span.value.big {
	margin: 0;
	font-size: 35px;
	line-height: 42px;
}
div#progressbar > span > span > span.value > span {
	margin-left: 2em;
}

/* Destination list */
div#destflex {
	margin: 0 150px;
	overflow-y: auto;
	height: 100%;
}
div.destinations {
	display: flex;
	flex-wrap: wrap;
	justify-items: center;
	padding: 0 0 300px 0;
}
div.destinations button {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	min-height: 400px;
	height: 100%;
	border: 4px solid white;
	background: #E15B12;
	color: white;
	display: flex;
    flex-direction: column;
	justify-items: center;
	align-items: center;
	margin: 15px;
	padding: 80px 20px;
}
div.destinations button:active {
	background: #255C9F;
	outline: none;
}
div.destinations button.activated {
	background: white;
	color: #255C9F;
	outline: none;
}
div.destinations button span:first-child {
	margin: 10px;
	text-align: center;
	text-transform: uppercase;
	font-size: 34px;
	line-height: 42px;
	align-self: end;
	width: 100%;
}
div.destinations button span:last-child {
	text-align: center;
	font-weight: bold;
	font-size: 52px;
	line-height: 62px;
	align-self: start;
	width: 100%;
}

/* Trip selection */
div#tixflex {
	margin: 0 150px;
	overflow-y: auto;
	height: 100%;
}

/* Commuter Date */
div.calendargrid {
	display: none;
	width: auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 0 150px;
}
div#mainbody div.calendargrid h1 {
	width: 60%;
	font-size: 50px;
	line-height: 61px;
	text-align: left;
	margin-bottom: 50px;
	margin: 50px 0;
}
div.calendargrid p {
	width: 40%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 50px 0;
}
div.calendargrid > span {
	display: flex;
	justify-content: center;
	width: calc(100% / 7);
	font-size: 38px;
	line-height: 94px;
	color: white;
	opacity: 0.46;
	text-align: center;
	margin-bottom: 25px;
}
div.calendargrid > span > span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 3px solid white;
}
div.calendargrid span.dayheader {
	opacity: 1;
	line-height: 50px;
}
div.calendargrid span.unavailable {
	box-sizing: border-box;
}
div.calendargrid span.today {
	box-sizing: border-box;
	height: 100px;
	opacity: 1;
	font-weight: bold;
}
div.calendargrid span.today > span{
	border: 3px solid #E15B12;
	background: #E15B12;
}
div.calendargrid span.today span:first-child {
	font-size: 38px;
	line-height: 45px;
}
div.calendargrid span.today span:last-child {
	font-size: 22px;
	line-height: 26px;
}
div.calendargrid span.available {
	box-sizing: border-box;
	height: 100px;
	border-radius: 50px;
	opacity: 1;
}
div.calendargrid span.activated > span {
	color: #255C9F;
	background: white;
	border-color: #255C9F;
}

/* Pass type selector */
div#passgrid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 150px;
	overflow: auto;
	align-content: start;
}
div#passgrid h1 {
	font-size: 50px;
	line-height: 61px;
	height: 61px;
	margin: 10px 0;
	text-align: left;
	width: 100%;
}
div#passgrid > p {
	font-size: 28px;
	line-height: 34px;
	height: 34px;
	margin: 0 0 20px 0;
	text-align: left;
	width: 100%;
}
div#passgrid div.commpass {
	box-sizing: border-box;
	width: 566px;
	border: 4px solid white;
	border-radius: 5px;
	padding: 40px;
	position: relative;
	top: 0;
	left: 0;
	margin-right: 30px;
}
div#passgrid div.commpass h2 {
	font-weight: normal;
	font-size: 50px;
	line-height: 61px;
	margin: 0;
}
div#passgrid div.commpass p.fare {
	font-weight: normal;
	font-size: 60px;
	line-height: 73px;
	margin: 0;
}
div#passgrid div.commpass p.restrictions {
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	margin: 36px 0;
}
div#passgrid div.commpass p.daterange {
	display: flex;
	justify-content: space-between;
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	margin: 14px 0 80px 0;
}
div#passgrid div.commpass p.selection {
	position: absolute;
	bottom: -4px;
	left: -4px;
	right: -4px;
	padding: 25px 30px;
	display: flex;
	justify-content: space-between;
	font-weight: normal;
	font-size: 35px;
	line-height: 43px;
	margin: 0;
	background: #E15B12;
	border-radius: 0 0 5px 5px;
	text-transform: uppercase;
}
div#passgrid div.commpass p.selection.activated {
	color: #255C9F;
	background: white;
}

/* Passenger selection */
div#paxflex {
	margin: 0 150px;
	overflow-y: auto;
	height: 100%;
}
div.paxselect {
	padding-bottom: 50px;
}
span.paxchange {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
	margin: 0 90px;
}
span.paxchange button.dial:active {
	background: #E3E3E3;
	outline: none;
}
span.paxchange:first-child {
	margin-left: 0;
}
span.paxchange:last-child {
	margin-right: 0;
}
button.dial {
	position: absolute;
	top: 128px;
	box-sizing: border-box;
	width: 121px;
	height: 121px;
	font-size: 60px;
	line-height: 121px;
	border-radius: 61px;
	border: none;
	background: white;
	color: #255C9F;
	font-weight: bold;
	box-shadow: 0 3px 10px #000000;
	outline: none;
}
button.dial.minus {
	left: 0;
}
button.dial.plus {
	right: 0;
}
span.price {
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	line-height: 48px;
	margin-top: 20px;
}
p.buttons {
	text-align: center;
	margin: 80px auto 0 auto;
}
button.rect {
	font-weight: bold;
	font-size: 50px;
	line-height: 60px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	background: #E15B12;
	border: none;
	padding: 18px 100px;
	height: 96px;
	text-transform: uppercase;
	color: white;
	outline: none;
}
button.rect:active {
	background: #BE4D0F;
	outline: none;
}
button.rect.activated {
	background: white;
	color: #255C9F;
	outline: none;
}
p.addlinfo {
	margin: -75px auto 50px auto;
	font-size: 35px;
	line-height: 43px;
	height: 43px;
}

/* Schedules */
p.direction {
	margin: 0;
	text-transform: uppercase;
	font-size: 30px;
}
div#mainbody h1.dateflex {
	width: 70%;
	margin: 0 auto 90px auto;
	font-size: 48px;
	display: flex;
	justify-items: space-between;
	align-items: center;
}
h1.dateflex span:nth-child(1),
h1.dateflex span:nth-child(3) {
	font-size: 60px;
	line-height: 60px;
	margin: 0 1em;
}
h1.dateflex span:nth-child(2) {
	flex-grow: 1;
}
div.sched-card {
	display: flex;
	justify-content: space-between;
	border: 2px solid white;
	border-radius: 5px;
	margin: 0 1rem 1.5rem 1rem;
}
div.sched-card div {
	padding: 1.5rem 0.75rem;
}
div.sched-card p {
	margin: 0 0.75rem;
}
div.sched-card div:nth-child(1) p:first-child,
div.sched-card div:nth-child(2) p:first-child,
div.sched-card div:nth-child(3) p:first-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
div.sched-card div:nth-child(1) p:first-child span:nth-child(1),
div.sched-card div:nth-child(2) p:first-child span:nth-child(1),
div.sched-card div:nth-child(3) p:first-child span:nth-child(1) {
	font-size: 30px;
	line-height: normal;
}
div.sched-card div:nth-child(1) p:first-child span:nth-child(2),
div.sched-card div:nth-child(2) p:first-child span:nth-child(2),
div.sched-card div:nth-child(3) p:first-child span:nth-child(2) {
	font-weight: bold;
}
div.sched-card div:nth-child(1) p:first-child span:nth-child(3),
div.sched-card div:nth-child(2) p:first-child span:nth-child(3),
div.sched-card div:nth-child(3) p:first-child span:nth-child(3) {
	font-size: 18px;
	line-height: normal;
}
div.sched-card div:nth-child(1) p:last-child,
div.sched-card div:nth-child(2) p:last-child,
div.sched-card div:nth-child(3) p:last-child {
	font-size: 18px;
	margin-top: 1rem;
	text-align: left;
}
div.sched-card div:nth-child(1) p:last-child span,
div.sched-card div:nth-child(2) p:last-child span,
div.sched-card div:nth-child(3) p:last-child span {
	margin-right: 0.75rem;
}
div.sched-card div:nth-child(4) {
	display: flex;
	align-items: center;
}
div.sched-card div:nth-child(4) button {
	font-size: 48px;
	color: white;
	border: none;
	border-radius: 5px;
	background: #E15B12;
	text-transform: uppercase;
	padding: 10px 2em;
	font-weight: bold;
	margin: 0 0.75rem;
}

/* Passenger data */
div#paxnameflex {
	margin: 0 510px 0 150px;
	overflow-y: auto;
	height: 100%;
}
div#paxinfogrid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 25px 700px 25px;
}
div#paxinfogrid h2,
div#paxinfogrid h3 {
	margin: 30px 0 0 0;
	font-size: 42px;
	line-height: 52px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	font-weight: normal;
	text-align: left;
	width: 60%;
	margin-bottom: 20px;
}
div#paxinfogrid h3 {
	width:calc(40% - 20px);
}
div#mainbody h1.longtext {
	font-size: 50px;
	line-height: 61px;
	text-align: left;
	padding: 0 25px;
	margin-bottom: 0;
}
div#mainbody p.longtext {
	font-size: 28px;
	line-height: 34px;
	text-align: left;
	padding: 0 25px;
	margin-top: 0;
}
div#paxinfogrid .ada-label {
	background: white;
	color: #255C9F;
	background: white;
	padding: 7px;
	width: 100%;
	text-align: center;
	font-weight: bold;
}
div#paxinfogrid label {
	display: none;
}
div#searchticket input,
div#paxinfogrid input,
div#deliverflex input,
div#accountflex input,
div#accountgrid input[type=text],
div#accountgrid input[type=email],
div#accountgrid span.pwenclose,
div#reschedflex input,
div#commreslogin input {
	background: none;
	border: 2px solid white;
	border-radius: 5px;
	color: white;
	font-size: 42px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	padding: 0 30px;
	box-sizing: border-box;
	height: 98px;
	width: 100%;
}
div#paxinfogrid input:not(.counter){
	width:calc(30% - 20px);
	margin:0 20px 40px 0;	
}
div#paxinfogrid input:focus,
div#deliverflex input:focus,
div#accountflex input:focus,
div#accountgrid input[type=text]:focus,
div#accountgrid input[type=email]:focus,
div#accountgrid span.pwenclose:focus-within,
div#searchticket input[type=email]:focus,
div#searchticket input[type=text]:focus,
div#reschedflex input:focus,
div#commreslogin input:focus {
	outline: none;
	border-color: #E15B12;
}
div#paxinfogrid input.counter {
	text-align: center;
	width: 100px;
	padding: 0;
}
div#paxinfogrid input::placeholder,
div#searchticket input::placeholder {
	color: white;
	opacity: 0.5;
}
div#paxinfogrid div.bagbuttons {
	align-self: start;
	text-align: left;
}
div#paxinfogrid button {
	background: none;
	border: 2px solid white;
	border-radius: 5px;
	color: white;
	font-size: 42px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	box-sizing: border-box;
	height: 98px;
	text-align: center;
	width: 80px;
	padding: 0;
	outline: none;
}
div#paxinfogrid button:active {
	color: black;
	background: white;
	outline: none;
}
div#paxinfogrid p {
	width: 100%;
	font-size: 42px;
	margin: 0 0 30px 0;
}
div#paxinfogrid p label.cb {
	display: flex;
	align-items: center;
	position: relative;
}
div#paxinfogrid p label.cb input {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}
div#paxinfogrid p label.cb span.checked {
	display: none;
	cursor: default;
	margin-right: 1rem;
	font-size: 60px;
}
div#paxinfogrid p label.cb span.unchecked {
	display: inline-block;
	cursor: pointer;
	margin-right: 1rem;
	font-size: 60px;
}
div#paxinfogrid p label.cb input:checked ~ span.checked {
	display: inline-block;
	cursor: pointer;
}
div#paxinfogrid p label.cb input:checked ~ span.unchecked {
	display: none;
	cursor: default;
}
div#rightgutter.wide {
	width: 480px;
	padding-left: 25px;
	flex-flow: column wrap;
}
div#rightgutter button.rect:disabled,
div#commres-passlist button.rect:disabled {
	opacity: 0.5;
}

/* Delivery Options */
div#deliverflex {
	margin: 0 150px;
	overflow-y: auto;
	height: 100%;
}
div#deliverflex > *:last-child {
	margin-bottom:150px;
}
div#deliverflex h1 {
	font-size: 50px;
	line-height: 61px;
	margin: 50px auto 30px auto;
}
div#deliverflex p {
	font-size: 50px;
	line-height: 61px;
	margin: 30px auto 40px auto;
	font-size: 42px;
	line-height: 92px;
	text-align: left;
	white-space: nowrap;
	width: 625px;
}
div#deliverflex label.radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
div#deliverflex label.radio {
	position: relative;
	margin-right: 108px;
}
div#deliverflex label.radio span.radio {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	top: 0;
	left: 0;
	height: 60px;
	width: 60px;
	padding: 2px;
	background-color: transparent;
	border: 4px solid white;
	border-radius: 50%;
	margin-right: 38px;
}
div#deliverflex label.radio span.radio:after {
	content: "";
	position: absolute;
	display: none;
	left: 8px;
	top: 8px;
	width: 0;
	height: 0;
	border: 24px solid #E15B12;
	border-radius: 50%;
}
div#deliverflex label.radio input:checked ~ span.radio:after {
	display: block;
}
div#deliverflex p.buttons {
	text-align: center;
}
div#domainlist {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 35vh;
	padding: 25px;
	font-size: 35px;
	line-height: 43px;
	text-align: center;
	display: none;
}
div#domainlist span {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 33px;
	background: #255C9F;
	color: white;
	margin: 0 18px;
}

/* Create account */
div#accountgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 150px;
	overflow-y: auto;
	column-gap: 65px;
	row-gap: 25px;
	padding: 0 25px;
	height: 100%;
}
div#accountgrid h1 {
	width: 100%;
	font-size: 50px;
	line-height: 61px;
	margin: 0;
	text-align: center;
}
div#accountgrid p {
	margin: 0 30px 0 0;
	width: calc(50% - 30px);
	text-align: left;
	font-size: 42px;
	line-height: 82px;
}
div#accountgrid p.buttons {
	grid-column: 1/3;
	text-align: center;
	margin-top: 50px;
	padding-bottom: 700px;
}
div#accountgrid span.pwenclose {
	display: inline-flex;
	justify-content: space-between;
	padding-right: 0;
	align-content: stretch;
}
div#accountgrid span.pwenclose input {
	background: none;
	color: white;
	font-size: 42px;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	padding: 0;
	border: none;
	margin: 0;
	width: calc(100% - 65px);
	height: auto;
}
div#accountgrid span.fal {
	line-height: 90px;
	padding: 0 5px;
	width: 55px;
	text-align: center;
}
span.pwcheck {
	visibility: hidden;
	font-size: 25px;
	line-height: 30px;
	font-weight: bold;
	margin-right: 40px;
}
span.pwcheck.active {
	visibility: visible;
}
span.pwcheck:last-child {
	margin-right: 0;
}
.highlighterror {
	box-shadow: 0 0 7px 4px #E15B12;
}

/* Verify details */
div#verifygrid {
	display: flex;
	justify-content: stretch;
	align-items: start;
	margin: 0 188px;
	overflow-y: auto;
	height: calc(100% - 68px);
	padding-top: 68px;
}
div#verifygrid h1,
div#verifygrid h2 {
	font-weight: normal;
	font-size: 50px;
	line-height: 61px;
	margin: 0;
	text-align: left;
}
div#verifygrid h2 button {
	display: inline-block;
	border: none;
	color: white;
	background: #255C9F;
	font-weight: bold;
	text-transform: uppercase;
	vertical-align: middle;
	font-size: 25px;
	line-height: 30px;
	height: 50px;
	padding: 10px;
	border-radius: 5px;
}
div#verifygrid div#details {
	flex-basis: 67%;
}
div#verifygrid div#summary {
	flex-basis: 33%;
}
div#verifygrid div#detailgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 50px 50px 0;
}
div#verifygrid div#detailgrid p {
	margin: 20px 0;
	text-align: left;
	width: 30%;
}
div#verifygrid div#detailgrid p span:first-child {
	display: block;
	font-weight: bold;
	font-size: 25px;
	line-height: 30px;
}
div#verifygrid div#detailgrid p span:last-child {
	display: block;
	font-size: 35px;
	line-height: 42px;
}
div#verifygrid div#paxnamegrid {
	margin: 0 50px 50px 0;
}
div#verifygrid div#paxnamegrid p {
	width: auto;
	margin: 10px 0;
	display: flex;
	align-items: baseline;
	justify-items: start;
	justify-content: start;
}
div#verifygrid div#details > p {
	width: auto;
	margin: 10px 0;
	text-align: left;
	font-size: 35px;
	line-height: 42px;
}
div#verifygrid div.locations {
	display: flex;
}
div#verifygrid div.locations p {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 15px 0 50px 0;
	line-height: normal;
}
div#verifygrid div.locations p span:nth-child(1) {
	font-size: 25px;
	font-weight: bold;
}
div#verifygrid div.locations p span:nth-child(2) {
	font-size: 35px;
	font-weight: bold;
}
div#verifygrid div.locations p span:nth-child(3) {
	font-size: 20px;
}
div#verifygrid div#paxnamegrid p span:nth-child(1) {
	font-weight: bold;
	font-size: 25px;
	line-height: 30px;
	width: 73px;
	text-align: left;
}
div#verifygrid div#paxnamegrid p span:nth-child(2) {
	font-size: 35px;
	width: 35px;
	line-height: 42px;
	margin: 0 30px;
}
div#verifygrid div#paxnamegrid p span:nth-child(3) {
	font-size: 35px;
	line-height: 42px;
}
div#verifygrid p.deliveryinfo {
	text-align: left;
	font-size: 35px;
	line-height: 43px;
	margin: 20px 0 60px;
}
div#verifygrid div#summarygrid {
	position: relative;
	top: 0;
	left: 0;
}
div#verifygrid div#summarygrid p {
	display: flex;
	width: 100%;
	margin: 15px 0;
	font-size: 35px;
	line-height: 43px;
	justify-content: space-between;
}
div#verifygrid div#summarygrid p.total {
	font-weight: bold;
	font-size: 60px;
	line-height: 72px;
}
div#verifygrid p.buttons {
	margin-top: 2em;
}
div#verifygrid p.buttons button {
	white-space: nowrap;
	padding: 18px 50px;
}

/* Payment page */
div#paymentflex {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 100%;
}
div#paymentflex h1 {
	font-size: 50px;
	line-height: 61px;
	margin: 0;
}
div#paymentflex p {
	font-size: 35px;
	line-height: 43px;
	margin: 23px 0;
}

/* Confirmation page */
div#emailonlyask,
div#emailonlyno,
div#emailonlyyes,
div#emailandprint,
div#commuterdone,
div#commprintno,
div#commprintyes,
div#reprintdone {
	display: none;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	height: 100%;
	width: 100%;
	overflow: auto;
}
div#printable {
	display: none;
}
div#reprintdone {
	display: flex;
}
div#emailonlyask img,
div#emailonlyno img,
div#emailonlyyes img,
div#emailandprint img,
div#commuterdone img,
div#commprintno img,
div#commprintyes img {
	display: block;
	width: 104px;
	margin: 0 auto;
}
div#emailonlyask h1,
div#emailonlyno h1,
div#emailonlyyes h1,
div#emailandprint h1,
div#commuterdone h1,
div#commprintno h1,
div#commprintyes h1,
div#reprintdone h1 {
	font-size: 50px;
	line-height: 61px;
	margin: 35px 0 0 0;
}
div#emailonlyask p,
div#emailandprint p,
div#commuterdone > p {
	margin: 24px 0 5px 0;
	font-size: 35px;
	line-height: 42px;
}
div#emailonlyask p span:first-child,
div#emailandprint p span:first-child,
div#commuterdone > p > span:first-child {
	display: inline-block;
	font-weight: bold;
	margin-right: 50px;
}
div#emailonlyask p span:last-child,
div#emailandprint p span:last-child,
div#commuterdone > p > span:last-child {
	display: inline-block;
	font-size: 45px;
	line-height: 54px;
}
div#emailonlyask div.question {
	width: 60%;
	min-width: 1140px;
	box-sizing: border-box;
	border: 1px solid #707070;
	margin: 107px auto 25px auto;
	background: white;
	padding: 50px 200px 65px 200px;
}
div#emailonlyask div.question p {
	margin: 0;
	color: #313131;
	font-size: 50px;
	line-height: 61px;
}
div#emailonlyask div.question p.okcancelcentered {
	margin-top: 41px;
}
div#emailonlyask div.question button {
	border: 5px solid #E15B12;
	border-radius: 5px;
	font-weight: bold;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	text-transform: uppercase;
	font-size: 50px;
	line-height: 60px;
	box-sizing: border-box;
	width: 315px;
	height: 100px;
	margin: 0 15px;
	background: #E15B12;
	color: white;
}
div#emailonlyask div.question button.secondary {
	border-color: #255C9F;
	background: white;
	color: #255C9F
}
div#emailonlyno p,
div#commprintno p {
	margin: 108px auto 25px auto;
}
div#emailonlyno button,
div#emailonlyyes button,
div#emailandprint button,
div#commuterdone button,
div#commprintno button,
div#commprintyes button,
div#reprintdone button {
	border: 5px solid #E15B12;
	border-radius: 5px;
	font-weight: bold;
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	text-transform: uppercase;
	font-size: 50px;
	line-height: 60px;
	background: #E15B12;
	color: white;
	padding: 20px 105px;
}
div#emailonlyyes p,
div#commprintyes p,
div#reprintdone p {
	margin: 100px auto 0 auto;
	font-weight: bold;
	font-size: 45px;
	line-height: 54px;
}
div#emailonlyyes p.buttons,
div#commprintyes p.buttons,
div#reprintdone p.buttons {
	margin: 100px auto 25px auto;
}
div#emailandprint p.printwarning {
	font-weight: bold;
	margin: 85px auto 80px auto;
}
div#commuterdone div.printoptions {
	display: flex;
	justify-content: space-between;
	width: 1080px;
	margin: 90px auto 70px auto;
	justify-items: start;
}
div#commuterdone div.printoptions p {
	margin: 0;
}
div#commuterdone div.printoptions p > span {
	display: block;
	text-align: left;
}
div#commuterdone div.printoptions p > span:first-child {
	margin-bottom: 30px;
}
div#commuterdone div.printoptions label.radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
div#commuterdone div.printoptions label.radio {
	position: relative;
	margin-right: 65px;
}
div#commuterdone div.printoptions label.radio:last-child {
	margin-right: 0;
}
div#commuterdone div.printoptions label.radio span.radio {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	top: 0;
	left: 0;
	height: 60px;
	width: 60px;
	padding: 2px;
	background-color: transparent;
	border: 4px solid white;
	border-radius: 50%;
	margin-right: 26px;
}
div#commuterdone div.printoptions label.radio span.radio:after {
	content: "";
	position: absolute;
	display: none;
	left: 8px;
	top: 8px;
	width: 0;
	height: 0;
	border: 24px solid #E15B12;
	border-radius: 50%;
}
div#commuterdone div.printoptions label.radio input:checked ~ span.radio:after {
	display: block;
}

/* Account Search */
div#accountflex {
	margin: 0 150px;
	overflow-y: auto;
	height: 130%;
}
div#accountflex h1 {
	font-size: 50px;
	line-height: 61px;
	margin: 50px auto 20px auto;
}
div#accountflex p {
	font-size: 30px;
	line-height: 37px;
	margin: 20px auto 40px auto;
	width: 700px;
}
div#accountflex p.textbox {
	width: 650px;
	text-align: left;
	font-size: 42px;
	line-height: 90px;
	margin: 42px auto 56px auto;
}
div#accountflex p.buttons {
	text-align: center;
	margin-bottom: 127px;
}
div#accountflex span.link {
	text-decoration: underline;
	text-transform: uppercase;
}

/* Print Tickets */
div#mainbody h1.centered {
	text-align: center;
}
div#mainbody p.mtop {
	margin-top: 20px;
}
div#searchticket {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 140%;
	text-align: left;
	margin: 0 auto;
	overflow-y: auto;
}
div#searchticket p {
	margin: 0;
}
div#searchticket p input {
	margin: 15px 0;
}
div#searchticket p.cfno {
	margin-top: 40px;
}
div#searchticket p.buttons {
	margin-top: 60px;
}
div#searchticket > *:last-child{
	margin-bottom: 150px;
}
/* Order Search  */
/* Chrome, Safari, Edge, Opera */
input[type=number]#confnum::-webkit-inner-spin-button,
input[type=number]#confnum::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox */
input[type=number]#confnum  {
	-moz-appearance: textfield;
}

/* Reschedule */
div#reschedflex {
	margin: 0 150px;
	overflow-y: auto;
	height: calc(100% - 20px);
	padding-bottom: 20px;
}
div#reschedflex h1 {
	margin: 0;
	font-size: 60px;
}
div#reschedflex p.subhead {
	margin: 0;
	line-height: normal;
}
div#reschedflex div#reschedlogin {
	width: 67%;
	margin: 0 auto;
}
div#reschedflex div#reschedlogin p {
	text-align: left;
}
div#reschedflex div#reschedlogin input::-webkit-outer-spin-button,
div#reschedflex div#reschedlogin input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
div#reschedflex div#reschedlogin input[type=number] {
	-moz-appearance: textfield;
}
div#reschedflex div#reschedlogin p.buttons {
	text-align: center;
}
div#reschedflex div#verifygrid {
	margin: 0;
	flex-wrap: wrap;
	align-content: flex-start;
}
div#reschedflex div#verifygrid div#details,
div#reschedflex div#verifygrid div#summary {
	flex-basis: 50%;
}
div#reschedflex div#verifygrid div#confirm {
	width: 100%;
	text-align: center;
	border-top: 2px solid white;
	padding-top: 1em;
}
div#reschedflex div#verifygrid div#confirm p {
	margin: 0;
}
div#reschedflex div#verifygrid div#confirm p:first-child {
	margin-bottom: 1em;
}
div#reschedflex div#verifygrid div#confirm button {
	font-size: 40px;
	margin: 0 1em;
	width: calc(33% - 1.3em);
	padding: 18px 0;
}
div#reschedflex div#verifygrid div#confirm button:first-child {
	margin-left: 0;
}
div#reschedflex div#verifygrid div#confirm button:last-child {
	margin-right: 0;
}
#reschedflex .calendargrid {
	margin: 0;
}
#summarygrid p {
	text-align: left;
}

/* Commuter */

div#commreslogin {
	width: 50%;
	margin: 0 auto;
}
div#commreslogin p {
	text-align: left;
}
div#commreslogin p.buttons {
	text-align: center;
}
div#commres-passlist {
	margin: 0 188px;
}
p.left {
	text-align: left;
}
div#commres-passlist div {
	border: 2px solid white;
	border-radius: 2px;
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
	align-items: flex-start;
	text-align: left;
}
div#commres-passlist div > :nth-child(1) {
	font-size: 55px;
	width: 60%;
	margin-bottom: 30px;
}
div#commres-passlist div > :nth-child(2),
div#commres-passlist div > :nth-child(3) {
	font-size: 24px;
	width: 20%;
	margin-bottom: 30px;
}
div#commres-passlist div > :nth-child(4) {
	font-size: 30px;
}
div#commres-passlist div > :nth-child(4) span.fas {
	color: #E15B12;
	margin: 0 1em;
	vertical-align: middle;
}
div#commres-passlist div > :nth-child(5) {
	align-self: center;
	text-align: right;
	flex-grow: 1;
}
div#commres-passlist div > :nth-child(5) button {
	margin-left: 2em;
}
button.rect.small {
	font-size: 40px;
	padding: 10px 75px;
	line-height: 50px;
	height: 80px;
}
button.bigbutton.location span:first-child {
	display: block;
	text-transform: none;
	height: 2.5em;
	margin-bottom: 0.5em;
}
button.bigbutton.location span:last-child {
	display: block;
	font-size: 80px;
	height: 80px;
}
div#res-list div {
	border: 2px solid white;
	border-radius: 10px;
	margin-bottom: 30px;
}
div#res-list div p:first-child {
	display: flex;
	padding: 10px 30px;
	border-bottom: 2px solid white;
	justify-content: space-between;
	font-size: 24px;
	margin: 0;
	font-weight: bold;
}
div#res-list div p:last-child {
	display: flex;
	padding: 50px 30px;
	display: flex;
	justify-content: space-between;
	margin: 0;
}
div#res-list div p:last-child > span {
	margin-right: 30px;
	text-align: left;
}
div#res-list div p:last-child > span:last-child {
	margin-right: 0;
	flex-grow: 1;
	text-align: right;
}
div#res-list div p:last-child span span {
	display: block;
	line-height: normal;
}
div#res-list div p:last-child span span:nth-child(1) {
	font-size: 25px;
	font-weight: bold;
}
div#res-list div p:last-child span span:nth-child(2) {
	font-size: 35px;
	font-weight: bold;
}
div#res-list div p:last-child span span:nth-child(3) {
	font-size: 20px;
}
