:root{
--c0:#cccccc;
--c0:#70ABC2;
--c1:#982B1C;
--c1:#000;
--c2:#DAD4B5;
--c2:#000;
--c3:#F2E8C6;
--c3:#000;
--f0:15px;
--f1:13px;
--f2:11px;
}

html{
font-family:Verdana;
background:#2e2e2e;
}

body{
background:#2e2e2e;
}

:not(:root):fullscreen::backdrop{
background:#000;
}

#logo{
background:url("media/sugamelt-logo.png") no-repeat;
background-size:50%;
background-position:right 5px top;
width:120px;
height:80px;
position:absolute;
z-index:99;
top:0px;
right:0px;
}

#intercom [intercom-stop]{display:none}
#intercom[on] [intercom-call]{display:none}
#intercom[on] [intercom-stop]{display:inline-block}

[order-page-button],
[kitchen-page-button]
{
background-color:#ab2c2c;
}

#menu{
background:#2f2619;
background:#2e2e2e;
padding:10px;
padding-top:40px;
margin:0px;
}

#menu h1{
color:#fff;
font-size:38px;
}

[item-buttons]{
display:none;
}

body[admin] [item-buttons]{
display:block;
}

body[admin] [menuitem][notavailable]{
	display:block;
}
[newblock] [field]{
border-radius:10px;
min-width:40px;
min-height:20px;
background-color:rgba(100,100,0,0.2);
position:relative;
}

[newblock] [field]:before{
position:absolute;
top:-10px;
left:0px;
content:attr(field);
}

[menuitem]{
display:inline-block;
position:relative;
width:140px;
margin:0px 5px 5px 0px;
padding-top:30px;
padding-bottom:5px;
background-color:#fff;
border:#bbb solid 2px;
border-radius:10px;
box-shadow:3px 3px 3px #0005;
overflow:hidden;
}

[menuitem] [field]{
display:none;
}

[menuitem] [field="title"],
[menuitem] [field="description"],
[menuitem] [field="price"],
[menuitem] [field="code"],
[menuitem] [field="comment"],
[menuitem] [field="image"]
{
display:block;
}

[menuitem] [field="title"],
[menuitem] [field="title_la"],
[menuitem] [field="description"],
[menuitem] [field="comment"],
[menuitem] [field="price"]{
width:100%;
padding:0px 10px;
padding-bottom:5px;
}

[menuitem] [field="title"]{
font-size:15px;
font-weight:bold;
max-width:130px;
background:#fffb;
}

[menuitem] [field="price"]{
background:#fffb;
}

[menuitem] [field="description"]{
font-size:13px;
}

[menuitem] [field="comment"]{
position:absolute;
top:70px;
right:0px;
font-size:10px;
background:#fff9;
text-align:right;
font-weight:bold;
padding-left:10px;
width:90% !important;
}

[menuitem] [field="price"]{
font-size:14px;
font-weight:bold;
color:#f00;
}


[menuitem] [field="code"]{
position:absolute;
top:-2px;
left:-5px;
padding:5px 15px;
height:14px;
background:#a5000099;
color:#fff;
font-weight:bold;
border-bottom-right-radius:80px;
z-index:88;
font-size:10px;
width:29px !important;
}

[menuitem][hasimage]{
padding-top:180px;
}

#menu [item_group] [menuitem]{
	position:relative;
	display:inline-block;
}

#menu-jumpers{
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	width:145px;
	z-index:500;
	background:#111;
}

#menu-jumpers button{
	font-size:12px;
	padding:10px 5px;
	padding-left:10px;
	margin-bottom:5px;
	margin-left:-5px;
	border-radius:5px;
	background:#aaa1;
	color:#fff;
	width:98%;
	border:0px #000 solid;
}

#menu [item_group] [menuitem]{
	position:relative;
	display:inline-block;
}

