@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	src: local("Roboto"), local("Roboto-Regular"), url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	src: local("Roboto Medium"), local("Roboto-Medium"), url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	overflow-x: hidden; /* Prevent horizontal scrollbar in IE, which would otherwise adversly affect iframe resizing. */
}

#idPanel1WithLogo {
	margin-bottom: 1em;
}

#idPanel1Child {
	padding-top: 1em;
}

#idPanel1Child img {
	width: 40%;
	max-width: 190px;
}

.clsCentrePanelAutoMargin {
	background-color: white;
	max-width: none;
	border-style: none;
}

.clsPanel2 {
	text-align: center;
	background-color: #e5f0ff;
	padding-top: 19px;
	padding-bottom: 19px;
	font-size: 15px;
	margin-right: 1em;
	xxxcolor: #516f83;
	margin-bottom: 0.5em;
}

body, select, option, input, button {
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 1.06em;
	color: #333333; /*#516f83;*/
}

option {
	color: #333333;
}

input[type="submit"] {
	background-color: transparent;
	padding: 3px;
	border: 2px solid #0069ff;
	border-radius: 2px;
	color: #0069ff;
}

body > #idDivInner { /* When in an iframe. */
	padding-right: 0px;
}

.clsFieldsetDivQuickSearch {
	margin-top: 1em;
}

#cmdOkSearch {
	font-size: 85%;

	border-radius: 50%;
	height: 3.7em;
	width: 3.7em;
	background: transparent url(../Images/MagnifyingGlass.png) no-repeat center;
	color: transparent;
}

.NoMatch a {
	color: #516f83;
}

#lblFragmentModelDesc,
#lblModelWildcard {
	xxxfont-style: italic;
	font-size: 80%;
}

#idModelSearchContainer {
	clear: right; /* Steer clear of the Search button */
}

#txtFragmentModelDesc {
	padding: 0.1em;
	padding-left: 0.3em;
	box-sizing: border-box;
	border-style: none;
	border-bottom: 1px solid #516f83;
	background-color: transparent;
}

@media (max-width: 777px) {
	#lblFragmentModelDesc { display: block; }
	#txtFragmentModelDesc { width: 80%; }
}

