/**
 * Appraisal Express CSS
 *
 * @package CE5
 * @author Lonnie Blansett
 * @copyright 2017 Dealer Marketing Services
 * @version 2017.05.16.01 LB Ticket 380313 - Fix form appearance
 * @version 2017.05.17.01 LB Ticket 381065 - Fix new/used/undecided spacing
 * @version 2017.05.18.01 LB Ticket 381266 - REduce external interferance
 * @version 2017.05.19.01 LB Ticket 381328 - Reuse existing fields
 * @version 2017.05.20 dcs Ticket #381681 - styling tweaks, Ticket #381683 - If no Book Value, show explanation
 * @version 2017.05.22 dcs Ticket #381681 - information wrapping to multiple lines
 * @version 2017.05.22 dcs Ticket #382106 - font size increase for equipment list
 * @version 2017.05.23 dcs Ticket #382180 - do not show trade graphic on mobile - additional padding on buttons
 * @version 2017.05.30 dcs Ticket #383110, Appraisal Express - Requested tweaks to form's overall look
 * @version 2017.05.31 dcs Ticket #384273 - Changed location of 'print' button and centered NADA logo on trade (results) page
 * @version 2017.05.31 dcs Ticket #384273 - changed @media cutoff to range for portrait
 * @version 2017.06.01 dcs Ticket #384734 - Change HR width to be inline css in the element; fixed typo on element class
 * @version 20170706 nna #385464 - adjust some styles to overwrite conflicts with bootstrap
 * @version 20170804 nna 399601 change appearance of pre-approval and view inventory links
 * @version 20170911 nna 406816 - change class of ae logo to avoid collissions
 * @version 20170922 nna 406814 - remove downward arrow css
 * @version 20170929 nna 410532 - remove info popup styles
 * @version 20180309 nna 445368 - font awesome css icon needed to have the font family updated for FA5
 * @version 20180314 nna 446267, 438735, 441308 - update car icon display, congrats page layout, smartphone layout
 * @version 2018.07.19 sb Ticket #472112 - AAE and AAE Plus progress bar has moved
 * @version 2019.07.17 sb Ticket #549103 - AE/AE+ 'Ask for Appointment' desktop cosmetic changes
 * @version 2020.11.09 sb Ticket #642714 - updated input css for email type inputs
 * @version 2021.03.18 sb Ticket #660425 - prompt for Book specific descriptions when Vehicle ID is not in mastertables}
 */

.appraisalExpress div,
.appraisalExpress span,
.appraisalExpress p,
.appraisalExpress a,
.appraisalExpress img,
.appraisalExpress b,
.appraisalExpress u,
.appraisalExpress i,
.appraisalExpress ol,
.appraisalExpress ul,
.appraisalExpress li,
.appraisalExpress form,
.appraisalExpress label
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: Arial, sans-serif;
}
.appraisalExpress .cx-full-force-break {display:none;}
.appraisalExpress .cx-small-force-break {display:inline;}
.appraisalExpress ol,
.appraisalExpress ul,
.appraisalExpress li
{
	list-style: none;
}

