/* CSS for the Cart Features */ 

/*	Core Overrides
	--------------------------------------------------- */
	#header .inner {
		position: relative; 
	}
	
	.selectbox-options {
		text-align: left; 
	}
	
	/* Remove up/down "spinners" from input[type=number] */ 
	
	input[type=number],
	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button { 
	  -webkit-appearance: none; 
	  appearance: none; 
	  margin: 0; 
	}	

	.icon.cart {
		display: inline-block; margin: 0px; padding: 0px; 
		box-sizing: border-box; 
		position: relative; top: -1px; 
		width: 20px !important; height: 20px !important;
		vertical-align: middle;  
		background-position: center center; 
		background-size: contain; 
		background-repeat: no-repeat; 
		background-color: transparent; 			
		background-image: url('../svg/icon-cart-white.svg'); 
	}
	

/*	Header - app.jsx
	--------------------------------------------------- */
	
a#quote-list {
	display: inline-block; 
	/*
	border: 1px solid #56afff; 
	*/
	margin: 0px 10px;
	margin-right: 0px; 
	color: #fff !important; 
	line-height: 100%; 
	font-size: 0.9rem; 
}

/*	Cart Summary 
	--------------------------------------------------- */ 
#cart-summary {
	
	visibility: hidden; 
	opacity: 0; 
	-webkit-transition: all 500ms ease-in-out 0s;
	transition: all 500ms ease-in-out 0s;		

	width: 100%; 
	max-width: 400px; 
	height: auto; max-height: 75vh;  
	position: absolute; 
	top: 28px; 
	right: 0px; 
	z-index: 300000; 
	background-color: #fff; 
	border: 1px solid #c5c5c5; 
	border-top: 1px solid #55afff; 
	background-color: #fff; 
	line-height: 100%; 
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);	
}
	#cart-summary.active {
		visibility: visible; 
		opacity: 1; 
	}

	h3.cart-summary-title {
		position: relative; 
		display: block; margin: 0px; padding: 0px; 
		width: 100%; box-sizing: border-box; 
		color: #fff; 
		background-color: #55afff;
		padding: 10px; 
		line-height: 100%;
		font-size: 1.5rem;   
		position: relative; top: -1px; 
	}
		.cart-summary-title .icon.close {
			right: 5px; 	
			top: 50%;
			position: absolute;  
			-webkit-transform: translateY(-50%); 		
			transform: translateY(-50%); 		
		}


	div.cart-products {
		padding: 10px;
		display: block; box-sizing: border-box;  
		/*
		height: 250px; 
		*/
		background-color: #fff; 
		height: calc(75vh - 250px);
		position: relative; 
	}
		.cart-products::after {
			display: block; content: ""; 
			position: absolute; bottom: -10px; left: 0px; 
			width: 100%; 
			background-color: transparent; 
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.25+100 */
			background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-9 */
			z-index: 1000; 
			height: 25px; 
			opacity: 0.35; 
		}

		.cart-products.cart-empty {
			height: 75px;
			font-size: 1.2rem;  
			text-align: center; 
			font-weight: bolder; 
		}
		.cart-products.cart-empty::after {
			display: none; 
		}
		.cart-empty-text {
			display: block; width: 100%; padding: 10px; 
			box-sizing: border-box; 
		}


		.cart-products ul {
			overflow: auto; height: 100%; 
			list-style-type: none; padding: 0px; margin: 0px; 
		}

		.cart-products ul > li {
			margin-top: 20px; 
		} 
		/*
		.cart-products ul > li:first-child {
			margin-top: 0px; 
		}
		*/

		.cart-products ul.hidden {
			display: none; 
		}

		.cart-products .product-image {
			width: 100px; height: 100px; 
		}

		.cart-products .product-meta {
			width: calc(100% - 200px); 
		}

		.cart-products .product-actions {
			width: 100px;  
			text-align: center; 
		}	
		
			.product-actions #cart-feature-quantity{
				margin-bottom: 5px !important; 
			}

			.product-actions .product-price {
				margin-top: 5px;
				display: block; clear: both; 
				text-align: center;  
			}		

	div.cart-actions {
		display: block; clear: both; width: 100%; box-sizing: border-box;
		padding: 10px;
		text-align: center; 
		font-size: 1.5rem;  
		background-color: #fff;  
	}
		.cart-actions.hidden {
			display: none; 
		}
		.cart-actions span {
			display: block; clear: both; width: 100%; box-sizing: border-box; 
			padding: 15px 0px; 
		}
			.cart-actions .actions-subtotal {
				text-transform: uppercase; 
				font-size: 0; 
				border-top: 1px solid #c5c5c5; 
			}
				.actions-subtotal .col {
					width: 50%; 
					display: inline-block; clear: none; 
					font-size: 1.2rem; font-weight: 800; 
					text-align: left; 
					padding: 5px 0px; 
				}
				.actions-subtotal .col:last-child {
					text-align: right; 
				}

		.cart-actions .actions-checkout {
			background-color: #55afff;
			text-transform: uppercase; 
			color: #fff; 
			display: block; width: 100%; line-height: 100%; 
			padding: 12px; 
			font-size: 1.5rem; font-weight: 800; 
		}
			.actions-checkout a {
				color: #fff; text-decoration: none; 
			} 

			span.actions-quotelist,
			span.actions-quotelist a {
				font-size: 1.2rem; 
				text-decoration: underline; 
			}



