/*
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Bevan');
@import url('https://fonts.googleapis.com/css?family=Lobster');
*/

/* @import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Vollkorn:400,700');

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Montserrat:wght@400;700&family=Vollkorn:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("local.css");
/*
:root {
	--lg: #e0c58f;
	}
*/
* {
	box-sizing: border-box;
	}

HTML {
	box-sizing: border-box;
	/* font-family: "Vollkorn", "Sans-serif"; */
	font-family: "Open Sans", "Sans Serif";
	font-weight: 300;
	margin:0;
	padding: 0;
	font-size: 14px;
	line-height: 130%;
	box-sizing: border-box;
	}

BODY {	
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	box-sizing: border-box;
	}


SECTION, ARTICLE {
	display: block;
	position: relative;
	width: calc(100% - 6rem);
	max-width: 1800px;
	margin: auto;
	}

@media only screen and (max-width: 600px) {
	SECTION, ARTICLE {
		width: calc(100% - 2rem);
		}
	}


INPUT, TEXTAREA {
	height: 40px;
	width: 20rem;
	line-height: 40px;
	border: 1px solid var(--lg);
	box-sizing: border-box;
	text-align: left;
	font-size: 0.9rem;
	padding: 0 1rem 0 1rem;
	}

*:disabled {
	background-color: #dddddd;
	}

input:invalid {
  border: 2px solid red;
  background-color: #ffdddd;
}

BUTTON, INPUT[type=submit], INPUT[type=button] {
	min-height: 48px;
	}

INPUT.leggTil {
	line-height: unset;
	height: unset;
	width: 10rem;
	background-color: rgba(255,255,255,.5);	
	}


#main {
	margin-top: 5rem;
	}

#sidetopp {
	display: block;
	position: relative;
	margin-top: -10rem;
	}

/*
#topp {
	display: block;
	position: sticky;
	top: -18rem;
	left: 0;
	width: 100%;
	height: 30rem;
	background: url(/css/toppN2.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 99;
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.59); 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.59);
	}
*/


#indre-topp {
	height: 20rem;
	position: sticky;
	top: 0;
	}

/*
NAV {
	display: block;
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: 3rem;
	margin: 0;
	padding: 0;
	z-index:99;
	background-color: transparent;
	width: 100%;
	max-width: 1280px;
	margin: auto;
	}
*/

NAV {	
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6rem;
	z-index: 99;
	background-color: rgba(255,255,255,0);
	border-bottom: 1px solid #000000;
	}

NAV.scrolled {
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.59); 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.59);
	background-color: rgba(255,255,255,1);
    transition: all 1s ease-in;
	}

/*
NAV UL {
	display: flex;
	width: 100%;
	position:relative;
	font-size: 150%;
	flex-flow: row nowrap;
	flex: 1 1;
	margin-top: 5rem;
	top: 3rem;	
	}
*/
#nav2indre {
	display: block;
	position: relative;
	width: calc(100% - 3rem);
	max-width: 1800px;
	margin: auto;
	}

NAV UL {
	display: flex;
	position:relative;
	font-size: 1.2rem;
	flex-flow: row nowrap;
	flex: 1 1;
/*	width: calc(100% - 38rem); */
/*	width: 85%; */
	width: 95%;
	max-width: 1800px;
	margin: auto;
/*	margin-left: 10rem; */
/*	margin-left: 15%; */
	margin-left: 2%;
	top: 2rem;
	}


/* Skjul kurv hvis den er tom */
NAV UL LI:has(> #kurv:empty) {
    display: none;
}

#mtrigger {
	display: none;
	}

/* Responsive NAV */
@media only screen and (max-width: 600px) {
	
	#logginn, #kurv {
		top: 2rem !important;
		}
	#kurv {
		margin-top: -0.6rem;
		font-size: 80%;
		width: 10rem;
		margin-right: 1rem;
		}
	#nav2indre A DIV.logo { display: none; }
	NAV UL {
		display: block;
		position: relative;
		float: left;
		margin-left: 0 !important;
		}

	NAV UL {
/*	width: 2rem;
	height: 2rem;
 	background: linear-gradient(
		to bottom, 
		black, black 20%, 
		white 20%, white 40%, 
		black 40%, black 60%, 
		white 60%, white 80%, 
		black 80%, black 100%
 		);
 	*/
	/*	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='3.5rem' height='2.5rem' viewBox='-100 -100 200 200'><path d='M -45 -45 L  45 -45 M -45   0 L  45   0 M -45  45 L  45  45' stroke='black' stroke-width='15' stroke-linecap='round' /></svg>"); */
		background-position: center left;
		background-repeat: no-repeat;
		width: 3.5rem;
		}

	NAV UL:hover {
		background-image: none;
		padding-top: 0;
		}

	NAV UL LI {
  		display: none;
  		}
	NAV UL:hover LI, NAV UL.aapen LI {
		display: list-item;
		margin: 0 0 0.3rem 0;
		background-color: rgba(255,255,255,.8);
		width: 13rem;
		padding: 0.4rem;
		list-style-position: inside;
		padding-left: 0;
		margin-left: -4rem;
		}

	#meny {
		display: block;
		position: absolute;
		top: 0.5rem;
		left: 5.5rem;
		z-index:98;
		}
	
	#mtrigger {
		display: block;
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		width: 3rem;
		height: 3rem;
		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='3.5rem' height='2.5rem' viewBox='-100 -100 200 200'><path d='M -45 -45 L  45 -45 M -45   0 L  45   0 M -45  45 L  45  45' stroke='black' stroke-width='15' stroke-linecap='round' /></svg>");
		}
	
	
	
	}






