html,body
{
margin:0px;
margin:auto;
padding:0px;
width:100%;
height:100%;
max-height:100%;
max-width:100%;
height:100vh;
width:100vw;
background:white;
color:black;
font-size:16px;
text-align:center;
line-height: 1.15em;
font-family: verdana, tahoma,'Helvetica Neue',Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; 
-webkit-tap-highlight-color: transparent;
}


.noSel-
{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}


*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}


div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}


ul,ol 
{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align:left;
  display:inline-block;
}

hr {
  box-sizing: content-box; 
  height: 0; 
  overflow: visible; 
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace; 
  font-size: inherit; 
}



a, a:active, a:visited a:hover
{
background-color: transparent;
text-decoration: none;
color: inherit;
cursor:pointer;
cursor:hand;
}

img {
  border-style: none;
  vertical-align: bottom;
}


iframe {
  border: 0;
  vertical-align: bottom;
}

button,
input,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: left;
}

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}


button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}


button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px; 
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

[contenteditable] {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}


[hidden] {
  display: none;
}



.pa-
{
position:absolute;
}

.pr-
{
position:relative;
}

.t0-
{
top:0px;
}

.b0-
{
bottom:0px;
}

.l0-
{
left:0px;
}

.r0-
{
right:0px;
}

.al-
{
text-align:left;
}

.ar-
{
text-align:right;
}

.ac-
{
text-align:center;
}

.fl-
{
float:left;
}

.fr-
{
float:right;
}

.ca-
{
clear:both;
}

.mg0-
{
margin:0px;
}

.mga-
{
margin:auto;
}

.pd0-
{
padding:0px;
}

.pd1-
{
padding:1em;
}


.wa-
{
width:auto;
}

.w100-
{
width:100%;
}

.w50-
{
width:50%;
}

.w25-
{
width:25%;
}

.w33-
{
width:33,3333%;
}


.w20-
{
width:20%;
}

.w30-
{
width:30%;
}

.w40-
{
width:40%;
}

.ha-
{
height:auto;
}

.h100-
{
height:100%;
}

.h50-
{
height:50%;
}

.h25-
{
height:25%;
}


.h33-
{
height:33,3333%;
}


.h20-
{
height:20%;
}

.h30-
{
height:30%;
}

.h40-
{
height:40%;
}


.o-
{
display:none !important;
}

.b-
{
display:block;
}

.ib-
{
display:inline-block;
}

.sh-
{overflow:hidden;}

.os-
{overflow:scroll;}

.ov-
{overflow:visible;}

.vh-
{visibility:hidden;}

.vv-
{visibility:visible;}


.b-w-
{background-color:white;}

.b-b-
{background-color:black;}

.b-t-
{background-color:transparent;}

.b-r-
{background-color:red;}

.b-bl-
{background-color:bl;}

.b-g-
{background-color:green;}

.b-y-
{background-color:yellow;}


.b-fs-
{background-color:fuchsia;}

.b-pp-
{background-color:purple;}

.b-mr-
{background-color:maroon;}

.b-gr-
{background-color:gray;}

.b-sv-
{background-color:silver;}


.b-cr-
{background-color:coral;}

.b-cn-
{background-color:cyan;}

.b-bg-
{background-color:beige;}

.b-nv-
{background-color:navy;}

.b-ov-
{background-color:olive;}

.b-lm-
{background-color:lime;}




.c-w-
{
	color:white;
}


.c-b-
{
	color:black;
}


.c-t-
{
	color:transparent;
}

.c-r-
{color:red;}

.c-bl-
{color:bl;}

.c-g-
{color:green;}

.c-y-
{color:yellow;}

.c-pk-
{color:pink;}

.c-lg-
{color:lightgreen;}

.c-lb-
{color:lightblue;}


.c-cr-
{color:coral;}

.c-cn-
{color:cyan;}

.c-bg-
{color:beige;}

.c-nv-
{color:navy;}

.c-ov-
{color:olive;}

.c-lm-
{color:lime;}

.c-fs-
{color:fuchsia;}

.c-pp-
{color:purple;}

.c-mr-
{color:maroon;}

.c-gr-
{color:gray;}

.c-sv-
{color:silver;}

/* w alto*/
.fwa-
{
font-weight:bolder;
}

/* w baixo*/
.fwb-
{
font-weight:normal;
}

.f1-
{
font-size:1em;
line-height:1.3em;
}

