body {
	height: fit-content;
}
div.content-area {
	width: 100%;
	max-width: 1280px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 0 auto;
	background-color: #fff;
	position: relative;
	padding-bottom: 1em;

	@media screen {
		min-height: 100vh;
	}

	@media print {
		box-shadow: none;
		max-width: 100%;
		padding-bottom: 0!important;
	}
}
header {
	background-color: #fff;
	display: grid;
	padding: 1em 1em .5em;
	margin: 0 auto;
	gap: .5em;
	grid-template-columns: auto 1fr auto;
	border-bottom: 1px solid #ccc;

	> a {
		grid-row: 1 / span 2;
	}

	nav {
		align-self: center;
		justify-self: end;
		display: grid;
		gap: .5em;
		grid-template-columns: auto auto;

		@media print {
			display: none;
		}

		a {
			border: 1px solid #ccc;
			border-radius: .5em;
			padding: .5em;
			display: inline-block;
			font-weight: bold;
			text-decoration: none;
			font-size: .9em;
			box-shadow: 0 .2em .5em #0004;
		}
	}
	.wifi-info {
		grid-column: 3 / span 1;
		justify-self: center;
		font-size: 10px;
		text-align: center;
	}
}
main {
	padding: 0 1em;
	max-width: 1280px;
	margin: 0 auto;

	h2 {
		font-size: 1.3em;
		font-weight: bold;
		color: #888;
	}

	nav {
		display: grid;
		max-width: 400px;
		padding: 2em 0;
		margin: 0 auto;
		gap: .5em;

		@media print {
			display: none;
		}

		> a {
			border: 1px solid #ccc;
			border-radius: .5em;
			padding: .5em;
			display: block;
			font-weight: bold;
			text-decoration: none;
			font-size: .9em;
			box-shadow: 0 .2em .5em #0004;
		}
	}
}

.nav-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5em;
	max-width: 400px;
	padding: 1em 0;
	margin: 0 auto;


	@media screen and (min-width: 600px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: unset;
	}

	@media print {
		display: none;
	}

	.nav-button {
		/*w3-button w3-round-large w3-light-gray w3-border w3-border-blue Nav*/
		border: 1px solid #888;
		border-radius: .5em;
		padding: 1em 2em;
		display: block;
		font-weight: bold;
		text-decoration: none;
		font-size: .9em;
		box-shadow: 0 .2em .5em #0004;
		text-align: center;
		background-color: #ddd;
		color: #04f;
		flex: 0 1 0;
		white-space: nowrap;
	}
}
.current-sale {
	background-color: #def;
	color: #000;
	font-weight: bold;
	border-width: 2px!important;
}
.recent-sale {
	background-color: #eee;
	color: #888;
	border-color: #888;
}
.upcoming-sale {
	background-color: #dfe;
	color: #000;
	border-color: #888;
}
.login-panel {
	margin: 0 auto;
	width: fit-content;

	max-width: 400px;
	label {
		font-weight: bold;
		text-align: left;
	}

	.login-panel-grid {
		display: grid;
		row-gap: 1em;
		column-gap: 2em;
		grid-template-columns: 1fr;
		align-items: center;
		padding-top: .5em;
	}

	.login-panel-input-box {
		margin: 0 auto;
		padding: 1em;
		border-radius: 1em;
		background-color: #eee;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
		text-align: left;
		box-shadow: 0 .2em .5em #0004;
	}

	@media screen and (min-width: 800px) {
		max-width: 600px;
		.login-panel-grid {
			grid-template-columns: 1fr auto;
		}
	}
	input {
		width: 100%;
		&[type="submit"] {
			background-color: #48f;
			color: #fff;
			font-weight: bold;
			border-radius: .25em;
			font-size: 1.4em;
		}
	}
}