.appraisalExpress .fa
{
	display: inline-block;
	font: normal normal normal 14px/1  "Font Awesome 5 Free";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.appraisalExpress
{
	/*max-width: 62em;*/
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.appraisalExpress button {cursor: pointer;}

.appraisalExpress li.formfield .button
{
	display: none;
}

/* @version 20171114 nna 412740 - correct img css for multiple sites */
.appraisalExpress div.ae_logo img
{
	margin: 0 auto;
	display: block;
	width: 70%;
	height: auto;
}

.appraisalExpress div.ae_logo.full
{
	display: none;
}

.appraisalExpress div.appraisalappraisalProgress
{
	width: 100%;
	height: 10em;
	margin-left: auto;
	margin-right: auto;
	background: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.appraisalExpress div.appraisalProgress div.icons
{
	text-align: center;
}
.appraisalExpress div.appraisalProgress div.icons hr
{
	position: relative;
	top: 2.7em;
	z-index: -1;
	height: 0.1em;
	margin-left: auto;
	margin-right: auto;
	color: #0E88C9;
}

.appraisalExpress div.appraisalProgress div.icons div.section
{
	display: inline-block;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 19%;
}

.appraisalExpress div.appraisalProgress div.icons div.section div.icon
{
	line-height: 1.5;
	width: 1.5em;
	text-align: center;
	border-radius: 50%;
	background-color: #C9C9C9;
	color: white;
	margin-left: auto;
	margin-right: auto;
	font-size: 2em;
}

.appraisalExpress div.appraisalProgress div.icons div.section div.label
{
	text-align: center;
	width: 100%;
	color: grey;
	font-size: 1.3em;
	line-height: 1.3;
}

.appraisalExpress div.appraisalProgress div.icons div.section.active div.label
{
	color: #0E88C9;
}

.appraisalExpress div.appraisalProgress div.icons hr,
.appraisalExpress div.appraisalProgress div.icons div.section.active div.icon
{
	background-color: #0E88C9;
}

.appraisalExpress div.appraisalProgress div.meter
{
	display: none;
	height: 1.5em;
	position: relative;
	background: #eee;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.appraisalExpress div.appraisalProgress div.meter span
{
	display: block;
	height: 100%;
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	background-color: #2EA4FE;
	position: relative;
	overflow: hidden;
}

.appraisalExpress div.appraisalProgress div.meter span:after
{
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 4em 4em;
  animation: move 2s linear infinite;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  overflow: hidden;
}

.appraisalExpress div.container.newused {
	width: auto;
	color: #000000;
}

.appraisalExpress .field
{
	margin-bottom: 1em;
}

.appraisalExpress label
{
	font-size: 1.5em;
	line-height: 1;
}

.appraisalExpress input[type=text],
.appraisalExpress input[type=tel],
.appraisalExpress input[type=email]
{
	width: 99%;
}

.appraisalExpress input[type=text],
.appraisalExpress input[type=tel],
.appraisalExpress input[type=number],
.appraisalExpress input[type=email],
.appraisalExpress select
{
	font-size: 1.5em;
	height: 2em;
	background-color: lightgray;
	border-width: 0;
}

.appraisalExpress .appraisalExpressButton
{
	width: 99% !important;
	background-color: #6e6d73;
	color: white;
	text-transform: uppercase;
	padding: 0.8em;
}

.appraisalExpress .appraisalExpressButton.next_button,
.appraisalExpress .appraisalExpressButton.submitButton
{
	background-color: #0E88C9;
}

.appraisalExpress .appraisalExpressInput
{
	margin: 0.5em 0 !important;
}

.appraisalExpress .UnknownVIN
{
	color: red;
	font-weight: bold;
	font-size: 1.5em;
	margin-left: 5em;
}

.appraisalExpress div.aae-trade-image
{
	display: none;
}

.appraisalExpress div.appraisalTrade .text
{
	font-size: 1.5em;
	font-weight: bold;
}

.appraisalExpress div.appraisalEquipment .full,
.appraisalExpress div.appraisalDesired .full
{
	display: none !important;
}

div.aae-equipmentList div.equipmentItem
{
	font-size: 1.1em;
	padding: 0.15em;
}

.appraisalExpress .container.year div.field
{
	width: 30%;
}

.appraisalExpress .container.year label.middle
{
	display: inline-block;
	text-align: center;
	width: 38%;
}

.appraisalExpress .appraisalCondition .description
{
	display: none;
}

.appraisalExpress .field.left_label
{
	clear: both;
}

.appraisalExpress .appraisalCondition .field,
.appraisalExpress .appraisalPurchaseTime .field,
.appraisalExpress .appraisalContactMethod .field
{
	margin: 0;
}

.appraisalExpress div.appraisalExpressInput label.appraisalExpressLabel
{
	display: block;
}

.appraisalExpress .appraisalComments textarea
{
	font-size: 1.5em;
	width: 99%;
	height: 4em;
	background-color: lightgray;
	border: none;
}

.appraisalExpress .appraisalDesired .container.newused div.field
{
	width: 30%;
	float: left;
}

.appraisalExpress .appraisalDesired .field.from,
.appraisalExpress .appraisalDesired .field.to
{
	display: inline-block;
}

.appraisalExpress .appraisalDesired .field.from select,
.appraisalExpress .appraisalDesired .field.to select
{
	width: 100%;
	display: inline-block;
}

.appraisalExpress .control
{
	display: block;
	position: relative;
	padding-left: 2.5em !important;
	margin-bottom: 0;
	cursor: pointer;
	padding-top: 2.65em !important;
}

.appraisalExpress .control input
{
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.appraisalExpress .control__indicator
{
	display: block;
	position: absolute;
	top: 0.25em;
	left: 0;
	height: 1.7em;
	width: 1.7em;
	background: #e6e6e6;
	border: solid 1px grey !important;
	font-size: 1em;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}

.appraisalExpress .control--radio .control__indicator
{
	border-radius: 50%;
	font-size: 1em;
}

.appraisalExpress .control:hover input ~ .control__indicator
{
	background: #ccc;
}

.appraisalExpress .control input:checked ~ .control__indicator
{
	background: white;
	border: solid 1px grey;
	margin: 0;
}

.appraisalExpress .control:hover input:not([disabled]):checked ~ .control__indicator
{
	background: #ccc;
}

.appraisalExpress .control input:disabled ~ .control__indicator
{
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}

.appraisalExpress .control__indicator:after
{
	content: '';
	position: absolute;
	display: none;
}

.appraisalExpress .control input:checked ~ .control__indicator:after
{
	display: block;
}

.appraisalExpress .control--checkbox .control__indicator:after
{
	left: 0.6em;
	top: 0.21em;
	width: 0.4em;
	height: 1em;
	border: solid #529c4d;
	border-width: 0 0.4em 0.4em 0;
	transform: rotate(45deg);
}

.appraisalExpress .control--checkbox input:disabled ~ .control__indicator:after
{
	border-color: #7b7b7b;
}

.appraisalExpress .control--radio .control__indicator:after
{
	left: 0.25em;
	top: 0.25em;
	height: 1.2em;
	width: 1.2em;
	border-radius: 50%;
	background: #529c4d;
}

.appraisalExpress .control--radio input:disabled ~ .control__indicator:after
{
	background: #7b7b7b;
}

.appraisalExpress .control--radio .label,
.appraisalExpress .control--checkbox .label
{
	margin-top: -2em;
	display: block;
	font-size: 1em;
	color: #000000;
	text-align: left;
}

.appraisalExpress .select
{
	position: relative;
	display: inline-block;
	width: 100%;
}

.appraisalExpress div.container.year {
	width: auto;
}

.appraisalExpress .select select
{
	display: inline-block;
	width: 100%;
	cursor: pointer;
	padding: 10px 15px;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: #e6e6e6;
	color: #7b7b7b;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.appraisalExpress .select select::-ms-expand
{
	display: none;
}

.appraisalExpress .select select:hover
{
	color: #000;
	background: #ccc;
}

.appraisalExpress .select select:disabled
{
	opacity: 0.5;
	pointer-events: none;
}

.appraisalExpress .select select:hover ~ .select__arrow
{
	border-top-color: #000;
}

.appraisalExpress .select select:disabled ~ .select__arrow
{
	border-top-color: #ccc;
}

.appraisalExpress div.tradeValue div.car
{
	display: none;
}

.appraisalExpress div.tradeValue div.header
{
	background-color: #0E88C9; /* #21b5e6 */
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	border-radius: 1em;
	padding: 0.2em;
	margin: 1em;
}

.appraisalExpress div.tradeValue div.header div.arrow
{
	display: none;
}

.appraisalExpress div.tradeValue div.header div.amount
{
	font-size: 1.8em;
}

.appraisalExpress .money::before
{
	content: '$';
}

.appraisalExpress div.tradeValue button.appraisalExpressButton
{
	margin: 0.5em auto;
	width: 90% !important;
	display: block;
	font-size: 1.5em;
}

.appraisalExpress div.tradeValue div.data
{
	background-color: #f0f0f0;
	border: gray solid 0.1em;
	border-width: 0.1em 0;
	padding: 2em 0;
}

.appraisalExpress div.no-values-title
{
	padding: 0 0.2em;
}
.appraisalExpress div.tradeValue div.no-values-info
{
	font-size: 1.3em;
	max-width: 80%;
	margin: 0 auto;
}
.appraisalExpress div.tradeValue div.no-values-info ul
{
	padding: 0 !important;
	margin: 0 !important;
	
}
.appraisalExpress div.tradeValue div.no-values-info li{
	padding: 0.35em 0 !important;
	margin: 0 1.1em !important;
	line-height: 1.2;
	list-style: disc;
}
.appraisalExpress div.tradeValue div.data div.top div.trade,
.appraisalExpress div.tradeValue div.data div.top div.dealership,
.appraisalExpress div.tradeValue div.data div.bottom div.dealership,
.appraisalExpress div.tradeValue div.data div.top div.no-values-info
{
	vertical-align: top;
}

.appraisalExpress div.tradeValue div.data div.top div.dealership div.field,
.appraisalExpress div.tradeValue div.data div.top div.no-values-info div.field
{
	font-size: 1.8em;
	line-height: 1.5;
	color: #505050;
	margin: 0 0 1em 0;
	max-width: 80%;
}

.appraisalExpress div.tradeValue div.data div.bottom div.dealership div.field,
.appraisalExpress div.tradeValue div.data div.top div.trade div.field
{
	font-size: 1.8em;
	line-height: 1.5;
	color: #505050;
	margin: 0;
}

.appraisalExpress div.tradeValue div.data div.top .tradeAttribute,
.appraisalExpress div.tradeValue div.data div.top .dealerAttribute,
.appraisalExpress div.tradeValue div.data div.bottom .dealerAttribute
{
	font-size: 0.8em;
}

.appraisalExpress div.tradeValue div.data div.top div.trade
{
	width: 60%;
	text-indent: 0;
	float: left;
	margin-left: 4%;
}

.appraisalExpress div.tradeValue div.data div.top div.trade div.field .label
{
	font-size: 0.9em;
	width: 4.8em;
	display: inline-block;
	color: #000000;
	text-align: left;
}

.appraisalExpress div.tradeValue div.data div.top div.trade div.field .label::after
{
	content: ':';
}

.appraisalExpress div.tradeValue div.data div.top div.nadaLogo
{
	float: right;
	text-align: center;
	width: 30%;
	margin: 0 4% 0 0;
}

.appraisalExpress div.tradeValue div.data div.top div.nadaLogo img
{
	width: 100%;
	max-width: 250px;
}

.appraisalExpress div.tradeValue div.buttons
{
	padding: 1em 0;
	text-align: center;
	clear: both;
}

.appraisalExpress div.tradeValue div.buttons button.appraisalExpressButtonFinal.preApproval
{
	font-size: 1.65em;
	background-color: #0E88C9;
	width: 80%;
	color: #ffffff;
	font-weight: bold;
	display: block;
	margin: 1em auto;
	max-width: 25em;
	padding: 1em;
}

.appraisalExpress div.tradeValue div.buttons button.appraisalExpressButtonFinal.viewInventory
{
	font-size: 1.5em;
	background-color: #0E88C9;
	width: 70%;
	padding: .5em;
	color: #ffffff;
	max-width: 20em;
	font-weight: bold;
}

.appraisalExpress div.tradeValue div.disclaimer
{
	/* display: none; removed 20170919 nna 405414 - display disclaimer on small screen size */
}

.appraisalExpress .top .dealership {
	display: none;
}

.appraisalExpress .bottom .dealership {
	display: block;
	margin-left: 4%;
}
#nadaDrilldownPopup div{
    text-align: center;
}
#nadaDrilldownPopup label{
    width: 50px;
}

#nadaDrilldownPopup select{
    width: 120px;
    margin-bottom: 6px;
}
#nadaDrilldownPopup button{
    font-size: 14px;
    border-radius: 7px;
    background-color: white;
    padding: 2px 25px;
    cursor: pointer;
}

@media only screen and (min-width:768px)
{
	.appraisalExpress .cx-full-force-break {display:inline;}
	.appraisalExpress .cx-small-force-break {display:none;}
	.appraisalExpress div.ae_logo.small
	{
		display: none;
	}

	.appraisalExpress div.ae_logo.full
	{
		display: block;
	}

	.appraisalExpress div.appraisalProgress div.icons hr
	{
		top: 3.1em;
		height: 0.3em;
	}

	.appraisalExpress  div.appraisalProgress div.icons div.section div.icon
	{
		font-size: 2em;
		line-height: 2;
		width: 2em;
	}

	.appraisalExpress div.appraisalProgress div.icons div.section div.label
	{
		font-size: 1.5em;
	}

	.appraisalExpress div.appraisalProgress div.meter
	{
		display: block;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.appraisalExpress div.field.left_label label,
	.appraisalExpress div.appraisalExpressInput label.appraisalExpressLabel,
	.appraisalExpress label.appraisalExpressLabel.buttonSpace
	{
		display: inline-block;
		width: 20% !important;
		min-width: 6em !important;
	}
	.appraisalExpress .appraisalExpressInput div.field.left_label .appt_label
	{
		width: 100% !important;
	}
	.appraisalExpress .appraisalExpressInput div.field.left_label .appt_datetime_label
	{
		min-width: 230px !important;
	}
	.appraisalExpress .appraisalExpressInput .apptlike{
		width: 49%;
	}
	.appraisalExpress .appraisalExpressInput .formdatetime{
		display:flex;
		width: 49% !important;
	}
	.appraisalExpress .appraisalExpressInput .appt_field
	{
		margin-bottom: 2em;
		clear: both;
	}

	.appraisalExpress input[type=text],
	.appraisalExpress input[type=tel],
    .appraisalExpress input[type=email],
	.appraisalExpress select
	{
		width: 62% !important;
		min-width: 12em !important;
	}
	.appraisalExpress .datetimeinput
	{
		width: 34% !important;
	}
	.appraisalExpress .appt_field input[name=AppointmentDate],
	.appraisalExpress .appt_field input[name=AppointmentTime]
	{
		width: 100% !important;
		min-width: 0 !important;
	}

	.appraisalExpress .buttonContainer
	{
		margin-left: 9em !important;
	}

	.appraisalExpress .appraisalExpressButton
	{
		width: 19em !important;
	}
	
	.appraisalExpress div.appraisalTrade
	{
		width: 49%;
		display: block;
		float: left;
	}
	
	.appraisalExpress div.aae-trade-image
	{
		width: 49%;
		display: block;
		float: left;
		margin-bottom: -20em;
		/*margin-top: -30em;*/
	}
	
	.appraisalExpress div.aae-trade-image img.aae-appraisal-trade-graphic
	{
		width: 100%;
		max-width: 379px;
	}

	.appraisalExpress .appraisalCondition .control--radio .control__indicator
	{
		top: 1em;
	}

	.appraisalExpress .appraisalCondition .control--radio .label
	{
	margin-top: -1.2em;
	}

	.appraisalExpress .appraisalTrade .small
	{
		margin-left: 9em;
	}

	.appraisalExpress div.tradeMileage
	{
		width: 42%;
		float: left;
	}

	.appraisalExpress div.tradeMileage input[type=text],
	.appraisalExpress div.tradeMileage input[type=tel]
	{
		width: 50% !important;
		min-width: 10em !important;
	}
	
	.appraisalExpress div.appraisalEquipment
	{
		margin-top: 0 !important;
		margin-left: 3% !important;
		width: 53%;
		float: left;
	}
	
	.appraisalExpress div.appraisalEquipment label.full
	{
		display: inline-block !important;
		width: 11em !important;
		vertical-align: middle;
		line-height: 1;
	}

	.appraisalExpress div.appraisalEquipment button.full
	{
		display: inline-block !important;
		line-height: 1.5;
		font-size: 1.1em
	}

	.appraisalExpress div.appraisalDesired .full
	{
		display: inline-block !important;
	}

	.appraisalExpress div.appraisalEquipment .small,
	.appraisalExpress div.appraisalDesired .small
	{
		display: none;
	}

	div.aae-equipmentList div.equipmentItem
	{
		font-size: 1.3em;
	}
	
	.appraisalExpress div.appraisalCondition .control
	{
		padding-left: 2.5em !important;
		padding-top: 2em !important;
	}

	.appraisalExpress div.appraisalCondition label.appraisalExpressLabel
	{
		vertical-align: top;
		width: 5em !important;
		/*margin-top: 1.5em;*/
	}

	.appraisalExpress div.appraisalCondition .radiogroup
	{
		display: inline-block;
		width: 78%;
		margin-top: -1.5em !important;
	}

	.appraisalExpress div.appraisalCondition .description
	{
		display: block;
		font-size: 0.75em;
		line-height: 1.1;
		text-align: justify;
		padding-top: 0.2em;
	}

	.appraisalExpress div.appraisalDesired,
	.appraisalExpress div.appraisalPurchaseTime
	{
		float: left;
		width: 49%;
	}
	
	
	.appraisalExpress div.appraisalPurchaseTime div.field
	{
		padding-left: 2em !important;
	}
	.appraisalExpress div.appraisalPurchaseTime div.field
	{
		margin-left: 1em !important;
	}

	.appraisalExpress div.appraisalDesired label.appraisalExpressLabel.aaa-long-label,
	.appraisalExpress div.appraisalPurchaseTime label.appraisalExpressLabel.aaa-long-label,
	.appraisalExpress div.appraisalContactMethod label.appraisalExpressLabel.aaa-long-label
	{
		width: 100% !important;
		margin-bottom: 1em !important;
		display: block;
	}
	
	.appraisalExpress .appraisalDesired .to label
	{
		text-align: center;
	}

	.appraisalExpress .container.year div.field.from
	{
		width: 55%;
		vertical-align: top;
	}

	.appraisalExpress .container.year div.field.to
	{
		width: 42%;
		vertical-align: top;
	}

	.appraisalExpress .container.year label.middle
	{
		display: none;
	}

	.appraisalExpress div.appraisalExpressInput.appraisalDesired .container.year div.to label.appraisalExpressLabel
	{
		width: 6em !important;
	}

	.appraisalExpress div.appraisalExpressInput.appraisalDesired .container.year div.to label.appraisalExpressLabel
	{
		width: 2.5em !important;
		min-width: 2.5em !important;
	}

	.appraisalExpress .appraisalDesired .field.from select,
	.appraisalExpress .appraisalDesired .field.to select
	{
		width: 5em !important;
		min-width: 5em !important;
	}

	.appraisalExpress .appraisalContact
	{
		display: inline-block;
	}

	.appraisalExpress div.appraisalContact,
	.appraisalExpress div.appraisalContactMethod
	{
		display: block;
		float: left;
		width: 49%;
	}
	
	.appraisalExpress .appraisalComments textarea
	{
		width: 75%;
	}

	.appraisalExpress div.appraisalComments label.appraisalExpressLabel 
	{
		width: 6em !important;
		vertical-align: top;
		display: inline-block;
	}

	.appraisalExpress .field
	{
		margin-bottom: 2em;
	}
	
	.appraisalExpress .field.vin,
	.appraisalExpress .text
	{
		margin-bottom: 0.8em;
	}

	.appraisalExpress .text
	{
		margin-left: 5em;
	}

	.appraisalExpress div.tradeValue div.car
	{
		background-color: #6ec529;
		color: white;
		font-size: 2.5em;
		padding: 0.07em;
		width: 2em;
		border-radius: 4em;
		text-align: center;
		display: table;
		position: relative;
		left: -1.5em;
		margin-top: -2.2em;
		top: 1.75em;
	}

	.appraisalExpress div.tradeValue div.car div.inner
	{
		border: white dashed 0.04em;
		border-radius: 4em;
		height: 1.8em;
		padding-top: 0.2em;
		width: 2em;
	}

	.appraisalExpress div.tradeValue div.header
	{
		margin: auto;
		margin-top: 1em;
		border-radius: 1em;
		font-size: 2em;
	}

	.appraisalExpress div.tradeValue div.header div.title
	{
		max-width: 10em;
		display: inline-block;
	}

	.appraisalExpress div.tradeValue div.header div.arrow
	{
		display: inline-block;
		vertical-align: super;
		font-size: 2em;
	}

	.appraisalExpress div.tradeValue div.header div.amount
	{
		display: inline-block;
		vertical-align: super;
	}

	.appraisalExpress  div.tradeValue div.data
	{
		border-width: 0 0.1em 0.1em 0.1em;
		width: 95%;
		margin: 0;
	}

	.appraisalExpress  div.tradeValue div.data div.top
	{
		width: 95%;
		margin: auto;
		-webkit-column-count: 3;
		-webkit-column-gap: 1em;
		-moz-column-count: 3;
		-moz-column-gap:12em;
		-moz-column-fill: balance-all;
		column-count: 3;
		column-gap: 1em;
		column-fill: balance-all;
	}

	.appraisalExpress div.tradeValue div.data div.top div.trade,
	.appraisalExpress div.tradeValue div.data div.top div.dealership,
	.appraisalExpress div.tradeValue div.data div.top div.no-values-info
	{
		width: 100%;
		display: block;
		float: none;
		break-after: auto;
		break-inside: avoid;
	}
	
	.appraisalExpress div.tradeValue div.data div.top div.nadaLogo
	{
		float: none;
		display: block;
		width: 90%;
		margin: 0 auto;
		padding: 1em 0 0 0;
		vertical-align: top;
		break-after: auto;
		break-inside: avoid;
	}
	.appraisalExpress .tradeValue div.no-values-info
	{
		font-size: 1.1em;
		margin: 0;
	}
	
	.appraisalExpress div.tradeValue div.data div.top div.trade div.field,
	.appraisalExpress div.tradeValue div.data div.top div.dealership div.field,
	.appraisalExpress div.tradeValue div.data div.top div.no-values-info div.field
	{
		font-size: 1.8em;
		line-height: 1.5;
		color: #505050;
		margin: auto;
		max-width: 10em;
	}

	.appraisalExpress div.tradeValue button.appraisalExpressButton.printValue
	{
		display: block;
		width: 10em !important;
		margin: 1em auto 0 auto;
	}
	
	.appraisalExpress div.tradeValue div.buttons button.appraisalExpressButton
	{
		display: inline-block;
		width: 30% !important;
		margin: 1% !important;
	}

	.appraisalExpress .disclaimer
	{
		display: block !important;
	}
		
	.appraisalExpress .top .dealership {
		display: block;
	}

	.appraisalExpress .bottom .dealership {
		display: none;
	}
}
@media only screen and (min-width:768px) and (max-width:1023px)
{
	.appraisalExpress div.tradeMileage
	{
		width: 50% !important;
	}
	.appraisalExpress div.appraisalEquipment
	{
		width: 45% !important;
	}
	.appraisalExpress .appraisalDesired .field.from select,
	.appraisalExpress .appraisalDesired .field.to select
	{
		width: 4.5em !important;
		min-width: 4.5em !important;
	}
	.appraisalExpress div.appraisalEquipment button.full,
	.appraisalExpress div.appraisalEquipment label.full
	{
		display: none !important;
	}
	.appraisalExpress div.appraisalEquipment .small
	{
		display: inline-block !important;
	}
	.appraisalExpress div.tradeValue div.buttons button.appraisalExpressButton
	{
		width: 40% !important;
	}
}

/** @version 2017.05.24 jln Ticket 382219, help the print of AAE 
 *  @version 2017.06.01 jln Ticket 384671, adjustments to print since screen change
 *  @version 20171005 nna 411304 - limit print p css to only the page contents
 **/
@media print
{
	html , #wrapper, body
	{   
        height: 90% !important;
    }
	body
	{
		font-size: 10px;
	}
	
	.print-page-break-before {page-break-before:always;}

	#phoneTop,
	#header,
	#nav,
	#dlrAddress,
	.appraisalProgress,
	.car,
	.buttons,
	#footer,
	#calltext,
	#cot_tl_fixed,
	#cot_tl_pop,
	.directions,
	button,
	iframe,
	#goog-gt-tt,
	.goog-te-spinner-pos,
	#wrapper p
	{
		display: none !important;
	}

	.appraisalExpress  div.ae_logo.small
	{
		display: none;
	}

	.appraisalExpress  div.ae_logo.full
	{
		display: block;
	}

	.appraisalExpress div.tradeValue div.header > div
	{
	  display: inline-block;
	}

	.appraisalExpress div.tradeValue div.header div.title
	{
		max-width: 10em;
	}
	
	.appraisalExpress div.tradeValue div.data div.top,
	.appraisalExpress div.tradeValue div.header
	{
		width: 100%;
		color: black !important;
	}
	
	.appraisalExpress div.tradeValue div.data div.top div.trade,
	.appraisalExpress div.tradeValue div.data div.top div.dealership,
	.appraisalExpress div.tradeValue div.data div.top div.no-values-info
	{
		width: 37%;
		float: left;
		
	}
	.appraisalExpress div.tradeValue div.data div.top div.nadaLogo
	{
		width: 20%;
		float: left;
	}
	
	.appraisalExpress div.tradeValue div.data div.top div.nadaLogo img
	{
		width: 50%;
		max-width: 100px;
	}

	.appraisalExpress div.tradeValue div.disclaimer
	{
		display: block;
	}
}