#menu [menu-heading-note]{
	background:#fc9;
	background:#e95;
	color:#000;
	font-weight:bold;
	border-radius:10px;
	border-bottom-left-radius:0px;
	border:#000 solid 2px;
	box-shadow:2px 2px 2px #000e;
	padding:13px 20px;
	font-size:16px;
	margin-bottom:20px;
	white-space:pre-wrap !important;
	width:80%;
}
/*
#menu [item_group] [item_sub1]{
	position:relative;
	display:inline-block;
	padding-top:8px;
	padding-left:158px;
	padding-right:2px;
	padding-bottom:2px;
	width:420px;
	min-height:213px;
	border-radius:10px;
	margin-top:-8px;
	margin-left:-8px;
	margin-right:10px;
	margin-bottom:40px;
	background-color:#ffffff07;
	border:#ffffff02 solid 1px;
}

#menu [item_group] [item_sub1][groupsize="1"]{
	width:1px;
}

#menu [item_group] [item_sub1][groupsize="2"],
#menu [item_group] [item_sub1][groupsize="3"],
#menu [item_group] [item_sub1][groupsize="4"]
{
	width:165px;
}

#menu [item_group] [item_sub1][groupsize="5"],
#menu [item_group] [item_sub1][groupsize="6"],
#menu [item_group] [item_sub1][groupsize="7"],
#menu [item_group] [item_sub1][groupsize="8"],
#menu [item_group] [item_sub1][groupsize="9"]
{
	width:345px;
}

#menu [item_group] [item_sub1] > *:nth-child(1){
	position:absolute;
	top:8px;
	left:8px;
}

#menu [item_sub1] [menuitem]:nth-child(n+2){
	display:inline-block;
	padding-top:20px !important;
	padding-left:5px !important;
	width:160px;
	margin-bottom:4px;
	margin-right:2px !important;
}
*/

[menuitem][premium]{
	background:url("media/gold-back.jpg") top left; 
	position:relative;
}

[menuitem][premium] [field="title"],
[menuitem][premium] [field="price"]{
	background:none;
}

[menuitem][premium]:after{
	content:"PREMIUM";
	position:absolute;
	top:3px;
	right:5px;
	color:#0008;
	font-size:10px;
	font-weight:bold;
}

#menu img{
position:absolute;
top:0px;
left:0px;
width:160px;
height:auto;
z-index:0;
}

[menuitem][group="Doughnuts"]{
width:150px;
padding-top:130px !important;
}

[menuitem][group="Doughnuts"] img{
position:absolute;
top:12px;
left:10px;
width:120px;
height:auto;
border-radius:100px;
display:none !important;
}

[menuitem][group="Sandwiches"]{
width:220px;
padding-top:195px;
}

#menu [menuitem][group="Sandwiches"] img.block-image{
width:260px;
}

[menuitem][group="Sandwiches"] img{
position:absolute;
top:12px;
left:10px;
height:auto;
border-radius:100px;
display:none !important;
}

[menuitem][group="Extras"]{
padding-top:110px;
}

[menuitem][tag="drink"]{
/*width:160px;*/
}

[menuitem][tag="drink"][hasimage]{
padding-top:160px !important;
}

[menuitem][tag="drink"] [field]{
width:140px;
}

#menu [menuitem][tag="drink"] img{
width:140px !important;
clip: rect(0, 240px, 185px, 0);
top:-20px !important;
}

#menu [menuitem][tag="drink"] img{
display:none;
}

[menuitem][notavailable]{
	display:none !important;
}