NAV UL LI {	
	flext-grow: 1;
	flew-shrinkt: 1;
	list-style-type: none;	
	padding: 0 0.2rem 0 0.2rem;
	flex: 2 2 11%;
	}

NAV UL LI A {
	text-decoration: none;
	font-weight: bold;
	color: #000000;
	padding-top: 2rem;
	text-shadow: 2px 2px 5px #FFFFFF;
	}
NAV UL LI A.btn {
	text-shadow: none;
	}


NAV .logo {
	width: 10%;
	aspect-ratio: 5/1;
	display: block;
	position: absolute;
	top: 1rem;
	left: 0;
	}


#logginn, #kurv {
	display: inline-block;
	position: relative;
	height: 3rem;
	line-height: 3rem;
	float: right;
	border-radius: 1.5rem;
	width: 11rem;
	top: -0.5rem;
	}



#kurv {
	background-color: #000;
	color: #fff;
	padding-left: 4rem;
/*	min-width: 13rem;
	max-width: 25rem; */
	top: -0.9rem;
	}


#kurv:empty {
	display: none;
	}


#kurv .teller {
	position: absolute;
	top: -0.2rem;
	left: -0.1rem;
	border: 2px solid #000;
	background-color: #fff;
	color: #000;
	min-width: 3.4rem;
	border-radius: 1.5rem;
	text-align: center;
	font-size: 2rem;
	height: 3.4rem;	
	}

#logginn A.btn {
	display: inline-block;
	color: #ffffff;
	padding: 5px 10px 5px 10px;
	position: relative;
	overflow-x: hidden;
	border: 0.3px solid #000;
	font-size: 80%;
	height: auto;
	transform: translateY(-25%);
	}

#logginn A.btn.advarsel {
  animation: advarsel 1s infinite;  /* IE 10+, Fx 29+ */
	}
@-webkit-keyframes advarsel {
  0%, 49% {
    background-color: var(--lg);
  }
  50%, 100% {
    background-color: red;
  }
}

/* loginknappen er skjult hvis den er tom */
#logginn A.btn:empty {
	display: none !important
	}
#logginn:empty {
	display: none;
	}


P.obs {
	font-weight: bold;
	font-size: 120%;
	line-height: 110%;
	}



FOOTER#footer {
	display: block;
	display: flex;
	position: relative;
	width: 100%;
	height: 10rem;
	background-color: var(--lg); /* Old browsers */
	background-size: auto 70%;
	background-position: right 2rem center;
	background-repeat: no-repeat;
	padding: 1rem 10rem 1rem 2rem;
	z-index:99;
	color: #000000;
	text-align: center;
	box-sizing: border-box;
	clear: both;
	margin: 10rem 0 0 0;
	justify-content: flex-start;
	margin-top: 5rem;
	}

FOOTER P {
	color: #000000;
	flex-grow: 1;
	flex-basis: 10rem;
	flex-shrink: 1;
	text-align: center;
	}
	
#logobunn {
	display: block;
	position: relative;
	width: 14rem;
	max-width: 50%;
	height:auto;
	top: 10%;
	filter: invert(0);
	}

@media only screen and (max-width: 600px) {
	FOOTER#footer {
		flex-basis: 100%;
	    flex-direction: column;
		}	
	FOOTER#footer P {
		flex-basis: 100%;
	    display: flex-item;
		}	

	}





H1 {
	font-size: 3rem;
	line-height: 3rem;
	text-align: center;
	font-weight: 600;
	}
H1.left {
	text-align: left;
	}

/*
#kurv {
	display: block;
	position: relative;
	float: right;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border-radius: 0.5rem;
	padding: 0.5rem;
	padding-left: 4rem;
	max-width: calc(20% - 8rem);
	}

*/


#matte {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 99;
	}

