/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */


:root {
	--width-base: 1112px;
	--font-size-base: 16px;
	--font-family-base: 'Montserrat', sans-serif;
	--font-family-icon: 'icomoon';
	--line-height-base: 1.5;
	--color-white: #ffffff;
	--color-black: #29332F;
	--color-green: #64a73e;
	--color-green-hover: #36622b;
	--color-border: #e9e3cf;
	--color-bg: #ffffff;
	--heading-lineheight: 1.2;
	--font-size-h1: 36px;
	--font-size-h2: 25px;
	--input-height: 26px;
	--w-full: 100%;
	--h-full: 100%;
	--base-duration: all 0.3s;
}

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-black); background: var(--color-bg); }
input,
textarea { width: var(--w-full); height: var(--input-height); font-family: var(--font-family-base), sans-serif; font-size: 16px; font-weight: 500; color: var(--color-black); border: 0!important; }
select { width: var(--w-full); height: 32px; font-family: var(--font-family-base), sans-serif; font-size: 16px; font-weight: 500; color: var(--color-black); border: 0!important; }
input::placeholder { opacity: 0.6; color: var(--color-black); }
select { --webkit-appearance: none; appearance: none; cursor: pointer; padding: 5px 10px !important; }
.custom-select-arrow { background: url('../images/arrow-down.svg') no-repeat center right 0; }
label { display: block; }
img { display: block; max-width: var(--w-full); border: 0; }
ul { margin: 0 0 30px; }
ul,
li { list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: none; }
p { margin-bottom: 30px; }
.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5 { margin-bottom: 20px; font-weight: 400; line-height: var(--heading-lineheight); }
.h1,
h1 { font-size: var(--font-size-h1); }
.h2,
h2 { font-size: var(--font-size-h2); }

#demo-3_1, #demo-3_2{ cursor: pointer; }