[alt="Eat in"]{ color:#30C730; }
[alt="Take away"]{ color:#DA6475; }
[alt="Eat in, drinks take away"]{ color:#D5B24F; }

[dining="Eat in"]{
background:url("media/eat-in-3.png") no-repeat 0px 0px;
background-color:rgb(104 215 176 / 10%);
background-size:41px;
/*padding-left:70px !important;*/
} 

[dining="Take away"]{
background:url("media/takeaway.png") no-repeat 10px 18px;
background-color:rgb(215 104 104 / 30%);
background-size:40px;
/*padding-left:70px !important;*/
}

[dining="Eat in, drinks take away"]{
background:url("media/drinks-takeaway.png") no-repeat 10px 18px;
background-color:rgb(215 169 48 / 30%);
background-size:40px;
/*padding-left:70px !important;*/
}

[eat-in-button]{
background-position:top 3px left 15px;
background-size:90px;
}

[take-away-button]{
background-position:top 12px left 25px;
background-size:67px;
}

[drinks-take-away-button]{
background-position:top 12px left 10px;
background-size:67px;
}


#order-mobile{
	display:none;
}

[field="instructions"]{
	white-space:pre;
}

[field="newproduct"]{
position:absolute;
top:0px;
right:-8px;
display:block !important;
font-size:0px;
background-color:#0000 !important;
background-image:url("media/newproduct.png");
background-repeat:no-repeat;
background-size:40px;
background-position:0px 0px;
width:50px;
height:70px;
}

[field="soldout"]{
position:absolute;
top:10px;
left:0px;
display:block !important;
font-size:0px;
z-index:100;
background-image:url("media/sold-out.png");
background-repeat:no-repeat;
background-size:161px;
background-position:-4px 0px;
width:200px;
height:140px;
}

[field="notavailable"]{
position:absolute;
top:10px;
left:13px;
display:block !important;
font-size:0px;
background-image:url("media/not-available.png");
background-repeat:no-repeat;
background-size:70px;
background-position:-4px 0px;
width:120px;
height:120px;
}

[field="bestseller"]{
position:absolute;
top:-20px;
right:-10px;
display:block !important;
font-size:0px;
background-image:url("media/best-seller.png");
background-repeat:no-repeat;
background-size:60px;
background-position:0px 0px;
width:60px;
height:60px;
}

[notavailable] [notavailable-button],
[soldout] [sold-out-button],
[sold-out-clear-button],
[bestseller] [bestseller-button],
[clear-premium-button],
[clear-newproduct-button],
[clear-all-button]{
display:none;
}

[notavailable] [sold-out-clear-button],
[soldout] [sold-out-clear-button],
[premium] [clear-premium-button],
[newproduct] [clear-newproduct-button],
[bestseller] [clear-all-button] {
display:block;
}

[sold-out-button],
[bestseller-button],
[notavailable-button]
{
	background:#e41e26;
}

[menu-button]{
	display:none;
}

[check-order-button]{
	display:none;
}

body[page="order.php"] [order-page-button],
body[page="kitchen.php"] [kitchen-page-button],
body[page="report.php"] [report-page-button],
body[page="products.php"] [products-page-button],
body[page="dbtables.php"] [dbtables-page-button]
{
background-color:#688b4e;
}

body[language="L"] [field="title_la"]{
display:block;
}

#customizer-buttons{
	font-size:20px;
	font-weight:bold;
	display:inline-block;
	width:90%;
	text-align:left;
}

#customizer-buttons b[customizer-group]{
	display:inline-block !important;
	font-size:25px;
	background:#fff;
	margin-top:15px;
	margin-bottom:5px;
	width:85%;
	border-bottom:#aaa dashed 1px;
	text-align:left;
	text-transform: capitalize;
}

#customizer-buttons small{
	display:block;
	font-size:10px;
	color:#444;
}

#customizer-buttons button{
	min-height:30px !important;
	padding:4px 12px !important;
	margin-right:10px;
	font-size:17px !important;
	display:inline-block !important;
	box-shadow:1px 1px 2px #888;
	border:0px solid #aaa;
	border-radius:11px !important;
}