.modal {
	position: fixed;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 50%;
	min-height: 600px;
	max-height: 900px;
	z-index: 199;
	background-color: #ffffff;
	border: 2px solid var(--lg);
	border-radius: 2rem;
	padding: 2.5rem;
	max-width: 50rem;
	overflow-y: auto;
	max-width: 98%;
	}

.modal.vare.aapen .indre {
	height: calc(100% - 5rem);
	overflow-y: auto;
	}

.modal.lbox.aapen {
	width: unset !important;
	height: unset !important;
	
	min-height: unset !important;
	min-width: unset !important;
	max-height: unset !important;
	max-width: unset !important;
	}

.modal.lbox.aapen IMG {
	width: 80vw;
	height: 80vh;
	height: auto;
	width: auto;
	max-width: 80vw;
	max-height: 80vh;
	}

.modal.kurv {
	transform: unset;
	top: 1rem;
	right: 1rem;
	left: unset;
	right: 1rem;
	min-height: 20rem;
	max-height: calc(100% - 2rem);
	overflow-y: auto;
	padding-bottom: 5rem;
	padding-top: 5rem;
	}


.modal .close {
	display: block;
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	border-radius: 3rem;
	font-size: 2rem;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	background-color: #888888;
	z-index:99;
	}

.modal.kurv .close {
	background-color: #ffffff;
	color: #888888;
	}

.modal.aapen {
	top: 50%;
	transition: top 3s ease 1s;
	overflow-y: auto;
	}

.modal .produktbilde {
	float: left;
	margin-right: 1rem;
	margin-bottom: 2rem;
	}
.modal.vare.aapen {
	padding-bottom: 5rem;
	}

.modal.vare.aapen .pris {
	max-width: unset !important;
	}

.modal.vare.aapen .btns, .modal.kurv .btns {
	display: block;
	position: fixed;
	bottom: 2.5rem;
	height: 4rem;
	}


.modal.vare .btns {
	width: calc(100% - 5rem);
	left: 3.5rem;
	}

.kurv .btns {
	background-color: var(--lg);
	border-radius: .3rem;
	height: 3rem;
	font-size: 1.5rem;
	line-height: 3rem;
	text-align: center;
	font-weight: bold;
	padding: 0.8rem;
	}

.kurv .btns .antall {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #ffffff;
	color: #000;
	float: left;
	border-radius: 1.5rem;
	margin-right: 2rem;
	margin-top: -.25rem;
	margin-left: .25rem;
	}
.kurv .btns .pris {
	float: left;
	}
.kurv .btns A {
	float:right;
	margin-right: 3rem;
	color: #000;
	}

A.tilKassenLink {
	text-decoration: none;
	}

.vareIKurv {
	display: block;
	position: relative;
	}

.trash {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 32 32"><path d="M 15 4 C 14.476563 4 13.941406 4.183594 13.5625 4.5625 C 13.183594 4.941406 13 5.476563 13 6 L 13 7 L 7 7 L 7 9 L 8 9 L 8 25 C 8 26.644531 9.355469 28 11 28 L 23 28 C 24.644531 28 26 26.644531 26 25 L 26 9 L 27 9 L 27 7 L 21 7 L 21 6 C 21 5.476563 20.816406 4.941406 20.4375 4.5625 C 20.058594 4.183594 19.523438 4 19 4 Z M 15 6 L 19 6 L 19 7 L 15 7 Z M 10 9 L 24 9 L 24 25 C 24 25.554688 23.554688 26 23 26 L 11 26 C 10.445313 26 10 25.554688 10 25 Z M 12 12 L 12 23 L 14 23 L 14 12 Z M 16 12 L 16 23 L 18 23 L 18 12 Z M 20 12 L 20 23 L 22 23 L 22 12 Z"></path></svg>');
	width: 2rem;
	height: 2rem;
	background-size: contain;
	}

.vareIKurv .trash {
	display: block;
	position: absolute;
	top: 5rem;;
	right: 1.6rem;
	}



.vare .btns .prodcounter, .modal.vare .btns button {
	width: 45%;
	margin-right: 5%;
	height: 3rem;
	font-size: 1.5rem;
	line-height: 3rem;
	text-align: center;
	min-height: 48px;
	}
.modal.vare .btns .prodcounter INPUT {
	font-size: 1.5rem;
	line-height: 3rem;
	width: 33%;
	text-align: center;
	min-height: 48px;
	
	}
.modal.vare .btns .prodcounter SPAN {
	font-size: 1.5rem;
	line-height: 3rem;
	width: 33%;
	min-height: 48px;
	}

.modal H2 {
	font-size: 2.0rem;
	line-height: 2rem;
	}


.kurv INPUT {
	float: right;
	margin-left: 2rem;
	width: 4.5rem;
	height: 3.5rem;
	border: 2px solidvar(--lg);
	padding: 1rem;
	font-size: 1.5rem;
	/* border-radius: 0.3rem; */
	}

