/*** basic site styles - always included ***/

/***********************************************************************************************/
#site-new-user-form {
	& button, input { width:100%; }
	& dd:last-of-type { max-width: 22em; color: darkred; font-size: 90%; border: solid 2px; padding: 9px; }
}
/***********************************************************************************************/
#site-login-x { display:flex; flex-flow: row wrap; gap: 0 2em; margin: 1em 0 2em; }
/*#site-login-x > div > div:first-child, #site-login-x + div { margin-bottom: .5em;  }*/
#site-login-links-div > a { font-style: italic; }
#site-login-form {
	& button, input[type="email"], & input[type="password"] { width:100%; }
/*	border-bottom: solid 1px black;*/
}
#reset-pw-anchor { margin-left: 1em; }
#site-login-or-ruler { height: 1px; margin: 2em 0; line-height: 0; background: black; text-align: center; }
#site-login-or-ruler > span { padding: 0 1em; background: white; }

/***********************************************************************************************/
#site-user-data-form {
	& input { width: 26em; }
}
#site-email-careful { max-width:28em; }
/***********************************************************************************************/
#site-menu-div1 {
	background: hsl(0 0% 100% / .7);
	& > ul {
		display: flex; flex-flow: row wrap; white-space: nowrap;
		& > li {
			flex: 1 0 auto; position: relative; border: solid hsl(0 0% 50% / .7); border-width: 0 1px 1px 0; border-radius: .5em .5em 0 0;
			&.last-clicked, &.checked-submenu { background: hsl(0 0% 100% /.45); } /* top level, active item */
			& > ul {
				& ul { margin-left: 5px; min-width: max-content; }
				& li > *:not(ul) { width: 100%; padding: 0 .5em; text-align: left; line-height: 2; }
				& li.last-clicked > :not(ul):last-child::after { padding-left: 5px; content:'\2022'; background: none; } /* dot for last clicked sub menu item */
			}
			& ul { position: absolute; z-index: 10; min-width: 60%; background-color: #fff; box-shadow: 1px 1px 3px 0 #555; }
		}
/*		& > li:not(:first-child) ul { left: 50%; transform: translate(-50%, 0); } */

	}
	& button { width: 100%; border: none; background: none; }
	& button:focus { box-shadow: none; }
	& a { display: inline-block; color: inherit; text-decoration: none;  }
	& a:focus { box-shadow: none; }
	& li:not(.checked-submenu) > ul { display: none; }
	& ul > li.child-submenu-active > ul > li:not(.checked-submenu) { display: none; }
}

@media (hover: hover) {
	#site-menu-div1 li:not(.checked-submenu):not(.last-clicked):hover { background: hsl(0 0% 0% /.07); }
}
/*
@media (hover: none) {
	#site-menu-div1 > ul > li.checked-submenu { background: hsl(0 0% 100% /.45); }
}
*/

#site-footer-div1 { border-top: solid 1px hsl(0 0% 50% /.7); background: hsl(0 0% 100% / .7); }

/* item categories */
.mi-products ul, .mi-products li:not([class*="ic-"]) { border-color: inherit; }
.mi-products li { border-left-style: solid; border-left-width: 4px; }
#items-div > div { border-left-style: solid; border-left-width: 3px; }
.ic-bakery-dairy { border-color: bisque; }
.ic-dessert { border-color: chocolate; }
.ic-kiosk { border-color: orange; }
.ic-seafood { border-color: navy; }
.ic-fruit-veg { border-color: limegreen; }
.ic-ready-meals { border-color: firebrick; }
.ic-colonial { border-color: goldenrod; }
.ic-nonfood { border-color: silver; }
.ic-butcher { border-color: rosybrown; }


.mi-search > button::after { display: inline-block; width: .8125em; height: 1em; margin: 0 0 -1px 6px; content: ''; background: url(/static/pics/magnifier1.svg) right bottom/contain no-repeat; }
.mi-basket > button::after { display: inline-block; width: .8125em; height: 1em; margin: 0 0 0 6px; content: ''; background: url(/static/pics/basket1.svg) right bottom/contain no-repeat; }
.mi-user-account > button::after { display: inline-block; width: 1em; height: 1em; margin: 0 0 -2px 6px; content: ''; background: url(/static/pics/user1.svg) right bottom/contain no-repeat; }

