/* ********************************************************************************* */
/* Modul: Shop */
/* ********************************************************************************* */
	
@import url(/module/shop/css/core/checkout.css);
@import url(/module/shop/shop_layout.css?v=3); /* ?v=2 ergänzt*/

@media all {
	/*Bootstrap-Ergänzung:*/
	.flex-even {flex: 1;}/*flexbox-equalwidth*/
	.invisible {display:none;}
	
	/* ShopStatus */
	.statusmsg {
		/*display:none;*/
		width: 100%;
		background-color: rgba(90, 90, 90,.9);
		color:#fff;
		text-align: center;
		padding: 10px 0;
		display:none;
	}
	.msg_center {
		/*position: absolute;
		padding: 15% 0;
		top: 25%;
		z-index: 999;
		*/
	}
	.statusShow {
		display:block;
		-webkit-animation: fadeIn 1s; 
		animation: fadeIn 1s;
	}
	.status_btn {
		background: #fff;
		margin: 0.5rem;
	}
	
	@-webkit-keyframes fadeIn {
	    from { opacity: 0; }
	      to { opacity: 1; }
	}
	@keyframes fadeIn {
	    from { opacity: 0; }
	      to { opacity: 1; }
	}
	/* END ShopStatus */
	

	/* Definition fuer Seitenauswahl/Blaettern in der Artikelliste */
	.art-list-paging {
		/*margin: 0 0 20px 0;*/		
	}
	.art-list-paging .ym-gr {
		/*text-align: right;*/
	}

	.rheumaPagenav .page-link {border-color: transparent;font-size: 13px;color: rgb(206, 6, 17);}

	/* Allgemeine Definitionen fuer die Img-Layers (Bilder zentriert darstellen auf diesen Layern) */
	#shop .img-ly {
		display: inline;
		text-align: center;
		background: #fff;
		display: table;
		padding: 0;
		margin: 0;
	}
	#shop .img-inner-ly {
		width: 100%;
		display: table-cell;
		vertical-align: middle;
		position: relative;
		text-align: center;
	}

	.art-buy input[type="text"] {
		float: left;
		margin: 0 2px;
		border-radius: 0.25em;
		text-align: center;
	}

	#shop .input-plus-minus {
		float: left;
		margin: 0 2px;
		width: 30px;
		height: 33px;
		border-radius: 0.25em;
		border: 2px solid #003349;
		text-align: center;
	}
	
	
	/*Block-Abstände*/
	.checkout, #shopremark, #shopaddress1 {
		margin: 1rem 0;
	}
	
	/*quittung Darstellung desktop*/
	.confirmation-logo {float:right;}
}
@media screen and (max-width: 768px){ 
	#shop #intQuantityInput {width: 80px;}/* td:nth-of-type(3)*/
	/*#basket #guest{bottom: 14.5%;}*/	
	
	.link .pagination {
		justify-content: space-between !important;
	}
	#article .btn-back .d-flex{
		-ms-flex-direction: column !important;
		flex-direction: column !important;
		display: flex;
	}
	#article .btn-back .d-flex .link {
		-ms-flex-order: 2;
		order: 2;
	}
}
@media screen and (max-width: 740px){ 
	/*.btn-text {
		display: none;
	}*/
	.checkout-progress-bar {
		display: none;
	}
	/*input[type="button"], input[type="submit"] {
		width: 100%;
	}*/
	
	#shop .articlelist tbody tr {
		border-bottom: 1px solid #ccc;
		padding: 10px 0;
		display: inline-block;
		width: 100%;
	}
	#shop .articlelist th, #shop .articlelist td {
		padding:0 !important;
	}
	#shop .articlelist  td { 
		border: none; 
		position: relative;
		padding-left: 35% !important;
		/*padding-left: 25% !important;*/
		min-height: 25px;
		display: block;
		
	}
	#shop .articlelist  td:nth-of-type(3) {display: inline-block;width: 100%;}
	#shop .articlelist .priceBig, #shop .articlelist .btn-plus-minus { text-align: left; }
	#shop .articlelist .btn-plus-minus, #shop .articlelist .lnk_basket, #shop .articlelist tbody td[class="art-list-price"] .ym-contain-oh {float:left !important;}
	
	#shop .articlelist  td:before {
		position: absolute;
		top: 0px;
		left: 0px;
		/*width: 45%;*/ 
		padding-right: 10px; 
		/*white-space: nowrap;*/
	}
	#shop .articlelist  td:nth-of-type(1):before { content: attr(data-label);font-weight:bold; } /* Bild */
	#shop .articlelist  td:nth-of-type(2):before { content: attr(data-label);font-weight:bold; } /* Text */
	#shop .articlelist  td:nth-of-type(3):before { content: attr(data-label);font-weight:bold; } /* Anzahl */
	#shop .articlelist  td:nth-of-type(4):before { content: attr(data-label);font-weight:bold;text-align:left; } /* Einzelpreis */
	#shop .articlelist  td:nth-of-type(5):before { content: attr(data-label);font-weight:bold;text-align:right; } /* Gesamtpreis */
	
}

@media screen and (max-width: 576px){ 
	#shop #intQuantityInput {width: 50px;}
	.flex-xs-column-reverse {flex-direction: column-reverse !important;} /*add special class, reordering button*/
	#basket #guest .continue{position: static; padding-top: 1rem;}	
}