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

/*
 * F486A2 244,134,162
 * BC6F85 188,111,133
 * D6A8B5 (188,111,133,.6)
 */
 
@font-face {
    font-family: mono;
    src: url(DroidSansMono.woff);
}

html {
	width: 100%;
	height: 100%;
	touch-action: manipulation;
}

body {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: sans-serif;
	color: #181818;
	background-color: white;
	overflow: hidden;
}

body>div {
	position: relative;
	width: 100%;
}

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

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

.selectable {
	user-select: text;
}

pre {
	font-size: 90%;
	font-family: mono;
}

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

table.layout {
	border-spacing: 0;
}

table.grid {
	width: 100%;
}

button {
	vertical-align: middle;
	min-width: 6em;
	height: 3em;
	padding: 0 0.5em;
	font-size: 100%;
	border: none;
	color: white;
	background-color: rgba(188,111,133,1);
	border-radius: 0.5em;
	cursor: pointer;
}
button.auto {
	height: 100%;
	background-color: transparent;
}
button.small {
	height: 2.5em;
}
button.right {
	float: right;
}

button>span {
	vertical-align: middle;
	font-size: 85%;
	font-stretch: condensed;
	white-space: nowrap;
}

button>img {
	vertical-align: middle;
	margin: 0.2em;
	width: 1.5em;
}

input[type=text], input[type=password], select {
	height: 1.8em;
	width: 8em;
	padding: 0 0.3em;
	vertical-align: middle;
	font-size: 100%;
	border: 0.1em solid #B0B0B0;
	outline: 0;
	background-color: white;
}

input[type=text]:focus, input[type=password]:focus {
	border: 1px solid red;
	outline: 0;
}

input[type=text]:disabled, input[type=password]:disabled {
	background-color: #E0E0E0; /* #505050; */
	/* color: white; */
}

input::placeholder, textarea::placeholder {
	color: #C0C0C0;
	font-style: italic;
}

textarea {
	padding: 0.3em;
	resize: none;
	font-family: sans-serif;
	font-size: 100%;
}

select>option {
	font-size: 100%;
}

hr {
	height: 1px;
	margin: 0 -0.5em 0.5em;
	background-color: #D0D0D0;
	border-width: 0;
}

div.check, span.check {
	display: inline-block;
	vertical-align: top;
	width: 2em;
	height: 2em;
	padding-top: 0.25em;
	border: 0.15em solid #B0B0B0;
	color: white;
	text-align: center;
	cursor: pointer;
}

div.check.disabled, span.check.disabled {
	border-color: #808080;
	cursor: default;
}

div.check.checked, span.check.checked {
	background-color: white;
	color: #181818;
}

div.check.completed, span.check.checked {
	background-color: #B0B0B0;
	cursor: default;
}

div.radio, span.radio {
	display: inline-block;
	vertical-align: top;
	width: 2em;
	height: 2em;
	padding-top: 0.25em;
	border: 0.15em solid #B0B0B0;
	border-radius: 50%;
	color: white;
	text-align: center;
	cursor: pointer;
}

div.radio.selected, span.radio.selected {
	background-color: white;
	color: #181818;
}

.error, .error span {
	color: red;
	font-style: italic;
}

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

.scrollable2 {
	overflow: auto;
}

.padded {
	padding-bottom: 20em;
}

.centered {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
*/
.inline {
	display: inline-block;
	vertical-align: middle;
}

.clouchable {
	cursor: pointer;
}

div.pulldown {
	position: relative;
	background-color: white;
	overflow: hidden;
}

input.pulldown {
	cursor: pointer;
}

input.pulldown:disabled {
	background-color: #E0E0E0;
	cursor: default;
}

div.pullwrap {
	position: absolute;
	width: 100%;
	max-height: 12em;
	background-color: white;
	border: 1px solid #A0A0A0;
	overflow-y: auto;
	z-index: 10;
}

div.pullwrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1em; /* needs to reset font size here. don't know why. */
}

div.pullwrap table td {
	height: 2.2em;
	padding: 0 0.3em;
	vertical-align: middle;
	color: #303030;
	border: 1px solid #C0C0C0;
	cursor: pointer;
}

div.pullwrap table td.selected {
	background-color: rgba(244,134,162,.3);
}

div.pullwrap table td.empty {
	background-color: #C0C0C0;
	cursor: default;
}

.screen {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.screen.opaque {
	background-color: #303030;
}

.cover {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5);
}

#crash {
	background-color: rgba(0,0,0,.3);
}

#crash>div {
	width: 85%;
	padding: 0.5em;
	text-align: center;
	font-size: 120%;
	color: red;
	background-color: white;
}

div.pad {
	padding: 0.5em;
}

div.pad-top {
	padding-top: 0.5em;
}

div.pad-bottom {
	padding-bottom: 0.5em;
}

div.header {
	padding: 0.4em 0.4em 0;
}

