.product-container {
	display: flex;
	flex-wrap: wrap;
}
.product-container .catalogref {
	margin-top: 1em;
}
.product-container .qty-msg {
	margin: 8px 0px;
}
.product-container .leadtime {
	color: #A00;
	font-weight: bold;
}

#sb-body-inner {
	background-color: white; /* shadowbox bg needs to be white in case of transparent PNG */
}
.cad-loader .loading, .cad-loader .success, .cad-loader .failure {
	padding: 0.7em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
.cad-loader .loading {
	border: 1px solid yellow;
	background-color: #FFD;
}
.cad-loader .failure {
	border: 1px solid red;
	background-color: #FDD;
}
.cad-loader .success { padding: 0.2em 0px; }
.cad-loader .success li { margin: 2px 0px; padding: 2px 0px; }
.cad-loader .success .cad-filesize { float: right; color: black; font-weight: normal; }
.cad-loader .cad-filesize .num    { padding-left: 2px; padding-right: 2px; }
.cad-loader .cad-filesize .suffix { padding-left: 2px; padding-right: 2px; font-size: 80%; }
.cad-loader .success .archive { font-size: 120%; margin: 4px 0px; }
.knowledgebase-search-result-block ul li {
	list-style:disc inside;
	padding-left: 2em;
	text-indent: -2.25em;
	padding-bottom: 0.5em;
}

.product-container .prod-img-col {
	flex: 1 0 200px;
	max-width: 400px;
	display: inline-block; width: 25%;
}
.product-container .prod-main-col {
	flex: 3 3 600px; 
	display: inline-block; width;
}

.product-container .more-views ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin: 1em 15% 0 0; padding: 0;
}
.product-container .more-views li {
	flex: 0 0 56px;
	list-style-type: none;
	margin: 0; padding: 4px;
}
.product-container .more-views li > * { vertical-align: middle; }

.product-container .product-datasheet-box {
	padding: 8px 0;
}
/*.product-container .product-datasheet-box a {
	display: inline-block;
	margin: 1em .2em;
	padding: 4px 8px;
	width: 50px;
	text-align: center;
}*/

.product-container .product-core {
	max-width: 500px;
}
.product-container .prod-conf {
	border: none;
	max-width: 500px;
	margin: 2em 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px 12px;
}
.prod-conf .param {
	display: block;
	width: 220px;
	flex: 0 0 200px;
}
.prod-conf .param-name {
	font-weight: bold;
	font-size: 110%;
}
.prod-conf .param-value {
	display: block;
	position: relative;
	box-sizing: border-box;
	margin: 4px 0;
	padding: 4px;
	border: 1px solid #333;
	border-radius: 4px;
	width: 100%;
	background-color: white;
	text-align: left;
}
.prod-conf .param.incomplete .param-value {
	border-color: #A00;
	box-shadow: 0 0 1px 4px rgba(160, 0, 0, 0.1)
}
.prod-conf .param-value:hover,
.prod-conf .param-value:focus {
	background-color: #EEE;
}
.prod-conf .param-options {
	margin: 0;
	padding: 1px;
	border: 1px solid #333;
	border-radius: 4px;
	position: absolute;
	top: -1px; left: -1px;
	width: 105%;
	box-sizing: border-box;
	z-index: 10;
	background-color: white;
	visibility: hidden;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	max-height: 300px;
	overflow-y: auto;
}
.prod-conf .param-options.expand {
	visibility: visible;
}
.prod-conf .param-options.expand .param-option:hover,
.prod-conf .param-options.expand .param-option:focus {
	text-decoration: underline;
	background-color: #EEE;
}
.prod-conf .param-option {
	display: block;
	font-weight: normal;
	padding: 8px;
	font-size: 14px;
	cursor: pointer;
	border-bottom: 1px solid #EEE;
}
.prod-conf .param-option-writein {
	margin: .5em;
}
.prod-conf .param-option-writein .edit-and-commit {
	display: flex;
}
.prod-conf .param-option-writein .writein-edit {
	flex: 1 1 100px;
	min-width: 50px;
}
.prod-conf .param-option-writein .writein-commit {
	flex: 0 0 50px;
	min-width: 50px;
	margin-left: 0.5em;
}
.prod-conf .conflict {
	color: #8c2e0b;
}
.prod-conf .param-option-writein .writein-message {
	font-size: 10px;
	padding-top: .4em;
	color: #A00;
}

