/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= stub 'labels/size_8x5'
 */

@font-face {
   font-family: InterVariable;
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url("/_css/_fonts/InterVariable.woff2") format("woff2");
 }
 
 @font-face {
   font-family: InterVariable;
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url("/_css/_fonts/InterVariable-Italic.woff2") format("woff2");
 }

/* @font-face {
   font-family: 'Inter var';
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url("/_css/_fonts/Inter.var.woff2") format('woff2');
   font-named-instance: 'Regular';
 }
 
 @font-face {
   font-family: 'Inter var';
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url("font-files/Inter-italic.var.woff2") format('woff2');
   font-named-instance: 'Italic';
 } */
 
@-ms-viewport {
	width: device-width;
}
   
:root *, :root *::before, :root *::after {
	box-sizing: border-box;
}
 
html {
	--textColor: rgb(65,69,82);
	--textColorDark: rgb(26,27,37);
	--textColorLight: rgb(104,115,133);
	
	--colorBlueMSBC: rgb(0,74,124);
	--colorWhite: rgb(255,255,255);
	
	--flashTextColor: rgb(84,89,105);
	--flashBackground: rgb(235,238,241);
	--flashBorderColor: rgb(104,115,133);
	
	--flashNoticeTextColor: rgb(9,105,218);
	/* --flashNoticeBackground: rgb(221,244,255); */
	--flashNoticeBackground: rgb(241,248,254);
	/* --flashNoticeBorderColor: rgb(168,216,254); */
	--flashNoticeBorderColor: rgb(180,216,254);
	/* --flashNoticeBorderColor: rgb(216,223,228); */
	
	/* --flashAlarmTextColor: rgb(235,12,0); */
	--flashAlarmTextColor: rgb(245,35,75);
	--flashAlarmBackground: rgba(255,65,105,0.1);
	--flashAlarmBorderColor: rgb(255,65,105);
	
	--flashAlertTextColor: rgb(168,44,0);
	--flashAlertBackground: rgb(252,237,185);
	--flashAlertBorderColor: rgb(237,103,4);
	
	--flashSuccessTextColor: rgb(0,105,8);
	--flashSuccessBackground: rgb(215,247,194);
	
	--inputWidthStandard: 128rem;
	--inputWidthMedium: 64rem;
	--inputWidthFull: 100%;
	
	--inputWidthPackageCapacity: 30rem;
	
	--rulerColorHorizontal: rgb(228,228,228);
	--rulerColorHorizontalDark: rgb(216,216,216);
	--rulerColorHorizontalLight: rgb(236,236,236);
	
	--rulerColorVertical: rgb(220,220,220);
	
	--actionColor: rgb(0,113,227);
	--actionColorLink: rgb(0,102,204);
	--actionColorButtonSecondary: rgb(216,216,216);
	
	--formDisabledBackground: rgb(249,249,249);
	
	
	height: 100dvh;
	
	margin: 0;
	padding: 0;
	
	font-family: InterVariable, system-ui, sans-serif;
	font-size: 4px;
	font-weight: 400;
	color: var(--textColor);
	letter-spacing: -0.011em;
	
	text-size-adjust: none;
	
	/* background: rgb(246,248,250);
	background: rgb(246,249,251); */
	
	/* background: rgb(242,242,246); */
	background: rgb(249,249,249);
	
	scroll-behavior: smooth;
	
	/* -webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale; */
}

body {
	margin: 0;
	padding: 0;
}
body.temp_app_nav_collapsed {
	/* a placeholder class for a temp fix for the UI. */
}

strong {
	font-weight: 600;
	/* letter-spacing: 0.016em; */
}

a {
	color: var(--actionColorLink);
	text-decoration: none;
}

.spacer {
	height: 8rem;
}
form .spacer {
	height: 12rem;
}

.capitalized {
	text-transform: capitalize;
}

.hide {
	display: none !important;
}

sup {
	margin: 0 0 0 1.25rem;
	
	font-size: 0.6em;
	font-weight: 500;
}

.no_results {
	width: 100%;
	
	margin: 4rem 0 0 0;
	padding: 4rem;
	
	color: var(--textColorDark);
	text-align: center;
	
	background: var(--flashBackground);
	background: rgb(236,239,244);
	background: rgba(240,240,240,0.8);
	
	
	border-radius: 1.5rem;
	
}

p + br, div + br {
	display: none;
}

.number_tabular {
	font-variant-numeric: lining-nums tabular-nums;
}

/* .temp_po_date {
	font-feature-settings: "tnum" on; 
	white-space-collapse: collapse;
} */

/* ---- Universal Utility Elements */

.block_hidden {
	display: none !important;
	/* visibility: hidden; */
	/* This is used to hide elements either by default or based on a change somewhere else in a view. */
}

.text_uppercase {
	text-transform: uppercase;
}

/* ---- Standard Container Widths ---- */

.container_width_half {
	width: var(--inputWidthMedium);
}

/* ---- Form Elements Styles ---- */

form * {
	-webkit-appearance: none;
	appearance: none;
	line-height: calc(3px + 2ex + 3px);
	outline: none;
}

label {
	width: 100%;
	
	font-size: 3.5rem;
	color: var(--textColorDark);
	letter-spacing: -0.021em;
	
	display: block;
}

input[type="search"] {
	width: 100%;
	
	padding: 0 2rem 0 7rem;
	
	font-family: inherit;
	font-size: 3rem;
	color: var(--textColor);
	line-height: 7.5rem;
	
	background-image: url("/_img/icon.search.svg");
	background-size: auto;
	background-repeat: no-repeat;
	background-position: 8px center;
	
	border: 0.25rem rgb(224,230,248) solid;
	border: 0.25rem var(--rulerColorHorizontalDark) solid;
	border-radius: 6rem;
	
	outline: none;
}
input[type="search"]::placeholder {
	color: var(--textColorLight);
}
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	
	width: 3.5rem;
	height: 3.5rem;
	
	background-image: url("/_img/icon.form.cancel.svg");
	background-size: 3.5rem 3.5rem;
	background-repeat: no-repeat;
	background-position: center center;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="date"], textarea, .redactor-in {
	width: 100%;
	max-width: var(--inputWidthStandard);
	
	padding: 1rem 3rem;
	
	font-family: inherit;
	font-size: 3.5rem;
	color: var(--textColor);
	
	border: 0.25rem var(--rulerColorHorizontalDark) solid;
	border-radius: 1rem;
}
/* input[type="text"]::placeholder, textarea::placeholder, .redactor-in::placeholder {
	color: var(--textColorLight);
} */

input[type="text"], input[type="email"] {
	line-height: 6rem;
}

/* input[type="date"] {
	font-feature-settings: "ss03" on, "tnum" off;
} */

textarea, .redactor-in {
	min-height: 24rem;
	
	padding: 1.25rem 3rem;
}

select {
	width: 130%;
	max-width: var(--inputWidthStandard);
	
	padding: 1rem 3rem;
	
	font-family: inherit;
	font-size: 3.5rem;
	color: var(--textColor);
	line-height: 6rem;
	
	background: var(--colorWhite);
	background-image: url("/_img/icon.select_menu.svg");
	background-size: 3rem;
	background-repeat: no-repeat;
	background-position: calc(100% - 2rem) center;
	
	
	border: 0.25rem rgb(217,217,217) solid;
	border-radius: 1rem;
	
	box-shadow: 0 0.25rem 2px 0 rgba(0,0,0,0.06);
}
select:disabled {
	color: rgb(192,192,192);
	background: var(--formDisabledBackground);
}

input.input_width_half, textarea.input_width_half, select.input_width_half {
	width: var(--inputWidthMedium);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, select:focus, textarea:focus, .redactor-in:focus {
	border: 0.25rem var(--actionColor) solid;
	box-shadow: 0 0 0 0.25rem var(--actionColor);
}

/* !!! Temporary fix! */
input[type="number"].percentage {
	width: calc(var(--inputWidthMedium) / 2 + 2rem);
	
	margin: 0 2rem 0 0;
	
	text-align: right;
}

select.unit_of_measure {
	width: var(--inputWidthPackageCapacity);
}

/* ----------------------------- */
/* 		FORM WIDGET STYLES		 */
/* ----------------------------- */


/* ---- Switch Toggle ---- */

.switch_toggle {
	position: relative;
	
	width: 12rem;
	height: 6rem;
	
	overflow: hidden;
}

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

.switch_toggle .switch_box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	padding: 0.75rem;
	
	cursor: pointer;
	
	background: rgb(233,233,234);
	
	border-radius: 5rem;

	transition: .2s;
}

.switch_toggle .switch_box:before {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	
	width: 4.5rem;
	height: 4.5rem;
		
	background: var(--colorWhite);
	
	border-radius: 50%;
	
	box-shadow: 0.25rem 0.25rem 4px 0 rgba(0,0,0,0.08);
	
	content: "";
	
	transition: .2s;
}

.switch_toggle input:checked + .switch_box {
	background: rgb(101,196,102);
}
.switch_toggle input:checked + .switch_box:before {
	box-shadow: none;
	
	transform: translateX(6rem);
}

/* ---- Switch Checkbox ---- */

/* ORIGINAL STUFF THAT DOES NOT WORK IN FIREFOX — GO BACK TO THIS AFTER FIREFOX IMPLEMENTS :has FEATURE !!! */
/* .switch_checkbox {
	display: grid;
	grid-template-columns: 4rem 1fr;
	grid-template-rows: auto;
	gap: 3rem;
}

.switch_checkbox .checkmark input {
	width: 0;
	height: 0;
	
	opacity: 0;
}
.switch_checkbox .checkmark {
	width: 4rem;
	height: 4rem;
	
	background-image: url("/_img/icon.checkbox.off.svg");
	background-repeat: no-repeat;
}
.switch_checkbox:has(input:checked) .checkmark {
	background-image: url("/_img/icon.checkbox.on.svg");
	background-repeat: no-repeat;
}

.switch_checkbox .label_box {
	line-height: 4rem;
} */

.switch_checkbox {
	display: grid;
	grid-template-columns: 0rem 4rem 1fr;
	grid-template-rows: auto;
	gap: 0;
}