div.bottom-left, div.bottom-right {
	position: absolute;
	bottom: 0;
	padding: 0.5em;
}
div.bottom-left {
	left: 0;
}
div.bottom-right {
	right: 0;
}

div.bottom-left button {
	margin-right: 0.5em;
}

div.bottom-right button {
	margin-left: 0.5em;
}

div.form div.line {
	padding: 0.2em 0;
	white-space: nowrap;
}
div.form div.line.wrap {
	white-space: normal;
}

div.form div.line span.label {
	display: inline-block;
	vertical-align: middle;
	width: 9em;
	text-align: left;
}
div.form div.line span.label.disabled {
	color: #808080;
}

#front div.banner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
}
#front div.banner div.right {
	padding-right: 0;
}

#front div.banner button img, #front a.phone img {
	background-color: rgba(188,111,133,1);
}

#front div.banner button>span, #front a.phone>span {
	color: rgba(188,111,133,1);
}

#front div.info {
	position: absolute;
	top: 1.6em;
	left: 0;
	right: 0;
}
#front div.info {
	text-align: center;
	padding: 0.1em 0;
	font-size: 140%;
	font-family: serif;
	font-weight: bold;
	color: white;
	background-color: rgba(0,0,0,.15);
}

#front div.splash {
	position: absolute;
	width: 100%;
	height: initial;
	aspect-ratio: 1 / 1.1; /* w:1, h:1.2 */
	top: 50%;
	left: 0;
    transform: translateY(-50%);
    padding: 0 0.5em;
}
.horiz #front div.splash {
	width: initial;
	height: 100%;
	aspect-ratio: .9 / 1; /* w:.9, h:1 */
	top: 0;
	left: 50%;
    transform: translateX(-50%);
    padding: 0.5em 0.5em 0;
}
#front div.splash>img {
	width: 100%;
	cursor: pointer;
}

#front div.signin {
	margin-top: 1em;
	text-align: center;
}
.horiz #front div.signin {
	margin-top: 0.5em;
}
#front div.signin button {
	height: 2em;
}

#front div.copy {
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	font-size: 75%;
	color: #808080;
}

div.content {
	font-size: 90%;
	line-height: 1.5em;
}

div.content .i {
	font-style: italic;
}

div.content div.h {
	font-weight: bold;
}

div.content div.h.h1 {
	font-size:115%;
}

div.content div.h.h2 {
	font-size:110%;
}

#popup {
	max-width: calc(100% - 0.5em);
}

#popup>div {
	position: absolute;
	top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
	width: 18em;
	background-color: #d6a8b5;
	border-radius: 0.5em;
	box-shadow: 0 0 20px;
}

#popup>div.wide {
	position: relative;
	top: auto;
    left: auto;
    transform: none;
	width: 30em;
	max-width: 100%;
	margin-bottom: 0.3em;
	border-radius: 0;
	border-bottom-right-radius: 0.5em;
	box-shadow: 0 0 20px;
}
#popup>div.wide.w100 {
	width: 100%;
}
#popup>div.wide.h100 {
	height: 100%;
}

#popup div.text {
	min-height: 5em;
	max-height: calc(100% - 3em);
	padding: 1em 1em 0 1em;
	background-color: white;
	border-radius: 0.5em;
	overflow-x: hidden;
	overflow-y: auto;
}
#popup>div.wide div.text {
	border-radius: 0;
	border-bottom-right-radius: 0.5em;
}
#popup>div.wide.h100 div.text {
	height: calc(100% - 3em);
}

#popup div.text.short {
	min-height: 0;
	padding: 0.25em 0.25em 0.25em 1em;
}

#popup div.bottom {
	height: 3em;
	padding: 0.25em 0.5em 0 1em;
}

#popup button {
	height: 2.5em;
	margin-right: 0.5em;
}

#popup div.error, div.form div.error {
	height: 2.5em;
	padding: 0.5em 0 0.2em;
	padding-top: 0.5em;
}

/*
 * banner
 */

div.banner {
	width: 100%;
	padding: 0.25em;
	color: white;
    background-color: rgba(188,111,133,.6);
}

div.banner div.left, div.banner div.right {
	display: inline-block;
	vertical-align: middle;
}

div.banner div.left {
	width: 9em;
}

div.banner div.right {
	width: calc(100% - 9em);
}

div.banner div.right {
	float: right;
	padding-right: 0.2em;
	text-align: right;
}

div.banner div.text {
	text-align: center;
	font-size: 90%;
	padding-bottom: 0.5em;
}

div.banner button {
	min-width: 0;
	height: 1.9em;
	padding: 0;
	background-color: transparent;
}

a.phone {
	color: white;
	text-decoration: none;
}

a.phone>span {
	vertical-align: middle;
	font-size: 110%;
}

a.phone img {
	vertical-align: middle;
	margin: 0.2em;
	width: 1.5em;
}

/*
 * mopos
 */

div.pane {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
}

#mopos {
	font-size: 90%;
}