.kurv .allergimerking {
	margin-top: 1rem;
	}

.modal.kurv .btns {
	position: relative;
	top: 2rem;
	float: left;
	width: calc(100%);
	}
	
SPAN {
	display: inline-block;
	}

.allergimerking SPAN {
	position: relative;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0.3rem 0.6rem 0.3rem 0.6rem;
	border-radius: 1.5rem;
	background-color: #bbbbbb;
	line-height: 1.8rem;
	}

#allergier {
	border-top: 2px solid var(--lg);
	border-bottom: 2px solid var(--lg);
	padding-top: 5px;
	}
#allergier SPAN.valgt, .allergimerking SPAN.valgt {
	background-color:var(--lg);
	}

.modal INPUT.leggTil {
	background-color: #bbbbbb;
	width: 5rem;
	}
.toggle .header, .toggle.aapen .header {
	display: block;
	position: relative;
	font-weight: bold;
	}

.toggle .header::after {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	content: "+";
	}
.toggle.aapen .header::after {
	content: "-";
	}

.toggle SPAN, .toggle DIV {
	display: none;
	}

.toggle.aapen SPAN {
	display: inline-block;
	}
.toggle.aapen DIV {
	display: block;
	}


.toggle span.valgt, .toogle.aapen span.valgt {
	display: inline-block;
	}

.prodcounter {
	display: inline-block;
	float: left;
	width: 90px;
	height: 30px;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	font-size: 120%;
	margin-right: 5px;
	overflow:hidden;
	}

.prodcounter SPAN, prodcounter INPUT {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;	
	}	

.prodcounter INPUT {
	display: inline-block;
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #ffffff;
	width: 28px;
	line-height: 30px;
	border-right: 1px solid #bbbbbb;
	border-left: 1px solid #bbbbbb;
	}

/* Forsiden */



#forsidekategorier .forsidekategori{
	display: block;
	position: relative;
	aspect-ratio: 3 / 2.5;
	padding: 1rem;
	border: 2px solid var(--lg);
	border-radius: 0.7rem;
	}

#forsidekategorier .forsidekategori IMG.kategoribilde {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	filter: brightness(85%);
	border-radius: 0.7rem;
	}

#forsidekategorier .forsidekategori H2, #forsidekategorier .forsidekategori P {
	z-index: 2;
	position:relative;
	text-align:center;
	}

#forsidekategorier .forsidekategori A {
	color: #ffffff;
	text-decoration: none;
	}

#forsidekategorier .forsidekategori H2 {
	font-size: 3.5rem;
	line-height: 4rem;
	margin-top: 30%;
	}

#forsidekategorier .forsidekategori P {
	opacity: 0;
	font-sizew: 1.5rem;
	padding: 0.5rem;
	background-color: rgba(255, 255, 255, .4);
	}


#forsidekategorier .forsidekategori:hover {
	filter: brightness(120%);
	transition-duration: 1000ms;
	transition-property: filter;

	}
/*
#forsidekategorier .forsidekategori:hover H2 {
	margin-top: 10%;
	color: #000000;
	transition-duration: 1000ms;
	transition-property: margin-top, color;
	}
#forsidekategorier .forsidekategori:hover P {
	font-weight: bold;
	opacity: 1;
	transition-duration: 3000ms;
	transition-property: margin-top, opacity;
	}
*/


	
#varer, #forsidekategorier {
/*	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem; */
/*	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; */
	position: relative;
	max-widht: 100%;
	width: 100%; 
	display: grid;
  /* Define Auto Row size */
 /*	grid-auto-rows: 100px; */
 	grid-auto-rows: fit-content();
	/*Define our columns */
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
	grid-gap: 1em;
	}

@media only screen and (max-width: 600px) {
	#varer, #forsidekategorier {
		padding: 0;
		grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
		gap: 1rem;
		}	
	}




/*
#varer .vare {
	display: block;
	position: relative;
	max-width: 100%;
	padding: 1rem;
	border: 2px solid var(--lg);
	border-radius: 1rem;
	}
*/
/*
#varer .vare {
	display: block;
	position: relative;
	width: 30%;
	min-width: 500px;
	max-width: 700px;	
	aspect-ratio: 4 / 1;
	padding: 1rem;
	border: 2px solid var(--lg);
	border-radius: 1rem;
	flex: 1 1 30%;
	}
*/
#varer .vare {
	display: block;
	position: relative;
	aspect-ratio: 3 / 1.5;
	padding: 1rem;
	border: 2px solid var(--lg);
	border-radius: 0.7rem;
	}


#varer .vare .tekst {
	display: block;
	position: relative;
	width: 65%;
	width: calc(100% - 16rem);
	height: calc(100% - 6.5rem);
	overflow: hidden;
	padding-bottom: 1rem;
	text-overflow: ellipsis;
	max-width: calc(100% - 15rem);
	}

