/*-----------------------------------------------------------------------------------------------------------------------*/
/* Variables for the website */

:root {
/*Colors*/
		/*Blacks and Whites*/
	--textcolor_black:  			#000000;
	--textcolor_white:  			#FFFFFF;
	
	--objcolor_black_shadow:		rgba(0,0,0,0.2);			/*000000, unfortunately necessary due to how shadows work*/
	--objcolor_black_true:			#000000;
	--objcolor_white_shadow:		rgba(255,255,255,0.5);
	--objcolor_white_true:			#FFFFFF;
	--objcolor_none:				none;
	
		/*Grays*/		/*C2C2C2 (0.299*R + 0.587*G + 0.114*B)*/
	--textcolor_gray:				#808080;
	
	--objcolor_gray_dark:			#9E9E9E;
	--objcolor_gray_base:			#C2C2C2;
	--objcolor_gray_medium:			#D1D1D1;
	--objcolor_gray_medlight:		#E1E1E1;
	--objcolor_gray_light:   		#E8E8E8;
	--objcolor_gray_faint:			#F7F7F7;
	
		/*Reds*/		/*D47272*/
	--objcolor_heart_border_on: 	#C16868;		/*Dark*/
	--objcolor_heart_fill_on:		#D47272;		/*Base*/
	--objcolor_heart_border_hover:	#D47272;		/*Base*/
	--objcolor_heart_fill_hover:	#DF9696;		/*Medium*/
	
		/*Oranges*/		/*D4BC72*/
	--objcolor_heart_border_off:	#EADEB9;		/*Medlight*/
	--objcolor_heart_fill_off:		#F4EEDC;		/*Light*/
	
	/*These 3 colours below are part of a triadic set*/
		/*Yellows*/		/*BCD472*/
	--textcolor_yellow: 			#BCD472;

	--objcolor_yellow_dark:			#ABC168;
	--objcolor_yellow_base:			#BCD472;
	--objcolor_yellow_medium:		#CDDF96;
	--objcolor_yellow_medlight:		#DEEAB9;
	--objcolor_yellow_light:		#EFF5DC;
	--objcolor_yellow_faint:		#F7FAEE;

		/*Blues*/		/*72BCD4*/
	--textcolor_blue:   			#72BCD4;
	
	--objcolor_blue_dark:			#68ABC1;		/*Dark*/		/*Plus to the side from blue_standard (Minus 3/32th of values, rounded up)*/
	--objcolor_blue_base:			#72BCD4;		/*Base*/		/*start*/
	--objcolor_blue_medium:			#96CDDF;		/*Medium*/		/*Between blue_standard and blue_boxborder*/
	--objcolor_blue_medlight:		#B9DEEA;		/*Medlight*/	/*Between blue_standard and white*/
	--objcolor_blue_light:			#DCEFF5;		/*Light*/		/*Between blue_boxborder and white*/
	--objcolor_blue_faint:			#EEF7FA;		/*Faint*/		/*Between blue_boxbg and white*/
	
		/*Purples*/		/*D472BC*/
	--textcolor_purple: 			#D472BC;

	--objcolor_purple_dark:			#C168AB;
	--objcolor_purple_base:			#D472BC;
	--objcolor_purple_medium:		#DF96CD;
	--objcolor_purple_medlight:		#EAB9DE;
	--objcolor_purple_light:		#F5DCEF;
	--objcolor_purple_faint:		#FAEEF7;
	

/*Font Families*/
	--fontfam_standard: 		calibri;
	--fontfam_title:   			Beth Ellen;
	
/*Font Sizes*/
	--fontsize_ALLES:			50px;
	--fontsize_h1:				32px;
	--fontsize_gridalles:		30px;
	--fontsize_large:			24px;
	--fontsize_h2:				20px;
	--fontsize_h3:				16px;
	--fontsize_standard:		16px;
	--fontsize_footer:			14px;
	--fontsize_small:			12px;
	
/*Z-Index Layers*/
	--zind_bigpic:				110;
	--zind_max:					100;
	--zind_high1:				90;
	--zind_high2:				80;
	--zind_high3:				70;
	--zind_mid1:				60;
	--zind_mid2:				50;
	--zind_mid3:				40;
	--zind_low1:				30;
	--zind_low2:				20;
	--zind_low3:				10;
	--zind_min:					0;
	
/*min-width standards*/
	--minwidth_400:				400px;
	--minwidth_phone_min:		360px;  /* Phone Media Query Limit */
	
/*standard Sizes*/
	--size_menu_height:			52px;
	--size_menu_height_big:		64px;
	
	--size_menu_icon:			24px;
	--size_menu_icon_big:		36px;
	
	--size_main_mrgn_top:		81px;
	--size_main_mrgn_top_big:	93px;
	
	--size_side_percentage:		10%;
	
	--size_main_int_pad:		50px;
	--size_main_int_pad_big:	25px;
	
	--size_footer_height:		255px;
	
/*standard Media Query Limits*/

	--MQ_menu_icon:				1052px;
	--MQ_search_page:			1038px;
	--MQ_phone_trans:			960px;
	--MQ_phone_fix:				768px;
}

/*-------------------------------------------*/
/*                 ALL PAGES                 */
/*-------------------------------------------*/

/* RESERVED KEYWORDS AND SIMILAR CATEGORIES */

*						/* All elements */
{
	box-sizing: 		border-box;
	/*outline:			1px solid #f00 !important; /*debug lines*/
}

html, body				/* Fix to avoid body and html shift to left when using a narrow window */
{
	height:				100%;
    overflow:			auto;
}

/*General body attributes. Forces calibri as default, and creates repeating background image*/
body					/* body */
{
	/* inset:				0 auto auto 0; */
	margin:				0 auto;
	
	min-width: 			var(--minwidth_phone_min);
	padding:			0;
	
	background-image:	url("../Icon/Wallpaper_repeat.png");
	background-size:	150px;
	background-repeat:	repeat;
	
	font-family:		var(--fontfam_standard);
	font-size:			var(--fontsize_standard);
	color:				var(--textcolor_black);
}

/*Table related elements. Only found in Alles_Over pages that use such tables, like Vega or Cheesecake*/
table, th, td			/* Table and its elements */
{
	border: 			1px solid;
	border-collapse: 	collapse;
	
	text-align: 		left;
}
th, td					/* Internal table elements */
{
	padding-left:		3px;
}
.table-collapse-bar		/* Collapsable bar used to hide rows on alles-over-vega page */
{
	background-color:	var(--objcolor_blue_medium);
}

ul 					/*LIJSTJE*/
{
	margin:				0px;
	
	padding-inline-start:	20px;
}

h1,h2,h3				/*Title headers*/
{
	font-family: 		var(--fontfam_title);
}
h2
{
	font-size: 			var(--fontsize_h2);
}
h3
{
	font-family:		var(--fontfam_standard);
	font-size:			var(--fontsize_h3);
	font-weight:		bold;
	margin:				0;
}

[type="checkbox"]		/* Force checkboxes to vertically align with the middle of the line it is placed in */
{
	vertical-align:		middle;
}

input					/* All inputs like forms or buttons have this as a standard */
{
	color:				var(--textcolor_black);
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
}

em
{
	font-style:			initial;
}

/* @media only screen and (max-width: 768px) */
/* { */
	/* ul */
	/* { */
		/* padding-inline-start:	20px; */
	/* } */
/* } */



/*-------------------------------------------*/
/*          REUSEABLE CUSTOM BLOCKS          */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE HOME PAGE */

/* The white main content area of every single page on the website*/
.generic-outer-content-container			/* WITTEBOX */
{
	position: 			relative;
	top: 				0;
	margin:				var(--size_main_mrgn_top) var(--size_side_percentage) calc(-1 * var(--size_footer_height)) var(--size_side_percentage);
	
	width: 				80%;
	min-height:			calc(100% - var(--size_main_mrgn_top));
	
	background-color: 	var(--objcolor_white_true);
}
.generic-outer-content-container:after
{
	display:			block;
	
	height:				var(--size_footer_height);
	
	content:			"";
}

/* Content area for recipes */
.generic-inner-content-container			/* RECEPT */
{
	position: 			relative;
	
	padding: 			var(--size_main_int_pad);
	
	background-color: 	var(--objcolor_white_true);
	
	contain:			content;				/* This is here instead of overflow hidden due to position sticky needing to be used */
}

.generic-text-container /*#BOXTEXT*/
{ 
	padding:			20px;
	
	background-color:	var(--objcolor_blue_light);
	border:				5px solid var(--objcolor_blue_medlight);
	border-radius:		5px;
} 

.generic-directory-link  /* directoryref*/
{
	margin-top: 		calc(-1 * var(--fontsize_small));
	
	font-size: 			var(--fontsize_small);
	color: 				var(--textcolor_gray);
}

.generic-directory-link a /* directoryref internals */
{
	color:				var(--textcolor_gray);
	transition:			color 0.1s;
	text-decoration: 	none;
}
.generic-directory-link a:hover
{
	color:				var(--textcolor_black);
}

.generic-grid-container-3	/*.grid-containerrecepten*/
{
	display: 			grid;
	grid-template-columns: 	32% 32% 32%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
	
	word-wrap: 			break-word;
}

.generic-grid-container-2	/*.grid-containerrecepten*/
{
	display: 			grid;
	grid-template-columns: 	49% 49%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
	
	word-wrap: 			break-word;
}

.generic-grid-container-1	/*.grid-containerrecepten*/
{
	display: 			grid;
	grid-template-columns: 	100%;
	grid-row-gap: 		20px;
	
	background-color: 	var(--objcolor_white_true);
	
	word-wrap: 			break-word;
}

.generic-top-title
{
	margin-top:			0px;
}

.generic_link_wrapper
{
	text-decoration: 	none;
}

/* WITTEBOX phone transition */
@media only screen and (max-width: 960px)
{
	.generic-outer-content-container
	{
		margin:			var(--size_main_mrgn_top) auto calc(-1 * var(--size_footer_height)) auto;
		width: 			var(--MQ_phone_fix);
	}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.generic-outer-content-container
	{
		margin:			var(--size_main_mrgn_top_big) 0px calc(-1 * var(--size_footer_height)) 0px;
		
		width: 			100%;
		min-height:		calc(100% - var(--size_main_mrgn_top_big));
	}
	
	.generic-inner-content-container
	{
		padding:		var(--size_main_int_pad_big);
	}
	
	.generic-directory-link 
	{
		margin-top:		0px;
	}
	
	.generic-grid-container-3	/*.grid-containerrecepten*/
	{
		grid-template-columns: 	100%;
		grid-row-gap: 			10px;
	}
	
	.generic-grid-container-2	/*.grid-containerrecepten*/
	{
		grid-template-columns: 	100%;
		grid-row-gap: 			10px;
	}
}