@media (max-width: 433px) { #txtFragmentModelDesc { width: 79%; } }
@media (max-width: 414px) { #txtFragmentModelDesc { width: 78%; } }
@media (max-width: 398px) { #txtFragmentModelDesc { width: 77%; } }
@media (max-width: 383px) { #txtFragmentModelDesc { width: 76%; } }
@media (max-width: 369px) { #txtFragmentModelDesc { width: 75%; } }
@media (max-width: 356px) { #txtFragmentModelDesc { width: 74%; } }
@media (max-width: 350px) { #txtFragmentModelDesc { width: 100%; margin-bottom: 0.2em; } #cmdOkSearch { float: right; } }

.clsLegendDiv {
	display: none;
}

.clsDrilldownListContainer {
	display: inline-block;
	vertical-align: top;
	position: relative; /* Allow child clsDrilldownListSpan item (position:absolute) to be positioned relative to this item instead to their normal flow position. */
	width: 30%;
}

button {
	xxxfont-style: italic;
	text-align: left;
}

.clsDrilldownListContainer {
	margin-right: 2em;
}

.clsDrilldownListContainer:last-child {
	margin-right: 0em;
}

.clsDrilldownListContainer label {
	display: block;
	float: none; width: auto; /* undo Default.css */
	xxxfont-style: italic;
	font-size: 80%;
}

label.clsItemUnselected {
	visibility: hidden;
}

button.clsItemUnselected {
	xxxfont-style: italic;
}

button img {
	float: right;
	margin-left: 1em; /* Keep icon separate from text. */
}

.clsItemSelected {
	display: inline; /* Override Default.css */
	width: 100%; /* Firefox: make elipsis show and do proper resize. */
	/*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; /* CCoyier */
	font-style: normal;
	border-style: none;
	border-bottom: 1px solid #516f83;
	background-color: transparent;
}

.clsItemSelected[disabled="disabled"] {
	color: #B4C1C9;
	border-bottom: 1px solid #B4C1C9;
}

.clsDrilldownListSpan {
	position: absolute;
	display: none; /*default=inline*/
	z-index: 1;
}

select {
	padding-left: 1em;
	padding-right: 1em;
	border-style: none;
	font-size: 90%;
}

.clsDrilldownListSpan > select {
	width: auto; /* Override Default.css otherwise its content gets cropped.  */
}

.clsEquipmentMakeModelContainer {
	background-image: none;
	padding-left: 0px;
	min-height: 0px;
	display: none;
}

.clsCompartment0,
.clsCompartment1 {
	background-color: transparent;
	padding: 0px;
}

.clsLubeImage ~ .clsLubeProductNameDiv,
.clsLubeImage ~ .clsVerboseProductDescription,
.clsProductHasImage,
.clsLubeImage ~ .clsProductHyperlinkExtra {
	padding-left: 0px; /* To make space for the left-floated product image... */
}

.clsProductContainer1 {
	xxxbackground-color: #E9EDEF;
}

.clsProductContainer {
	border-bottom: 1px solid #e0e0e0;
}

.clsCompartment0:last-child > .clsProductContainer,
.clsCompartment1:last-child > .clsProductContainer {
	border-style: none;
}

.clsProductColumn1 {
	xxxposition: relative;
	xxxleft: -1em;
}

.clsProductColumn1,
.clsProductColumn2 {
	xxxborder-right: 1px solid #e0e0e0;
}

.clsProductContainer {
	padding-right: 1em;
	padding-top: 2em;
	padding-bottom: 2em;
	padding-left: 0px;
}

.clsProductColumn1,
.clsProductColumn2,
.clsProductColumn3 {
	width: 32%;
}

@media (max-width: 1933px) {
	.clsProductColumn1,
	.clsProductColumn2 {
		width: 31%;
	}
}

@media (max-width: 1250px) {
	.clsProductColumn1,
	.clsProductColumn2 {
		xxxwidth: 30%;
	}
}

@media (max-width: 1141px) {
	.clsProductColumn1,
	.clsProductColumn2 {
		xxxwidth: 28%;
	}
}

.clsProductColumn1,
.clsProductColumn2 {
	padding-right: 1em;
}

.clsProductColumn2,
.clsProductColumn3 {
	xxxpadding-left: 1em;
}

.clsProductContainer,
.clsCompartment0,
.clsCompartment1 {
	clear: none; height: auto; overflow: visible; /* Override Default.css */
}

.clsProductOr {
	display: none;
}

.clsProductHyperlinkExtra {
	display: inline-block;
}

.clsNotesInlineWithCompartment {
	display: block;
	padding-left: 1.25em;
	padding-right: 1em;
	padding-bottom: 1em;
	list-style-type: none; /* Appears to be redundant, but just in case. */
}

.clsNoteInlineWithCompartment {
	display: block;
}

.clsProductHyperlinkExtra {
	margin-top: 0px; margin-bottom: 0px; /* Override Default.css */
	padding-left: 1em;
	padding-right: 1em;
}

.clsProductHyperlinkExtra2 {
	padding-right: 0em;
}

.clsProductHyperlinkExtra span {
	border-style: none; padding: 0px; /* Override Default.css */
}

.clsProductHyperlinkExtra:first-child {
	border-right: 1px solid #e0e0e0;
}

.clsProductHyperlinkExtra1 {
	background-repeat: no-repeat;
	background-position: 1em center;
	padding-left: 3em;
}

.clsProductContainer1 .clsProductHyperlinkExtra1 {
	background: url(../Images/Download.svg) 1em center/20px no-repeat;
}

.clsProductContainer0 .clsProductHyperlinkExtra1 {
	background: url(../Images/Download.svg) 1em center/20px no-repeat;
}

.clsProductHyperlinkExtra a {
	text-decoration: underline;
	color: #003e51;
}

.clsProductHyperlinkExtra a:hover {
	text-decoration: none;
}

.clsLubeProductName {
	xxxfont-style: italic;
	font-size: 130%;
	color: #0069ff;
	font-weight: bold;
}

.clsCompartmentType {
	font-size: 100%; /* Override Default.css */
	xxxfont-style: italic;
	font-weight: normal;
	xxxbackground: url(../Images/OilDrop-h20.svg) no-repeat left top;
	xxxpadding-left: 2em;
	color: #003e51;
}

.clsLubeQuantityAndNoteReferences {
	margin-top: 0.5em;
}

.clsVerboseProductDescription {
	margin-top: 0.7em;
}

.clsProductHyperlinkExtraContainer + .clsNotesInlineWithCompartment {
	margin-top: 1em;
}

.clsLubeQuantityAndNoteReferences,
.clsNotesInlineWithCompartment,
.clsVerboseProductDescription {
	font-size: 72%;
}

.clsLubeQuantityAndSuffix {
	xxxfont-style: italic;
	padding-right: 1em;
	font-size: 150%;
}

.clsLubeQuantityPrefix {
	display: inline-block;
}

.clsLubeQuantityAsterisk {
	display: block;
}

.clsNotesInlineWithCompartment:first-child {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	padding-left: 1.25em;
	width: 100%;
}

.clsNoteInlineWithCompartment + .clsNoteInlineWithCompartment {
	margin-top: 1em;
}

@media (min-width: 801px) and (max-width: 866px) {
	.clsProductHyperlinkExtra2 {
		width: 32%;
		vertical-align: top;
	}
}

/*-----------------------------------------------------------------------------------------------*/

/* large:>800px, medium:601-800, small:401-600, xsmall:<401 */

@media (max-width: 800px) {
	.clsProductColumn1,
	.clsProductColumn2,
	.clsProductColumn3 {
		display: block;
		width: auto;
		height: auto;
		padding-right: 0em;
		border-right-style: none;
	}

	.clsProductColumn1,
	.clsProductColumn2 {
		padding-bottom: 0em;
	}

	.clsProductColumn2,
	.clsProductColumn3 {
		padding-left: 0em;
		padding-top: 1em;
	}

	.clsProductColumn1 {
		xxxborder-bottom: 1px solid #e0e0e0;
	}

	.clsProductColumn3 {
		xxxborder-top: 1px solid #e0e0e0;
	}

	.clsProductHyperlinkExtra1 {
		background-position: left center !important;
		padding-left: 2em;
	}

	.clsProductHyperlinkExtraContainer,
	.clsNotesInlineWithCompartment {
		display: inline-block;
		width: 47%;
		vertical-align: top;
	}

	.clsProductHyperlinkExtra {
			vertical-align: top;
	}

	.clsNotesInlineWithCompartment {
		padding-bottom: 0em;
		xxxmargin-left: 1.7em;
		padding-left: 0.25em;
		width: 45%;
	}

	.clsProductColumn3 > .clsNotesInlineWithCompartment {
	}

	.clsLubeQuantityAndNoteReferences,
	.clsCompartmentType {
		display: inline-block;
		vertical-align: top;
		width: 47%;
	}

	.clsLubeQuantityAndNoteReferences {
		margin-top: 0px;
	}

	.clsNotesInlineWithCompartment:first-child {
		padding-left: 0em;
	}

}

@media (min-width: 601px) and (max-width: 800px) {
	.clsProductHyperlinkExtraContainer + .clsNotesInlineWithCompartment {
		margin-top: 0.25em;
	}
}

	@media (max-width: 336px) {
		.clsProductHyperlinkExtra {
			vertical-align: top;
		}

		.clsProductHyperlinkExtra2 {
			width: 40%;
		}
	}

	@media (max-width: 772px) {
		.clsNotesInlineWithCompartment {
			width: 43%;
		}
	}

	@media (max-width: 744px) {
		.clsNotesInlineWithCompartment {
			xxxmargin-left: 1.3em;
			padding-left: 0em;
		}
	}

	@media (max-width: 633px) {
		.clsNotesInlineWithCompartment {
			width: 43%;
		}
	}

	@media (max-width: 617px) {
		.clsProductHyperlinkExtraContainer {
			width: 48%;
		}
		.clsNotesInlineWithCompartment {
			width: 42%;
			xxxmargin-left: 0.9em;
		}
	}

	@media (max-width: 744px) {
		.clsLubeQuantityAndNoteReferences,
		.clsCompartmentType {
			width: 46%;
		}
	}

	@media (max-width: 678px) {
		.clsLubeQuantityAndNoteReferences,
		.clsCompartmentType {
			xxxwidth: 44%;
		}
	}

	@media (max-width: 600px) {
		.clsLubeQuantityAndNoteReferences,
		.clsCompartmentType,
		.clsProductHyperlinkExtraContainer,
		.clsNotesInlineWithCompartment {
			display: block;
			width: auto;
		}

		.clsNotesInlineWithCompartment {
			padding-left: 0em;
			margin-left: 0em;
		}
	}

@media (max-width: 249px) {
	.clsProductHyperlinkExtra2 {
		width: 38%;
	}
}

@media (max-width: 244px) {
	.clsProductHyperlinkExtra2 {
		width: 37%;
	}
}

@media (max-width: 241px) {
	.clsProductHyperlinkExtra2 {
		width: 36%;
	}
}

@media (max-width: 241px) {
	.clsProductHyperlinkExtra2 {
		width: 35%;
	}
}

@media (max-width: 237px) {
	.clsProductHyperlinkExtra2 {
		width: 34%;
	}
}

@media (max-width: 234px) {
	.clsProductHyperlinkExtra2 {
		width: 33%;
	}
}

@media (max-width: 181px) {
	.clsProductHyperlinkExtra2 {
		width: 32%;
	}
}

@media (max-width: 179px) {
	.clsProductHyperlinkExtra2 {
		width: 31%;
	}
}

@media (max-width: 177px) {
	.clsProductHyperlinkExtra2 {
		width: 30%;
	}
}

@media (max-width: 175px) {
	.clsProductHyperlinkExtra2 {
		margin-top: 1em;
	}
}

.clsDrilldownListSpan { 
	max-width: none; /* undo Zeta */ /* Otherwise the dropdown doesn't move. */
}

/*-----------------------------------------------------------------------------------------------*/

@media (max-width: 825px) {
	.clsDrilldownListContainer {
		width: 29%;
	}
}

@media (max-width: 647px) {
	.clsDrilldownListContainer {
		width: 28%;
	}
}

@media (max-width: 600px) {
	.clsDrilldownListContainer {
		display: block;
		width: 100%;
		margin-bottom: 1em;
	}

	.clsDrilldownListContainer:last-child {
		margin-bottom: 0px;
	}

	.clsLubeQuantityAndNoteReferences {
		margin-top: 1em;
	}

}

/*-----------------------------------------------------------------------------------------------*/

.clsFooter {
	border-top: 1px solid #e0e0e0;
	color: #003e51;
	font-size: 12px;
}

.clsFooter a,
#idBackButtonContainer + div a { /* Disclaimer page */
	color: #516f83;
}

.clsFooter a:visited,
#idBackButtonContainer + div a:visited { /* Disclaimer page */
	color: #00384A;
}

form + .clsFooter {
	margin-top: 14.5em;
}

.clsResetAndChoose {
	padding-bottom: 0em; /* Undo Default.css */
}

.clsResetAndChoose span:first-child {
	display: none; /* Remove introduction */
}

.clsResetDiv {
	font-size: 80%;
	margin-bottom: 0.5em;
	display: block; /* undo Default.css */
}

.clsLubeQuantityAsterisk {
	margin-left: 0.25em;
}

.clsProductHyperlinkExtra1:last-child {
	border-right: none;
}

.clsFieldsetDivQuickSearch > fieldset > span:nth-child(3) {
	display: block;
	text-align: center;
}

@media (max-width: 777px) {
	.clsFieldsetDivQuickSearch > fieldset > span:nth-child(3) {
		display: inline;
		text-align: left;
	}
}

.clsFieldsetDivQuickSearch > fieldset > div {
	margin-top: 1em;
}

#lstModelWildcard {
	margin-top: 0em; /* undo Default.css */
}

.clsResetDiv.clsHidden {
	visibility: hidden;
}

#lblFragmentModelDesc svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	font-size: .75em;
}

.clsLstModelWildcardEquipment,
.clsLstModelWildcardMake,
.clsLstModelWildcardEquipmentsubtype {
	color: #516f83;
}

.clsLstModelWildcardModel {
	color: #333333;
	font-weight: normal;
}

.clsLstModelWildcardEquipment0 {
	background-color: #E4EDF1; /*#D0E0E8;*/
	border-top: 1px solid #9ABCCB;
}

.clsLstModelWildcardMake0,
.clsLstModelWildcardEquipmentsubtype0,
.clsLstModelWildcardModel0 {
	background-color: #EFF4F8; /*#E2EBEF;*/
}

.clsLstModelWildcardEquipment1 {
	background-color: #F3E6E4; /*#E9CBC9; / * dull red */
	border-top: 1px solid #DCB5AF;
}

.clsLstModelWildcardMake1,
.clsLstModelWildcardEquipmentsubtype1,
.clsLstModelWildcardModel1 {
	background-color: #F9F1F0; /* light red */
}

.clsLstModelWildcardEquipment2 {
	background-color: #F7F7F7; /* dull fainter white */
	border-top: 1px solid #B9B9B9;
}