:root {
	--mixr-ink: #17212b;
	--mixr-muted: #667482;
	--mixr-line: #dce4ea;
	--mixr-panel: #fff;
	--mixr-canvas: #f3f6f8;
	--mixr-sidebar: #17212b;
	--mixr-accent: #49a2b2;
	--mixr-accent-dark: #06708c;
	--mixr-highlight: #e7a83b;
	--mixr-radius: 8px;
	--mixr-shadow: 0 10px 28px rgba(23, 33, 43, .07);
	--mixr-page-banner: #ddeff7;
	--mixr-section-radius: 12px;
	--mixr-content-max: 1420px;
	--mixr-page-gutter: 32px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--mixr-canvas); }
body {
	min-height: 100vh;
	margin: 0;
	color: var(--mixr-ink);
	background: radial-gradient(circle at 88% 0%, rgba(11, 120, 145, .08), transparent 28rem), var(--mixr-canvas);
	font-family: "Segoe UI", sans-serif;
	font-size: 15px;
}

body.login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
	background: url("../img/login_background.png") center / cover no-repeat, var(--mixr-canvas);
}
body.login:after {
	position: fixed;
	inset: 0;
	z-index: 0;
	content: "";
	background: rgba(8, 35, 48, .2);
}
body.login > main,
body.login > .login_wrapper { z-index: 1; }
.login_background_video {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: url("../img/login_background.png") center / cover no-repeat;
}
body.login main {
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
}
body.login main > .container { width: 100%; max-width: none; padding: 0; }
body.login { overflow-x: hidden; }
body.login div.login_wrapper {
	position: static;
	display: block;
	width: min(100%, 420px);
	height: auto;
	margin: 0 auto;
}
body.login div.login_wrapper div.card {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-top: 3px solid #18aebe;
	border-radius: 14px;
	background: rgba(255, 255, 255, .93) !important;
	color: var(--mixr-ink);
	box-shadow: 0 24px 60px rgba(4, 24, 42, .28);
	backdrop-filter: blur(12px);
}

a { color: var(--mixr-accent); transition: color .18s ease, background-color .18s ease, transform .18s ease; }
a:hover { color: var(--mixr-accent-dark); text-decoration: none; }

