/* 
	Handles all styling for the customer specific content
*/


/* 
	-- GENERAL --
*/

:root {
	--tiny: 5%;
	--small: 8%;
	--medium: 33%;
	--medium-large: 66%;
	--large: 75%;
	--full: 100%;
}

html,
body,
.form-control,
.btn-small,
.table-small {
	font-size: 10px;
}

body {}

#mainBodyElement {
	background: url('../img/background/bg4.png');
	background-repeat: repeat;
	background-size: 100%;
	/*background-position-y: 60px;	
	background-color: #f6f4f2;*/
	margin-top: -35px;
	min-height: 200px;
	padding-bottom: 10px;
}

#mainBodyErrorElement {
	/*margin: 20px;*/
	color: #453f3f;
	font-size: 20px;
	/*margin-top: 50px;*/
	width: 100%;
	max-width: 100%;
	text-align: center;
}

h2 {
	color: #1a1919;
	font-size: 26px;
	font-weight: 300;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	margin: 30px 0 60px;
}

h2::after {
	content: "";
	width: 25%;
	position: absolute;
	margin: 0 auto;
	height: 4px;
	border-radius: 0px;
	background: #453F3F;
	left: 0;
	right: 0;
	bottom: -20px;
}

h5 {
	color: #1a1919;
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	position: relative;
	margin: 10px 0 10px;
}