/*-------------------------------------------*/
/*                  IMAGES                   */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE HOME PAGE */

/* Generic, main use for icons */
.image-icon-button 				/* Small Icon used for buttons */
{ 
	position: 			relative;
	margin-right: 		3px;
	
	width: 				11px;
}

.image-icon-normal 							/*TIJDPERSONEN*/
{ 
	position: 			relative;
	margin-right: 		3px;
	
	width: 				16px;
}
.image-icon-large 							/*TIJDPERSONENTEA*/
{ 
	position: 			relative;
	margin-right: 		3px;
	
	width: 				18px;
}
.image-icon-pagetop							/*TIJDPERSONENTEA*/
{ 
	display:			block;
	position: 			relative;
	margin: 			10px 0px 0px 0px;
	
	width: 				25px;
}
.image-icon-hitea-vega 						/*news-date-icon*/
{ 
	position: 			relative;
	margin-top: 		10px;
	
	width: 				30px;
}
.image-icon-bosc-cancel						/*news-date-icon*/
{ 
	position: 			relative;
	
	width: 				30px;
}
.image-icon-bosc-button						/*news-date-icon*/
{ 
	position: 			relative;
	
	height: 			50px;
}
.image-icon-shopping						/*news-date-icon*/
{ 
	display:			inline-block;
	position: 			relative;
	
	width: 				30px;
	
	text-align:			center;
	vertical-align:		sub;
	
	cursor:				pointer;
}
.image-icon-huge 							/*news-date-icon*/
{ 
	position: 			relative;
	margin-right: 		3px;
	
	width: 				40px;
}

.image-standard, /*FOTO*/
.video-standard
{ 
	position: 			relative;
	
	height: 			200px;
	aspect-ratio:		auto;
	
	border-radius: 		10px;
	
	cursor: 			zoom-in;
}
.video-standard
{
	cursor: 			pointer;
}

.image-recipe-top-container /*FOTOKOPREST*/
{ 
	position: 			relative;
	float: 				right;
	margin:				20px 0px 0px 0px;
	
	width: 				350px;
	
	justify-content:	center;
}

.image-recipe-top-item /*FOTOKOP*/
{
	display:			block;
	float:				right;
	
	width: 				350px;
	max-height: 		400px;
	
	border-radius: 		10px;
	
	cursor: 			zoom-in;
	object-fit: 		cover;
}

.image-allesover /*FOTOOVER*/
{ 
	position: 			relative;
	
	max-width: 			200px;
	
	border-radius: 		10px;
} 

.image-zoomed-container /*BigpictureInput*/
{}

.image-zoomed-background /*BigPictureCase*/
{
	display: 			block;
	position: 			fixed;
	inset:				50% 0 0 50%;
	transform: 			translate(-50%, -50%);
	z-index: 			var(--zind_bigpic);
	
	width: 				110%;
	height: 			110%;
	
	background-color: 	var(--objcolor_black_true);
	opacity: 			0.7;
}

.image-zoomed-content /*BigPicture*/
{
	display: 			block;
	position: 			fixed;
	inset:				50% 0 0 50%;
	transform: 			translate(-50%, -50%);
	z-index: 			var(--zind_bigpic);
	
	max-width: 			80%;
	max-height: 		80%;
	
	border-radius:		10px;
	
	cursor: 			zoom-out;
}

@media only screen and (max-width: 1300px)
{
	.image-recipe-top-container /*FOTOKOPREST*/
	{ 		
		width: 				250px;
	}

	.image-recipe-top-item /*FOTOKOP*/
	{
		width: 				250px;
	}
}

@media only screen and (max-width: 960px)
{
	.image-recipe-top-container /*FOTOKOPREST*/
	{ 
		float: 				none;
		margin:				0px 0px 20px 0px;
		
		width: 				auto;
		max-width:			100%;
	}

	.image-recipe-top-item /*FOTOKOP*/
	{
		float:				none;
		margin:				0 auto 0 auto;
		
		width: 				auto;
		max-width:			100%;
		
		object-fit:			contain;
	}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.image-standard, /*FOTO*/
	.video-standard
	{ 
		display:			block;
		margin: 			0px auto 0px auto;
		
		width:				auto;
		max-width:			100%;
		height:				250px;
		object-fit:			cover;
	}

	.image-allesover /*FOTOOVER*/
	{ 
		display:			block;
		margin: 			0px auto 0px auto;
		
		width:				auto;
		max-width:			100%;
		height:				250px;
		object-fit:			contain;
	} 
}



/*-------------------------------------------*/
/*             BUTTONS & SLIDERS             */
/*-------------------------------------------*/

/* ATTRIBUTES USED FOR ANY INPUT METHODS, LIKE BUTTONS, SLIDERS, DROPDOWNS, ETC. */

/* BUTTONS */
.button-standard /*knop*/
{
	padding: 			2px 4px 2px 4px;
	
	background-color:	var(--objcolor_blue_medlight);
	border:				0px;
	border-radius: 		2px;
	
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
}

.button-standard:hover
{
	background-color: 	var(--objcolor_blue_light);
}

.button-standard a
{
	color:				var(--textcolor_black);
	text-decoration:	none;
}

/* INPUTBOX */
.inputbox-standard
{
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
}

/* SINGLE SLIDER RECIPE */
.slider-recipe-single-outer-container
{
}

.slider-recipe-single-inner-container
{
	position: 			relative;
	display: 			block;
	
	width:				100%;
	max-width:			300px;
	padding:			5px 10px 5px 10px;
	
	background-color:	var(--objcolor_blue_light);
	border-radius:		10px;
}

.slider-recipe-single-container 	/* slidersingle */
{
	position: 			relative;
	height: 			20px;
}

.slider-recipe-single-track			/* slidetrack */
{
	position: 			absolute;
	margin:				6px 30px 0px 30px;
	z-index: 			var(--zind_mid3);
	
	width:				calc(100% - 60px);
	height:				8px;
	
	background-color:	var(--objcolor_white_true);
	border-radius:		4px;
}

.slider-recipe-single-button		/* slidebutton */
{
	position: 			absolute;
	margin:				1px 0px 0px calc(10px - 12px);
	z-index: 			var(--zind_mid1);
	
	width: 				18px;
	height: 			18px;
	
	background-color: 	var(--objcolor_blue_dark);
	border-radius: 		30px;
	
	cursor:				grab;
}

.slider-recipe-single-min, .slider-recipe-single-max
{
	position:			absolute;
	
	width:				20px;
	height:				20px;
	
	text-align:			center;
	line-height:		20px;

	-webkit-user-select:none;		/*Maakt het zodat je niet de tekst selecteert*/
	-moz-user-select: 	none;
}
.slider-recipe-single-max{right: 0;}

.slider-recipe-single-tooltip-container		/* tooltip */
{
	display: 			inline-block;
	position: 			relative;

	-webkit-user-select:none;		/*Maakt het zodat je niet de tekst selecteert*/
	-moz-user-select: 	none;
}

.slider-recipe-single-tooltip-container .slider-recipe-single-tooltip-text 	/* tooltiptext */
{
	position: 			absolute;
	inset:				-15.5px 0px 0px -1px;
	z-index: 			var(--zind_low2);
	
	width: 				20px;
	height: 			5px;
	
	opacity: 			1;
	
	color:				var(--objcolor_white_true);
	font-size: 			var(--fontsize_small);
	line-height:		18px;
	text-align: 		center;
}

.slider-recipe-single-text
{
	margin-bottom: 		10px;
}

/* DOUBLE SLIDER FILTER */
.slider-filter-double-container 	/* sliderdouble */
{
	height: 			40px;
	
	background-color:	var(--objcolor_white_true);
}

.slider-filter-double-track, 		/* slidetrack */
.slider-filter-double-connector 	/* slidetrackbetween */
{
	display:			block;
	position: 			absolute;
	margin:				11px 0px 0px 15.2px;
	z-index: 			var(--zind_mid3);
	
	width:				140px;
	height:				2px;
	
	background-color:	var(--objcolor_gray_dark);
}
.slider-filter-double-connector 	/* slidetrackbetween */
{
	margin-top:			10px;
	
	height:				4px;
	
    background-color: 	var(--objcolor_blue_medlight);
}

.slider-filter-double-button		/* slidebutton */
{
	position: 			absolute;
	margin:				2px 0px 0px 4px;
	z-index: 			var(--zind_mid1);
	
	width: 				24px;
	height: 			24px;
	
    background: 		url("../Icon/SliderButton.png") center no-repeat;
	background-size:	12px 18px;
	
	cursor:				grab;
}

.slider-filter-double-tooltip-container		/* tooltip */
{
	display: 			inline-block;
	position: 			relative;

	-webkit-user-select:none;
	-moz-user-select: 	none;
}

.slider-filter-double-tooltip-container .slider-filter-double-tooltip-text 	/* tooltiptext */
{
	position: 			absolute;
	inset:				80% 0px 125% 0px;
	z-index: 			var(--zind_low2);
	margin: 			5px 0px 0px 0px;
	
	width: 				20px;
	height: 			5px;
	padding: 			5px 0px 5px 0px;
	
	opacity: 			1;
	
	font-size: 			var(--fontsize_small);
	text-align: 		center;
}

/* DOUBLE SLIDER CONSOLE */
.slider-console-double-container 	/* sliderdouble */
{
	height: 			40px;
	
	background-color:	var(--objcolor_white_true);
}

.slider-console-double-track, 		/* slidetrack */
.slider-console-double-connector 	/* slidetrackbetween */
{
	position: 			absolute;
	margin:				11px 10% 0px 10%;
	z-index: 			var(--zind_mid3);
	
	width:				80%;
	height:				2px;
	
	background-color:	var(--objcolor_gray_dark);
}
.slider-console-double-connector 	/* slidetrackbetween */
{
	margin-top:			10px;
	
	height:				4px;
	
    background-color: 	var(--objcolor_blue_medlight);
}

.slider-console-double-button		/* slidebutton */
{
	position: 			absolute;
	margin:				2px 0px 0px calc(10% - 12px);
	z-index: 			var(--zind_mid1);
	
	width: 				24px;
	height: 			24px;
	
    background: 		url("../Icon/SliderButton.png") center no-repeat;
	background-size:	12px 18px;
	
	cursor:				grab;
}

