/* Copyright (c) 2020 Aviado Inc. All rights reserved. */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
	text-size-adjust: none;
}
 
body {
	position: relative;
	height: 100%;
	font-family: sans-serif;
}

a {
	text-decoration: none;
}

:not(input), input:disabled {
	user-select: none;
}

input[type=text], input[type=password], select {
	height: 2em;
	padding: 0 0.3em;
	vertical-align: middle;
	font-size: 100%;
	border-style: solid;
	border-width: 0.15em;
	outline: 0;
}

select>option {
	padding: 0.3em;
}

table {
	table-layout: fixed;
	border-spacing: 0.2em;	
}

.scrollable {
	overflow-x: hidden;
	overflow-y: auto;
}

.centered {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#by-aviado {
	position: fixed;
	left: 0.6em;
	bottom: 0.4em;
	font-size: 70%;
	color: #A0A0A0;
}

#bo {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.cover {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.popcon {
	position: fixed;
	top: 50%;
    left: 50%;
    transform: translateX(-50%);

	margin-top: -5em;
	width: 20em;
	height: 10em;
}

.poppad {
	padding: 1.3em;
}

.popcon {
	box-shadow: 0 0 20px;
}

table.form {
	border-spacing: 0 0.5em;
}

table.form td {
	vertical-align: top;
}

table.form td.label {
	width: 16em;
	padding-top: 0.4em;
}

table.form td.label div.left {
	float: left;
	width: 12em;
}

table.form td.label div.right {
	float: right;
	width: 3.5em;
	text-align: right;
}

table.form input.vshort, table.form select.vshort {
	width: 3em;
}

div.check {
	width: 2em;
	height: 2em;
	border-style: solid;
	border-width: 0.15em;
	cursor: pointer;
}

div.radio {
	width: 2em;
	height: 2em;
	border-style: solid;
	border-width: 0.15em;
	border-radius: 50%;
	cursor: pointer;
}

table.tools td {
	min-width: 8em;
	padding: 0 1.5em;
	height: 3.5em;
	text-align: center;
	vertical-align: middle;
	font-size: 90%;
	font-weight: bold;
	cursor: pointer;
}

table.tools td.disabled {
	cursor: default;
}

div.error {
	color: red;
}

/*
 * slides
 */

#slides img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	transform: translate(-50%, -50%);
}

#slides.fade img {
	transition: opacity 3s ease-in-out;
	opacity: 0;
}

#slides.fade img.opaque {
	opacity: 1;
}

/*
 * stand2
 */
 
body.stand2, body.stand3 {
	overflow: hidden;
	touch-action: manipulation;
}

body.stand2 {
	font-size: 2.5vw;
}

.stand2 #mopos, .stand3 #mopos {
	position: absolute;
}

#mopos div.list {
	position: absolute;
	width: 100%;
	top: 3em;
	bottom: 0;
}

.stand2 #mopos>div {
	position: absolute;
}

.stand2 #mopos div.tabs {
	top: 0;
	height: calc(45% - 0.25em);
	left: 0;
	width: 35%;
}

#mopos div.tabs div.tab {
	cursor: pointer;
}

.stand2 #mopos div.items {
	top: 0;
	bottom: 0;
	right: 0;
	width: calc(65% - 0.25em);
}

#mopos div.items div.item {
	float: left;
	cursor: pointer;
}

.stand2 #mopos div.order {
	left: 0;
	width: 35%;
	top: 45%;
	bottom: 8em;
}

/*
 * order
 */

#mopos div.order div.item, #mopos div.order div.total {
	position: relative;
}

#mopos div.order div.item>div, #mopos div.order div.total>div {
	padding: 0.5em 0;
}

#mopos div.order div.item {
	min-height: 3.5em;
	margin-bottom: 0.2em;
	cursor: pointer;
}

#mopos div.order div.item div.count {
	position: absolute;
	left: 0;
	width: 13%;
	padding-right: 0.5em;
	text-align: right;
}

#mopos div.order div.item div.label {
	margin-left: 13%;
	width: 68%;
}

#mopos div.order div.item div.x {
	position: absolute;
	right: 0;
	padding-right: 0.5em;
	text-align: right;
}

#mopos div.order div.item div.x img {
	width: 1.5em;
}

#mopos div.order div.total {
	height: 7em;
	line-height: 1.8em;
}

#mopos div.order div.total div.label {
	position: absolute;
	left: 0;
	padding-left: 0.5em;
}

#mopos div.order div.total div.price {
	position: absolute;
	right: 0;
	padding-right: 0.5em;
	text-align: right;
}