.sim-cur-lang { flex: .1 2em !important; }
.sim-cur-lang > button { background: center / 1.2em no-repeat !important; }
.sim-cur-lang > button::after { content: '\00a0'; }
html[lang="en"] .sim-cur-lang > button { background-image: url(/static/pics/flag-gb.svg) !important; }
html[lang="da"] .sim-cur-lang > button { background-image: url(/static/pics/flag-dk.svg) !important; }

/*
html[lang="en"] .sim-cur-lang > button::after { margin-left: 3px; content: '🇬🇧'; }
html[lang="da"] .sim-cur-lang > button::after { margin-left: 3px; content: '🇩🇰'; }
*/
/***********************************************************************************************/

#items-outer-div {
	margin: auto; max-width: 94%; padding: 2em 0; /*font-size: .875rem;*/
	/*&.as-list { max-width: 48em; }*/
	& > h1 { margin-left: .5em; }

	&.hide-img > #items-div .item-img { display: none; }
	&.as-list {
		& > #items-div {
			& > div { flex-flow: row wrap; /*justify-content: flex-end;*/ gap: 6px 1rem; } /* list view */
			& .item-img { max-width: 5rem;  }
		}
		& .item-info-div { flex: 1 1 7rem; justify-content: space-between; /*align-items: baseline;*/ gap: 1em; }
		& .item-select-div { flex: 0 1 23rem; }
	}
	&:not(.as-list) {
		/*& .item-img { min-height: 6rem; }*/
		& > #items-div {
			display: grid; grid: auto-flow / repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 5px;
			& > div { flex-flow: column nowrap; justify-content: space-between; border-bottom: solid 1px hsl(0 0% 85%); }  /* tiles view */
			& .item-info-div > div:first-child { flex: 0 1 3rem; } /* item text */
		}
		& .item-info-2-div { flex: 1; }

	}
	&:not([data-list-class="item-search"]) > #item-search-form { display: none; }
}

#items-show-img-button {
	float: right; margin-right: 12px; padding: 0; width: 24px; height: 24px;
	color: transparent; background: #fff no-repeat 3px 2px/76% url("/static/pics/svgrepo-com-camera.svg");
	border: solid 1px black; border-radius: 5px;
}
.hide-img #items-show-img-button { opacity: .4; }

#items-as-tiles-button {
	float: right; margin-right: 12px; padding: 0; width: 24px; height: 24px;
	color: transparent; background: #fff no-repeat 4px 5px/60% url("/static/pics/svgrepo-com-view-grid.svg");
	border: solid 1px black; border-radius: 5px;
}
.as-list #items-as-tiles-button { opacity: .3; }

/*
.view-type-grid #items-as-tiles-button { background-image: url("/static/pics/svgrepo-com-view-img-list.svg"); }
.view-type-imglist #items-as-tiles-button { background-image: url("/static/pics/svgrepo-com-view-list.svg"); }
*/

#basket-heading { margin: 1em 3px 0; }


/*
#item-filters-div { margin: 0 2em; padding: 1em; background: #fff; border: solid 1px #777; font-size: .875rem; }
#item-filters-div:empty { display: none; }
#item-filters-div > div { display: inline-block; margin: .25em; padding: 5px; background: #e4e4e4; border-radius: 4px; }
#item-filters-div select { margin-left: .3em; border: solid 1px #aaa; border-radius: 2px; height: auto; background: white; }
#item-filters-div > div > label > span { display: inline-block; margin-left: .3em; padding: 2px; border-radius: 4px; background: white; color: #777; }
.item-prop-filt-checkbox > label { display: inline-block; margin-left: .5em; padding: 2px 3px; border: solid 1px #aaa; border-radius: 3px; background: white; }
*/

#items-div { margin: 0 auto; }

#items-div > div { display: flex; gap: 2px 0; padding: 5px; background: white; border-top: solid 1px hsl(0 0% 85%); border-right: solid 1px hsl(0 0% 85%); }
#items-div > div:last-child { border-bottom: solid 1px hsl(0 0% 85%); }