.slider-console-double-tooltip-container		/* tooltip */
{
	display: 			inline-block;
	position: 			relative;

	-webkit-user-select:none;
	-moz-user-select: 	none;
}

.slider-console-double-tooltip-container .slider-console-double-tooltip-text 	/* tooltiptext */
{
	position: 			absolute;
	inset:				0px 0px 8px 5px;
	z-index: 			var(--zind_low2);
	margin: 			5px 0px 0px -5px;
	
	width: 				20px;
	height: 			5px;
	padding: 			5px 0px 5px 0px;
	
	opacity: 			1;
	
	font-size: 			var(--fontsize_small);
	text-align: 		center;
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 1300px)
{
}

@media only screen and (max-width: 960px)
{
}

@media only screen and (max-width: 450px)
{
	.slider-recipe-single-inner-container
	{
		max-width:			450px;
	}
}



/*-------------------------------------------*/
/*                 HOME PAGE                 */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE HOME PAGE */

.home-text-outer-container
{
	position: 			relative;
	float:				left;
	margin:				0;
	
	width:				60%;
	min-width:			150px;
	
	background-color: 	var(--objcolor_white_true);
}

.home-contact-container						/* Contact box on home page */
{ 
	padding:			20px;
	
  	background-color:	var(--objcolor_blue_light);
	border:				5px solid var(--objcolor_blue_medlight);
	border-radius:		5px;
	
	overflow-wrap:		break-word;
} 

.home-text-outer-container > img	/* Picture box on home page */
{
	width:				100%;
	max-width:			300px;
	
	border-radius:		5px;
}

.home-news-outer-container
{
	position: 			relative;
	float: 				right;
	
	width:				40%;
	max-width:			400px;
	min-width:			250px;
	padding-left:		var(--size_main_int_pad);
}

.home-news-title							/* News Title on home page */
{ 
	float:				right;
	
	padding:			0px;
	
	color: 				black;
	text-decoration: 	none;
} 

.home-news-title h1
{
	margin-top:			0px;
}

.home-news-item-container /*#BOXHOME*/
{
	display:			flex;
	position:			relative;
	float:				right;
	margin:				20px 0px 0px 0px;
	
	width:				100%;
	height:				150px;
	
	background-color:	var(--objcolor_blue_light);
	transition:			background-color 0.1s;
	border-radius:		5px;
	
	align-items:		center;
	text-align:			center;
	overflow:			hidden;
	word-wrap:			break-word;
} 	
.home-news-item-container:hover		/* This is here for text search results */
{
	background-color:	var(--objcolor_blue_medlight);
}

.home-news-item-text 	/* for text inside of news block */
{ 
	margin:				0;
	
	padding:			20px 20px 20px 20px;
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.home-text-outer-container
	{
		width:				100%;
	}

	.home-contact-container/* Contact box on home page */
	{
		width:				100%;
	} 

	.home-text-outer-container > img	/* Picture box on home page */
	{
		display:			block;
		margin-left:		auto;
		margin-right:		auto;
	} 

	.home-news-outer-container
	{
		float: 				left;

		width:				100%;
		max-width:			none;
		padding-left:		0px;
	}
	
	.home-news-title
	{ 
		float:				left;
	}
	
	.home-news-title h1
	{ 
		margin-top:			.67em;
	}
}



/*-------------------------------------------*/
/*              MENU ATTRIBUTES              */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE MENU */

/* Top bar where the menu is located*/
.menu-outer-container					/* #MENU */
{
	position: 			fixed;
	inset:				0 auto auto 0;
	z-index: 			var(--zind_max);
	
	width: 				100%;
	min-width: 			var(--minwidth_phone_min);
	height:				var(--size_menu_height);
	
	background-color: 	var(--objcolor_blue_base);
	
	text-decoration: 	none;
	overflow: 			visible;
}

.menu-inner-container					/* #MENU */
{
	position: 			relative;
	z-index: 			var(--zind_max);
	
	width:				80%;
	height:				var(--size_menu_height);
	margin: 			0px var(--size_side_percentage) 0px var(--size_side_percentage);
	
	overflow: 			visible;
}

/* Container for button in which menu options are located*/
.menu-button-container			/* .NAV */
{
	display: 			block;
	float: 				left;
	z-index: 			var(--zind_max);
	
	height:				var(--size_menu_height);
	
	background-color: 	var(--objcolor_blue_base);
	transition: 		background-color 0.1s;
	
	text-align: 		center;
	text-decoration: 	none;
	cursor:				pointer;
}
.menu-button-container:hover,
.menu-button-container:active
{
    background-color:	var(--objcolor_purple_base);
}

/* Wrapper for button that has a dropdown (everything that used to be called "dropdown-"*/
.menu-dropdown-container
{
	display:			block;
	float: 				left;
	z-index: 			var(--zind_max);

	text-decoration: 	none;
	overflow: 			hidden;
}

/* Button inside the dropdown wrapper */
.menu-dropdown-button
{
	display: 			block;
	
	height:				var(--size_menu_height);
	
	background-color:	var(--objcolor_blue_base);
	transition: 		background-color 0.1s;
	
	text-align: 		center;
	text-decoration: 	none;
}
.menu-dropdown-container:hover .menu-dropdown-button,
.menu-dropdown-container:active .menu-dropdown-button
{
	background-color: 	var(--objcolor_purple_base);
}

/* Options inside the dropdown wrapper*/
.menu-dropdown-option
{
	display: 			none;
	position: 			absolute;
	z-index: 			var(--zind_high1);
	
	min-width:			12%;
	
	background-color: 	var(--objcolor_gray_faint);
	box-shadow: 		0px 8px 16px 0px var(--objcolor_black_shadow);
}
.menu-dropdown-container:hover .menu-dropdown-option
{
	display:			block;
}

/* Link and text inside of dropdown wrapper options*/
.menu-dropdown-option a
{
	display: 			block;
	float: 				none;
	
	padding: 			12px 16px;
	
	color:				var(--textcolor_black);
	text-align: 		left;
	text-decoration: 	none;
}
.menu-dropdown-option a:hover,
.menu-dropdown-option a:active
{
	background-color: 	var(--objcolor_gray_base);
}

/* Different types of menu button content, text and different sizes of images */
.menu-button-text
{
	height:				var(--size_menu_height);
	padding:			16px;
	
	color: 				var(--textcolor_white);
	text-decoration: 	none;
}

.menu-button-icon-medium	/* menuIcon */
{
	margin: 			-2px 0px -6px 0px;
	
	width: 				var(--size_menu_icon);
	height: 			var(--size_menu_icon);
}

.menu-button-icon-large		/* menuIconBIG */
{
	margin: 			-4px 0px -12px 0px;
	
	width: 				var(--size_menu_icon_big);
	height: 			var(--size_menu_icon_big);
}

.menu-button-icon-adapt	/* menuIcon */
{
	margin: 			-2px 0px -6px 0px;
	
	width: 				var(--size_menu_icon);
	height: 			var(--size_menu_icon);
}

/* Define search bar in top menu */
.menu-search-wrapper
{	
	display:			block;
	float:				right;
	margin-right: 		calc(-1 * var(--size_menu_height));
}

.menu-search-bar
{
    float: 				left;
    margin-right: 		0;
	
    width: 				297px;
    height: 			var(--size_menu_height);
    padding: 			14.6px 0 15.4px 20px;
	
    background: 		var(--objcolor_blue_medium);
    transition: 		background 0.15s;
    border: 			0 none;
    outline: 			none;

	color: 				var(--textcolor_white);
}
.menu-search-bar:focus
{
    background: 		var(--objcolor_blue_medlight);
}
.menu-search-bar::placeholder
{
	color: 				var(--textcolor_white);
}

.menu-search-button
{
	position: 			relative;
	right: 				var(--size_menu_height);
	
    width: 				var(--size_menu_height);
    height: 			var(--size_menu_height);
	
    background: 		url("../Icon/Zoekloep.png") center no-repeat;
	background-size: 	22px 22px;
    border: 			0 none;
	
    text-align: 		center;
    cursor: 			pointer;
}

/* Define hamburger dropdown in top menu */
.menu-hamb-button-container			/* .NAV */
{
	display: 			block;
	float: 				left;
	z-index: 			var(--zind_max);
	
	height:				var(--size_menu_height_big);
	
	background-color: 	var(--objcolor_blue_base);
	transition: 		background-color 0.1s;
	
	text-align: 		center;
	text-decoration: 	none;
	cursor:				pointer;
}

.menu-hamb-dropdown
{
	display:			none;
	position: 			absolute;
	top:				var(--size_menu_height);
	z-index: 			var(--zind_high1);
	
	width:				180px;
	
	background-color: 	var(--objcolor_blue_light);
	box-shadow: 		0px 8px 16px 0px var(--objcolor_black_shadow);
}

.menu-hamb-option
{
	display: 			block;
	
	width:				180px;
	height:				50px;
	padding: 			15px 40px 15px 15px;
	
	font-family:		var(--fontfam_standard);
	font-size:			var(--fontsize_standard);
	font-weight:		bold;
	color:				var(--textcolor_black);
	text-align: 		left;
	text-decoration: 	none;
}

.menu-hamb-button-grid-container
{
	display: 			grid;
	grid-template-columns: 	60px 60px 60px;
	grid-auto-flow:		dense;
	
	width:				180px;
	height:				50px;
}

.menu-hamb-button
{	
	display: 			block;
	
	width:				60px;
	height:				50px;
	
	text-align: 		left;
	text-decoration: 	none;
	
	align-items:		center;
}

.menu-button-icon-hamb	/* menuIcon */
{	
	width: 				60px;
	height: 			50px;
}

.menu-hamb-option:hover,
.menu-hamb-option:active,
.menu-hamb-button:hover,
.menu-hamb-button:active
{
	background-color: 	var(--objcolor_blue_medlight);
}

.menu-hamb-unclick
{
	display:			none;
	position: 			absolute;
	top:				var(--size_menu_height_big);
	z-index: 			calc(var(--zind_high1) - 1);
	
	width:				100%;
	height:				2000px;
}

.menu-rwd-text{display: block;}
.menu-rwd-icon{display: none;}
.menu-rwd-fav{display: block;}
.menu-rwd-mob{display: none;}

/* Menu Text to Icon transition */
@media only screen and (max-width: 1152px)
{	
	.menu-rwd-text{display: none;}
	.menu-rwd-icon{display: block;}
}