#mopos div.banner {
	font-size: 111%;
}

#mopos div.tabs {
	width: 100%;
	padding: 0.15em;
    background-color: rgba(244,134,162,.4);
}
.horiz #mopos div.tabs {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 10em;
	overflow-y: auto;
}

#mopos div.tab {
	display: inline-block;
	margin: 0.15em;
	padding: 0.6em 0.4em;
	font-size: 90%;
	color: white;
	background-color: rgba(244,134,162,.9);
	border-radius: 0.5em;
	cursor: pointer;
}

#mopos div.tab.selected {
	color: rgba(244,134,162,1);
	background-color: white;
}

#mopos div.tab[tid=XXX] {
	background-color: rgba(255,0,0,1);
}

#mopos div.tab[tid=XXX].selected {
	color: rgba(255,0,0,1);
	background-color: white;
}

#mopos div.pane.listing {
	flex: 1;
	width: auto;
	min-height: 0;
}
.horiz #mopos div.pane.listing:not(.notabs) {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10em;
	right: 0;
	width: auto;
}

#mopos div.filters {
	padding: 0.1em 0.3em 0.5em 0.3em;
	color: rgba(244,134,162,1);
    background-color: rgba(244,134,162,.4);
}
.horiz #mopos div.filters {
	padding: 0.1em 0 0.5em 0;
}

#mopos div.filters div.filter {
	display: inline-block;
	vertical-align: middle;
	height: 1.8em;
	min-width: 4em;
	margin: 0.3em 0.3em 0 0;
	padding: 0 0.5em 0 0.5em;
	text-align: center;
	line-height: 1.5;
	color: rgba(188,111,133,1);
	border: 0.1em solid rgba(188,111,133,.8);
	border-radius: 0.9em;
	cursor: pointer;
}

#mopos div.filters div.filter>span {
	vertical-align: middle;
	/*color: white;*/
	line-height: 1.8em;
	font-size: 90%;
}

#mopos div.filters div.filter.brand, #mopos div.filters div.filter.selected {
	color: white;
	background-color: rgba(188,111,133,.6);
	border-color: transparent;
}

#mopos div.filters div.filter.inote {
	padding-left: 0.2em;
	border-color: #F28AA3;
}

#mopos div.filters div.filter.inote.selected {
	color: white;
	background-color: #F28AA3;
}

#mopos div.filters div.filter.inote>img {
	vertical-align: middle;
	width: 1.3em;
}

/*
#mopos div.filters div.filter>span.check {
	vertical-align: middle;
	width: 1em;
	height: 1em;
	border: 0.1em solid rgba(188,111,133,.8);
}

#mopos div.filters div.filter.selected>span.check {
	background-color: rgba(188,111,133,.8);
}
*/
#mopos div.filters button {
	height: 1.8em;
	margin: 0.3em 0.3em 0 0;
	padding: 0 0.6em;
	border-radius: 0.9em;
}

#mopos div.filters button>span {
	vertical-align: middle;
}

#mopos div.filters button.select, #mopos div.filters button.clear {
	background-color: rgba(188,111,133,.6);
}

#popflt div.filter {
	display: inline-block;
	vertical-align: middle;
	margin: 0.2em 0.4em 0.5em 0;
	font-size: 90%;
	cursor: pointer;
}

#popflt div.filter span.label {
	display: inline-block;
	vertical-align: middle;
}

#popflt div.filter span.check {
	vertical-align: middle;
	width: 1.6em;
	height: 1.6em;
	margin-left: 0.2em;
	border: 1px solid #181818;
	cursor: default;
}

#popflt div.filter.selected span.check {
	background-color: #181818;
}

#popflt button.clear {
	height: 1.6em;
	width: 4em;
	min-width: 0;
	margin-bottom: 0.4em;
	color: #303030;
	background-color: #E0E0E0;
	border-radius: 0.8em;
}

#mopos div.items {
	width: 100%;
	padding-bottom: 6em;
}
.horiz #mopos div.items {
	padding-bottom: 4em;
}

#mopos div.items[tid=XXX] {
	padding: 0.2em 0.2em 5em 0.2em;
}

#mopos div.item {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 33.3%;
	margin-top: -1px;
	margin-left: -1px;
	background-color: white;
	border: 1px solid #D0D0D0;
	cursor: pointer;
}
.horiz #mopos div.item {
	width: 25%;
}

#mopos div.item.special {
	width: calc(50% - 0.4em);
	margin: 0.2em;
	/*border: 0.3em solid rgba(255,0,0,.6);*/
	border: 0.3em solid rgba(244,134,162,.9);
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}
.horiz #mopos div.item.special {
	width: calc(33.3% - 0.4em);
}

#mopos div.item div.image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
}

#mopos div.item div.image div.wrap {
	width: 100%;
	overflow: hidden;
}