.f125-
{
font-size:1.25em;
line-height:1.6em;
}

.f15-
{
font-size:1.5em;
line-height:1.9em;
}

.f175-
{
font-size:1.75em;
line-height:2.2em;
}

.f2-
{
font-size:2em;
line-height:2.6em;
}

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


.cf-:before,
.cf-:after {
    content: " "; 
    display: table;
}

.cf-:after {
    clear: both;
}

.cf- {
    *zoom: 1;
}


.fnd-
{
	display:inline-block;
	position:relative;
	z-index:-20;
	line-height:0;
	opacity:1;
	background-color:#0b3f6e;
	background-image:url(fnd.jpg);
	/*background-image:url(fnd.png);*/
	background-position:top center;
	background-size:cover;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	
}

.fnd-::before
{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	pointer-events:none;
	z-index:1;
	opacity:0.15;
	background-color:#0ff;
	}
	



.c-
{
display: flex;	
margin:auto 0px;
width:100%;
height:100%;
padding:0px;
text-align:center;
}

/* espaçador */
.sp-
{
  flex-grow: 1;	
}

.gr-
{
position:relative;
margin:auto 0px;
padding:0px;
}

.el-
{
position:absolute;
margin:auto;
padding:0px;
}

.fxt-
{
position: fixed; top: 0;
}

.fxb-
{
position: fixed; bottom: 0;
}


.brr-
{
border-bottom:solid black 2px;
padding:0.2em;
}

.it-
{
cursor:pointer;	
color:black;
padding-right:0.2em;
cursor:pointer;
overflow: visible !important;
}

.iti-
{
color:red;
padding-right:0.2em;
cursor:pointer;
}

.it-:hover
{color:red;}	


*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}


body{
background-color:white;
text-align:center;
margin:0px;
padding:0px;
width:100%;
}

img
{
width:3rem;
}

.gri,.gr
{


margin-bottom:1rem !important;

}



.balcao:after
{
content:"Balcão";
float:right;
margin-right:1rem;
}

.balcao
{
position:relative;
display:inline-block;

height:5rem;
border:4px solid black;
border-radius:20px;
margin-bottom:1rem;
/*width:29rem;*/
width:100%;
}

.balcaoi
{
position:relative;
display:inline-block;
/*width:27rem;*/
width:100%;
height:5rem;


}




.rotacionar
{
transform: rotate(180deg);
transform-origin: center center;
position:absolute;
top:0.5rem;
left:1rem;
}









.balcaoii
{
position:relative;
display:inline-block;

height:5rem;
/*border:4px solid black;*/
/*border-radius:20px;*/
/*margin-bottom:1rem;*/

/*width:27rem;*/
width:100%;
}


.emoji
{margin-left:0.5rem;}



.mesa
{
display:inline-block;
/*display:block;*/
width:4rem;
height:3rem;
border:4px solid black;
border-radius:20px;
margin-bottom:1rem;
margin-left:0.5rem;
}



.mesai {
margin-right:1rem;
display:inline-block;
  justify-content: center;
  /*border:4px solid black;*/
  text-align:center;
  
}


.mesaii {
/*display:inline-block;*/
/*display:block;*/
  display: flex;
  flex-direction: column;
width:4rem;
height:3rem;
border:4px solid black;
border-radius:20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  margin:0.5rem;
}


.feliz
{
/*margin-left:0.7rem;*/
}

.celular
{
width:4rem;
margin-left:-0.2rem;
}


.mesaiiy:before
{
content:"Mesa";
}


.mesaiiy {
/*display:inline-block;*/
/*display:block;*/
  display: flex;
  flex-direction: row;

border:4px solid black;
/*border-radius:20px;*/

  display: flex;
  flex-direction: column;
  justify-content: center;
  /*margin:0.5rem;*/
}

.celulary
{
width:3rem;
/*margin-left:-0.2rem;*/
}

.felizy
{
margin-top:0.7rem;
}

.titulo
{
padding-top:0.5rem;
width:100%;
background-color:black;
color:white;
font-weight:bolder;
padding-bottom:0.5rem;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
/*border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;*/
}

.tituloi
{
width:100%;
background-color:black;
color:white;
font-weight:bolder;
padding-bottom:0.5rem;
/*border-top-left-radius: 20px;
border-top-right-radius: 20px;*/
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}

