/**
	The main file for the CURRENT THEME
	Here we should put the general classes for the CURRENT THEME
*/
@charset "utf-8";


.material-icons {
	font-family: 'Material Icons';
}

body {
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	line-height: 1.2;
}

/** Buttons */

.btn {
	border-radius: 0 !important;
}

/* ----- variant selectors ----- */
div.componentStockWrapper {
	min-height: 2em;
}

/* ----- buyindicator ----- */
div.buyIndicator {
	position: fixed;
	left: 0;
	right: 0;
	top: 20%;
}

div.buyIndicator div.content {
	background-color: #000;
	opacity: 1;
	padding: 2em 3em;
	text-align: center;
	color: #fff;
}

/* ----- QUANTITY PICKER -----*/
.quantity-picker {
	margin-left: 3px;
	margin-right: 1px;
}

/* ----- REQUIRED INPUT -----*/
div.requiredInput.postbasket {
	padding: 1em 2%;
}

div.requiredInput.postbasket>ol {
	position: relative;
	overflow: hidden;
}

div.requiredInput.postbasket>ol>li {
	clear: both;
	overflow: hidden;
	margin-bottom: 3px;
}

div.requiredInput.postbasket div.border {
	position: absolute;
	width: 70%;
	top: 0;
	bottom: 0;
	right: 0;
}

div.requiredInput.postbasket a.formSelector {
	width: 30%;
	float: left;
	position: relative;
	text-align: left;
	border: none;
}

div.requiredInput.postbasket li.invalid a.formSelector {
	background-color: #a00;
}

div.requiredInput.postbasket li.ok a.formSelector {
	background-color: #080;
}

div.requiredInput.postbasket a.formSelector img {
	display: inline-block;
	padding: 0 0.3em 5px 0.7em;
	vertical-align: bottom;
}

div.requiredInput.postbasket li.selected.invalid a.formSelector {
	background-color: #c00;
}

div.requiredInput.postbasket li.selected.ok a.formSelector {
	background-color: #0a0;
}


div.requiredInput.prebasket div.formElements {
	margin-left: 0;
}

div.requiredInput.prebasket div.formElement {
	margin-bottom: 0.7em;
}

div.requiredInput.prebasket {
	margin: 0;
	padding-bottom: 20px;
}

div.infowrapper div.productActions~div.requiredInput {
	border-bottom: 5px solid #eee;
}

div.requiredInput div.formElement.marginbefore {
	margin-top: 2em;
}

div.requiredInput div.formElement.marginafter {
	margin-bottom: 2em;
}

div.prebasket a.basketNext.button {
	width: 50%;
}

@media screen and (max-width:700px) {
	div.requiredInput.postbasket div.formElement:nth-child(4n+3) {
		margin-bottom: 0.7em;
	}
}

@media screen and (max-width:550px) {
	div.requiredInput.postbasket div.formElement:nth-child(4n+3) {
		margin-bottom: 2em;
	}
}

@media screen and (max-width:450px) {
	div.requiredInput.postbasket div.formElement:nth-child(4n+3) {
		margin-bottom: 0.7em;
	}
}

div.requiredInput div.above {
	margin-bottom: 0.1em;
}

div.requiredInput.postbasket div.actions {
	text-align: right;
	margin: 0.7em 0 0 0;
}

div.requiredInput.postbasket a.nextForm {
	width: 47%;
	min-width: 4em;
	display: inline-block;
	border: none;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

div.requiredInput label {
	margin-bottom: 0;
}

div.requiredInput label.validationtext b {
	background-color: #c00;
	color: #fff;
	padding: 5px 10px;
	display: block;
	margin-top: 0.7em;
}


@media screen and (max-width:550px) {
	div.requiredInput.postbasket form.submit a.basketNext {
		width: 100%;
	}

	div.requiredInput div.formElements {
		margin-left: 0;
	}

	div.requiredInput.postbasket a.formSelector {
		width: auto;
		float: none;
	}

	div.requiredInput.postbasket div.border {
		display: none;
	}

	div.requiredInput.postbasket div.requiredInputForm {
		float: none;
		width: auto;
		position: static;
	}

	div.requiredInput.postbasket div.actions {
		display: none;
	}
}

div.requiredInputForm div.formElement.hidden {
	display: none;
}

div.reqGrid>.span0on1 div.reqGrid>.span0on2 {
	display: inline-block;
}

/* block in label, change later*/
label.qField.list {
	padding-left: 0;
	padding-right: 0;
}

/* Clickcollect  */
div.productActions a.clickCollect {
	margin-top: 0.5em;
	height: 100%;
}

div.clickCollectDialog i.back {
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	cursor: pointer;
}

@media only screen and (max-width: 767px) {
	.qGrid2:not(.no1col)>* {
		flex-basis: calc(100%);
	}
}




/*#region Simplebar */
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
	height: 9px;
}