h3 {
	letter-spacing: .6px;
	text-align: center;
	font-style: normal;
	color: #453f3f;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

h4 {
	letter-spacing: .6px;
	text-align: center;
	font-style: normal;
	color: #453f3f;
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

/*
	-- CAROUSEL --
*/

.header-spans {
	margin: 0px 10px;
	width: 100%;
	padding: 24px 2px !important;
	line-height: 1px !important;
	font-size: 10px !important;
	word-wrap: normal !important;
	letter-spacing: 0px !important;
}

.carousel {
	position: relative;
	width: 80%;
	bottom: 40px;
	margin: 0 auto;
}

.carousel .item {
	color: #747d89;
	min-height: 160px;
	text-align: center;
	overflow: hidden;
	width: 80%;
	margin-left: 10%;
}

.carousel .thumb-wrapper {
	padding: 10px 10px;
	background: #fff;
	border-radius: 0px;
	text-align: center;
	position: relative;
	box-shadow: 0 2px 3px rgba(26, 25, 25, 0.2);
}

.carousel .item .img-box {
	height: 50px;
	margin-bottom: 20px;
	width: 100%;
	position: relative;
}

.carousel .item img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	position: relative;
	bottom: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
	border-radius: 0px;
}

.carousel .item h4 {
	font-size: 11px;
}

.carousel .item h4,
.carousel .item p,
.carousel .item ul {
	margin-bottom: 5px;
}

.carousel .thumb-content .btn {
	color: #7ac400;
	font-size: 8px;
	text-transform: uppercase;
	font-weight: bold;
	background: none;
	border: 1px solid #7ac400 !important;
	padding: 6px 5px;
	margin-top: 0px;
	line-height: 16px;
	border-radius: 0px;
}

.carousel .thumb-content .btn:hover,
.carousel .thumb-content .btn:focus {
	color: #fff;
	background: #7ac400;
	box-shadow: none;
}

.carousel .thumb-content .btn i {
	font-size: 14px;
	font-weight: bold;
	margin-left: 5px;
}

.carousel .carousel-control {
	height: 64px;
	width: 40px;
	background: rgba(33, 37, 41, 0.5);
	margin: 25px 0;
	border-radius: 0px;
	opacity: 0.8;
}

.carousel .carousel-control:hover {
	background: rgba(33, 37, 41, 1);
	opacity: 1;
}

.carousel .carousel-control i {
	font-size: 36px;
	position: absolute;
	top: 50%;
	display: inline-block;
	margin: -20px 1 0 0;
	z-index: 5;
	left: 0;
	right: 0;
	color: #fff;
	text-shadow: none;
	font-weight: bold;
}

.item-price {
	font-size: 0.9em;
}

.carousel .item-price strike {
	opacity: 0.7;
	margin-right: 5px;
}

.carousel .carousel-control.left i {
	margin-left: -2px;
}

.carousel .carousel-control.right i {
	margin-right: -4px;
}

.carousel .carousel-indicators {
	bottom: 0px;
}

.carousel-indicators li,
.carousel-indicators li.active {
	width: 10px;
	height: 0px;
	margin: 4px;
	border-radius: 0%;
	border-color: transparent;
	border-bottom: 0px;
}

.carousel-indicators li {
	background: rgba(0, 0, 0, 0.2);
}

.carousel-indicators li.active {
	background: rgba(0, 0, 0, 0.6);
}

.carousel .wish-icon {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 99;
	cursor: pointer;
	font-size: 16px;
	color: #abb0b8;
}

.carousel .wish-icon .fa-heart {
	color: #ff6161;
}

.star-rating li {
	padding: 0;
}

.star-rating i {
	font-size: 14px;
	color: #ffc000;
}

.btn-small,
.input-small {
	padding: 9px;
}

.page_container {
	float: left;
	padding: 0px;
	padding-left: 16px;
}

.page_log {
	position: absolute;
	bottom: 5%;
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 100px;
	margin-bottom: 20px;
	border-bottom: 1px inset black;
	border-left: 1px inset black;
	padding-left: 5px;
}

.width {
	width: var(--l);
}

.width span {
	display: block;
	float: left;
	text-align: center;
}

.center {}

.cover {
	width: 50%;
	margin: auto;
	text-align: center;
}

.inner-cover {
	overflow: auto;
}

.crop {
	text-align: center;
	display: block;
	float: left;
}

.pointer {
	cursor: pointer;
}

/*
	-- CARDS --
*/

.card-holder {
	/*margin-left: 2%;*/
	cursor: pointer;
}

.card-cover {
	margin: 0px 0px 32px 0px !important;
	padding: 0px 16px !important;
	background-color: rgba(26, 25, 25, 0) !important;
}

.container.card-holder {
	max-width: 100%;
}

.card-holder.left {
	padding: 0px;
	margin-left: 0px;
	margin-top: 25px;
}

.card-small {
	float: left;
	padding: 0;
	min-height: 350px;
	max-height: 350px;
	white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	width: 100%;
}

.card-center {
	width: 90% !important;
	padding: 10px !important;
	left: 5% !important;
	margin-left: 0 !important;
}

.name-wide {
	position: absolute;
	left: 10%;
	width: 40% !important;
	text-align: left !important;
	margin: -5px !important;
}

.bottom-wide {
	display: none;
	position: absolute;
	left: 40%;
	width: 20%;
	font-size: 10px !important;
	margin: -5px !important;
}

.button-wide {
	position: absolute;
	right: 0%;
	width: 30% !important;
	bottom: 0px !important;
	border: 0px !important;
	padding: 0px !important;
	padding-bottom: 5px !important;
}

.button-wide img {
	margin: -5px !important;
}

.button-wide span {
	border: 0px !important;
	padding-top: 10px !important;
}

.price-wide {
	margin: 5px !important;
	position: absolute;
	right: 25%;
	width: 25% !important;
	bottom: 0 !important;
	top: 10px;
}

.price-wide p {
	float: left;
	margin-left: 10px;
	width: 50px;
}

.price-wide p span {
	display: none;
}

.card-wide {
	min-height: 50px;
	padding: 5px 5px;
	margin: 5px 5px;
	width: 100%;
	max-height: 50px;
}

.card-custom-holder {
	float: right !important;
	width: 100%;
	min-width: 250px;
}

.card-custom-holder a:not([href]):not([tabindex]) {
	text-align: left;
	font-size: 12px;
}

.align-right {
	text-align: right;
}

.card-custom {
	margin-left: 0px;
	margin-right: 0px;
	color: #453f3f;
	min-height: 350px !important;
	letter-spacing: .6px;
	font-style: normal;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	padding: 20px !important;
}

.card-custom.tight {
	padding: 10px !important;
}

.card-custom.toggle {
	padding: 20px !important;
	padding-top: 17px !important;
	margin: 0px !important;
	cursor: pointer;
}

.card-custom.error {
	color: red !important;
}

.card-error {
	color: red !important;
}

.card-confirm {
	border: 1px solid #1a1919 !important;
	width: 75%;
	margin-left: 20%;
	padding: 5px;
	padding-left: 20px;
	margin-top: 7px;
	color: black !important;
}

.card-blank {
	border: 0px solid #1a1919 !important;
	width: 75%;
	margin-left: 20%;
	padding: 5px;
	padding-left: 20px;
	margin-top: 7px;
	color: black !important;
}

.card-confirm.popup {
	background-color: black;
	color: white !important;
	position: absolute;
	box-shadow: 0 0 0 1px #fff;
}

.card.number-input {}

.dropdown-toggle.card-custom {
	color: #453f3f !important;
}

/* Adriaan: limit min-width so the "BESTELLEN" button doesnt get clipped */
.card {
	min-width: 33.333333%;
	border-radius: 0px;
	border: 0px;
}

.card.border-right {
	margin: 10px -1px;
	padding: 0px 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0px 20px 20px;
	border-color: transparent transparent transparent #453F3F;
	text-align: center;
	line-height: 0px;
}

.card.border-right.active {
	background-color: rgba(69, 63, 63, 0.5);
	border-color: transparent transparent transparent rgba(69, 63, 63, 0.5);
	border: transparent transparent transparent rgba(69, 63, 63, 0.2);
}

.card-custom:hover {
	color: #8e8484;
}

.dropdown-item.card-custom {
	min-height: 0px !important;
	border: 0;
	padding: 10px !important;
	padding-left: 20px !important;
	margin: 0px;
}

.card-array {
	margin: 3px;
	border: 1px solid grey;
	cursor: pointer;
}

.card-elements {
	padding: 20px 10px 5px 10px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: rgba(255, 255, 255, 0.5);
	letter-spacing: .6px;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	color: #453f3f;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.card-mother {
	background: white !important;
}

.card-elements.wide {
	float: left;
}

.card-details {
	padding: 2px;
	display: inline-block;
	width: 100%;
}

.card-details img {
	margin: 0 25%;
	max-width: 50%;
	max-height: 200px;
}

.card-elements.bottom {
	font-weight: 400;
	font-size: 0.9em;
	padding: 5px 10px 5px 10px;
}

.card-elements.image {
	width: 100%;
	position: absolute;
	top: 5em;
	display: inline-block;
	margin: auto;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
}

.card-elements.image-wide {
	top: 0em;
	position: absolute;
	left: 0%;
	width: 10%;
	padding: 10px;
}

.card-elements.image-previous {
	width: 100%;
	position: relative;
	margin: auto;
	float: left;
	padding: 0 30%;
	background-color: rgba(255, 255, 255, 0.8);
}

.card-elements.image img {
	padding: 5px;
	background-color: rgba(255, 255, 255, 1);
	max-width: 120px;
}

.card-elements.button {
	position: absolute;
	bottom: 0em;
	width: 100%;
	padding: 5px;
	background-color: rgba(26, 25, 25, 1);
	min-height: 50px;
}

.card-elements.price {
	position: absolute;
	bottom: 4em;
	width: 100%;
	padding: 5px;
	background-color: rgba(255, 255, 255, 0);
}

.card-elements.hr {
	padding: 0px;
	margin: 20px -50%;
	width: 200%;
}

.card-small.background {
	cursor: pointer;
}

/* 
	-- SLIDER --
*/

.ui-rangeslider .ui-rangeslider-sliders {
	margin: 0 auto;
	margin-top: 30px;
	position: relative;
}

.ui-slider-bg.ui-btn-active {
	background-color: #453f3f !important;
}

.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
	position: relative;
	width: 100%;
	margin-left: -5px;
	margin-top: 70px;
	float: none;
}