#varer .vare .tekst::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2rem;
	background: linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 100%);
	content: " ";
	}
	
#varer .vare IMG, .produktbilde {
	display: block;
	float: right;
	max-width: 33%;
	max-width:15rem;
	aspect-ratio: 175/125;
	object-fit: cover;
	border-radius: 0.7rem;
	margin-right: 0rem;
	}

.modal.vare IMG.produktbilde {
	width:  calc(50% - 1rem);
	max-width: calc(50% - 1rem);
	}

.vare .pris {
	display: inline-block;
	margin: 0 1rem 0 1rem;
	color: var(--lg);
	font-size: 150%;
	font-weight: 500;
	line-height: 180%;
	max-width: calc(50%) !important;
	}
#varer .vare button {
	display: block;
	position: relative;
	max-width: calc(30%) !important;
	min-width: unset;
	float: left;
	margin-top: -0.3rem;
	overflow-x: hidden;
	overflow-y: hidden;
	max-height: 48px;
	line-height: 48px;	
	}


.vare .allergener {
	display: inline-block;
	position: relative;
	font-size: 80%;
	padding: 0.5rem 0 0 1.6rem;
	/* border-left: 1px solid #666666; */
	max-width: 30%;
	float:right;
	margin-top: 0.5rem;
	}

.modal.vare .allergener, .kurv .allergener {
	padding: 0 0 0 0;
	margin: 2rem 0 1rem 0;
	border: none;
	font-size: 0.7rem;
	}

.modal.vare .pris {
	padding: 1rem 0 1rem 0;
	border: none;
	padding: 0;
	margin: 0 0 1rem 0;
	font-weight: 700;
	}

.modal.vare P, .modal #allergier {
	clear: both;
	font-size: 1.2rem;
	line-height: 1.8rem;
	}


/*
#varer .vare .allergener::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0.6rem;
	content: "ⓘ";
	}
*/
#varer .vare .allergener:hover::after {
	display: block;
	position: absolute;
	top: 1.5rem;
	right: 0;
	padding: 0.5rem;
	background-color: var(--lg);
	color: #000000;
	font-size: 120%;
	content: attr(data-allergener);
	width: auto;
	min-width: 12rem;
	}	

.vare .allergener::empty {
	display: none;
	}

#varer .vare .indikator {
	display: block;
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	text-align: right;
	}

#varer .vare .btns {
	display: block;
	position: relative;
	width: 100%;
	height: 3rem;
	overflow: visible;
	margin-top: 1rem;
	clear: right;
	padding-top: 1rem;
	}

#varer .vare .indikator .teller {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #777777;
	color: #ffffff;
	line-height: 2.5rem;
	text-align: center;
	border-radius: 1rem;
	font-weight: bold;
	font-size:120%
	}
#varer .vare .indikator .teller.allergi {
	background-color: #ebab34;
	}
#varer .vare .indikator .teller + .teller {
	margin-left: -0.5rem;
	}

.kurv .vareikurv {
	display: block;
	position: relative;
	width: 100%;
	float: left;
	clear: both;
	margin-right: 1rem;
	}

.kurv .produktbilde {
	float: left;
	clear: left;
	margin-top: 1rem;
	}

.vare H3, .vareIKurv H3 {
	position: relative;
	font-size: 1.3rem;
/*	max-height: 4rem; */
/*	overflow: hidden; */
	text-overflow: ellipsis;
	line-height: 1.8rem;
	margin: 0;
	width: calc(100% - 5rem);
/*	max-height: 2rem; */
	}

.vareIKurv H3 {
	top: 1rem;
	}


/* UTSJEKK */

.utsjekk, .utsjekkdetaljer, .utsjekkdetaljer2 {
	max-width: 900px;
	margin: auto;
	margin-top: 2rem;
	}

.utsjekkdetaljer2 INPUT, .utsjekkdetaljer2 TEXTAREA {
	width: 90%;
	max-width: 500px;
	padding: 0.5rem;
	border: 2px solid var(--lg);
	border-radius: 0.4rem;
	}

.utsjekk INPUT[type=radio] {
	width: 1rem;
	height: 1rem;
	}

INPUT.bestillebutton, INPUT.avlys {
	background-color: var(--lg);
	padding: 1rem;
	width: 25%;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5rem;
	}

INPUT.avlys {
	background-color: rgb(235, 147, 147);
	margin-left: 1rem;
	}

INPUT.bestillebutton:after {
	content: "⮕";
	display: block;
	position: absolute;
	top: 1rem;
	right: 3rem;
	color: #000;
	}