.switch_checkbox input {
	width: 0;
	height: 0;
	
	opacity: 0;
}
.switch_checkbox .checkmark {
	width: 4rem;
	height: 4rem;
	
	background-image: url("/_img/icon.checkbox.off.svg");
	background-repeat: no-repeat;
}
.switch_checkbox input:checked + .checkmark {
	background-image: url("/_img/icon.checkbox.on.svg");
	background-repeat: no-repeat;
}

.switch_checkbox .label_box {
	margin-left: 3rem;
	line-height: 4rem;
}

/* ---- Form Buttons Styles ---- */

.action_buttons {
	margin: 8rem 0 0 0;
	padding: 6rem 0 0 0;
	
	text-align: center;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 4rem;
	justify-items: end;
	align-items: center;
	
	/* border-top: 0.25rem rgb(235,238,241) solid; */
	border-top: 0.25rem var(--rulerColorHorizontal) solid;
}

a.button_cancel {
	min-width: 20rem;
	
	padding: 0 3rem;
	
	font-weight: 360;
	color: var(--textColor);
	line-height: 7.5rem;
	
	display: block;
	
	background: var(--colorWhite);
	
	/* border: 0.25rem rgb(222,223,225) solid; */
	border: 0.25rem var(--actionColorButtonSecondary) solid;
	border-radius: 1.25rem;
	
	/* box-shadow: 0 0.25rem 2px 0 rgba(0,0,0,0.06); */
}

input[type="submit"].button_save {
	min-width: 20rem;
	
	padding: 0 3rem;
	
	font-weight: 360;
	font-size: 3.5rem;
	color: var(--colorWhite);
	line-height: 8rem;
	
	background: var(--colorBlueMSBC);
	
	border: 0;
	
	border-radius: 1.25rem;
}

/* ---- Flash Message Elements ---- */

.flash {
	width: 100%;
	padding: 16px 24px;
	
	font-size: 3.5rem;
	font-weight: 400;
	color: var(--flashTextColor);
	text-align: center;
	line-height: 4rem;
	
	background: var(--flashBackground);
	
	border-radius: 8px;
}

.flash.alert {
	
}

.flash.success {
	color: var(--flashSuccessTextColor);
	background: var(--flashSuccessBackground);
}

.flash.notice {
	color: var(--flashNoticeTextColor);
	background: var(--flashNoticeBackground);
}

/* ---- Inline Message Elements ---- */

.message {
	width: 100%;
	
	margin: 6rem 0;
	padding: 1.5rem 3rem;
	
	text-align: center;
	
	border-radius: 1.25rem;
}

.message.notice {
	color: var(--colorBlueMSBC);
	background: var(--flashNoticeBackground);
	border: 0.25rem var(--flashNoticeBorderColor) solid;
}

.message.form {
	max-width: 182rem;
	
	margin-top: 0;
}

/* ---- Badge UI Elements ---- */

.badge {
	padding: 0 2rem;
	
	font-size: 2.75rem;
	font-weight: 500;
	letter-spacing: 0.032em;
	line-height: 4rem;
	
	display: inline-block;
	
	border-radius: 1rem;
}

.badge.alert {
	color: var(--flashAlertTextColor);
	
	background: var(--flashAlertBackground);
}

/* Special setting for the ingredient detail view for ingredients with allergens. */
.metadata:has(div.item > span):has(.alert) span {
	min-width: 24rem;
}

.badge.medium {
	margin: 0.75rem 0;
	padding: 0 4rem;
	
	font-size: 3.5rem;
	font-weight: 500;
	letter-spacing: 0.032em;
	line-height: 7rem;
	
	border-radius: 200rem;
}
.badge.alert.medium.allergens_plus {

	color: var(--colorWhite);
	
	background: #003366;
}

.badge_allergen {
	margin: 0;
	padding: 0 3rem;
	
	color: rgb(255,255,255);
	line-height: 6rem;
	
	display: inline-block;
	
	border-radius: 1.25rem;
}

.badge_allergen.eggs {
	color: var(--textColorDark);
	background: rgb(166,166,166);
}

.badge_allergen.fish {
	background: rgb(112,48,160);
}

.badge_allergen.milk {
	background: rgb(0,176,80);
}

.badge_allergen.sesame {
	background: rgb(0,0,0);
}

.badge_allergen.mixed_allergens {
	background: rgb(0,112,192);
}

.badge_allergen.soy {
	color: var(--textColorDark);
	background: rgb(255,255,0);
}

.badge_allergen.tree_nuts {
	color: var(--textColorDark);
	background: rgb(255,140,0);
}

.badge_allergen.wheat {
	background: rgb(255,0,0);
}

/* ------------------------- */
/* 		ACCESS STYLES		 */
/* ------------------------- */

/* Use classes on BODY for more consistent app routing. */

body.auth {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

body.auth {
	height: 100%;
}

body.auth .auth_container {
	width: 100%;
	max-width: 512px;
	height: 100%;
	
	padding: 64px;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	background: rgba(255,255,255);
}

body.auth .auth_container form {
	width: 100%;
	
	display: grid;
	grod-template-columns: 1fr;
	grid-template-rows: auto;
	row-gap: 32px;
}

body.auth .auth_container .logo {
	width: 100%;
	padding: 0 0 16px 0;
	text-align: center;
	line-height: 0;
}

body.auth .auth_container .logo img {
	width: 128px;
	height: 128px;
	line-height: 0;
}

body.auth .auth_container label {
	width: 100%;
	margin: 0 0 10px 0;
	line-height: 1;
}
body.auth .auth_container input {
	width: 100%;
}

body.auth .auth_container input[type="email"], body.auth .auth_container input[type="password"], body.auth .auth_container input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	
	height: 42px;
	padding: 8px 16px;
	
	font-family: inherit;
	font-size: 3.75rem;
	font-weight: 400;
	color: rgb(16,16,16);
	line-height: 24px;
	letter-spacing: -0.011em;
	
	background: rgb(247,248,249);
	
	border: 0.25rem rgb(198,198,198) solid;
	border-radius: 4px;
}

body.auth .auth_container .password_wrapper {
	position: relative;
}
body.auth .auth_container .icon_eye {
	position: absolute;
	right: 0;
	top: 0;
	
	width: 56px;
	height: 42px;
	
	background: url("/_img/icon.pass_on.svg") no-repeat;
	
	cursor: pointer;
	
	z-index: 100;
}
body.auth .auth_container .icon_eye.on {
	background: url("/_img/icon.pass_off.svg") no-repeat;
}
body.auth .auth_container input[type="password"] {
	padding: 0 40px 0 16px;
}

body.auth .auth_container input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	
	width: 100%;
	height: 44px;
	padding: 8px 16px;
	
	font-family: inherit;
	font-size: 4rem;
	font-weight: 400;
	color: rgb(255,255,255);
	line-height: 28px;
	letter-spacing: -0.011em;
	
	background: var(--colorBlueMSBC);
	
	border: 0;
	border-radius: 4px;
}

body.auth .auth_container .copyright {
	margin: 16px 0 0 0;
	padding: 16px 0 0 0;
	
	font-size: 3.25rem;
	font-weight: 400;
	color: rgb(112,112,112);
	text-align: center;
	letter-spacing: -0.013em;
	
	border-top: 0.25rem rgb(210,210,215) solid;
}

/* ------------------------- */
/* 		MAIN APP STYLES		 */
/* ------------------------- */

body.main_app {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr;
	gap: 0;
}
body.main_app.temp_app_nav_collapsed {
	grid-template-columns: 1fr;
}

/* ---- App Navigation Area ---- */

/* !!! Expand the width of the nav area to 288px or so + adjust the rest of the UI. !!!  */

nav {
	position: sticky;
	left: 0;
	top: 0;
	
	width: 64rem;
	height: 100dvh;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 15.25rem 1fr auto;
	gap: 6rem;
	
	font-size: 3.5rem;
	letter-spacing: -0.008em;
	
	background: rgb(255,255,255);
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top right;
}
body.temp_app_nav_collapsed nav {
	position: fixed;
	/* left: -64rem; */
	transform: translateX(-64rem);
}

nav a {
	color: var(--textColor);
}


nav header {
	padding: 0 3rem;
	
	color: rgb(10,24,64);
}

nav header a {
	display: block;
	
	width: 100%;
	line-height: 15.25rem;
	
	font-weight: 512;
	
	/* border-bottom: 0.25rem rgb(216,222,228) solid;
	border-bottom: 0.25rem rgb(235,238,241) solid;
	border-bottom: 0.25rem rgb(224,230,248) solid; */
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}
nav header a.active {
	color: rgb(0,74,124);
}


nav section.links {
	height: 100%;
	overflow-y: auto;
}
section.links a {
	width: 100%;
	
	padding: 0 6rem;
	
	display: block;

	line-height: 10rem;
	text-decoration: none;
}
section.links a.active {
	color: var(--colorBlueMSBC);
	
	background: rgb(246,248,250);
	background: rgb(246,249,251);
	
	border-right: 2px var(--colorBlueMSBC) solid;
}


nav footer {
	padding: 0 6rem;
}

nav footer a {
	display: block;
	
	width: 100%;
	padding: 3rem 0 0 0;
	
	line-height: 10rem;
	
	/* border-top: 0.25rem rgb(224,230,248) solid; */
	border-top: 0.25rem var(--rulerColorHorizontal) solid;
}
nav footer a.sign_out {
	padding: 0 0 3.5rem 0;
	
	color: rgb(235,12,0);
	
	border-top: 0;
}

/* ---- Main App Area ---- */

main {
	height: 100dvh;
	overflow-y: auto;
	
	font-size: 3.5rem;
}

main.columns_1_0 {}

main.columns_1_2 {
	display: grid;
	grid-template-columns: 96rem 1fr;
	grid-template-rows: auto;
	gap: 0;
}

main.columns_2_1 {

}

/* ---- List Column Styles ---- */

.column_list {
	width: 100%;
	height: 100%;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 15.25rem 1fr;
	gap: 0;
	
	background: var(--colorWhite);
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top right;
}

.column_list header {
	height: 15.25rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	align-items: center;
	
	background: var(--colorWhite);
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}

.column_list header form {
	padding: 0 6rem;
	
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top right;
}


