.point-of-sale-app {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: var(--margin-md);
	padding: 1%;

	section {
		min-height: 30rem;
		height: calc(100vh - 5rem);
		max-height: calc(100vh - 5rem);
	}

	.frappe-control {
		margin: 0 !important;
		width: 100%;
	}

	.form-group {
		margin-bottom: 0px !important;
	}

	.pointer-no-select {
		cursor: pointer;
		user-select: none;
	}

	.nowrap {
		overflow: hidden;
		white-space: nowrap;
	}

	.image {
		height: 100% !important;
		object-fit: cover;
	}

	.abbr {
		background-color: var(--control-bg);
		font-size: var(--text-3xl);
	}

	.label {
		display: flex;
		align-items: center;
		font-weight: 700;
		font-size: var(--text-lg);
	}

	.pos-card {
		background-color: var(--fg-color);
		box-shadow: var(--shadow-base);
		border-radius: var(--border-radius-md);
	}

	.seperator {
		margin-left: var(--margin-sm);
		margin-right: var(--margin-md);
		border-bottom: 1px solid var(--gray-300);
	}

	.primary-action {
		@extend .pointer-no-select;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--padding-sm);
		margin-top: var(--margin-sm);
		border-radius: var(--border-radius-md);
		font-size: var(--text-lg);
		font-weight: 700;
	}

	.highlighted-numpad-btn {
		box-shadow: inset 0 0px 4px 0px rgba(0, 0, 0, 0.15) !important;
		font-weight: 700;
		background-color: var(--control-bg);
	}

	> .items-selector {
		@extend .pos-card;
		grid-column: span 6 / span 6;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		> .filter-section {
			display: grid;
			grid-template-columns: repeat(12, minmax(0, 1fr));
			background-color: var(--fg-color);
			padding: var(--padding-lg);
			padding-bottom: var(--padding-sm);
			align-items: center;

			> .label {
				@extend .label;
				grid-column: span 4 / span 4;
				padding-bottom: var(--padding-xs);
			}

			> .search-field {
				grid-column: span 5 / span 5;
				display: flex;
				align-items: center;
				margin: 0px var(--margin-sm);
			}

			> .item-group-field {
				grid-column: span 3 / span 3;
				display: flex;
				align-items: center;
			}
		}

		> .items-container {
			display: grid;
			padding-top: var(--padding-xs);
			overflow-y: scroll;
			overflow-x: hidden;

			&.item-loading {
				position: relative;
				pointer-events: none;
			}

			&.item-loading::after {
				content: "";
				position: absolute;
				inset: 0;
				background: repeating-linear-gradient(
					90deg,
					#f3f3f3 0px,
					#f3f3f3 160px,
					#e9ecef 160px,
					#e9ecef 320px
				);
				animation: skeletonMove 1.1s linear infinite;
				z-index: 1;
			}

			@keyframes skeletonMove {
				from {
					background-position: 0 0;
				}
				to {
					background-position: 320px 0;
				}
			}

			&.items-not-found {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}

			&.show-item-image {
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: var(--margin-lg);
				padding: var(--padding-lg);

				> .item-wrapper {
					border-radius: var(--border-radius-md);
					box-shadow: var(--shadow-base);

					&:hover {
						transform: scale(1.02, 1.02);
					}
				}
			}

			&.hide-item-image {
				display: flex;
				flex-direction: column;
				padding-left: 1.5em;
				padding-right: 1.5em;
				padding-top: 0;

				> .list-column {
					display: flex;
					position: sticky;
					top: 0;
					z-index: 1;
					background-color: var(--fg-color);
					font-weight: bold;
					flex-direction: row;
					gap: 2rem;
					align-items: center;
					min-height: 3rem;
					height: 3rem;
					border-bottom: 1px solid var(--gray-300);

					> .column-name {
						width: 55%;
						text-align: left;
						white-space: initial;
					}

					> .column-price {
						width: 15%;
					}

					> .column-uom {
						width: 15%;
						text-align: center;
					}

					> .column-qty-available {
						width: 15%;
						text-align: right;
					}
				}

				> .item-wrapper {
					border-top: 1px solid var(--gray-300);

					&:hover {
						background-color: var(--control-bg);
					}

					.item-detail {
						flex-direction: row;
						gap: 2rem;
						align-items: center;
						min-height: 3rem;
						height: 3rem;

						> .item-name,
						.column-name {
							width: 55%;
							text-align: left;
							white-space: initial;
						}

						> .item-price,
						.column-price {
							width: 15%;
						}

						> .item-uom,
						.column-uom {
							width: 15%;
							text-align: center;
						}

						> .item-qty-available,
						.column-qty-available {
							width: 15%;
							text-align: right;
						}
					}
				}
			}

			&:after {
				content: "";
				display: block;
				height: 1px;
			}

			> .item-wrapper {
				@extend .pointer-no-select;
				position: relative;

				.item-qty-pill {
					position: absolute;
					display: flex;
					margin: var(--margin-sm);
					justify-content: flex-end;
					right: 0px;
				}

				.item-display {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: var(--border-radius-md);
					margin: var(--margin-sm);
					margin-bottom: 0px;
					min-height: 8rem;
					height: 8rem;
					overflow: hidden;

					> img {
						@extend .image;
						width: 100%;
					}
				}

				.item-img {
					@extend .image;
					border-radius: 8px 8px 0 0;
					object-fit: cover;
				}

				> .item-detail {
					display: flex;
					flex-direction: column;
					justify-content: center;
					min-height: 3.5rem;
					height: 3.5rem;
					padding-left: var(--padding-sm);
					padding-right: var(--padding-sm);

					> .item-name {
						@extend .nowrap;
						display: flex;
						align-items: center;
						font-size: var(--text-md);
					}

					> .item-rate {
						font-weight: 700;
					}
				}
			}
		}
	}

	> .customer-cart-container {
		grid-column: span 4 / span 4;
		display: flex;
		flex-direction: column;

		> .customer-section {
			@extend .pos-card;
			display: flex;
			flex-direction: column;
			padding: var(--padding-md) var(--padding-lg);
			overflow: visible;

			> .customer-field {
				display: flex;
				align-items: center;
				padding-top: var(--padding-xs);
			}

			> .customer-details {
				display: flex;
				flex-direction: column;
				background-color: var(--fg-color);

				> .header {
					display: flex;
					margin-bottom: var(--margin-md);
					justify-content: space-between;
					padding-top: var(--padding-md);

					> .label {
						@extend .label;
					}

					> .close-details-btn {
						display: flex;
						align-items: center;
						cursor: pointer;
					}
				}

				> .customer-display {
					display: flex;
					align-items: center;
					cursor: pointer;

					> .customer-image {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 3rem;
						height: 3rem;
						border-radius: 50%;
						color: var(--text-light);
						margin-right: var(--margin-md);

						> img {
							@extend .image;
							border-radius: 50%;
						}
					}

					> .customer-abbr {
						@extend .abbr;
						font-size: var(--text-2xl);
					}

					> .customer-name-desc {
						@extend .nowrap;
						display: flex;
						flex-direction: column;
						margin-right: auto;

						> .customer-name {
							font-weight: 700;
							font-size: var(--text-lg);
						}

						> .customer-desc {
							font-weight: 500;
							font-size: var(--text-sm);
						}
					}

					> .reset-customer-btn {
						display: flex;
						align-items: center;
						cursor: pointer;
					}
				}

				> .customer-fields-container {
					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
					margin-top: var(--margin-md);
					column-gap: var(--padding-sm);
					row-gap: var(--padding-sm);
				}

				> .transactions-section {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: var(--margin-md);
					margin-bottom: var(--margin-sm);

					> .recent-transactions {
						@extend .label;
					}

					> .last-transaction {
						font-weight: 400;
						font-size: var(--text-sm);
					}
				}
			}

			> .customer-transactions {
				height: 100%;
				overflow-x: hidden;
				overflow-y: scroll;
				margin-right: -12px;
				margin-left: -10px;
				scrollbar-width: thin;

				> .no-transactions-placeholder {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: var(--gray-50);
					border-radius: var(--border-radius-md);
				}
			}
		}

		> .cart-container {
			@extend .pos-card;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: var(--margin-md);
			position: relative;
			height: 100%;

			> .abs-cart-container {
				position: absolute;
				display: flex;
				flex-direction: column;
				padding: var(--padding-lg);
				width: 100%;
				height: 100%;

				> .cart-label {
					@extend .label;
					padding-bottom: var(--padding-md);
				}

				> .cart-header {
					display: flex;
					width: 100%;
					font-size: var(--text-md);
					padding-bottom: var(--padding-md);

					> .name-header {
						flex: 1 1 0%;
					}

					> .qty-header {
						margin-right: var(--margin-lg);
						text-align: center;
					}

					> .rate-amount-header {
						text-align: right;
						margin-right: var(--margin-sm);
					}
				}

				.no-item-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: var(--control-bg);
					border-radius: var(--border-radius-md);
					font-size: var(--text-md);
					font-weight: 500;
					width: 100%;
					height: 100%;
				}

				> .cart-items-section {
					display: flex;
					flex-direction: column;
					flex: 1 1 0%;
					overflow-y: scroll;
					min-height: 50px;

					> .cart-item-wrapper {
						@extend .pointer-no-select;
						display: flex;
						align-items: center;
						padding: var(--padding-sm);
						border-radius: var(--border-radius-md);
						margin-right: var(--margin-sm);

						&:hover {
							background-color: var(--control-bg);
						}

						> .item-image {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 2rem;
							height: 2rem;
							border-radius: var(--border-radius-md);
							color: var(--text-light);
							margin-right: var(--margin-md);
							overflow: hidden;

							> img {
								@extend .image;
								width: 100%;
							}
						}

						> .item-abbr {
							@extend .abbr;
							font-size: var(--text-lg);
						}

						> .item-name-desc {
							@extend .nowrap;
							display: flex;
							flex-direction: column;
							flex: 1 1 0%;
							flex-shrink: 1;

							> .item-name {
								font-weight: 700;
							}

							> .item-desc {
								font-size: var(--text-sm);
								color: var(--gray-600);
								font-weight: 500;
							}
						}

						> .item-qty-rate {
							display: flex;
							flex-shrink: 0;
							text-align: right;
							margin-left: var(--margin-md);

							> .item-qty {
								display: flex;
								align-items: center;
								margin-right: var(--margin-lg);
								font-weight: 700;
							}

							> .item-rate-amount {
								display: flex;
								flex-direction: column;
								flex-shrink: 0;
								text-align: right;

								> .item-rate {
									font-weight: 700;
								}

								> .item-amount {
									font-size: var(--text-md);
									font-weight: 600;
								}
							}
						}
					}
				}

				> .cart-totals-section {
					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					width: 100%;
					margin-top: var(--margin-md);

					> .add-discount-wrapper {
						@extend .pointer-no-select;
						display: none;
						align-items: center;
						border-radius: var(--border-radius-md);
						border: 1px dashed var(--gray-500);
						padding: var(--padding-sm) var(--padding-md);
						margin-bottom: var(--margin-sm);

						> .add-discount-field {
							width: 100%;
						}

						.discount-icon {
							margin-right: var(--margin-sm);
						}

						.edit-discount-btn {
							display: flex;
							align-items: center;
							font-weight: 500;
							color: var(--dark-green-500);
						}
					}

					> .net-total-container {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: var(--padding-sm) 0px;
						font-weight: 500;
						font-size: var(--text-md);
					}

					> .item-qty-total-container {
						@extend .net-total-container;
						padding: 5px 0px 0px 0px;
					}

					> .taxes-container {
						display: none;
						flex-direction: column;
						font-weight: 500;
						font-size: var(--text-md);

						> .tax-row {
							display: flex;
							justify-content: space-between;
							line-height: var(--text-3xl);
						}
					}

					> .grand-total-container {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: var(--padding-sm) 0px;
						font-weight: 700;
						font-size: var(--text-lg);
					}

					> .checkout-btn {
						@extend .primary-action;
						background-color: var(--control-bg);
					}

					> .edit-cart-btn {
						@extend .primary-action;
						display: none;
						background-color: var(--control-bg);
						font-weight: 500;
						transition: all 0.15s ease-in-out;

						&:hover {
							background-color: var(--control-bg);
							color: var(--text-light);
							font-weight: 700;
						}
					}
				}

				> .numpad-section {
					display: none;
					flex-direction: column;
					flex-shrink: 0;
					margin-top: var(--margin-sm);
					padding: var(--padding-sm);
					padding-bottom: 0px;
					width: 100%;

					> .numpad-totals {
						display: flex;
						justify-content: space-between;
						margin-bottom: var(--margin-md);
						font-size: var(--text-md);
						font-weight: 700;
					}

					> .numpad-container {
						display: grid;
						grid-template-columns: repeat(5, minmax(0, 1fr));
						gap: var(--margin-md);
						margin-bottom: var(--margin-md);

						> .numpad-btn {
							@extend .pointer-no-select;
							border-radius: var(--border-radius-md);
							display: flex;
							align-items: center;
							justify-content: center;
							padding: var(--padding-md);
							box-shadow: var(--shadow-base);

							&:hover {
								background-color: var(--control-bg);
							}
						}

						> .col-span-2 {
							grid-column: span 2 / span 2;
						}

						> .remove-btn {
							font-weight: 700;
							color: var(--red-500);
						}
					}

					> .checkout-btn {
						@extend .primary-action;
						margin: 0px;
						margin-bottom: var(--margin-sm);
						background-color: var(--blue-200);
						color: white;
					}
				}
			}
		}
	}

	.invoice-wrapper {
		@extend .pointer-no-select;
		display: flex;
		justify-content: space-between;
		border-radius: var(--border-radius-md);
		padding: var(--padding-sm);

		&:hover {
			background-color: var(--control-bg);
		}

		&.invoice-selected {
			background-color: var(--control-bg);
		}

		> .invoice-name-customer,
		> .invoice-name-date {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			> .invoice-customer {
				@extend .nowrap;
				font-size: var(--text-md);
				display: flex;
				align-items: center;
				font-weight: 700;
			}

			> .invoice-name {
				@extend .nowrap;
				font-size: var(--text-sm);
			}
		}

		> .invoice-name-date {
			> .invoice-name {
				font-size: var(--text-md);
				display: flex;
				align-items: center;
				font-weight: 700;
			}

			> .invoice-date {
				@extend .nowrap;
				font-size: var(--text-sm);
			}
		}

		> .invoice-total-date,
		> .invoice-total-status {
			display: flex;
			flex-direction: column;
			font-weight: 500;
			font-size: var(--text-sm);
			margin-left: var(--margin-md);

			> .invoice-total {
				margin-bottom: var(--margin-xs);
				font-size: var(--text-base);
				font-weight: 700;
				text-align: right;
			}

			> .invoice-date {
				display: flex;
				align-items: center;
				color: var(--gray-500);
				justify-content: right;
				font-weight: 400;
			}
		}

		> .invoice-total-status {
			> .invoice-total {
				margin-right: 8px;
			}

			> .invoice-status {
				display: flex;
				align-items: center;
				justify-content: right;
			}
		}
	}

	> .item-details-container {
		@extend .pos-card;
		grid-column: span 6 / span 6;
		display: none;
		flex-direction: column;
		padding: var(--padding-lg);
		padding-top: var(--padding-md);
		overflow-y: auto;

		> .item-details-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: var(--margin-md);

			> .close-btn {
				@extend .pointer-no-select;
			}
		}

		> .item-display {
			display: flex;

			> .item-name-desc-price {
				flex: 1 1 0%;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				margin-right: var(--margin-md);

				> .item-name {
					font-size: var(--text-3xl);
					font-weight: 600;
				}

				> .item-desc {
					font-size: var(--text-md);
					font-weight: 500;
				}

				> .item-price {
					font-size: var(--text-3xl);
					font-weight: 700;
				}
			}

			> .item-image {
				display: flex;
				align-items: center;
				justify-content: center;
				max-width: 11rem;
				max-height: 11rem;
				border-radius: var(--border-radius-md);
				margin-left: var(--margin-md);
				color: var(--gray-500);
				overflow: hidden;

				> img {
					@extend .image;
					width: 100%;
				}

				> .item-abbr {
					@extend .abbr;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: var(--border-radius-md);
					font-size: var(--text-3xl);
					width: 11rem;
					height: 11rem;
				}
			}
		}

		> .discount-section {
			display: flex;
			align-items: center;
			margin-bottom: var(--margin-sm);

			> .item-rate {
				font-weight: 500;
				margin-right: var(--margin-sm);
				text-decoration: line-through;
			}

			> .item-discount {
				padding: 3px var(--padding-sm);
				border-radius: var(--border-radius-sm);
				background-color: var(--green-100);
				color: var(--dark-green-500);
				font-size: var(--text-sm);
				font-weight: 700;
			}
		}

		> .form-container {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--padding-md);
			row-gap: var(--padding-md);

			> .auto-fetch-btn {
				@extend .pointer-no-select;
				margin: var(--margin-xs);
			}
		}
	}

	> .payment-container {
		@extend .pos-card;
		grid-column: span 6 / span 6;
		display: none;
		flex-direction: column;
		padding: var(--padding-lg);

		.border-primary {
			border: 1px solid var(--blue-500);
		}

		.submit-order-btn {
			@extend .primary-action;
			margin-top: 0%;
			background-color: var(--btn-primary);
			color: var(--neutral);
		}

		.section-label {
			@extend .label;
			@extend .pointer-no-select;
			margin-bottom: var(--margin-md);
		}

		> .payment-split-container {
			display: flex;

			> .payment-container-left {
				width: 50%;
				margin-bottom: var(--margin-md);

				.payment-modes {
					display: flex;
					flex-direction: column;
					padding-right: var(--padding-sm);
					margin-right: var(--margin-sm);
					min-height: 15rem;
					overflow-y: scroll;
					height: calc(100vh - 350px);

					> .payment-mode-wrapper {
						min-width: 40%;
						padding: var(--padding-xs);

						> .mode-of-payment {
							@extend .pos-card;
							@extend .pointer-no-select;
							padding: var(--padding-md) var(--padding-lg);

							> .pay-amount {
								display: inline;
								float: right;
								font-weight: 700;
							}

							> .mode-of-payment-control {
								display: none;
								align-items: center;
								margin-top: var(--margin-sm);
								margin-bottom: var(--margin-xs);
							}

							> .loyalty-amount-name {
								display: none;
								float: right;
								font-weight: 700;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						> .loyalty-card {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}

			> .payment-container-right {
				display: flex;
				flex-direction: column;
				width: 50%;

				.fields-numpad-container {
					display: flex;
					flex-direction: column;
					flex: 1;
					height: 100%;
					position: relative;
					justify-content: flex-end;

					> .fields-section {
						flex: 1;
						display: flex;
						flex-direction: column;
						padding-left: var(--margin-md);

						.invoice-fields {
							height: 100%;
							margin-left: auto;
							padding: var(--padding-sm);
						}
					}

					.number-pad {
						position: absolute;
						z-index: 4;
						right: 0px;
						flex: 1;
						display: flex;
						align-items: flex-end;

						.numpad-container {
							display: grid;
							grid-template-columns: repeat(3, minmax(0, 1fr));
							gap: var(--margin-md);
							margin-bottom: var(--margin-md);
							background-color: var(--fg-color);
							border-radius: var(--border-radius-md);
							padding: var(--padding-sm);

							> .numpad-btn {
								@extend .pointer-no-select;
								border-radius: var(--border-radius-md);
								display: flex;
								align-items: center;
								justify-content: center;
								padding: var(--padding-md);
								box-shadow: var(--shadow-base);

								&:hover {
									background-color: var(--control-bg);
								}
							}
						}
					}
				}
			}
		}

		> .totals-section {
			display: flex;
			margin-top: auto;
			margin-bottom: var(--margin-sm);
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;

			> .totals {
				display: flex;
				background-color: var(--control-bg);
				justify-content: center;
				padding: var(--padding-md);
				border-radius: var(--border-radius-md);

				> .col {
					flex-grow: 1;
					text-align: center;

					> .total-label {
						font-size: var(--text-md);
						font-weight: 500;
					}

					> .value {
						font-size: var(--text-2xl);
						font-weight: 700;
					}
				}

				> .seperator-y {
					margin-left: var(--margin-sm);
					margin-right: var(--margin-sm);
					border-right: 1px solid var(--gray-300);
				}
			}

			> .number-pad {
				display: none;
			}
		}
	}

	> .past-order-list {
		@extend .pos-card;
		grid-column: span 4 / span 4;
		display: none;
		flex-direction: column;
		overflow: hidden;

		> .filter-section {
			display: flex;
			flex-direction: column;
			background-color: var(--fg-color);
			padding: var(--padding-lg);

			> .status-search-fields {
				display: grid;
				grid-template-columns: 30% auto;
				column-gap: 10px;
				margin-top: var(--margin-md);

				> .status-field {
					width: 100%;
					display: flex;
					align-items: center;
				}

				> .search-field {
					width: 100%;
					display: flex;
					align-items: center;
				}
			}
		}

		> .invoices-container {
			padding: var(--padding-lg);
			padding-top: 0px;
			overflow-x: hidden;
			overflow-y: scroll;
		}
	}

	> .past-order-summary {
		display: none;
		grid-column: span 6 / span 6;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		> .no-summary-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background-color: var(--gray-50);
			font-weight: 500;
			border-radius: var(--border-radius-md);
		}

		> .invoice-summary-wrapper {
			@extend .pos-card;
			display: none;
			position: relative;
			width: 31rem;
			height: 100%;

			> .abs-container {
				position: absolute;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				padding: var(--padding-lg);

				> .upper-section {
					display: flex;
					justify-content: space-between;
					width: 100%;
					margin-bottom: var(--margin-md);

					> .left-section {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-end;
						padding-right: var(--padding-sm);

						> .customer-section {
							margin-bottom: auto;

							> .customer-name {
								font-size: var(--text-2xl);
								font-weight: 700;
							}

							> .customer-code {
								font-size: var(--text-xs);
								font-weight: 500;
								color: var(--text-light);
							}

							> .customer-email {
								font-size: var(--text-md);
								font-weight: 500;
							}
						}

						> .cashier {
							font-size: var(--text-md);
							font-weight: 500;
							color: var(--gray-600);
							margin-top: var(--margin-md);
						}
					}

					> .right-section {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						> .paid-amount {
							font-size: var(--text-2xl);
							font-weight: 700;
						}

						> .invoice-name {
							font-size: var(--text-md);
							font-weight: 500;
							color: var(--gray-600);
							margin-bottom: var(--margin-sm);
						}
					}
				}

				> .summary-container {
					display: flex;
					flex-direction: column;
					border-radius: var(--border-radius-md);
					background-color: var(--control-bg);
					margin: var(--margin-md) 0px;

					> .summary-row-wrapper {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: var(--padding-sm) var(--padding-md);
					}

					> .taxes-wrapper {
						display: flex;
						flex-direction: column;
						padding: 0px var(--padding-md);

						> .tax-row {
							display: flex;
							justify-content: space-between;
							font-size: var(--text-md);
							line-height: var(--text-3xl);
						}
					}

					> .item-row-wrapper {
						display: flex;
						gap: 2px;
						flex-direction: column;
						padding: var(--padding-sm) var(--padding-md);
						border: 1px solid lightgray;
						border-radius: 10px;
						background: var(--bg-light-gray);

						> .item-row-data {
							display: flex;
							align-items: center;

							> .item-name {
								@extend .nowrap;
								font-weight: 500;
								margin-right: var(--margin-md);
							}

							> .item-qty {
								font-weight: 500;
								margin-left: auto;
								font-size: small;
							}

							> .item-rate-disc {
								display: flex;
								text-align: right;
								margin-left: var(--margin-md);
								justify-content: flex-end;
								font-size: small;

								> .item-disc {
									color: var(--dark-green-500);
								}

								> .item-rate {
									font-weight: 500;
									margin-left: var(--margin-md);
								}
							}
						}

						> .item-row-refund {
							font-size: x-small;
						}
					}

					> .grand-total {
						font-weight: 700;
					}

					> .payments {
						font-weight: 700;
					}
				}

				> .order-summary-container {
					display: flex;
					background: white;
					gap: 8px;
				}

				> .summary-btns {
					display: flex;
					justify-content: space-between;

					> .summary-btn {
						flex: 1;
						margin: 0px var(--margin-xs);
					}

					> .new-btn {
						background-color: var(--btn-primary);
						color: var(--neutral);
						font-weight: 500;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	.point-of-sale-app {
		> .items-selector {
			> .items-container {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}
	}
}

@media screen and (max-width: 620px) {
	.point-of-sale-app {
		grid-template-columns: repeat(1, minmax(0, 1fr));

		> .items-selector {
			grid-column: span 6 / span 1 !important;
			> .items-container {
				grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			}
		}

		> .item-details-container,
		.customer-cart-container {
			grid-column: span 6 / span 1;
		}

		> .payment-container {
			overflow: scroll;
			> .fields-numpad-container {
				flex-direction: column-reverse;
				> .number-pad {
					display: none;
				}
				> .fields-section {
					width: 100%;
				}
			}
		}

		> .past-order-summary {
			> .invoice-summary-wrapper {
				width: 100%;
			}
		}

		.numpad-totals {
			> span {
				padding: 0 5px;
				font-size: var(--text-sm);
			}
		}

		.col > * {
			font-size: var(--text-sm) !important;
		}

		.control-input-wrapper {
			padding-left: 0.15rem;
		}

		.pay-amount {
			margin-left: 0.2rem;
		}

		.past-order-list {
			grid-column: span 6 / span 1;
		}
	}
}