header {
	position: fixed;
	z-index: 20;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 68px;
	padding: 0 20px;
	border-bottom: 1px solid var(--mixr-line);
	background: rgba(255, 255, 255, .96);
}
header .logo { position: absolute; left: 50%; transform: translateX(-50%); }
header .logo a img { display: block; width: 112px !important; height: auto !important; max-width: none; max-height: none; }
header .actions, header .logout { width: 52px; height: 52px; }
header .actions a, header .logout a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--mixr-ink);
	border-radius: 8px;
}
header .actions a:hover, header .logout a:hover { color: var(--mixr-accent); background: #eef5f7; }
header .actions i, header .logout i { font-size: 18px; }
header .logout { margin-left: auto; }

nav.menu {
	position: fixed;
	z-index: 15;
	top: 68px;
	bottom: 0;
	left: 0;
	width: 236px;
	height: calc(100vh - 68px);
	padding: 12px 8px;
	overflow-y: auto;
	background: var(--mixr-sidebar);
	box-shadow: 8px 0 24px rgba(23, 33, 43, .08);
	transform: translateX(-100%);
	transition: transform .2s ease;
}
nav.menu.menu_show { transform: translateX(0); }
nav.menu ul { margin: 0; padding: 0; list-style: none; }
nav.menu li, nav.menu li[style*="padding-left"] { margin: 0; padding-left: 0 !important; border: 0 !important; }
nav.menu a.menu_item,
nav.menu a.menu_item:hover,
nav.menu li.current > a.menu_item {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 36px;
	margin: 1px 0;
	padding: 7px 12px;
	border: 0;
	border-radius: 6px;
	color: #c8d4da;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
}

nav.menu a.menu_item:hover, nav.menu li.current > a.menu_item { color: #fff; background: var(--mixr-accent); }
nav.menu a.menu_item i { width: 22px; margin-right: 10px; color: #87a9b5; text-align: center; }
nav.menu a.menu_item:hover i, nav.menu li.current > a.menu_item i { color: #fff; }
nav.menu .settings_parent > a.menu_item { color: #c8d4da; }
nav.menu .settings_parent > a.menu_item:after {
	content: ">";
	margin-left: auto;
	font-size: 14px;
	line-height: 1;
}
nav.menu .settings_submenu {
	max-height: 0;
	margin: 0 0 0 17px;
	padding-left: 8px;
	overflow: hidden;
	border-left: 1px solid rgba(135, 169, 181, .35);
	transition: max-height .2s ease, margin .2s ease;
}
nav.menu .settings_parent.expanded > a.menu_item:after { content: "v"; }
nav.menu .settings_parent.expanded .settings_submenu { max-height: 520px; margin: 2px 0 5px 17px; }
nav.menu .settings_submenu a.menu_item {
	min-height: 31px;
	padding: 5px 9px;
	font-size: 16px;
}
nav.menu .settings_submenu a.menu_item i { width: 19px; margin-right: 7px; font-size: 11px; }
nav.menu .settings_submenu li.current > a.menu_item { color: #fff; background: rgba(11, 120, 145, .78); }

main { min-height: calc(100vh - 112px); margin: 68px 0 44px; padding: 34px 32px 48px; transition: margin-left .2s ease; }
main > .container { width: 100%; max-width: 1420px; margin: 0 auto; padding: 0; }
h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--mixr-ink); font-size: 1.75rem; font-weight: 600; }
h1 i, h1 .fa, h1 .fas { color: var(--mixr-accent); font-size: .82em; }
main > .container > a:has(> h1) { display: block; margin-bottom: 24px; }
main > .container > a > h1 { margin: 0; }
main > .container > a > h1 > i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	color: var(--mixr-accent);
	border-radius: 9px;
	background: #dff4f6;
	font-size: 22px;
}
.page_header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
}
.page_header_icon {
	display: grid;
	flex: 0 0 52px;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--mixr-accent);
	border-radius: 10px;
	background: #dff4f6;
	font-size: 26px;
}
.page_header h1 { margin: 0; font-size: 2rem; }
.page_header p { margin: 2px 0 0; color: var(--mixr-muted); font-size: 15px; }
.app_page_header {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: var(--mixr-page-banner);
}
main.app_layout { padding: 0 0 48px; }
.app_page_header_inner,
main.app_layout > .container { width: 100%; max-width: calc(var(--mixr-content-max) + var(--mixr-page-gutter) * 2); margin: 0 auto; padding-right: var(--mixr-page-gutter); padding-left: var(--mixr-page-gutter); }
.app_page_header_inner { position: relative; display: flex; align-items: center; min-height: 140px; padding-top: 28px; padding-bottom: 28px; }
main.app_layout > .container { padding-top: 22px; }
.app_page_header_content { position: relative; z-index: 1; width: 100%; min-width: 0; padding-right: 196px; }
.app_page_header h1 { display: block; margin: 0; color: #142b40; font-size: 32px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.app_page_header p { margin: 7px 0 0; color: #48677d; font-size: 15px; line-height: 1.5; }
.app_page_breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; color: #597f95; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.app_page_breadcrumb a { color: #39738f; }
.app_page_breadcrumb a:hover { color: #142b40; }
.app_page_watermark { position: absolute; right: var(--mixr-page-gutter); top: 50%; z-index: 0; color: #438daf; opacity: .12; font-size: 180px; transform: translateY(-50%) rotate(-16deg); pointer-events: none; }
main.app_layout .global_breadcrumb,
main a:has(> h1):not(.app_page_breadcrumb a),
main > .container > .page_header:not(.settings_page_header),
.new_object_header,
.recipe_page_header { display: none; }
.settings_page_header > .page_header_icon,
.settings_page_header > div:has(> h1) { display: none; }
@media (max-width: 640px) {
	.app_page_header_inner { min-height: 120px; padding-top: 20px; padding-bottom: 20px; }
	.app_page_header_content { padding-right: 0; }
	.app_page_header h1 { font-size: 26px; }
	.app_page_header p { font-size: 14px; }
	.app_page_watermark { display: none; }
}
.settings_page_header { position: relative; }
.settings_search {
	position: relative;
	width: 268px;
	margin-left: auto;
}
.settings_search i {
	position: absolute;
	top: 50%;
	left: 16px;
	color: #7890a0;
	font-size: 16px;
	transform: translateY(-50%);
}
.settings_search input {
	width: 100%;
	height: 42px;
	padding: 9px 14px 9px 42px;
	border: 1px solid #d2e0e7;
	border-radius: 8px;
	color: var(--mixr-ink);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 6px rgba(23, 33, 43, .03);
	font-size: 14px;
}
.settings_search input::placeholder { color: #7890a0; opacity: 1; }
.settings_search input:focus {
	border-color: var(--mixr-accent);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(11, 120, 145, .13);
}
.card { margin-bottom: 20px; padding: 22px; border: 1px solid var(--mixr-line); border-radius: var(--mixr-radius); background: var(--mixr-panel); box-shadow: var(--mixr-shadow); }
.card-body { padding: 0; }
.tableTopButtons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-height: 58px;
	margin: -10px 0 0;
	padding: 0 0 14px;
}
.mixing_actions { margin-top: -10px; }
.table_actions { display: flex; align-items: center; gap: 10px; }
.table_tabs {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 48px;
	margin: -18px -22px 18px;
	padding: 0 22px;
	border-bottom: 1px solid #dce6eb;
}
.table_tabs a {
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	color: #506575;
	font-size: 16px;
	font-weight: 700;
}
.table_tabs a:hover,
.table_tabs a.active { color: #07879a; }
.table_tabs a.active:after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	content: "";
	background: #14aebe;
}
.tableTopButtons .btn {
	min-height: 38px;
	padding: 9px 15px;
	border-radius: 7px;
}
.tableTopButtons .btn-primary { box-shadow: 0 5px 12px rgba(11, 120, 145, .16); }
.tableTopButtons .btn-primary {
	border-color: #087e96;
	background: linear-gradient(145deg, #19aaba, #016178);
	box-shadow: 0 6px 14px rgba(7, 88, 107, .18);
}
.tableTopButtons .btn-primary:hover {
	border-color: #016178;
	background: linear-gradient(145deg, #21b8c6, #08758a);
}
.card:has(table) { border-top: 4px solid #16adbd; }
.tableTopButtons .btn-outline {
	color: var(--mixr-accent-dark);
	border: 1px solid #a9c4cf;
	background: #fff;
	box-shadow: 0 3px 8px rgba(23, 33, 43, .04);
}
.tableTopButtons .btn-outline:hover {
	color: var(--mixr-accent-dark);
	border-color: var(--mixr-accent);
	background: #f2fafb;
}
#purchasesList > .card,
[id$="List"] > .card:has(table) {
	padding: 18px 22px 14px;
	border-color: #dfe8ed;
	box-shadow: 0 12px 28px rgba(23, 33, 43, .06);
}

.btn, button, input[type="submit"], input[type="button"] { min-height: 42px; padding: 10px 17px; border-radius: 7px; font-size: 15px; font-weight: 700; }
.btn-primary, .btn-info, .login_btn { color: #fff; border-color: var(--mixr-accent-dark); background: linear-gradient(135deg, var(--mixr-accent), var(--mixr-accent-dark)); }
.btn-primary:hover, .btn-info:hover, .login_btn:hover { color: #fff; border-color: var(--mixr-accent-dark); background: linear-gradient(135deg, var(--mixr-accent-dark), var(--mixr-accent-dark)); }
.btn-secondary { color: var(--mixr-ink); border-color: var(--mixr-line); background: #eef2f4; }
.form-control, select, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"] { min-height: 40px; border: 1px solid #cbd7de; border-radius: 7px; box-shadow: none; }
.form-control:focus, select:focus, textarea:focus, input:focus { border-color: var(--mixr-accent); box-shadow: 0 0 0 3px rgba(11, 120, 145, .13); }

table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e1e9ee; border-radius: 8px; background: #fff; }
table thead th { padding: 11px 14px; color: #354b5d; border-bottom: 1px solid #dce6eb; background: #eef4f7; font-size: 12px; font-weight: 700; }
table tbody td, table tfoot td { padding: 12px 14px; border-top: 1px solid #edf1f3; color: #35434e; font-size: 14px; }
table tbody tr:nth-child(even) { background: #fbfdfe; }
table tbody tr:hover { background: #eaf7f8; }
table tbody td:first-child { font-weight: 600; color: #203849; }
.table_empty_state {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 178px;
	margin-top: 18px;
	padding: 24px;
	border: 1px solid #e1e9ee;
	border-radius: 8px;
	background: rgba(255, 255, 255, .76);
	text-align: center;
}
.table_empty_state:before { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ""; background: #16adbd; }
.table_empty_icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 10px;
	color: #7895a6;
	border: 2px solid #9db5c2;
	border-radius: 50%;
	font-size: 25px;
}
.table_empty_state strong { color: #203849; font-size: 16px; }
.table_empty_state > span:not(.btn) { margin: 3px 0 14px; color: var(--mixr-muted); font-size: 13px; }
.shop_links_toolbar { display: flex; justify-content: flex-end; margin: -8px 0 14px; }
.shop_links_card { overflow-x: auto; }
.shop_links_card table { min-width: 980px; }
.shop_links_card table th { font-size: 13px; }
.shop_links_card table td { font-size: 15px; }
.shop_link_actions { white-space: nowrap; }
.shop_link_actions .btn { margin: 2px; padding: 7px 10px; font-size: 13px; }
.shop_link_status { display: inline-block; padding: 4px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.shop_link_status.active { color: #16724e; background: #dcf5e8; }
.shop_link_status.inactive { color: #7a5d18; background: #fff1c9; }
.shop_link_form { margin-bottom: 24px; }
.shop_link_form h2 { margin: 0 0 22px; color: var(--mixr-ink); font-size: 22px; }
.shop_link_form label { display: block; margin: 0 0 7px; }
.shop_link_form .form-control { margin-bottom: 16px; }
.shop_link_form small { display: block; margin-top: -10px; margin-bottom: 16px; color: var(--mixr-muted); }
.shop_link_checks { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 16px; padding-top: 26px; }
.shop_link_checks label { width: auto; font-weight: 600; }
.shop_link_checks input { margin-right: 5px; }
.form_actions { display: flex; gap: 10px; margin-top: 12px; }
.recipe_page_header { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.recipe_title_icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--mixr-accent); border-radius: 10px; background: #dff4f6; font-size: 24px; }
.recipe_page_header h1 { margin: 0; font-size: 26px; }
.recipe_page_header p { margin: 2px 0 0; color: var(--mixr-muted); font-size: 15px; }
.recipe_panel_title { margin: 0 0 18px; color: var(--mixr-ink); font-size: 20px; font-weight: 700; }
.recipe_details_panel { border-top: 4px solid #16adbd; }
.recipe_details_panel .form-wrapper { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.recipe_details_panel .form-group { margin: 0; }
.recipe_details_panel .form-group > .col-lg-3 { width: 100%; max-width: none; padding: 0 0 7px; }
.recipe_details_panel .form-group > .col-lg-9 { width: 100%; max-width: none; padding: 0; }
.recipe_details_panel .form-group > .col-lg-9 > .col-xs-6 { width: 50%; padding: 0 4px; }
.recipe_details_panel .form-group > .col-lg-9 > .col-xs-6:first-child { padding-left: 0; }
.recipe_details_panel .form-group > .col-lg-9 > .col-xs-6:last-child { padding-right: 0; }
.recipe_details_panel .form-group > .col-lg-9 { display: flex; align-items: center; gap: 8px; }
.recipe_details_panel .form-group > .col-lg-9 > .col-xs-6 { float: none; flex: 1 1 0; width: auto; padding: 0; }
.recipe_ingredients_panel, .recipe_add_panel { border-top: 0 !important; }
.recipe_ingredients_panel { box-shadow: 0 8px 20px rgba(23, 33, 43, .05); }
.recipe_ingredients_group { margin-top: 18px; }
.recipe_ingredients_group { padding: 0 22px 18px; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(23, 33, 43, .05); }
.recipe_ingredients_group .recipe_ingredients_panel { margin: 0 -22px; padding: 22px; border: 0; border-radius: 8px 8px 0 0; box-shadow: none; }
.recipe_ingredients_group .recipe_add_panel { margin: 18px 0 0; border: 0 !important; border-radius: 8px; }
.recipe_ingredients_panel { margin-top: 18px; }
.ingredient_count { display: inline-block; margin-left: 8px; padding: 4px 10px; color: var(--mixr-accent-dark); border-radius: 99px; background: #e7f3f5; font-size: 12px; vertical-align: middle; }
.recipe_empty_state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; color: var(--mixr-muted); text-align: center; }
.recipe_empty_state i { margin-bottom: 10px; color: #a8c3d0; font-size: 42px; }
.recipe_empty_state strong { color: #203849; font-size: 16px; }
.recipe_empty_state span { margin-top: 3px; font-size: 13px; }
.recipe_add_panel { margin-top: -20px; padding: 18px 22px; border-top: 1px solid #dce7ec !important; background: #f3fbfc; }
.recipe_add_panel { margin-right: 0; margin-left: 0; }
.recipe_add_panel .form-wrapper { margin: 0; }
.recipe_add_panel table { margin: 0; border: 0; background: transparent; }
.recipe_add_panel tfoot td { padding: 0 5px; border: 0; }
.recipe_add_panel tfoot td:first-child { padding-left: 0; }
.recipe_add_panel .recipe_add_action_cell { width: 1%; white-space: nowrap; text-align: right; }
.recipe_add_panel #row_add > td { vertical-align: middle; }
.recipe_add_panel .recipe_add_action_cell { vertical-align: bottom; }
.recipe_add_panel .recipe_add_action_cell .btn { display: inline-flex; align-items: center; justify-content: center; position: relative; top: 13px; vertical-align: bottom; margin-bottom: 0; }
.recipe_footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 18px; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; }
.recipe_footer .button-center { margin: 0; padding: 0; border: 0; }
.recipe_add_panel .btn-outline,
.recipe_footer .btn-secondary {
	color: var(--mixr-accent-dark);
	border: 1px solid var(--mixr-accent);
	background: #fff;
}
.recipe_add_panel .btn-outline:hover,
.recipe_footer .btn-secondary:hover {
	color: var(--mixr-accent-dark);
	border-color: var(--mixr-accent-dark);
	background: #f2fafb;
}
.new_object_header { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.new_object_icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--mixr-accent); border-radius: 10px; background: #dff4f6; font-size: 24px; }
.new_object_header h1 { margin: 0; font-size: 26px; }
.new_object_header p { margin: 2px 0 0; color: var(--mixr-muted); font-size: 15px; }
.new_object_panel { width: 100%; max-width: none; border-top: 4px solid #16adbd; }
.new_object_panel_title { margin: 0 -22px 22px; padding: 0 22px 16px; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); font-size: 20px; }
.new_object_panel .form-wrapper { width: 100%; }
.new_object_panel .form-group > .col-lg-3 { width: 100%; max-width: none; padding: 0 0 7px; }
.new_object_panel .form-group > .col-lg-9 { width: 100%; max-width: none; padding: 0; }
.new_object_panel .form-group > .col-lg-9 > .col-xs-6 { width: 50%; padding: 0 5px; }
.new_object_panel .form-group > .col-lg-9 > .col-xs-6:first-child { padding-left: 0; }
.new_object_panel .form-group > .col-lg-9 > .col-xs-6:last-child { padding-right: 0; }
.new_object_panel .form-group:has(#volume) > .col-lg-9,
.new_object_panel .form-group:has(#weight) > .col-lg-9 { display: flex; align-items: center; gap: 8px; }
.new_object_panel .form-group:has(#volume) > .col-lg-9 > .col-xs-6,
.new_object_panel .form-group:has(#weight) > .col-lg-9 > .col-xs-6 { float: none; flex: 1 1 0; width: auto; padding: 0; }
.new_object_footer,
.new_object_panel .form-wrapper > .button-center,
.form_action_bar,
[id^="new"][id$="Form"] .button-center { display: flex; justify-content: flex-end; gap: 10px; margin: 22px -22px -22px; padding: 18px 22px; border: 1px solid #dce7ec; border-radius: 0 0 8px 8px; background: #fff; box-shadow: 0 4px 12px rgba(23, 33, 43, .04); }
.new_object_panel + .new_secondary_panel { margin-top: 22px; }
.new_object_footer .btn-secondary { color: var(--mixr-accent); border-color: var(--mixr-accent); background: #fff; }
.form_action_bar .btn-secondary { color: var(--mixr-accent); border-color: var(--mixr-accent); background: #fff; }
.product_image_form > .new_object_footer,
.container_image_form > .new_object_footer { margin: 16px 0 0 !important; border-radius: 8px; }
.new_secondary_panel { margin: 22px 0 0; padding: 18px; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; }
.new_secondary_panel h2 { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); font-size: 18px; }
.new_stock_fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.new_stock_field .control-label { display: block; margin-bottom: 7px; color: #425565; font-size: 14px; font-weight: 700; }

.image_field { flex: 0 0 360px; width: 360px; margin: 0 24px 0 0; }
.image_field_label { display: block; margin: 0 0 8px; color: var(--mixr-ink); font-size: 13px; font-weight: 700; }
.image_field_label span { color: #8193a0; font-weight: 400; }
.image_state { text-align: center; }
.image_upload_state { min-height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1px dashed #55cee0; border-radius: 9px; background: #f2fcfe; color: #0b8298; cursor: pointer; }
.image_upload_state:hover { border-color: #0b9eb4; background: #e9fafd; }
.image_upload_state > i { font-size: 42px; color: #1194aa; }
.image_upload_state strong { color: var(--mixr-ink); font-size: 16px; }
.image_upload_state > span:not(.btn) { color: #446173; font-size: 14px; }
.image_upload_state small { color: #8193a0; font-size: 12px; }
.image_upload_state .btn { margin-top: 4px; color: #0b8298; border: 1px solid #0bafd0; background: transparent; font-size: 13px; font-weight: 700; }
.image_upload_state .btn:hover { color: #fff; background: #0b9eb4; }
.image_file_input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.image_preview_state { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.image_preview_state img { width: 124px; height: 124px; object-fit: contain; border-radius: 8px; background: #edf6f8; }
.image_preview_actions { display: flex; gap: 8px; }
.image_preview_actions .btn { min-width: 72px; padding: 6px 10px; font-size: 11px; }
.image_form_layout { display: flex; align-items: flex-start; }
.image_form_layout .form-wrapper { flex: 1 1 auto; min-width: 0; }
.image_form_layout .form-wrapper .button-center { margin-top: 14px; }
.product_stock_fields { display: block; max-width: 420px; }
.product_form_footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--mixr-line); border-radius: 0; background: transparent; box-shadow: none; }
.product_form_footer .btn { min-width: 88px; }
.mail_settings_pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.mail_settings_pair > div { min-width: 0; }
#mailSettingsForm .shop_editor_grid { align-items: start; }
#mailSettingsForm .shop_editor_grid > section.shop_panel:first-of-type { grid-column: 1; grid-row: 1; }
#mailSettingsForm .shop_editor_grid > section.shop_panel:nth-of-type(2) { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
	#mailSettingsForm .shop_editor_grid > section.shop_panel:first-of-type { grid-column: 1; grid-row: 1; }
	#mailSettingsForm .shop_editor_grid > section.shop_panel:nth-of-type(2) { grid-column: 1; grid-row: 2; }
}
.mail_test_panel { margin-top: 18px; }
.mail_test_controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.mail_test_controls .form-control { flex: 1 1 240px; min-width: 0; margin-bottom: 0; }
.mail_test_controls .btn { flex: 0 0 auto; }
@media (max-width: 767px) {
	.image_form_layout { display: block; }
	.image_field { width: 100%; margin: 0 0 22px; }
	.new_object_footer,
	.new_object_panel .form-wrapper > .button-center,
	.form_action_bar,
	[id^="new"][id$="Form"] .button-center { justify-content: space-between; gap: 0; }
	.new_object_footer:has(.btn-secondary) > .btn,
	.form_action_bar:has(.btn-secondary) > .btn,
	[id^="new"][id$="Form"] .button-center:has(.btn-secondary) > .btn { flex: 0 0 calc(50% - 15px); width: 100%; margin: 0 7.5px; padding-right: 15px; padding-left: 15px; }
}
.material_breadcrumb { margin: -8px 0 12px; color: var(--mixr-accent); font-size: 13px; font-weight: 600; }
.material_breadcrumb,
.material_editor_heading { width: calc(100% + 24px); margin-left: -12px; padding-left: 12px; }
.material_editor {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	width: calc(100% + 24px);
	margin-left: -12px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.material_editor_heading {
	display: flex;
	align-items: center;
	min-height: 78px;
	margin: 0 0 18px;
	padding: 0 12px;
	border: 0;
	background: transparent;
}
.material_editor_heading h2 { margin: 0; color: var(--mixr-ink); font-size: 24px; font-weight: 700; }
.material_editor_heading p { margin: 3px 0 0; color: var(--mixr-muted); font-size: 15px; }
.material_editor_title_icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; margin-right: 12px; color: var(--mixr-accent); border-radius: 10px; background: #dff4f6; font-size: 24px; }
.material_editor form { width: 100%; }
.material_editor .form-wrapper { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); column-gap: 18px; row-gap: 0; max-width: none; }
.material_editor .form-wrapper > .col-xs-12,
.material_editor .form-wrapper > .col-lg-6,
.material_editor .form-wrapper > .col-lg-12 { float: none; width: 100%; max-width: none; padding-right: 0; padding-left: 0; grid-column: 1; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6),
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { position: absolute; right: 0; width: calc((100% - 18px) / 3); }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) { top: 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(7) { top: 70px; }
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { top: 140px; }
.material_editor .form-wrapper > .col-xs-12:nth-child(1),
.material_editor .form-wrapper > .col-lg-12:nth-child(3),
.material_editor .form-wrapper > .col-lg-12:nth-child(4) { margin-bottom: 18px; border-radius: 8px; box-shadow: 0 6px 16px rgba(23, 33, 43, .04); }
.material_editor .form-wrapper > .col-xs-12:nth-child(1),
.material_editor .form-wrapper > .col-xs-12:nth-child(2),
.material_editor .form-wrapper > .col-lg-12:nth-child(1),
.material_editor .form-wrapper > .col-lg-12:nth-child(2) { padding: 0 16px; border-left: 1px solid #dce7ec; border-right: 1px solid #dce7ec; background: #fff; }
.material_editor .form-wrapper > .col-xs-12:nth-child(2),
.material_editor .form-wrapper > .col-lg-12:nth-child(2) { margin-top: -18px; padding-top: 4px; border-top: 0; }
.material_editor .form-wrapper > .col-lg-12:nth-child(2),
.material_editor .form-wrapper > .col-lg-12:nth-child(5) { border-bottom: 1px solid #dce7ec; border-radius: 0 0 8px 8px; }
.material_editor .form-wrapper > .col-xs-12:nth-child(1):before,
.material_editor .form-wrapper > .col-lg-12:nth-child(1):before { display: block; margin: 0 -16px 18px; padding: 16px; border-top: 3px solid #16adbd; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); content: "Material details"; font-size: 18px; font-weight: 700; }
.material_editor .form-wrapper > .col-xs-12:nth-child(3),
.material_editor .form-wrapper > .col-xs-12:nth-child(4),
.material_editor .form-wrapper > .col-xs-12:nth-child(5),
 .material_editor .form-wrapper > .col-lg-12:nth-child(3),
.material_editor .form-wrapper > .col-lg-12:nth-child(4),
.material_editor .form-wrapper > .col-lg-12:nth-child(5) { padding: 0 16px; border-left: 1px solid #dce7ec; border-right: 1px solid #dce7ec; background: #fff; }
.material_editor .form-wrapper > .col-xs-12:nth-child(3):before,
.material_editor .form-wrapper > .col-lg-12:nth-child(3):before { display: block; margin: 0 -16px 18px; padding: 16px; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); content: "Measurements"; font-size: 18px; font-weight: 700; }
.material_editor .form-wrapper > .col-lg-12:nth-child(3):after { display: block; margin: -14px 0 18px; color: var(--mixr-muted); content: "Define the weight per unit of volume"; font-size: 13px; font-weight: 400; }
.material_editor .form-wrapper > .col-xs-12:nth-child(4):before,
.material_editor .form-wrapper > .col-lg-12:nth-child(4):before { display: block; margin: 0 -16px 18px; padding: 16px; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); content: "Purchasing"; font-size: 18px; font-weight: 700; }
.material_editor .form-wrapper > .col-lg-12:nth-child(4):after { display: block; margin: -14px 0 18px; color: var(--mixr-muted); content: "Purchase quantity and its total cost"; font-size: 13px; font-weight: 400; }
.material_editor .form-wrapper > .col-xs-12:nth-child(6),
.material_editor .form-wrapper > .col-xs-12:nth-child(7),
.material_editor .form-wrapper > .col-xs-12:nth-child(8),
.material_editor .form-wrapper > .col-lg-6:nth-child(6),
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { padding: 0 16px; border-left: 1px solid #dce7ec; border-right: 1px solid #dce7ec; background: #fff; }
.material_editor .form-wrapper > .col-lg-12:nth-child(5) { margin-top: -18px; padding-top: 4px; border-left: 1px solid #dce7ec; border-right: 1px solid #dce7ec; background: #fff; }
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { margin-top: -18px; padding-top: 4px; }
.material_options_heading { margin: 0 -16px 12px; padding: 16px; border-bottom: 1px solid #e1e9ee; color: var(--mixr-ink); font-size: 18px; font-weight: 700; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) { border-top: 1px solid #dce7ec; }
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { border-top: 0; }
.material_editor .form-group { margin-bottom: 18px; }
.material_editor .form-group > .col-lg-3 { width: 100%; max-width: none; padding: 0 0 7px; }
.material_editor .form-group > .col-lg-9 { display: flex; align-items: center; width: 100%; max-width: none; padding: 0; }
.material_editor .form-group > .col-lg-9 > .col-xs-3 { float: none; width: auto; flex: 1 1 0; padding: 0 5px; }
.material_editor .form-group > .col-lg-9 > .col-xs-3:first-child { padding-left: 0; }
.material_editor .form-group > .col-lg-9 > .col-xs-3:last-child { padding-right: 0; }
.material_editor .form-group > .col-lg-9 > .col-xs-3 span { line-height: 44px !important; }
.material_editor .control-label { color: #425565; font-size: 14px; font-weight: 700; }
.material_editor .form-control { min-height: 44px; }
.material_currency_field { position: relative; }
.material_currency_field > span { position: absolute; top: 1px; bottom: 1px; left: 1px; display: flex; align-items: center; justify-content: center; width: 38px; color: #607889; border-right: 1px solid #dce7ec; border-radius: 7px 0 0 7px; background: #f4f8fa; font-size: 16px; font-weight: 700; }
.material_currency_field > input { padding-left: 50px; }
.material_editor .onoffswitch { width: 100%; height: 42px; }
.material_editor .onoffswitch-checkbox { display: block !important; position: absolute; width: 22px; height: 22px; opacity: 1; accent-color: var(--mixr-accent); }
.material_editor .onoffswitch-label { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 42px; margin: 0; padding-left: 32px; border: 0; background: transparent; }
.material_editor .onoffswitch-inner, .material_editor .onoffswitch-switch { display: none; }
.material_editor .form-wrapper > .col-xs-12:nth-child(6),
.material_editor .form-wrapper > .col-xs-12:nth-child(7),
.material_editor .form-wrapper > .col-xs-12:nth-child(8),
.material_editor .form-wrapper > .col-lg-6:nth-child(6),
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { margin: 0; padding: 0 16px; border-left: 1px solid #dce7ec; border-right: 1px solid #dce7ec; background: #fff; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) { border-top: 0; border-radius: 8px 8px 0 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { padding-bottom: 12px; border-bottom: 1px solid #dce7ec; border-radius: 0 0 8px 8px; }
.material_editor .form-wrapper > .col-lg-12:nth-child(1),
.material_editor .form-wrapper > .col-lg-12:nth-child(2) { margin-bottom: 18px; }
.material_editor .form-wrapper > .col-lg-12:nth-child(3) { margin-bottom: 18px; }
.material_editor .form-wrapper > .col-lg-12:nth-child(4) { margin-bottom: 0; }
.material_editor .form-wrapper > .col-lg-12:nth-child(5) { margin-bottom: 18px; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6),
.material_editor .form-wrapper > .col-lg-6:nth-child(7),
.material_editor .form-wrapper > .col-lg-6:nth-child(8) { display: block; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group { display: flex; align-items: center; min-height: 58px; height: 58px; margin: 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group > .col-lg-6,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group > .col-lg-6,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group > .col-lg-6 { width: 50%; max-width: none; padding: 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group > .col-lg-6:first-child { display: flex; align-items: center; width: 65%; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group > .col-lg-6:last-child { width: 35%; }
.material_editor .form-wrapper > .col-lg-12:nth-child(5) { border-bottom: 1px solid #dce7ec; border-radius: 0 0 8px 8px; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group > .col-lg-6:last-child { order: -1; flex: 0 0 32px; width: 32px; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .form-group > .col-lg-6:first-child { flex: 1 1 auto; width: auto; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .onoffswitch-checkbox,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .onoffswitch-checkbox,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .onoffswitch-checkbox { position: static; margin: 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .onoffswitch,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .onoffswitch,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .onoffswitch { display: flex; align-items: center; width: 32px; height: 48px; margin-top: 0; }
.material_editor .form-wrapper > .col-lg-6:nth-child(6) .onoffswitch-label,
.material_editor .form-wrapper > .col-lg-6:nth-child(7) .onoffswitch-label,
.material_editor .form-wrapper > .col-lg-6:nth-child(8) .onoffswitch-label { display: none !important; }
.material_editor .form-group:has(#count_by_weight) .control-label:before { content: "\f24e"; }
.material_editor .form-group:has(#mixing_item) .control-label:before { content: "\f0c3"; }
.material_editor .form-group:has(#complex_item) .control-label:before { content: "\f5fd"; }
.material_editor .form-group:has(#stock_unit):after { display: block; clear: both; margin: 6px 0 12px; color: var(--mixr-muted); content: "Unit used to track inventory"; font-size: 13px; line-height: 1.3; }
.material_editor .form-wrapper > .col-lg-6:has(#count_by_weight),
.material_editor .form-wrapper > .col-lg-6:has(#count_by_weight) .form-group,
.material_editor .form-wrapper > .col-lg-6:has(#count_by_weight) .control-label,
.material_editor #count_by_weight { display: block !important; visibility: visible !important; opacity: 1 !important; }
.material_editor .form-wrapper > .col-lg-6:has(#count_by_weight) { position: absolute; top: 0; right: 0; z-index: 4; }

/* Final material editor alignment overrides. */
.material_breadcrumb { width: 100%; margin-left: 0; padding-left: 0; color: #6c757d; }
.material_breadcrumb a { color: var(--mixr-accent); }
.global_breadcrumb {
	width: 100%;
	margin: 0 0 12px;
	color: #6c757d;
	font-size: 13px;
	font-weight: 600;
}
.global_breadcrumb a { color: var(--mixr-accent); }
.global_breadcrumb .breadcrumb_separator { margin: 0 7px; color: #6c757d; }
#hideNewAddressFormButton,
#hideNewContainerFormButton,
#hideNewLabelFormButton,
#hideNewReceivingFormButton,
#hideNewRecipeFormButton,
#hideNewSupplierFormButton,
#hideNewUserFormButton,
#hideNewOrderFormButton,
#hideNewPurchaseFormButton { display: none; }
.material_editor_heading { width: 100%; margin-left: 0; padding-left: 0; }
.material_editor { width: 100%; margin-left: 0; }
.material_editor .onoffswitch { margin-top: 0; }
.material_editor .onoffswitch-checkbox {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 22px !important;
	height: 22px !important;
}
.material_editor .onoffswitch-label { display: block !important; visibility: visible !important; }

/* Final options stack: one panel, three compact rows, real heading element. */
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: calc((100% - 18px) / 3) !important;
	min-height: 78px;
	padding: 0 16px !important;
	border: 1px solid #dce7ec !important;
	border-radius: 8px 8px 0 0;
	background: #fff !important;
}
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 {
	position: absolute !important;
	right: 0 !important;
	width: calc((100% - 18px) / 3) !important;
	min-height: 58px;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid #dce7ec !important;
	border-top: 0 !important;
	background: #fff !important;
}
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 { top: 78px !important; }
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 { top: 136px !important; border-radius: 0 0 8px 8px; }
.material_options_heading { margin: 0 -16px 0; padding: 16px; border-bottom: 1px solid #e1e9ee; font-size: 18px; font-weight: 700; }
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) .form-group,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 .form-group,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 .form-group { display: flex; align-items: center; height: 58px; min-height: 58px; margin: 0; }
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) .form-group > .col-lg-6,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 .form-group > .col-lg-6,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 .form-group > .col-lg-6 { width: auto; padding: 0; }
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 .form-group > .col-lg-6:first-child,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 .form-group > .col-lg-6:first-child { flex: 1; }
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 .form-group > .col-lg-6:last-child,
.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 .form-group > .col-lg-6:last-child { order: -1; flex: 0 0 32px; }
.material_editor .form-wrapper > .material_option_weight,
.material_editor .form-wrapper > .material_option_mixing,
.material_editor .form-wrapper > .material_option_layered { position: static !important; top: auto !important; right: auto !important; grid-column: 2 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; min-height: 58px; margin: 0 !important; padding: 0 16px !important; border: 1px solid #dce7ec !important; border-top: 0 !important; background: #fff !important; }
.material_editor .form-wrapper > .material_option_weight { border-top: 0 !important; }
.material_editor .form-wrapper > .material_option_layered { border-radius: 0 0 8px 8px; }
.material_editor .material_option_weight .material_options_heading { margin: 0 -16px; }
.material_editor .material_option_weight .form-group,
.material_editor .material_option_mixing .form-group,
.material_editor .material_option_layered .form-group { display: flex; align-items: center; height: 58px; margin: 0; }
.material_editor .material_option_weight .form-group > .col-lg-6,
.material_editor .material_option_mixing .form-group > .col-lg-6,
.material_editor .material_option_layered .form-group > .col-lg-6 { width: auto; padding: 0; }
.material_editor .material_option_weight .form-group > .col-lg-6:first-child,
.material_editor .material_option_mixing .form-group > .col-lg-6:first-child,
.material_editor .material_option_layered .form-group > .col-lg-6:first-child { flex: 1; }
.material_editor .material_option_weight .form-group > .col-lg-6:last-child,
.material_editor .material_option_mixing .form-group > .col-lg-6:last-child,
.material_editor .material_option_layered .form-group > .col-lg-6:last-child { order: -1; flex: 0 0 32px; }

/* Final grid placement for the three option rows. */
.material_editor .form-wrapper > .material_option_weight { grid-column: 2 !important; grid-row: 1 !important; }
.material_editor .form-wrapper > .material_option_mixing { grid-column: 2 !important; grid-row: 2 !important; }
.material_editor .form-wrapper > .material_option_layered { grid-column: 2 !important; grid-row: 3 !important; }
.material_editor .form-wrapper > .material_option_weight,
.material_editor .form-wrapper > .material_option_mixing,
.material_editor .form-wrapper > .material_option_layered { position: static !important; left: auto !important; top: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }

/* The option stack is a real right-side panel, independent of legacy Bootstrap columns. */
.material_editor .form-wrapper > .material_option_weight,
.material_editor .form-wrapper > .material_option_mixing,
.material_editor .form-wrapper > .material_option_layered { position: static !important; left: auto !important; right: auto !important; width: 100% !important; min-width: 0 !important; }
.material_editor .form-wrapper > .material_option_weight { top: 0 !important; }
.material_editor .form-wrapper > .material_option_mixing { top: 78px !important; }
.material_editor .form-wrapper > .material_option_layered { top: 136px !important; }
.material_editor .material_options_heading { white-space: nowrap; }
.material_editor #count_by_weight,
.material_editor #mixing_item,
.material_editor #complex_item { display: block !important; visibility: visible !important; position: static !important; width: 22px !important; height: 22px !important; margin: 0 !important; opacity: 1 !important; accent-color: var(--mixr-accent); }
.material_editor .material_option_weight .onoffswitch,
.material_editor .material_option_mixing .onoffswitch,
.material_editor .material_option_layered .onoffswitch { display: flex !important; align-items: center; width: 32px; height: 58px; margin: 0 !important; }
@media (max-width: 900px) {
	:root { --mixr-page-gutter: 20px; }
	.material_editor .form-wrapper > .material_option_weight,
	.material_editor .form-wrapper > .material_option_mixing,
	.material_editor .form-wrapper > .material_option_layered { grid-column: 1 !important; width: 100% !important; }
}

/* Real options wrapper: all option rows belong to one compact panel. */
.material_editor .form-wrapper > .material_options_panel {
	position: static !important;
	grid-column: 2 !important;
	grid-row: 1 / span 3 !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: max-content !important;
	align-self: start !important;
	padding: 0 !important;
	border: 1px solid #dce7ec !important;
	border-radius: 8px !important;
	background: #fff !important;
	overflow: hidden !important;
}
.material_editor .material_options_panel > .material_option_weight,
.material_editor .material_options_panel > .material_option_mixing,
.material_editor .material_options_panel > .material_option_layered {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-top: 1px solid #e1e9ee !important;
	background: #fff !important;
	box-sizing: border-box !important;
}
.material_editor .material_options_panel > .material_option_weight { border-top: 0 !important; }
.material_editor .material_options_panel .material_options_heading { margin: 0 -16px 0 !important; padding: 16px !important; border-bottom: 1px solid #e1e9ee !important; }
.material_editor .material_options_panel .form-group { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; align-items: center !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; }
.material_editor .material_options_panel .form-group > div { width: auto !important; max-width: none !important; padding: 0 !important; }
.material_editor .material_options_panel .form-group > div:first-child { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; }
.material_editor .material_options_panel .form-group > div:last-child { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; }
.material_editor .material_options_panel .onoffswitch { width: 22px !important; height: 22px !important; margin: 0 !important; }
.material_editor .material_options_panel .onoffswitch-checkbox { position: static !important; display: block !important; width: 22px !important; height: 22px !important; opacity: 1 !important; }
.material_editor .material_options_panel .onoffswitch-label { display: none !important; }
@media (max-width: 900px) {
	.material_editor .form-wrapper > .material_options_panel { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; }
	.material_editor .form-group:has(#specgrav_weight) > .col-lg-9,
	.material_editor .form-group:has(#purchase_quantity) > .col-lg-9 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
	.material_editor .form-group:has(#specgrav_weight) > .col-lg-9 > .col-xs-3:first-child,
	.material_editor .form-group:has(#purchase_quantity) > .col-lg-9 > .col-xs-3:first-child { grid-column: 1; grid-row: 1; width: auto; padding: 0; }
	.material_editor .form-group:has(#specgrav_weight) > .col-lg-9 > .col-xs-3:nth-child(2),
	.material_editor .form-group:has(#purchase_quantity) > .col-lg-9 > .col-xs-3:nth-child(2) { grid-column: 2; grid-row: 1; width: auto; padding: 0; }
	.material_editor .form-group:has(#specgrav_weight) > .col-lg-9 > .col-xs-3:nth-child(3),
	.material_editor .form-group:has(#purchase_quantity) > .col-lg-9 > .col-xs-3:nth-child(3) { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 0; }
	.material_editor .form-group:has(#specgrav_weight) > .col-lg-9 > .col-xs-3:nth-child(4),
	.material_editor .form-group:has(#purchase_quantity) > .col-lg-9 > .col-xs-3:nth-child(4) { grid-column: 1 / -1; grid-row: 3; width: 100%; padding: 0; }
	.material_editor .material_options_panel { margin-bottom: 18px !important; }
	.material_editor .button-center { margin-top: 18px !important; }
}

/* Final row alignment: checkbox on the left, icon and label on the right. */
.material_editor .material_option_weight .form-group,
.material_editor .material_option_mixing .form-group,
.material_editor .material_option_layered .form-group {
	display: grid !important;
	grid-template-columns: 32px minmax(0, 1fr) !important;
	align-items: center !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 0 !important;
}
.material_editor .material_option_weight .form-group > div:first-child,
.material_editor .material_option_mixing .form-group > div:first-child,
.material_editor .material_option_layered .form-group > div:first-child {
	display: flex !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
	align-items: center !important;
	width: auto !important;
	padding: 0 !important;
}
.material_editor .material_option_weight .form-group > div:last-child,
.material_editor .material_option_mixing .form-group > div:last-child,
.material_editor .material_option_layered .form-group > div:last-child {
	display: flex !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-items: center !important;
	width: 32px !important;
	padding: 0 !important;
	order: initial !important;
}
.material_editor .material_option_weight .onoffswitch,
.material_editor .material_option_mixing .onoffswitch,
.material_editor .material_option_layered .onoffswitch { display: block !important; width: 22px !important; height: 22px !important; margin: 0 !important; }
@media (max-width: 900px) {
	.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading),
	.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6,
	.material_editor .form-wrapper > .col-lg-6:has(.material_options_heading) + .col-lg-6 + .col-lg-6 { position: static !important; width: 100% !important; min-height: 0; }
}
.material_editor .form-group:has(#count_by_weight) .control-label:before,
.material_editor .form-group:has(#mixing_item) .control-label:before,
.material_editor .form-group:has(#complex_item) .control-label:before { display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; margin-right: 12px; color: var(--mixr-accent); border-radius: 50%; background: #dff4f6; font-family: "Font Awesome 5 Free"; font-size: 24px; font-weight: 900; }
	.material_editor .button-center { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 10px; width: 100%; margin: 0; padding: 18px; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; text-align: right; }
.material_editor #newmaterial_submit_button,
.material_editor #submitUpdateMaterial { min-width: 150px; background: linear-gradient(145deg, #19aaba, #016178); }
.material_editor .btn-secondary,
.material_editor .button-center .btn-secondary {
	color: var(--mixr-accent-dark);
	border: 1px solid var(--mixr-accent);
	background: #fff;
}
.material_editor .btn-secondary:hover,
.material_editor .button-center .btn-secondary:hover {
	color: var(--mixr-accent-dark);
	border-color: var(--mixr-accent-dark);
	background: #f2fafb;
}
.shop_editor_heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: -8px 0 16px; }
.shop_editor_heading h2 { margin: 0; color: var(--mixr-ink); font-size: 24px; }
.shop_editor_heading p { margin: 3px 0 0; color: var(--mixr-muted); font-size: 16px; }
.shop_editor_actions { display: flex; gap: 8px; }
.shop_editor_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.shop_panel { position: relative; padding: 18px; border: 1px solid #dce7ec; border-top: 3px solid #16adbd; border-radius: 8px; background: rgba(255, 255, 255, .88); box-shadow: 0 8px 20px rgba(23, 33, 43, .05); }
.shop_panel_heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.shop_panel_heading > i { display: grid; place-items: center; width: 34px; height: 34px; color: var(--mixr-accent); border-radius: 8px; background: #dff4f6; font-size: 16px; }
.shop_panel_heading h3 { margin: 0; color: #203849; font-size: 18px; font-weight: 700; }
.shop_panel_heading p { margin: 2px 0 0; color: var(--mixr-muted); font-size: 14px; }
.shop_panel_heading .active_toggle { display: flex; align-items: center; gap: 7px; margin: 0 0 0 auto; color: #4d6170; font-size: 14px; font-weight: 700; }
.shop_panel_heading .active_toggle input { accent-color: var(--mixr-accent); }
.shop_panel label { color: #425565; font-size: 14px; font-weight: 700; }
.shop_panel .form-control { margin-bottom: 13px; }
.shop_panel small { display: block; margin: -6px 0 13px; color: var(--mixr-muted); font-size: 13px; }
.connection_panel .form-control { min-height: 38px; }
.connection_panel select[name="type"] {
	padding-left: 40px;
	background-color: #fff;
	background-image: url("../img/shopify-mark.svg");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 22px 22px;
}
.shop_secret_field { position: relative; }
.shop_secret_field .form-control { padding-right: 38px; }
.shop_secret_field > i { position: absolute; top: 12px; right: 12px; color: #7890a0; }
.sync_choice_grid, .status_checkbox_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sync_choice, .status_checkbox_grid label { position: relative; display: grid; grid-template-columns: 22px 24px 1fr; align-items: center; column-gap: 8px; min-height: 58px; margin: 0; padding: 9px 11px; border: 1px solid #9ad8e0; border-radius: 7px; background: #effbfc; cursor: pointer; }
.sync_choice input { accent-color: var(--mixr-accent); }
.sync_choice input { width: 20px; height: 20px; }
.sync_choice > i { color: var(--mixr-accent); font-size: 17px; text-align: center; }
.sync_choice b { color: #203849; font-size: 15px; }
.sync_choice small { grid-column: 3; margin: 0; font-weight: 400; }
.ready_panel, .mapping_panel { grid-column: 1 / -1; }
.status_checkbox_grid label { grid-template-columns: 20px 1fr; min-height: 46px; border-color: #dce7ec; background: #fff; font-size: 15px; }
.status_checkbox_grid label:has(input:checked) { border-color: #8ed2dc; background: #effbfc; }
.status_checkbox_grid input { accent-color: var(--mixr-accent); }
.mapping_table { margin: 0; border: 1px solid #dce7ec; border-radius: 7px; }
.mapping_table th { padding: 11px 12px; background: #eef4f7; font-size: 13px; }
.mapping_table td { padding: 11px 12px; font-size: 15px; }
.mapping_table td:first-child { width: 55px; text-align: center; }
.mapping_table input { accent-color: var(--mixr-accent); }
.status_pill { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.status_pill.paid { color: #14744e; background: #dff5e8; }
.status_pill.processing { color: #1a65a4; background: #e1efff; }
.status_pill.partial { color: #6e55b2; background: #eee8ff; }
.status_pill.fulfilled { color: #14744e; background: #dff5e8; }
.status_pill.pending { color: #7b6321; background: #fff1c9; }
.table_empty_cell { padding: 38px !important; color: var(--mixr-muted); text-align: center; }
.dataTables_wrapper {
	color: var(--mixr-ink);
	font-size: 14px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	min-height: 42px;
	padding: 2px 0 12px;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--mixr-ink);
	font-weight: 400;
	font-size: 0;
}
.dataTables_wrapper .dataTables_filter label:before {
	content: "\f002";
	position: absolute;
	left: 14px;
	z-index: 1;
	color: #7890a0;
	font-family: "Font Awesome 5 Free";
	font-size: 16px;
	font-weight: 900;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	height: 40px;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #cbd7de;
	border-radius: 8px;
	color: var(--mixr-ink);
	background: #fff;
	box-shadow: none;
	font-size: 14px;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
	border-color: var(--mixr-accent);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(11, 120, 145, .13);
}
.dataTables_wrapper .dataTables_filter input { width: 180px; padding-left: 40px; }
.dataTables_wrapper .dataTables_filter input::placeholder { color: #7890a0; opacity: 1; }
.dataTables_wrapper .dataTables_info { padding-top: 15px; color: var(--mixr-muted); }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .table_bottom_controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding-top: 10px;
}
.dataTables_wrapper .table_bottom_length { order: 1; padding: 0; }
.dataTables_wrapper .table_bottom_controls .dataTables_paginate { order: 2; padding-top: 0; }
.dataTables_wrapper .table_bottom_length label { font-size: 0; }
.dataTables_wrapper .table_bottom_length label:before {
	content: "Rows per page:";
	color: var(--mixr-muted);
	font-size: 13px;
}
.dataTables_wrapper .table_bottom_length select { min-width: 48px; margin-left: 8px; }
.dataTables_wrapper .dataTables_paginate .pagination { gap: 6px; }
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
	min-width: 40px;
	height: 38px;
	padding: 8px 11px;
	border: 1px solid var(--mixr-line);
	border-radius: 7px;
	color: var(--mixr-accent);
	background: #fff;
	text-align: center;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
	border-color: var(--mixr-accent);
	color: #fff;
	background: var(--mixr-accent);
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
	color: #9aa8b1;
	background: #f5f7f8;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	display: inline-block;
	min-width: 40px;
	height: 38px;
	margin-left: 6px;
	padding: 8px 11px;
	border: 1px solid var(--mixr-line);
	border-radius: 7px;
	color: var(--mixr-accent) !important;
	background: #fff;
	text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	border-color: var(--mixr-accent);
	color: #fff !important;
	background: var(--mixr-accent);
}
.alert { margin-bottom: 20px; border: 0; border-left: 4px solid currentColor; border-radius: 7px; }
.alert-success { color: #237a62; background: #e9f6f0; }
.alert-warning { color: #906b21; background: #fff7df; }
.alert-danger { color: #b54b4b; background: #fbecec; }

.home_menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home_menu .menu_item { display: flex; align-items: center; min-height: 76px; gap: 10px; padding: 15px 16px; color: var(--mixr-ink); border: 1px solid var(--mixr-line); border-radius: 8px; background: #fff; box-shadow: var(--mixr-shadow); font-size: 14px; font-weight: 600; }
.home_menu .menu_item i { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; color: var(--mixr-accent); border-radius: 8px; background: #e7f3f5; }
.home_menu .menu_item:hover, .home_menu .menu_item.current { border-color: rgba(11, 120, 145, .55); transform: translateY(-2px); }
.settings_group { margin-bottom: 30px; }
.settings_group_header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 12px;
}
.settings_group_header > i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--mixr-accent);
	border-radius: 9px;
	background: #dff4f6;
	font-size: 22px;
}
.settings_group_header h2 {
	margin: 0;
	color: var(--mixr-ink);
	font-size: 20px;
	font-weight: 700;
}
.settings_group_header p {
	margin: 1px 0 0;
	color: var(--mixr-muted);
	font-size: 13px;
}
.settings_cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.settings_card_item { min-width: 0; }
.settings_cards .menu_item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	height: 220px;
	overflow: hidden;
	padding: 26px 20px 20px;
	color: #fff;
	border: 0;
	border-top: 4px solid #20c5d1;
	border-radius: 8px;
	background: linear-gradient(145deg, #19aaba, #016178);
	box-shadow: 0 12px 24px rgba(7, 88, 107, .16);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.settings_cards .menu_item:after {
	position: absolute;
	top: 54px;
	right: 18px;
	color: rgba(255, 255, 255, .12);
	font-family: "Font Awesome 5 Free";
	font-size: 112px;
	font-weight: 900;
	line-height: 1;
}
.settings_cards a[href="/purchasing"]:after { content: "\f0d1"; }
.settings_cards a[href="/mixing"]:after { content: "\f0c3"; }
.settings_cards a[href="/receiving"]:after { content: "\f466"; }
.settings_cards a[href="/counting"]:after { content: "\f1ec"; }
.settings_cards a[href="/lots"]:after { content: "\f02a"; }
.settings_cards a[href="/settings"]:after { content: "\f013"; }
.settings_cards a[href="/logout"]:after { content: "\f2f5"; }
.settings_cards a[href="/suppliers"]:after { content: "\f0d1"; }
.settings_cards a[href="/materials"]:after { content: "\f5d1"; }
.settings_cards a[href="/recipes"]:after { content: "\f02d"; }
.settings_cards a[href="/labels"]:after { content: "\f02f"; }
.settings_cards a[href="/lotlabels"]:after,
.settings_cards a[href="/batchlabels"]:after { content: "\f02b"; }
.settings_cards a[href="/containers"]:after { content: "\f1b3"; }
.settings_cards a[href="/products"]:after { content: "\f466"; }
.settings_cards a[href="/customers"]:after,
.settings_cards a[href="/users"]:after { content: "\f0c0"; }
.settings_cards a[href="/addresses"]:after { content: "\f3c5"; }
.settings_cards a[href="/orders"]:after { content: "\f46d"; }
.settings_cards .menu_item:hover,
.settings_cards .menu_item.current {
	color: #fff;
	background: linear-gradient(145deg, #12b5c5, #087e96);
	box-shadow: 0 16px 30px rgba(7, 88, 107, .25);
	filter: saturate(1.08);
	transform: translateY(-3px);
}
.settings_cards .menu_item > i {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 0 10px;
	color: #fff;
	font-size: 64px;
}
.settings_cards .menu_item strong {
	position: relative;
	z-index: 1;
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 600;
}
.settings_cards .menu_item > span:not(.settings_card_arrow) {
	position: relative;
	z-index: 1;
	max-width: 78%;
	color: rgba(255, 255, 255, .9);
	font-size: 16px;
	line-height: 1.35;
}
.settings_cards .settings_card_arrow {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .16);
}
.settings_cards .settings_card_arrow i { margin: 0; color: #fff; font-size: 13px; }
footer { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; min-height: 44px; padding: 12px 32px; color: #71808b; border-top: 1px solid var(--mixr-line); background: rgba(255, 255, 255, .9); font-size: 12px; }
#loading {
	display: none !important;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	background: rgba(23, 33, 43, .42) !important;
}
#loading.loading_active { display: flex !important; }
.login_wrapper { position: static; width: min(100%, 420px); height: auto; margin: 0 auto; }
.login_wrapper .card { padding: 32px; }
.login_wrapper .logo { margin-bottom: 22px; text-align: center; }
.login_wrapper .logo img { display: block; width: 170px; max-width: 100%; height: auto; max-height: none; margin: 0 auto; }
.login_wrapper .card-body { padding: 0; }
.login_field { margin-bottom: 18px; }
.login_field label {
	display: block;
	margin: 0 0 7px;
	color: #20364c;
	font-size: 14px;
	font-weight: 700;
}
.login_input_wrap { position: relative; }
.login_input_wrap > i {
	position: absolute;
	top: 50%;
	left: 15px;
	z-index: 1;
	color: #71879a;
	font-size: 15px;
	transform: translateY(-50%);
}
.login_input_wrap .form-control {
	height: 48px;
	padding: 10px 44px 10px 42px;
	border: 1px solid #d3e0e8;
	border-radius: 8px;
	background: rgba(255, 255, 255, .9);
	font-size: 15px;
}
.login_input_wrap .form-control:focus { border-color: #12aabd; box-shadow: 0 0 0 3px rgba(18, 170, 189, .14); }
.password_toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0;
	color: #71879a;
	border: 0;
	background: transparent;
	transform: translateY(-50%);
}
.password_toggle:hover { color: var(--mixr-accent); box-shadow: none; transform: translateY(-50%); }
.login_wrapper .login_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(145deg, #19aaba, #016178);
	box-shadow: 0 8px 18px rgba(7, 88, 107, .2);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
}
.login_wrapper .login_btn:hover { background: linear-gradient(145deg, #21b8c6, #08758a); }
.login_recovery_link { margin-top: 18px; text-align: center; font-size: 14px; }
.password_reset_title { margin: 0 0 20px; color: var(--mixr-ink); font-size: 22px; font-weight: 700; }

@media (max-width: 767px) {
	[id^="new"][id$="Form"] .button-center:has(.btn-secondary) { justify-content: space-between !important; }
	[id^="new"][id$="Form"] .button-center:has(.btn-secondary) > .btn { flex: 0 0 calc(50% - 15px); width: 100%; margin: 0 7.5px; padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 900px) {
	nav.menu { width: 100vw; height: calc(100vh - 68px); }
	main { padding: 28px 20px 48px; }
	.material_editor .form-wrapper { grid-template-columns: 1fr; }
	.material_editor .form-wrapper > .col-lg-6:nth-child(6),
	.material_editor .form-wrapper > .col-lg-6:nth-child(7),
	.material_editor .form-wrapper > .col-lg-6:nth-child(8) { position: static; grid-column: 1; width: 100%; }
}
@media (min-width: 901px) {
	main.push { margin-left: 236px; }
	footer.push { left: 236px; }
}
@media (max-width: 560px) {
	:root { --mixr-page-gutter: 12px; }
	header { height: 60px; padding: 0 14px; }
	header .logo img { max-width: 94px; }
	nav.menu { top: 60px; height: calc(100vh - 60px); }
	main { margin-top: 60px; padding: 22px 12px 58px; }
	.home_menu { grid-template-columns: 1fr; }
	.settings_cards { grid-template-columns: 1fr; }
	.settings_page_header { align-items: flex-start; flex-wrap: wrap; }
	.settings_search { width: 100%; margin: 8px 0 0 66px; }
	.tableTopButtons { justify-content: flex-start; flex-wrap: wrap; min-height: 0; margin-top: 0; }
	.table_actions { flex-wrap: wrap; }
	.table_tabs { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
	.shop_editor_heading { align-items: flex-start; flex-direction: column; }
	.shop_editor_actions { width: 100%; }
	.shop_editor_actions .btn { flex: 1; }
	.shop_editor_grid { grid-template-columns: 1fr; }
	.ready_panel, .mapping_panel { grid-column: auto; }
	.material_editor .form-wrapper { grid-template-columns: 1fr; }
	.material_editor .form-wrapper > .col-lg-6:nth-child(6),
	.material_editor .form-wrapper > .col-lg-6:nth-child(7),
	.material_editor .form-wrapper > .col-lg-6:nth-child(8) { position: static; width: 100%; }
	.material_editor .form-wrapper > .col-lg-6:nth-child(6),
	.material_editor .form-wrapper > .col-lg-6:nth-child(7),
	.material_editor .form-wrapper > .col-lg-6:nth-child(8) { grid-column: 1; }
	table { display: block; overflow-x: auto; white-space: nowrap; }
	.recipe_details_panel .form-wrapper { display: block; }
	.recipe_details_panel .form-group { margin-bottom: 16px; }
	.recipe_details_panel .form-group > .col-lg-3,
	.recipe_details_panel .form-group > .col-lg-9 { width: 100%; max-width: none; padding: 0; }
	.recipe_details_panel .form-group > .col-lg-9 > .col-xs-6 { width: 100%; padding: 0; }
	.recipe_add_panel table { display: table; width: 100%; white-space: normal; }
	.recipe_add_panel #row_add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
	.recipe_add_panel #row_add > td { display: block; width: auto; padding: 0; }
	.recipe_add_panel #row_add > .recipe_add_ingredient_cell { grid-column: 1 / -1; }
	.recipe_add_panel #row_add > .recipe_add_quantity_cell { grid-column: 1; }
	.recipe_add_panel #row_add > .recipe_add_unit_cell { grid-column: 2; }
	.recipe_add_panel #row_add > .recipe_add_percent_cell { display: none; }
	.recipe_add_panel #row_add > .recipe_add_action_cell { grid-column: 1 / -1; text-align: right; }
	.recipe_add_panel .recipe_add_action_cell .btn { top: 0; }
	.recipe_add_panel #row_add td label { display: block; margin: 0 0 5px; color: #425565; font-size: 13px; font-weight: 700; }
}
@media (min-width: 561px) and (max-width: 1000px) {
	.settings_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Material options use the actual checkbox IDs as stable row anchors. */
.material_editor .form-wrapper > div:has(#count_by_weight),
.material_editor .form-wrapper > div:has(#mixing_item),
.material_editor .form-wrapper > div:has(#complex_item) {
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	grid-column: 2 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid #dce7ec !important;
	border-top: 0 !important;
	background: #fff !important;
	box-sizing: border-box;
}
.material_editor .form-wrapper > div:has(#count_by_weight) { grid-row: 1 !important; border-top: 1px solid #dce7ec !important; border-radius: 8px 8px 0 0; }
.material_editor .form-wrapper > div:has(#mixing_item) { grid-row: 2 !important; }
.material_editor .form-wrapper > div:has(#complex_item) { grid-row: 3 !important; border-radius: 0 0 8px 8px; }
.material_editor .form-wrapper > div:has(#count_by_weight) .material_options_heading { display: block; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group,
.material_editor .form-wrapper > div:has(#complex_item) .form-group { display: flex; align-items: center; height: 58px; min-height: 58px; margin: 0; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div { width: auto; max-width: none; padding: 0; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div:first-child,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div:first-child,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div:first-child { flex: 1; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div:last-child,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div:last-child,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div:last-child { order: -1; flex: 0 0 32px; }

/* Compact right-side options panel, independent of left-column row heights. */
.material_editor .form-wrapper > div:has(#count_by_weight),
.material_editor .form-wrapper > div:has(#mixing_item),
.material_editor .form-wrapper > div:has(#complex_item) { position: absolute !important; right: 0 !important; width: calc((100% - 18px) / 3) !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; }
.material_editor .form-wrapper > div:has(#count_by_weight) { top: 0 !important; }
.material_editor .form-wrapper > div:has(#mixing_item) { top: 78px !important; }
.material_editor .form-wrapper > div:has(#complex_item) { top: 136px !important; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group,
.material_editor .form-wrapper > div:has(#complex_item) .form-group { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; height: 58px; min-height: 58px; margin: 0; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div { width: auto; max-width: none; padding: 0; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div:first-child,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div:first-child,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div:first-child { grid-column: 2; grid-row: 1; display: flex; align-items: center; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group > div:last-child,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group > div:last-child,
.material_editor .form-wrapper > div:has(#complex_item) .form-group > div:last-child { grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.material_editor .form-wrapper > div:has(#count_by_weight) .onoffswitch,
.material_editor .form-wrapper > div:has(#mixing_item) .onoffswitch,
.material_editor .form-wrapper > div:has(#complex_item) .onoffswitch { width: 22px; height: 22px; margin: 0; }
@media (max-width: 900px) {
	.material_editor .form-wrapper > div:has(#count_by_weight),
	.material_editor .form-wrapper > div:has(#mixing_item),
	.material_editor .form-wrapper > div:has(#complex_item) { position: static !important; top: auto !important; right: auto !important; width: 100% !important; }
}
@media (max-width: 900px) {
	.material_editor .form-wrapper > div:has(#count_by_weight),
	.material_editor .form-wrapper > div:has(#mixing_item),
	.material_editor .form-wrapper > div:has(#complex_item) { grid-column: 1 !important; grid-row: auto !important; }
}

body:not(.login) main .new_object_header,
body:not(.login) main .recipe_page_header,
body:not(.login) main .page_header_icon,
body:not(.login) main .material_editor_title_icon { display: none; }
body:not(.login) main .card:not(.material_editor),
body:not(.login) main .shop_panel,
body:not(.login) main .recipe_ingredients_group {
	border: 1px solid var(--mixr-line);
	border-top: 1px solid var(--mixr-line) !important;
	border-radius: var(--mixr-section-radius);
	background: #fff;
	box-shadow: 0 3px 12px rgba(23, 33, 43, .035);
}
body:not(.login) main .recipe_ingredients_group > .card { border: 0 !important; box-shadow: none; }
body:not(.login) main .table_empty_state:before { display: none; }
body:not(.login) main .table_empty_state { border-radius: var(--mixr-section-radius); }
.app_layout > .container > * { min-width: 0; }
.app_layout .tableTopButtons,
.app_layout .mixing_actions,
.app_layout .shop_links_toolbar { min-height: 0; margin-top: 0; flex-wrap: wrap; }
.app_layout .tableTopButtons { padding-bottom: 16px; }
.app_layout .table_actions { flex-wrap: wrap; }
.app_layout .new_secondary_panel { border: 1px solid var(--mixr-line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(23, 33, 43, .035); }
.app_layout .card h2.header { margin-bottom: 18px; }
.app_layout .card .header i { font-size: 17px; }
.reporting_page main.app_layout { margin-top: 0; }
.reporting_page .slide_wrapper { max-width: 100%; }
body:not(.login) main h2,
body:not(.login) main h3,
body:not(.login) main h1.title-card { font-size: 18px; font-weight: 700; line-height: 1.35; }
body:not(.login) main .shop_panel_heading,
body:not(.login) main .settings_group_header { align-items: flex-start; gap: 10px; margin-bottom: 18px; }
body:not(.login) main .shop_panel_heading > i,
body:not(.login) main .settings_group_header > i {
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	height: auto;
	margin-top: 3px;
	border-radius: 0;
	color: #748591;
	background: transparent;
	font-size: 17px;
	line-height: 1.35;
}
body:not(.login) main h2 i,
body:not(.login) main h3 i,
body:not(.login) main h1.title-card i { color: #748591; background: transparent; }
.shop_panel_heading > div { min-width: 0; }
.shop_panel_heading p,
.settings_group_header p { margin: 4px 0 0; color: var(--mixr-muted); font-size: 13px; line-height: 1.45; }
.shop_editor_heading { align-items: center; gap: 16px; margin: 0 0 18px; }
.shop_editor_heading p { font-size: 13px; }
.shop_editor_actions,
.form_actions,
.recipe_footer,
.new_object_footer,
.form_action_bar { flex-wrap: wrap; }
.shop_editor_actions { justify-content: flex-end; }
.shop_editor_grid > * { min-width: 0; }
.shop_connection_controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.shop_connection_controls .btn { max-width: 100%; white-space: normal; }
.shop_api_version { display: flex; flex-direction: column; gap: 6px; }
.shop_api_version label { margin: 0; }
.shop_api_version .form-control { margin-bottom: 0; }
.shop_callback_field { margin-top: 16px; }
.shop_callback_field .form-control { margin-bottom: 0; font-size: 13px; }
.shop_panel label { display: block; margin-bottom: 6px; }
.shop_panel .sync_choice,
.shop_panel .status_checkbox_grid label { display: grid; margin-bottom: 0; }
.shop_panel_heading .active_toggle { flex-shrink: 0; }
.shop_panel .form-control { width: 100%; min-width: 0; }
.material_editor_heading { min-height: 0; padding: 0; }
.material_editor_heading h2 { font-size: 18px; }
.material_editor_heading p { font-size: 13px; }
.material_editor .form-wrapper > .col-xs-12:nth-child(1):before,
.material_editor .form-wrapper > .col-lg-12:nth-child(1):before { border-top: 0; }
.settings_page_header { justify-content: flex-end; margin-bottom: 20px; }
.alert-success { border: 1px solid #cce8d1; color: #28743c; background: #edf9ef; border-radius: 8px; }
.alert-success > i { margin-right: 8px; }
.alert-success:before { content: "\f058"; margin-right: 8px; font-family: "Font Awesome 5 Free"; font-weight: 900; }
@media (max-width: 760px) {
	.shop_editor_grid { grid-template-columns: minmax(0, 1fr); }
	.ready_panel, .mapping_panel { grid-column: auto; }
	.shop_editor_heading { align-items: flex-start; flex-wrap: wrap; }
	.shop_editor_actions { width: 100%; }
	.shop_editor_actions .btn { flex: 1; min-width: 0; white-space: normal; }
	.settings_search { width: 100%; margin: 0; }
	.shop_panel { padding: 16px; }
	.shop_panel_heading { flex-wrap: wrap; }
}
@media (max-width: 380px) {
	.sync_choice_grid, .status_checkbox_grid { grid-template-columns: minmax(0, 1fr); }
}

/* Last word on the desktop options geometry: bounded to the editor, never wider. */
.material_editor .form-wrapper > div:has(#count_by_weight),
.material_editor .form-wrapper > div:has(#mixing_item),
.material_editor .form-wrapper > div:has(#complex_item) {
	position: absolute !important;
	left: calc(66.6667% + 9px) !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
.material_editor .form-wrapper > div:has(#count_by_weight) { top: 0 !important; }
.material_editor .form-wrapper > div:has(#mixing_item) { top: 78px !important; }
.material_editor .form-wrapper > div:has(#complex_item) { top: 136px !important; }
.material_editor .form-wrapper > div:has(#count_by_weight) .form-group,
.material_editor .form-wrapper > div:has(#mixing_item) .form-group,
.material_editor .form-wrapper > div:has(#complex_item) .form-group {
	display: grid !important;
	grid-template-columns: 32px minmax(0, 1fr) !important;
	align-items: center !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 0 !important;
}
@media (max-width: 900px) {
	.material_editor .form-wrapper > div:has(#count_by_weight),
	.material_editor .form-wrapper > div:has(#mixing_item),
	.material_editor .form-wrapper > div:has(#complex_item) {
		position: static !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
	}
}

/* Definitive real-wrapper layout, after all legacy overrides. */
.material_editor .form-wrapper > .material_options_panel {
	position: static !important;
	grid-column: 2 !important;
	grid-row: 1 / span 3 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: max-content !important;
	align-self: start !important;
	padding: 0 !important;
	border: 1px solid #dce7ec !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #fff !important;
	transform: translateY(-138px);
}
.material_editor .form-wrapper > .material_options_panel > .material_option_weight,
.material_editor .form-wrapper > .material_options_panel > .material_option_mixing,
.material_editor .form-wrapper > .material_options_panel > .material_option_layered {
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-top: 1px solid #e1e9ee !important;
	background: #fff !important;
	box-sizing: border-box !important;
}
.material_editor .form-wrapper > .material_options_panel > .material_option_weight { border-top: 0 !important; }
.material_editor .material_options_panel .material_options_heading { margin: 0 -16px !important; padding: 16px !important; border-bottom: 1px solid #e1e9ee !important; white-space: nowrap; }
.material_editor .material_options_panel .form-group { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; align-items: center !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; }
.material_editor .material_options_panel .form-group > div:first-child { grid-column: 2 !important; grid-row: 1 !important; width: auto !important; padding: 0 !important; }
.material_editor .material_options_panel .form-group > div:last-child { grid-column: 1 !important; grid-row: 1 !important; width: 32px !important; padding: 0 !important; }
.material_editor .material_options_panel .onoffswitch { width: 22px !important; height: 22px !important; margin: 0 !important; }
.material_editor .material_options_panel .onoffswitch-checkbox { position: static !important; display: block !important; width: 22px !important; height: 22px !important; opacity: 1 !important; }
.material_editor .material_options_panel .onoffswitch-label { display: none !important; }
@media (max-width: 900px) {
	.material_editor .form-wrapper > .material_options_panel { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; }
	.material_editor .form-wrapper > .material_options_panel { transform: none; }
}