.column_list .turbo_frame_results {
	height: calc(100dvh - 15.25rem);
	overflow-y: auto;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 6rem 1fr;
	gap: 0;
}

.column_list .results_summary {
	position: sticky;
	top: 0;
	
	padding: 0 6rem;
	
	overflow: hidden;
	
	font-size: 2.75rem;
	color: var(--textColorLight);
	line-height: 6rem;
	
	background: rgb(255,255,255);
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top right;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}

.column_list .data_list {
	overflow-y: auto;
	
	padding: 0 6rem;
}

.column_list a {
	display: block;
	
	padding: 3.25rem 0;
	
	font-weight: 400;
	color: rgb(26,27,37);
	letter-spacing: -0.008em;
	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	
	/* border-bottom: 0.25rem rgb(231,236,241) solid; */
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}
.column_list a:last-child {
	border: 0;
}

.column_list .record_meta_data {
	margin: 1rem 0 0 0;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
}
.column_list .record_type {
	width: 100%;
	
	font-size: 3rem;
	font-weight: 400;
	color: rgb(104,115,133);
	letter-spacing: 0.01em;
	text-transform: capitalize;
	
	display: block;
}

/* ---- Main Stage / Detail Column Styles ---- */

.column_stage {
	width: 100%;
	height: 100%;
	
	grid-template-columns: 1fr;
	grid-template-rows: 15.25rem 1fr;
	gap: 0;
}

/* ---- Stage Header Styles ---- */

.column_stage header {
	height: 15.25rem;
	padding: 0 8rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 0;
	justify-items: center;
	align-items: center;
	
	background: var(--colorWhite);
	
	/* border-bottom: 0.25rem rgb(224,230,248) solid; */
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}
.column_stage header > div {
	height: 8rem;
}

.column_stage header .box_wrapper {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	align-items: center;
}

.column_stage .header_options {
	/* background: gold; */
}


.column_stage .header_actions {
	padding: 0 0 0 6.25rem;
	
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top left;
}

.column_stage .header_actions a {
	padding: 0 4rem 0 3rem;
	
	font-weight: 360;
	color: var(--colorWhite);
	line-height: 8rem;
	
	display: inline-grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto;
	gap: 2rem;
	align-items: center;
	
	background: var(--colorBlueMSBC);
	
	border-radius: 1.25rem;	
}

.column_stage .link_button_icon {
	width: 3rem;
	height: 3rem;
	
	fill: var(--colorWhite);
}

/* ---- Main Stage Styles ---- */

.stage_wrapper {
	width: 100%;
	height: calc(100dvh - 14rem);
	
	overflow-y: auto;
}
.stage_block {
	width: 100%;
	
	padding: 8rem;
	
	display: block;
}
.stage_block.bg_white {
	background: var(--colorWhite);
}

.stage_block_card {
	min-width: 240rem;
	width: 100%;
	max-width: 320rem;
	
	margin: 0 auto;
	padding: 10rem;
	
	display: block;
	
	background: var(--colorWhite);
	
	border: 0.25rem var(--rulerColorHorizontal) solid;
	border-radius: 2.5rem;	
}

/* -- Button-shaped Links Styles -- */

a.link_button {
	padding: 0 3rem 0 2rem;
	
	font-weight: 400;
	color: var(--textColor);
	line-height: 6.5rem;
	
	display: inline-grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto;
	gap: 2rem;
	align-items: center;
	
	border: 0.25rem var(--actionColorButtonSecondary) solid;
	border-radius: 1.5rem;
	
	/* box-shadow: 0 0.25rem 0.5rem 0 rgba(0,0,0,0.06); */
}

a.link_button .link_button_icon {
	width: 3rem;
	height: 3rem;
	
	fill: var(--textColorLight);
}

.subhead a.link_button {
	padding: 0 3rem 0 2rem;
	
	font-weight: 400;
	font-size: 3.5rem;
	color: var(--textColor);
	line-height: 6.5rem;
	
	display: inline-grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto;
	gap: 2rem;
	align-items: center;
	
	border: 0.25rem var(--actionColorButtonSecondary) solid;
	border-radius: 1.5rem;
	
	/* box-shadow: 0 0.25rem 0.5rem 0 rgba(0,0,0,0.06); */
}

/* ---- Record Details Card Styles ---- */

.data_block {
	width: 100%;
}

.data_block + .data_block {
	margin: 16rem 0 0 0;
}
.data_block + .data_block:has(form), .data_block + .data_block.notification {
	margin: 8rem 0 0 0;
}


.data_block .data_main {
	margin: 0 0 4rem 0;
	padding: 0 0 4rem 0;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	align-items: center;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}

.data_block .head {
	font-size: 7rem;
	font-weight: 560;
	color: var(--textColorDark);
	letter-spacing: -0.011em;
	line-height: 8rem;
}

.data_block .subhead {
	margin: 0 0 3rem 0;
	padding: 0 0 2.75rem 0;
	
	font-size: 5rem;
	font-weight: 560;
	color: var(--textColorDark);
	line-height: 7rem;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}
.data_block .subhead.layout_grid {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 8rem;
	
	align-items: center;
}

.data_block .data_key {
	color: var(--textColorLight);
}
.data_block .data_key.for_textarea {
	padding: 2rem 0 0 0;
	align-self: start;
}

.data_block .metadata {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: stretch;
}

.data_block .metadata .item {
	padding: 0 6rem;
	
	border-left: 0.25rem var(--rulerColorVertical) solid;
}
.data_block .metadata .item:first-child {
	padding: 0 6rem 0 0;
	
	border-left: 0;
}

.data_block .metadata .item .data_key {
	margin: 0 0 1.25rem 0;
	
	line-height: 5rem;
}

.data_block .data_row {
	line-height: 8rem;
	
	display: grid;
	grid-template-columns: 48rem 1fr;
	grid-template-rows: auto;
	gap: 6rem;
	align-items: start;
}
.data_block .data_row.subhead {
	max-width: 182rem;
	
	font-size: 4rem;
	line-height: 6rem;
	
	grid-template-columns: 1fr;
}

.data_block .data_row .multiline_copy {
	padding: 1.25rem 0 0 0;
	
	line-height: 150%;
}
.data_block .data_row .multiline_copy p {
	margin: 0 0 2rem 0;
}
.data_block .data_row .multiline_copy p:empty {
	margin: 0;
	
	display: none;
}
.data_block .data_row .multiline_copy p + p {
	margin: 3rem 0 2rem 0;
}
.data_block .data_row .multiline_copy p:empty + p {
	margin: 0 0 2rem 0;
}


form .data_row + .data_row {
	margin: 6rem 0 0 0;
}
form .spacer + .data_row {
	margin: 0 !important;
}
form .data_row .data_key label {
	padding-top: 1.5rem;
}
form .data_row.centered_v {
	align-items: center;
}
form .data_row.centered_v .data_key label {
	padding-top: 0;
}

form .data_row.block_hidden { 
	margin-bottom: 6rem;
}
form .data_row.block_hidden + .data_row { 
	margin: 0;
}

form .data_row .data_value {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 0;
}

form .data_row .data_key.for_form_group {
	padding: 4.5rem 0 0 0;
	
	color: var(--textColorDark);
}

form .data_row .data_key.stand_in_label {
	color: var(--textColorDark);
}

form .data_row .data_key .block_instructions {
	font-size: 3rem;
	color: var(--textColorLight);
	
	display: block;
}

/* ---- Form Layout Elements ---- */

form .frame_group {
	width: var(--inputWidthStandard);
	
	padding: 5rem;
	
	border: 0.25rem rgb(225,225,228) solid;
	border-radius: 1rem;
}
form .frame_group.shaded {
	/* background: rgba(232,232,237,0.3); */
	background: rgb(247,247,250);
	
	border: 0.25rem rgb(214,214,214) solid;
}
form .frame_group.grid_checkboxes {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 3rem;
}

form .frame_group.simple {
	padding: 0;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 3rem;
	
	border: 0;
}


/* ---- Table Row Links ---- */

.table_row {
	padding: 2rem 0;
	line-height: 5rem;
	
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	gap: 2rem;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}

.table_row > div:first-child {
	padding: 0 0 0 1rem;
}
.table_row > div:last-child {
	padding: 0 1rem 0 0;
}

.table_row.table_header {
	font-size: 2.75rem;
	font-weight: 500;
	color: var(--textColorLight);
	text-transform: uppercase;
}

.table_row.record__20rem__1fr {
	grid-template-columns: 20rem 1fr;
}
.table_row.record__1fr__2fr__1fr {
	grid-template-columns: 1fr 2fr 1fr;
}

a.table_row {
	color: rgb(26,27,37);
}
a.table_row:hover {
	background: rgb(246,248,250);
}


.data_block:has(.table_row) .subhead {
	margin-bottom: 0;
}
/* ----Form Container Links ---- */

form .container_package_capacity {
	width: var(--inputWidthMedium);
	
	display: grid;
	grid-template-columns: 1fr 30rem;
	grid-template-rows: auto;
	gap: 2rem;
	
	align-items: center;
}

form .container_package_capacity input[type="number"] {
	padding-right: 1rem;
}

/* ------------------------- */
/* 		END MAIN STYLES		 */
/* ------------------------- */
 
/* TEMP FIX */

#overlay {
	width: 100dvw;
	height: 100dvh;
	
	position: fixed;
	left: 0;
	top: 0;
	
	overflow-y: auto;
	
	background:rgba(0,0,0,0.1);
	
	z-index: 600;
}

.right {
	width: 100dvw;
	/* width: 384px; */
	height: 100dvh;
	
	
	background: gold;
	
	/* translate: 100% 0; */
	translate: 0 0;
	
	z-index: 800;
	
	opacity: 0;
	
	/* transition: translate .4s 3s cubic-bezier( 0.77, 0, 0.175, 1); */
	/* transition: opacity 2s cubic-bezier( 0.77, 0, 0.175, 1); */
	
	animation-name: modal_fade_in;
	animation-duration: .2s;
	animation-delay: .1s;
	animation-timing-function: cubic-bezier( 0.77, 0, 0.175, 1);
	animation-fill-mode: forwards;
}
.stageout {
	opacity: 1;
	
	animation-name: modal_fade_out;
	animation-duration: .2s;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier( 0.77, 0, 0.175, 1);
	animation-fill-mode: forwards;
}