INPUT.loading {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_OSmW%7Btransform-origin:center;animation:spinner_T6mA 1s step-end infinite%7D@keyframes spinner_T6mA%7B8.3%25%7Btransform:rotate(30deg)%7D16.6%25%7Btransform:rotate(60deg)%7D25%25%7Btransform:rotate(90deg)%7D33.3%25%7Btransform:rotate(120deg)%7D41.6%25%7Btransform:rotate(150deg)%7D50%25%7Btransform:rotate(180deg)%7D58.3%25%7Btransform:rotate(210deg)%7D66.6%25%7Btransform:rotate(240deg)%7D75%25%7Btransform:rotate(270deg)%7D83.3%25%7Btransform:rotate(300deg)%7D91.6%25%7Btransform:rotate(330deg)%7D100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cg class='spinner_OSmW'%3E%3Crect x='11' y='1' width='2' height='5' opacity='.14' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(30 12 12)' opacity='.29' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(60 12 12)' opacity='.43' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(90 12 12)' opacity='.57' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(120 12 12)' opacity='.71' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(150 12 12)' opacity='.86' fill='white'/%3E%3Crect x='11' y='1' width='2' height='5' transform='rotate(180 12 12)' fill='white'/%3E%3C/g%3E%3C/svg%3E");
	background-position: left center;
	background-repeat: no-repeat;
	background-position: 90% center;
	background-size: 15%;	
	}

INPUT:disabled {
	opacity: 0.8;
	}

.utsjekkdetaljer2 TEXTAREA {
	height: 8rem;
	border: 2px solid var(--lg);
	padding: 2rem;
	}

#tidogklalkyle {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 900px;
	flex: 1 1;
	}
#tidogsted {
	position: relative;
	width: calc(66% -1rem);
	min-width: 500px;
	height: 100%;
	border: 2px solid var(--lg);
	border-radius: 1rem;
	padding: 1rem;
	width: calc(33% -2rem);
	margin: 1rem;
	}
#priskalkyle {
	background-color: var(--lg);
	color: #000000;
	border-radius: 1rem;
	padding: 1rem;
	min-width: 250px;
	margin: 1rem;
	}

#meldinger {
	background-color: red;
	color: #ffffff;
	font-weight: 700;
	padding: 1rem;
	border-radius: 1rem;
	width: 90%;
	max-width: 500px;
	margin-top: 2rem;
	}
#meldinger:empty {
	display: none;
	}
#meldinger A {
	color: #ffffff;
	}
#vareliste, #detaljer {
	width: calc(66% -1rem);
	max-width: 530px;
	padding: 1rem;
	}

.utsjekk INPUT, .utsjekk TEXTAREA {
	background-color: rgba(255,255,255,.5);
	width: 90%;
	}



/* Knapper, chrome */
input[type=submit], button:not([class^='pika']), A.btn {
	background: var(--lg);
	height: 30px;
	line-height: 15px;
	padding: 0 10px 0 10px;
	min-width: 120px;
	border-radius: 0.5rem;
	color: #000000;
	font-size: 120%;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	border-style: none;
	box-sizing: border-box;
	text-align: center;
	margin-right: 0.5rem;
	cursor: pointer;
	}



/* Leverinsoversikten */
#ordreliste DIV DIV {
	display: block;
	position: relative;
	float: left;
	clear: left;
	margin-bottom: 2rem;
	}

#ordreliste DIV.ferie H2 {
	color: #888888;
	}
#ordreliste DIV.ferie H2::after {
	content: " (ferie)";
	}

#ordreliste DIV.stengt H2 {
	color: #888888;
	}
#ordreliste DIV.stengt H2::after {
	content: " (stengt)";
	}

#ordreliste DIV.avtale H2 {
	color: #7b9d5f;
	}
#ordreliste DIV.avtale H2::after {
	content: " (fast avtale)";
	}

#ordreliste DIV.endretfastavtale H2 {
	color: blue;
	}
#ordreliste DIV.endretfastavtale H2::after {
	content: " (endret fast avtale)";
	}

#ordreliste DIV.avlystfastavtale H2, #ordreliste DIV.avlyst H2 {
	color: #ab452d;
	}
#ordreliste DIV.avlystfastavtale H2::after, #ordreliste DIV.avlyst H2::after {
	content: " (avlyst fast avtale)";
	}

#ordreliste DIV.catering H2 {
	color: #444444;
	}
#ordreliste DIV.catering H2::after {
	content: " (catering)";
	}


#ordreliste DIV.dagens H2 {
	color: #444444;
	}
#ordreliste DIV.dagens H2::after {
	content: " (dagens levering)";
	}