.stand2 #mopos div.checkout {
	left: 0;
	width: 35%;
	height: 8em;
}

.stand2 #mopos div.checkout {
	bottom: 0;
}

#mopos #checkout, #mopos #checkout-cancel {
	margin: 0.5em;
	text-align: center;
	cursor: pointer;
}

#mopos #checkout {
	height: 4em;
	padding: 1.4em 0;
}

#mopos #checkout.disabled {
	cursor: default;
}

#mopos #checkout-cancel {
	height: 2.5em;
	padding: 0.6em 0;
}

#mopos #checkout>span, #mopos #checkout-cancel>span {
	font-size: 110%;
}

/*
 * stand3
 */
 
body.stand3 {
	font-size: 1.3vw;
}

.stand3 #mopos>div {
	position: absolute;
	top: 0;
	bottom: 0;
}

.stand3 #mopos div.tabs {
	left: 0;
	width: calc(20% - 0.25em);
}

.stand3 #mopos div.items {
	left: 20%;
	width: 57%;
}

.stand3 #mopos div.order {
	width: calc(23% - 0.25em);
	right: 0;
	bottom: 8em;
}

.stand3 #mopos div.checkout {
	top: auto;
	height: 8em;
	bottom: 0;
	width: calc(23% - 0.25em);
	right: 0;
}

/*
 * web
 */
 
body.web {
	margin: 0 auto;
	max-width: 1000px;
	min-height: 1400px;
	box-shadow: 0 0 20px #B0B0B0;
}

.web #mopos {
	position: absolute;
	left: 0;
	width: 100%;
}

.web #mopos>div {
	position: absolute;
	top: 0;
}

.web #mopos div.tabs {
	left: 0;
	width: 33%;
	height: 22em;
}

.web #mopos div.items {
	right: 0;
	width: 67%;
	width: calc(67% - 0.2em);
}

.web #mopos div.items div.list {
	bottom: auto;
}

.web #mopos div.order {
	left: 0;
	width: 33%;
	top: 22em;
}

.web #mopos div.order div.list {
	position: relative;
	top: 0;
	bottom: auto;
}

.web #mopos div.schedule {
	width: 100%;
	padding: 0 0.5em;
}

.web #mopos div.schedule div.label {
	height: 2em;
	padding-top: 0.5em;
}

.web #mopos div.schedule div.select {
	width: 100%;
}

.web #mopos div.schedule div.select select {
	height: 7em;
	width: 100%;
}

.web #mopos div.checkout {
	width: 100%;
}

/*
 * poppos
 */

#poppos {
	margin-top: 0;
	top: 5%;
	width: 38em;
	height: 44em;
	max-width: 96%;
	max-height: 90%;
}

#poppos div.item {
	position: absolute;
	left: 1.5em;
	width: 15em;
	top: 1.5em;
	bottom: 4.3em;
	overflow: hidden;
}

#poppos div.form {
	position: absolute;
	right: 1.5em;
	width: 19em;
	top: 1em;
	bottom: 4.3em;
	overflow-y: auto;
}

#poppos div.item div.item-image {
	padding-top: 0.5em;
	width: 100%;
}

#poppos div.item div.item-image img {
	width: 100%;
}

#poppos div.item div.label {
	font-size: 120%;
}

#poppos div.item div.price {
	padding: 0.5em 0;
	font-size: 110%;
}

#popchko {
	margin-top: -19em;
	width: 26em;
	height: 38em;
}

.web #popchko {
	width: 23em;
}

#popchko table.form.form1 {
	padding-top: 1em;
	padding-left: 1.5em;
}

#popchko table.form.form2 {
	padding-left: 1.5em;
}

#popchko table.form td {
	width: 10em;
}

#popchko table.form input.name, #popchko table.form input.phone {
	width: 100%;
}

#popchko table.form input.code {
	width: 3.5em;
}

#popchko div.pago div.popcon {
    transform: translate(-50%, -50%);
	margin-top: 0;
	width: auto;
	height: auto;
}

#popinf, #popwait, #poperr {
	width: 24em;
	height: auto;
}

/*
 * kiosko
 */
 
#menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 3em;
	height: 3em;
	cursor: pointer;
}

#menu>div {
	position: absolute;
	top: 0.1em;
	right: 0.1em;
	width: 1em;
	height: 1em;
	border: 1px solid #D0D0D0;
}

#moadm {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
}

#moadm table.tools.large {
	padding: 0.3em;
}

#moadm table.tools.large td {
	height: 4.5em;
	width: 12em;
	font-size: 100%;
	background-color: #547CB4;
}

#popadm1 {
	margin-top: -13em;
	width: 26em;
	height: 20em;
}