/* 	Product Detail Page - product.jsx
	---------------------------------------------------- */ 

#cart-features.disabled p,
#cart-features.disabled #cart-feature-quantity * {
	opacity: 0.50; 
	cursor: default !important; 
}


#cart-features p {
	margin: 0px; padding: 0px; 
	padding: 0px 17px; /* Fake centre align with quantity */ 
}
#cart-feature-add {
	display: block; width: 100%; clear: both;  
	line-height: 100%; font-size: 1rem; 
}

#cart-feature-add a {
	border: 1px solid #00afff; padding: 10px 20px; box-sizing: border-box;
	background-color: #00afff; color: #fff; text-transform: uppercase; 
	line-height: 100%; font-size: 1rem; 
	display: inline-block; 
}

#cart-feature-add a.disabled {
	border: 1px solid #999999;	
	background-color: #999999;
	cursor: default !important; 
}



#cart-feature-quantity {
	height: 22px; 
	display: inline-block; color: #000; 
	font-size: 0;
	white-space: nowrap; 
	vertical-align: middle; 
	padding: 10px 0px; padding-bottom: 20px; 
}


.qty-button {
	display: inline-block; width: 20px; height: 20px;
	box-sizing: border-box;
	background-color: #dedede; 
	border: 1px solid #dedede; 
	color: #000; 
	vertical-align: middle; 
	line-height: 20px; 
	text-align: center; 
	font-size: 1rem; 
	font-style: normal; 
	cursor: pointer !important; 
}

	input[name="product_qty"] {
		border: 1px solid #dedede; 
		font-size: 1rem; 
		width: 50px; height: 20px; 
		vertical-align: middle; 
		padding: 0px !important; 
		text-align: center; 
	}
	
	
/*	Main Cart (Page) - cart.jsx
	----------------------------------------------- */ 

.cart-wrapper {
	padding-bottom: 40px; 
}	

#quote-list-container {
	display: block; width: 100%; max-width: 800px; margin: 0px auto; 
	text-align: center; 
}

#quote-list-container h1 {
	display: block; width: 100%; text-align: center; 
	text-transform: uppercase; 
	padding: 40px 20px; font-weight: bolder; 
	font-size: 2.4rem; 
	box-sizing: border-box; 
}	




ul#cart-products {
	display: block; clear: both; 
	list-style-type: none; margin: 0px; padding: 0px; 
	box-sizing: border-box; 
}

ul#cart-products li {
	margin-top: 20px; 
	display: block; width: 100%; clear: both; 
	box-sizing: border-box; 
}


ul#cart-products li:first-child {
	margin-top: 0px; 
	font-weight: bolder; 
	text-align: center; 
}