.catalog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 0 auto;
	padding: 1em 0;
	width: fit-content;

	@media screen and (min-width: 600px) {
		grid-template-columns: 1fr 1fr;
	}

	@media screen and (min-width: 900px) {
		grid-template-columns: 1fr 1fr 1fr;
	}

	@media print {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.vin-list-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 0 auto;
	padding: 1em 0;
	width: fit-content;

	@media screen and (min-width: 600px) {
		grid-template-columns: 1fr 1fr;
	}

	@media screen and (min-width: 900px) {
		grid-template-columns: 1fr 1fr 1fr;
	}

	@media print {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.vehicle-card {
	background-color: #fff;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto 1fr;
	text-decoration: none;
	gap: .5em;
	border: 1px solid #888;
	box-shadow: 0 .2em .5em #0004;
	border-radius: .5em;
	overflow: clip;
	line-height: 1.1;

	@media print {
		grid-template-rows: auto auto auto;
		font-size: 0.6em;
	}

	.top-row {
		display: grid;
		grid-template-columns: auto auto;
		grid-row: 1;
		grid-column: 1;
		gap: 1em;
	}

	.middle-row {
		display: grid;
		grid-template-columns: 1fr;
		grid-row: 2;
		grid-column: 1;
		place-items: center;
	}

	.bottom-row {
		display: grid;
		grid-template-columns: auto auto;
		grid-row: 3;
		grid-column: 1;
		align-self: end;
		gap: 1em;
	}

	.vehicle-thumbnail {
		width: 100%;
		aspect-ratio: 1.5;
		grid-column: 1;
		grid-row: 1 / span 3;
		object-fit: cover;
		object-position: center;
		height: 100%;
	}

	.run-number {
		grid-column: 1;
		grid-row: 1;
		font-size: 2em;
		place-self: start;
		border-bottom-right-radius: .25em;
		font-weight: bold;
	}

	.no-sale {
		font-size: 2em;
		color: #f00;
		font-weight: bold;
	}
	.retail-ready, .r-title {
		font-size: 3em;
		place-self: center;
		color: #f00;
		font-weight: bold;
		border-radius: 10px;
	}

	.year-make-model-miles {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		text-align: right;
		border-bottom-left-radius: .5em;
		.year-make-model {
			font-weight: bold;
		}
	}

	.bid-detail {
		grid-column: 1;
		place-self: start;
		text-align: left;
		border-top-right-radius: .5em;

		.label {
		}
		.bid-amount {
			font-size: 1.7em;
			font-weight: bold;
		}
		.winner-name {
		}
	}

	.you-won {
		background-color: #afac;
		text-align: center;
	}
	.you-won-label {
		font-style: italic;
		font-weight: bold;
		margin-bottom: .5em;
	}
	.my-bid, .winning-bid {
		background-color: #fffa;
		border-radius: 4px;
		padding: 0 4px;
		text-align: center;
	}
	.my-bid {
		color: #f64;
	}
	.dollar-sign {
		font-weight: normal;
		vertical-align: super;
		font-size: .6em;
	}

	.notes {
		grid-column: 2;
		place-self: end;
		text-align: right;
		border-top-left-radius: .5em;
		color: #f00;
	}
}

h1 {
	width: fit-content;
	text-align: center;
	font-weight: bold;
	font-size: 1.7em;
	margin: 0 auto;
	padding: .5em 0;
}

.bidsale-category-grid {
	display: grid;
	column-gap: 1em;
	margin: 0 auto;
	width: fit-content;

	@media screen and (min-width: 600px) {
		grid-auto-flow: column;
	}

	.bidsale-category {
		display: grid;
		grid-template-columns: 1fr;
		gap: .5em;
		text-align: center;
	}
	.bidsale-card {
		height: 100px;
		position: relative;
		display: block;
		max-width: 740px;
		min-width: 320px;
		border-radius: 1em;
		border-width: 1px;
		border-style: solid;
		box-shadow: 0 .2em .5em #0004;
	}
}



* { box-sizing: border-box; }
HEADER H2 { font-size: 24px; }

.row::after {
	content: "";
	clear: both;
	display: table;
}
.Shadow, .w3-button { text-shadow: 2px 2px 2px rgba(0,0,0,0.33); }
.OnlyPrint { display: none; }
.Success, .Login, .Profile { max-width: 360px; }
.Note { font-size: 12px; font-style: italic; color: #888; }
.w3-striped tbody tr:nth-child(even){ background-color:#e5ecf5; }
.w3-striped tbody tr:nth-child(odd){ background-color:#fff; }
#Details { max-width: 800px; }
#MainDetails { max-width: 800px; }
#MyBids { max-width: 1000px; }
CAPTION { text-align: left; font-size: 18px; padding-bottom: 8px; }


.Underlay
{
	background-color: #ccca;
	padding: 8px;
	backdrop-filter: blur(2px);
	margin: 0;
	border-radius: 0;
	box-shadow: 0 2px 5px #0008;
}

@media all and (min-width: 380px) {
	.BidForm { width: 360px; }
}
@media print
{    
	BODY, TD, TD * { background-color: #fff; }
	INPUT[type='text'], INPUT[type='number'], INPUT[type='password'] { padding: 0px!important; margin: 0px!important; }
	A { text-decoration: none; }
	TABLE { width: 100%; margin-left:auto; margin-right:auto; page-break-inside: avoid; border-collapse: collapse; box-shadow: none!important; border: 1px solid #888; }
	TD, TH { border: 1px solid #888; }

	main { box-shadow: none; }
	HEADER H1 { margin-top: 0px; }
	FOOTER P { margin: 0px; padding: 0px; }
	HEADER H3 { margin-bottom: 0px; }
	.Vehicle { page-break-inside: avoid; }
	.NoPrint { display: none!important; }
	.OnlyPrint { display: block; }
	.Shadow { text-shadow: none; }
	SPAN.OnlyPrint { display: inline; }
	#MyBids TD { padding: 6px 8px!important; font-size: 0.8em; }
	#Wholesale { page-break-inside: auto; font-size: 0.6em!important; }
	#MyBids INPUT { border: none; background-color: inherit; }
	#Results { page-break-inside: auto; }
	#Results TD, #Results TH { font-size: 0.55em!important; }
	#Details { page-break-inside: auto; }
}


/* Patched - Thumbnail images for Vehicle page when more than one picture is available */
.ImageThumb { width: 128px; height: 96px; background-size: cover; background-position: center center; }

.VinDisclaimer { font-style: italic!important; font-size: 10px; }
#Details, #MainDetails { margin-bottom: 32px!important; }