/* Andrej: For effective barcode detection video area should be as possible, especially on small iPhone SE screen in portrait mode.
// Also, especially on small mobile screen the modal window should be (at least vertically) scrollable, otherwise important controll elements
// stay hidden below the screen (camera choise button and switch to other mode like scan from image file). Currently solved by forcing "overflow-y: auto !important"
// style of #scanCode directly in html
 */  

#html5-qrcode-button-camera-stop {
	margin: 0 0 2.5rem 0 !important;
}
#scanCode .modal-body {
		max-width: 640px;
		padding: 0 1rem;
	}
	#qr-reader {
		border: none !important;
		border-radius: 1rem;
		overflow: hidden;
		overflow-y: auto;
		height: calc(100vh - 360px);
		background: #fff;
		max-width: 100%;
	}
	#qr-reader__dashboard_section {
		width: 100%;
		padding: 1rem !important;
		text-align: left;
	}
	#qr-reader__dashboard_section_csr > *:nth-child(2) {
		/*display:none;*/
	}
	#qr-reader .html5-qrcode-element  {
		display: block;
		background: no-repeat;
		border: 1px solid #aaa;
		padding: 0.25rem 1rem;
		border-radius: 0.5rem;
		margin: 0.5rem 0;
		text-decoration: none !important;
		width: 100%;
	}
	#html5-qrcode-select-camera[disabled] {
		opacity: 0.4;
	}
	#qr-reader span {
		margin: 0 !important;
	}
	#qr-reader img[alt="Info icon"] {
		top: 8px !important;
		right: 8px !important;
		opacity: 0.5 !important;
		color: #666 !important;
		width: 20px !important;
		height: 20px !important;
		display: none !important;
	}
	@media all and (max-width: 768px) {
		.full #qr-reader__scan_region > video {
			max-height: 45vh;
			margin: 0 auto;
			border-radius: 1rem;
			overflow: hidden;
		}
		.full .modal-dialog {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			transform: none !important;
			margin: 0;
			border-radius: 0 !important;
			max-width: 100vw;
		}
		.full .modal-header .close {
			font-size: 2.5rem;
			position: absolute;
			top: 0.5rem;
			right: 0.75rem;
		}
		.full .modal-content {
			border-radius: 0;
			height: 100%;
		}
		.full .modal-body {
			width: 100vw;
			height: calc(100vh - 120px);
			max-height: unset;
			padding: 0rem !important;
		}
		.full .modal-footer {
			padding: 0.8rem 1rem;
			position: fixed;
			bottom: 0.5rem;
			left: 0;
			right: 0;
		}
		.full .modal-footer .btn {
			width: 100%;
			padding: 0.5rem;
			font-size: 1.25rem;
			margin: 0;
		}
		#qr-reader {
			/*max-height: 30vh;*/
			height: auto;
			border-radius: 0;
		}
}
	@media all and (max-width: 480px) {
		
		#qr-shaded-region {
			border-width: 50px 85px !important;
		}
		[class^="p6-icon-"], [class*=" p6-icon-"] {
			font-size: 2rem;
		}
	}


.search-input-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid rgba(0,0,0,.1);
	box-shadow: inset 3px 3px 0 rgba(0,0,0,.1);
	border-radius: 0 0.5rem 0.5rem 0;
	flex: 15;
	padding: 0 0.5rem;
	gap: 0.25rem;
}
#search-input.form-control {
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0 !important;
}

#search-panel .row form button {
	position: relative;
	transform: none;
	border: none;
	background: none;
	padding: 0;
	color: #999;
	right: auto;
	top: auto;
	display: contents;
	font-size: 1.5rem;
}
.btn.reduced {
	position: relative;
	text-decoration: line-through !important;
}
.btn.reduced::before {
	content: attr(data-reduced);
	position: absolute;
	top: -1.25rem;
	right: -0.5rem;
	color: #fc7c00;
	font-weight: bold;
	font-size: 0.7rem !important;
	background: #fff;
	border-radius: 0.5rem;
	border: 1px solid #fc7c00;
	padding: 0.25rem .5rem;
	text-decoration: none !important;
	text-transform: none;
}
#article-section h3 {
	text-align: left;
}
#cartModal .btn.no-premium, #cartModal .btn.premium {
	border:none;
	display: inline-block;
	padding: 0.4rem 1rem;
	margin-bottom: 1rem;
}
#cartModal .btn.no-premium {
	color:#fc7c00;
}
#cartModal .btn.no-premium::before {
	display: none;
}
#cartModal .btn.premium {
	color:#fff;
	background:#fc7c00;
	font-weight:500;
}
#cartModal .modal-body .cover-flags {
	display: none;
}
#cartModal .modal-body h1,
#cartModal .modal-body h2 {
	margin-right: 0.5rem;
}
#cartModal .modal-body .col-sm-15 {
	width: 18%;
}
#cartModal #search-panel .list-group-item {
	padding: .5rem 0;
	background: none;
	border-bottom: none;
	margin: 0;
}
#cartModal #search-panel .col-xs-8.col-sm-9::after {
	content: "wurde deinem Warenkorb hinzugefügt";
	display: block;
	font-size: 1.5rem;
	font-weight: 200;
	margin: -1rem 0 0 0;
}
#cartModal #search-panel span.icon_check_alt2 {
	font-size: 3rem;
	position: absolute;
	top: 35%;
	right: 0;
	transform: translateY(-50%);
	color: #999;
	z-index:2;
}
#cartModal .well {
	box-shadow: none;
	border: none;
	border-radius: 0.5rem;
	margin: 0;
	background: #f5f5f5;
}
#cartModal .well h3 {
	margin-top: 0;
}
#cartModal .modal-header {
	display: none !important;
}
#cartModal #search-results.list-group {
	margin-bottom: 0.5rem;
}
#cartModal .modal-footer {
	padding: 10px 15px;
}
#article-in-basket>div:nth-of-type(2)>p {
	display: none;
}

@media (max-width: 600px) {
	#cartModal .modal-footer .btn {
		width: 100% !important;
	}
	#cartModal .modal-body {
		overflow: visible !important;
	}

	#cartModal .modal-body .well img {
		display: none;
	}
	#cartModal #search-results .list-group-item .row [class*=col-]:nth-child(2) {
		padding: 0;
		overflow: visible !important;
		height: auto !important;
	}
	#cartModal #search-panel span.icon_check_alt2 {
		top: 7%;
		right: -4%;
		font-size: 2.5rem;
	}
	#cartModal #search-panel .list-group-item {
		overflow: visible;
	}
}