body {margin:0;background:var(--mainBG);}

html.modern body {background:var(--primaryBG);}
html.kiosk body {}

/**/

.the-content {}

/**/

.the-top 	{width:calc(100%);height:60px;background:var(--primaryBG);color:var(--primaryFG);z-index: 2;position: relative}
.the-top .items  {margin-top:-3px;}
.the-top .items .item {margin:2px;border:2px solid rgba(var(--white),25%);border-radius:5px;vertical-align: middle}
.the-top .items .item > i.icon {font-size: 32px !important;}
.the-top .items .item .ui.label {position:absolute;top:0;right:0;padding:3px 5px;margin:-5px;color:black;height:16px;min-width:16px}

.the-top .web-logo {display: inline-block;height:60px;}
.the-top .web-logo img {}
.the-top .web-menu {display:none;position: absolute;z-index:1;top:0px;left:0px;font-size: 30px;cursor:pointer;}
.the-top .web-menu i.content {box-shadow: none !important;background:var(--primaryBG);color:var(--primaryFG);}
.havePanel.openPanel .the-top .web-menu i.content::before {content: "\f00d" !important;}
.the-top .web-titles {display:flex;flex-direction:column;justify-content:center;padding-left:10px;position:absolute;top:0;left:60px;right:0;height:100%;font-size:30px;color:inherit;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.the-top .web-titles .web-title {padding-top:5px;}
.the-top .web-titles .web-subtitle {font-size:12px;padding-top:5px}

html.modern .the-top .items {margin-top:0px;}
html.modern .the-top .items .item {border-radius:.75rem}
html.modern .the-top .web-logo {margin-left:5px;}
html.modern .the-top .web-menu {font-size: 32px;}
html.modern .the-top .web-titles .web-title {padding-top:7px}
/**/

.the-side
	{display: none;background:var(--secondaryBG);color:var(--secondaryFG);width:300px;position:fixed;top:60px;right:0;bottom:0;z-index:1;}

html.modern .the-side
	{background:var(--primaryBG);color:var(--primaryFG);}

/**/

.the-main {background:var(--mainBG);color:var(--mainFG);position:fixed;top:60px;left:60px;bottom:0;right:0;overflow:hidden;}
.the-main > .the-main-content {height:100%;overflow:auto;scrollbar-width: thin;scrollbar-color: var(--tertiaryBG) var(--secondaryBG);}
/*.the-main > .the-main-content > .ui.section {flex-basis: 100%;min-height: 250px;}
.the-main > .the-main-content > .ui.container {margin-top:1em;margin-bottom:1em;}
.the-main > .the-main-content > .ui.section.centralized, .the-main > .the-main-content > .ui.container.centralized {display:flex;height:100%;align-self: center;}*/
.the-main > .the-main-content > .ui.container {padding:5px;}
.the-main > .the-main-content > .ui.container.centralized {display:flex;height:100%;}
.the-main > .the-main-content > .ui.container.centralized > .content {align-self: safe center;width:100%;padding-bottom:5px;}
body.mobile .the-main > .the-main-content > .ui.container {margin:0 !important;}

html.modern .the-main {border-radius:0 .75rem .75rem 0;margin:5px 10px 10px 5px;}
html.modern body.mobile .the-main {border-radius:.75rem;margin-left:10px;}

html.kiosk .the-main {left:5px;}
html.kiosk body.mobile .the-main {left:0px;}

/**/

.the-menu {background:var(--secondaryBG);color:var(--secondaryFG);width:60px;position:fixed;top:60px;left:0;bottom:0;z-index:2;overflow: hidden auto;scrollbar-width: thin;}
.the-menu .ui.menu {background:transparent;border:0 !important;border-radius:0 !important;}
.the-menu .ui.menu .item {height:50px;justify-content:center;align-items:center;display:flex;border-radius:0 !important;}
.the-menu .ui.menu .item:hover {background:var(--primaryBG);color:var(--primaryFG);}
.the-menu .ui.menu .item > i {color:var(--secondaryFG);font-size:24px;margin:0 !important;}
.the-menu .ui.menu .item.image {padding:0;height:60px;}
.the-menu .ui.menu .item.image > img {width:100%;height:60px;object-fit:cover;}

.the-menu .ui.menu .item.onmobile {background:var(--secondaryBG) !important;color:var(--secondaryFG) !important;}
.the-menu .ui.menu .item.onmobile i.icon {color:inherit !important;}
body.mobile .the-menu 	{}

html.modern .the-menu
	{background:var(--primaryBG);color:var(--primaryFG);margin-left:5px;margin-right:0;}
html.modern .the-menu .ui.menu .item
	{margin:5px;border-radius:.75rem !important;}
html.modern .the-menu .ui.menu .item:hover
	{background:var(--secondaryBG);color:var(--secondaryFG);}
html.modern .the-menu .ui.menu .item:hover i.icon
	{color:inherit !important;}
html.modern .the-menu .ui.menu .item > i
	{color:var(--primaryFG);}
html.modern .the-menu .ui.menu .item.image
	{padding:0;height:50px;}
html.modern .the-menu .ui.menu .item.image > img
	{height:50px;border-radius:.75rem;}

html.kiosk .the-menu {display:none !important;}

/**/

.the-panel {background:var(--tertiaryBG);color:var(--tertiaryFG);position:fixed;top:60px;left:60px;bottom:0;width:195px;overflow:auto;scrollbar-width: thin;z-index: 1;}

html.kiosk:not(.modern) .the-panel {left:0px;margin:0px!important;border-radius:0!important;}

body.mobile .the-panel 	{display: none;box-shadow: 0 0 10px rgba(0,0,0,0.5);width:200px;}
.the-panel .headline {background: transparent; border: none; box-shadow: none; padding:0 !important; }
.the-panel .headline .ui.header {color: var(--tertiaryFG);font-size:14px;}

html.modern .the-panel
	{
		margin:5px 10px 10px 5px;border-radius:.75rem 0 0 .75rem;
		border-right: 0px solid var(--primaryBG);background:var(--secondaryBG);color:var(--secondaryFG);
	}
html.modern .the-panel .headline .ui.header
	{
		color: var(--secondaryFG);
	}
html.modern body.mobile .the-panel
	{
		border-right:5px solid var(--primaryBG);
	}

html.kiosk.modern .the-panel {left:5px;}


/**/

.the-block {
	display: none;
	background:rgba(var(--white));color:rgba(var(--black));
	position:fixed;top:60px;right:0;bottom:0;z-index: 1;
	width:300px;overflow:auto;scrollbar-width: thin;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.the-block > .head {
	height: 50px;
	overflow:hidden;
	display: flex;
	justify-content:center;
	align-items:center;
	padding:.5em;
	font-size: 18px;
	font-weight: 900;
	background:var(--primaryBG);color:var(--primaryFG);
}
.the-block > .body {
	height: calc(100% - 100px);
	overflow:auto;scrollbar-width: thin;
}
.the-block > .foot {
	height: 50px;
	overflow:hidden;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.the-block > .foot > * {
	flex: 0 0 100%;
}
.the-block > .foot > .pagination {
	background: transparent;
	padding: 0;
}

html.modern .the-block {
	margin:5px 10px 10px 10px;
	border-radius:0 .7rem .7rem 0;
	box-shadow: none !important;
	/*box-shadow: inset 10px 0 10px -10px rgba(0,0,0,0.25) !important;*/
	border-left: 0px solid var(--primaryBG);
}

html.modern .the-block > .head {
	background:var(--secondaryBG);color:var(--secondaryFG);
}

/**/

.the-content:not(.havePanel) .the-main {border-top-left-radius:.75rem;border-bottom-left-radius:.75rem;}
.the-content:not(.havePanel) .the-menu .item.onmobile {display: none !important}
html.kiosk body.mobile .the-content.havePanel .the-top .web-menu {display: inline-block !important}

body:not(.mobile) .the-content.havePanel .the-main {left:260px;}
html.kiosk body:not(.mobile) .the-content.havePanel .the-main {left:200px;}
.the-content.havePanel .the-pop {padding-left: 200px;}
body.mobile .the-content.havePanel .the-pop {padding-left: 15px !important;padding-right: 15px;}

body.mobile .the-pop .popbox .head.segment {border-radius:0 !important;}
html.modern body.mobile .the-pop .popbox .head.segment {border-radius:1rem 1rem 0 0 !important;}

/**/

html.kiosk .the-pop {left:0;}


/**/

.float-top {margin-left:25px !important;top:60px !important;}
.float-bottom {margin-left:25px !important;}

.float-bottom {width:500px}
.float-bottom .button {font-size:24px;border-radius:1rem 1rem 0 0;box-shadow:0 0 20px rgba(0,0,0,20%);}

body.mobile .float-bottom {width:100%}
body.mobile .float-bottom .button {}

html.modern .float-top {top:65px !important;}
html.modern .float-bottom {}

html.kiosk .float-top, html.kiosk .float-bottom {margin-left:0 !important;}

/**/

html.kiosk [onblock='panel'] {
	display: none !important;
}

/**/

html.modern .bordering {border-radius: .75rem !important}
html.modern .bordering > .ui.segment:first-child {border-radius: .75rem .75rem 0 0 !important}
html.modern .bordering > .ui.segment:last-child {border-radius: 0 0 .75rem .75rem !important}

/**/

/*html.POS body:not(.mobile) .the-main {
	right: 300px;
}


html.POS body:not(.mobile) .the-side {
	width: 300px;
}

html.POS .offpos {
	display: none !important
}*/

/**/

html.modern .the-panel.rounded, html.modern .the-block.rounded
	{border-radius:.75rem !important;}

html.modern .the-panel.rounded
	{border-right:0px !important;}

html.modern .the-block:not(.rounded)
	{border-left:5px solid var(--primaryBG);}

@media screen and (max-width: 767px) { /* MOBILE */
	.the-top {width:100%;}
	.the-side {display: none;}
	.the-content.open .the-side {display: block;z-index:9999;box-shadow: 0 0 10px rgba(0,0,0,0.75);width:auto;left:60px;}
	
	.the-content.openPanel .the-panel {display: block !important;}

	.the-main {right: 0;}

	html.modern .the-content.openPanel .the-panel {left:70px !important;margin-left:0px;margin-bottom:10px;border-radius:.75rem 0 0 .75rem;border-top-left-radius:0 !important;box-shadow:none;}
	html.kiosk.modern .the-content.openPanel .the-panel {left:10px !important;border-radius:.75rem 0 0 .75rem !important;}
	html.kiosk.modern .the-content.openPanel .the-panel.rounded {border-radius: .75rem !important}

	html.modern .the-menu {margin-left:5px;}
	html.modern .the-content.openPanel .the-menu {width:65px;padding-right:5px;}
	html.modern .the-menu .ui.menu .item.onmobile {margin-bottom:10px;transition:all .075s;/*box-shadow: 10px 0px 0px 0px black;*/}
	html.modern .the-content.openPanel .the-menu .ui.menu .item.onmobile {margin-right:-5px;border-radius:.75rem 0 0 .75rem !important;transition:all .075s;}
	html.modern .the-content.openPanel .the-menu .ui.menu .item.onmobile i.icon {margin-left:-10px !important;}
	html.modern .the-content .the-menu .ui.menu .item.onmobile i.icon::before {/*content: "\f52c" !important;*/}
	html.modern .the-content.openPanel .the-menu .ui.menu .item.onmobile i.icon::before {content: "\f00d" !important;}

	html.modern .the-pop {padding-left: 15px;right:15px !important}

	html.modern .float-top, html.modern .float-bottom
		{padding-left: 50px;padding-right: 40px;}
}

@media screen and (max-width: 991px) { /* MOBILE */
	
}

@media screen and (max-width: 1200px) { /* MOBILE */
	.the-main > .the-main-content > .ui.container {width: 100% !important}
}

/**/

.cartLoad {display: none;}
.cartEmpty {}

/**/

.ui.header.focus {
	font-size: 15vmin;
	font-weight: 300;
}

.ui.header.focus .content > span {
	opacity: 25%
}

.ui.header.focus .content > .sub.header {
	font-size: 15%;
	font-weight: 900;
}

/**/

.ui.segment.focus:hover {
	transform:scale(1.025);
}

.ui.segment.focus .onfocus { display: none; }
.ui.segment.focus:hover .onfocus { display: block; }
.ui.segment.focus:hover td.onfocus { display: table-cell; }


/**/

.ui.card.active {outline:5px solid rgba(var(--orange));}
.ui.card.active .extra.content {background:rgba(var(--orange),50%);}

/**/

.qinput:hover {background: lightyellow;cursor: pointer}
.qinput.active {background: #eeeeee;z-index: 1}