.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*, html {
    margin: 0;
	overflow: hidden;
	outline: none;
	border: none;
	background: transparent;
	font-family: "Roboto", sans-serif;
}
:root {
	--primary-dark: rgba(81,78,131,0.6); /* dark blue/black */
	--secondary-dark: #161b2a; /* darkest blue/black */
	--primary-green: #95bf47; /* shopify green */
	--inset-dark: 0px 0px 3px 0px rgba(0,0,0,0.25); /* dark inset box shadow */
	--primary-radius: 6px; /* Primary border radius */
	--primary-light: #eeeeee; /* Very light grey */
	--primary-light-hover: #dddddd; /* light grey */
	--dark-grey-color: rgb(42,47,67); /* dark grey */
	--light-blue-grey-color: rgb(211,211,255); /* light blue/grey */
	--weekly-color: red; /* This updates when the color cycle does */
	--weekly-color-text: black; /* This updates when the color cycle does. This changes the color of text so it is readable on the weekly color. */ 
	--gradient: linear-gradient(to right, var(--secondary-dark), var(--primary-dark)); /* Gradient color to go behind other elements. Makes it looks FANCY */
	
}
.bodyWrapper { 
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	background-image: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background: var(--secondary-dark);
}

/* ================================================================================================================== Start of main content ======================================================== */
.content {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
}

/* ================================================================================================================= SETTINGS */

.settingsBacker {
	display: none; 
	position: absolute;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(15px);
	justify-content: center;
	align-items: center;
}

	.settingsBacker.open {
		display: flex;
	}

.settingsWrapper {
	width: 600px;
	height: 70%;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.settings {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.settingsHeader h2 {
	margin: 0 0 12px 0;
	color: var(--light-blue-grey-color);
	font-weight: 700;
}

/* Content layout */
.settingsContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: auto;
	padding-right: 6px;
}

/* Setting row */
.settingRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	background: var(--primary-dark);
	backdrop-filter: brightness(0);
}

.settingLabel {
	color: var(--light-blue-grey-color);
	font-weight: 600;
	font-size: 1rem;
}

.settingControl {
	display: flex;
	align-items: center;
	justify-content: center;
}

.switch {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 32px;
}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--secondary-dark);
	transition: 0.28s ease;
	border-radius: 999px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
}

	.slider::before {
		content: "";
		position: absolute;
		height: 24px;
		width: 24px;
		left: 4px;
		top: 4px;
		background: var(--light-blue-grey-color);
		transition: 0.28s cubic-bezier(.2,.9,.2,1);
		border-radius: 50%;
		box-shadow: 0 6px 18px rgba(0,0,0,0.35);
	}

.switch input:checked + .slider {
	background: var(--primary-green);
}

	.switch input:checked + .slider::before {
		transform: translateX(24px);
		background: var(--weekly-color-text);
	}
.settingsClose, .closeLeaderboard {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background: var(--secondary-dark);
	border: 2px solid rgba(255,255,255,0.06);
	color: var(--light-blue-grey-color);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: transform 0.12s ease, background 0.12s ease;
}

.settingsClose:hover, .closeLeaderboard:hover {
	transform: translateY(-2px);
}