.product-container .price-box { padding: 1em 0; }
.product-container .price-box .price {
	display: inline-block;
	width: 100px;
	font-size: 16px;
	padding: 0 16px 0 0;
	text-align: right;
}
.product-container .price-box .leadtime { margin-left: 116px; }

.product-container .add-to-box {
	position: relative; /* container for loading spinner */
	padding: 1em 0;
	margin: 0;
}
.product-container .add-to-box label { display: inline-block; font-size: 14px; }
.product-container .add-to-box input.qty {
	display: inline-block;
	font-size: 18px;
	width: 3em;
	margin: 8px;
	padding: 2px;
	text-align: center;
}

.product-container .btn-cart, .product-container .btn-info {
	border: 1px solid #4485ae; background-color: #0072bc; color: white;
	font-size: 12px; font-weight: bold; padding: 10px 10px 8px; text-transform: uppercase;
	position: relative;
}
.product-container button.btn-info {
	margin-left: .7em;
	background-color: #82c341;
	border-color: #A0E055;
}
.product-container .btn-cart:disabled, .product-container .btn-cart[disabled] {
	background-color: #cccccc;
	color: #cccccc;
}

.product-container .product-tabs { max-width: 800px; margin-right: auto; }
.product-container .product-tabs .tabview-tab-body { min-height: 25em; padding: 2em; }
.product-attribute-specs-table { }
.product-attribute-specs-table th { color: inherit; background-color: inherit; }

.product-container .box-description ul { margin-top: .3em; }
.product-container .box-description h2 { margin-top: 1em; }
.product-container .box-description { margin-top: -1em; }

.product-container .crossref .compare {
	display: block;
	float: right;
	padding: 1px 4px;
}
.product-container .crossref .relevance {
	display: block;
	float: right;
}
.product-container .crossref .good-match {
	background-color: #DFD;
	#border: 1px solid #AFA;
	padding: 1px 4px;
}
.product-container .crossref .ok-match {
	background-color: #FFC;
	#border: 1px solid #BB5;
	padding: 1px 4px;
}
.product-container .crossref .poor-match {
	background-color: #FEC;
	#border: 1px solid #FA5;
	padding: 1px 4px;
}
.product-container .crossref .notes {
	padding-left: 1em;
}
.product-container a.compare-specs {
	display: block;
	margin-top: 2.5em;
	width: 300px;
	height: 42px;
	background-image: url('/static/images/compare-specs-hover.png');
}
.product-container a.compare-specs:hover img {
	visibility: hidden;
}

/* These styles are for the literature view of a product or product family datasheet */

body.prod-lit {
	margin: 0; padding: 0;
}

/* Page is two content columns with a footer, sized to 8.5x11 */
.prod-lit .page {
	position: relative;
	background-color: white;
	color: black;
	font-size: 8pt;
	padding: .9in .5in .5in;
	page-break-inside: avoid;
	break-inside: avoid;
}
.prod-lit .page .page-content {
	position: relative;
	height: 100%;
}

.prod-lit .page .col {
	position: relative;
	margin: 0; padding: 0;
	height: 96%;
}
.prod-lit .page .col.left {
	position: absolute;
	right: 52%; top: 0; bottom: 0; left: 0;
}
.prod-lit .page .col.right {
	position: absolute;
	right: 0; top: 0; bottom: 0; left: 52%;
}

.prod-lit .page .col-content {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}
.prod-lit .page footer {
	position: absolute;
	bottom: 0;
	margin: 0; padding: 0;
	left: 0;
	right: 0;
	height: auto;
	text-align: center;
	font-size: 7.5pt;
}