.modal_action {
	width: calc(100dvw - 159.75rem);
	height: 100dvh;
		
	position: fixed;
	top: 0;
	right: 0;
	
	font-size: 3.5rem;
	
	background: rgb(255,255,255);
	
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top left;
	
	overflow-y: auto;
}
body:has(main.columns_1_0) .modal_action {
	width: calc(100dvw - 63.75rem);
}
body.temp_app_nav_collapsed .modal_action {
	width: calc(100dvw - 95.75rem);
}

.modal_action header {
	height: 15.25rem;
	padding: 0 8rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 0;
	justify-items: center;
	align-items: center;
	
	background: var(--colorWhite);
	
	/* border-bottom: 0.25rem rgb(224,230,248) solid; */
	/* border-bottom: 0.25rem var(--rulerColorHorizontal) solid; */
	
	background-image: url("/_img/border.vertical.svg");
	background-size: 0.25rem;
	background-repeat: repeat-y;
	background-position: top left;
}

.modal_action header > div {
	height: 8rem;
}

.modal_action header .box_wrapper {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	align-items: center;
}


.modal_action .header_actions {
	padding: 0 0 0 6.25rem;
}

.modal_action .header_actions a {
	width: 6rem;
	height: 6rem;
	
	display: block;
}




@keyframes modal_fade_in {
	from {
		opacity: 0;
	  }
	  
	  to {
		  opacity: 1;
	  }
}

@keyframes modal_fade_out{
	from {
		opacity: 1;
	  }
	  
	  to {
		  opacity: 0;
	  }
}

/* nav {
	margin: 0; 
	padding: 16px; 
	border-bottom: 0.25rem rgb(206,206,207) solid;
	
	background: #fff;
	
	-webkit-position: sticky;
	position: sticky;
	
	top: 0;
	
	font-size: 3.5rem;
	font-weight: 400;
} */

/* nav a::after {
	content: "|";
	margin: 0 16px;
	color: silver;
	font-weight: 300;
} */

/* .temp_wrapper {
	width: 800px;
	margin: 0 auto;
} */
 
/* form.button_to {
	display: inline-block;
}
form.button_to button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	font-size: inherit;
	color: #bf0013;
	cursor: pointer;
} */

a.temp_pill {
	display: block;
	max-width: 320px; 
	margin-top: 8px; 
	padding: 16px; 
	border: 0.25rem silver solid;
	border-radius: 8px;
}

a.temp_category_regular {
	padding-left: 32px;
}

a.temp_inline_button {
	padding: 8px 12px;
	border: 0.25rem #06c solid;
	border-radius: 4px;
	letter-spacing: -0.011em;
	display: inline-block;
	font-size: 3.25rem;
}

.temp_segment_wrapper {
	width: 100%;
	min-height: 64px;
	padding: 0; 
	margin-bottom: 16px; 
	border: 0.25rem rgb(216,222,228) solid; 
	border-radius: 8px;
	will-change: min-height; /* Revisit this for the production app. */
	background: white;
}
.temp_segment_wrapper.form {
	padding: 16px;
}

.temp_segment_divider {
	min-width: 240rem;
	width: 100%;
	max-width: 320rem;
	
	margin: 0 auto;
	padding: 6rem 0 3rem 0;
	
	font-size: 5rem;
	font-weight: 560;
	color: rgb(26,27,37);
}
.temp_segment_divider p {
	margin: 0;
	font-size: 3.5rem;
	font-weight: 400;
	color: rgb(65,69,82);
}

.redactor-toolbar-on .redactor-in  {
  width: 100%;
  min-height: 24rem;
  margin: 0;
  padding: 2rem;
  font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.003em;
  border-radius: 0.5rem;
  overflow: hidden;
}