/*#endregion*/

/* animation frames */
@-webkit-keyframes fadeInFromNone {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}

@-moz-keyframes fadeInFromNone {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}

@-o-keyframes fadeInFromNone {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}

@keyframes fadeInFromNone {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}

@keyframes heart {
	0%,
	15% {
		font-size: 0;
	}
}

/* ----- General page layout ----- */
.elementwrapper {
	padding: 1em;
	background-color: var(--main-elements-background-color);
	box-shadow: var(--box-shadow);
}

.componentwrapper {
	margin-bottom: 1em;
}

div.qDropdown li.active a,
.button {
	color: var(--secondary-text-color);
	fill: var(--secondary-text-color);
	background-color: var(--main-link-color);
}

.verticalWrapper {
	display: flex;
	width: 100%;
	flex-direction: column;
}


/* ---- Front layout ----- */
#PageWrapper {
	position: relative;
}

#PageWrapper .pageContent {
	max-width: 100%;
}

#PageWrapper .pageContent>.wrapper>*:not(.articlebanner):not(.imagebanner):not(.articlecarousel) {
	max-width: 1200px;
	margin: 0 auto 0 auto;
}


#PageWrapper .pageContent .readmore {
	margin-top: 1em;
	text-align: left;
}


div.textIconWrapper span.icon {
	float: left;
	line-height: 1em;
	height: 1.5em;
	text-align: center;
	background-color: var(--main-color);
	color: var(--header-text-color);
	fill: var(--header-text-color);
	margin-right: .25em;
	font-size: 3em;
	top: 0;
	padding: .2em;
}

div.textIconWrapper span.icon i {
	margin: 0 !important;
	font-style: normal !important;
}

div.textIconWrapper span.icon svg.icon {
	margin-right: 0;
	top: 0;
}

div.textIconWrapper.small span.icon {
	line-height: 2.5rem;
	height: 2.5rem;
	width: 2.5rem;
	font-size: 2rem;
}


div.textIconWrapper.large span.icon {
	line-height: 7.5rem;
	height: 7.5rem;
	width: 7.5rem;
	font-size: 5rem;
}

div.textIconWrapper.xlarge span.icon {
	line-height: 10rem;
	height: 10rem;
	width: 10rem;
	font-size: 7.5rem;
}

div.textIconWrapper h4,
div.textIconWrapper h5 {
	display: block
}

/* ! Front layout */

/* ---------- Cart -------- */
div.pricewrapper>span {
	display: block;
}

/*TODO: Remove this rule later, and change orderhistory price columns to use the price template*/
div.pricewrapper>span>span {
	margin-left: .25em;
}

div.discountwrapper>span:last-of-type {
	margin-left: .5em;
}

/* ------ item ------ */
p.reqInstruction {
	font-weight: 400;
	font-size: 1rem;
}

label.qLine {
	width: 100%;
	display: block;
	border-top: 1px solid;
	text-align: center;
	border-color: #ddd;
	height: 0.7em;
	margin-top: 0.5em;
}

label.qLine>b {
	background-color: white;
	position: relative;
	top: -0.7em;
	display: inline-block;
	padding: 0 1em;
}

label.disabled b {
	color: #aaa;
	font-size: 1rem;
}

label.qField input {
	top: 0;
}

label.qField.invalid input {
	width: calc(100% - 1em);
	right: 30px;
}


/* --- clickcollect --- */
div.clickCollectDialog p {
	margin-bottom: 1em;
}

div.clickCollectDialog div.login>div {
	padding: 0;
	box-shadow: none;
}

div.clickCollectDialog .loginContent .bottomButtons>div:nth-of-type(2)>a {
	display: none;
}

