/**
 * @package     codeDESIGN.CadCamCompany
 * @purpose     Responsive operational interface for dental order management.
 * @date        2026-10-30
 * @file        /assets/app.css
 * @author      Milos Mandic | codeDESIGN
 */
@charset "utf-8";

/* BASE AND FORM CONTROLS */
:root {
	--ci_color: #35a9da;
	--ci_color_black: #242424;
	--ci_color_white: #ffffff;
	--ci_color_grey: #888888;
	--ci_color_medium_grey: #555555;
	--ci_color_dark_grey: #424242;
	--ci_color_light_grey: #eff1f2;
	--ci_color_blue: #207dac;
	--ci_color_light_blue: #35a9da;
	--ci_color_3: #0074a5;
	--ink: var(--ci_color_black);
	--muted: var(--ci_color_medium_grey);
	--line: #dce3e8;
	--accent: var(--ci_color_blue);
	--cyan: #e6f5fb;
	--green: #23724b;
	--radius: 5px;
}
* {
	box-sizing: border-box;
	letter-spacing: 0;
}
body {
	background: var(--ci_color_light_grey);
	margin: 0px 0px 0px 0px;
	font: 400 14px/1.5 "Segoe UI", Arial, sans-serif;
	color: var(--ink);
}
button, input, select, textarea {
	font: inherit;
}
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
button, summary, select {
	cursor: pointer;
}
button:disabled {
	opacity: 0.55;
	cursor: wait;
}
:focus-visible {
	outline: 3px solid var(--ci_color_blue);
	outline-offset: 3px;
}
h1, h2, h3 {
	margin: 0px 0px 0px 0px;
	font-weight: 600;
	line-height: 1.25;
}
h1 {
	font-size: 27px;
}
h2 {
	font-size: 17px;
}
small {
	display: block;
	font-size: 12px;
	color: var(--muted);
}
input:not([type="checkbox"]):not([type="file"]), select, textarea {
	background: #ffffff;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	border: 1px solid #cbd5dc;
	border-radius: var(--radius);
	padding: 8px 11px 8px 11px;
	color: var(--ink);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--accent);
}
div.field {
	min-width: 0;
}
div.field label {
	margin: 0px 0px 6px 0px;
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #46545e;
}
span.required {
	color: #b44343;
}
a.button, button.button {
	min-height: 40px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 9px 15px 9px 15px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
a.button_primary, button.button_primary {
	background: var(--accent);
	color: #ffffff;
}
a.button_primary:hover, button.button_primary:hover {
	background: var(--ci_color_3);
}
a.button_secondary, button.button_secondary {
	background: #ffffff;
	border-color: #cbd5dc;
	color: #33444e;
}
a.button_secondary:hover, button.button_secondary:hover {
	background: #f0f5f8;
}
button.button_danger {
	background: #ae3232;
	color: #ffffff;
}
button.button_quiet {
	background: transparent;
	color: #795151;
}
a.icon_button, button.icon_button {
	background: transparent;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--radius);
	padding: 0px 0px 0px 0px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #5c6c77;
	text-decoration: none;
	flex: 0 0 36px;
}
a.icon_button:hover, button.icon_button:hover {
	background: #e8f1f6;
	color: var(--accent);
}
span.sr_only, div.sr_only, label.sr_only, a.skip_link:not(:focus) {
	width: 1px;
	height: 1px;
	position: absolute;
	margin: -1px -1px -1px -1px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
a.skip_link:focus {
	background: #ffffff;
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 12px 18px 12px 18px;
}



/* APPLICATION NAVIGATION */
aside.sidebar {
	background: #ffffff;
	width: 236px;
	height: 100dvh;
	border-right: 1px solid var(--line);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	padding: 25px 16px 18px 16px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
a.brand {
	min-height: 53px;
	margin: 0px 0px 23px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
a.brand img {
	width: 180px;
	height: 42px;
	object-fit: contain;
}
div.workspace_label {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 0px 0px 24px 0px;
	padding: 16px 0px 16px 0px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
}
span.workspace_mark {
	background: #edf5f8;
	width: 35px;
	height: 35px;
	border: 1px solid #d7e8ef;
	border-radius: 5px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: var(--accent);
}
div.navigation_label {
	margin: 18px 10px 8px 10px;
	font-size: 10px;
	font-weight: 700;
	color: #7b8790;
	text-transform: uppercase;
}
a.navigation_link {
	min-height: 42px;
	border-radius: 5px;
	margin: 3px 0px 3px 0px;
	padding: 10px 12px 10px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: #52606b;
	text-decoration: none;
}
a.navigation_link i {
	width: 18px;
	text-align: center;
}
a.navigation_link:hover {
	background: #f5f8fa;
	color: var(--ink);
}
a.navigation_link.active {
	background: #e9f5fa;
	font-weight: 600;
	color: var(--ci_color_blue);
}



/* APPLICATION NAVIGATION - SUPPORT CONTACTS */
section.sidebar_support {
	background: #f2f9fc;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 20px 0px 18px 0px;
	padding: 12px 10px 12px 10px;
	font-size: 11px;
	color: var(--muted);
}
h2.sidebar_support_title {
	margin: 0px 0px 8px 0px;
	display: flex;
	align-items: center;
	font-size: 13px;
	color: var(--accent);
	gap: 7px;
}
div.sidebar_support_person {
	margin: 12px 0px 0px 0px;
	font-weight: 600;
	white-space: nowrap;
}
dl.sidebar_support_contacts {
	margin: 8px 0px 0px 0px;
	display: grid;
	font-size: 10.5px;
	line-height: 1.5;
	grid-template-columns: 40px minmax(0px, 1fr);
	column-gap: 6px;
	row-gap: 7px;
}
dl.sidebar_support_contacts dt {
	font-weight: 600;
	white-space: nowrap;
}
dl.sidebar_support_contacts dd {
	min-width: 0px;
	margin: 0px 0px 0px 0px;
	white-space: nowrap;
}
dl.sidebar_support_contacts a {
	color: var(--accent);
}



/* APPLICATION NAVIGATION - COPYRIGHT FOOTER */
div.sidebar_footer {
	border-top: 1px solid var(--line);
	margin: auto 8px 0px 8px;
	padding: 22px 0px 0px 0px;
	font-size: 11px;
	color: #76838c;
}
div.application_main {
	min-width: 0;
	margin: 0px 0px 0px 236px;
}
header.topbar {
	background: rgba(255,255,255,0.97);
	min-height: 76px;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 12px 34px 12px 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}
div.breadcrumb {
	font-size: 12px;
	color: #80909b;
}
div.breadcrumb span {
	margin: 0px 13px 0px 13px;
	color: #bac5cd;
}
div.breadcrumb strong {
	font-weight: 500;
	color: #45545f;
}
div.topbar_actions {
	display: flex;
	align-items: center;
	gap: 23px;
}
span.environment_label {
	background: #fff9eb;
	border: 1px solid #eadbb5;
	border-radius: 4px;
	padding: 3px 7px 3px 7px;
	font-size: 9px;
	font-weight: 700;
	color: #806125;
}
details.account_menu {
	position: relative;
}
details.account_menu summary {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
}
details.account_menu summary::-webkit-details-marker {
	display: none;
}
details.account_menu summary > i {
	font-size: 10px;
	color: #76848e;
}
span.avatar {
	background: #e9f0f4;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	color: #426474;
}
span.account_name {
	font-size: 12px;
	font-weight: 600;
}
span.account_name small {
	font-size: 10px;
	font-weight: 400;
}
div.account_dropdown {
	background: #ffffff;
	width: 190px;
	border: 1px solid var(--line);
	border-radius: 5px;
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	padding: 6px 6px 6px 6px;
	box-shadow: 0px 8px 24px rgba(18,39,50,0.1);
}
div.account_dropdown a, div.account_dropdown button {
	background: transparent;
	width: 100%;
	border: 0;
	padding: 10px 12px 10px 12px;
	display: block;
	color: var(--ink);
	text-align: left;
}
div.account_dropdown a:hover, div.account_dropdown button:hover {
	background: #f1f6f9;
}
button.navigation_toggle, div.navigation_backdrop {
	display: none;
}
main.main_content {
	max-width: 1800px;
	margin: 0px auto 0px auto;
	padding: 34px 34px 48px 34px;
}



/* PAGE HEADINGS AND OPERATIONAL OVERVIEW */
div.page_heading {
	min-height: 67px;
	margin: 0px 0px 25px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
div.page_subtitle {
	margin: 7px 0px 0px 0px;
	font-size: 12px;
	color: var(--muted);
}
div.heading_actions, div.document_actions, div.form_actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
div.section_heading {
	min-height: 53px;
	margin: 0px 0px 14px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
a.text_link {
	font-size: 12px;
	font-weight: 600;
}
a.text_link i {
	margin: 0px 0px 0px 7px;
	font-size: 10px;
}
div.metric_grid {
	margin: 0px 0px 30px 0px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0px, 1fr));
	gap: 17px;
}
a.metric {
	background: #ffffff;
	min-height: 116px;
	border: 1px solid var(--line);
	border-radius: 6px;
	position: relative;
	padding: 20px 20px 20px 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}
a.metric:hover {
	border-color: #99bbcb;
}
span.metric_label {
	display: block;
	font-size: 12px;
	color: var(--muted);
}
a.metric strong {
	margin: 9px 0px 0px 0px;
	display: block;
	font-size: 29px;
	font-weight: 600;
	line-height: 1.15;
}
span.metric_icon {
	width: 34px;
	height: 34px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
span.metric_icon.cyan {
	background: #e8f5fb;
	color: #09769d;
}
span.metric_icon.amber {
	background: #fff6e6;
	color: #ac711b;
}
span.metric_icon.green {
	background: #eaf6ee;
	color: #38855c;
}
span.metric_icon.muted {
	background: #f0f2f5;
	color: #788795;
}
span.metric_arrow {
	position: absolute;
	right: 22px;
	bottom: 18px;
	font-size: 10px;
	color: #bdcbd3;
	transform: rotate(45deg);
}
section.work_queue {
	border-top: 1px solid var(--line);
	padding: 9px 0px 0px 0px;
}
div.dashboard_bottom {
	margin: 30px 0px 0px 0px;
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 34px;
}
div.dashboard_bottom > section {
	border-top: 1px solid var(--line);
	padding: 8px 0px 0px 0px;
}
a.recent_upload {
	border-bottom: 1px solid #e6ebef;
	padding: 13px 0px 13px 0px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
}
a.recent_upload > div {
	flex: 1;
}
a.recent_upload strong {
	font-size: 13px;
}
span.file_icon {
	background: #eaf1f6;
	width: 35px;
	height: 39px;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #688496;
}
div.summary_line {
	min-height: 41px;
	padding: 9px 0px 9px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	font-size: 13px;
}
div.summary_line > span:first-child {
	color: var(--muted);
}
div.summary_line strong {
	font-weight: 600;
}



/* FILTERS TABLES AND PAGINATION */
form.filter_toolbar {
	margin: 0px 0px 20px 0px;
	display: flex;
	align-items: end;
	gap: 12px;
	flex-wrap: wrap;
}
div.search_field {
	min-width: 220px;
	position: relative;
	flex: 1;
}
div.search_field > i {
	position: absolute;
	top: 14px;
	left: 13px;
	color: #8997a0;
}
div.search_field input {
	padding-left: 37px !important;
}
form.filter_toolbar div.field {
	max-width: 200px;
}
form.filter_toolbar > div.field label {
	font-size: 10px;
}
details.advanced_filters {
	position: relative;
}
details.advanced_filters > summary {
	background: #ffffff;
	min-height: 40px;
	border: 1px solid #cbd5dc;
	border-radius: 5px;
	padding: 9px 12px 9px 12px;
	font-size: 12px;
	list-style: none;
}
div.advanced_filter_body {
	background: #ffffff;
	width: 380px;
	max-width: calc(100vw - 40px);
	border: 1px solid var(--line);
	border-radius: 5px;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 15;
	padding: 18px 18px 18px 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	box-shadow: 0px 12px 28px rgba(24,45,56,0.12);
}
div.table_container {
	background: #ffffff;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 5px;
	overflow-x: auto;
}
table.data_table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
table.data_table th {
	background: #f8fafb;
	border-bottom: 1px solid var(--line);
	padding: 12px 15px 12px 15px;
	font-size: 11px;
	font-weight: 600;
	color: #73818b;
	white-space: nowrap;
}
table.data_table td {
	border-bottom: 1px solid #e9eef1;
	padding: 13px 15px 13px 15px;
	font-size: 12px;
	vertical-align: middle;
}
table.data_table th:first-child,
table.data_table td:first-child {
	width: 80px;
	min-width: 80px;
	max-width: 80px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
table.data_table tr:last-child td {
	border-bottom: 0;
}
table.data_table tbody tr:hover {
	background: #f9fcfd;
}
table.data_table td strong {
	font-weight: 500;
}
table.data_table td small {
	margin: 3px 0px 0px 0px;
	font-size: 11px;
}
a.order_number, a.record_name {
	font-weight: 600;
}
a.sort_link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
}
a.sort_link i {
	font-size: 9px;
	color: #a7b3bc;
}
td.amount_cell, th.amount_cell {
	text-align: right;
	white-space: nowrap;
}
td.row_actions {
	white-space: nowrap;
	text-align: right;
}
td.row_actions form {
	display: inline;
}
td.filename_cell {
	max-width: 280px;
	overflow-wrap: anywhere;
}
span.status_badge {
	background: #f0f2f5;
	border-radius: 4px;
	padding: 4px 8px 4px 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}
span.status_badge > span {
	background: currentColor;
	width: 5px;
	height: 5px;
	border-radius: 50%;
}
span.status_new {
	background: #edf3fa;
	color: #4a6990;
}
span.status_accepted {
	background: #e8f5fa;
	color: #1f7897;
}
span.status_production {
	background: #fff5e6;
	color: #9d6c20;
}
span.status_ready {
	background: #eaf6ed;
	color: #2e7950;
}
span.status_shipped {
	background: #eef1f4;
	color: #6d7a85;
}
span.status_cancelled {
	background: #fff0f0;
	color: #a52f2f;
}
div.mini_progress {
	display: flex;
	gap: 5px;
}
div.mini_progress > span {
	background: #f1f4f6;
	width: 20px;
	height: 20px;
	border: 1px solid #e2e8ed;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 8px;
	color: #b4c0c8;
}
div.mini_progress > span.complete {
	background: #e8f6ee;
	border-color: #cae8d6;
	color: #3b8a5e;
}
div.pagination_bar {
	margin: 18px 0px 0px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	font-size: 11px;
	color: var(--muted);
}
nav.pagination {
	display: flex;
	gap: 5px;
}
nav.pagination a {
	background: #ffffff;
	min-width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 6px 8px 6px 8px;
	color: var(--muted);
	text-align: center;
}
nav.pagination a.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}
div.filtered_total {
	border-top: 1px solid var(--line);
	margin: 25px 0px 0px 0px;
	padding: 18px 0px 0px 0px;
	display: flex;
	justify-content: flex-end;
	gap: 25px;
	font-size: 13px;
}
nav.view_tabs {
	border-bottom: 1px solid var(--line);
	margin: 0px 0px 25px 0px;
	display: flex;
	gap: 22px;
}
nav.view_tabs a {
	border-bottom: 2px solid transparent;
	padding: 10px 0px 12px 0px;
	font-size: 13px;
	color: var(--muted);
}
nav.view_tabs a.active {
	border-color: var(--accent);
	font-weight: 600;
	color: var(--accent);
}



/* FORMS AND ORDER DETAIL */
div.form_layout {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) 300px;
	align-items: start;
	gap: 30px;
}
section.form_section, section.detail_section {
	border-top: 1px solid var(--line);
	margin: 0px 0px 25px 0px;
	padding: 20px 0px 0px 0px;
}
section.form_section > h2, section.detail_section > h2 {
	margin: 0px 0px 18px 0px;
}
div.form_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0px, 1fr));
	gap: 18px 22px;
}
span.section_number {
	background: #e9f2f7;
	width: 27px;
	height: 27px;
	border-radius: 4px;
	margin: 0px 9px 0px 0px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 11px;
	color: #51788b;
}
div.price_rate {
	margin: 16px 0px 0px 0px;
	font-size: 12px;
	color: var(--muted);
}
div.price_rate strong {
	margin: 0px 0px 0px 8px;
	color: var(--ink);
}
aside.order_summary {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: 6px;
	position: sticky;
	top: 100px;
	padding: 23px 20px 20px 20px;
}
aside.order_summary h2 {
	margin: 0px 0px 20px 0px;
}
aside.order_summary div.field {
	margin: 13px 0px 13px 0px;
}
aside.order_summary > a, aside.order_summary > button {
	width: 100%;
	margin: 10px 0px 0px 0px;
}
div.summary_grand_total {
	border-top: 1px solid var(--line);
	margin: 12px 0px 12px 0px;
	padding: 17px 0px 8px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
div.summary_grand_total strong {
	font-size: 21px;
}
div.order_line {
	border-bottom: 1px solid var(--line);
	margin: 0px 0px 18px 0px;
	padding: 0px 0px 18px 0px;
}
div.line_header {
	margin: 0px 0px 12px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}
div.line_fields {
	display: grid;
	grid-template-columns: 1fr 2fr 80px 85px;
	gap: 12px;
}
div.line_totals {
	margin: 14px 0px 0px 0px;
	display: flex;
	justify-content: flex-end;
	gap: 24px;
	font-size: 11px;
	color: var(--muted);
}
div.line_totals strong {
	margin: 0px 0px 0px 8px;
	color: var(--ink);
}
fieldset.tooth_picker {
	border: 0;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
fieldset.tooth_picker legend {
	margin: 0px 0px 9px 0px;
	font-size: 12px;
	font-weight: 600;
}
div.tooth_rows {
	display: grid;
	gap: 5px;
}
div.tooth_row {
	display: grid;
	grid-template-columns: repeat(16, minmax(0px, 1fr));
	gap: 4px;
}
button.tooth {
	background: #ffffff;
	min-width: 0;
	min-height: 34px;
	border: 1px solid #cfdce4;
	border-radius: 4px;
	padding: 3px 1px 3px 1px;
	font-size: 10px;
	color: #5a7180;
}
button.tooth[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}
div.form_actions {
	border-top: 1px solid var(--line);
	margin: 24px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	justify-content: flex-end;
}
form.entity_form {
	max-width: 1100px;
}
form.upload_form {
	max-width: 850px;
}
div.order_detail_header {
	margin: -7px 0px 26px 0px;
	display: flex;
	align-items: center;
	gap: 17px;
	color: var(--muted);
}
div.status_controls {
	display: grid;
	grid-template-columns: repeat(5, minmax(0px, 1fr));
	gap: 16px;
}
label.switch_label {
	background: #ffffff;
	min-height: 59px;
	border: 1px solid var(--line);
	border-radius: 5px;
	position: relative;
	padding: 14px 12px 14px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	cursor: pointer;
}
label.switch_label input {
	width: 34px;
	height: 22px;
	position: absolute;
	right: 12px;
	opacity: 0;
}
span.switch_track {
	background: #dce4e9;
	width: 34px;
	height: 20px;
	border-radius: 12px;
	position: relative;
	flex: 0 0 34px;
}
span.switch_track::after {
	background: #ffffff;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	content: "";
	transition: transform 120ms;
}
label.switch_label input:checked + span.switch_track {
	background: #2f8d61;
}
label.switch_label input:checked + span.switch_track::after {
	transform: translateX(14px);
}
label.switch_label input:focus-visible + span.switch_track {
	outline: 3px solid #67c7ed;
	outline-offset: 3px;
}
div.status_readonly {
	border-bottom: 2px solid #dce4e9;
	padding: 12px 0px 12px 0px;
	font-size: 12px;
	color: #7d8b94;
}
div.status_readonly.complete {
	border-color: #78b997;
	color: #28784d;
}
div.status_readonly i {
	margin: 0px 8px 0px 0px;
}
div.detail_grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 36px;
}
dl.detail_list {
	margin: 0px 0px 0px 0px;
}
dl.detail_list > div {
	border-bottom: 1px solid #e6ebef;
	padding: 11px 0px 11px 0px;
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 15px;
	font-size: 13px;
}
dl.detail_list dt {
	color: var(--muted);
}
dl.detail_list dd {
	margin: 0px 0px 0px 0px;
	overflow-wrap: anywhere;
}
div.address {
	font-size: 13px;
	line-height: 1.9;
}
div.detail_totals {
	width: 380px;
	max-width: 100%;
	margin: 16px 0px 0px auto;
}



/* ORDER DETAILS AND DOCUMENT ACTIONS */
body.order_detail_page div.notice:not(.notice_success):not(.notice_error) {
	background: #e8f4fb;
	border-color: #b9d9e9;
	color: #284c63;
}
body.order_detail_page div.order_detail_header {
	flex-wrap: wrap;
}
body.order_detail_page div.order_detail_header span.status_badge {
	padding: 6px 10px 6px 10px;
	font-size: 12px;
}
body.order_detail_page div.order_detail_header span.status_shipped {
	background: #e1f2e8;
	border: 1px solid #a9cdb6;
	color: #215f3d;
}
body.order_detail_page div.detail_grid {
	grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr);
}
body.order_detail_page section.detail_section {
	min-width: 0px;
}
body.order_detail_page section.detail_section > div.section_heading {
	min-height: 0px;
	margin: 0px 0px 18px 0px;
	flex-wrap: wrap;
}
body.order_detail_page div.status_readonly {
	background: #ffffff;
	min-height: 68px;
	border: 1px solid var(--line);
	-webkit-border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	border-radius: var(--radius);
	padding: 12px 12px 12px 12px;
	display: grid;
	align-items: center;
	color: var(--muted);
	grid-template-columns: 18px minmax(0px, 1fr);
	column-gap: 10px;
	row-gap: 2px;
}
body.order_detail_page div.status_readonly.complete {
	background: #f3faf6;
	border-color: #b6d8c4;
	color: var(--green);
}
body.order_detail_page div.status_readonly > i {
	margin: 0px 0px 0px 0px;
	font-size: 16px;
	grid-row: 1 / 3;
}
body.order_detail_page div.status_readonly > span {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
}
body.order_detail_page div.status_readonly > small {
	font-size: 11px;
	color: inherit;
	grid-column: 2;
	line-height: 1.3;
}
body.order_detail_page div.document_actions {
	align-items: stretch;
}
body.order_detail_page div.document_actions > form {
	margin: 0px 0px 0px 0px;
	display: flex;
}
body.order_detail_page form.archive_order {
	border-top: 1px solid var(--line);
	margin: 24px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	display: flex;
	justify-content: flex-end;
}