.redactor-toolbar-on .redactor-in * {
  line-height: calc(2px + 2ex + 2px);
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.redactor-toolbar-on .redactor-in p:first-child {
  margin-top: 0;
}

.redactor-toolbar-on .redactor-in p + p {
  margin-top: 3.5rem;
}

.redactor-box:has(.editor_packaging) .redactor-in  {
	width: var(--inputWidthMedium);
	
	min-height: 8.5rem;
	height: 8.5rem;
	
	padding: 1rem 3rem;
	
	line-height: 6rem;
	letter-spacing: -0.003em;
	white-space: nowrap;
	
	border-radius: 1rem;
	
	overflow: hidden;
}

.redactor-box:has(.editor_packaging) .redactor-toolbar  {
	height: 10rem;
}

.redactor-box:has(.editor_packaging) .redactor-toolbar .re-button  {
	width: 9rem;
	height: 9rem;
}

.redactor-placeholder {
	color: var(--textColorLight);
}

.box_editor_packaging .redactor-toolbar-on .redactor-in p:first-child  {
	margin: 0;
}

.temp_big_stage_wrapper {
	max-width: 1440px;
	margin: 0 auto;
}

.temp_bg_overlay {
	width: 100vw;
	height: 100vh;
	background: rgba(171,171,170,0.17);
	background: rgba(42,42,42,0.9);
	/* -webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);  */
	position: fixed; 
	right: 0; 
	top: 0; 
	z-index: 200; 
	display: flex; 
	justify-content: center; 
	align-items: center;
}

.temp_segment_wrapper > h4 {
	height: 48px;
	margin: 0;
	padding: 0 16px;
	display: block;
	line-height: 48px;
	background: rgb(0,118,225);
	background: rgb(246,248,250);
	background: rgb(251,251,253);
	border-radius: 7px 7px 0 0;
	font-weight: 600;
}

.temp_segment_subheader {
	width: 100%;
	height: 36px;
	padding: 0 16px;
	background: rgb(245,245,247);
	background: rgb(246,248,250);
	border: 0.25rem rgb(216,222,228) solid;
	border-width: 0.25rem 0;
	font-size: 12px;
	line-height: 36px;
	font-weight: 500;
}

.temp_line_item {
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 8px 0;
	border-bottom: 0.25rem rgb(216,222,228) solid;
	display: block;
}
.temp_line_item.total {
	width: 100%;
	padding: 8px 16px;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
	text-align: right;
	border-bottom: 0;
}
.temp_new_link {
	width: 100%;
	padding: 8px 16px;
	border-bottom: 0;
	border-top: 0.25rem rgb(216,222,228) solid;
	display: block;
}

.badge {
	min-width: 96px;
	margin: -2px 0 0 0;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	border-radius: 1000px;
	text-align: center;
	display: inline-block;
	background: lightgray;
}
.badge.success {
	color: rgb(22, 101, 52);
	background: rgb(220, 252, 231);
}
.badge.complete {
	float: right;
}
.badge.complete::before {
	content: "Complete";
}

.badge.incomplete {
	float: right;
	color: black;
}
.badge.incomplete::before {
	content: "Incomplete";
}

.temp_component_blending_steps {
	counter-reset: section;
}

.temp_component_blending_steps .temp_blending_step h3 {
	
}
.temp_component_blending_steps .temp_blending_step h3::before {
	counter-increment: section;
	content: "Step " counter(section);
	text-transform: uppercase;
	color: white;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 16px;
	font-size: 10.25rem;
	background: green;
	border-radius: 2000px;
}

.temp_component_blending_steps .temp_blending_step:last-child {
	border-bottom: 0;
}

/* ---- Additional Temp UI Elements ---- */

.temp_ui_stage_block_card_override {
	padding: 0;
}

.temp_ui_action {
	width: auto;
	height: 4rem;
	
	display: inline-block;
}
.temp_ui_action img {
	width: auto;
	height: 4rem;
}

.temp_ui_actions_container {	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 6rem;
	
	align-items: center;
}

.temp_ui_component_basics {
	width: 100%;
	
	padding: 4.25rem 10rem 4rem 10rem;
	
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	
	align-items: center;
	
	background: rgba(64,156,255,0.08);
	
	/* background: rgb(246,248,250);
	
	border-radius: 2.5rem 2.5rem 0 0; */
	
	border-bottom: 0.25rem rgb(228,228,228) solid;
	border-radius: 2.5rem 2.5rem 0 0;
}

.temp_ui_component_basics div:nth-child(1) {
	font-weight: 700;
}

.temp_ui_component_basics div:nth-child(2) {
	text-align: right;
}

.temp_ui_component_basics div:nth-child(3) {
	padding-left: 6.25rem;
	border-left: 1px rgb(216,222,228) solid;
}

.temp_ui_inner_card_wrapper {
	width: 100%;
	padding: 0 10rem 8rem 10rem;
}
.temp_ui_inner_card_wrapper p {
	margin: 0;
}
.temp_ui_inner_card_wrapper p + p {
	margin: 3rem 0 0 0;
}

.temp_ui_inner_card_wrapper + .temp_ui_inner_card_wrapper {
	border-top: 0.25rem rgb(228,228,228) solid;
}

.temp_ui_segment_subhead {
	margin: 8rem 0 0 0;
	padding: 0 0 2rem 0;
	
	font-size: 4rem;
	font-weight: 600;
	
	border-bottom: 0.25rem rgb(216,222,228) solid;
	
}


.temp_ui_data_line_item {
	width: 100%;
	
	padding: 8px 0;
	
	display: grid;
	grid-template-columns: 0.75fr 6fr 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	
	align-items: center;
	
	border-bottom: 0.25rem rgb(216,222,228) solid;
}

.temp_ui_data_line_item div:nth-child(3) {
	text-align: right;
	font-variant-numeric: lining-nums tabular-nums;
}

.temp_ui_data_line_item div:nth-child(4) {
	padding: 0 0 0 6.25rem;
	border-left: 1px rgb(216,222,228) solid;
}

.temp_ui_data_line_item.total {
	width: calc(100% - 27rem);
	
	margin: 0;
	
	font-weight: 700;
	text-align: right;
	font-variant-numeric: lining-nums tabular-nums;
	
	grid-template-columns: 1fr;
}
div.temp_ui_data_line_item.total:last-of-type {
	padding-bottom: 0;
	
	border-bottom: 0;
}

.temp_ui_new_link {
	width: 100%;
	
	padding: 8rem 0 0 0;
	
	line-height: 0;
	
	display: block;
	
	border-bottom: 0;
}

.temp_ui_new_link a {
	padding: 0;
	
	color: rgb(0,122,255);
	
	display: inline-grid;
	grid-template-columns: 8rem auto;
	grid-template-rows: auto;
	gap: 4rem;
	
	align-items: center;
}

.temp_ui_new_link a img {
	/* width: 4rem;
	height: 4rem; */
	
	width: 8rem;
	height: 8rem;
	
	border: 0.5rem rgb(255,255,255) solid;
	border-radous: 800px;
	
	z-index: 20;
}

.temp_ui_leftovers_container {
	width: 100%;
	
	padding: 2rem 3rem;
	
	font-size: 3rem;
	font-weight: 500;
	color: var(--flashAlarmTextColor);
	
	background: var(--flashAlarmBackground);
	
	border: 0.5rem var(--flashAlarmBorderColor) solid;
	border-radius: 2rem;
}

.temp_ui_segment_subhead.blending_steps {
	border: 0;
}

.temp_ui_blending_steps_wrapper {
	margin: 2rem 0 0 0;
	padding: 0;
	
	position: relative;
}
.temp_ui_blending_steps_wrapper::before {
	content: '';
	
	width: 0.5rem;
	height: 100%;
	
	position: absolute;
	left: 3.75rem;
	top: 0;
	
	background: rgb(216,222,228);
	
	z-index: 1;
	
	counter-reset: section;
}

.temp_ui_segment_subhead:has(+ .temp_ui_leftovers_container) ~ .temp_ui_blending_steps_wrapper {
	padding: 4rem 0 0 0;
}

.temp_ui_blending_step {
	width: 100%;
	
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	grid-template-rows: 8rem auto;
	gap: 2rem 4rem;
}
.temp_ui_blending_step + .temp_ui_blending_step {
	margin: 2rem 0 0 0;
}

.temp_ui_blending_step .temp_ui_marker {
	width: 8rem;
	height: 8rem;
	
	background: rgb(65,175,220);
	
	
	border: 0.5rem rgb(255,255,255) solid;
	border-radius: 100rem;
	
	position: relative;
	z-index: 2;
}

.temp_ui_blending_step .temp_ui_marker::before {
	counter-increment: section;
	content: counter(section);
	
	width: 7rem;
	height: 7rem;
	
	font-weight: 700;
	color: rgb(255,255,255);
	text-align: center;
	line-height: 7rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.temp_ui_blending_step div:nth-child(2) {
	position: relative;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 0;
	
	align-items: center;
}
.temp_ui_blending_step div:nth-child(2)::before {
	content: '';
	
	width: 100%;
	height: 0.25rem;
	
	position: absolute;
	left: 0;
	top: 50%;
	
	translate-Y: -0.25rem;
	
	background: rgb(216,222,228);
}

.temp_ui_blending_step div:nth-child(2) div.special_attention {
	width: 50rem;
	padding: 0 3rem 0 0;
	
	font-size: 3.5rem;
	font-weight: 600;
	color: var(--flashAlarmTextColor);
	line-height: 3.5rem;
	text-transform: capitalize !important;
	
	display: inline-block;
	
	background: rgb(255,255,255);
	
	z-index: 20;
}

.temp_ui_blending_step div:nth-child(3) {
	padding: 0 0 0 2.25rem;
}

.temp_ui_blending_step div:nth-child(8) {
	padding: 2.5rem 0 0 0;
}

.temp_ui_blending_step div:nth-child(5):emtpy ~ .temp_ui_blending_step div:nth-child(8) {
	padding: 0;
}

.temp_ui_blending_steps_wrapper div.temp_ui_blending_step:nth-last-of-type(2) {
	margin: 2rem 0 4.25rem 0;
}
.temp_ui_blending_steps_wrapper div.temp_ui_blending_step:nth-last-of-type(2) div:nth-last-of-type(2) {
	padding: 0 0 7rem 0;
	border-bottom: 0.25rem rgb(216,222,228) solid;
}

.temp_ui_new_link:has(.new_blending_step) {
	padding: 0;
	
	position: relative;
}
.temp_ui_new_link:has(.new_blending_step):before {
	content: '';
	
	width: 8rem;
	height: 100%;
	
	position: absolute;
	left: 0;
	top: 0;
	
	background: rgb(255,255,255);
	
	z-index: 1;
}

.temp_ui_new_link:has(.new_blending_step) a.new_blending_step {
	padding: 0;
	
	background: rgb(255,255,255);
	
	z-index: 20;
}
.temp_ui_blending_steps_wrapper > .temp_ui_new_link:first-child {
	padding-top: 6rem;
}

.temp_ui_new_link a.new_blending_step img {
	width: 8rem;
	height: 8rem;
	
	border: 0.5rem rgb(255,255,255) solid;
	
	z-index: 20;
}

.temp_ui_packing_option {
	width: 100%;
	
	margin: 6rem 0 0 0;
	padding: 0 0 2.75rem 0;
	
	border-bottom: 0.75rem rgb(216,222,228) solid;
}

.temp_ui_segment_subhead.packing_options {
	border-bottom-width: 0.75rem;
}

.temp_ui_packing_option .temp_ui_title_bar {
	width: 100%;
	
	padding: 0 0 3rem 0;
	
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	
	border-bottom: 0.25rem rgb(216,222,228) solid;
}

.temp_ui_packing_option .temp_ui_title_bar div:first-child {
	font-weight: 600;
}

/* .temp_ui_packing_option .temp_ui_actions_container {
	grid-template-columns: 1fr 1fr 1fr;
} */

.temp_ui_packing_option .temp_ui_title_bar:has(+ .temp_ui_leftovers_container.packing_option) {
	border: 0;
}

.temp_ui_packing_option .temp_ui_packing_specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 2.75rem 6rem;
}

.temp_ui_packing_option .temp_ui_packing_specs div {
	padding: 2.75rem 0 0 0;
}
.temp_ui_packing_option .temp_ui_packing_specs div strong {
	font-size: 3rem;
}

.temp_ui_packing_option .temp_ui_packing_specs div:nth-child(n+4) {
	border-top: 0.25rem rgba(216,222,228,0.8) solid;
}

.temp_ui_packing_option .temp_ui_packing_specs div.temp_ui_packing_notes {
	grid-column: 1 / span 3;
	border-top: 0.25rem rgba(216,222,228,0.8) solid;
}

.temp_ui_inner_card_wrapper.packing_options > .temp_ui_new_link:first-child {
	padding-top: 8rem;
}

.temp_ui_new_link.add_component, .temp_ui_new_link.add_superpack {
	min-width: 240rem;
	width: 100%;
	max-width: 320rem;
	
	padding: 0 10.25rem;
	margin: 0 auto;
}

.temp_ui_new_link.add_component a img, .temp_ui_new_link.add_superpack a img {
	border-color: transparent;
}


.temp_ui_new_link.component_starter {
	padding: 8rem 10rem;
}


.temp_ui_actions_container.width_21rem {
	min-width: 21rem;
}

/* turbo-frame:has(> .stage_block_card.temp_ui_stage_block_card_override) + turbo-frame:has(> .stage_block_card.temp_ui_stage_block_card_override) {
	margin-top: 8rem;
	
	display: block;
} */


.temp_ui_superpack_data {
	padding: 4rem 10rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 4rem;
}

.temp_ui_superpack_data .temp_ui_superpack_line_item_spaced {
	padding: 4rem 0 0 0;
	
	border-top: 0.25rem rgb(216,222,228) solid;
}

.temp_ui_superpack_data .temp_ui_superpack_line_item_spaced p {
	margin: 0 0 0 0;
}
.temp_ui_superpack_data .temp_ui_superpack_line_item_spaced p + p {
	margin: 1em 0 0 0;
}



.data_block.superpack .temp_ui_superpack_label {
	display: none;
}
.data_block.superpack form div.data_row:nth-of-type(3) .data_key label.temp_ui_superpack_label {
	display: block;
}



/* ---- TEMP TomSelect Fix ---- */

.clear-button {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-12px) !important;
}

/* ---- TEMP Nav Collapse Button ---- */

.temp_button_nav_collapse {
	width: 9rem;
	height: 8rem;
	
	display: block;

	cursor: pointer;
	
	background-color: rgba(240,240,240,0.0);
	background-image: url("/_img/icon.nav.collapse.svg");
	background-size: 5rem 4rem;
	background-repeat: no-repeat;
	background-position: center center;
	
	border-radius: 20%;
	
	transition: background-color 0.2s ease-in-out;
	/* background-color: #decade; */
}
.temp_button_nav_collapse:hover {
	background-color: rgba(240,240,240,1.0);
}

.temp_data_block_special {
	margin-top: 4rem !important;
	padding-top: 3rem;
	border-top: 0.25rem var(--rulerColorHorizontal) solid;
}
.temp_data_block_special.text_dark {
	color: var(--textColorDark);
}

.temp_mpn_stated_net_quantity_form_component {
	width: 128rem;
	
	display: grid;
	grid-template-columns: 48rem 18rem 58rem;
	grid-template-rows: 8.5rem;
	gap: 2rem;
	
	align-items: center;
}

.temp_mpn_stated_net_quantity_form_component div:nth-child(2) {
	text-align: center;
	line-height: 8rem;
}

.temp_mpn_stated_net_quantity_form_component select {
	width: 100% !important;
}

.temp_mpn_stated_net_quantity_form_component.ingredient {
	grid-template-columns: 36rem 40rem 6rem 40rem;
}
.temp_mpn_stated_net_quantity_form_component.ingredient div:nth-child(3) {
	text-align: center;
	line-height: 8rem;
}

.temp_card_mpn_list {
	width: 100%;
	padding: 4rem;
	border: 0.25rem var(--rulerColorHorizontalLight) solid;
	border-radius: 1rem;
}

.temp_card_mpn_list + .temp_card_mpn_list {
	margin: 2rem 0 0 0;
}

/* TEMP STATEMENT */