/* Screen To Phone transition */
@media only screen and (max-width: 960px)
{
	.menu-inner-container
	{
		margin:				0px auto 0px auto;
		width: 				var(--MQ_phone_fix);
	}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.menu-inner-container
	{
		margin: 			0px 0px 0px 0px;
		width: 				100%;
	}
	
	.menu-outer-container,
	.menu-inner-container,
	.menu-button-container,
	.menu-dropdown-button,
	.menu-button-text,
	.menu-search-bar,
	.menu-search-button
	{
		height:				var(--size_menu_height_big);
	}
	
	.menu-search-button
	{
		right:				var(--size_menu_height_big);
		
		width:				var(--size_menu_height_big);
	}
	
	.menu-button-icon-adapt
	{
		width: 				var(--size_menu_icon_big);
		height: 			var(--size_menu_icon_big);		
	}

	.menu-hamb-dropdown
	{
		inset:				var(--size_menu_height_big) auto auto 0px;
	}
	
	.menu-rwd-icon{display: none;}
	.menu-rwd-fav{display: none;}
	.menu-rwd-mob{display: block;}
}

@media only screen and (min-width: 768px)
{
	.menu-rwd-dd{display: none!important;}
}




/*-------------------------------------------*/
/*             FOOTER ATTRIBUTES             */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE FOOTER */

.footer-outer-container		/*footer*/
{
	position: 			relative;
	z-index: 			var(--zind_low1);

	min-width: 			var(--minwidth_phone_min);
	min-height: 		var(--size_footer_height);

	background-color: 	var(--objcolor_blue_base);

	font-size: 			var(--fontsize_footer);
	color: 				var(--textcolor_white);
}

.footer-inner-container /*grid-footernieuws*/
{
	margin: 			0px var(--size_side_percentage) 0px var(--size_side_percentage);
	
	width: 				80%;
	padding:			20px 20px 20px 20px;
	
	background-color: 	var(--objcolor_blue_base);
	
	text-align: 		left;
	overflow:			hidden;
}

.footer-news-title /*#footer-header-right*/
{
	padding: 			0px 0px 15px 0px;
	
	color: 				var(--textcolor_white);
	font-family: 		var(--fontfam_title);
	font-size: 			var(--fontsize_h2);
	text-decoration:	none;
}

.footer-contact-title /*#footer-header-right*/
{
	float:				right;
	
	width:				100%;
	padding: 			0px 0px 15px 0px;
	
	color: 				var(--textcolor_white);
	font-family: 		var(--fontfam_title);
	font-size: 			var(--fontsize_h2);
	text-align:			right;
}

.footer-news-container
{
	display:			inline-block;
	
	width:				75%;
}

.footer-contact-container
{
	display:			inline-block;
	float:				right;
	margin-left:		5%;
	
	width:				20%;
}

.footer-news-itemcontent /*grid-itemreceptenfooter*/
{
	display: 			flex;
	position: 			relative;
	
	height: 			150px;
	
	border-radius: 		5px;
	
	background-color: 	var(--objcolor_blue_medlight);
	text-align: 		center;
	overflow: 			hidden;
}

.footer-contact-itemcontent /*grid-itemfootercontact*/
{
	display:			block;
	float:				right;
	
	background-color: 	var(--objcolor_blue_base);
	border: 			none;
	
	text-align: 		right;
}

/* WITTEBOX phone transition */
@media only screen and (max-width: 960px)
{
	.footer-inner-container
	{
		margin:			0px auto 0px auto;
		
		width: 			var(--MQ_phone_fix);
	}
	
	.footer-news-container
	{
		width:				100%;
	}

	.footer-contact-container
	{
		float:				left;
		margin-left:		0%;
		
		width:				100%;
	}

	.footer-contact-title /*#footer-header-right*/
	{		
		padding-top:		15px;
		
		text-align:			left;
	}
	
	.footer-contact-itemcontent /*grid-itemfootercontact*/
	{
		float:				left;
		
		text-align: 		left;
	}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.footer-inner-container
	{
		margin:			0px 0px 0px 0px;
		
		width: 			100%;
		padding:		var(--size_main_int_pad_big);
	}
}



/*-------------------------------------------*/
/*                 NEWS PAGE                 */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE NEWS PAGE */

.news-afgelopen-maand-container
{
	display:			flex;
	
	width:				100%;
	
	justify-content:	right;
}

.news-afgelopen-maand-text
{
	margin:				-15px 0px 10px 0px;
}

.news-recent-outer-container
{
	padding:			20px 20px 20px 20px;
	
	background-color:	var(--objcolor_blue_light);
	border-radius:		10px;
}

.news-unrecent-outer-container
{
	padding:			0px 20px 20px 20px;
	
	background-color:	var(--objcolor_white);
	border-radius:		10px;
}

.news-itemcontainer-outer-wrapper .category-itemcontent-recipe,
.news-itemcontainer-pinned-outer-wrapper .category-itemcontent-recipe
{
	display:			none;
	z-index:			var(--zind_high3);
}

.news-itemcontainer-link-wrapper
{
	text-decoration: 	none;
	overflow:			hidden;
}

.news-textcontainer-wrapper,
.news-textcontainer-pinned-wrapper
{
	padding:			20px;
	
	background-color:	var(--objcolor_blue_medium);
	transition:			background-color 0.1s;
	border-radius:		10px;
}
.news-textcontainer-wrapper:hover
{
	background-color:	var(--objcolor_blue_light);
}
.news-textcontainer-pinned-wrapper
{
	background-color:	var(--objcolor_purple_medium);
}
.news-textcontainer-pinned-wrapper:hover
{
	background-color:	var(--objcolor_purple_light);
}

.news-itemcontainer-outer-wrapper,
.news-itemcontainer-pinned-outer-wrapper
{
	margin:				0px 0px 0px 0px;
	
	width:				100%;
	height:				300px;
}

.news-itemcontainer-pinned-outer-wrapper + .news-itemcontainer-pinned-outer-wrapper,	/*Any pinned wrapper followed by a pinned wrapper*/
.news-itemcontainer-pinned-outer-wrapper + .news-textcontainer-pinned-wrapper,
.news-textcontainer-pinned-wrapper + .news-itemcontainer-pinned-outer-wrapper,
.news-itemcontainer-pinned-outer-wrapper + .news-textcontainer-pinned-wrapper,
.news-itemcontainer-pinned-outer-wrapper + .news-itemcontainer-outer-wrapper,			/*Any pinned wrapper followed by an unpinned wrapper*/
.news-itemcontainer-pinned-outer-wrapper + .news-textcontainer-wrapper,
.news-textcontainer-pinned-wrapper + .news-itemcontainer-outer-wrapper,
.news-itemcontainer-pinned-outer-wrapper + .news-textcontainer-wrapper,
.news-itemcontainer-outer-wrapper + .news-itemcontainer-outer-wrapper,					/*Any unpinned wrapper followed by an unpinned wrapper*/
.news-itemcontainer-outer-wrapper + .news-textcontainer-wrapper,
.news-textcontainer-wrapper + .news-itemcontainer-outer-wrapper,
.news-textcontainer-wrapper + .news-textcontainer-wrapper
{
	margin:				20px 0px 0px 0px;
}

.news-itemcontainer-inner-wrapper,
.news-itemcontainer-pinned-inner-wrapper
{
	display:			grid;
	grid-template-columns: 	300px auto;
	grid-column-gap: 	20px;
	
	width:				100%;
	height:				300px;
	padding:			20px;
	
	background-color:	var(--objcolor_blue_faint);
	transition:			background-color 0.1s;
	border-radius:		10px;
	
	color: 				var(--textcolor_black);
}
.news-itemcontainer-inner-wrapper:hover
{
	background-color:	var(--objcolor_blue_light);
}
.news-itemcontainer-pinned-inner-wrapper
{
	background-color:	var(--objcolor_purple_faint);
}
.news-itemcontainer-pinned-inner-wrapper:hover
{
	background-color:	var(--objcolor_purple_light);
}

.news-itemcontainer-image-wrapper
{
	display:			flex;
	
	width:				300px;
	height:				260px;
	justify-content:	center;
	
	border-radius:		10px;
	
	text-align:			center;
}

.news-itemcontainer-image
{
	display:			block;
	
	width: 				100%;
	height: 			100%;
	
	border-radius:		10px;
	object-fit: 		cover;
}

.news-itemcontainer-information
{
	position:			relative;
}

.news-itemcontainer-title
{
	margin-top:			-15px;
	float:				right;
	text-align:			right;
}

.news-itemcontainer-detail-information
{
	display:			grid;
	grid-template-columns: 	120px 160px;
	grid-column-gap: 	20px;
	position:			absolute;
	bottom:				0px;
	right:				0px;
	
	width:				300px;
	
	color: 				var(--textcolor_black);
}

.news-itemcontainer-detail-name
{
	font-size:			20px;
	font-weight:		bold;
}

.news-itemcontainer-detail-value
{
	font-size:			20px;
}

.news-load-block
{
	display:			none;
	
	padding:			20px 0px 0px 0px;
}

/* Search Page Transition */
@media only screen and (max-width: 1250px)
{
	.news-itemcontainer-title
	{
		font-size:		26px;
	}
}

@media only screen and (max-width: 1038px)
{
	.news-itemcontainer-information
	{
		display: 		flex;
		
		align-items: 	center;
		
		text-align:		right;
		justify-content:right;
	}
	
	.news-itemcontainer-title
	{
		margin:			0px 0px 0px 0px;
		
		font-size:		26px;
	}
	
	.news-itemcontainer-detail-information
	{
		display:		none;
	}
}

@media only screen and (max-width: 768px)
{
	.news-itemcontainer-link-wrapper
	{
		display:		none;
	}

	.news-itemcontainer-pinned-outer-wrapper .category-itemcontent-recipe,
	.news-itemcontainer-outer-wrapper .category-itemcontent-recipe
	{
		display:		flex;
	}
	
	.news-itemcontainer-pinned-outer-wrapper,
	.news-itemcontainer-outer-wrapper
	{
		height:			200px;
	}
}




/*-------------------------------------------*/
/*               CATEGORY PAGE               */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE CATEGORY PAGES */

