/* Style Reset */
body {
	cursor: default;
	margin: 0px;
}

h1 {
	font-weight: inherit;
}

ul {
	list-style-type: none;
	padding-inline-start: 0px;
}

/* Prevent Overscroll Refresh*/
html {
	overscroll-behavior: none;
}

/* Nested CSS */
#app {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	height: 100%;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	width: 100%;

	> .loading {
		font-size: 1.5rem;
		margin: 2rem;
		text-align: center;
	}

	> .heading {
		margin: 1rem 0;
		text-align: center;
	}

	> .distributors {
		> .distributor {
			border: 1px solid #000000;
			border-radius: 2rem;
			margin: 0 0.5rem 0.5rem;
			padding: 1rem;
			text-align: center;
		}
	}

	> .form {
		> .items {
			margin: 0 0 1rem 0;

			> .item {
				align-items: center;
				border-top: 1px solid #000000;
				display: flex;
				justify-content: space-between;
				padding: 0.25rem 0 0.25rem 0.75rem;

				&:last-child {
					border-bottom: 1px solid #000000;
				}

				&.disabled {
					background-color: lightgray;
				}

				> .details {
					align-items: center;
					display: flex;
					min-height: 2.5rem;

					> .checkmark {
						background-color: #d1e7dd;
						border-radius: 50%;
						font-size: 1.5rem;
						height: 2.5rem;
						line-height: 2.5rem;
						text-align: center;
						width: 2.5rem;

						&.hidden {
							display: none;
						}
					}

					> .total {
						text-align: center;
						width: 2.5rem;
					}
				}
			}
		}

		> .back {
			border: 1px solid #000000;
			border-radius: 2rem;
			box-sizing: border-box;
			display: inline-block;
			margin: 0 0.25rem 1rem 0.5rem;
			padding: 1rem;
			text-align: center;
			width: calc(40% - 0.75rem);
		}

		> .submit {
			border: 1px solid #000000;
			border-radius: 2rem;
			box-sizing: border-box;
			display: inline-block;
			margin: 0 0.5rem 1rem 0.25rem;
			padding: 1rem;
			text-align: center;
			width: calc(60% - 0.75rem);
		}
	}

	> .modal {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-between;
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100%;

		> .display {
			> .header {
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding: 0.75rem;

				> .description {
					font-size: 1.5rem;
				}

				> .total {
					font-size: 1.5rem;
					padding-left: 0.75rem;
				}
			}

			> .inventory {
				padding: 0 0.75rem 0.5rem;
			}

			> .details {
				padding: 0 0.75rem 0.5rem;

				&.order {
					padding: 4rem 0.75rem 0;
					text-align: center;

					> .katex-mathml {
						display: block;
						margin-bottom: 1rem;
					}
				}
			}

			> .atPar {
				align-items: center;
				display: flex;
				padding: 0 0.75rem 0.5rem;

				> input {
					height: 1.5rem;
					margin-left: 0.5rem;
					width: 1.5rem;
				}
			}

			> .suggestion {
				margin-top: 4rem;
				text-align: center;
			}
		}
		> .controls {
			> .tabulature {
				> .tabs {
					display: flex;
					padding: 0 0 0.75rem 0;

					> .tab {
						text-align: center;
						width: 50%;

						&.active {
							background-color: #ddd;
							border-bottom: 1px solid #000000;
							border-radius: 0.5rem 0.5rem 0 0;
						}

						> .uom {
							padding: 0.25rem 0;
						}

						> .subtotal {
							padding-bottom: 0.25rem;
						}
					}
				}

				> .accumulator {
					align-items: center;
					display: flex;
					font-size: 2rem;
					justify-content: space-evenly;
					padding: 0 0 0.75rem 0;

					> .decrementor,
					.incrementor {
						align-items: center;
						border: 1px solid #000000;
						border-radius: 50%;
						display: flex;
						height: 5rem;
						justify-content: center;
						width: 5rem;
					}

					> .subtotal {
						text-align: center;
						width: 3.5rem;
					}
				}
			}

			> .keypad {
				display: flex;
				flex-wrap: wrap;

				> .key {
					align-items: center;
					border: 1px solid #000000;
					border-width: 0;
					box-sizing: border-box;
					display: flex;
					height: calc(100vw / 6);
					justify-content: center;
					width: calc(100% / 3);

					&:first-child,
					&:nth-child(2),
					&:nth-child(4),
					&:nth-child(5),
					&:nth-child(7),
					&:nth-child(8) {
						border-width: 0 1px 1px 0;
					}
					&:nth-child(3),
					&:nth-child(6),
					&:nth-child(9) {
						border-width: 0 0 1px 0;
					}
					&:nth-child(10),
					&:nth-child(11) {
						border-width: 0 1px 0 0;
					}
				}
			}
		}

		> .ok {
			border: 1px solid #000000;
			border-radius: 2rem;
			margin: 0.5rem 0.5rem 1rem;
			padding: 1rem;
			text-align: center;
		}
	}
}

/* Roboto CSS Classes (for reference) */
/* .roboto-thin {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-style: normal;
}

.roboto-light {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-style: normal;
}

.roboto-regular {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-medium {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-bold {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-black {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-style: normal;
}

.roboto-thin-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-style: italic;
}

.roboto-light-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-style: italic;
}

.roboto-regular-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: italic;
}

.roboto-medium-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-style: italic;
}

.roboto-bold-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-style: italic;
}

.roboto-black-italic {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-style: italic;
} */