/* Temp style to render fractional glyphs as needed. Refactor for the final UI. */
.temp_incl_fractions_diagonal {
	font-variant-numeric: diagonal-fractions;
}

.temp_badge {
	padding: 0.5rem 1.5rem;
	
	font-size: 0.8em; 
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	
	display: inline-block;
	
	border-radius: 0.5rem;
}
.temp_badge.alert {
	color: var(--flashAlertTextColor);
	
	background: var(--flashAlertBackground);
}
.record_meta_data:has(div > span):has(.alert) span {
	min-width: 18rem;
	text-align: center;
}
.temp_badge.alert.allergens_plus {
	color: var(--colorWhite);
	
	background: #003366;
}


/* Temporary MPN list elements */

.temp_mpn_list_header {
	width: 100%;
	
	padding: 0 0 2.5rem 0;
	
	display: grid;
	grid-template-columns: 1fr 24.25rem;
	grid-template-rows: auto;
	gap: 4rem;
	
	font-weight: 600;
	
	border-bottom: 0.5rem var(--rulerColorHorizontalDark) solid;
}

.temp_mpn_list_item {
	width: 100%;

	padding: 2.25rem 0;
	display: grid;
	grid-template-columns: 1fr 24.25rem;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
	
	color: var(--textColor);
	line-height: 0.9;
	text-decoration: none;
	
	border-bottom: 0.25rem var(--rulerColorHorizontalDark) solid;
}
.temp_mpn_list_item:hover {
	color: var(--actionColorLink);
	
	background: rgba(228,228,228,0.32);
}

.temp_mpn_list_item a {
	padding: 0;
	
	display: grid;
	grid-template-columns: 30% 1fr 10% 8rem;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
	
	color: var(--textColor);
	border-bottom: 0;
}
.temp_mpn_list_item:hover a {
	background: none;
}


.temp_mpn_list_header > div {
	display: grid;
	grid-template-columns: 30% 1fr 10% 8rem;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
}

.temp_mpn_list_header > div div:nth-child(n+3), .temp_mpn_list_item > a div:nth-child(n+3) {
	text-align: right;
}


.temp_mpn_list_item > div:nth-child(4) {
	line-height: 0;
}

.temp_icon_in_list {
	height: 4.25rem;
}

.temp_mpn_action_add_item {
	width: 100%;
	
	padding: 3.75rem 0 0 0;
	
	line-height: 1;
}


/* TEMP STORAGE AREA GRID COMPONENT */

.temp_storage_aisles_gps_grid {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: auto;
	gap: 6rem;
	align-content: stretch;    
}
.temp_storage_sections_gps_grid {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto;
	gap: 6rem;
	align-content: stretch;    
}
.temp_storage_shelves_gps_grid {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 6rem;
	align-content: stretch;    
}
.temp_storage_slots_gps_grid {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 6rem;
	align-content: stretch;    
}

.temp_storage_gps_block {
	padding: 0 0 0 6rem;
	
	border-left: 0.25rem var(--rulerColorVertical) solid;
}
.temp_storage_gps_block_aisles {
	padding: 0;
	border-left: 0;
}

.temp_storage_facility_subheading {
	width: 100%;
	
	padding: 0 0 2rem 0;
	
	position: sticky;
	top: 0;
	left: 0;

	font-weight: 600;
	
	background: var(--colorWhite);
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}

.temp_storage_facility_line_item {
	width: 100%;
	
	padding: 0 1rem;
	
	color: var(--textColor);
	line-height: 7.5rem;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}
.temp_storage_facility_line_item.active {
	background: rgb(246,248,250);
}

.temp_storage_facility_line_item span {
	font-size: 0.85em;
	font-weight: 480;
	opacity: 0.7;
	text-align: right;
}

.temp_storage_facility_block_add_item {
	width: 100%;
	padding: 1.5rem 0 0 0;
	display: block;
}

/* Add spacing to turbo-frames for multi-select form feature. */

form .dynamic_multiselect_item {
	margin: 6rem 0 0 0;
	
	display: block;
}

/* Temp styles for storage locations lists in ingredients, packagings and produced formulas. */

.temp_locatables_list_header {
	width: 100%;
	
	padding: 0 0 2.5rem 0;
	
	display: grid;
	grid-template-columns: 1fr repeat(4, 0.25fr) auto;
	grid-template-rows: auto;
	gap: 4rem;
	
	font-weight: 600;
	
	border-bottom: 0.5rem var(--rulerColorHorizontalDark) solid;
}

.temp_locatables_list_item {
	width: 100%;

	padding: 2.25rem 0;
	
	display: grid;
	grid-template-columns: 1fr repeat(4, 0.25fr) auto;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
	
	color: var(--textColor);
	line-height: 0.9;
	text-decoration: none;
	
	border-bottom: 0.25rem var(--rulerColorHorizontalDark) solid;
}
.temp_locatables_list_header div, .temp_locatables_list_item div {
	text-align: right;
}
.temp_locatables_list_header div:first-child, .temp_locatables_list_item div:first-child {
	text-align: left;
}


/* !!! App Settings Turbo Frame Container !!! */

.temp_app_settings_container {
	width: 100%;
	max-width: 180rem;
	
	margin: 15rem auto 16rem auto;
	padding: 0 5rem;
	
	font-size: 3.5rem;
}

.temp_app_settings_header {
	padding: 0 0 0 3.5rem;
	
	font-size: 5rem;
	font-weight: 600;
	color: var(--textColorDark);
	letter-spacing: -0.022em;
	line-height: 1;
}

.temp_app_settings_block_list {
	margin: 5rem 0 0 0;
	padding: 0 3.5rem;
	
	background: rgb(242,242,242);
	border: 0.25rem rgb(229,229,229) solid;
	border-radius: 1.25rem;
}

.temp_app_settings_block_list .temp_app_settings_item {
	padding: 4rem 0;
	
	display: grid;
	grid-template-columns: 1fr 1.25rem;
	grid-template-rows: auto;
	gap: 3rem;
	align-items: center;
	
	color: var(--textColorDark);
}
.temp_app_settings_block_list .temp_app_settings_item + .temp_app_settings_item {
	border-top: 0.25rem rgb(229,229,229) solid;
}


.temp_app_settings_supraheader {
	margin: 0 0 5rem 0;
	padding: 0 0 3rem 0;
	
	display: grid;
	grid-template-columns: 2rem 1fr;
	grid-template-rows: auto;
	gap: 1.75rem;
	align-items: center;
	
	font-size: 3rem;
	font-weight: 500;
	color: var(--textColor);
	line-height: 1;
	
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
}
.temp_app_settings_supraheader div {
	display: grid;
	align-items: center;
}
.temp_app_settings_back_chevron {
	width: auto;
	height: 2.45rem;
}



.temp_app_setting_group {
	width: 100%;
	
	margin: 8rem 0 0 0;
	
	display: block;
}

.temp_app_setting_group h2 {
	margin: 0 0 2rem 0;
	padding: 0 4rem;
	
	font-size: 3.5rem;
	font-weight: 600;
	color: var(--textColorDark);
}

.temp_app_setting_group_add {
	width: 100%;
	
	margin: 8rem 0 0 0;
	padding: 0 4rem;
	
	display: block;
}

.temp_app_setting_group_add a {
	padding: 0 4rem 0 3rem;
	
	font-weight: 360;
	color: var(--colorWhite);
	line-height: 8rem;
	
	display: inline-grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto;
	gap: 2rem;
	align-items: center;
	
	background: var(--colorBlueMSBC);
	
	border-radius: 1.25rem;	
}

.temp_app_setting_group_add .link_button_icon {
	width: 3rem;
	height: 3rem;
	
	fill: var(--colorWhite);
}

.temp_app_setting_group_list {
	margin: 0;
	padding: 0 3.5rem;
	
	background: rgb(242,242,242);
	border: 0.25rem rgb(229,229,229) solid;
	border-radius: 1.25rem;
}

.temp_app_setting_group_item {
	padding: 3rem 0;
	
	display: grid;
	grid-template-columns: 14rem 1fr 5rem;
	grid-template-rows: auto;
	gap: 3rem;
	align-items: center;
	
	color: var(--textColorDark);
}
.temp_app_setting_group_item + .temp_app_setting_group_item {
	border-top: 0.25rem rgb(229,229,229) solid;
}


.temp_app_setting_group_item_add {
	padding: 2rem 0;
	
	display: block;
}
.temp_app_setting_group_item_add.border_top {
	border-top: 0.25rem rgb(229,229,229) solid;
}

.temp_app_setting_group_item_add a {
	padding: 1rem 0;
	display: block;
}


.temp_inline_form {
	width: 100%;
	
	display: grid;
	grid-template-rows: auto;
	gap: 4rem;
	align-items: center;
}

.temp_inline_form input[type="text"] {
	max-width: 100% !important;
}

.temp_inline_form.workflow_group {
	grid-template-columns: 1fr 20rem; 
}
.temp_inline_form.workflow_role {
	grid-template-columns: 14rem 1fr 20rem; 
}


.temp_form_workflow_block_wrapper {
	width: 100%;
	max-width: 182rem;
	
	border-top: 0.25rem var(--rulerColorHorizontal) solid;
	
	position: relative;
}
.temp_form_workflow_block_wrapper.opener {
	margin: 4rem 0 9.5rem 0;
	
	text-align: center;
}
.temp_form_workflow_block_wrapper.closer {
	margin: 6rem 0 0 0;
}



/* !!! Form Divider Heading Tab. Update styles as part of the final UI style. !!! */
.temp_divider_header {
	max-width: 64rem;
	height: 8rem;
	
	margin: -4rem auto 0 54rem;
	padding: 0 4rem;
	
	color: var(--colorBlueMSBC);
	line-height: 7.5rem;
	
	background: var(--flashNoticeBackground);
	border: 0.25rem var(--flashNoticeBorderColor) solid;
	
	position: absolute;
	left: 0;
	right: 0;
}


/* MSBC App Company Switcher Element */

nav header .msbc_co_switcher a {
	font-weight: 400;
}

.msbc_co_switcher {
	width: 100%;
	max-width: 58rem;
	height: 15rem;
	
	letter-spacing: -0.011em;
	
	position: relative;
	
	border-bottom: 0.25rem rgb(228,228,228) solid;
}