#items-div > div > .item-img { /*flex: 1 0 0;*/ border: solid 1px #ddd; cursor: pointer; }

/*.item-img-div > img { max-width: 100%; max-height: 100%; margin: auto; }*/

.item-info-div { /*flex: 1 1 10rem;*/ display: flex; flex-flow: inherit; /*align-content: space-between;*/ cursor: pointer; }

.item-price-div { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 3px; }
.item-price-main { font-size: 1.3rem; }
.item-price-cents { font-size: .6rem; vertical-align: super; }
.item-prev-price { text-decoration: line-through; color: #777; }
.item-prev-price + span { color: red; }

.item-info-2-div { flex: 0 1 7rem; display: flex; flex-flow: column nowrap; font-size: .75rem; }
.item-qty-discount-div { background: #ff5; padding: 0 2px; }
.item-price-per-kg { color: hsl(0 0% 50%); }
.item-id-div { color: #777; }


.item-select-div { align-items: flex-end; justify-content: flex-end; display: flex; flex-flow: inherit; gap: 6px 2em; }

.item-variant-div { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: .2em .5em; /*line-height: 1;*/ }

.item-qty-div { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 3px; }
.as-list .item-qty-div { min-width: 9rem; }
/*.item-qty-div > div { margin: 1px 2px; }*/
.item-qty-div > div:first-of-type { border: solid 1px #ccc; border-radius: 4px; overflow: hidden; }
.item-qty-div > div:first-of-type:focus-within { box-shadow: 0px 0px 4px #00c; }
.item-qty-div > div:first-of-type > input[type=button] { width: 28px; padding: 0; border: none; border-radius: 0; box-shadow: none; line-height: 2; } /* +/- buttons */
.item-qty-div > div:first-of-type > input[type=text] { width: 2em; padding: 0; line-height: 2; text-align: center; border: none; }
/*.item-qty-div > div:first-of-type > input[type=text]:focus { box-shadow: inset 0 0 4px #00c; }*/
.item-qty-div > div:first-of-type.is-zero input:not([name=item-qty-plus]) { display: none; }

/*.item-qty-div > .select-2-class, .item-qty-unit-class { margin: 0 2px 2px 0; }*/
.item-qty-unit-class { display: inline-block; line-height: 2; margin-left: 1px; padding: 0 5px; white-space: nowrap; background: white; border: solid 1px #ccc; border-radius: 4px; }
.item-qty-units-class { margin-left: 1px; border-radius: 4px; }


/* handle fullscreen modal pop-up window for item details */
#item-details-dialog {
	margin: auto; border: none; cursor: pointer; opacity: 0; transition: opacity .15s;
	&.fade { opacity: 1; }
	&.fade::backdrop { opacity: 0.5; }
	&::backdrop { background-color: hsl(0 0% 0%); opacity: 0; transition: opacity .15s; }
	&::after { content: '\00d7'; position: absolute; top: 0; right: 0; width: 1em; height: 1em; line-height: 1; font-size: 3rem; text-align: center; color: hsl(0 0% 80%); }
	& > img { /*flex: 0 0 auto;*/ margin: auto; max-width: 100%; max-height: 100%; }
	& > div {
		/*flex: 0 0 auto;*/ margin: auto; width: 60em; max-width: 100%; overflow: auto; overscroll-behavior: none; padding: 1rem 1rem 15rem; background: white; border-style: solid; border-width: 5px;
		& > * { cursor: default; }
		& > div {
			display: flex; flex-flow: row wrap; gap: 1rem; align-items: flex-start;
			& > img.item-img { width: 25rem; max-width: 100%; border: solid 1px #ddd; }
			& div {
				flex-flow: column wrap /* to be inherited */;
				& > * { margin-bottom: 2rem; }
			}
		}
	}
}
#item-details-properties { display: grid; grid: auto-flow / auto auto; column-gap: 1em; }
#item-details-properties > dt::after { content:':'; }
#item-details-properties > dd { font-weight: bold; }

.select-2-class  { display: inline-block; position: relative; line-height: 2; }
.select-2-class:focus-within { outline: none; box-shadow: 0px 0px 4px hsl(220 100% 50%); }
.select-2-class > input[type=checkbox] { display: none; }
.select-2-class > div { position: absolute; top: 2.2em; z-index: 1; width: max-content; max-width: 16em; max-height: 20em; overflow: hidden auto; background: white; border: solid 1px #aaa; }
.select-2-class > input[type=checkbox]:not(:checked) + div { left: -200vw; } /* hide drop-down but leave radio buttons focusable */
.select-2-class > label { display: inline-block; position: relative; padding-left: 5px; padding-right:18px; white-space: nowrap; text-align: left; background: white; border: solid 1px #ccc; border-radius: 4px; }
.select-2-class > label::after { content: '\25bc'; position: absolute; right: .2rem; /* arrow down */ }
.select-2-class > div > input { position: absolute; margin-left: -2em; }

.select-2-class > div > label { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; background: white; border-bottom: solid 1px #eee; }
.select-2-class > div > label > div { padding: 0 5px; white-space: nowrap; }
.select-2-class > div > label > img { max-width: 5em; }
.select-2-class > div > input:checked + label, .select-2-class > div > label:hover { background: lightblue; }
.select-2-init-option-class { color: red; }


/***********************************************************************************************/

.form-dl-type1 {
	max-width: max-content; text-align: left; margin: 0 auto; padding: 24px 5%;
	& > dl {
		& > dt { padding-left: 1px; font-size: .75rem; color: #555; }
		& > dd {
			margin-bottom: 1.25em;
			& > * { max-width: 82vw; }
			& > div { font-style: italic; font-size: .75rem; }
		}
	}
	/* & > div > input[type=button], & > div > button { margin: 0 .5em 1em 0; }*/
}

#items-lookup-time { margin: 1em; font-size: .75rem; }

.search-form-class-1 { max-width:30em; text-align: left; }
.search-form-class-1 > div:first-child { display: inline-flex; height: 2.5em; border: solid 1px hsl(0 0% 60%); border-radius: 5px; }
.search-form-class-1 > div:first-child > input { z-index: 1; width: 20rem; max-width: 50vw; height: auto; padding: 0 .5em; border: none; border-radius: 5px 0 0 5px; }
.search-form-class-1 > div:first-child > button { height: auto; border: none; border-left: solid 1px #aaa; border-radius: 0 5px 5px 0;
/*	background: url(/static/pics/magnifier1.svg) center/70% no-repeat; filter: invert(70%);*/
}
#item-search-form { margin: 0 auto 2rem; }

/* Nutrition calculator (nc) */

:root {
	--nc-beef-hue: 9;
	--nc-poultry-hue: 300;
	--nc-dairy-hue: 180;
	--nc-cerial-hue: 60;
	--nc-vegetable-hue: 120;
	--nc-fish-hue: 207;
}

#nc-search-form > .find-as-you-type-result > label
,#nc-foods-list > dt {
	&.nc-beef		{ background: hsl(var(--nc-beef-hue) 100% 95%); }
	&.nc-poultry 	{ background: hsl(var(--nc-poultry-hue) 100% 95%); }
	&.nc-dairy 		{ background: hsl(var(--nc-dairy-hue) 100% 95%); }
	&.nc-cerial		{ background: hsl(var(--nc-cerial-hue) 100% 95%); }
	&.nc-vegetable	{ background: hsl(var(--nc-vegetable-hue) 100% 95%); }
	&.nc-fish		{ background: hsl(var(--nc-fish-hue) 100% 95%); }
}

#nc-outer-div { position: relative; margin: auto; max-width: 94%; padding: 1em 0; }
#nc-outer-div > input[type="radio"] { display: none; }

#nc-mode-desc {
	margin-bottom: 1em; line-height: 2;
	& > ul {
		list-style: disc outside; font-size: 90%;
		& > li { margin-left: 1.5em; white-space: pre-wrap; }
	}
}

#nc-obj-manager {
	margin-bottom: 1em;
	& > select { width: 15em; max-width: 35vw; }
}

#nc-day-select { max-width: 20vw; }

#nc-mode-selector {
	margin-bottom: 1em;
	& > label {
		display: inline-block; height: 2rem; padding: 3px 8px; border: outset 1px hsl(0 0% 75%); background: lightgray;
		&:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
		&:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
	}
}

#nc-settings {
	display: flex; flex-flow: row wrap; gap: .5em 1em; margin-bottom: 1em;/* background: gray;*/

	& > div { display: flex; }
	& label {
		padding: 3px 8px; text-align: center; border: outset 1px hsl(0 0% 75%); background: lightgray;
		&:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
		&:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
	}
	& input, & select { height: 1.5rem; }
}

#nc-mode-dishes:checked ~ #nc-mode-selector > label[for="nc-mode-dishes"]
,#nc-mode-wkplans:checked ~ #nc-mode-selector > label[for="nc-mode-wkplans"]
,#nc-gender-female:checked ~ #nc-settings label[for="nc-gender-female"]
,#nc-gender-male:checked ~ #nc-settings label[for="nc-gender-male"]
,#nc-nutri-filter-all:checked ~ #nc-settings label[for="nc-nutri-filter-all"]
,#nc-nutri-filter-recomm:checked ~ #nc-settings label[for="nc-nutri-filter-recomm"]
{ background: hsl(220 50% 65%); border-style: inset; color: hsl(0 0% 100%) }

#nc-mode-dishes:not(:checked) ~ #nc-search-form,
#nc-mode-dishes:checked ~ #nc-meal-selector
{ display: none; }

#nc-search-form { margin: 0 0 1rem; }

.find-as-you-type-result {
	position: absolute; z-index: 10; min-width: 20em; max-width: 90vw; max-height: 50vh; overflow: auto; /*margin: 1px;*/ padding: .5em; font-size: .875rem;
	background: white; border: none 1px #aaa; border-radius: 5px; box-shadow: 1px 1px 6px 0 #555;
	&:empty { display: none; }
	& > input:focus + label { background: lightblue !important; }
	& > input { position: absolute; opacity: 0; }
	& > label { display: block; white-space: nowrap; }
}

body.touch .find-as-you-type-result > label { line-height: 2; }
body.touch input[type="number"] { padding-right: 3px; }

#nc-meal-selector { margin-bottom: 1rem; }
#nc-dish-select { width: 15em; max-width: 35vw; background: white; }

#nc-obj-contents {
	margin: 0 0 1rem; min-height: 16vh; max-height: 36vh; border: solid 1px hsl(0 0% 60%); background: white; overflow: auto;
	& button { height: auto; padding: 0 5px; color: red; font-weight: bold; }
	& input { height: auto; }
	& input[type="number"] { width: 4em;}
}
#nc-mode-dishes:checked ~ #nc-obj-contents {
	width: min(35em, 100%);
	& > li {
		display: flex; flex-flow: row wrap; gap: 0 5px; align-items: start; margin: 1px; padding: 1px 6px; background: hsl(0 0% 90%);
	}
	& > li > :nth-child(1) {
		font-weight: bold; flex: 0 1em; text-align: center;

		&.null			{ background: hsl(0 0% 85%); }
		&.nc-beef		{ background: hsl(var(--nc-beef-hue) 100% 85%); }
		&.nc-poultry 	{ background: hsl(var(--nc-poultry-hue) 100% 85%); }
		&.nc-dairy 		{ background: hsl(var(--nc-dairy-hue) 100% 85%); }
		&.nc-cerial		{ background: hsl(var(--nc-cerial-hue) 100% 85%); }
		&.nc-vegetable	{ background: hsl(var(--nc-vegetable-hue) 100% 85%); }
		&.nc-fish		{ background: hsl(var(--nc-fish-hue) 100% 85%); }
	}
	& > li > :nth-child(2) { flex: 1; }
}

#nc-mode-wkplans:checked ~ #nc-obj-contents {
	display: flex; flex-flow: row wrap; padding: 2px; gap: 2px; border: solid 1px hsl(0 0% 60%); background: white;
	& > li {
		display: flex; flex: 0 auto; min-height: 4rem; flex-flow: column nowrap; border: solid 1px gray; font-size: 90%;

		& > div:first-child { text-align: center; padding: 2px; margin-bottom: 1px; background: hsl(0 0% 90%); font-weight: bold; cursor: pointer; }
		& > div:not(:first-child) {
			display: flex; padding: 1px; gap: 2px;
			& > span:nth-child(1) { font-weight: bold; cursor: pointer; }
			& > span:nth-child(-n+2) { padding: 3px; }
			& > :nth-child(2) { flex: 1; }
			& > input.nc-dish-amount-changed { background: khaki; }
		}
	}
}

#nc-nutri-table-div { overflow: auto; /*max-width: 21em;*/ height: 45vh; border: solid 1px hsl(0 0% 60%); }
#nc-nutri-table {
	border-collapse: separate; background-color: white;

	& tr:first-child > td {
		position: sticky; top: 0; font-weight: bold; background: hsl(0 0% 90%);
		&:first-child { z-index: 1; }

		/* headings of foods */
		&.null			{ background: hsl(0 0% 85%); }
		&.nc-beef		{ background: hsl(var(--nc-beef-hue) 100% 85%); }
		&.nc-poultry 	{ background: hsl(var(--nc-poultry-hue) 100% 85%); }
		&.nc-dairy 		{ background: hsl(var(--nc-dairy-hue) 100% 85%); }
		&.nc-cerial		{ background: hsl(var(--nc-cerial-hue) 100% 85%); }
		&.nc-vegetable	{ background: hsl(var(--nc-vegetable-hue) 100% 85%); }
		&.nc-fish		{ background: hsl(var(--nc-fish-hue) 100% 85%); }
	}
	& tr > td:first-child { position: sticky; left: 0; max-width: 40vw; text-align: left; }
	& td { overflow: hidden; padding: 1px .5em; text-align: center; white-space: nowrap; border: solid 1px hsl(0 0% 80%); border-style: none solid solid none; }
	& tr:not(:first-child) > td:first-child { background: hsl(0 0% 95%); cursor: pointer; text-decoration: underline; }
	& tr.nc-nut-group-1 > td:first-child { background: hsl(25 100% 95%); }
	& tr.nc-nut-group-3 > td:first-child { background: hsl(100 100% 95%); }
	& tr.nc-nut-group-4 > td:first-child { background: hsl(175 100% 95%); }
	& tr.nc-nut-group-10 > td:first-child { background: hsl(275 100% 95%); }
	& tr.nc-nut-group-13 > td:first-child { background: hsl(325 100% 95%); }

	& tr.nc-rdi-based-on-energi-consumption > td:first-child::after { content: '1'; font-size: 60%; vertical-align: super; }

	& td[data-unit]::after { content: attr(data-unit); }

	& td.nc-td-sum { font-weight: bold; }
	& td.nc-td-sum + td { text-align: left; }
	& td.nc-td-sum + td + td { text-align: right; }
	& td.nc-td-sum + td + td::after { content: '%'; }
	& tr.nc-low-intake > td.nc-td-sum, & tr.nc-below-min-intake > td.nc-td-sum { background: hsl(210 100% 90%); } /* blue */
	& tr.nc-above-max-intake > td.nc-td-sum { background: hsl(30 100% 90%); } /* orange */
}
#nc-mode-wkplans:checked ~ #nc-nutri-table-div td.nc-td-sum { cursor: pointer; text-decoration: underline; }


#nc-foods-list {
	position: fixed; z-index: 1; top: 0; left: 0; max-height: 100vh; overflow: auto; overscroll-behavior: none;
	display: grid; grid: auto-flow / auto 4em; gap: 1px; background: hsl(0 0% 90%); border: solid 1px black; box-shadow: 1px 1px 20px 4px #555;

	&::after { content:'\00d7'; position:absolute; right: 0; top: 0; font-size: 8rem; line-height: .5; opacity: .1; }
	& > * { background: white; padding: 0 6px; }
	& > *:nth-child(-n + 2) { font-weight: bold; padding: 6px; }
	& > dd { text-align: right; }
}

#nc-description-1 { list-style: disc outside; margin: 1em 1.5em; font-size: 90%; }

.nc-superscript { vertical-align: super; font-size: 60%; }