.settingsWrapper, .settings {
	pointer-events: auto;
}
.feedback {
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-size: 1.2rem;
	color: var(--light-blue-grey-color);
}
.feedback a {
	color: var(--primary-green);
	font-size: 1.3rem;
}
.feedback a:hover {
	filter: brightness(1.3);
}
.settingRow {
	height: 35px;
}
.showInfoBtn, .settingsBtn {
	width: auto;
	min-width: 60px;
	background: var(--secondary-dark);
	color: var(--light-blue-grey-color);
	height: 30px;
	border-radius: var(--primary-radius);
	box-shadow: inset 0px 0px 1px 0px var(--light-blue-grey-color);
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
}
.infoModal-Backer {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 9999;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(15px);
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.infoModal-Wrapper {
	width: 80%;
	height: 70%;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}
.infoModal {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	backdrop-filter: brightness(0.5);
	color: var(--light-blue-grey-color);
	gap: 20px;
	font-size: 1.2rem;
}
.infoModalContent {
	width: 100%;
	height: calc(100% - 60px);
	border-radius: var(--primary-radius);
	position: relative;
	padding: 18px;
	box-sizing: border-box;
	overflow-y: auto;
	font-size: 1.2rem;
}
.infoModalContent span {
	padding: 0px 5px 0px 25px;
	display: block;
	margin-top: 20px;
	line-height: 1.6;
}

.highlight {
	background: var(--light-blue-grey-color);
	color: var(--secondary-dark);
	padding: 8px;
	margin-right: 10px;
	border-radius: var(--primary-radius);
	display: inline-flex;
	align-items: center;
	height: 15px;
}

.highlightNext {
	margin-left: 10px;
}
.closeInfoBtn {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background: var(--secondary-dark);
	border: 2px solid rgba(255,255,255,0.06);
	color: var(--light-blue-grey-color);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: transform 0.12s ease, background 0.12s ease;
}

	.closeInfoBtn:hover {
		transform: translateY(-2px);
	}

/* ====================== Big buttons style ====================== */
.big-buttons-active .category,
.big-buttons-active .subcategory {
	width: 250px;
	height: 250px;
}
.big-buttons-active .variantContainer {
    gap: 40px;
}

.big-buttons-active .categoryImageContainer {
	height: 200px;
}

.big-buttons-active .categoryTop {
	height: 160px;
}

	.big-buttons-active .categoryTop span {
		height: 90px;
		font-size: 1.4rem;
	}

.big-buttons-active .variant {
	width: 100%;
	height: 70px;
}

.big-buttons-active .variantPrice {
	font-size: 1.3rem !important;
}

.big-buttons-active .history {
	height: 60px;
}
.big-buttons-active .standardPricingLink {
	margin-top: 35px;
}

.big-buttons-active .pathText {
	font-size: 1.2rem;
}

.category, .subcategory, .variant, .categoryImageContainer, .categoryTop, .categoryTop span, .history, .pathText {
	transition: all 0.22s ease;
}

.big-buttons-active .contentTop {
	height: 80px;
	transition: height 0.22s ease;
}

.big-buttons-active .colorOptionsFloating .colorbtn {
	height: 60px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

	.big-buttons-active .colorOptionsFloating .colorbtn:hover {
		filter: brightness(1.15);
	}

.big-buttons-active .historyItem span {
	padding: 0px 20px 0px 20px;
	font-size: 1rem;
	transition: padding 0.18s ease, font-size 0.18s ease;
}

.big-buttons-active .settingsOption span {
	font-size: 2rem;
	transition: font-size 0.18s ease;
}

.colorOptionsFloating .colorbtn {
	height: 44px;
	padding: 6px 10px;
	border-radius: var(--primary-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

	.colorOptionsFloating .colorbtn:hover {
		filter: brightness(1.15);
	}

.sourceDropdownFloating {
	position: absolute;
	display: none;
	flex-direction: column;
	gap: 8px;
	z-index: 10001;
	min-width: 220px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 10px;
	border-radius: var(--primary-radius);
	background: var(--secondary-dark);
}

	.sourceDropdownFloating.open {
		display: flex;
	}

	.sourceDropdownFloating .sourceOption {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 14px;
		border-radius: var(--primary-radius);
		background: var(--light-blue-grey-color);
		color: var(--secondary-dark);
		border: 2px solid rgba(255,255,255,0.03);
		box-shadow: var(--inset-dark);
		cursor: pointer;
		font-weight: 600;
		transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
		min-width: 160px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		.sourceDropdownFloating .sourceOption:hover {
			transform: translateY(-1px);
			box-shadow: 0 0px 10px rgba(0,0,0,0.45);
			border: 2px solid var(--weekly-color);
			filter: brightness(1.1);
		}

.big-buttons-active .sourceDropdownFloating .sourceOption {
	padding: 14px 18px;
	font-size: 1.1rem;
}

.sourcebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--primary-radius);
	background: var(--secondary-dark);
	color: var(--light-blue-grey-color);
	border: 2px solid rgba(255,255,255,0.06);
	box-shadow: var(--inset-dark);
	cursor: pointer;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

	.sourcebtn:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 28px rgba(0,0,0,0.45);
	}

.big-buttons-active .sourcebtn {
	height: 50px;
	font-size: 1.15rem;
}

.colorOptionsFloating,
.sourceDropdownFloating {
	transition: opacity 0.14s ease, transform 0.12s ease;
	will-change: transform, opacity;
}

/* ================================================================================================================== Nav panel */

.contentTop {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1;
	padding-top: 5px;
	background: var(--secondary-dark);
}
.ct-Left {
	width: 75%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
}
.ct-Right {
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	user-select: none;
	height: 100%;
}

/* Settings */

.settingsOption {
	margin-right: 5px;
	font-size: 1.65rem;
	height: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	cursor: pointer;
	border-radius: 100px;
	transition: 0.4s;
}
.settingsOption:hover {
    transform: rotate(40deg);
    transition: 0.4s;
}
.settingsOption span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Search */

.searchContainer {
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: left;
	align-items: center;
	border-radius: var(--primary-radius);
}
#searchInput {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	padding-left: 15px;
	box-shadow: var(--inset-dark);
	background: var(--secondary-dark);
    border: 2px solid var(--primary-dark);
    color: var(--light-blue-grey-color);
    transition: 0.2s;
}
.searchContainer {
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: var(--primary-radius);
	background: var(--secondary-dark);
	border: 2px solid var(--primary-dark);
	gap: 0;
	padding: 0 8px;
	box-sizing: border-box;
	box-shadow: var(--inset-dark);
}

#searchInput {
	flex: 1;
	height: 100%;
	border-radius: 0;
	padding-left: 15px;
	background: transparent;
	border: none;
	color: var(--light-blue-grey-color);
	transition: 0.2s;
	min-width: 0;
}

	#searchInput:focus {
		outline: none;
	}