#mopos div.item div.image>img {
	width: 100%;
}
#mopos div.item.special div.image>img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
/*
#mopos div.item div.more {
	display: none;
	position: absolute;
	right: 0;
	bottom: -.3em;
	padding: 0.2em 0.3em;
	font-size: 70%;
	font-style: italic;
	background-color: rgba(244,134,162,.25);
	border-top-left-radius: 0.8em;
}

#mopos div.item.item-collection div.more {
	display: block;
}
*/
#mopos div.item div.id, #mopos div.collection div.choice div.id, #popitem div.flavors div.flavor div.id {
	position: absolute;
	top: 0.2em;
	left: 0.4em;
	font-size: 60%;
	text-transform: uppercase;
	color: rgba(0,0,0,.4);
}

#mopos div.item div.inote {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}

#mopos div.item div.inote>img {
	width: 1.3em;
	height: 1.3em;
}

#mopos div.item div.text {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 7.5em;
	padding: 0.2em;
	text-align: center;
	color: #404040;
	background-color: #F8F8F8;
	overflow: hidden;
}
#mopos div.item.special div.text {
	height: 8em;
	background-color: rgba(255,0,0,.05);
}

#mopos div.item div.text div.brand {
	font-size: 85%;
}

#mopos div.item div.text div.label {
	font-size: 85%;
	font-weight: bold;
}

#mopos div.item div.text div.label span.label2 {
	font-weight: normal;
	font-style: italic;
}
#mopos div.item.special div.text div.label span.label2 {
	font-size: 120%;
	font-weight: bold;
	color: red;
	font-style: normal;
}

#mopos div.item div.text div.price {
	font-size: 80%;
}
#mopos div.item.special div.text div.price {
	font-size: 105%;
	font-weight: bold;
	color: red;
}

#mopos div.item.item-collection div.text {
	background-color: rgba(244,134,162,.15);
}

#mopos div.item div.order, #mopos div.collection div.choice div.order {
	position: absolute;
	left: calc(50% - 3.75em);
	bottom: 0.2em;
	width: 7.5em;
	max-width: 100%;
	height: 2.2em;
	text-align: center;
	border: 0.1em solid #D491A3;
	border-radius: 1em;
}

#mopos div.item div.order.disabled, #mopos div.collection div.choice div.order.disabled {
	border-color: rgba(0,0,0,.1);
}

#mopos div.item div.order.k, #mopos div.collection div.choice div.order.k {
	background-color: rgba(244,134,162,.4);
}

#mopos div.item div.order div.tool, div.collection div.choice div.order div.tool {
	height: 100%;
	width: 50%;
	float: left;
	font-size: 180%;
	color: #D491A3;
	background-color: transparent;
}

#mopos div.item div.order.disabled div, #mopos div.collection div.choice div.order.disabled div {
	color: rgba(0,0,0,.1);
	cursor: default;
}

#mopos div.item div.order.disabled div.oos, #mopos div.collection div.choice div.order.disabled div.oos {
	padding-top: 0.3em;
	line-height: 1.2em;
}

#mopos div.item div.order.disabled div.oos span.hilite, #mopos div.collection div.choice div.order.disabled div.oos span.hilite {
	color: #D491A3;
}

#mopos div.item div.order div.w100, div.collection div.choice div.order div.w100 {
	width: 100%;
	font-size: 70%;
	font-weight: bold;
	line-height: 2.8;
	border: 0;
}

#mopos #cart {
	display: inline-block;
	vertical-align: middle;
	width: 8.5em;	
	height: 3em;
	padding: 0.4em;
	text-align: center;
	color: white;
	font-weight: bold;
	white-space: nowrap;
	background-color: rgba(188,111,133,1); /*rgba(244,134,162,.9);*/
	border: 0.2em solid #FBCFD9; /*rgba(255,255,255,.5);*/
	border-radius: 1.5em;
	cursor: pointer;
}

#mopos #cart img {
	height: 100%;
	vertical-align: middle;
}

#mopos #cart div.text {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 5em;
	height: 100%;
}

#mopos #cart div.text>div {
	padding-top: 0.2em;
}

#mopos #cart span.count {
	font-size: 110%;
}

#mopos #cart span.label {
	font-size: 75%;
}

#mopos button.exit>img {
	border: 0.15em solid transparent;
}

#mopos div.collection {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
}

#mopos div.collection div.pane, .horiz #mopos div.collection div.pane {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

#mopos div.collection div.pane>div.label {
	padding: 0.5em;
	background-color: rgba(244,134,162,.14);
}

#mopos div.collection div.pane>div.label>span.price {
	float: right;
	font-weight: bold;
}

#mopos div.collection div.ranges, #popitem.popup2 div.div1 div.ranges {
	width: 100%;
	padding: 0.1em;
}

#mopos div.collection div.ranges div.range, #popitem.popup2 div.div1 div.ranges div.range {
	display: inline-block;
	vertical-align: top;
	margin: 0.1em;
	padding: 0.5em 0.3em;
	min-width: 7em;
	text-align: center;
	border: 1px solid #808080;
	cursor: pointer;
}