/* ORDER EDITOR CHECKBOXES */
label.checkbox_label {
	display: flex;
	align-items: center;
	gap: 9px;
}



/* LOGIN UPLOADS AND DIALOGS */
body.login_page {
	background: #ffffff;
	min-height: 100dvh;
	display: grid;
	place-items: center;
}
main.login_content {
	width: 380px;
	max-width: calc(100% - 40px);
	padding: 45px 0px 35px 0px;
}
div.login_brand {
	border-bottom: 1px solid var(--line);
	margin: 0px 0px 35px 0px;
	padding: 0px 0px 24px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}
div.login_brand img {
	width: 384px;
	max-width: 100%;
	height: auto;
}
div.eyebrow {
	margin: 0px 0px 10px 0px;
	font-size: 12px;
	color: var(--muted);
}
section.login_form_section h1 {
	margin: 0px 0px 30px 0px;
	font-size: 28px;
}
form.login_form div.field {
	margin: 0px 0px 21px 0px;
}
form.login_form input:not([type="checkbox"]) {
	min-height: 46px;
}
div.password_field {
	position: relative;
}
button.password_toggle {
	position: absolute;
	top: 29px;
	right: 6px;
}
div.password_field input {
	padding-right: 47px !important;
}
button.login_submit {
	width: 100%;
	min-height: 45px;
	margin: 5px 0px 0px 0px;
	justify-content: space-between;
}
div.login_footer {
	margin: 35px 0px 0px 0px;
	font-size: 11px;
	color: #84919b;
	text-align: center;
}
div.login_footer i {
	margin: 0px 7px 0px 0px;
}
label.file_dropzone {
	background: #fafcfd;
	min-height: 240px;
	border: 2px dashed #c8d9e3;
	border-radius: 6px;
	margin: 24px 0px 0px 0px;
	padding: 30px 20px 30px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	text-align: center;
	cursor: pointer;
}
label.file_dropzone > i {
	font-size: 34px;
	color: #4d9bb8;
}
label.file_dropzone input {
	max-width: 100%;
	font-size: 12px;
}
progress {
	width: 100%;
	height: 12px;
	margin: 15px 0px 15px 0px;
	accent-color: var(--accent);
}
dialog {
	background: #ffffff;
	width: 660px;
	max-width: calc(100vw - 32px);
	max-height: calc(100dvh - 32px);
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 32px 30px 28px 30px;
	color: var(--ink);
	box-shadow: 0px 24px 100px rgba(0,0,0,0.2);
}
dialog::backdrop {
	background: rgba(19,32,40,0.4);
}
dialog.confirm_dialog {
	width: 430px;
}
dialog.confirm_dialog h2 {
	margin: 0px 0px 15px 0px;
}
button.dialog_close {
	position: absolute;
	top: 9px;
	right: 9px;
}
dialog div.page_heading h1 {
	font-size: 21px;
}
div.notice {
	border: 1px solid #cbe5d5;
	border-radius: 5px;
	margin: 0px 0px 22px 0px;
	padding: 10px 13px 10px 13px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}