.gr
{

display:block;
width:100%;
border:0px solid black;
height:auto;
text-align:center;
padding-bottom:1rem;
border-radius:10px;
margin-bottom:0.5rem;

box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-left: solid #ff7733 8px;
padding: 0.5rem;
}

.caixa
{
position:absolute;
bottom:0.5rem;
left:0rem;
}

.caixatt
{
position:absolute;
bottom:0.5rem;
left:4rem;
}

.totem
{
position:absolute;
bottom:0.5rem;
left:1rem;
}

.totemtt
{
position:absolute;
bottom:0.5rem;
left:4rem;
}

.clientes,.clientesx
{
display:block;
padding:0.5rem;
}

.dashboard
{
display:block;
padding-top:0.5rem;
}

.clientes:after
{content:"COM fila";font-weight:bolder;color:red;}

.clientesx:after
{content:"SEM fila";font-weight:bolder;color:blue;}

.semfila
{
transform: rotate(180deg);
transform-origin: center center;
}

.gri {
	display: inline-block;
	/*width: 30rem;*/
	width:100%
	/*border: 4px solid black;*/
	height: auto;
	text-align: center;
	/* padding-bottom: 1rem; */
	border-radius: 10px;
	/*margin: 0.5rem;*/
	
	border-radius: 10px;

  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  border-left: solid #ff7733 8px;
}

.dashtext
{
text-align:left;
}

.card-- {
	margin: 0 auto;
	margin-bottom: 1em;
	width: 100%;
	height: 8em;
	position: relative;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	border-radius: 20px;
	width: 100%;
	max-width: 30em;
	text-align: left;
	font-family: Open Sans,sans-serif;
	/* box-shadow: 1px 1px 3px rgba(0,0,0,.5); */
	/* border-radius: 7px; */
	/* margin: 0 auto 17px; */
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	border-left: solid #ff7733 8px;
}






.brri--
{
	
	display: flex;
	flex-wrap: nowrap;
	  justify-content: center;
}

.menu-- {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-weight: bolder;
	/*padding-top: 0.25em;*/
}

.red-{color:red;font-weight:bolder;}

.gr- {
	width: 100%;
	height: 100%;
	margin: auto 0px;
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
	display: flex;
	flex-direction: column;
	max-width: 390px;
}

.it--- {
	box-shadow: 5px 2px 18px 0px #000000 !important;
}