ul#cart-products li > span {
	display: block; clear: both; 
}
	#cart-products li > span.product-quantity {
		font-size: 2rem; 
	}
	
	#cart-products li.colgroup {
		display: block; width: 100%; box-sizing: border-box; 
		clear: both; 
		font-size: 0; vertical-align: top; 
	}
	
	#cart-products li > span.col {	
		display: inline-block; 
		font-size: 1rem; 
		box-sizing: border-box; 
	}
	
		#cart-products li > span.product-image {
			width: 200px; 
		}
			li > span.product-image img {
				max-width: 100%; 
			}
			
		#cart-products li > span.product-meta {
			width: calc(100% - 300px); 
			padding: 20px 40px 0px 0px; 
			text-align: left; 
		}
		
		#cart-products li.product-header-row  > span.product-meta {
			padding-top: 0px; 	
		}
		
		
			li > span.product-meta span {
				display: block; clear: both; 
				margin-top: 10px; 
			}
			li > span.product-meta span:first-child {
				margin-top: 0px; 
				font-weight: bolder; 
			}
			
		#cart-products li > span.product-actions {
			width: 100px; text-align: center; 
		}
		
			li > span.product-actions a,
			li > span.product-actions span {
				display: inline-block; clear: both; 
			}
				span.product-actions #cart-feature-quantity {
					display: block; width: 100%; clear: both; 
					margin-bottom: 15px; padding: 0px; 
				}
		


	a#pdf-download-btn {
		background-color: #56aefd; color: #fff; text-align: center; 
		text-transform: uppercase; 
		padding: 10px 15px; display: inline-block; margin: 20px auto; 
	}
	
	
	
#salesrep-finder {
	text-align: center; 
	padding: 10px; padding-bottom: 30px; 
	margin: 40px auto; 
}

	ul#buy-sales-search {
		display: inline-block; margin: 0px auto; list-style-type: none; 
		font-size: 0; 
		width: 100%; text-align: center; 
		background-color: #efefef; 
		padding: 20px 0px; padding-top: 30px; 
	}
	
	ul#buy-sales-search > li {
		display: inline-block; 
		font-size: 1rem; 
		vertical-align: top !important; 
		margin-left: 20px; 
		width: 175px; 
	}
		ul#buy-sales-search > li:first-child {
			margin-left: 0px; 
		}
		
		ul#buy-sales-search > li button {
			height: 100%; width: 100%; 
			padding: 9px 10px; /* Fake alignment with other <li /> */ line-height: 100%; font-size: 1rem; 
		}
		
		
		#buy-sales-results {
			padding: 20px 10px; 
			text-align: left; 
		}
		
		
		.results-company:nth-child(1) hr {
			display: none; 
		}
		
		
		.results-company ul {
			margin: 0px auto; padding: 0px; 
			list-style-type: none; 
			font-size: 0; 
		}
		.results-company ul li {
			font-size: 1rem; 
			vertical-align: top; 
			text-align: left; 
			margin-bottom: 20px; 
		}
		.results-company ul li > span {
			display: block; width: 100%; clear: both; 
		}
		.results-company ul li > span:first-child {
			font-weight: bolder; 
		}
		