#mopos div.collection div.ranges div.range.selected, #popitem.popup2 div.div1 div.ranges div.range.selected {
	color: white;
	background-color: #808080;
}

#mopos div.collection div.list {
	width: 100%;
	padding-bottom: 4em;
	border-top: 1px solid #D0D0D0;
}

#mopos div.collection div.choice, #popitem div.flavors div.flavor {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 33.3%;
	margin-top: -1px;
	margin-left: -1px;
	border: 1px solid #D0D0D0;
}
.horiz #mopos div.collection div.choice, .horiz #popitem div.flavors div.flavor {
	width: 20%;
}

#mopos div.collection div.choice {
	cursor: pointer;
}

#mopos div.collection div.choice div.image, #popitem div.flavors div.flavor div.image {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-color: white;
	overflow: hidden;
}

#mopos div.collection div.choice div.image>img {
	width: 100%;
}

#mopos div.collection div.choice div.text, #popitem div.flavors div.flavor div.text {
	width: 100%;
	height: auto;
	min-height: unset;
	padding: 0.2em;
	text-align: center;
	color: #404040;
	background-color: #F8F8F8;
	overflow: hidden;
}

#mopos div.collection div.choice div.text>div.label {
	padding-bottom: 4em;
	font-size: 85%;
}

#mopos div.collection div.choice div.text>div.label span.label2 {
	font-style: italic;
	font-size: 95%;
}

#mopos div.collection div.choice div.text>div.price, #popitem div.flavors div.flavor div.text>div.price {
	position: absolute;
    width: 100%;
    bottom: 3em;
    font-size: 80%;
    text-align: center;
}

#mopos div.checkout div.orders {
	flex: 1;
	padding: 0 0.5em;
	border-bottom: 1px solid rgba(188, 111, 133, 1);
}

#mopos div.checkout table.ticket tr div.oos, #mopos div.checkout table.ticket tr div.ovl {
	display: none;
	vertical-align: top;
	margin-top: 0.3em;
}
#mopos div.checkout table.ticket tr.oos div.oos {
	display: inline-block;
}
#mopos div.checkout table.ticket tr.ovl div.ovl {
	display: inline-block;
}

#mopos div.checkout table.ticket tr.oos div.bar.inline, #mopos div.checkout table.ticket tr.ovl div.bar.inline {
	display: none;
}

#mopos div.checkout span.check {
	vertical-align: middle;
	width: 1.8em;
	height: 1.8em;
	border: 0.1em solid #B0B0B0;
}

#mopos div.checkout div.error:not(:empty) {
	padding: 0.2em;
	margin-bottom: 0.2em;
	border: 0.1em solid red;
}

#mopos div.checkout div.bottom {
	padding: 0.5em;
}

#mopos div.checkout div.bottom button {
	margin-right: 0.5em;
}

#mopos div.checkout button.submit.secure {
	width: 8em;
	padding: 0 0.5em 0 0;
}

#mopos div.checkout button.submit.secure>span {
	display: inline-block;
}

#mopos div.checkout button.submit.secure>img {
	width: 2.3em;
}

#mopos div.checkout button.update.address, #mopos div.checkout div.bar, #mopos div.checkout button.remove {
	vertical-align: top;
	height: 2.2em;
	width: 7em;
	color: #303030;
	background-color: #E0E0E0;
	border-color: #E0E0E0;
	border-radius: 0.7em;
}
#mopos div.checkout button.remove {
	margin-top: 0.5em;
	background-color: rgba(255,0,0,.1);
}

#mopos div.checkout div.bar {
	position: relative;
}

#mopos div.checkout div.bar div.tool {
	height: 100%;
	width: 50%;
	float: left;
	text-align: center;
	font-size: 180%;
	color: #808080;
}

#mopos div.checkout button.update.address span, #mopos div.checkout button.remove span {
	font-stretch: normal;
}

#mopos div.checkout div.orders div.coupons {
	width: 12em;	
}

#mopos div.checkout div.orders div.coupons input.pulldown {
	width: 100%;
}

#mopos div.checkout div.orders button.x {
	height: 1.8em;
	width: 1.8em;
	min-width: 0;
	margin-left: -0.1em;
	background-color: white;
	border: 0.1em solid #B0B0B0;
	border-radius: 0;
}

#mopos div.checkout div.orders button.x>span {
	font-size: 75%;
	font-weight: bold;
	color: #303030;
}

#mopos div.receipt div.pad {
	padding-bottom: 4em;
}

/*
 * ticket
 */

div.ticketid {
	margin: 0 -0.5em 0.5em;
	padding: 0.3em 0.5em;
	background-color: #E0E0E0;
}

div.ticketid button {
	height: 1.8em;
	border-radius: 0.9em;
}

div.ticketid img {
	height: 2em;
	vertical-align: middle;
}

table.ticket {
	border-collapse: collapse;
	width: 28em;
	max-width: 100%;
	font-size: 100%;
}