.category-image-alles,  /*#CATEGORIEALLESFOTO*/
.category-image-single  /*#CATEGORIEFOTO + RECEPTENMENUFOTO*/
{ 
	position: 			absolute;
	inset:				0 0 0 0;
	z-index: 			var(--zind_low2);
	
	opacity: 			0.7;
	transition: 		opacity 0.1s;
	
	object-fit: 		cover;
}
.category-image-alles /*#CATEGORIEALLESFOTO*/
{
	min-width: 			100%;
	min-height: 		150%;
}
.category-image-single /*#CATEGORIEALLESFOTO*/
{
	width: 				100%;
	height: 			100%;
}
.category-image-alles:hover,
.category-image-single:hover
{ 
	opacity: 			1.0;
} 

.category-itemcontent-cat /*.grid-itemcategoriealles*/
{
	display: 			flex;
	position: 			relative; 
	z-index: 			var(--zind_low2);
	
	height: 			150px;
	padding:			20px 0px 20px 0px;
	
	border-radius: 		5px;
	
	align-items: 		center;
	justify-content: 	center;
	text-align: 		center;
	overflow: 			hidden;
}

.category-itemcontent-recipe /*.grid-itemrecepten*/
{
	display: 			flex;
	position: 			relative;
	z-index: 			var(--zind_mid2);
	
	height: 			200px;
	
	border-radius: 		5px;
	
	background-color: 	var(--objcolor_blue_medlight);
	justify-content: 	center;
	text-align: 		center;
	overflow: 			hidden;
}

.category-textcontainer-recipe /*.grid-itemreceptenonderdeeltekst*/
{
	position: 			absolute; 
	align-self:			end;
	z-index: 			var(--zind_mid1);
	
	width: 				100%;
	padding:			5px; 
	
	background:			var(--objcolor_blue_light);
	opacity:			0.7;
	
	align-items: 		center;
	justify-content: 	center;
	overflow: 			hidden;
	pointer-events:		none;
}

.category-text-alles /*#CATEGORIEALLESTEKST*/
{
	position:			relative;
	z-index: 			var(--zind_high3);
	margin:				auto;
	
	padding:			0px 16px 0px 16px;
	
	background:			var(--objcolor_blue_light);
	border-radius:		5px;
	opacity:			0.7;
	
	font-family:		var(--fontfam_title);
	font-size:			var(--fontsize_ALLES);
	color:				var(--textcolor_black);
	text-decoration:	none;
	pointer-events:		none;
}

.category-text-subcat /*#CATEGORIETEKST*/
{
	display: 			flex;
	position:			relative;
	z-index: 			var(--zind_high3);
	
	padding:			5px 0px 10px 0px; 
	width: 				100%;
	
	background:			var(--objcolor_blue_light);
	opacity:			0.7;
	
	font-family:		var(--fontfam_title);
	font-size: 			var(--fontsize_h2);
	color:				var(--textcolor_black);
	align-items: 		center;
	justify-content: 	center;
	text-decoration:	none;
	line-height: 		160%;
	pointer-events:		none;
	overflow: 			hidden;
}

.category-text-recipe /*#RECEPTENMENUTEKST*/
{
	font-size:			var(--fontsize_h2);
	color:				var(--textcolor_black);
	text-decoration:	none;
	word-wrap:			break-word;
}

.category-rwd-alles
{
	padding-bottom:		20px;
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.category-rwd-alles
	{
		padding-bottom:	10px;
	}
}

/*-------------------------------------------*/
/*                RECIPE PAGE                */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE RECIPE PAGES */

/* Definition for main recipe text containers. Separate definitions are available for numbered and tip containers.
Based on which container the number and text are in, different attributes are assigned.*/

.recipe-title
{
	display:			inline;
	float:				left;
	margin-top:			0px;
}

.recipe-title-container
{
	display:			flex;
	margin:				0px 58px 0px 0px;		/* This is to make the heart ocntainer break off the title */
	
	overflow:			hidden;
}

.recipe-outer-container-title-image-detail
{
	display: 			grid;
	grid-template-columns: 	auto 350px;
	grid-column-gap: 	20px;
	grid-auto-flow:		dense;
	
	width:				100%;
	
	align-items:		start;
}

.recipe-info-outer-container
{
}

.recipe-outer-container-ingredient-text
{
	display: 			grid;
	grid-template-columns: 	calc(100% - 370px) 350px;
	grid-column-gap: 	20px;
	grid-auto-flow:		dense;
	
	width:				100%;
	padding:			20px 0px 0px 0px;
	
	align-items:		start;
}

.recipe-inner-container-ingredient
{
	position:			sticky;
	top:				calc(var(--size_menu_height) + 10px);
	grid-column:		2;
	margin:				0px 0px 10px 0px;
	
	width:				100%;
	max-height:			calc(100vh - var(--size_menu_height) - 20px);
	padding:			20px 0px 20px 20px;
	
	background-color:	var(--objcolor_white);
	border:				6px solid var(--objcolor_blue_light);
	border-radius:		10px;
}

.recipe-inner-scroll-container-ingredient
{
	max-height:			calc(100vh - var(--size_menu_height) - 60px);
	padding:			0px 20px 0px 0px;
	
	overflow-y:			auto;
}

.recipe-inner-container-ingredient h2
{
	margin-top:			0px;
}

.recipe-inner-container-text h2
{
	margin-top:			20px;
}

.recipe-inner-container-text
{
	display: 			block;
	grid-column:		1;
	
	width:				100%;
}

.recipe-text-container-standard,
.recipe-text-container-tip /*HTCONT*/
{
	display:			flex;
	margin:				10px 0px 10px 0px;
	
	padding:			10px 10px 10px 10px;
	
	border-radius:		5px;
	
    align-items:		center;
	overflow:			auto;
}
.recipe-text-container-standard {background-color: var(--objcolor_blue_faint);  }
.recipe-text-container-tip      {background-color: var(--objcolor_purple_faint);}

.recipe-text-content-number /*HTNUM*/
{
	float:				left;
	margin-top:			-5px;
	
	min-width:			40px;
	padding-bottom:		5px;
	
	font-family:		var(--fontfam_title);
	font-size:			var(--fontsize_large);
	font-weight:		bold;
	text-align:			center;
}

.recipe-text-content-text
{
	padding:			5px 5px 5px 0px;
}

.recipe-text-container-standard .recipe-text-content-number {color: var(--textcolor_blue);  }
.recipe-text-container-tip      .recipe-text-content-number {color: var(--textcolor_purple);}

.recipe-text-container-standard .recipe-text-content-text {margin-left: 20px; width: calc(100% - 60px);}	/*HTTEKST*/
.recipe-text-container-tip      .recipe-text-content-text {margin-left: 40px; width: calc(100% - 80px);}

.recipe-scrollable-image-outer-container,
.recipe-scrollable-image-inner-container
{
	position:			relative;
	display:			block;
}
.recipe-scrollable-image-outer-container
{
	margin:				0px 0px -5px 0px;
}

.recipe-image-wrapper
{	
	display:			inline-block;
	margin: 			0px 5px 5px 0px;
		
	width:				auto;
	max-width:			100%;
	height:				200px;
}

.recipe-scrollable-image-arrow-left,
.recipe-scrollable-image-arrow-right
{
	display:			none;
}

.recipe-dropdown-diff-select		/*recipe-dropdown*/
{
	padding: 			5px 5px 5px 10px;
	
	background-color:	var(--objcolor_white);
	border:				3px solid var(--objcolor_blue_light);
	border-radius: 		5px;
	
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
	font-weight:		bold;
}

.recipe-dropdown-price-select		/*recipe-dropdown*/
{
	padding: 			0px 0px 0px 5px;
	
	background-color:	var(--objcolor_white);
	border:				3px solid var(--objcolor_blue_light);
	border-radius: 		5px;
	
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
	font-weight:		bold;
}
.recipe-dropdown-diff-option,		/*recipe-dropdown*/
.recipe-dropdown-price-option		/*recipe-dropdown*/
{
	background-color:	var(--objcolor_white);
	border:				0 none;
}

.recipe-rwd-mob{display: none;}

/* Phone or Tablet Setting */
@media only screen and (max-width: 1300px)
{
	.recipe-outer-container-title-image-detail
	{
		grid-template-columns: 	auto 250px;
	}

	.recipe-outer-container-ingredient-text
	{
		grid-template-columns: 	calc(100% - 270px) 250px;
	}
}

@media only screen and (max-width: 960px)
{
	.recipe-outer-container-title-image-detail
	{
		grid-template-columns: 	100%;
	}
	
	.recipe-outer-container-ingredient-text
	{
		grid-template-columns: 	100%;
	
		padding:			0px 0px 0px 0px;
	}

	.recipe-inner-container-ingredient
	{
		position:			relative;
		grid-column:		1;
		top:				auto;
		
		max-height:			none;
		padding:			0px;
	
		background-color:	var(--objcolor_white);
		border:				0 none;
		border-radius:		0px;
	}

	.recipe-inner-scroll-container-ingredient
	{
		max-height:			none;
		padding:			0px 0px 0px 0px;
	}

	.recipe-inner-container-ingredient h2,
	.recipe-inner-container-text h2
	{
		margin-top:			0.83em;
	}
	
	.recipe-rwd-pc{display: none;}
	.recipe-rwd-mob{display: block;}
}

@media only screen and (max-width: 768px)
{
	.recipe-title-container
	{
		width:				100%;
		overflow-wrap: 		break-word;
	}
	
	.recipe-title
	{
		width:				calc(100% - 68px);
	}
	
	.recipe-scrollable-image-outer-container
	{
		margin:				10px 0px 10px 0px;
		
		width:				100%;
		height:				250px;
		
		overflow:			hidden;
	}
	
	.recipe-scrollable-image-inner-container
	{		
		width:				100%;
		height:				250px;
		
		scroll-snap-type:	x mandatory;
		scroll-behavior:	smooth;
		
		overflow-x:			scroll;
		overflow-y:			hidden;
		scrollbar-width:	none;
		white-space:		nowrap;
	}
	
	.recipe-image-wrapper
	{
		width:				100%;
		height:				250px;
		
		scroll-snap-align:	center;
	}

	.recipe-scrollable-image-arrow-left,
	.recipe-scrollable-image-arrow-right
	{
		position:			absolute;
		display:			block;
		top:				75px;
		left:				0px;
		
		width:				25px;
		height:				100px;
		
		background: 		url("../Icon/ArrowLeft.png") center no-repeat;
		background-size: 	15px 15px;
		background-color:	var(--objcolor_blue_light);
		opacity:			0.7;
		
		cursor:				pointer;
	}
	.recipe-scrollable-image-arrow-right
	{
		right:				0px;
		left:				auto;
		
		background: 		url("../Icon/ArrowRight.png") center no-repeat;
		background-size: 	15px 15px;
		background-color:	var(--objcolor_blue_light);
	}
}



