@import 'checkout.css';

/* -------------------------------------------------------------------------------------------------------------------- */
/* div#sidebar-left	{ margin-top:10px } */

/* div#prd-content				{ float:right; width:700px; }
 div#product-wrapper		{ float:right; width:600px;background:url(../images/white-bg.png) repeat; padding:40px 50px; border-radius:5px;} */

#order-items 			{ width:100%; margin:0 auto 0 auto; padding:0px; 	}
#order-items OL 		{ float:left; list-style-type:none; margin:0; padding:0; width:100%}
#order-items OL LI	{ float:left; margin:0 0 0 0; padding:0; box-sizing:border-box; width: 100%; border-top:none; position:relative;   }


div#success { position:relative; float:left !important; }

.mobileCap { display:block; font-size:11px; line-height:14px;  font-style:italic;  font-weight:300; }

.art-wrapper 		{ float:left; width:45%; }
.art-thumb   		{ float:left; width:20%; height:120px; padding:0 25px; box-sizing:border-box; margin:0 auto 1rem}
.art-thumb img		{ height:auto!important }

.cart-info{ float:left; width:80%;}

div.art-title		{ float:left;font-weight:normal; margin:0;}

.hItemTitle { float:left; width: calc( 100% - 210px );  font-size:0.95em; }
.hItemTitle a		{  color:#555;}
.hItemTitle a:hover	{ text-decoration:underline; }

div.art-attributes	{ /* float:left; */  margin:15px 0 0 0; color:#aaa; font-size:0.9em;}
 .art-attributes DIV	{ float:left; width:100%;  }

 span.prop		{ float:left; width:auto; min-width:100px; font-weight:normal; padding-right:5px; }
 span.pvalue		{ float:left; }

 .show_more:before { content:"mehr..."; }
 .show_more.active:before { content:"weniger..."; }
 .productdetails { display:none; }
 
 div.deliverytime	{ float:left; margin-top:5px; color:green; }

 .hItemattributes { display:none; }

 span.print-data { float:left; color:#555; margin-top:5px; font-style:italic; }
 span.print-data:before { content:"\f06a"; font-family: FontAwesome; color:#F2BA36; margin-right:3px; font-size:1.4em; font-style:normal; }
 

div.artTaxeRate		{ float:left; width:70px; height:70px; padding-top:40px; text-align:center; color:#f0f0f0; font-size:12px; }


.hItemLine { float:left; width:100%; padding-top:10px; }

.line { float:left; width:100%; padding:10px 0 10px 0;  }

.qntwrapper { position:relative; float:left; width:116px; margin-top:0px; }

.upd-frm		{ float:right; width:auto;text-align:center;  height:40px; }
input.odrqnt		{ position:absolute; left:32px; width: 50px; height:36px; background:#fff; padding:10px; border:2px solid #ccc; text-align:center; }

.addcartitems {  
    background: #ccc; color:#fff;
    cursor: pointer;
    padding: 4px 12px 4px 12px;
    font-weight: normal;
    font-size: 20px;
    position: absolute;
	left:0;
    top: 0;
	margin-top:0px;
	vertical-align:middle;
}

.addcartitems:hover { background:#555; }
.cartplus 		{  left:82px; border-radius:0 5px 5px 0; }
.cartminus 	{ border-radius:5px 0  0 5px; font-weight:700;  padding: 4px 13px 4px 13px; }


.upd-frm i				{ 	cursor: pointer; color:#ccc;}
.upd-frm i:hover	{	color:#957460;}

.hPriceContainer {  position:absolute; width:auto;  right:0; top:5px; }

div.artprice		{ float:left; width:100%;text-align:right; padding-top:0px;}
.artprice small.bp	{ font-size:11px; display:block; line-height:1; }
.artprice .strike  { color:#c0c0c0; text-decoration:line-through; }

.artsumme		{ float:left; width:100%;text-align:right; padding-top:10px; font-weight:700; }


div.delete		{  float:left; width:25%; float:right;text-align:center; padding-top:0px;  }

.delete a {
	display: inline-block;
	background: #ccc;
	color: #fff;
	font-size: 14px;
	padding: 6px 12px 6px 12px;
	border-radius: 5px;
	text-align: center;
}

.delete a:hover { background:#555; color:red;}
.delete i {font-size:1.1em; color:#fff;}
.delete i:hover { color:red/*#957460*/;}

span.wrapart, span.unwrapart	{ position:absolute; right:0; top:70px; width:60px; height:34px; cursor:pointer; padding-left:75px; padding-top:5px }

span.wrapart:hover, span.unwrapart:hover {  text-decoration:underline }
span.unwrapart:hover	{ color:#ca2e16 }

div#total-price		{ width:100%; margin:0 auto 0 auto; padding:0px; box-sizing:border-box; }

form[name="voucherfrm"] label { float:left; width:100%; font-size:12px; }
#voucher				{ display:flex; width: 100%; margin:0 auto 0 auto; text-align:left; border-top:1px solid #ececec; padding:20px 0px; box-sizing:border-box; background:#fff; }
#voucher input		{ float:left;background:#fff; padding:9px 15px 8px 15px; border:1px solid #878786; color:#878786; margin:0; border-radius:5px 0 0 5px; box-sizing:border-box;}

#voucher input#sbmVoucher		{  float:left; margin:0;cursor:pointer; background:#878786; color:#ececec;padding:10px 35px;  border:none;font-family: 'Lato', sans-serif; font-size:1em; transition:all ease 0.3s;box-sizing:border-box; border-radius:0 5px 5px 0;}
#voucher input#sbmVoucher:hover { background:#555; }
input#sbmVoucher:hover { background:#957460;}




#summen TABLE		{ float:right;position:relative; width:100%; border:px solid #ececec; }
td.green			{ color:green; font-weight:normal; font-style:italic }
.doubleline	{ border-top:0px solid #ececec; border-bottom:1px solid #ececec; }
.underline		{ border-bottom:0px solid #ececec }
/*td.sum-total-td { color:#957460 }*/
td.sum-total-td, td.sums-small-td { width:30%; }

#failure, #success { display:inline-block; clear:all; float:none !important; margin:0px auto 10px auto !important; width:100% !important; line-height:1.2; font-size:0.9em; }



.checkout-buttons { margin-top:80px; padding-bottom:30px; }
#ppexpress-wrap { margin:0 auto 0 auto; width:250px; }


#tostart,		
#kasse			{ width:20%; min-width:200px; height:35px;  color:#fff;text-align:center;  line-height:36px;  text-transform:uppercase}

#tostart 			  { background:#707173; display:block; margin:0 auto 0 auto; }
#tostart:hover { background:#957460; }

#kasse{ background:#957460; display:block; margin:20px auto 0 auto;  width:250px; border-radius:5px; }
#kasse:hover { background:#707173;}


.freightweight { display:block; font-size:12px; }

.countrysel { display:block; height:45px; width:230px; border:0px solid #ccc; border-radius:5px; box-shadow: inset 0 0 3px #ddd; position:relative; overflow:hidden; background:#fff; margin-bottom:15px;}
.countrysel ul { list-style:none; margin:0; padding:0; position: absolute; left:1px; top:45px; width:calc(100% - 2px); /* height:200px; */ overflow:auto; background:#fff;  box-shadow: 0 3px 3px #ddd; resize:vertical; }
.countrysel:after { content:"\f107"; font-family:FontAwesome; position:absolute; right:8px; top:10px;  font-size:20px;}

/* .countrysel:hover, */ .countrysel.active { overflow: unset;}
.countrysel ul li { display:block; width:100%; border-bottom:1px dotted #ccc; padding:0 !important; margin:0; position:relative; }
.countrysel ul li label, .countrysel .text { display:block; width:100%; min-height:30px; padding:10px; margin:0; box-sizing:border-box; cursor:pointer; text-align:left; font-size:15px; }
.countrysel ul li label { padding:5px 10px 5px 10px; }
.countrysel ul li label small, .countrysel .text small { font-style:italic; display:inline-block; padding-left:10px; font-size:13px; }
.countrysel ul li input { display:none; }

.countrysel ul li:hover label, .countrysel ul li.selected label, 
.countrysel ul li input:checked + label { background:#fafafa; font-weight:300; }
.countrysel ul li input:checked + label:before { content:"\f00c"; font-family:FontAwesome; position:absolute; right:4px; top:8px; }

.countrysel ul li::before { display:none !important; }


#countrysel-text	{ float:left; position:relative; line-height:26px; width:130px; margin:0 10px 0 0; display:none; }

#shippingSelector { float:right; position:relative; }

#selval, #selval2	{ position: absolute; left:0; line-height:30px; width:200px; padding:0 15px; margin:5px 0; text-align:left; }	

#country_bg	 {
	position: relative;	
	left: 0;
	top: 0;
	width: 200px;
	margin:5px 0;
	height: 30px;
	line-height: 30px;
	border: 1px solid #878786;
	border-radius: 3px;
	cursor: pointer;	
	padding: 0 15px;
	display: block;	
}
	

#country_bg::before {
	content: "\F078";
	font: normal normal normal 16px/1 FontAwesome;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: #707173;
	color: #fff;
	padding: 2px;
	border-radius: 50%;
	display: block;
	transition: 0.5s all ease;
}

#country_bg:hover::before  { background: #957460; }
#country_bg SELECT 	{ position:absolute; cursor:pointer;left:0; top:0;  height:30px;width:100%;  line-height:30px;opacity:0; filter: alpha(opacity = 0); z-index:3;}
#country_bg OPTION 	{ background:#fff;font-family: 'Raleway', sans-serif; font-size: 1em; padding:0 15px;}


@media screen and (max-width:1024px) {
	/* #cart { background:#fff; }  */
	div#failure, div#success { display:block; margin-top:80px !important; }
	
	.checkout-buttons { margin-top:20px; padding-bottom:30px; }
	#shippingSelector  { float:left; }	
	#signin, #ppexpress-wrap { display:inline-block;  width:250px; padding:0; }
	#ppexpress-wrap { position:relative; top:12px; }
	#kasse { margin-top:0; }
	
	/* #checkoutHeader { background: #FAFAFA; position: absolute; left: 0; padding: 15px; } */
	#checkoutHeader h4 { padding:0; text-align:center; margin:0; font-size:1.4em; }	
}
@media screen and (max-width:600px) {
	#shippingSelector { float:left; position:relative; }
	.hItemTitle { font-size:0.80em; }
	#signin, #ppexpress-wrap { display:block;  /* width:100%; */ padding:0; margin:0 auto 0 auto; }
	#signin { margin-top:20px; }
}
@media screen and (max-width:450px) {	
	
	
	.countrysel { margin-bottom:0; }
	/* #cart { padding:0 10px; }	 */
	div#failure, div#success { display:block; margin-top:80px !important; font-size:0.9em; }
	
	.hItemThumb img { max-width:55px; max-height:55px; }
	.hItemTitle { width: calc( 100% - 145px);  padding-bottom:20px; }
	.hPriceContainer { top:5px; }
	.artprice .strike { float:left; width:100%; }
	.artprice, .artsumme { font-size:0.90em; padding:0; }
	
	#voucher { text-align:center; }
	#voucher input		{ clear:both; float:none; width:80%; min-width:250px; margin:0 auto 0 auto; box-sizing:border-box; border-radius:5px;}
	#voucher input#sbmVoucher { clear:both; float:none; margin-top:5px; border-radius:5px; }
	.qntwrapper { width:116px; }
	td.sum-total-td, d.sums-small-td { width:50%; }		
}