table.ticket tr.oos, table.ticket tr.ovl {
	/*color: rgba(0,0,0,.1);*/
	color: red;
}

table.ticket td {
	vertical-align: top;
	padding-bottom: 0.3em;
}

table.ticket td.count {
	width: 2.5em;
}

table.ticket td.label span.label2 {
	font-style: italic;
}

table.ticket td.label div.image {
	width: 6em;
	height: 6em;
	overflow: hidden;
}

table.ticket td.label div.image>img {
	width: 100%;
}

table.ticket td.price {
	width: 5em;
	text-align: right;
}

/*
 * popitem
 */
 
#popitem {
	max-height: calc(100% - 0.5em);
	overflow: hidden;
}

.horiz #popitem {
	background-color: white;
}

#popitem div.panel {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	overflow: hidden;
}
.horiz #popitem div.panel {
	width: 50%;
}

#popitem div.panel.left {
	background-color: white;
}

#popitem div.image {
	position: relative;
	display: block;
	line-height: 0;
	width: 100%;
	height: 50vh;
	overflow: hidden;
}
.horiz #popitem div.image {
	height: 0;
	padding-bottom: 100%;
}

#popitem div.image>img {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.horiz #popitem div.image>img, .dim2x #popitem div.image>img {
	position: absolute;
	width: auto;
	height: 100%;
	top: auto;
	left: 50%;
	transform: translatex(-50%);
}

#popitem div.select {
	width: 100%;
	aspect-ratio: 1 / 1; /* square */
	border-right: 0;
	border-bottom: 1px solid #C0C0C0;
	padding-bottom: 0.3em;
}
.horiz #popitem div.select {
	border-right: 1px solid #C0C0C0;
	border-bottom: 0;
}

#popitem span.id {
	text-transform: uppercase;
	color: rgba(0,0,0,.2);
}

#popitem span.price {
	font-weight: bold;
}

#popitem span.desc {
	font-size: 95%;
	color: #606060;
}

#popitem div.bar input.count {
	width: 3em;
	text-align: center;
	border: 0;
}

#popitem div.bar div.count {
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%, -50%);
}

#popitem div.bar {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	color: white;
	background-color: rgba(188,111,133,.6);
	border-radius: 0.5em;
	white-space: nowrap;
}

#popitem div.bar button {
	position: relative;
	margin: 0;
	width: 2.6em;
	min-width: 0;
	height: 2.5em;
	background-color: transparent;
}

#popitem div.bar button.select {
	margin: 0.4em;
	width: 1.8em;
	height: 1.8em;
	background-color: #F8F8F8;
	border-radius: 1.3em;
}
#popitem div.bar button.select.selected {
	background-color: transparent;
}

#popitem div.bar.flavor button.plus, #popitem div.bar.flavor button.minus {
	width: 2.3em;
}

#popitem div.bar button>img {
	vertical-align: top;
	width: 1em;
}

.horiz #popitem div.bottom {
	position: absolute;
	right: 0;
	width: 50%;
	bottom: 0;
}

#popitem div.brurl {
	position: absolute;
	left: auto;
	right: 1em;
	top: calc(50vh - 1.5em);
	bottom: auto;
}
.horiz #popitem div.brurl {
	left: 0.75em;
	right: auto;
	top: auto;
	bottom: 0.75em;
}
#popitem div.brurl a {
	font-size: 90%;
	opacity: 0.5;
}

#popitem.popup2 {
	display: flex;
	flex-direction: column;
	background-color: white;
	font-size: 90%;
}

#popitem.popup2 div.div1 div.label {
	padding: 0.5em 0.5em 0;
}

#popitem.popup2 div.div2 {
	position: relative;
	flex: 1;
}

#popitem.popup2 div.div2 div.flavors {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	border-top: 1px solid #D0D0D0;
	border-bottom: 1px solid #D0D0D0;
}

#popitem div.flavors div.flavor div.text>div.label {
	font-size: 85%;
}

#popitem.popup2 div.div3 {
	padding: 0.25em 0.5em;
}

#popitem.popup2 div.div3 button {
	width: 6em;
	min-width: unset;
}
.dim2x:not(.horiz) #popitem.popup2 div.div3 button {
	margin-right: 0.4em;
	width: 4.4em;
}

#popitem.popup2 div.div3 button.x, .dim2x:not(.horiz) #popitem.popup2 div.div3 button.x {
    width: 2.6em;
    background-color: rgba(188,111,133,.6);
}

#popitem.popup2 div.div3 button.x img {
	width: 1em;
}

#popitem.popup2 div.error {
	height: auto;
	padding: 0;
	margin-bottom: 0.3em;
}

/*
 * popreg, popaddr
 */
 
#popreg button.forgot {
 	width: auto;
 	height: auto;
 	margin: 0;
 	padding: 0 0.2em;
 	background-color: transparent;
}
#popreg button.forgot>span {
	font-size: 105%;
	color: blue;
	font-style: italic;
	line-height: 1.8em;
}