.it-1- {
	overflow: hidden;
	/* background: url(img.avif); */
	/* background-position-x: 0%; */
	/* background-position-y: 0%; */
	/* background-size: auto; */
	/* background-size: cover; */
	/* background-position: center center; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.it- {
	flex-grow: 1;
	margin: 0 auto;
	margin-bottom: 1em;
	width: 100%;
	height: 12em;
	position: relative;
	overflow: hidden;
	/* box-shadow: 1px 1px 3px rgba(0,0,0,.5); */
	border-radius: 20px;
	width: 100%;
	max-width: 40em;
	text-align: center;
	font-family: Open Sans,sans-serif;
	/* border-radius: 7px; */
	/* margin: 0 auto 17px; */
	max-height: 32%;
	font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
	text-align: left;
	height: auto;
	background-color: white;
	/* border-radius: 8px; */
	/* box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 2px; */
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	border-collapse: separate !important;
	border-left-width: 1px !important;
	border-left-style: solid !important;
	border-left-color: #ff7733 !important;
	border-left-width: 8px !important;
	/* border-left-color: #ff7733 !important; */
	/* border-width: 10px !important; */
	/* border-left-color: white; */
	/* border-top: solid 3px white; */
	/* border-bottom: solid 3px white; */
	/* border-right: solid 3px white; */
	box-shadow: 0 0 10px 3px black;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.fundo-1- {
	background-image: url(img.avif);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border: solid 0.5em white;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.categ- {
	font-weight: bolder;
	font-size: 2.250em;
	color: white;
	line-height: 2.250em;
	text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.it-2- {
	overflow: hidden;
	/* background: url(salada-tropical-1024x576.jpg); */
	/* background-position-x: 0%; */
	/* background-position-y: 0%; */
	/* background-size: auto; */
	/* background-size: cover; */
	/* background-position: center center; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.it- {
	flex-grow: 1;
	margin: 0 auto;
	margin-bottom: 1em;
	width: 100%;
	height: 12em;
	position: relative;
	overflow: hidden;
	/* box-shadow: 1px 1px 3px rgba(0,0,0,.5); */
	border-radius: 20px;
	width: 100%;
	max-width: 40em;
	text-align: center;
	font-family: Open Sans,sans-serif;
	/* border-radius: 7px; */
	/* margin: 0 auto 17px; */
	max-height: 32%;
	font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
	text-align: left;
	height: auto;
	background-color: white;
	/* border-radius: 8px; */
	/* box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 2px; */
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	border-collapse: separate !important;
	border-left-width: 1px !important;
	border-left-style: solid !important;
	border-left-color: #ff7733 !important;
	border-left-width: 8px !important;
	/* border-left-color: #ff7733 !important; */
	/* border-width: 10px !important; */
	/* border-left-color: white; */
	/* border-top: solid 3px white; */
	/* border-bottom: solid 3px white; */
	/* border-right: solid 3px white; */
	box-shadow: 0 0 10px 3px black;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.fundo-2- {
	background: url(salada-tropical-1024x576.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border: solid 0.5em white;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.it-4- {
	/* overflow: hidden; */
	/* background: url(bebidas-2.jpg); */
	/* background-position-x: 0%; */
	/* background-position-y: 0%; */
	/* background-size: auto; */
	/* background-size: cover; */
	/* background-position: center center; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.it- {
	text-align: center;
	font-family: Open Sans,sans-serif;
	font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
	text-align: left;
	border-collapse: separate !important;
}


.fundo-3- {
	background: url(sobremesa.png);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border: solid 0.5em white;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fundo-4- {
	background: url(bebidas-2.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border: solid 0.5em white;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.it-4- {
	/* overflow: hidden; */
	/* background: url(bebidas-2.jpg); */
	/* background-position-x: 0%; */
	/* background-position-y: 0%; */
	/* background-size: auto; */
	/* background-size: cover; */
	/* background-position: center center; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.espaco--
{
height: 2.5em;
visibility:hidden;
}

.brrrr- {

	height: 3.5em;
	visibility:hidden;

}
/*#################################################################*/
/*   itens     */
.fx- {
	display: flex;
}

.lojas-- {
	margin: auto;
	display: inline-block;
	width: 35%;
	height: auto;
	overflow: hidden;
	background: url(img/_512-br.png);
	background-size: contain;
	position: relative;
	/* border: solid 5px blue; */
	border-radius: 20px;
	margin: 0.5em;
	background-position: center;
	background-color: black;
	background-repeat: no-repeat;
}

.fx-r- {
	flex-direction: row;
}

.esq {
	margin: auto;
	display: inline-block;
	width: 65%;
	/* border: solid 2px blue; */
	height: 100%;
	overflow: hidden;
	/* padding: 0.5em; */
}


.desc-- {
	font-size: 0.75em;
	/* position: absolute; */
	/* top: 1em; */
	/* padding-top: 0.5em; */
	width: 100%;
	/* height: calc(100% - 3em); */
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-overflow: ellipsis;
	-moz-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1em;
	/* border: solid 1px red; */
	/* height: 4.0em; */
	height: 3em;
	margin-top: 0.5em;
}

.pr-- {
	padding-top: 0.5em;
	font-size: 1.10em;
	/* position: absolute; */
	/* bottom: 0px; */
	height: 1.5em;
	padding-left: 0.5em;
	font-weight: bolder;
	/* border: solid 1px red; */
}

.card-- {
	margin: 0 auto;
	margin-bottom: 1em;
	width: 100%;
	height: 8em;
	position: relative;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	border-radius: 20px;
	width: 100%;
	max-width: 30em;
	text-align: left;
	font-family: Open Sans,sans-serif;
	/* box-shadow: 1px 1px 3px rgba(0,0,0,.5); */
	/* border-radius: 7px; */
	/* margin: 0 auto 17px; */
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	border-left: solid #ff7733 8px;
	overflow: visible;
}

/*  pedido  */


.top--- {
	position: relative;
	/* padding-top: 5em; */
	margin: auto;
	display: block;
	width: 100%;
	/* height: 20em; */
	overflow: hidden;
	text-align: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
	/* border: solid 1px red; */
	/*text-align: right;*/
}

.pedidoImg-- {
	padding-top: 0em;
	border-radius: 20px 20px 20px 20px;
	max-height: 100%;
	max-width: 100%;
	width:100%;

}


.tt-- {
	/* padding-top: 0.5em; */
	/* position: absolute; */
	/* top: 0px; */
	font-size: 1em;
	padding-left: 0.5em;
	font-weight: bolder;
	/* border: solid 1px red; */
	/* height: 1.5em; */
	height: 2.2em;
	/*padding-left: 0.5em;*/
	padding-right: 0.5em;
	overflow: hidden;
	margin-top: 0.5em;
	line-height: 1.1em;
}

.desc--- {
	font-size: 1em;
	padding-top: 0.5em;
	width: 100%;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.pr-- {
	padding-top: 0.5em;
	font-size: 1.10em;
	/* position: absolute; */
	/* bottom: 0px; */
	height: 1.5em;
	padding-left: 0.5em;
	font-weight: bolder;
	/* border: solid 1px red; */
}


body {
	display: flex;
	/*justify-content: center;*/
	align-items: center;
	flex-direction: column;
}

.menu--{
cursor:pointer;
}








.x--- {
	font-size: 2em;
	font-weight: bolder;
	cursor: pointer;
}



.top---- {	
box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	position: fixed;
	top: 0px;
	z-index: 1000;

	text-align: right;
	
	background: white;
	width: 100%;
	overflow: hidden;

	display: block;
	padding: 0.5em;
		margin-left: -1rem;
		padding-right: 1rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		max-width: 30rem;
}


.jan-
{

display:block;
width:100%;
border:0px solid black;
height:auto;
text-align:left;
padding-bottom:1rem;
border-radius:10px;
margin-bottom:0.5rem;

box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-left: solid #ff7733 8px;
padding: 0.5rem;
}

.pedido--- {
	padding: 0.5rem;
	margin: 0 auto;
	/* margin-bottom: 1em; */
	width: 100%;
	/* height: 70em; */
	position: relative;
	/*overflow: hidden;*/
	overflow:visible;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	border-radius: 20px;
	width: 100%;
	max-width: 30em;
	text-align: left;
	font-family: Open Sans,sans-serif;
	margin-bottom: 1em;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	border-left: solid #ff7733 8px;
}

.bottom-- {
	/* font-weight: bolder; */
	/* font-size: 1.250em; */
	margin: auto;
	display: block;
	width: 100%;
	/* border: solid 5px red; */
	height: calc(100% + 20em);
	overflow: hidden;
	padding: 0.5em;
}


.qtde-- {
	display: inline-block;
	position: relative;
	margin-top: 1em;
	width: 100%;
	height: 2.5em;
	text-align: center;
}

.bottom-- {
	/* font-weight: bolder; */
	/* font-size: 1.250em; */
	margin: auto;
	display: block;
	width: 100%;
	/* border: solid 5px red; */
	height: calc(100% + 20em);
	overflow: hidden;
	padding: 0.5em;
}

.total-- {
	font-size: 1em;
	padding-top: 0.5em;
	width: 100%;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-weight: border;
	line-height: 1.5em;
	padding-top: 0.5em;
	font-size: 1.10em;
	/* height: 1.5em; */
	padding-left: 0.5em;
	font-weight: bolder;
}

.itens-- {
	display: inline-block;
	position: relative;
	margin-top: 1em;
	width: 100%;
	height: 2.5em;
	text-align: left;
	padding-left: 0.5em;
	padding-right: 0.5em;
}


.valor-- {
	position: absolute;
	left: calc(20% + 2em);
	width: calc(60% - 4em);
	text-align: center;
	border: 1px black solid;
	font-weight: border;
	font-size: 1.5em;
	line-height: 1.5em;
}

.sinalPos-- {
	cursor:pointer;
	position: absolute;
	right: 20%;
	width: 2em;
	text-align: center;
	border: 1px black solid;
	font-weight: border;
	font-size: 1.5em;
	line-height: 1.5em;
}

.sinalNeg-- {
	cursor:pointer;
	position: absolute;
	left: 20%;
	width: 2em;
	text-align: center;
	border: 1px black solid;
	font-weight: border;
	font-size: 1.5em;
	line-height: 1.5em;
}

.bt-- {
	margin-top: 0.5em;
	width: 50%;
	background: #ff7733;
	color: white;
	/*font-weight: bolder;*/
	height: 2em;
	border-radius: 1em;
	text-align: center;
}


.bt100-- {
	margin-top: 0.5em;
	width: 100%;
	background: #ff7733;
	color: white;
	/*font-weight: bolder;*/
	height: 2em;
	border-radius: 1em;
	text-align: center;
}

.bti-- {
	margin-top: 0.5em;
	width: 100%;
	background: #ff7733;
	color: white;
	font-weight: bolder;
	height: 2em;
	border-radius: 1em;
	text-align: center;
	display:block;
}


.total--- {
	font-size: 1em;
	padding-top: 0.5em;
	width: 100%;
	/*padding-left: 0.5em;*/
	/*padding-right: 0.5em;*/
	font-weight: border;
	line-height: 1.5em;
	padding-top: 0.5em;
	font-size: 1.10em;
	/* height: 1.5em; */
	/*padding-left: 0.5em;*/
	font-weight: bolder;
}

.fieldset {
	margin-top: 0.5rem;
	padding: 0.5rem;
	border: 1px solid black;
	min-width: 0;
	margin-bottom: 0.5rem;
}

.brr-- {
	/* margin: auto; */
	position: fixed;
	top: 0px;
	/* padding-left: 1em; */
	z-index: 1000;
	background: black;
	color: white;
	width: 100%;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	/* margin: 0 auto 17px; */
	border-radius: 0px;
	/* width: 100%; */
	text-align: center !important;
	/* height: 2em; */
	height: 2rem;
	max-width: 30em;
	padding-top: 0.5rem;
	padding-bottom: 2rem;
}
.bbrr-- {
	/* margin: auto; */
	position: fixed;
	bottom: 0px;
	/* padding-left: 1em; */
	z-index: 1000;
	background: black;
	width: 100%;
	/*overflow: hidden;*/
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	/* margin: 0 auto 17px; */
	border-radius: 0px;
	/* width: 100%; */
	text-align: center !important;
	/* height: 2em; */
	height: 2rem;
	max-width: 30em;
	color: white;
	padding-top: 0.5rem;
	padding-bottom: 2rem;
}

.c-r-
{
color:red;
}

.cartoon {
	position: absolute;
	bottom: -15px;
	left: 45%;
	transform: translate(-70%, -45%);
	width: 80vmin;
	height: 80vmin;
}


.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 0.5vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
.cartoon {
  --skin: #fca;
  --cheek: rgba(200, 0, 0, 0.15);
  --hair: #631;
  --shirt: #fff;
}

.nose {
  width: 20%;
  height: 13%;
  background: var(--skin);
  top: 46%;
  left: 50%;
  box-shadow: 0.75vmin 0.4vmin, 0.75vmin -0.4vmin, 1vmin 0;
  background-image: radial-gradient(at 100% 50%, var(--cheek), var(--skin) 70%);
}

.head {
  width: 40%;
  height: 80%;
  top: 0;
  left: 1%;
  transform: rotate(-15deg);
  box-shadow: 0.75vmin 0, 10vmin -4vmin 0 5vmin var(--skin), 10.5vmin -4vmin 0 5.125vmin;
  clip-path: polygon(0% 40%, 200% 40%, 200% 100%, 80% 110%);
}

.ear {
  width: 9%;
  height: 13%;
  background: var(--skin);
  transform: rotate(-10deg);
  box-shadow: -0.5vmin -0.25vmin 0 0.25vmin, -0.5vmin 0.25vmin 0 0.25vmin, 0 -0.75vmin 0 -0.25vmin;
  top: 45%;
  left: 36%;
}

.ear::before {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  box-shadow: 0 -0.5vmin, inset 0.5vmin 1vmin 1vmin var(--cheek);
  top: 30%;
  right: 10%;
}

.ear::after {
  width: 2vmin;
  height: 2vmin;
  border: 0.33vmin solid;
  border-radius: 50%;
  border-right-color: transparent;
  top: 52%;
  right: 3%;
  box-shadow: -0.5vmin 0 1vmin 0.25vmin var(--cheek);
}

.hair {
  background: var(--hair);
}

.hair-back {
  width: 14%;
  height: 20%;
  top: 30%;
  left: 31.5%;
  transform: rotate(-13deg);
  box-shadow: -0.25vmin 0;
}

.hair-back-bottom {
  width: 5%;
  height: 8%;
  top: 56%;
  transform: rotate(-30deg);
  left: 40%;
  box-shadow: inset 0 0 0 4vmin rgba(0,0,0,0.2);
}

.hair-back-back {
  left: 48%;
  top: 20%;
  height: 30%;
  box-shadow: inset 0 0 0 4vmin rgba(0,0,0,0.2);
}

.hair-container {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0.75vmin 0)
}

.hair-top {
  width: 35%;
  height: 13%;
  transform: rotate(-5deg);
  top: 20%;
  left: 32%;
  clip-path: polygon(-10% -10%, 100% -10%, 100% 20%, 90% 30%, 100% 50%, 90% 70%, 100% 80%, 100% 100%, 30% 100%, 0% 80%);
  box-shadow: -0.25vmin -0.125vmin;
}

.hair-top::after {
  width: 25%;
  height: 80%;
  background: var(--hair);
  border-radius: 50%;
  top: 30%;
  left: 6%;
}

.eye {
  width: 2%;
  height: 4%;
  background: #210;
  top: 42.5%;
  left: 50%;
  transform: rotate(-8deg);
  box-shadow: 5vmin -0.25vmin 0 -0.5vmin #210, 5vmin -0.25vmin;
}

.mouth {
  width: 8%;
  height: 4%;
  top: 62%;
  left: 47%;
  box-shadow: inset 0.5vmin 0.25vmin, inset 0.5vmin 0vmin, inset 4vmin 0.5vmin 1vmin -0.5vmin var(--cheek);
}

.mouth::after {
  border-radius: 50%;
  width: 10%;
  height: 50%;
  border-right: 0.5vmin solid;
  right: 8%;
  top: -33%;
}

.shirt-neck {
  width: 12%;
  border-left: 0.4vmin solid;
  border-right: 0.25vmin solid;
  height: 8%;
  transform: rotate(20deg) skewY(10deg);
  background: var(--shirt);
  top: 70%;
  left: 34%;
}

.shirt-neck-back {
  top: 69%;
  left: 45%;
  border-right: 0.4vmin solid;
  transform: rotate(20deg) skewX(20deg);
}

.shirt {
  background: var(--shirt);
  border-left: 0.25vmin solid;
  border-right: 0.25vmin solid;
  width: 40%;
  height: 30%;
  top: 73%;
  left: 25%;
  clip-path: polygon(0% 0%, 50% 0%, 100% 14%, 100% 30%, 0% 30%)
}

.eyebrow {
  width: 6%;
  height: 5%;
  border: 0.5vmin solid transparent;
  border-top: 0.75vmin solid;
  top: 37%;
  left: 47%;
  transform: rotate(-30deg);
}

.eyebrow + .eyebrow {
  width: 5%;
  top: 36%;
  left: 54%;
  transform: rotate(16deg);
}

.shirt-line {
  width: 5%;
  height: 7%;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  top: 69.33%;
  left: 47.75%;
  box-shadow: 0vmin 2vmin 0 -0.25vmin var(--shirt), inset -1vmin 0 var(--shirt);
  clip-path: polygon(0% 200%, 0% 100%, 0% 90%, 85% 90%, 100% 0%, 100% 100%);
}

.bubble {
	width: 90%;
	height: 45%;
	left: 40%;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 5vmin;
	background: #ffd;
	box-shadow: 0 -0.25vmin, 0 0.125vmin;
	font-family: "Comic Sans", "Comic Neue", sans-serif;
}


.bubble::before {
  width: 40%;
  height: 100%;
  bottom: -51%;
  border-radius: 50%;
  left: 10%;
  box-shadow: 0.5vmin 0, 2vmin -0.5vmin #ffd, 2vmin -0.5vmin 0 0.5vmin;
  clip-path: polygon(0% 49%, 150% 48%, 150% 100%, 0% 100%);
}

.shirt-line-2 {
  border-top: 0.4vmin solid;
  width: 10%;
  height: 4%;
  top: 67.2%;
  left: 36%;
  background: var(--shirt);
}



.bt--- {
	margin-top: 0.5em;
	width: 100%;
	background: #ff7733;
	color: white;
	/* font-weight: bolder; */
	height: 2em;
	border-radius: 1em;
	text-align: center;
}



[speech-bubble], [speech-bubble] * { box-sizing: border-box }

[speech-bubble]{
  --bbColor: grey;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 1rem;
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
  position: relative;
}

[speech-bubble]::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
[speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
[speech-bubble][pright] { margin-right: var(--bbArrowSize); }


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before{
  top: calc(100% - 2px);
}
[speech-bubble][pbottom][aleft]::before{
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
[speech-bubble][pbottom][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
[speech-bubble][pbottom][aright]::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
[speech-bubble][ptop]::before{
  bottom: calc(100% - 2px);
}
[speech-bubble][ptop][aleft]::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}
[speech-bubble][ptop][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}
[speech-bubble][ptop][aright]::before{
  right: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* right */
[speech-bubble][pright]::before{
  left: calc(100% - 2px);
}
[speech-bubble][pright][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(100% 0, 0 100%, 0 25%)
}
[speech-bubble][pright][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}
[speech-bubble][pright][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
[speech-bubble][pleft]::before{
  right: calc(100% - 2px);
}
[speech-bubble][pleft][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}
[speech-bubble][pleft][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}
[speech-bubble][pleft][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
[speech-bubble][pbottom][flip]::before,
[speech-bubble][ptop][flip]::before{
  transform: scaleX(-1)
}
[speech-bubble][pleft][flip]::before,
[speech-bubble][pright][flip]::before{
  transform: scaleY(-1)
}





/* for demo */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default
}





[speech-bubble][pbottom],
[speech-bubble][ptop]{margin: 0}

[speech-bubble]{ 
  filter: drop-shadow(0px 0px 0.2rem black);
  transition: transform 0.25s ease
}
[speech-bubble]:hover{
  transform: scale(1.05);
  filter: 
    drop-shadow(0px 0px 0.2rem black)
    drop-shadow(0px 0px 1rem var(--bbColor));
}

[speech-bubble] .title{
  font-weight: 600;
  color: white; 
  text-shadow: 1px 1px 2px black;
  margin-bottom: 0.5rem
}
[speech-bubble] code {
  background: white;
  margin: 0.125rem;
  box-shadow: 0px 0px 5px rgba(0,0,0,.5);
  white-space: nowrap;
  font-size: .9rem
}

.balloon{margin:2rem !important;margin-top:4rem !important;margin-bottom:-2rem !important;}


.cardapio- {
	position: absolute;
	bottom: 2rem;
	left: 3.5rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
}

.pedidos- {
	position: absolute;
	bottom: 2rem;
	left: 9.5rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
}
.tipicos- {
	position: absolute;
	top: 4rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 2rem;
}

.quentinha- {
	position: absolute;
	top: 5rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 3rem;
}
.carrinho- {
	position: absolute;
	top: 19.5rem;
	z-index: 10000;
	width: 10rem;
	height: auto;
	rotate: 270deg;
	left: 8.8rem;
}
.carrinhoi- {
	position: absolute;
	top: 28rem;
	z-index: 10000;
	width: 10rem;
	height: auto;
	rotate: 270deg;
	left: 10.5rem;
}


.adicionar- {
	position: absolute;
	top: 2rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 0rem;
}


.pagar- {
	position: absolute;
	top: 3rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 270deg;
	left: 2rem;
}


.cartao- {
	position: absolute;
	top: 14rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 6.5rem;
}

.simular- {
	position: absolute;
	top: 19rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 6.5rem;
}

.bebidas- {
	position: absolute;
	top: -9rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	/* rotate: 90deg; */
	left: -0.9rem;
}

.carrinhoii- {
	position: absolute;
	top: 26.5rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	rotate: 180deg;
	left: 13.7rem;
}


.ped- {
	height: auto;
	width: 70%;
	position: absolute;
	left: -3rem;
	bottom: 0%;
}


.ped-- {
	height: auto;
	width: 10rem;
	position: fixed;
	left: -3rem;
	bottom: 2.5rem !important;
	z-index: 10000;
}

.ped--- {
	height: auto;
	width: 70%;
	position: absolute;
	left: 0;
	bottom: 0%;
}


.grz
{
display:inline-block;
width:100%;
max-width:30rem;
height:auto;
padding:1rem;
padding-bottom: 2.5rem;
}


.grzz
{
display:inline-block;
width:100%;
max-width:30rem;
height:100vh;
padding:1rem;
padding-bottom: 2.5rem;
}



.grzzz
{

display:block;
width:100%;
border:0px solid black;
height:70vh;
text-align:center;
padding-bottom:1rem;
border-radius:10px;
margin-bottom:0.5rem;

box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-left: solid #ff7733 8px;
padding: 0.5rem;
}

.ajuda- {
	position: absolute;
	bottom: 0rem;
	z-index: 10000;
	width: 10rem;
	height: 10rem;
	/* rotate: 180deg; */
	right: -1rem;
	width: 6rem;
}

.popup-
{
width:100vw;
height:100vh;
z-index:100000;
background:transparent;
position:fixed;
top:0px;
left:0px;	
}