.searchContainer:has(#searchInput:focus) {
	border: 2px solid var(--weekly-color);
	transition: 0.2s;
}
.searchContainer:has(#searchInput:focus) .searchModeBtn.active {
	color: var(--weekly-color);
}
.searchContainer:has(#searchInput:focus) #searchModeSubcategories::after, .searchContainer:has(#searchInput:focus) #searchModeVariants::after {
	background: var(--weekly-color);
}

.searchModeBtn {
	height: 100%;
	padding: 0 10px;
	background: transparent;
	color: var(--light-blue-grey-color);
	border: none;
	cursor: pointer;
	font-weight: 500;
	font-size: 0.85rem;
	white-space: nowrap;
	transition: 0.2s;
	flex-shrink: 0;
}

.big-buttons-active .searchModeBtn {
	padding: 0 14px;
	font-size: 0.95rem;
}

.searchModeBtn {
	background: var(--secondary-dark);
	height: 25px;
	position: relative;
}
#searchModeVariants::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--light-blue-grey-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

#searchModeVariants.active::after {
	transform: scaleX(1);
}

#searchModeSubcategories::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--light-blue-grey-color);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.25s ease;
}

#searchModeSubcategories.active::after {
	transform: scaleX(1);
}

/* Weekly Color Dropdown */

.weeklyColor {
	border-radius: var(--primary-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0px;
	width: 30%;
	height: 70%;
	background: transparent;
	cursor: pointer;
	box-shadow: var(--inset-dark);
}
.colorbtn {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	color: var(--light-blue-grey-color);
}

/* Source Dropdown */

.source {
	width: 70%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
}
.sourcebtn {
	font-size: 1rem;
	border-radius: var(--primary-radius);
	height: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	margin-right: 10px;
	user-select: none;
	cursor: pointer;
	font-weight: 500;
	box-shadow: var(--inset-dark);
	background: var(--secondary-dark);
    color: var(--light-blue-grey-color);
    border: 2px solid var(--light-blue-grey-color);
}

/* History */

.history {
	height: 40px;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	flex-direction: row;
	gap: 10px;
	padding-bottom: 8px;
	background: var(--secondary-dark);
	min-width: 0;
}
.path {
	width: auto;
	margin-left: 10px;
	height: 100%;
	display: flex;
	color: var(--primary-green);
	font-weight: 600;
	align-items: center;
	justify-content: center;
	border-radius: 0px;
	padding: 0px 10px 0px 10px;
	flex-shrink: 0;
	white-space: nowrap; 
}
.pathText {
	cursor: pointer;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 1000;
}
.pathText:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pathArrow {
	padding-left: 5px;
	padding-right: 5px;
	font-size: 1.2rem;
    font-weight: 1000;
}
.historyItem {
	width: auto;
	height: 90%;
	border-radius: var(--primary-radius);
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	box-shadow: var(--inset-dark);
	font-size: 0.8rem;
	color: rgba(255,255,255,0.8);
	background: linear-gradient(90deg, var(--secondary-dark), rgb(108,108,156), var(--secondary-dark));
	background-size: 200% 100%;
	background-position: 0% 0%;
	padding: 0px;
	transition: background-position 0.3s ease-in-out;
	flex: 0 0 auto; 
	white-space: nowrap;
}
.historyItem:hover {
    background-position: 100% 0%;
    transition: background-position 0.3s ease-in-out;
	filter: brightness(1.4);
}
.historyItem span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: var(--primary-dark);
    padding: 0px 10px 0px 10px;
}

/* ================================================================================================================== Main content */

.contentBottom {
	width: 100%;
	height: 91.5%;
	display: flex;
}
.grid {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: flex-start;
	align-content: flex-start;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px;
	border-radius: 6px 6px 0px 0px;
	overflow-y: auto;
	gap: 30px;
	background: var(--light-blue-grey-color)
}

/* Categories */