#popreg hr {
	height: 1px;
	margin: 0 0.5em;
	background-color: rgba(188, 111, 133, 1);
	border-width: 0;
}

#popreg div.info:not(:empty) {
	padding-bottom: 0.5em;
}

.popaddr input.street, .popaddr input.street2, .popaddr input.city {
	width: 10em;
}

.popaddr div.state {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 3em;
}

.popaddr div.state input.pulldown {
	width: 100%;
	text-align: center;
}

.popaddr div.state div.pullwrap {
	width: 19em;
	left: -5em;
	bottom: 0;
}

.popaddr div.state div.pullwrap table td {
	width: 12.5%;
	height: 2.2em;
	padding: 0;
	text-align: center;
}

.popaddr input.zip {
	width: 5em;
}

.popaddr div.line.ref {
	margin: 0.5em -1em;
	padding: 0.5em 1em;
	background-color: #E0E0E0;
}

.popaddr div.refcom input.pulldown, .popaddr div.refagnt input.pulldown {
	width: 6em;
}

.popaddr div.refcom div.pullwrap, .popaddr div.refagnt div.pullwrap {
	bottom: 0;
}

.popaddr div.line.reftext span {
	font-size: 95%;
	font-style: italic;
}

/*
 * molog
 */

#molog {
	background-color: #F0F0F0;
}

#molog div.list {
	padding-bottom: 4em;
}

#molog div.ticket {
	background-color: white;
	border: 0.3em solid #F0F0F0;
	cursor: pointer;
}
#molog div.ticket.selected {
	border-color: red;
}
#molog div.ticket.readonly {
	cursor: default;
}

#molog div.ticket[status=completed] {
	background-color: #DCEDE6;
}
#molog div.ticket[status=voided] {
	background-color: #FFDEDE;
}

#molog div.ticket div.id table {
	padding: 0.2em;
	font-size: 1em;
	font-weight: bold;
}

#molog div.ticket div.id button {
	display: none;
	height: 2em;
}

#molog div.ticket.selected div.id button {
	display: inline-block;
}

#molog div.ticket div.brief {
	display: block;
}
#molog div.ticket.selected div.brief {
	display: none;
}

#molog div.ticket div.brief span.hilite {
	border: 0.1em solid red;
}

#molog div.ticket div.full {
	display: none;
}
#molog div.ticket.selected div.full, #molog div.ticket div.full.selected {
	display: block;
}

#molog div.ticket div.brief {
	padding: 0 0.4em 0.4em;
}

#molog div.brief span.item[status=rem] {
	text-decoration: line-through;
}

#molog div.brief span.clipboard {
	display: none;
}

#molog div.ticket div.full {
	background-color: white;
}
#molog div.ticket[status=completed] div.full {
	background-color: #EDF6F2;
}
#molog div.ticket[status=voided] div.full {
	background-color: #FFEEEE;
}

#molog div.shipto, #molog div.payments {
	border-top: 1px solid #D0D0D0;
	padding: 0.4em;
	font-size: 90%;
}

#molog div.balance {
	padding: 0.4em;
}

#molog table.items {
	table-layout: fixed;
	border-spacing: 0;
	width: 100%;
	padding-bottom: 0.4em;
	font-size: 90%;
}

#molog table.items td {
	vertical-align: top;
	padding: 0 0.4em;
	border: 0;
}

#molog table.items tr.pad-top td {
	padding-top: 0.4em;
}

#molog table.items tr.shipped {
	background-color: #EDF6F2;
}

#molog table.items td.count {
	width: 2.5em;
}

#molog table.items td.label {
	width: calc(100% - 7.5em);
	padding-right: 0.3em;
	white-space: normal;
}

#molog table.items td.label div.image {
    width: 6em;
    height: 6em;
    overflow: hidden;
}

#molog table.items td.label div.image>img {
	width: 100%;
}

#molog table.items td.price {
	width: 5em;
	text-align: right;
}

#molog table.items td.ship {
	padding: 0.2em 0.4em;
	border-bottom: 1px dotted rgba(64,64,64,.2);
}

#molog table.log {
	margin-top: 0.4em;
	width: 100%;
	max-width: 30em;
	border-spacing: 0 0.2em;
	padding: 0.45em;
	font-size: 90%;
	background-color: white;
}

#molog table.log tr td {
    vertical-align: top;
    padding-top: 0.3em;
}

#molog table.log tr:not(.header) td:not(.note) {
     border-top: 1px solid #E0E0E0;
}

#molog table.log tr.header td {
    padding-top: 0;
	font-weight: bold;
}

#molog table.log tr td.datetime {
    width: 40%;
    text-align: left;
}

#molog table.log tr.header td.amount, #molog table.log tr.header td.balance {
    width: 30%;
    text-align: center;
}
#molog table.log tr td.amount, #molog table.log tr td.balance {
    text-align: right;
}