.msbc_co_switcher_contents {
	width: 100%;
	max-width: 58rem;
	max-height: 120rem;
	
	position: absolute;
	left: 0;
	top: 3.5rem;
	right: 0;
	
	z-index: 2000;
}

.msbc_co_current {
	width: 100%;
	height: 8rem;
	
	padding: 0 8.25rem 0 2.75rem;
	
	color: rgb(65,69,62);
	line-height: 7.5rem;
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	
	border: 0.25rem rgb(217,217,217) solid;
	border-radius: 1rem;
	
	cursor: pointer;
	
	background-color: rgba(255,255,255);
	background-image: url("/_img/icon.chevron.down.svg");
	background-size: 2.25rem 1.5rem;
	background-position: calc(100% - 3rem) 3.25rem;
	background-repeat: no-repeat;
}
.msbc_co_current.active {
	background-color: rgba(233,237,241);
}

.msbc_co_list {
	width: 100%;
	height: auto;
	max-height: 90rem;
	
	margin: 1rem 0 0 0;
	padding: 1rem;
	
	background: rgba(255,255,255);
	
	border: 0.25rem rgb(228,228,228) solid;
	border-radius: 2rem;
	
	box-shadow:  rgba(31, 35, 40, 0.12) 0px 1px 3px 0px, rgba(66, 74, 83, 0.12) 0px 8px 24px 0px;
	
	display: none;
}
.msbc_co_list.active {
	display: block;
}

.msbc_co_list a {
	height: 8rem;
	
	padding: 0 2rem;
	
	color: var(--textColor);
	line-height: 8rem;
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	
	border: 0;
	
	align-items: center;
}
.msbc_co_list a:hover {
	background: rgb(240,242,244);
}

.msbc_co_divider {
	height: 0.25rem;
	
	margin: 1rem -1rem;
	
	background: rgb(236,236,236);
	
	display: block;
}


/* !!! This is a variant of the company switcher UI component when a user is associated with only one company. */
.msbc_app_company {
	width: 100%;
	max-width: 52rem;
	height: 15.5rem;
	
	margin: 0 auto;
	
	letter-spacing: -0.011em;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 15rem;
	gap: 0;
	
	align-items: center;
	
	border-bottom: 0.25rem rgb(228,228,228) solid;
}
/*  */

/* !!! Supplier Purchase Orders Styles Go Here !!! */

.columns_1_0 .stage_block_list_card {
	max-width: 360rem;
	
	margin: 0 auto;
}

.purchase_orders_list {
	padding: 8rem;
	
	background: rgb(255,255,255);
	
	border-radius: 2rem;
}

.purchase_orders_list .row {
	display: grid;
	grid-template-columns: 32rem 48rem 1fr 0.5fr 24rem 4rem;
	grid-template-rows: auto;
	gap: 4rem;
	
	align-items: center;
}
.purchase_orders_list .row.incl_historic {
	grid-template-columns: 14rem 32rem 48rem 1fr 0.4fr 24rem 4rem;
}

.purchase_orders_list .row.header {
	padding: 0 0 2.25rem 0;
	
	font-weight: 600;
	
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}

.purchase_orders_list a.row {
	height: 9rem;
	
	color: var(--textColor);
	
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}
.purchase_orders_list a.row:hover {
	background: var(--flashNoticeBackground);
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}


/* !!! Shippers Module Styles !!! */

.shippers_list {
	padding: 8rem;
	
	background: rgb(255,255,255);
	
	border-radius: 2rem;
}

.shippers_list .row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 24rem 4rem;
	grid-template-rows: auto;
	gap: 4rem;
	
	align-items: center;
}

.shippers_list .row.header {
	padding: 0 0 2.25rem 0;
	
	font-weight: 600;
	
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}

.shippers_list a.row {
	height: 9rem;
	
	color: var(--textColor);
	
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}
.shippers_list a.row:hover {
	background: var(--flashNoticeBackground);
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
}


/* !!! End of Shippers Module Styles. !!! */


.pill {
	width: 100%;
	
	font-size: 2.25rem;
	font-weight: 640;
	text-align: center;
	line-height: 4.75rem;
	letter-spacing: 0.08em;
	
	text-transform: uppercase;
	
	background: lightgray;
	
	border-radius: 1rem;
}
.pill.open {
	background: gold;
}
.pill.submitted {
	background: lightblue;
}
.pill.delivered {
	background: lightgreen;
}

.temp_po_date {
	font-feature-settings: "tnum" on; 
	white-space-collapse: collapse;
}




/* !!!! Styles for <details> disclosure element to be used in forms. */
/* !!!! Example: Show current storage location configuration in edit form. */

details.form_disclosure {
	width: 100%;
	max-width: 128rem;
	
	background: var(--flashNoticeBackground);
	
	border: 0.25rem var(--flashNoticeBorderColor) solid;
	border-radius: 1rem;
}

details.form_disclosure summary {
	padding: 1rem 3rem;
	
	color: var(--flashNoticeTextColor);
	line-height: 6rem;
	
	cursor: pointer;
}

details.form_disclosure .form_details {
	padding: 3rem;
	
	border-top: 0.25rem var(--flashNoticeBorderColor) solid;
}
details.form_disclosure .line_item {
	display: grid;
	grid-template-columns: 16rem 1fr;
	grid-template-rows: auto;
	gap: 4rem;
	
	align-items: center
}
details.form_disclosure .line_item + .line_item {
	margin-top: 2rem;
}
details.form_disclosure .line_item div:first-of-type {
	text-align: right;
}





/* !!! Special Temporary Override for the ComboBox UI Element */
.ts-dropdown {
	z-index: 1000 !important;
}


/* !!!! Special styles to hide from Safari where the browser’s bugs prevent proper functionality. */

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	.no_safari {
		display: none;
	}
}


/* !!!! Final UI elements. !!!! */
/* -- Will gradually replace the elements prefixed with temp_ listed above. */

.ui_actions_bar_3 {
	display: grid;
	grid-template-rows: auto;
	align-items: center;
	
	border-left: 0.25rem rgb(216,222,228) solid;
}
.ui_actions_bar_3.header {
	border-color: transparent;
}
.ui_actions_bar_3.small {
	max-width: 24.25rem;
	
	padding: 0 0 0 4rem;
	
	grid-template-columns: repeat(3, 4rem);
	gap: 4rem;
}

.logo_preview {
	width: 32rem;
	height: auto;
}


/*  !!!! PO and PO  Line Items !!!! */

turbo-frame#po_line_item_mpn_list {
	display: block;
	
	max-height: 104rem;
	
	overflow-y: scroll !important;
}


.temp_po_line_mpn_row {
	width: 100%;
	height: 9rem;
	
	padding: 0 3rem;
	
	color: var(--textColor);
	line-height: 9rem;
	
	display: grid;
	grid-template-columns: 0.75fr 2fr 0.5fr;
	grid-template-rows: auto;
	gap: 0 6rem;
	
	background: rgb(255,255,255);
}

.temp_po_line_mpn_row:nth-child(odd) {
	background: var(--flashNoticeBackground);
}

.temp_po_line_mpn_row.header {
	height: auto;
	
	padding: 3rem 3rem 2.25rem 3rem;
	
	font-weight: 600;
	line-height: 1;
	
	background: #fff;
	
	border-bottom: 0.25rem var(--rulerColorHorizontalLight) solid;
	
	position: sticky;
	top: 0;
}


/* !!!! Making Overflow Elements ALWAYS SHOW Scrollbars !!!! */

.list_scrollable {
	height: 100%;
	overflow-y: scroll;
	
	/* scrollbar-color: rgb(0,0,0,0.9) rgb(0,0,0,0.1);
	scrollbar-width: thin; */
}

.list_scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.list_scrollable::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.list_scrollable::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.05);
}

/* !!!! Search utility UI Classes !!!! */

.temp_utility_search_results_list {
	display: block;
	
	max-height: 104rem;
	
	overflow-y: scroll !important;
}

/* !!!! More Utility Classes for UI !!!! */

.temp_multi_action_column_03 {
	margin: 6rem 0 0 0;
	padding: 6rem 0 0 0;
	
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto;
	gap: 6rem;
	
	justify-content: start;
	align-items: center;
	
	border-top: 0.25rem var(--rulerColorHorizontalLight) solid;
}

.temp_multi_action_button {
	width: auto;
	
	padding: 0 4rem;
	
	color: rgb(52,70,86);
	line-height: 9.5rem;
	
	background: rgb(246,248,250);
	
	border: 0.25rem rgb(208,215,222) solid;
	border-radius: 1rem;
}


/* Temp Data Row Subgrid Rules */

.temp_data_table {
	width: 100%;
	
	display: grid;
	grid-template-rows: repeat(auto-fit);
	gap: 0 4rem;
}
.temp_data_table.columns_02 {
	grid-template-columns: 32rem 1fr;
}
.temp_data_table.columns_05 {
	grid-template-columns: 48rem 1fr 32rem auto auto;
}

.temp_data_table.columns_02 .temp_data_row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: auto / span 2;
}
.temp_data_table.columns_05 .temp_data_row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: auto / span 5;
	
	
}



.temp_data_row {
	color: var(--textColor);
	line-height: 9.5rem;
	border-bottom: 0.25rem var(--rulerColorHorizontal) solid;
	display: block;
}
.temp_data_row.header {
	font-weight: 600;
	
	background: rgb(255,255,255);
}
.temp_data_row.header.selector_list {
	position: sticky;
	top: 0;
}

.temp_data_row.zebra {
	background: rgb(255,255,255);
	
	border-bottom: 0;
}
.temp_data_row.zebra:nth-of-type(odd) {
	background: var(--flashNoticeBackground);
}

#interim_po_line_items.temp_data_row {
	border-bottom: 0;
}

.temp_data_row.list_poli:nth-last-of-type(1) {
	border-bottom: 0;
}




/* !!!! Special styles for an interim PO system go here. !!!! */


/* !!!! Temporary styles for MPN Builder and builder-like UI elements go here. !!!! */

.builder_step input[type=number] {
	width: 100%;
	max-width: 58.75rem;
	-webkit-appearance: none;
	
	text-align: center;
}

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