.category, .subcategory, .variant {
	width: 170px;
	height: 140px;
	display: flex;
	flex-direction: column;
	border-radius: var(--primary-radius);
	position: relative;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    background: var(--light-blue-grey-color);
    background-image: linear-gradient(to right, var(--secondary-dark), var(--primary-dark));
	cursor: pointer;
	transition: 0.2s;
}
.category:hover, .subcategory:hover {
	box-shadow: 4px 0px 10px 0px rgba(0,0,0,0.5);
	transform: rotateY(10deg);
}
.category:hover .categoryImageContainer img {
	filter: drop-shadow(6px 0px 10px rgba(0, 0, 0, 0.5));
	transition: 0.2s;
}
.categoryTop, .subcategoryTop, .variantTop {
	height: 110px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.categoryImageContainer {
	height: 90px;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--primary-dark);
	filter: brightness(1.2);
	backdrop-filter: brightness(1.3);
	border-radius: var(--primary-radius) var(--primary-radius) 0px 0px;
}
.categoryImageContainer img {
	height: 80%;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
	aspect-ratio: 1 / 1;
	transition: 0.2s;
}
.categoryTop span, .subcategoryTop span, .variantTop span {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 500;
	position: absolute;
    bottom: 0px;
	background: var(--primary-dark);
	color: var(--light-blue-grey-color);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	align-items: center;
	padding: 5px;
}
.categoryTop span {
	height: 50px;
	font-size: 0.9rem;
	background-image: url('grain.png');
    background-size: fit;
}
.subcategory span {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--light-blue-grey-color);
	font-size: 1.1rem;
	background: var(--primary-dark);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
}
.subcategoryModal {
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}
.subcategoryModal-Top, .subcategoryModal-Bottom {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center; 
	padding: 20px;
}
.subcategoryModal-Top {
	height: 30%;
	gap: 40px;
	min-height: 190px;
}
.subcategoryModal-Bottom {
	height: 70%;
}
.barcodeInfoField, .labelStyleField {
	width: 50%;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px;
	gap: 2px;
}
.barcodeInfoField {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	background: var(--gradient);
    padding: 0px;
    gap: 0px;
	min-height: 165px;
}
.barcodeInfoField input:focus {
    border: 2px solid white;
    transition: 0.2s;
}
.bif-Top {
	width: 100%;
	height: 50%;
	border-radius: var(--primary-radius);
	color: var(--secondary-dark);
	display: flex;
	justify-content: space-around;
	align-content: flex-start;
	flex-direction: column;
}
.bif-Top span, .bif-Bottom span {
	font-weight: 500;
	font-size: 1rem;
	color: var(--dark-grey-color);
}
.bif-Bottom {
	width: 100%;
	height: 50%;
	border-radius: var(--primary-radius);
	color: var(--secondary-dark);
	display: flex;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	flex-direction: row;
	gap: 20px;
}
.bif-Bottom div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
	width: 50%;
	gap: 5px;
}
.barcodeInfoField input::placeholder {
	color: var(--light-blue-grey-color);
}
.barcodeInfoField input {
	width: 100%;
	height: 45px;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	font-size: 1rem;
	padding-left: 15px;
	font-weight: 360;
	color: var(--primary-light);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: var(--light-blue-grey-color);
}
.labelStyleField {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: center;
	align-items: center;
	height: 100%;
	min-height: 165px;
}
.labelStyleField span {
	width: 100%;
	height: 25%;
	display: flex;
	font-size: 1.4rem;
	color: var(--dark-grey-color);
	font-weight: 600;
	justify-content: center;
	align-items: flex-start;
}
.labelOptionsWrapper {
	flex: 1;
	min-height: 0;
	display: flex;
	width: 100%;
}
.labelOptionsList {
	flex: 1;
	min-height: 0;       
	display: grid;
	grid-template-columns: repeat(auto-fit, 30%);
	gap: 20px;
	justify-content: center;
	justify-items: start;
	overflow-y: auto;
}
.labelStyleOption {
	width: 100%;
	height: 45px;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	color: var(--light-blue-grey-color);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 400;
	user-select: none;
	cursor: pointer;
}
.labelStyleOption:hover {
	transform: scale(0.97);
	transition: 0.1s;
	backdrop-filter: brightness(1.75);
}
.variantField {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--primary-radius);
	flex: 1;
	background: rgba(0,0,0,0.1);
	min-height: 0;
	user-select: none;
}
.variantContainer {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	grid-auto-rows: 60px;
	align-items: stretch;
	gap: 20px;
	padding: 30px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow-y: auto;
}

.variantContainer.has-labels {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.variant {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	font-size: 1rem;
	font-weight: 500;
	background: white;
	color: black;
	border-radius: var(--primary-radius);
	border: 2px solid var(--weekly-color);
	text-align: center;
	cursor: pointer;
}
.variant span {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
}
.variant:hover {
	border: 2px solid var(--secondary-dark);
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,1);
	transition: 0.2s;
}
.colorItem-Mid-Yellow {
	background: gold;
}