@media screen and (min-height: 1900px){ /* Screen */
	#debug-info:before{ content:"Dev:Screen"; display:block;}
	html, body{
	}

	#menu{
		padding:5px;
		right:310px;
	}

	#menu h1{
		font-size:25px;
	}

	#orders{
		display:none;
	}
	
	[menuitem] [field="code"]{
		display:none;
	}

	[menuitem] [field="title"]{
		width:130px !important;

	}

	[menuitem]:nth-child(n+1) [field="title"]{
	}


	[menuitem] [field="price"]{
		min-height:30px;
	}

	/*
	[item_group] [item_sub1][groupsize="2"],
	[item_group] [item_sub1][groupsize="3"]{
		width:175px;
		min-height:228px;
		overflow:hidden;
		border:none;
	}
	

	[item_group] [item_sub1][groupsize="4"],
	[item_group] [item_sub1][groupsize="5"],
	[item_group] [item_sub1][groupsize="6"]{
		width: 445px;
		min-height:228px;
		overflow:hidden;
		border:none;
	}

	[item_group] [item_sub1][groupsize="7"],
	[item_group] [item_sub1][groupsize="8"],
	[item_group] [item_sub1][groupsize="9"],
	[item_group] [item_sub1][groupsize="10"],
	[item_group] [item_sub1][groupsize="11"],
	[item_group] [item_sub1][groupsize="12"],
	[item_group] [item_sub1][groupsize="13"],
	[item_group] [item_sub1][groupsize="14"],
	[item_group] [item_sub1][groupsize="15"],
	[item_group] [item_sub1][groupsize="16"],
	[item_group] [item_sub1][groupsize="17"]{
		width: 945px !important;
		min-height:228px;
		overflow:hidden;
		border:none;
	}
	*/


	[menuitem] [field="comment"]{
		display:none;
	}

	[item_group]{
		display:inline-block;
	}
	
	/*
	[item_sub1] [block]{
		display:none;
	}

	[item_sub1] [block]:nth-child(1),
	[item_sub1] [block]:nth-child(2)
	{
		display:inline-block;
	}

	[item_group] [item_sub1]{
		display:none;
	}

	[item_group] [item_sub1]:nth-child(1),
	[item_group] [item_sub1]:nth-child(2),
	[item_group] [item_sub1]:nth-child(3),
	[item_group] [item_sub1]:nth-child(4),
	[item_group] [item_sub1]:nth-child(5){
		display:inline-block;
	}
	
	[item_group] [item_sub1]:nth-child(6),
	[item_group] [item_sub1]:nth-child(7),
	[item_group] [item_sub1]:nth-child(8),
	[item_group] [item_sub1]:nth-child(9),
	[item_group] [item_sub1]:nth-child(10),
	[item_group] [item_sub1]:nth-child(11){
		display:none !important;
	}
*/
	
}

/*
#menu [halloween] {
	background-color:#000;
	color:#fff;
	padding-bottom:30px;
}

#menu [halloween] [field]{
	background-color:#0000;
	text-align:center;
}

#menu [halloween]::after{
	content:"";
	position:absolute;
	display:block;
	bottom:-10px;
	left:0px;
	width:100%;
	height:250px;
	background-image:url(media/halloween-bg.png);
	background-size:160px 140px;
	background-position:bottom left;
	background-repeat:no-repeat;
	opacity:1;
	z-index:0;
}

#menu{
	background-image:url(media/halloween-bg.png);
	background-size:100%;
	background-position:bottom left;
	background-repeat:no-repeat;

}
*/

@media screen and (max-width: 1070px){ /* Tablet */
	#debug-info:before{ content:"Dev:Tablet"; display:block;}

	[field="bestseller"]{
		width:50px;
		height:50px;
		background-size:50px;
		top:20px;
		right:-5px;
	}

	#menu h1{
		font-size:30px;
	}

	#menu{
		padding:5px;
		/*width:690px;*/
	}

	#menu [menuitem]{
		margin-right:7px;
		margin-left:1px;
		width:123px;
		padding-top:125px;
	}
	
	#menu [menuitem] img{
		display:none;
	}

	#menu [menuitem] [field="title"],
	#menu [menuitem] [field="title_la"],
	#menu [menuitem] [field="description"],
	#menu [menuitem] [field="price"]
	{
		font-size:12px;
		padding:0px 7px;
		margin-bottom:0px;
		width:110px;
	}


	#menu [menuitem][group="Extras"],
	#menu [menuitem][group="Sandwiches"]
	{
		padding-top:80px;
	}

	#menu [menuitem][tag="drink"]
	{
		/*padding-top:120px !important;*/
	}

}

@media screen and (max-width: 880px){ /* Mobile */
	#debug-info:before{ content:"Dev:Mobile"; display:block;}

	#logo{
		display:none;
	}

	#order{
		width:100%;
	}

	#order{
		z-index:10;
	}

	#menu{
		z-index:0;
		right:0px !Important;
	}

	#menu [menuitem]{
		margin-right:10px;
		margin-left:1px;
		width:115px;
		padding-top:125px;
		padding-bottom:5px;
	}
	
	#order-mobile{
		display:block;
		position:fixed;
		bottom:0px;
		left:0px;
		width:100%;
		z-index:99;
	}

	[dining="Take away"]{
		padding-left:5px !important;
	}
}