/*-------------------------------------------*/
/*              ALLES OVER PAGE              */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE RECIPE PAGES */

.allesover-outer-container /*flex-containerallesover*/
{
	display:			flex;
	flex-wrap:			wrap;
}

.allesover-text-container     /*flex-itemtekstallesover*/
{
	float:				left;
	
	width:				70%;
}

.allesover-image-container     /*flex-itemfotoallesover*/
{
	float:				right;
	margin-left:		2%;
	
	width:				28%;
	
	font-size:			var(--fontsize_small);
}

.allesover-button-vega
{
	float:				right;
	margin-top:			16px;
}

.allesover-itemcontainer-outer-wrapper .category-itemcontent-recipe
{
	display:			none;
	z-index:			var(--zind_high3);
}

.allesover-itemcontainer-link-wrapper
{
	text-decoration: 	none;
	overflow:			hidden;
}

.allesover-itemcontainer-outer-wrapper
{
	margin:				0px 0px 0px 0px;
	
	width:				100%;
	height:				300px;
}

.allesover-itemcontainer-outer-wrapper + .allesover-itemcontainer-outer-wrapper
{
	margin:				20px 0px 0px 0px;
}

.allesover-itemcontainer-inner-wrapper
{
	display:			grid;
	grid-template-columns: 	300px auto;
	grid-column-gap: 	20px;
	
	width:				100%;
	height:				300px;
	padding:			20px;
	
	background-color:	var(--objcolor_blue_faint);
	transition:			background-color 0.1s;
	border-radius:		10px;
	
	color: 				var(--textcolor_black);
}
.allesover-itemcontainer-inner-wrapper:hover
{
	background-color:	var(--objcolor_blue_light);
}

.allesover-itemcontainer-image-wrapper
{
	display:			flex;
	
	width:				300px;
	height:				260px;
	justify-content:	center;
	
	border-radius:		10px;
	
	text-align:			center;
}

.allesover-itemcontainer-image
{
	display:			block;
	
	width: 				100%;
	height: 			100%;
	
	border-radius:		10px;
	object-fit: 		cover;
}

.allesover-itemcontainer-information
{
	position:			relative;
}

.allesover-itemcontainer-title
{
	margin-top:			-15px;
	float:				right;
	
	width:				100%;
	
	text-align:			right;
}

.allesover-itemcontainer-text-information
{
	position:			relative;
	float:				right;
	
	width:				80%;
	max-height:			7.2em;
	
	color: 				var(--textcolor_black);
	text-align:			right;
	overflow:			hidden;
}

.allesover-itemcontainer-detail-information
{
	display:			grid;
	grid-template-columns: 	120px 160px;
	grid-column-gap: 	20px;
	position:			absolute;
	bottom:				0px;
	right:				0px;
	
	width:				300px;
	
	color: 				var(--textcolor_black);
}

.allesover-itemcontainer-detail-name
{
	font-size:			20px;
	font-weight:		bold;
}

.allesover-itemcontainer-detail-value
{
	font-size:			20px;
}

/* Search Page Transition */
@media only screen and (max-width: 1250px)
{
	.allesover-itemcontainer-title
	{
		font-size:		26px;
	}
}

@media only screen and (max-width: 1038px)
{
	.allesover-itemcontainer-information
	{
		display: 		flex;
		
		align-items: 	center;
		
		text-align:		right;
		justify-content:right;
	}
	
	.allesover-itemcontainer-title
	{
		margin:			0px 0px 0px 0px;
		
		font-size:		26px;
	}
	
	.allesover-itemcontainer-text-information,
	.allesover-itemcontainer-detail-information
	{
		display:		none;
	}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.allesover-text-container     /*flex-itemtekstallesover*/
	{
		width:				100%;
	}

	.allesover-image-container     /*flex-itemfotoallesover*/
	{
		float:				left;
		margin-left:		0px;
		
		width:				100%;
		
		text-align:			center;
	}

	.allesover-image-container h2    /*flex-itemfotoallesover*/
	{
		display:			none;
	}
	
	.allesover-itemcontainer-link-wrapper
	{
		display:		none;
	}

	.allesover-itemcontainer-outer-wrapper .category-itemcontent-recipe
	{
		display:		flex;
	}
	
	.allesover-itemcontainer-outer-wrapper
	{
		height:			200px;
	}
}



/*-------------------------------------------*/
/*                ANDERE CHEFS               */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR INSPIRATIEPAGINA STYLE */
/* Generally, a menu on the left with large blocks on the right describing recipes */

/*Forces links to only underline, not discolor. Only used in the list format, which is used in Andere Chefs, and Handig Keukenhacks*/
.anderechefs-menu-link
{
	color: 				var(--textcolor_black);
	text-decoration: 	none;
}
.anderechefs-menu-link:hover
{
	text-decoration: 	underline;
	cursor:				pointer;
}

/* Maybe this should be gridded */
.anderechefs-grid-container
{
	display: 			grid;
	grid-template-columns: 	25% 73%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
}

.anderechefs-filter-container		/* inspfiltercontent */
{
	width: 				100%;
	height:				fit-content;
	padding: 			16px 16px 16px 16px;
	
	background-color: 	var(--objcolor_blue_light);
	border: 			solid 5px var(--objcolor_blue_medlight);
	border-radius: 		5px;
}

.anderechefs-content-container	/* inspcontent */
{
	display: 			grid;
	grid-template-columns: 	100%;
	grid-row-gap: 		20px;
	
	width: 				100%;
}

.anderechefs-container-top
{
	display: 			grid;
	grid-template-columns: 	calc(100% - 25px) 25px;
	grid-row-gap: 		10px;
}

.anderechefs-title
{
	margin-top:			0px;
	
	font-family: 		var(--fontfam_title);
	font-size: 			var(--fontsize_h2);
}

.anderechefs-pagetop-button
{
	float: 				right;
	
	font-family: 		var(--fontfam_standard);
	font-size: 			var(--fontsize_standard);
}

.anderechefs-pagetop-image
{
}

.anderechefs-content-container .generic-text-container	/* inspcontent */
{
	scroll-margin-top:	calc(var(--size_menu_height) + 20px);
}


/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.anderechefs-grid-container
	{
		grid-template-columns: 	100%;
	}

	.anderechefs-content-container	/* inspcontent */
	{
		grid-row-gap: 		10px;
	}

	.anderechefs-title
	{
		width:				calc(100% - 25px);
	}
	
	.anderechefs-content-container .generic-text-container	/* inspcontent */
	{
		padding-top:		15px;
		
		scroll-margin-top:	calc(var(--size_menu_height_big) + 10px);
	}
}



/*-------------------------------------------*/
/*                SEARCH PAGE                */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE SEARCH PAGES */

.search-outer-container
{
	font-size:			0; /* Due to random whitespace being added */
}

/*Search Filter Attributes*/
.search-filter-outer-container /*filtercont*/
{
	display:			inline-block;
	
	font-size:			var(--fontsize_standard);
	vertical-align: 	top;
}

.search-filter-inner-container /*Filter*/
{
	margin:				0px 0px 10px 0px;
	
	width: 				200px;
	
	background-color: 	var(--objcolor_blue_light);
	border: 			5px solid var(--objcolor_blue_medlight);
	border-radius: 		5px;
}

.search-filter-category-container /*SelectBox*/
{
	position: 			relative;
	
	padding: 			10px 10px 10px 10px;
	
	font-weight: 		bold;
	cursor: 			pointer;
}

.search-filter-option-container /*FilterOptions*/
{
	display: 			none;
	margin: 			0px 0px 0px 5px;
	
	width: 				calc(100% - 10px);
	padding: 			5px 5px 5px 5px;
	
	background-color: 	var(--objcolor_white_true);
}

.search-filter-option-container label
{
	display: 			block;
	
	transition: 		background-color 0.2s ease;
}

.search-filter-option-container label:hover
{
	background-color: 	var(--objcolor_blue_light);
}

.search-filter-options-linesplit /*linesplit*/
{
	margin:				0px 10px 0px 10px;
	
	width: 				calc(100% - 20px);
	height:				1px;
	
	background-color: 	var(--objcolor_blue_medlight);
}
.search-filter-options-linesplit:last-child
{
	height:				0px;
}

.arrow-icon				/*arrowTool*/
{
	display: 			inline-block;
	margin:				-3px 2px 0px 0px;
	transition:			margin 0.2s ease;
	
	padding: 			2px;
	
	border: 			solid var(--objcolor_black_true);
	border-width: 		0 2px 2px 0;
	transition: 		transform 0.2s ease;
	
	vertical-align:		middle;
}
.arrow-left				/*left*/
{
	margin:				0px 0px 0px 0px;
	
	transform: 			rotate(135deg);
	-webkit-transform: 	rotate(135deg);
	-moz-transform: 	rotate(135deg);
}
.arrow-up				/*up*/
{
	margin:				0px 0px 0px 0px;
	
	transform: 			rotate(-135deg);
	-webkit-transform: 	rotate(-135deg);
	-moz-transform: 	rotate(-135deg);
}
.arrow-right			/*right*/
{
	margin:				-3px 4px 0px 1px;
	
	transform: 			rotate(-45deg);
	-webkit-transform: 	rotate(-45deg);
	-moz-transform: 	rotate(-45deg);
}
.arrow-down				/*down*/
{
	margin:				-4px 3px 0px 2px;
	
	transform: 			rotate(45deg);
	-webkit-transform: 	rotate(45deg);
	-moz-transform: 	rotate(45deg);
}

/*Search Container*/
.search-console-container /*searchingcont*/
{
	display:			inline-block;
	margin: 			0px 0px 0px 20px;
	
	width:				calc(100% - 220px);
	min-width: 			500px;
	
	font-size:			var(--fontsize_standard);
}

.search-console-submission-container
{
	position:			relative;
	z-index:			var(--zind_mid1);
	
    background-color:	var(--objcolor_blue_medium);
	border-radius: 		5px;
	outline:			none;
}