/*	Modal
	---------------------------------------- */ 
	
	
	.cart-modal {
		-webkit-border-radius: 0; 
		border-radius: 0; 
	}
	
	.cart-modal h3 {
		display: block; width: 100%; background-color: #eaeaea; 
		position: relative; box-sizing: border-box; 
		padding: 10px 15px; 
		height: auto; 
		text-align: center; 
	}
	
		.cart-modal a.modal-close {
			-webkit-border-radius: 0; 
			border-radius: 0; 
			border: 0; 
			background-color: transparent; 
			width: 20px; height: 20px; 
			position: absolute;
			top: 30px;
			right: 0px; 
			/*
			-webkit-transform: translateY(-50%); 
			transform: translateY(-50%); 
			*/
		}
		
		.cart-modal a.modal-close::before,
		.cart-modal a.modal-close::after {
			display: block; width: 100%; 
			height: 3px; background-color: #000; 
			position: absolute;
			content: ""; 
			-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			-webkit-transform: translate(-50%,-50%) rotate(45deg); 
			transform: translate(-50%,-50%) rotate(45deg); 
		}
		.cart-modal a.modal-close::after {
			-webkit-transform: translate(-50%,-50%) rotate(-45deg); 
			transform: translate(-50%,-50%) rotate(-45deg); 
		}
		
		.cart-modal .modal-close span {
			display: none; 
		}
		
		.cart-modal .modal-wrapper {
			-webkit-border-radius: 0; 
			border-radius: 0; 
			-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
			box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);			
		}
		
		.cart-modal .modal-content {
			box-sizing: border-box; 
			padding: 15px; 
		}
		
		.cart-modal .modal-content .colgroup {
			display: block; width: 100%; font-size: 0; 
			vertical-align: top; 
			box-sizing: border-box; 
		}
		
		table.cart-contents {
			font-size: 1rem; 
			width: 100%; 
			line-height: 120%; 
		}
		
		table.cart-contents td, 
		table.cart-contents th {
			vertical-align: top; 
			text-align: center; 
		}
			th.cart-product-title,
			td.cart-product-title {
				text-align: left !important; 
			}
			
		
			table.cart-contents span {
				display: block; clear: both; width: 100%; 
			}
			table.cart-contents span.cart-product-model {
				font-weight: bolder; 
			}

			th.cart-product-model,
			td.cart-product-model {
				width: 120px; 
			}

			th.cart-product-model img,
			td.cart-product-model img {
				max-width: 100%; 
			}


		div.cart-modal-actions {
			text-align: right; 
		}
		
		div.cart-modal-actions a {
			margin-left: 20px; 
		}

		div.cart-modal-actions a:first-child {
			margin-left: 0px; 
		}

			a.cart-modal-btn {
				display: inline-block; box-sizing: border-box; 
				padding: 5px 15px; 
				border: 1px solid #02affc; 
				color: #02affc; 
				font-size: 1.2rem; 
				margin-left: 0px; 
			}

			a.btn-cart {
				background-color: #02affc; 
				color: #fff; 
				text-decoration: none; 
			}
			a.btn-cart:hover {
				text-decoration: none; 
			}
			
			a.cart-reset {
				display: block; width: 100%; text-align: center; 
				box-sizing: border-box; padding: 20px; 
			}
			
			
/*	RWD
	------------------------------------------------ */ 
	



	@media all and (max-width: 880px) {
	
		.quote-list {
			background-color: #56afff !important; 
			color: #fff !important; 
		}
			.quote-list a {
				background-color: transparent !important; 
			}

	}

	@media all and (max-width: 840px) {
		#cart-summary {
			top: 70px
		}
	}	

	@media all and (max-width: 740px) {
		#cart-summary {
			width: 100%; max-width: 100%; 
		}
	}	
	
	
	@media all and (max-width: 600px) {
		#cart-features {
			text-align: center;
			padding-top: 40px; 
		}
		
		.results-company ul li {
			width: calc(100% / 2); 
			box-sizing: border-box; 
			padding: 10px; 
		}
	}
	
	
	@media all and (max-width: 550px) {
		#cart-products li.product-header-row {
			display: none; 
		}
		#cart-products li span.col {
			display: block; width: 100%; clear: both; 
			text-align: center; 
		}
			#cart-products li span.product-meta {
				padding: 15px; 
			}
			#cart-products li span.product-image {
				max-width: 200px; margin: 0px auto; 
			}

		div.cart-modal-actions {
			text-align: center !important; 
		}
	}
	
	@media all and (max-width: 450px) {
		.results-company ul li {
			width: 100%; max-width: 320px; margin: 0px auto;  
			box-sizing: border-box; 
			padding: 10px; 
		}

		#cart-summary {
			position: fixed;
			top: 0px; 
			left: 0px; 
			width: 100vw; 
		}
			.cart-summary-title {
				height: 45px;
			}
			.cart-actions {
				height: 180px; 
			}
			.cart-products {
				height: calc(100vh - 225px) !important; 
			}
	}

	@media all and (max-width: 400px) {
		ul#buy-sales-search {
			display: block; width: 100%; padding: 0px; 
			margin-top: 30px; 
			text-align: center; 
		}
			ul#buy-sales-search > li {
				display: block; width: 100%; max-width: 300px; 
				margin: 5px auto !important; 				
			}
	}

	@media all and (max-width: 350px) {
		div.cart-modal-actions a {
			margin-bottom: 10px; 
		}
		div.cart-modal-actions a:first-child {
			margin-top: 20px; 
		}
	}