/* ### global classes ### */
.centered { padding-right: 15px; padding-left: 15px; }
.button { padding: 11px 19px; display: inline-flex; align-items: center; justify-content: center; width: var(--w-full); font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: 500; line-height: 1.5; color: var(--color-white); border: 1px solid var(--color-green); border-radius: 10px; background-color: var(--color-green); transition: var(--base-duration); cursor: pointer; text-decoration: none!important; }
.button:after { padding-left: 40px; display: inline-block; font-family: var(--font-family-icon), sans-serif; font-size: 10px; content: '\e900'; }
.button:focus,
.button:hover { border-color: var(--color-green-hover); background-color: var(--color-green-hover); }
.button.outline { color: var(--color-green); background-color: #ffffff; }
.button.outline:after { padding-left: 60px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: 500; content: '+'; }
.button.outline:focus,
.button.outline:hover { color: var(--color-white); border-color: var(--color-green); background-color: var(--color-green); }

#bevestiging_popup{ max-width: 440px; }
#bevestiging_popup .popup-content{ display: flex; flex-direction: column; align-items: center; }
#bevestiging_popup p{ margin-bottom: 0px!important; }
#bevestig_btns{ display: flex; flex-direction: column; gap:20px;  }
#controleer_selectie{ width: 100%; border-radius: 10px; }
#bevestig_selectie{ width:100%; border: 1px solid var(--color-green); border-radius: 10px; background-color: var(--color-green); color: #ffffff;  }
#bevestig_selectie:hover{ border-color: var(--color-green-hover); background-color: var(--color-green-hover); }

#bestellen_button{ color: #ffffff; text-decoration: none; }

/* ### wrapper ### */
.wrapper { position: relative; display: block; width: 100%; min-height: 100%; }


/* ### header container ### */
.header { padding-top: 10px; padding-bottom: 22px; display: flex; align-items: center; justify-content: center; }
.header .logo { }

/* ### title ### */
.title { text-align: center; }


/* ### picker ### */
.picker-holder { padding-bottom: 40px; position: relative; border-bottom: 1px solid var(--color-border); }
.picker-left { padding-right: 0; width: var(--w-full); }
.picker-left .card-purchase-number { margin-bottom: 10px; padding: 10px 10px 10px 44px; width: var(--w-full); }
.picker-left .card-purchase-number:before { position: absolute; top: 14px; left: 18px; opacity: 0.4; font-family: var(--font-family-icon), sans-serif; font-size: 15px; color: var(--color-black); content: '\e901'; }
.picker .button { position: unset; }

/* ### purchase ### */
.purchase-item { padding-top: 38px; padding-bottom: 40px; border-bottom: 1px solid var(--color-border); }
.purchase-date { margin-bottom: 3px; font-weight: 700; }
.purchase-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.purchase-bottom-price { margin: 10px 0; order: 1; width: var(--w-full); font-weight: 700; text-align: center; }
.purchase-bottom-price span { padding-left: 24px; }
.purchase-bottom .button { order: 2; width: var(--w-full); }


/* ### card-purchase ### */
.card-purchase { margin-bottom: 10px; padding: 9px 10px; border: 1px solid var(--color-green); border-radius: 10px; background-color: var(--color-white); }
.card-purchase-image { margin-right: 20px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.card-purchase-image img{ width:78px;height:78px; object-fit:cover; }
.card-purchase-left { margin-bottom: 10px; display: flex; align-items: center; width: var(--w-full); }
.card-purchase-right { justify-content: center; width: var(--w-full); }
.card-purchase-item { margin-bottom: 10px; display: flex; align-items: center; width: var(--w-full); }
.card-purchase-name { font-weight: 500; }
.card-purchase-price { margin-right: 20px; font-size: 12px; }
.card-purchase-price strong { font-size: var(--font-size-base); font-weight: 500; }
.card-purchase-number { padding: 5px; position: relative; display: flex; align-items: center; justify-content: space-between; width: 50%; border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-white); }
.card-purchase input { padding-left: 0; text-align: center; }
.card-purchase-number span { display: flex; justify-content: center; width: 25px; cursor: pointer; }
.card-purchase-number .option { padding: 5px 10px !important; }

.onklikbaar .card-popup{ opacity:0.5; pointer-events:none; }

/* ### total ### */
.total { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: end; }
.total strong { margin: 0 0 10px; width: var(--w-full); text-align: center; }
.total strong span { padding-left: 10px; }

/* ### popup ### */
.popup { padding-top: 20px; padding-bottom: 20px; max-height: unset !important; }
.popup-holder { padding: 20px; max-height: 650px; border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-white); overflow-y: scroll; }
.popup-content { display: grid; grid-template-columns: auto; gap: 25px 20px; }
.popup-label { margin-bottom: 10px; padding: 12px 10px; display: inline-block; font-weight: 700; border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-white); font-size: 12px; }

.popup-item{ position: relative; }
.popup_extra_product_toevoegen{ position: absolute; top: calc(50% - 30px); left: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; visibility: hidden; width: 60px; height: 60px; font-size: 20px; font-weight: 700; line-height: 1; border: 1px solid var(--color-green); border-radius: 10px; background-color: var(--color-white); transform: translate(-50%, -50%); transition: var(--base-duration); cursor:pointer; background-color: #ffffff; z-index: 100;}
.onklikbaar .popup_extra_product_toevoegen{ opacity: 1; visibility: visible; }

.popup_extra_product_aantal{ font-size: 12px; font-weight: 400; }








/* ### card-popup ### */
.card-popup { width: var(--w-full); color: var(--color-black); }
.card-popup-image { margin-bottom: 8px; position: relative; border: 1px solid var(--color-green); border-radius: 10px; display: flex; justify-content: center; overflow:hidden; }
.card-popup-image img{ max-height:240px; max-width:240px; object-fit:cover; }
.card-popup-icon { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; width: 60px; height: 60px; font-size: 20px; font-weight: 700; line-height: 1; border: 1px solid var(--color-green); border-radius: 10px; background-color: var(--color-white); transform: translate(-50%, -50%); transition: var(--base-duration); cursor:pointer; }
.card-popup-content { margin: 0 auto; max-width: 200px; text-align: center; }
.card-popup-name { margin-bottom: 11px; font-weight: 500; line-height: 1.2; }
.card-popup-price { font-weight: 500; }
.card-popup-price em { font-size: 12px; font-style: normal; }
.card-popup:focus .card-popup-icon,
.card-popup:hover .card-popup-icon { opacity: 1; visibility: visible; }

/* ### lity ### */
.lity-container { width: var(--w-full); }
.lity-close { position: absolute; top: 20px; right: 15px; display: flex; align-items: center; justify-content: center; width: 43px; height: 45px; font-family: var(--font-family-base), sans-serif; color: var(--color-black); border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-white); transition: var(--base-duration); font-size: 25px; }
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited { color: var(--color-black); text-shadow: unset; background-color: var(--color-bg); }