.search-console-submission-text /*search_textpag*/
{
	position:			relative;
	z-index:			var(--zind_mid1);
	
    width: 				calc(100% - 104px);
    height: 			52px;
    padding: 			14.6px 0px 15.4px 20px;
	
    background-color: 	var(--objcolor_none);
    border: 			0 none;
	outline:			none;
	
    font-family: 		var(--fontfam_standard);
    font-size: 			var(--fontsize_standard);
    color: 				var(--textcolor_white);
}
.search-console-submission-container:has(>.search-console-submission-text:focus)
{
    background-color: 	var(--objcolor_blue_medlight);
}
.search-console-submission-text::placeholder 
{
	color: 				var(--textcolor_white);
}

.search-console-submission-button /*search_buttonpag*/
{
	position: 			relative;
    float: 				right;
	z-index:			var(--zind_mid1);
	
    width: 				52px;
    height: 			52px;
	
    background: 		url("../Icon/Zoekloep.png") center no-repeat;
	background-size: 	22px 22px;
    border: 			0 none;
	outline: 			none;
	
    text-align: 		center;
    cursor: 			pointer;
}

.search-console-filter-button /*search_buttonpag*/
{
	display:			none;
	position: 			relative;
    float: 				right;
	z-index:			var(--zind_mid1);
	
    width: 				52px;
    height: 			52px;
	
    background: 		url("../Icon/FilterWhite.png") center no-repeat;
	background-size: 	26px 26px;
    border: 			0 none;
	outline: 			none;
	
    text-align: 		center;
    cursor: 			pointer;
}

.search-console-filter-outer-container
{
	display:			none;
	position:			relative;
	margin:				-5px 0px 0px 0px;
	
	width:				100%;
	padding:			10px 10px 10px 10px;
	
	background-color:	var(--objcolor_blue_faint);
}

.search-console-filter-inner-container
{
	display: 			grid;
	grid-template-columns: 	100%;
	grid-column-gap: 	0px;
	grid-row-gap: 		0px;
	position:			relative;
	margin:				0px 0px 0px 0px;
	
	width:				100%;
}

.search-console-filter-item-container
{
	position:			relative;
	margin:				5px 0px 0px 0px;
	
	width:				100%;
	height:				50px;
	padding:			0px 20px 0px 20px;
	
	background-color:	var(--objcolor_blue_light);
	border-radius:		5px 5px 5px 5px;
	
	line-height:		50px;
}

.search-console-filter-arrow-icon		/*arrowTool*/
{
	position:			relative;
	display: 			inline-block;
	transition:			margin 0.2s ease;
	float:				right;
	
	padding: 			4px;
	
	border: 			solid var(--objcolor_black_true);
	border-width: 		0 3px 3px 0;
	transition: 		transform 0.2s ease;
	
	vertical-align:		middle;
}
.search-console-filter-arrow-left				/*left*/
{
	margin:				20px 1px 0px 0px;
	
	transform: 			rotate(135deg);
	-webkit-transform: 	rotate(135deg);
	-moz-transform: 	rotate(135deg);
}
.search-console-filter-arrow-up				/*up*/
{
	margin:				23px 2px 0px 0px;
	
	transform: 			rotate(-135deg);
	-webkit-transform: 	rotate(-135deg);
	-moz-transform: 	rotate(-135deg);
}
.search-console-filter-arrow-right			/*right*/
{
	margin:				20px 2px 0px 0px;
	
	transform: 			rotate(-45deg);
	-webkit-transform: 	rotate(-45deg);
	-moz-transform: 	rotate(-45deg);
}
.search-console-filter-arrow-down				/*down*/
{
	margin:				20px 2px 0px 0px;
	
	transform: 			rotate(45deg);
	-webkit-transform: 	rotate(45deg);
	-moz-transform: 	rotate(45deg);
}

.search-console-filter-option-container-check,
.search-console-filter-option-container-slider /*FilterOptions*/
{
	display: 			none;
	grid-template-columns: 	49% 49%;
	grid-column-gap: 	2%;
	grid-row-gap: 		0px;
	margin:				-5px 0px 0px 0px;
	
	width: 				100%;
	padding: 			15px 10px 10px 10px;
	
	background-color: 	var(--objcolor_white_true);
	border-radius:		0px 0px 5px 5px;
}
.search-console-filter-option-container-slider{
	grid-template-columns: 	100%;
	
	padding:			15px 0px 10px 0px;
}

.search-console-filter-option-container-check label
{
	display: 			block;
	
	transition: 		background-color 0.2s ease;
}
.search-console-filter-option-container-check label:hover
{
	background-color: 	var(--objcolor_blue_light);
}

.search-console-result-container /* SortingResults*/
{
	position: 			relative;
	margin: 			-5px 0px 0px 0px;
	z-index: 			var(--zind_low2);
	
    width:				100%;
    height:				52px;
    padding:			19px 14px 14px 14px;
	
	background-color:	var(--objcolor_blue_light);
    border:				0 none;
	border-radius:		0px 0px 5px 5px;
	outline:			none;
	
    color:				var(--textcolor_black);
}

.search-console-result-text
{
	float:				left;
}

.search-console-sort-text
{
	float:				right;
	
	width:				100px;
}

.search-console-sort-dropdown
{
	width:				100px;
}

.search-result-output-container /*#listtool*/
{
	margin: 			20px 0px 0px 0px;
	
	width: 				100%;
}

.search-result-grid-container
{
	display: 			grid;
	grid-template-columns: 	49% 49%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
	
	word-wrap: 			break-word;
}
	
.search-result-output-container .category-itemcontent-recipe
{
	width:				100%;
}

.search-result-nomatch
{
	position: 			relative;
	margin: 			10px 10px 10px 0px;
	
	max-width:			100%;
	max-height: 		300px;
	aspect-ratio:		auto;
	
	border-radius: 		10px;
}

/* Autocomplete functionality */
.search-autocomp-container		/*search-autocomp-items*/
{
	position: 			relative;
	inset: 				100% 0 0 0;
	z-index: 			var(--zind_mid3);
	
	border: 			1px solid var(--objcolor_gray_base);
	border-bottom: 		none;
	border-top: 		none;
}

.search-autocomp-item-ingr,
.search-autocomp-item-recipe
{
	width:				100%;
	height:				40px;
	padding: 			10px 20px 10px 20px;
	
	border-bottom: 		1px solid var(--objcolor_gray_base);
	
	cursor: 			pointer;
}
.search-autocomp-item-ingr  		{background-color: var(--objcolor_white_true);}
.search-autocomp-item-recipe		{background-color: var(--objcolor_blue_light);}
.search-autocomp-item-ingr:hover	{background-color: var(--objcolor_gray_medlight);}
.search-autocomp-item-recipe:hover	{background-color: var(--objcolor_blue_medlight);}

.search-autocomp-item-innercontainer
{
	overflow:			hidden;
	white-space:		nowrap;
}

.search-autocomp-topedge
{
	position:			relative;
	margin-top:			-5px;
	z-index: 			var(--zind_mid3);
	
	height:				45px;
	padding-top: 		15px;
}

/*when navigating through the items using the arrow keys:*/
.search-autocomp-keyfocus		/*autcomplete-active*/
{
	background-color: 	var(--objcolor_blue_dark) !important;
	
	color: 				var(--objcolor_white_true);
}

/* Search Page Transition */
@media only screen and (max-width: 1038px)
{  
	.search-console-container
	{
		display: 			block;
		margin-left: 		0px;
		
		width: 				100%;
		min-width: 			unset;
	}
	
	.search-filter-outer-container
	{
		display:			none;
	}

	.search-console-filter-button /*search_buttonpag*/
	{
		display:			block;
	}
	
	.search-console-filter-option-container-check /*FilterOptions*/
	{
		grid-template-columns: 	32% 32% 32%;
	}
	
	.search-result-grid-container
	{
		grid-template-columns: 	100%;
		grid-column-gap: 	0%;
		grid-row-gap: 		10px;
	}
	
	.search-result-nomatch
	{ 
		display:			block;
		margin: 			10px auto 10px auto;
		
		width:				auto;
		max-width:			100%;
		object-fit:			contain;
	}
}

@media only screen and (max-width: 500px)
{
	.search-console-filter-option-container-check /*FilterOptions*/
	{
		grid-template-columns: 	49% 49%;
	}
}

@media only screen and (min-width: 1038px)
{  
	.src-rwd-pc{display: none!important;}
}


/*-------------------------------------------*/
/*               PERSONAL PAGE               */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR THE PERSONAL PAGES AND ITS FUNCTIONALITY */

.my-personal-grid-container
{
	display: 			grid;
	grid-template-columns: 	25% 73%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
}

.my-personal-outer-container-menu
{
	width: 				100%;
	height:				fit-content;
	padding: 			16px 16px 16px 16px;
	
	background-color: 	var(--objcolor_blue_light);
	border: 			solid 5px var(--objcolor_blue_medlight);
	border-radius: 		5px;
	
	font-family:		var(--fontfam_title);
}

.my-personal-outer-container-content
{
	display: 			grid;
	grid-template-columns: 	100%;
	grid-row-gap: 		20px;
	
	width: 				100%;
}

.my-personal-title-box
{
	float:				right;
	
	text-align:			right;
}

.my-personal-top-title
{
	margin-top:			0px;
	float:				right;
	
	width:				100%;
	
	text-align:			right;
}

.my-personal-menu-link
{
	color: 				var(--textcolor_black);
	text-decoration: 	none;
	font-size:			var(--fontsize_h2);
	word-wrap: 			break-word;
}

.my-personal-menu-link:hover
{
	text-decoration: 	underline;
	cursor:				pointer;
}

.my-personal-fav-console-result-container	  /* SortingResultsFav*/
{
	margin: 			-5px 0px 0px 0px;
	z-index: 			var(--zind_low2);
	
    width:				100%;
    height: 			50px;
    padding:			14px 14px 14px 14px;
	
	background:			var(--objcolor_blue_light);
    border:				0;
	border-radius: 		5px 5px 5px 5px;
	outline:			none;
	
    font-size:			var(--fontsize_standard);
    font-family:		var(--fontfam_standard);
    color:				var(--textcolor_white);
}


.my-personal-fav-result-output-container /*#listtool*/
{
	width: 				100%;
}

.my-personal-fav-result-grid-container
{
	display: 			grid;
	grid-template-columns: 	49% 49%;
	grid-column-gap: 	2%;
	grid-row-gap: 		20px;
	
	word-wrap: 			break-word;
}
	
.my-personal-fav-result-output-container .category-itemcontent-recipe
{
	width:				100%;
}

.my-personal-fav-heart-container	/* heart */
{
	display:			inline-block;
	position: 			absolute;
	margin:				22px 0px 0px 20px;
	z-index: 			var(--zind_low1);
	
	width: 				38px;
	height: 			36px;
}