input.ui-slider-input {
	width: 100%;
	margin-top: 10px;
	margin-left: -5px;
}

.slider-label {
	white-space: nowrap;
	font-size: 0.6em;
	padding-top: 20px;
	margin-bottom: 0px;
}

input[type=range] {
	-webkit-appearance: none;
	margin: 10.5px 0;
	width: 100%;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
	background: rgba(26, 25, 25, 1);
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
	border: 2px solid rgba(255, 255, 255, 1);
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background: rgba(26, 25, 25, 1);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #367ebd;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
	background: rgba(26, 25, 25, 1);
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
	border: 2px solid rgba(255, 255, 255, 1);
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: rgba(26, 25, 25, 1);
	cursor: pointer;
}

input[type=range]::-ms-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: #2a6495;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
	background: #3071a9;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 1px #1a1919, 0px 0px 1px #0d0d0d;
	border: 1px solid #1a1919;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
	background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
	background: #367ebd;
}

/*
	-- NAVIGATION --
*/

.navbar-brand.header {
	text-decoration-color: white;
	color: #f3f3f3;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 1px;
	text-shadow: none;
}

.navbar-brand.header:hover {
	text-decoration-color: white;
	color: #f3f3f3;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 1px;
}

.border-right {
	line-height: 0px;
	padding: 10px;
	border: 0px !important;
}

/*
	-- SHOPPING BASKET --
*/

.basket {
	font-size: 16px;
	line-height: 1;
	padding: 0px;
	/* text-align: center; */
	margin: auto;
	font-style: normal;
	color: #453f3f;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 1px;
}

.basket-label {
	font-size: 16px !important;
	line-height: 1;
	padding: 0px;
	margin: auto;
	font-style: normal;
	font-weight: 400 !important;
	color: #453f3f;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 1px;
}

.basket.inverted {
	color: white;
	background-color: black;
	padding: 15px 0;
	margin-bottom: 30px !important;
}

.basket.number-input {
	max-width: 50px;
	padding-left: 5px;
	margin: 0;
}

.basket-menu-text {
	background-color: rgba(69, 63, 63, 0.8);
	border: 1px solid #f6f4f2;
	padding: 3px;
	position: absolute;
	top: 30px;
	right: 175px;
	margin: auto;
	color: #f6f4f2;
	text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	display: none;
	<- Crashes Chrome on hover -webkit-appearance: none;
	margin: 0;
	/* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
	-moz-appearance: textfield;
	/* Firefox */
}

.filter-active {
	background-color: #1a1919;
	color: #fff;
	padding: 12px;
}

.filter-active-close {
	background-color: #1a1919;
	color: #fff;
	padding: 12px;
	border-left: 1px solid #fff;
}

.breadcrumb {
	background-color: #fff;
	border-bottom: 1px solid #1a1919;
	border-radius: 0;
	text-transform: uppercase;
}

.basket-nav {
	color: rgba(26, 25, 25, 0.7);
	padding: 20px;
	font-size: 14px;
	text-align: center;
}

.basket-nav.active {
	border: 1px solid rgba(0, 0, 0, 0);
	padding: 20px;
	color: #1a1919;
	font-weight: 600;
}

.basket-nav.active:hover {}