/* Faste avtaler */
 #ukedager {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	}
 
  /* Faste avtaler */
 #ukedager DIV {
 	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
 	float: left;
 	width: 31%;
 	min-width: 250px;
 	margin: 0.5rem;
  	background-color: #ffffff;
  	padding: 1rem 2rem 1rem 2rem;
  	box-sizing: border-box;
  	min-height: 25%;
	padding: 1rem;
	border: 2px solid var(--lg);
	border-radius: 1rem;
	flex: 1 1 30%; 	
	min-height: 18rem;
	}	

 .item {
 	display: inline-block;
 	position: relative;
 	float: left;
 	clear: left;
 	padding: 0.2rem;
 	border-bottom: 2px solid rgba(255,255,255,.5);
 	margin-bottom: 0.5rem;
	width: 100%;
	max-width: 30rem;
	height: auto;
	valign: top;
	border-bottom: 1px solid #bbbbbb;
 	}
 	
 
.item .ant {
	display: inline-block;
	width: 10%;
	height: auto;
	line-height: 1.2rem;
	top: 0;
	}
	
.item .txt {
	display: inline-block;
	width: 65%;
	height: auto;
	overflow: hidden;
	overflow-x: ellipsis;
	line-height: 1.2rem;
	}
.item .pris {
	display: inline-block;
	width: 15%;
	height: auto;
	overflow: visible;
	line-height: 1.2rem;
	text-align: right;
	}
	
 .item .angre {
 	display: block;
 	position:absolute;
 	top: 0;
 	right: 0;
 	background-color: #ab452d;
 	color: #ffffff;
 	font-weight: 900;
 	width: calc(1.5rem - 4px);
 	height: calc(1.5rem - 4px);
 	line-height: calc(1.5rem - 4px);
 	border-radius: 1rem;
 	text-align: center;
 	font-family: Montserrat;
 	}

.item H2::first-letter, .vare H2::first-letter {
	text-transform: uppercase;
	}

BUTTON.avlys {
	background-color: #bd3b37;
	color: #ffffff;
	}

/* Kategoriknapper */
.knapp {
 	display: inline-block;
 	position: relative;
 	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
	background-color: #dddddd;
 	border-radius: 1rem;
 	color: #000000;
 	line-height: 1rem;
 	font-size: 1.1rem;
/* 	padding-right: 3rem; */
 	margin-bottom: 0.5rem;
 	height: 2rem;
 	}

.knapp.on {
	background-color: var(--lg);
	}
.knapp.off {
	opacity: 0.5;
	}

.knapp.sokeknapp {
	padding: 0.35rem 2.4rem 0.35rem 0.5rem;
	background-image: url('data:image/svg+xml,<svg fill="%23000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fill-rule="evenodd"/></svg>');
	background-size: 1rem 1rem;
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	}
.knapp.sokeknapp INPUT {
	border: 0;
	height: 20px;
	line-height:20px;
	background: transparent;
	width: 10rem;
	}
.knapp.sokeknapp INPUT:focus {
	border:none;
	}

#kategoriknapper, #underkategoriknapper {
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin: auto;
	max-width: 1000px;
	}

#underkategoriknapper {
	border-top: 2px solid var(--lg);
	}
#underkategoriknapper:empty {
	border-top: none;
	}



/* Loginsiden */
.ilabel {
	display: inline-block;
	width: 16rem;
	}

body.loginside #login_indre, body.loginside #registrer, body.loginside #kode {
	display: block;
	max-width: 50vw;
	margin: auto;
	text-align: center;
	}
INPUT.paakrevet {
/*
	display: block;
	position:absolute;
	top: 0;
	right: -1rem;
	color: red;
	font-weight: bold;
	content: "*";
*/
	background-color: #ffdddd;
	}



/* Pickaday */
/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
 */

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Montserrat", "Vollkorn", "Sans-serif";
}

/*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/
.pika-single:before,
.pika-single:after {
    content: " ";
    display: table;
}
.pika-single:after { clear: both }
.pika-single { *zoom: 1 }

.pika-single.is-hidden {
    display: none;
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}

.pika-lendar {
    float: left;
    width: 240px;
    margin: 8px;
}

.pika-title {
    position: relative;
    text-align: center;
}

.pika-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
}
.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    filter: alpha(opacity=0);
    opacity: 0;
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    /* hide text using text-indent trick, using width value (it's enough) */
    text-indent: 20px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
    *position: absolute;
    *top: 0;
}

.pika-prev:hover,
.pika-next:hover {
    opacity: 1;
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
    *left: 0;
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
    *right: 0;
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
    cursor: default;
    opacity: .2;
}

.pika-select {
    display: inline-block;
    *display: inline;
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

.pika-table th,
.pika-table td {
    width: 14.285714285714286%;
    padding: 0;
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
}

.pika-button {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5;
}

.pika-week {
    font-size: 11px;
    color: #999;
}

.is-today .pika-button {
    color: #33aaff;
    font-weight: bold;
}

.is-selected .pika-button,
.has-event .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px;
}