.my-personal-fav-heart-front,
.my-personal-fav-heart-back
{
	position: 			absolute;
	margin: 			5px 0px 0px 0px;
	
	width: 				18px;
	height: 			28px;
	
	background-color: 	var(--objcolor_heart_border_off);
	border:				3px solid var(--objcolor_heart_fill_off);
	border-radius: 		20px 20px 0 0;
	transition: 		border-color 0.2s, background-color 0.2s;
	transition-timing-function:	ease-in-out;
}

.my-personal-fav-heart-front		/* heartbefore */
{
	inset: 				0px 0px 0px 19px;
	z-index: 			var(--zind_low1);
	
	border-width: 		2px 0px 0px 2px;
	transform: 			rotate(-45deg);
	transform-origin: 	0 100%;
}

.my-personal-fav-heart-back		/* heartafter */
{
	inset: 				0px 0px 0px 1px;
	z-index: 			var(--zind_low2);
	
	border-width: 		0px 0px 0px 2px;
	transform: 			rotate(45deg);
	transform-origin: 	100% 100%;
}

.my-personal-fav-heart-container:hover .my-personal-fav-heart-front
{
	background-color: 	var(--objcolor_heart_fill_hover)!important;
	border-color: 		var(--objcolor_heart_border_hover)!important;
}

.my-personal-fav-heart-container:hover .my-personal-fav-heart-back
{
	background-color: 	var(--objcolor_heart_fill_hover)!important;
	border-color: 		var(--objcolor_heart_border_hover)!important;
}

.fav-rwd-mob{display: none;}

.my-personal-bosc-button-outer-container
{
	display: 			grid;
	grid-template-columns: 	22% 22% 22% 22%;
	grid-column-gap: 	4%;
	grid-auto-flow:		dense;
	
	width:				100%;
	height:				40px;
	padding:			5px 20px 5px 20px;
	
	border-radius:		5px;
	background-color:	var(--objcolor_blue_medium);
	
	word-wrap: 			break-word;
}

.my-personal-bosc-button-wrapper-text
{
	width:				100%;
	height:				30px;
	
	border-radius:		5px;
	background-color:	var(--objcolor_blue_light);
	
	text-align:			center;
	line-height:		30px;
	word-wrap: 			break-word;
	cursor:				pointer;
}

.my-personal-bosc-button-wrapper-image
{
	width:				100%;
	height:				50px;
	
	border-radius:		5px;
	background-color:	var(--objcolor_blue_light);
	
	text-align:			center;
	line-height:		50px;
	word-wrap: 			break-word;
	cursor:				pointer;
}

@media (hover: hover) {
	.my-personal-bosc-button-wrapper-text:hover,
	.my-personal-bosc-button-wrapper-image:hover
	{
		background-color:	var(--objcolor_blue_medlight);
	}
}

.my-personal-bosc-grid-container
{
	display: 			grid;
	grid-template-columns: 	auto 55%;
	grid-column-gap: 	30px;
	grid-row-gap: 		20px;
	grid-auto-flow:		dense;
	
	word-wrap: 			break-word;
}

.my-personal-bosc-outer-ingredient-container
{
	grid-column:		1;
}

.my-personal-bosc-outer-recipe-container
{
	grid-column:		2;
}

.my-personal-bosc-inner-ingredient-container
{
	display: 			grid;
	grid-template-columns: 	100%;
	grid-auto-flow:		dense;
	
	width:				100%;
	
	word-wrap: 			break-word;
}

.my-personal-bosc-inner-ingredient-subcat-container
{
	display: 			grid;
	grid-template-columns: 	auto 30px;
	
	width:				100%;
	
	word-wrap: 			break-word;
}

.my-personal-bosc-inner-ingredient-subcat-title
{	
	font-style:			italic;
	font-weight:		bold;
	font-size:			var(--fontsize_standard);
}

.my-personal-bosc-inner-ingredient-subcat-container + .my-personal-bosc-inner-ingredient-subcat-title
{
	margin:				10px 0px 0px 0px;
}

.my-personal-bosc-ingredient-item-inner-text
{
	display: 			flex;
	
	min-height:			20px;
	padding:			5px 0px;
	
	border-radius:		5px 0px 0px 5px;
	
	align-items:		center;
}

.my-personal-bosc-ingredient-item-inner-label
{
	margin:				0px 0px 0px 5px;
}

.my-personal-bosc-ingredient-item-inner-delete
{
	display: 			flex;
	
	min-height:			30px;
	
	border-radius:		0px 5px 5px 0px;
	
	align-items:		center;
}

.my-personal-bosc-ingredient-item-inner-delete:hover
{
	cursor:				pointer;
}

.my-personal-bosc-inner-recipe-container
{
	display: 			grid;
	grid-template-columns: 	30px auto 130px;
	
	word-wrap: 			break-word;
}

.my-personal-bosc-recipe-item-inner-name
{
	display: 			flex;
	
	min-height:			20px;
	padding:			5px;
	
	align-items:		center;
}

.my-personal-bosc-recipe-item-inner-link
{
	display: 			flex;
	float:				right;
	
	min-height:			30px;
	
	border-radius:		5px 0px 0px 5px;
	
	align-items:		center;
}

.my-personal-bosc-recipe-item-inner-amount
{
	display: 			flex;
	
	min-height:			20px;
	padding:			5px;
	
	border-radius:		0px 5px 5px 0px;
	
	align-items:		center;
}

.my-personal-bosc-recipe-item-inner-name:nth-child(6n+2),
.my-personal-bosc-recipe-item-inner-link:nth-child(6n+1),
.my-personal-bosc-recipe-item-inner-amount:nth-child(6n+3)
{
	background-color:	var(--objcolor_blue_faint);
}

.my-personal-bosc-recipe-item-input-type
{
	height:				20px;
	width:				55px;
	margin:				0px 5px 0px 0px;
	
	font-size: 			var(--fontsize_standard);
}

.bosc-rwd-mob{display: none;}
.bosc-rwd-text{display: block;}
	
@media only screen and (max-width: 960px)
{
	.my-personal-menu-link
	{
		font-size:			var(--fontsize_standard);
	}
	
	.my-personal-fav-heart-container
	{
		position:			relative;
		float:				right;
		margin:				22px 15px 0px 15px;
	}
	
	.fav-rwd-pc{display: none;}
	.fav-rwd-mob{display: inline-block;}
}

/* Phone or Tablet Setting */
@media only screen and (max-width: 768px)
{
	.my-personal-menu-link
	{
		font-size:			var(--fontsize_h2);
	}
	
	.my-personal-grid-container,
	.my-personal-bosc-grid-container
	{
		grid-template-columns: 	100%;
	}

	.my-personal-title-box,
	.my-personal-top-title
	{
		float:				left;
		
		text-align:			left;
	}

	.my-personal-bosc-outer-ingredient-container
	{
		grid-column:		1;
		grid-row:			2;
	}

	.my-personal-bosc-outer-recipe-container
	{
		grid-column:		1;
		grid-row:			1;
	}
	
	.my-personal-bosc-button-outer-container
	{
		grid-template-columns: auto auto auto auto;
		grid-column-gap: 	5px;
	
		height:				60px;
		padding:			5px 5px 5px 5px;
	}

	.bosc-rwd-mob{display: block;}
	.bosc-rwd-text{display: none;}
}



/*-------------------------------------------*/
/*                OMREKENTOOL                */
/*-------------------------------------------*/

/* ATTRIBUTES ONLY USED FOR OMREKENTOOL */

.omreken-container-text
{
	margin:				10px 0px 10px 0px;
	
	width:				100%;
	padding:			20px;

	background-color:	var(--objcolor_blue_light);
	border:				5px solid var(--objcolor_blue_medlight);
	border-radius:		5px;
}

.omreken-container-fieldset
{
	width:				100%;
	padding:			0px;
	
	border:				0px;
}
.omreken-grid-container-size, /*grid-containeromrekentool*/
.omreken-grid-container-ingr
{
	display: 			grid; 
	grid-template-columns: 	auto auto;
	grid-column-gap: 	5px;
	
	background-color: 	var(--objcolor_gray_base);
	border-radius:		5px;
}

.omreken-itemcontent-wrapper /*grid-itemomrekentool*/
{
	display: 			grid; 
	grid-template-columns: 	100%;
	grid-row-gap: 		5px;
	
	background-color: 	var(--objcolor_white_true);
}

.omreken-itemcontent-deeg-out, 
.omreken-itemcontent-deeg-in,
.omreken-itemcontent-vul-out, 
.omreken-itemcontent-vul-in,
.omreken-itemcontent-size	/*grid-itemomrekentool*/
{
	padding: 			10px;
	
	background-color: 	var(--objcolor_white_true);
}

.omreken-inputbox-text
{
	display:			inline-block;
	
	width:				85px;
}

.omreken-inputbox-amount
{
	width:				100px;
}
.omreken-inputbox-unit
{
}
.omreken-inputbox-ingr
{
	width:				120px;
}

.omreken-outputbox
{
	width:				120px;
}

.omreken-minus-icon
{
	margin-top:			4px;
}

@media only screen and (max-width: 768px)
{
	.omreken-grid-container-size,
	.omreken-grid-container-ingr
	{
		grid-template-columns: 	100%;
		grid-row-gap: 		5px;
	}

	.omreken-outputbox
	{
		width:				287px;
	}
}

@media only screen and (max-width: 520px)
{
	.omreken-itemcontent-deeg-out, 
	.omreken-itemcontent-deeg-in,
	.omreken-itemcontent-vul-out, 
	.omreken-itemcontent-vul-in
	{
		padding:			10px 0px 10px 0px;
	}
	
	.omreken-grid-container-ingr .omreken-itemcontent-wrapper  .omreken-inputbox-text
	{
		display:			none;
	}
	
	.omreken-inputbox-ingr
	{
		width:				143px;
	}
	
	.omreken-outputbox
	{
		width:				310px;
	}
}

@media only screen and (max-width: 400px)
{
	.omreken-outputbox
	{
		width:				280px;
	}
}



/* Search Page Transition */
/* @media only screen and (max-width: 1038px) */
/* {} */
/* Phone Smooth Transition */
/* @media only screen and (max-width: 960px) */
/* {} */
/* Phone or Tablet Setting */
/* @media only screen and (max-width: 768px) */
/* {} */
/* Potential Phone-Only Setting */
/* @media only screen and (max-width: 600px) */
/* {} */