/* ==================================================================================================================================================== Subcategory edits */
.bif-Top span {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px;
	display: flex;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
	color: var(--light-blue-grey-color);
}
.bif-Top, .bif-Bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-dark);
    border-radius: 0px;
}
#barcodeTitle {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0px 20px 0px 20px !important;
	width: calc(100% - 40px);
}
.bif-Bottom {
    justify-content: center;
}
.bif-Bottom div {
    width: calc(50% - 30px);
}
.piecesField span, .quantityField span  {
    color: var(--light-blue-grey-color);
}
.barcodeInfoField input {
    background: transparent;
    backdrop-filter: brightness(1.25);
    box-shadow: 0px 0px 8px 2px inset rgba(0,0,0,0.4);
}
.labelStyleField {
    padding: 0;
    background: var(--secondary-dark);
    gap: 0;
}
.barcodeInfoField {
    background: var(--secondary-dark);
}
.barcodeInfoField input {
    background: var(--light-blue-grey-color);
    color: black;
}
.barcodeInfoField input::placeholder {
    color: black;
}

.labelStyleField span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--light-blue-grey-color);
    background: var(--primary-dark);
}
.labelOptionsList {
    background: var(--primary-dark);
}
.labelStyleOption {
    color: rgba(255,255,255,0.8);
	background: var(--primary-dark);
    border: 2px solid rgba(0,0,0,0.2);
    background-size: 200% 100%;
    background-position: 0% 0%;
    padding: 0px;
    transition: background-position 0.3s ease-in-out;
}
.labelStyleOption span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: var(--primary-dark);
    padding: 0px 10px 0px 10px;
    font-size: 1.1rem;
}
.bif-Top span {
    padding-bottom: 5px;
    padding-top: 0px;
}
.bif-Bottom {
	padding-bottom: 10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.variantTitle {
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.variantPrice {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    align-items: center;
}

/* ================================================== Standard Pricing Modal */

.standardPricingModal-Backer {
	position: absolute;
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background:rgba(0,0,0,0.5) ;
	backdrop-filter: blur(15px);
	z-index: 999999;
}
.standardPricingModal-Wrapper {
	width: 50%;
	height: 80%;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	position: relative;
}
.standardPricingModal {
	width: 100%;
	height: 100%;
	background: var(--primary-dark);
	color: var(--light-blue-grey-color);
	display: flex;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px 10px 80px 20px;
	font-size: 1.2rem;
	font-weight: 450;
	border-radius: var(--primary-radius);
	overflow-y: auto;
}
.standardPricingModal span {
	overflow-y: scroll;
	padding-right: 10px;
	word-wrap: break-word;
}
.standardPricingModal button {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: var(--primary-dark);
	backdrop-filter: brightness(0);
	color: var(--light-blue-grey-color);
	padding: 10px 20px 10px 20px;
	border-radius: var(--primary-radius);
	border: 1px solid var(--light-blue-grey-color);
	cursor: pointer;
	font-size: 1rem;
	transition: 0.1s;
}
.standardPricingModal button:hover {
	background: var(--secondary-dark);
	transition: 0.1s;
}
.standardPricingLink {
	position: absolute;
	left: 50px;
	top: 120px;
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--secondary-dark);
	border-bottom: 2px solid var(--secondary-dark);
	transition: 0.2s;
	padding: 0px 5px 0px 5px;
}

	.standardPricingLink:hover {
		padding: 0px 10px 0px 10px;
		transition: 0.2s;
	}

.resizable-image {
	display: inline-block;
	vertical-align: baseline;
	position: relative;
	height: 0;
	overflow: visible;
}

	.resizable-image img {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
	}
.standardPricingContent .resize-handle {
	display: none !important;
}

.standardPricingContent {
    overflow-y: auto !important;
	padding: 20px;
    box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    height: calc(100% - 60px) !important;
}

/* ===============================================================  Tooltips */
.tooltip {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 400px;
	max-width: 400px;
	border-radius: var(--primary-radius);
	background: var(--gradient);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 180ms ease;
	pointer-events: none;
	z-index: 9999999999;
	overflow: hidden;
	box-sizing: border-box;
}
.tooltipWrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 100%;
	padding: 10px;
	background: var(--primary-dark);
	background-image: url(grain.png);
	background-size: cover;
	backdrop-filter: brightness(0.5);
	border-radius: var(--primary-radius);
	box-sizing: border-box;
}
.tooltipTop {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.tooltipTop img {
	display: block;
	max-width: 100%;
	max-height: 300px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--primary-radius);
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}
.tooltipBottom {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border-radius: var(--primary-radius);
	box-sizing: border-box;
}
.tooltipBottom span {
	display: block;
	width: auto;
	max-width: 100%;
	min-width: 0;
	padding: 10px;
	color: var(--light-blue-grey-color);
	font-size: min(1rem, 1.3rem);
	font-weight: 400;
	text-align: center;
	background: var(--primary-dark);
	border-radius: var(--primary-radius);
	backdrop-filter: brightness(0);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

/* ========================== Quick Print Modal ================================== */

.quickPrintModal-Wrapper {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 10001;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(15px);
}
.quickPrintModal {
	width: 600px;
	height: 300px;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.quickPrintModal-Inner {
    width: 100%;
    height: 100%;
    background: var(--primary-dark);
    border-radius: var(--primary-radius);
	color: var(--light-blue-grey-color);
	display: flex;
	flex-direction: column;
	font-size: 1.2rem;
	gap: 15px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	padding: 20px;
}
.quickPrintModal-Inner input {
	width: 100%;
  height: 45px;
  border-radius: var(--primary-radius);
  background: var(--light-blue-grey-color);
  font-size: 1rem;
  padding-left: 15px;
  font-weight: 360;
  color: var(--primary-light);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--secondary-dark);
}
.quickPrintModal-Bottom {
	width: 100%;
	display: flex;
	gap: 20px;
}
.quickPrintModal-Bottom div {
	gap: 20px;
	display: flex;
	flex-direction: column;
	width: 50%;
}
.quickPrintModal-Buttons {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
	height: 60px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding-bottom: 20px;
	padding-right: 20px;
}
.quickPrintModal-Buttons button {
	width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	height: 40px;
	border-radius: var(--primary-radius);
	cursor: pointer;
	font-size: 1rem;
	transition: 0.1s;
}
.quickPrintModal-Buttons button:hover {
	transform: scale(0.97);
	filter: brightness(1.3);
	transition: 0.1s;
}
.quickPrintConfirm {
	color: var(--secondary-dark);
	background: var(--primary-green);
}
.quickPrintCancel {
	background: var(--secondary-dark);
	color: var(--light-blue-grey-color);
}

/* ============================ Game ============================ */

.game {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 105px;
	width: 500px;
	background: var(--gradient);
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	z-index: 9999999;
	backdrop-filter: blur(15px) brightness(2);
	border-left: 3px solid var(--light-blue-grey-color);
	border-right: 3px solid var(--light-blue-grey-color);
	box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.8);
	overflow: visible;
}
.gameInner {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--primary-dark);
	backdrop-filter: brightness(2);
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	color: var(--light-blue-grey-color);
	padding-left: 5px;
	padding-right: 5px;
}
.gameLeft, .gameMid, .gameRight {
	height: 33.333%;
	width: 100%;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.gameMid {
	justify-content: center;
	font-size: 1.5rem;
}
.gameRight {
	font-size: 1.2rem;
	justify-content: center;
}
.gameLeft {
	gap: 15px;
	height: 30%;
	display: flex;
	padding-top: 5px;
}
.gameLeftRow {
	height: 100%;
	font-size: 1rem;
	justify-content: left;
	text-align: left;
	padding-left: 5px;
}
.gr1 {
	max-width: 50%;
	display: flex;
}
.gr2 {
	min-width: 20%;
	max-width: 50%;
	display: flex;
}
.gr3 {
	max-width: 50%;
	display: flex;
}
.gameStats {
	position: absolute;
	display: flex;
	width: 100%;
	height: 30px;
	border-left: 3px solid var(--light-blue-grey-color);
	border-right: 3px solid var(--light-blue-grey-color);
	border-bottom: 3px solid var(--light-blue-grey-color);
	top: 105px;
	background: var(--secondary-dark);
	border-radius: 0px 0px var(--primary-radius) var(--primary-radius);
	box-shadow: 0px 10px 15px 2px rgba(0,0,0,0.8);
	transition: 0.2s;
}
.gameStatsInner {
	width: 100%;
	height: 100%;
	display: flex;
	padding-left: 10px;
	font-size: 0.7rem;
	background: var(--primary-dark);
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	color: var(--light-blue-grey-color);
	gap: 10px;
	position: relative;
}
.gameData {
	width: auto;
	margin-left: 10px;
	display: flex;
	justify-content: center;
	text-align: center;
	text-underline-offset: 4px;
}
#gameColor {
	text-decoration: none !important;
}
#gameColor {
	background: var(--weekly-color);
	color: var(--weekly-color-text);
	border-radius: 100px;
	display: flex;
	height: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 0.9rem;
}
#gameSource, #gameTitle {
	background: var(--light-blue-grey-color);
	color: var(--secondary-dark);
	border-radius: 100px;
	display: flex;
	height: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 0.9rem;
}
.gsStat {
	background: var(--light-blue-grey-color);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: var(--secondary-dark);
	border-radius: 100px;
}
.gameStat {
	display: flex;
	gap: 10px;
	align-items: center;
	align-content: center;
}
.gameTimer {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translatey(-50%);
	font-size: 1rem;
}
.gameSettingsBtns {
	display: flex;
	gap: 10px;
}
.leaderboard-Backer {
	display: flex;
	position: absolute;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(15px);
	justify-content: center;
	align-items: center;
}
.leaderboard-Backer.open {
	display: flex;
}