.builder_step select {
	width: 100%;
}



.builder_step input[type=checkbox] {
	width: 0;
	height: 0;
	background: orange;
	
	display: none;
}

.builder_step label {
	cursor: pointer;
}


/*  Styles for the builder go here */

/* .mpn_builder {
	max-width: 128rem;
} */

.builder_step {
	width: 100%;
	/* min-height: 10rem;
	height: auto;
	
	padding: 2rem 3rem;
	
	background: rgb(237,239,235);
	
	border-radius: 2rem; */
	
	margin: 0;
	padding: 0 4rem;
	
	font-size: 3.5rem;
	font-weight: 400;
	color: rgb(31,35,40);
	
	background: rgb(247,247,250);
	border: 0.25rem rgb(214,214,214) solid;
	border-radius: 2.5rem 2.5rem 1.75rem 1.75rem;
	
	display: grid;
	grid-template-columns: 1fr;
	/* grid-template-rows: 18rem 9.75rem; */
	grid-template-rows: auto;
}

.builder_step .panel_data {
	padding: 4rem 0;
	
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	justify-content: center;
	align-items: center;
}
.builder_step .panel_data.simple {
	grid-template-columns: 1fr;
}
.builder_step .panel_data.statement {
	height: 12.5rem;
	
	font-weight: 600;
	text-align: center;
}

.builder_step .panel_action {
	height: 9.75rem;
	
	display: grid;
	align-items: center;   

	font-weight: 500;
	text-align: center;
	
	border-top: 0.25rem rgb(209,217,224) solid;
}
.builder_step .panel_action label {
	font-weight: 400;
	opacity: 0.8;
}


.builder_connector_box {
	width: 100%;
	height: 4rem;
}
.builder_connector {
	width: 0.5rem;
	height: 100%;
	margin: 0 auto;
	background: orange;
}


.builder_select_one {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12rem;
	
	background-image: url("/_img/ui.connector.t.inverted.svg");
	background-size: 24rem 6rem;
	background-position: center -1.25rem;
	background-repeat: no-repeat;
}

.builder_select_one label.selector {
	width: 100%;
	
	font-weight: 500;
	text-align: center;
	line-height: 8.5rem;
	
	background: rgb(255,255,255);
	
	border: 0.25rem rgb(217,217,217) solid;
	border-radius: 1rem;
	
	cursor: pointer;
}

/* !!!! */
/* !!!! NEW v2 MPN Builder Styles go here. */

.mpn_builder_wrapper {
	width: 128rem;
	
	padding: 0;
}

.mpn_builder.step {
	padding: 4rem;
	
	/* background: rgb(247,247,250); */
	background: rgb(246,248,250);
	
	/* border: 0.25rem rgb(214,214,214) solid; */
	border: 0.25rem rgb(211,217,223) solid;
	border-radius: 2rem;
}

.mpn_builder.step:has(div.element.frameless) {
	padding: 0;
	border: 0;
	
	background: transparent;
}

.mpn_builder.step + .mpn_builder.step {
	margin: 0;
}
.mpn_builder.step + .mpn_builder.step.reset {
	margin: 5rem 0 0 0;
	padding: 5rem 0 0 0;
	
	border-top: 0.25rem rgb(214,214,214) solid;
	border-radius: 0;
}

/* Individual Snack Builder element styles go here. */

.mpn_builder .element {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 4rem 3rem;
	
	align-items: center;
}

/* .mpn_builder .element select:has(option:checked:not([value=""])):focus {
	border: 0.25rem var(--actionColor) solid;
	box-shadow: 0 0 0 0.25rem var(--actionColor);
} */

.mpn_builder .element select:focus {
	border-color: var(--actionColor);
	outline: none;
}

.mpn_builder .spacer_tag {
	width: 100%;
	height: 14rem;
	
	margin: 0;
	padding: 3rem 0;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	
	background: url("/_img/_mpn/ui.connector.branch.2to1.svg") center top / 59.75rem auto no-repeat;
}
.mpn_builder .spacer_tag.packaging {
	background: url("/_img/_mpn/ui.connector.vertical.gray.svg") calc(50% - 0.25rem) bottom / 0.5rem auto no-repeat;
}
.mpn_builder .spacer_tag .tag {
	width: 8rem;
	height: 8rem;
	
	font-size: 2.75rem;
	font-weight: 700;
	letter-spacing: -0.011em;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	
	border: 0.25rem rgb(214,214,214) solid;
	border-radius: 1000rem;
	
	background: white;
}


.mpn_builder .element.two_columns {
	grid-template-columns: repeat(2, 1fr);
}

.mpn_builder input, select {
	width: 100%;
}

.mpn_builder input[type="number"] {
	text-align: center;
}

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



.mpn_step_connector {
	width: 100%;
	height: 5rem;
	
	margin: 0;
	padding: 0;
	
	box-sizing: border-box;
	
	background: url("/_img/_mpn/ui.connector.vertical.orange.svg") calc(50% - 0.25rem) top / 0.5rem auto repeat-y;
}


.mpn_step_buttons {
	margin: 4rem 0 0 0;
	padding: 4rem 0 0 0;
	
	gap: 8rem;
	
	border-top: 0.25rem rgb(216,218,220) solid;
}

.mpn_step_button {
	font-weight: 500;
	color: rgb(37,51,66);
	line-height: 7.5rem;
	text-align: center;
	
	background: rgb(246,248,250);
	border: 0.25rem rgb(210,217,223) solid;
	border-radius: 1rem;
	
	/* box-sizing: border-box; */
	
	position: relative;
	
	cursor: pointer;
}
.mpn_step_button.hide {
	display: none;
}
.mpn_step_button.single {
	width: 60rem;
	margin: 0 auto;
}

.mpn_step_button input[type="radio"] {
	appearance: none;
	
	margin: 0;
	padding: 0;
	
	width: 0.25rem;
	height: 8rem;
	
	position: absolute;
	left: 50%;
	top: 0;
	z-index: -2;
	
	outline: none;
}

.element.step_splitter {
	gap: 4rem 8rem;
	
	background: url("/_img/_mpn/ui.connector.t.inverted.svg") calc(50% - 0.25rem) 0 / 24rem auto no-repeat;
}

.mpn_step_button.simple {
	margin: 4rem 0 0 0;
	padding: 4rem 0 0 0;
	
	font-weight: 500;
	color: rgb(66,87,108);
	line-height: 1;
	
	border-width: 0.25rem 0 0 0;
	border-radius: 0;
}
.element:has(.mpn_step_button.hide) label.step_button:not(.hide) input[type="radio"] {
	height: 3.75rem;
}


.element.reset {
	margin: 0 auto;
}

.mpn_step_button.reset {
	max-width: 60rem;
	padding: 0 5rem 0 8.25rem;
	margin: 0 auto;
	
	font-weight: 425;
	color: rgba(184,230,254,1.0);
	letter-spacing: 0.025em;
	line-height: 8rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 8rem;
	gap: 2.25rem;
	align-items: center;
	
	background: rgb(37,51,66);
	background-image: url("/_img/ui.revert.icon.svg");
	background-size: 4.5rem auto;
	background-position: 2rem center;
	background-repeat: no-repeat;
	
	border: 0rem rgb(210,217,223) solid;
	border-radius: 250rem;
}
.mpn_step_button.reset img {
	width: 4.5rem;
	height: auto;
}

.mpn_step_connector.reset {
	height: 20rem;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	
	background: url("/_img/_mpn/ui.connector.vertical.gray.svg") calc(50% - 0.25rem) 0 / 0.5rem auto repeat-y;
}

.mpn_step_connector.reset div {
	width: 8rem;
	height: 8rem;
	
	font-size: 2.75rem;
	font-weight: 700;
	text-align: center;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	
	background: white;
	border: 0.5rem rgb(210,217,223) solid;
	border-radius: 1000rem;
}


.mpn_builder.step:has(> .step_splitter) + .mpn_step_connector.reset {
	margin: -3.75rem 0 0 0;
	padding: 4rem 0 0 0;
}


/* Temporary UI marker badges. */

.tui_badge {
	width: auto;
	
	margin: 0 0 0 8rem;
	padding: 1.25rem 2rem;
	
	font-size: 2.5rem;
	font-weight: 700;
	color: rgb(92,92,92);
	line-height: 1 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	
	display: inline-block;
	
	background: rgb(232,235,238);
	border-radius: 1rem;
}
.tui_badge.standard::before {
	content: "Temporary UI"
}

.tui_badge.brown_on_gold {
	color: rgba(128,78,19,1.0);
	background: rgba(253,249,200,1.0);
	/* border: 0.25rem rgba(245,234,198,1.0) solid; */
	border: 0.25rem rgba(128,78,19,0.3) solid;
}

.tui_badge.light_on_dark_green {
	color: rgba(242,253,245,1.0);
	background: rgba(51,128,63,1.0);
}

.tui_badge.added_to_po::before {
	content: "Added to the PO"
}

.tui_badge.place_left {
	margin: 0 3rem 0 0;
}

/* Details Tag styles. */

details summary {
	cursor: pointer;
}

details.po_inset {
	width: 100%;
	
	background: rgb(246,248,250);
	border: 0.25rem rgb(210,217,223) solid;
	border-radius: 1.5rem;
}

details.po_inset summary {
	padding: 3rem 4rem;
	font-weight: 700;
	
	list-style-type: "\2193";
	list-style-position: outside;
	
	margin-left: 6.75rem;
}
details[open].po_inset summary {
	list-style-type: "\2191";
}

details.po_inset summary > div {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	gap: 6rem;
	
	align-items: center;
}

details[open] summary {
	transition: list-style-type 400ms linear;
}

details div.content {
	max-height: 0;
	padding: 3rem 4rem;
	
	border-top: 0.25rem rgb(210,217,223) solid;
	
	overflow: hidden;
	transition: max-height 400ms ease-out;
}
details[open] div.content {
	max-height: 320rem;
}

details.po_inset.poli .content div + div {
	margin-top: 2rem;
}


/* Special styles for disabled elements (not-allowed cursors, etc.) */

.not_allowed {
	color: rgba(65,69,82,0.6);
	cursor: not-allowed;
}