/* ### calendar ### */
.lightpick__day { cursor: pointer; transition: var(--base-duration); }
.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped { color: var(--color-white); background-color: var(--color-green); background-image: none; }
.lightpick__day:not(.is-disabled):hover { color: var(--color-black); background-color: var(--color-bg); background-image: none; }
.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range.is-flipped { color: var(--color-white); background-color: var(--color-green); background-image: none; }
.lightpick__day.is-in-range { background-color: var(--color-green);color: var(--color-white); }
.lightpick__previous-action,
.lightpick__next-action { color: var(--color-black); background-color: var(--color-bg); transition: var(--base-duration); cursor: pointer; }
.lightpick__previous-action:focus,
.lightpick__previous-action:hover,
.lightpick__next-action:focus,
.lightpick__next-action:hover { color: var(--color-white); background-color: var(--color-green); }
.lightpick__day.is-today {color: var(--color-green)!important; background-image: none; font-weight: 700;}
.lightpick__day.is-today.is-in-range{ color: var(--color-white)!important; } 
/* #Media Queries
================================================== */

@media only screen and (min-width: 479px) {
	.button { justify-content: unset; width: unset; }
	.custom-select-arrow { background: url('../images/arrow-down.svg') no-repeat center right 10px; }
	.card-purchase-number { width: 30%; }
	.purchase-bottom { display: flex; }
	.purchase-bottom-price { margin: 0 10px 0 0; order: 2; width: unset; text-align: unset; }
	.purchase-bottom .button { order: 1; width: unset; }
	.total strong { margin: 0 15px 0 0; width: unset; }
	.popup-content { display: grid; grid-template-columns: auto auto; }
	.popup-holder { padding: 30px; }
	.popup-label { padding: 17px 29px; font-size: 16px; }
	.lity-container { width: unset; }
	.lity-close { font-size: 35px; width: 60px; height: 60px; }
}

@media only screen and (min-width: 767px) {
	.picker-holder { display: flex; gap: 16px; }
	.picker-left { padding-right: 190px; display: flex; gap: 16px; }
	.picker-left .card-purchase-number { margin-bottom: 0; padding: 10px 10px 10px 44px; width: 50%; }
	.picker .button { position: absolute; right: 0; width: unset; }
	.popup-content { display: grid; grid-template-columns: auto auto auto; gap: 30px; }
}

@media only screen and (min-width: 991px) {
	.card-purchase { display: flex; align-items: center; justify-content: space-between; }
	.card-purchase-left { margin-bottom: 0; width: 40%; }
	.card-purchase-right { display: flex; justify-content: end; width: 60%; }
	.card-purchase-item { margin-bottom: 0; justify-content: end; width: 50%; }
	.card-purchase-item:first-child { margin-bottom: 0; }
	.card-purchase input { padding-left: 15px; }
	.card-purchase-number { width: 52%; }
}


@media only screen and (min-width: 1025px) {
	.popup-content { grid-template-columns: auto auto auto auto; gap: 33px 30px; }
}


@media only screen and (min-width: 1145px) {
	.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
}