/* styles.css */
*{
	font-family: monospace;
	font-weight: 100;
	-webkit-font-smoothing: antialiased;
	/*overflow: auto;*/
	box-sizing: border-box;
}
html{
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
}
body{
	position: relative;
	width: inherit;
	height: inherit;
	margin: 0;
	padding: 0;
	/* top: 0; */
	bottom: 0;
	left: 0;
	right: 0;
}

body {
	overflow: auto;
  /*counter-reset: meal; 
  /* Set a counter named 'section', and its initial value is 0. */
}

[hidden] { 
	display: none !important; 
}
/*body{
	height: calc(100% - 16px);
	width: calc(100% - 16px);
}*/

/*body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
  -webkit-transform: rotate(-90deg) translateX(-100%);
}*/

[class^="ico-"], [class*=" ico-"] {
	font: normal 1em/1 Arial, sans-serif;
	display: inline-block;
}
textarea {
	resize: none;
}
*::scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important
}
*::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important
}
*::selection {
	background-color: #333;
	color: white;
}

#current{
	/*opacity: 0;*/
	position: fixed;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	bottom: 0;
	overflow: auto;
	z-index: 1;
}





.animate{
	/* -webkit-font-smoothing: antialiased;*/

	/*-webkit-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
	transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);*/
}
.trans{
	/*-webkit-font-smoothing: antialiased;
	-webkit-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);*/
	transition: all 300ms cubic-bezier(0.8, 0, 0.2, 1);
}




/*.orientleft #shell {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:160px 160px;
}

.orientright #shell {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:230px 230px;
} */


iframe::-webkit-scrollbar {
	display: none;
	width:0;
	height: 0 !important;
	background-color:transparent;
}
iframe{
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	float: right;
	border:0
}

#resetData{
	position: absolute;
	transform: scale(0);
	overflow: auto;
	z-index: -1;
	bottom: 3rem;
	border: 1px solid #3e3e3e;
	border-radius: 50%;
	width: 7px;
	height: 7px;
	/* padding: 5px; */
	left: calc(50% - 4.5px);
}
progress{
	/*opacity: 0;*/
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
}

#loading{
	display:none;
	/* width: calc(100% - 16px); */
	width: 100%;
	height: 100%;
	/*height: calc(100% - 16px);*/
	margin: 0 auto;
	padding: 0;
	/*opacity: .9;*/
	/*position: fixed;*/
	position: relative;
	z-index: 99;
	background: #fff;
	box-sizing: border-box;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}
#loading label{
	text-align: center;
	position: relative;
	margin-block: 5px;
	font-size: 1.2rem;
}
#loading label:empty{
	content: "loading...";
}
#loading .loader {
	/* position: fixed!important; */
	z-index: 99;
	color: #bfbfbf;
	font-size: 11px;
	margin: 50% auto;
	width: 1em;
	height: 1em;
	display:block;
	/* left: 8em; */
	/* top: 8em; */
	border-radius: 50%;
	position: relative;
	/* text-indent: -9999em; */
	-webkit-animation: load4 1.3s infinite linear;
	animation: load4 1.3s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}


/*uniadd*/
div.uniadd{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	overflow:unset;
}
div.uniadd > div{
	position: relative;
	height: fit-content;
	margin: 16px 17px;
}

div.uniadd > div label{
	height: 100%;
	position: absolute;
	width: fit-content;
	font-size: 1.1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	letter-spacing: 5px;
	align-items: center;
	font-weight: bold;
}

div.uniadd > div .input {
	position: absolute;
	height: inherit;
	width: calc(100% - 3rem);
	left: 3rem;
	font-size: 1.1rem;
	padding: 0 5px;
	appearance: initial;
	border: 1px solid #cfcfcf;
	border-radius: 5px;
}


div.uniadd div.parent,
div.uniadd div.name {
	height: 48px;
}

div.uniadd div.album {
	height: 80px;
}

/*div.uniadd div.item.description {*/
	/* margin, parent, name, album, description */
/*	height: calc(100% - 64px - 48px - 48px - 48px - 80px)
}*/


div.uniadd > div .input.preview{
	height: 100%;
	width: initial;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	padding: initial;
	border: none;
	margin: 0 5px;
	position: relative;
	border-radius: 5px;
}

div.uniadd > div .input.description{
	height: 100%;
}
/*uniadd end*/







/*sysmenu*/
#sysmenu{
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 3.5rem;
	margin: 0;
	padding: 0;
	z-index: 2;
	background: white;
	/* filter: opacity(0%); */
	/* bottom: -3.5rem; */
	/* overflow-x: visible; */
	overflow: unset;
	box-shadow: 0px 2px 6px 0px #777;
}

#sysmenu div.sysmenu{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	/*margin: 7px auto;*/
	font-size: 1.1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	z-index: 2;
	background: white;
	/*bottom: -3.5rem;*/
}

#sysmenu > div.sysmenu{
	bottom:-3.5rem;
}

#sysmenu > div.sysmenu > span{
	font-size: inherit;
	font-weight: bolder;
	border-block: 1px solid #777;
	width: 100%;
	text-align: center;
	margin-inline: 5px;
	padding-block: 5px;
	background: gray;
	color: white;
	border-radius: 5px;
/*	bottom: -3.5rem;*/
/*	position: relative;*/
/*	filter: opacity(0%);*/
}

#sysmenu > div.sysmenu.main{
	/*	left: 0;*/
}

#sysmenu > div.sysmenu.addmain{
	/*	left: -100vw;*/
	justify-content: flex-end;
}
#sysmenu > div.sysmenu.addmain span{
	width: 25%;
/*	z-index: 1;*/
filter: opacity(0);
}
#sysmenu > div.sysmenu.addmain span:last-child{
	margin-inline-end: 11%;
}
/*#sysmenu > div.sysmenu.addmain span:first-child,
#sysmenu > div.sysmenu.addmain span:last-child{
	display: none;
}*/

#sysmenu > div.sysmenu.add{
	/*	left: -200vw;*/
}

/*sysmenu end*/



/*order*/
/*#current #orderlist{
	width: 100%;
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
}
#orderlist .orderlist{
	padding: 16px;
}

#orderlist .banner{
	height: fit-content;
	display: inline-flex;
	position: relative;
	width: 100%;
	vertical-align: middle;
	right: 0;
	flex-wrap: nowrap;
	align-items: center;
	flex-direction: row;
}
#orderlist .banner label{
	vertical-align: middle;
	box-sizing: content-box;
	height: fit-content;
	font-size: 1.5rem;
	font-weight: bold;
	position: relative;
	flex: 1 0 auto;
}
#orderlist .banner span.confirm{
	border: 1px solid #777;
	border-radius: 50%;
	position: relative;
	aspect-ratio: 1 / 1;
	height: 3.5rem;
	display: none;
	justify-content: center;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	margin-inline-end: 10px;
	flex-direction: row;
	align-items: center;
	background: #4CAF50;
	color: white;
	font-weight: bold;
}
#orderlist .banner span.cancel{
	border: 1px solid #777;
	border-radius: 50%;
	position: relative;
	aspect-ratio: 1 / 1;
	height: 3.5rem;
	display: none;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	flex-direction: row;
	font-weight: bold;
	background: #F44336;
	color: wheat;
}

#orderlist .banner.today span.confirm{
	display: flex;
}

#orderlist .banner.today span.cancel{
	display: inline-flex;
}

#orderlist .orderitems{
	overflow-y: scroll;
	display: block;
	height: inherit;
}*/
/*order end*/