.leaderboard {
	width: 600px;
	height: 70%;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.leaderboard-Inner {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    gap: 20px;
}
.leaderboardTop {
	width: 100%;
	height: auto;
	font-size: 1.6rem;
	color: var(--light-blue-grey-color);
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
}
span.leaderboardTop {
	justify-content: center;
}
.leaderboardEntry {
	width: 100%;
	height: 90px;
	background: var(--primary-dark);
	border-radius: var(--primary-radius);
	backdrop-filter: brightness(0);
	align-items: center;
	align-content: center;
	display: flex;
	color: var(--light-blue-grey-color);
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	-webkit-box-sizing: border-box;
	flex-direction: row;
}
.leaderboardEntryLeft {
	width: 70px;
}
.leaderboardEntryRight {
	display: flex;
	flex-direction: column;
	width: calc(100% - 70px);
	height: 100%;
	position: relative;
}
.leaderboardDate {
	font-size: 1rem;
	position: absolute;
	right: 20px;
}
.leaderboardPosition {
	font-size: 2rem;
	width: 60px;
	height: 60px;
	border-radius: var(--primary-radius);
	justify-content: center;
	align-items: center;
	align-content: center;
	display: flex;
	color: var(--secondary-dark);
	margin-left: 5px;
}
.lb1 {
	background: gold;
}
.lb2 {
	background: silver;
}
.lb3 {
	background: #CD7F32;
}
.leaderboardStats {
	display: flex;
	flex-direction: row;
	position: absolute;
	bottom: 15px;
	width: 100%;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: var(--secondary-dark);
}
.leaderboardName {
	margin-left: 20px;
	font-size: 1.5rem;
}
.leaderboardTop {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding-top: 15px;
}
.leaderboardLabels, .leaderboardShortcuts, .leaderboardTime {
	background: var(--light-blue-grey-color);
	justify-content: center;
	border-radius: 100px;
	padding: 2px 10px 2px 10px;
}
.gameEndWrapper {
	display: flex;
	position: absolute;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(15px);
	justify-content: center;
	align-items: center;
}

	.gameEndWrapper.open {
		display: flex;
	}

.gameEnd {
	min-width: 600px;
	width: 60%;
	height: 70%;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gameEndInner {
	width: 100%;
	height: 100%;
	border-radius: var(--primary-radius);
	background: var(--primary-dark);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	flex-direction: column;
	position: relative;
}
.gameEndTop {
	width: 100%;
	height: auto;
	color: var(--light-blue-grey-color);
	display: flex;
	font-size: 1.1rem;
	flex-direction: column;
	gap: 20px;
}
.gameOver {
    width: 100%;
    font-size: 3rem;
    color: red;
    display: flex;
    justify-content: center;
	text-align: center;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.placement {
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 1.5rem;
	box-sizing: border-box;
	padding-bottom: 20px;
}
.go-labels, .go-shortcuts, .go-time, .go-avg {
	width: 100%;
	font-size: 1.2rem;
	box-sizing: border-box;
	padding-left: 20px;
}
.go-ShortcutsMore {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 50px;
}
.go-buttons {
	position: absolute;
	display: flex;
	justify-content: flex-end;
	bottom: 10px;
	right: 10px;
	gap: 10px;
	overflow: visible;
}
.go-buttons button {
	background: var(--secondary-dark);
	border: 2px solid rgba(255,255,255,0.06);
	color: var(--light-blue-grey-color);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: transform 0.12s ease, background 0.12s ease;
}
.go-buttons button:hover {
	transform: translateY(-2px);
}
.shortcutStats {
	position: absolute;
	top: 90px;
	z-index: 1;
	background: rgba(0,0,0,0.4);
	font-size: 0.7rem;
	display: flex;
	height: 50px;
	border-radius: 0px 0px var(--primary-radius) var(--primary-radius);
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	left: 0px;
	box-sizing: border-box;
	overflow: visible;
}

.ssLeft {
	padding-left: 10px;
	box-sizing: border-box;
}

.shortcutStats div {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 33.3333%;
}

.leaderboardEntry, .leaderboardEntryRight {
	overflow: visible;
	border-radius: var(--primary-radius) var(--primary-radius) 0px 0px;
}

.leaderboardEntry {
	margin-top: 40px;
}

.lead1 {
	margin-top: 0px;
}
.nameInputContainer {
	display: flex;
	justify-content: center;
	position: absolute;
	transform: translatex(-50%);
	left: 50%;
	top: 160px;
}

.leaderboardNameInput {
	background: var(--light-blue-grey-color) !important;
	color: var(--secondary-dark) !important;
	width: 250px;
}
.lbInfo {
	font-size: 0.5rem;
	color: var(--light-blue-grey-color);
	margin-top: 35px;
	padding-left: 4px;
}
.totalPlays {
	font-size: 0.5rem;
	color: var(--light-blue-grey-color);
	margin-top: -10px;
	padding-left: 4px;
}

/* ======================== Context menu */

.contextMenu {
	position: fixed;
	z-index: 999999;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	min-width: 200px;
	overflow: hidden;
}

.contextMenuInner {
	background: var(--primary-dark);
	border-radius: var(--primary-radius);
	padding: 0px 0;
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

.contextMenuItem {
	padding: 12px 16px;
	color: var(--light-blue-grey-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.95rem;
	font-weight: 500;
	user-select: none;
	transition: background 0.12s ease;
	position: relative;
	min-width: 200px;
}

	.contextMenuItem:hover {
		filter: brightness(1.6);
	}

	.contextMenuItem span {
		flex: 1;
	}

.contextMenuSeparator {
	height: 0px;
	background: rgba(255,255,255,0.1);
	margin: 0px 0;
}

.contextMenuArrow {
	margin-left: 12px;
	font-size: 1.2rem;
	opacity: 0.6;
}

.contextMenuSubmenu {
	position: fixed;
	background: var(--gradient);
	border-radius: var(--primary-radius);
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	min-width: 220px;
	max-width: none;
	max-height: 400px;
	overflow-y: auto;
	z-index: 1000000;
	padding: 0px 0;
	display: flex;
	flex-direction: column;
}

.contextMenuSubmenuItem {
	color: var(--light-blue-grey-color);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 400;
	user-select: none;
	transition: background 0.12s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--primary-dark);
	display: block;
	flex-shrink: 0;
}

	.contextMenuSubmenuItem:hover {
		backdrop-filter: brightness(1.6);
	}

	.contextMenuSubmenuItem:first-child {
		border-radius: var(--primary-radius) var(--primary-radius) 0 0;
	}

	.contextMenuSubmenuItem:last-child {
		border-radius: 0 0 var(--primary-radius) var(--primary-radius);
	}


	.contextMenuSubmenuItem:last-child {
		border-radius: 0 0 var(--primary-radius) var(--primary-radius);
	}
.contextMenuItem[data-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

	/* ======================== Pinned Items Styling */
.contextMenuSubmenuItem.pinnedItem {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 0;
	position: relative;
	flex-shrink: 0;
	min-width: max-content;
	padding-right: 0;
}

.submenuItemText {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 10px 55px 10px 16px;
	box-sizing: border-box;
	cursor: pointer;
}

.submenuItemRemove {
	flex: 0 0 auto;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	font-weight: bold;
	opacity: 0.7;
	transition: opacity 0.12s ease;
	font-size: 1.2rem;
	height: 100%;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: var(--primary-dark);
	backdrop-filter: blur(15px) brightness(0.5);
	z-index: 2;
}
	.submenuItemRemove:hover {
		opacity: 1;
		backdrop-filter: brightness(0);
	}


/* ============================================= Input spinners */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}
.quantityField,
.piecesField {
	position: relative;
}
	.quantityField input[type="number"],
	.piecesField input[type="number"] {
		padding-right: 28px;
	}
.numberSpinnerButtons {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	right: 10px !important;
	bottom: -13px !important;
	width: auto !important;
	transform: translateY(-50%);
	margin-bottom: -11px;
	margin-right: -10px;
	background: transparent;
	border-radius: 0px var(--primary-radius) var(--primary-radius) 0px;
}
.numberSpinnerButton {
	width: 23px;
	height: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	color: var(--light-blue-grey-color);
	background: var(--primary-dark);
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
	padding: 0;
	border: none;
	backdrop-filter: brightness(2);
}
	.numberSpinnerButton:hover {
		backdrop-filter: brightness(1.5);
	}
.spinDown {
	padding-bottom: 4px;
	box-sizing: border-box;
	border-radius: 0px 0px var(--primary-radius) 0px;
}

.spinUp {
	border-radius: 0px var(--primary-radius) 0px 0px;
	padding-top: 4px;
    box-sizing: border-box;
}
#barcodePieces,
#barcodeQuantity {
	max-width: calc(100% - 23px);
	border-radius: var(--primary-radius) 0px 0px var(--primary-radius);
}
@keyframes ellipsis-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ellipsis-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    margin: 0 2px;
    animation: ellipsis-bounce 1.4s infinite;
}

.ellipsis-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.ellipsis-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.printBtn-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
}