/* --- inforequest --- */
div.inforequestform .productinfo {
	margin-bottom: .5em;
}

textarea {
	width: calc(100% - 1em);
}

div.cookieWarning a,
div.cookieWarning a.readmore {
	color: var(--main-color);
}

.order-deliverydate .confirmed {
	color: darkgreen;
	fill: darkgreen;
	font-weight: bold;
}

.order-deliverydate .unconfirmed {
	color: crimson;
	fill: crimson;
	font-weight: bold;
}

/* Hide all elements except table */
div.subpage>div {
	margin-bottom: 1em;
}

/* --- Proviso ------ */
div.proviso.static {
	text-align: center;
}

/* --- ! Proviso ------ */
form.searchStrip label.qField.search.focused b {
	display: none;
}

div.sublists div.productgrid div.listhead {
	display: none;
}

/* Partstream */
div.partstreamcontainer div.loading {
	width: 100%;
	min-height: 50px;
	text-align: center;
}

div.partstreamcontainer div.loading div.qProgress {
	inset: 0px;
	top: 20em;
}

.message>h3 {
	color: inherit;
	margin-bottom: 1em;
	font-weight: bold;
}

/* ----- infomessage box ------ */
#infoMessageBox h1:empty {
	display: none;
}

#infoMessageBox li {
	list-style: none;
}

#infoMessageBox li.error .fal {
	font-weight: bold;
	color: darkred;
}

#infoMessageBox li.success .fal {
	font-weight: bold;
	color: darkgreen;
}

/* ---- text area ----- 
	Trying to make it as close to the CKEditor as possible
*/
/* ----- !text area ---- */

/* aligning bottom buttons for smaller devices */
@media screen and (max-width: 976px) {
	div.bottomButtons {
		justify-content: space-around;
	}
}


/** mobile AND table devices */
@media screen and (max-width: 768px) {
	body {
		/* prevent collapse causing body to move down and reposition leafmenu */
		padding-top: 0.01px;
	}

	div.infosplit div.icon,
	div.infosplit div.image {
		display: none;
	}

	div.presentation div.card div.cardcontent {
		padding: .5em;
		margin: 0;
		top: .5em;
		left: 0;
		max-height: calc(100% - 1.5em);
		overflow: hidden;
	}

	div.bottomButtons {
		margin: 0 0 30px 0;
	}

	div.bottomButtons>* {
		margin-bottom: 5px;
	}

	a.basketNext.button {
		width: 100%;
	}
	/**** checkout *****/
}

/* Smalles devices ( 480px )*/
@media screen and (max-width: 480px) {
	.elementwrapper {
		padding: .5em;
	}

	div.presentation div.card div.cardcontent {
		padding: .5em;
	}

	div.wrapper div div.message {
		margin-right: 0;
	}

	div.qModal {
		padding: 0.5em;
		z-index: 10000 !important;
	}
}

/* align shipping cost to right */
.shipping.qGroup a,
.payment.qGroup a {
	width: 100%;
}

/* qModal */
.qModal {
	max-width: 700px;
}

.qModal .buy a {
	border: none;
	margin-bottom: 1em;
	font-size: 1.25em;
	display: flex;
	justify-content: center;
}

.qModal .buy a svg.icon {
	margin-right: .3rem;
}

/* qmodal buy & click and hent buttons */
.qModal a.buyButton,
.qModal a.clickCollect {
	padding: 1.2rem;
}

.qModal a.buyButton span,
.qModal a.clickCollect span {
	font-size: 1.25rem;
	padding-left: .5rem;
	padding-top: .25rem;
}

/* novariant block */
.novariant-block {
	background-color: rgb(235, 235, 235);
	padding: 0.5rem;
}

.table-fixed {
	table-layout: fixed;
}

/* popup qgallery buttons - START */
.center-flex div.qGallery-left-button svg.icon,
.center-flex div.qGallery-right-button svg.icon {
	width: 0.8em;
	height: 0.8em;
}

.center-flex div.qGallery-left-button,
.center-flex div.qGallery-right-button {
	fill: var(--main-link-color);
}

.center-flex:hover div.qGallery-left-button,
.center-flex:hover div.qGallery-right-button {
	background-color: var(--main-link-color);
	fill: var(--secondary-text-color);
}