#molog table.log tr td.note {
	color: blue;
	font-style: italic;
}

/*
 * moeco
 */
 
#moeco {
	background-color: rgba(188,111,133,.6);
}

#moeco div.banner {
	background-color: transparent;
}

#moeco div.side {
	position: absolute;
	right: 0;
	width: 100%;
	top: auto;
	bottom: 0;
	height: 3.6em;
	padding: 0.3em 0;
	color: white;
}
.horiz #moeco div.side {
	right: 0;
	width: 6.6em;
	top: 0;
	bottom: 0;
	height: auto;
	padding: 0 0.3em;
}

#moeco div.grid {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 3.6em;
	background-color: #F8F8F8;
}
.horiz #moeco div.grid {
	left: 0;
	right: 6.6em;
	bottom: 0;
}

#moeco div.side button {
	width: 6em;
	min-width: 0;
	height: 100%;
	margin: 0 0 0 0.3em;
}
.horiz #moeco div.side button {
	width: 100%;
	height: 3em;
	margin: 0 0 0.3em 0;
}

#moeco div.grid>table {
	width: 100%;
	font-size: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #F0F0F0;
}

#moeco div.grid>table td {
	vertical-align: top;
}

#moeco div.grid>table tr.ruler td {
	height: 0;
	padding: 0;
}

#moeco div.grid>table tr.ruler td.image {
	width: 3em;
}

#moeco div.grid>table tr.ruler td.order {
	width: 7.5em;
}

#moeco div.grid>table tr.group td {
	padding: 0.3em;
	background-color: #D8D8D8;
	border-bottom: 0.1em solid white;
}

#moeco div.grid>table tr.item {
	background-color: white;	
	border-bottom: 0.1em solid #D8D8D8;
}

#moeco div.grid>table tr.item td.image {
	padding: 0.2em 0 0 0.2em;
	color: #A0A0A0;
}

#moeco div.grid>table tr.item td.image div.image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	cursor: pointer;
}

#moeco div.grid>table tr.item td.image img {
    position: absolute;
	width: 100%;
    top: 50%;
    transform: translateY(-50%);
	border: 1px solid #C0C0C0;
}

#moeco div.grid>table tr.item td.text {
	padding: 0.3em;
	font-size: 95%;
}

#moeco div.grid>table tr.item td.text span.id, #moeco div.grid>table tr.item td.text span.scanstamp {
	font-size: 90%;
	color: #A0A0A0;
}

#moeco div.grid>table tr.item td.text span.oos {
	color: red;
}

#moeco div.grid>table tr.item td.order {
	padding: 0.2em 0.2em 0.2em 0;
}

#moeco div.grid>table div.price {
	padding: 0.1em 0.1em 0 0;
	text-align: right;
	font-size: 95%;
}

#moeco div.grid>table div.bar {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 100%;
	color: white;
	background-color: rgba(188,111,133,.6);
	border-radius: 0.5em;
	white-space: nowrap;
}

#moeco div.grid>table div.bar div.count {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    /*left: calc(2.6em / 1.3);*/
    font-size: 130%;
    width: 2em;
    left: 1.2em;
	text-align: center;
}

#moeco div.grid>table div.bar button {
	min-width: 0;
	height: 2.5em;
	background-color: transparent;
}

#moeco div.grid>table div.bar button.minus, #moeco div.grid>table div.bar button.plus {
	width: 2.6em;
}

#moeco div.grid>table div.bar button.x {
	width: calc(100% - 2.6em - 2.6em);
}

#moeco div.grid>table div.bar button>img {
	vertical-align: top;
	width: 1em;
}

#moeco div.grid>table tr.total {
	background-color: #F8F8F8;	
}

#moeco div.grid>table tr.total td {
	padding: 0.3em 0.2em 0.3em 0;
}

/*
 * popimg
 */

#popup>div#popimg {
	width: 20em;
}

#popimg div.image {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

#popimg div.image>img {
	width: 100%;
	border-radius: 0.5em;
}

/*
 * popxadm
 */
 
#popup>div#popxadm.clients {
	height: calc(100% - 0.5em);
	background-color: white;
}

#popxadm.clients div.form {
	height: 100%;
}

#popxadm.clients div.buttons {
	padding: 0.5em 1em;
	border-bottom: 0.2em solid #E0E0E0;
}

#popxadm.clients div.list {
	position: absolute;
	left: 0;
	right: 0;
	top: 3.5em;
	bottom: 0.5em;
	padding-bottom: 0.5em;
}

#popxadm div.client {
	padding: 0.5em;
	border-top: 0.2em solid #E0E0E0;
	cursor: pointer;
}

#popxadm div.client.disabled {
	background-color: #E0E0E0;
}

#popxadm div.client span.label {
	display: inline-block;
	width: 9em;
}

/*
 * popxstf
 */
 
#popup>#popxstf.wide.h100 div.text {
	height: 100%;
}