.has-event .pika-button {
    background: #005da9;
    box-shadow: inset 0 1px 3px #0076c9;
}

.is-disabled .pika-button,
.is-inrange .pika-button {
    background: #D5E9F7;
}

.is-startrange .pika-button {
    color: #fff;
    background: #6CB31D;
    box-shadow: none;
    border-radius: 3px;
}

.is-endrange .pika-button {
    color: #fff;
    background: #33aaff;
    box-shadow: none;
    border-radius: 3px;
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: .3;
}

.is-outside-current-month .pika-button {
    color: #999;
    opacity: .3;
}

.is-selection-disabled {
    pointer-events: none;
    cursor: default;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px;
}

/* styling for abbr */
.pika-table abbr {
    border-bottom: none;
    cursor: help;
}

.linkedin {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20432%20432%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M319%20221.5q-8-10.5-30-10.5q-27%200-38%2016t-11%2045v146q0%205-3%208t-8%203h-76q-4%200-7.5-3t-3.5-8V148q0-4%203.5-7.5t7.5-3.5h74q4%200%206.5%202t3.5%206v5q1%202%201%207q28-27%2076-27q53%200%2083%2027t30%2079v182q0%205-3.5%208t-7.5%203h-78q-4%200-7.5-3t-3.5-8V254q0-22-8-32.5zM88%2091.5Q73%20107%2051.5%20107T15%2091.5t-15-37T15%2018T51.5%203T88%2018t15%2036.5t-15%2037zm13%2056.5v270q0%205-3.5%208t-7.5%203H14q-5%200-8-3t-3-8V148q0-4%203-7.5t8-3.5h76q4%200%207.5%203.5t3.5%207.5z%22%2F%3E%3C%2Fsvg%3E");
	}

.facebook {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20224%20432%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M145%20429H66V235H0v-76h66v-56q0-48%2027-74t72-26q36%200%2059%203v67l-41%201q-22%200-30%209t-8%2027v49h76l-10%2076h-66v194z%22%2F%3E%3C%2Fsvg%3E%0A");
	}

.instagram {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.34%205.46a1.2%201.2%200%201%200%201.2%201.2a1.2%201.2%200%200%200-1.2-1.2Zm4.6%202.42a7.59%207.59%200%200%200-.46-2.43a4.94%204.94%200%200%200-1.16-1.77a4.7%204.7%200%200%200-1.77-1.15a7.3%207.3%200%200%200-2.43-.47C15.06%202%2014.72%202%2012%202s-3.06%200-4.12.06a7.3%207.3%200%200%200-2.43.47a4.78%204.78%200%200%200-1.77%201.15a4.7%204.7%200%200%200-1.15%201.77a7.3%207.3%200%200%200-.47%202.43C2%208.94%202%209.28%202%2012s0%203.06.06%204.12a7.3%207.3%200%200%200%20.47%202.43a4.7%204.7%200%200%200%201.15%201.77a4.78%204.78%200%200%200%201.77%201.15a7.3%207.3%200%200%200%202.43.47C8.94%2022%209.28%2022%2012%2022s3.06%200%204.12-.06a7.3%207.3%200%200%200%202.43-.47a4.7%204.7%200%200%200%201.77-1.15a4.85%204.85%200%200%200%201.16-1.77a7.59%207.59%200%200%200%20.46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12ZM20.14%2016a5.61%205.61%200%200%201-.34%201.86a3.06%203.06%200%200%201-.75%201.15a3.19%203.19%200%200%201-1.15.75a5.61%205.61%200%200%201-1.86.34c-1%20.05-1.37.06-4%20.06s-3%200-4-.06a5.73%205.73%200%200%201-1.94-.3a3.27%203.27%200%200%201-1.1-.75a3%203%200%200%201-.74-1.15a5.54%205.54%200%200%201-.4-1.9c0-1-.06-1.37-.06-4s0-3%20.06-4a5.54%205.54%200%200%201%20.35-1.9A3%203%200%200%201%205%205a3.14%203.14%200%200%201%201.1-.8A5.73%205.73%200%200%201%208%203.86c1%200%201.37-.06%204-.06s3%200%204%20.06a5.61%205.61%200%200%201%201.86.34a3.06%203.06%200%200%201%201.19.8a3.06%203.06%200%200%201%20.75%201.1a5.61%205.61%200%200%201%20.34%201.9c.05%201%20.06%201.37.06%204s-.01%203-.06%204ZM12%206.87A5.13%205.13%200%201%200%2017.14%2012A5.12%205.12%200%200%200%2012%206.87Zm0%208.46A3.33%203.33%200%201%201%2015.33%2012A3.33%203.33%200%200%201%2012%2015.33Z%22%2F%3E%3C%2Fsvg%3E%0A");
	}