/* first page has the logo, and a larger header margin */
.prod-lit .page:nth-child(1) {
	padding-top: 1.2in; /* this needs to be subtracted from @media print below! */
	background-image: url(/static/images/clippard-hires.png);
	background-repeat: no-repeat;
	background-position: 50% .3in;
	background-size: 2.5in;
}

.prod-lit .page h1 {
	margin: 0 0 .15in -.5in;
	padding: .3em .5em .2em .5in;
	font-size: .22in;
	background-color: blue;
	background: -webkit-linear-gradient(left, #083370, #5ac2eb);
	background: linear-gradient(90deg, #083370, #5ac2eb);
	color: white;
	position: relative;
}
.prod-lit .page h2 {
	font-size:  .22in;
	font-weight: 500;
}
.prod-lit .page .configuration {
	margin-top: .1in;
}
.prod-lit .page .configuration dl {
	font-size: 90%;
	margin: 0 0 .15in 0;
	padding: 0 0 0 1em;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1em;
	row-gap: 2px;
}
.prod-lit .page .configuration dt {
	grid-column: 1;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.prod-lit .page .configuration dt::before {
	content: '– ';
}
.prod-lit .page .configuration dd {
	grid-column: 2;
	margin: 0;
	padding: 0;
}

/*
.prod-lit .page h1::after {
	background-image: url(/cms/sites/default/files/wiki_images/clippard_0.png);
	background-repeat: no-repeat;
	position: absolute;
	top: -55px;
	left: .45in;
	right: 0;
	height: 50px;
	content: ' ';
}
*/

.prod-lit .feature-icons {
}

.prod-lit .datasheet {
	margin: 0 0 1rem 0;
	font-size: 90%;
}

.prod-lit .datasheet tr {
	border-bottom: 1px solid #ccc;
}

/* systematically squeeze the datasheet if it is too large for the page */
.prod-lit .datasheet.compact1 { font-size: 88%; }
.prod-lit .datasheet.compact2 { font-size: 86%; }
.prod-lit .datasheet.compact3 { font-size: 84%; }
.prod-lit .datasheet.compact4 { font-size: 82%; }
.prod-lit .datasheet.compact5 { font-size: 80%; }
.prod-lit .datasheet.compact6 { font-size: 78%; }
.prod-lit .datasheet.compact7 { font-size: 76%; }
.prod-lit .datasheet.compact8 { font-size: 74%; }
.prod-lit .datasheet.compact9 { font-size: 72%; }

.prod-lit .datasheet.compact2 th,
 .prod-lit .datasheet.compact2 td { padding: 4px 5px; }
.prod-lit .datasheet.compact5 th,
 .prod-lit .datasheet.compact5 td { padding: 3px 5px; }
.prod-lit .datasheet.compact8 th,
 .prod-lit .datasheet.compact8 td { padding: 2px 5px; }

.prod-lit .col-img {
	display: block;
	position: relative;
	max-width: 100%;
	max-height: 3in;
	padding-bottom: 1rem;
}
.prod-lit .col-img.main-prod-img {
	margin-left: 10%; margin-right: 10%;
}

.prod-lit .col-img img {
	display: block;
	width: auto;
	margin-left: auto; margin-right: auto;
	height: auto;
	max-width: 100%;
	max-height: 3in;
	object-fit: contain;
}

@media screen {
  body.prod-lit {
	background-color: #CCC;
  }
  body.prod-lit .page {
	margin: 1rem auto;
	box-sizing: border-box;
	width: 8.5in;
	height: 11in;
  }
}

/* Page is two content columns with a footer, sized to 8.5x11 */

@media print {
  body.prod-lit {
	margin: 0;
	padding: 0;
	background: white;
  }
  body.prod-lit .page {
	margin: 0;
	/* box-sizing: border-box; is not available in wkhtmltopdf,
       so need to subtract padding from height */
	width: auto;
	height: 9.599in;
  }
  body.prod-lit .page:nth-child(1) {
	height: 9.299in;
  }
}