.center-flex:hover div.qGallery-left-button svg.icon,
.center-flex:hover div.qGallery-right-button svg.icon {
	fill: var(--secondary-text-color);
}
/* popup qgallery buttons - END */


/* header right buttons - START */
.headerRightButton,
.headerRightButton img {
	height: 6rem;
	width: 6rem;
	margin:0 .25rem;
}
.headerRightButton img {
	margin: 0;
	object-fit: contain;
}

@media screen and (max-width: 480px) {
	.headerRightButton,
	.headerRightButton img {
		height: 3rem;
		width: 3rem;
	}
}
/* header right buttons - END */

/* Hide Google reCaptcha badge */
.grecaptcha-badge { 
	visibility: hidden;
}

/* spinner */

.spinner {
	-webkit-animation: rotator 1.4s linear infinite;
	animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
}

@keyframes rotator {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
}

.path {
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
	animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
	0% {
		stroke: #4285F4;
	}
	25% {
		stroke: #DE3E35;
	}
	50% {
		stroke: #F7C223;
	}
	75% {
		stroke: #1B9A59;
	}
	100% {
		stroke: #4285F4;
	}
}

@keyframes colors {
	0% {
		stroke: #4285F4;
	}
	25% {
		stroke: #DE3E35;
	}
	50% {
		stroke: #F7C223;
	}
	75% {
		stroke: #1B9A59;
	}
	100% {
		stroke: #4285F4;
	}
}

@-webkit-keyframes dash {
	0% {
		stroke-dashoffset: 187;
	}
	50% {
		stroke-dashoffset: 46.75;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	100% {
		stroke-dashoffset: 187;
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg);
	}
}

@keyframes dash {
	0% {
		stroke-dashoffset: 187;
	}
	50% {
		stroke-dashoffset: 46.75;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	100% {
		stroke-dashoffset: 187;
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg);
	}
}

div.spinner-cont {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	-webkit-transition: all 600ms ease-in-out;
	-moz-transition: all 600ms ease-in-out;
	-ms-transition: all 600ms ease-in-out;
	-o-transition: all 600ms ease-in-out;
	transition: all 600ms ease-in-out;
	z-index: 1021;
}

div.spinner-cont > div {
	background-color: rgba(255, 255, 255, 0.6);
	opacity: 1;
	padding: 2em 3em;
	text-align: center;
	color: #000;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	font-weight: 900;
}

.form-row:has(input:required) label::after {
	content: "*";
	color: red;
}

.custom-control input[type="checkbox"] {
	z-index: 1;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	cursor: pointer;
}


#productCarousel .list-inline {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

#productCarousel .carousel-indicators {
	position: static;
	left: initial;
	width: initial;
	margin: 10px 0 0 0;
	padding: 4px 0;
	justify-content: flex-start;
	
}

#productCarousel .carousel-indicators > li {
	width: initial;
	height: initial;
	text-indent: initial;
	background-color: #fff;
}

#productCarousel .carousel-indicators > li img {
	max-width: 70px;
	border: 1px solid #ccc;
}

#productCarousel .carousel-indicators .list-inline-item:first-child {
	/* margin-left: 30px; */
}

#productCarousel .carousel-indicators > li.active img {
	/* opacity: 0.7; */
	box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.4);
	border: 1px solid #999;
}

#productCarousel .carousel-control-prev-icon,
#productCarousel .carousel-control-next-icon {
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2,Color='#444')";
	-webkit-filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.7));
	filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.7));
}

#productCarousel.carousel {
	height: auto;
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='%23fff'%3E%3Cpath class='cls-1' d='M8.79,12,7,10.47,10,7H0V5H10L7,1.47,8.79,0,14,6Z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon.dark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='%23484848'%3E%3Cpath class='cls-1' d='M8.79,12,7,10.47,10,7H0V5H10L7,1.47,8.79,0,14,6Z'/%3E%3C/svg%3E");
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='%23fff'%3E%3Cpath class='cls-1' d='M5.21,12,7,10.47,4,7H14V5H4l3-3.5L5.21,0,0,6Z'/%3E%3C/svg%3E");
}

.carousel-control-prev-icon.dark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='%23484848'%3E%3Cpath class='cls-1' d='M5.21,12,7,10.47,4,7H14V5H4l3-3.5L5.21,0,0,6Z'/%3E%3C/svg%3E");
}