div.notice > span {
	flex: 1;
}
div.notice_success {
	background: #edf8f1;
	color: #2b744b;
}
div.notice_error {
	background: #fff0ef;
	border-color: #f1d0cd;
	color: #983f37;
}
div.empty_state {
	padding: 45px 15px 45px 15px;
	text-align: center;
}
div.empty_state > i {
	margin: 0px 0px 16px 0px;
	font-size: 26px;
	color: #9cabb6;
}
div.empty_state h1, div.empty_state h2 {
	margin: 0px 0px 15px 0px;
}
div.quiet_empty {
	padding: 27px 0px 27px 0px;
	font-size: 12px;
	color: var(--muted);
}
span.subtle_label {
	font-size: 11px;
	color: var(--muted);
}



/* RESPONSIVE APPLICATION */
@media (max-width: 1250px) {

	main.main_content {
		padding: 28px 22px 38px 22px;
	}
	header.topbar {
		padding: 12px 22px 12px 22px;
	}
	div.metric_grid {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
	}
	div.form_layout {
		grid-template-columns: minmax(0px, 1fr);
	}
	aside.order_summary {
		max-width: 500px;
		position: static;
	}
	div.status_controls {
		grid-template-columns: repeat(3, minmax(0px, 1fr));
	}
	table.order_table th.production_heading {
		min-width: 130px;
	}

}
@media (max-width: 900px) {

	body.order_detail_page div.detail_grid {
		grid-template-columns: minmax(0px, 1fr);
	}
	aside.sidebar {
		transform: translateX(-100%);
		transition: transform 150ms;
	}
	body.navigation_open aside.sidebar {
		transform: translateX(0);
	}
	div.application_main {
		margin: 0px 0px 0px 0px;
	}
	button.navigation_toggle {
		display: inline-flex;
	}
	header.topbar {
		min-height: 66px;
	}
	body.navigation_open div.navigation_backdrop {
		background: rgba(19,32,40,0.3);
		position: fixed;
		inset: 0;
		z-index: 25;
		display: block;
	}

}
@media (max-width: 650px) {

	body {
		font-size: 14px;
	}
	h1 {
		font-size: 23px;
	}
	main.main_content {
		padding: 23px 16px 35px 16px;
	}
	header.topbar {
		padding: 10px 14px 10px 14px;
	}
	div.breadcrumb {
		font-size: 11px;
	}
	div.breadcrumb span {
		margin: 0px 6px 0px 6px;
	}
	span.account_name, div.topbar_actions > span.environment_label {
		display: none;
	}
	div.topbar_actions {
		gap: 9px;
	}
	div.page_heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 17px;
	}
	div.heading_actions {
		width: 100%;
	}
	div.metric_grid {
		gap: 10px;
	}
	a.metric {
		min-height: 106px;
		padding: 15px 12px 15px 12px;
	}
	span.metric_label {
		font-size: 10px;
	}
	span.metric_icon {
		width: 26px;
		height: 26px;
		font-size: 11px;
	}
	a.metric strong {
		font-size: 25px;
	}
	div.dashboard_bottom, div.detail_grid, div.form_grid {
		grid-template-columns: minmax(0px, 1fr);
		gap: 20px;
	}
	body.order_detail_page div.detail_grid {
		grid-template-columns: minmax(0px, 1fr);
	}
	div.search_field {
		min-width: 100%;
	}
	form.filter_toolbar {
		gap: 10px;
	}
	form.filter_toolbar > div.field {
		max-width: none;
		flex: 1 1 100px;
	}
	input:not([type="checkbox"]):not([type="file"]), select, textarea {
		font-size: 16px;
	}
	details.advanced_filters {
		position: static;
	}
	div.advanced_filter_body {
		width: 100%;
		position: absolute;
		top: auto;
		left: 16px;
		right: auto;
		margin: 8px 0px 0px 0px;
	}
	div.table_container {
		background: transparent;
		border: 0;
		overflow: visible;
	}
	table.data_table, table.data_table tbody {
		display: block;
	}
	table.data_table thead {
		display: none;
	}
	table.data_table tbody tr {
		background: #ffffff;
		border: 1px solid var(--line);
		border-radius: 5px;
		margin: 0px 0px 12px 0px;
		padding: 12px 13px 12px 13px;
		display: block;
	}
	table.data_table tbody td {
		max-width: 100%;
		border: 0;
		padding: 7px 0px 7px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 15px;
		text-align: right;
		flex-wrap: wrap;
	}
	table.data_table tbody td:first-child {
		width: 100%;
		min-width: 0px;
		max-width: none;
	}
	table.data_table tbody td[data-label]::before {
		font-size: 11px;
		color: var(--muted);
		text-align: left;
		content: attr(data-label);
	}
	table.data_table tbody td strong {
		max-width: 70%;
		text-align: right;
	}
	table.data_table tbody td small {
		width: 100%;
		margin: -2px 0px 0px 0px;
		text-align: right;
	}
	table.data_table tbody td.row_actions {
		border-top: 1px solid #edf1f4;
		margin: 6px 0px 0px 0px;
		padding: 5px 0px 0px 0px;
		justify-content: flex-end;
	}
	div.pagination_bar {
		align-items: flex-start;
		flex-direction: column;
	}
	div.line_fields {
		grid-template-columns: 1fr 1fr;
	}
	div.tooth_row {
		grid-template-columns: repeat(8, minmax(0px, 1fr));
		gap: 4px;
	}
	button.tooth {
		min-height: 36px;
		font-size: 12px;
	}
	div.status_controls {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
		gap: 9px;
	}
	dl.detail_list > div {
		grid-template-columns: 120px minmax(0px, 1fr);
	}
	div.document_actions > a, div.document_actions > form, div.document_actions form button {
		width: 100%;
	}
	dialog {
		padding: 35px 20px 22px 20px;
	}
	div.summary_grand_total strong {
		font-size: 19px;
	}

}
@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}

}