:root {
	--listbox-indent-step: 16px;
	--listbox-twisty-size: 16px;
	--z-index-base: 0;
	--z-index-overlay: 100; /* Headers, dropdown menus, etc. */
	--z-index-hover: 150; /* Tooltips, etc. */
	--z-index-modal: 200; /* Dialog boxes, etc. */
	--z-index-top: 1000; /* Topmost elements */

	--grid-bar-height: 56px;
	--grid-bar-font-size: 14pt;
}

@media (max-width: 768px) {
  :root {
	--grid-bar-height: 48px;
	--grid-bar-font-size:12pt;
  }
}

@media (max-width: 480px) {
  :root {
	--grid-bar-height: 40px;
	--grid-bar-font-size:11pt;
  }
}

html {
	height: 100%;
}

body {
	display: flex;
	display: -webkit-flex;
	margin: 0;
	height: 100%;
	overflow-y: hidden;

	font-family: var(--typeface_Default);
	font-size: 11pt;
}

/* PROGRAM HOST */

.uictrl_ProgramFrame {
	display:flex;
	flex-direction:column;
	box-sizing:border-box;

	width:100%;
	height:100%;
}

.uictrl_ProgramContent {

	display: flex;
	flex-direction: column;

	/*	Must specify height so that content scrolls.
		80px is height of header */

	height: 100%;
	width: 100%;
	background-color: var(--color_Grayscale_20);
}

/* GRID BAR */

.uictrl_GridBarFrame {
	display:flex;
	flex-direction:column;
	width:100%;
}

.uictrl_GridBar {
	display: flex;
	flex-direction: row;

	height: var(--grid-bar-height);
	background-color: var(--color_Ink);
}

.uictrl_GridBarCommand {
	padding: 0 var(--grid-bar-font-size);

	color: var(--color_Paper);
	font-family: var(--typeface_Heading);
	font-size: var(--grid-bar-font-size);
	font-weight: bold;
	line-height: var(--grid-bar-height);

	text-decoration: none;
	cursor: pointer;
}

.uictrl_GridBarCommand:hover {
	background-color: var(--color_Solid);
}

.uictrl_GridBarCommandSelected {
	border-bottom: 4px solid var(--color_Solid);		/* Primary */
	background-color: var(--color_Dark);
}

/* This is for the program icon and user icon */

.uictrl_GridBarIcon {
	width:var(--grid-bar-height);
	background-color:#808080;
}

.uictrl_GridBarIcon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* This is for the notification icons */

.uictrl_GridBarCmdIcon {
	position:relative;
	display: inline-block;
	line-height: 0;
}

.uictrl_GridBarCmdIconBadge {
	position: absolute;
	top: -6px;
	right: -6px;

	min-width: 20px;
	height: 20px;
	padding: 0 5px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	border: 1px solid #111;    /* optional: helps badge pop over light icons */
	background: var(--color_Secondary_60);
	color: #fff;

	font: 600 13px/1 var(--typeface_Heading);
	box-sizing: border-box;
	user-select: none;
	pointer-events: none;      /* click goes through to the icon/button */
}

.uictrl_GridBarStdCmd {
	position: relative;				/* Needed so we can add (e.g.,) a message count element */
	width: var(--grid-bar-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

.uictrl_GridBarStdCmd:hover {
	background-color: var(--color_Solid);
}

.uictrl_GridBarStdCmd img {
}

.uictrl_GridBarTitle {
	padding: 0 16px;
	overflow: clip;

	color: var(--color_Paper);
	font-family: var(--typeface_Heading);
	font-size: var(--grid-bar-font-size);
	line-height: var(--grid-bar-height);
}

@media (max-width: 768px) {	/* Must match value in gridBarUI.js realize() */
  .uictrl_GridBarTitle {
	  width:100%;
	  text-align:center;
  }
}

.uictrl_GridBarSlider {
	display: flex;
	flex-direction: row;

	height: var(--grid-bar-height);
	background-color: var(--color_Ink);

	overflow-x: scroll;
}

/* FOOTER */

.uictrl_Footer {
	margin: 60px 0 0 0;
	padding: 30px 0;

	font-family: var(--typeface_Default);
	font-size: 12pt;
	color: var(--color_Paper);
	background-color: var(--color_Ink);
}

.uictrl_Footer a {
	padding: 1px 4px;

	font-family: var(--typeface_Default);
	font-size: 16px;
	color: var(--color_Paper);
	background-color: var(--color_Ink);
	line-height: 24px;
	border-radius: 3px;
	text-decoration: none;
}

.uictrl_Footer a:hover {
	color: var(--color_Ink);
	background-color: var(--color_Paper);
}

.uictrl_Footer h1 {
	margin: 12pt 0 8pt;
	line-height: 24pt;
	font-family: var(--typeface_Heading);
	font-size: 16pt;
	font-weight: 700;
	page-break-after: avoid;
}

.uictrl_Footer .sectCompanyLogo {
	margin: 60px auto 0 auto;
	max-width: 1200px;

	text-align: center;
}

.sectCompanyLogo h1 {
	margin: 0;
}

.uictrl_Footer .sectLinks {
	display: flex;

	margin: 0 auto;
	max-width: 1200px;
}

.sectLinks .sectColumn {
	flex: 1;
	text-align: center;
}

.uictrl_Footer .sectLegal {
	margin: 0 auto;
	max-width: 1200px;

	color: var(--color_Contrast);
	text-align: center;
}

/* MENUS */

.uictrl_Cover {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	background-color: Black;
	opacity: 0;
	z-index: var(--z-index-modal);
}

.uictrl_PopupMenu {
	position: fixed;
	z-index: var(--z-index-modal);
	margin: 4px;
	padding: 8px 4px 12px 4px;
	overflow-y: auto;
}

.uictrl_PopupMenuItem {
	display: block;
	padding: 1px 16px;

	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.uictrl_PopupMenuSelection {
	display: inline-block;
	width: 16px;
	line-height: 10px;
}

.uictrl_PopupMenuLine {
}

.uictrl_PopupMenuText {
	padding: 1px 16px;
	margin: 0 0 8px 0;
}

.uictrl_PopupMenuTextSmall {
	padding: 1px 16px;
	margin: 0 0 8px 0;

	font-size: 10pt;
}

/* DIALOG BOXES */

#ctrlid_dialogParent {
	display: block;
	z-index: var(--z-index-modal);
}

.uictrl_DialogParent {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	display: flex;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.2);
}

.uictrl_DialogFrame {
	position:absolute;
}

.uictrl_DialogTitle {
	user-select: none;
}

.uictrl_DialogContent {
	max-height: 50vh;

	overflow-y: auto;
}

.uictrl_DialogButtonBar {
	padding: 12px 24px 12px 24px;

	border-top: 1px solid #c6cacc;		/* Neutral_20 */
	text-align: center;
}

.uictrl_DialogErrorBar {
	display: none;
	margin: 0;
	padding: 6px 24px 6px 24px;

	font-weight: bold;
	text-align: left;
	line-height: 20px;
}

/* PRINT */

#ctrlid_printParent {
	display: none;
	position: static;	/*	Must be static so that content spans multiple pages.
							But we change it to fixed when we want to print a
							fixed-size layout. */
	width: 100%;

	background-color: #ffffff;
}

/* CONTROL HIERARCHY */

.uictrl_Container {
	position: relative;
}

.uictrl_Container_Variable {
	position: relative;
}

.uictrl_Container > .uictrl_ControlRoot {
	position: absolute;
	height: auto;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
}

.uictrl_Container_Variable > .uictrl_ControlRoot {
	height: 100%;
}

/* Control roots and ZLayout layers receive their pointer policy from the server.
   Automatic layout roots inherit, including their native scrolling surfaces. */

/* Anchor the loading panel without overriding container positioning/sizing. */
.uictrl_ControlRoot:where([data-gw-control-class="scene3D"]) {
	position: relative;
}

/* The renderer scales its drawing buffer for devicePixelRatio. Keep that
   intrinsic size out of CSS layout, including while the overlay is hidden. */
.uictrl_ControlRoot[data-gw-control-class="scene3D"] > canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.uictrl_Scene3DLoading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - 16px);
	padding: 24px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--color_Ink, var(--color_Primary_Ink, #1a1a1a)) 82%, transparent);
	color: var(--color_Paper, var(--color_Primary_Paper, #ffffff));
	box-shadow: 0 4px 20px #00000020;
	font: 14px/1.4 var(--typeface_Default, sans-serif);
	text-align: center;
	pointer-events: none;
	user-select: none;
}

.uictrl_Scene3DLoading[hidden] {
	display: none;
}

.uictrl_Scene3DLoading > canvas {
	width: 64px;
	height: 64px;
	max-width: 100%;
	color: var(--color_Green_60, var(--color_Green, #0ecd00));
}

.uictrl_Scene3DLoading[data-state="error"] > canvas {
	color: var(--color_Red_60, var(--color_AlertError, #ff0011));
}

.uictrl_Scene3DLoading > div {
	max-width: 160px;
}

.uictrl_ControlRoot > .uictrl_ControlOverlay {
	position: absolute;
	height: auto;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-index-overlay);

	background-color: rgba(255, 255, 255, 0.5);

	pointer-events: none;
}

.uictrl_Container_Variable > .uictrl_Variable {
	height: 200px;
}

.uictrl_Container_Variable > .uictrl_HeightAuto {
	height: auto;
}

/* CAMERA CONTROL ----------------------------------------------------------- */

.uictrl_Camera {
	display:flex;
	flex-direction:column;
}

.component_CameraViewerFrame {
	display:flex;
	flex-direction:column;
	width:100%;
	height:100vh;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}

.component_CameraControlFrame {
	height:120px;
}

.component_CameraCaptureButton {
	position: absolute;
	bottom: 20px; /* Distance from bottom */
	left: 50%;
	transform: translateX(-50%); /* Centers it horizontally */

	width: 70px; /* Diameter */
	height: 70px; /* Diameter */
	background-color: white; /* Button color */
	border: 4px solid black; /* Outer ring */
	border-radius: 50%; /* Makes it round */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Adds depth */

	cursor: pointer;
}

.component_CameraCaptureButton::after {
	content: "";
	width: 50px;
	height: 50px;
	background-color: red; /* Inner circle */
	border-radius: 50%;
}

/* STANDARD CONTROL LAYOUTS */

.uictrl_Board {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	overflow: hidden;
}

.uictrl_Checkbox {
	display: flex;
	flex-direction: row;
	margin: 0 0 12px 0;
}

.uictrl_Checkbox input {
	vertical-align: middle;
}

.uictrl_Checkbox label {
	vertical-align: middle;
}

.uictrl_Dial {
	display: flex;
	flex-direction: column;
}

.uictrl_DialFrame {
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
}

.uictrl_Dropdown {
	display: flex;
	flex-direction: column;
}

.uictrl_Dropdown canvas {
	position: absolute;
	top: 6px;
	right: 6px;
}

.uictrl_FormRoot {
	overflow-y: auto;
}

.uictrl_ControlHeader {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.uictrl_RevealToggle {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* Shared disclosure glyphs keep shape, placement, and state independent. */
.uictrl_DisclosureIndicator {
	order: var(--gw-indicator-order, 0);
	margin-inline-start: var(--gw-indicator-margin-start, 0px);
	flex-shrink: 0;
}

.uictrl_IndicatorIcon {
	display: grid;
	place-items: center;
	width: 0.75em;
	height: 0.75em;
	pointer-events: none;
}

.uictrl_IndicatorTriangle {
	display: var(--gw-indicator-triangle-display, block);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.3125em 0 0.3125em 0.4375em;
	border-color: transparent transparent transparent currentColor;
}

.uictrl_DisclosureIndicator[aria-expanded="true"] .uictrl_IndicatorTriangle {
	border-width: 0.4375em 0.3125em 0 0.3125em;
	border-color: currentColor transparent transparent transparent;
}

.uictrl_IndicatorChevron {
	display: var(--gw-indicator-chevron-display, none);
	width: 0.4em;
	height: 0.4em;
	border: solid currentColor;
	border-width: 0 0.1em 0.1em 0;
	transform: rotate(-45deg);
}

.uictrl_DisclosureIndicator[aria-expanded="true"] .uictrl_IndicatorChevron {
	transform: rotate(45deg);
}

.uictrl_IndicatorPlusMinus {
	display: var(--gw-indicator-plus-minus-display, none);
	position: relative;
	width: 0.65em;
	height: 0.65em;
}

.uictrl_IndicatorPlusMinus::before,
.uictrl_IndicatorPlusMinus::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.uictrl_IndicatorPlusMinus::before {
	top: calc(50% - 0.05em);
	left: 0;
	width: 100%;
	height: 0.1em;
}

.uictrl_IndicatorPlusMinus::after {
	top: 0;
	left: calc(50% - 0.05em);
	width: 0.1em;
	height: 100%;
}

.uictrl_DisclosureIndicator[aria-expanded="true"] .uictrl_IndicatorPlusMinus::after {
	display: none;
}

.uictrl_RevealToggle:hover {
	background: var(--color_Highlight);
}

.uictrl_RevealToggle:focus-visible {
	outline: 2px solid var(--color_Highlight);
	outline-offset: 1px;
}

.uictrl_ControlLabel {
	font-weight: 600;
}

.uictrl_ControlRoot[data-gw-control-class="2DGraph"],
.uictrl_ControlRoot[data-gw-control-class="chart2D"] {
	display: flex;
	flex-direction: column;
}

.uictrl_ControlRoot[data-gw-control-class="2DGraph"] > .uictrl_ControlHeader > .uictrl_ControlLabel,
.uictrl_ControlRoot[data-gw-control-class="chart2D"] > .uictrl_ControlHeader > .uictrl_ControlLabel {
	flex: 1 1 auto;
	min-width: 0;
}

.uictrl_2DGraphBody,
.uictrl_Chart2DBody {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}

.uictrl_ControlRoot[data-gw-revealed="false"] {
	height: auto !important;
	min-height: 0 !important;
}

[data-gw-reveal-body="true"][hidden] {
	display: none !important;
}

.uictrl_Form {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: max-content;
	overflow: hidden auto;
}

.uictrl_ControlHeader + [data-gw-reveal-body="true"] {
	margin-top: 8px;
}

.uictrl_FormColumn {
	flex: 1;
}

.uictrl_HorizontalTabs {
	display: flex;
	flex-direction: row;
}

.uictrl_HorizontalTabs .component_SelectedTopTab {
	flex-shrink: 0;
}

.uictrl_HorizontalTabs .component_TopTab {
	flex-shrink: 0;
	cursor: pointer;
}

.uictrl_HorizontalTabs .component_HorzFill {
	flex-grow: 1;
}

.uictrl_Image {
	/* Images should not exceed their container size. */
	max-height: 100%;
	max-width: 100%;
}

.uictrl_Image.component_ImagePlaceholder {
	display: flex;
	align-items: center;     /* vertically centered */
	justify-content: center; /* horizontally centered */
	box-sizing: border-box;
	
	font-size: 16px;
	font-family: var(--typeface_Default);
	text-align: center;
	
	cursor: pointer;
}

/* A div with uictrl_ImageSelect class is a placeholder. */
div.uictrl_ImageSelect {
	border: 2px dashed #888;
	background-color: #f5f5f5;
	color: #888;
}

.uictrl_Input {

	margin: 0;
	min-height: 20px;
	padding: 2px 6px 2px 6px;

	/* LATER: Move to theme */
	color: var(--color_Accent);
	background-color: var(--color_Dark);
	border: 1px solid var(--color_Ink);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}

.uictrl_Input:enabled {
	background-color: var(--color_Dark);
	border: 1px solid var(--color_Ink);
}

.uictrl_Input:focus {
	background-color: var(--color_Contrast);
}

.uictrl_Label {
	/* LATER: Move to theme */
	font-size: 10pt;
	color: var(--color_Highlight);
}

.uictrl_RadioButtons input {
	margin: 0 8px 0 0;
	vertical-align: middle;
}

.uictrl_RadioButtons label {
	margin: 0 20px 0 0;
	vertical-align: middle;
}

.uictrl_svgOverlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.uictrl_Table {
}

.uictrl_Table input {
	font-family: var(--typeface_Default);
	font-size: 11pt;
}

.uictrl_Table .componentInputFrame {
	position: absolute;
	z-index: var(--z-index-modal);
}

.uictrl_Text {
	display: flex;
	flex-direction: column;
}

.uictrl_Text textarea {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	resize: none;

	font-family: var(--typeface_Default);
	font-size: 11pt;
}

.uictrl_Text input {
	font-family: var(--typeface_Default);
	font-size: 11pt;
}

.uictrl_TextLines {
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: auto;

	font-family: var(--typeface_Code);
	font-size: 10pt;
	line-height: 1.2;

	white-space: pre;
	tab-size: 4;
	resize: none;
	border: none;
}

.uictrl_TextLines div {
	white-space: pre;
	font-family: var(--typeface_Code);
}

.uictrl_TextLines:focus-visible {
	outline: none;
}

.uictrl_TextLinesFrame {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 20px;
	overflow: hidden;
}

.uictrl_TextLinesStatusBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 19px;
	padding-top: 1px;

	text-align: right;
	font-size: 10pt;
}

.uictrl_TextLinesStatusBar span {
	margin-left: 24px;
}

/* UPLOAD */

.uictrl_UploadStatus {
	position: absolute;
	width: 640px;
	height: 80px;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-index-overlay);

	background-color: var(--color_Solid);
	color: var(--color_Paper);
	border-radius: 3px;
	box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.35);

	font-family: var(--typeface_Heading);
	font-size: 18px;
	font-weight: bold;
	line-height: 80px;
	text-align: center;

	overflow: hidden;
}

/* GRIDWHALE LOGIN LAYOUTS */

.gridLoginFrame {
	margin: 0 auto;
}

.gridLoginLogo {
	padding:32px;
}

@media (max-width: 768px) {
  .gridLoginLogo {
	  display:none;
  }
}

.gridLoginOption {
	margin: 0 0 24px 0;
	width: 340px;
	max-width: calc(100vw - 64px);	/* Do not exceed size of screen, 64px is for container padding */
	box-sizing: border-box;
}

.gridLoginField {
	width: 340px;
}

/* STANDARD GRIDWHALE UI LAYOUTS */

.gridPaneLeft {
	position: relative;
/*	flex: 1; */
	min-width: 288px;

	background-color: var(--color_Dark);
}

.gridContent {
	display: flex;
	flex-direction: column;
	margin: 0;

	min-width: 600px;
	height: calc(100vh - var(--grid-bar-height));
	overflow-y: scroll;
}

/* GRIDPANE UI */

.gridPane {
	padding: 8px;
}

.gridPaneSectionHeader {
	/* width: 300px; */
	margin: 16px 0 4px 0;
	padding: 4px 8px;
}

.gridPaneSectionHeader h1 {
	margin: 0;

	font-size: 11pt;
	font-weight: bold;
	color: var(--color_Solid);
}

.gridPaneArea {
	padding: 8px;
	width: 300px;
}

.gridPaneArea h1 {
	margin: 0;

	font-family: var(--typeface_Heading);
	font-size: 16pt;
	font-weight: normal;
	color: var(--color_Overlay);
}

.gridPaneArea p {
	margin: 0;

	font-size: 10pt;
	color: var(--color_Overlay);
}

.gridPaneIcon {
	display: inline-block;
	width: 80px;
	margin: 0 8px 8px 0;
	padding: 8px;

	text-decoration: none;
	background-color: var(--color_Contrast);
	border-radius: 3px;
}

.gridPaneIcon:hover {
	background-color: var(--color_Dark);
}

.gridPaneIcon h1 {
	margin: 0;

	text-align: center;
	font-size: 11pt;
	font-weight: normal;
	color: var(--color_Overlay);
	text-decoration: none;
}

.gridPaneTile {
	padding: 8px;
	/* width: 300px; */

	background-color: #32414d;
	border-radius: 3px;
	cursor: pointer;
}

.gridPaneTile:hover {
	background-color: #406480;
}

.gridPaneTile h1 {
	margin: 0;

	font-family: var(--typeface_Heading);
	font-size: 16pt;
	font-weight: normal;
	color: var(--color_Overlay);
}

.gridPaneTile p {
	margin: 0;

	font-size: 10pt;
	color: var(--color_Overlay);
}

.gridPaneTable {
	margin: 0 0 8px 0;

	background-color: #2d3b46;
}

.gridPaneField {
	display: inline-block;
	width: 100px;
	margin: 0 8px 0 0;

	text-align: right;
	color: #929ba2;
}

.gridPaneValue {
	display: inline-block;
	width: 100px;
	margin: 0 0 0 8px;

	text-align: left;
	font-weight: bold;
	color: var(--color_Solid);
}

.tileIconLeft {
	display: inline-block;
	margin-right: 8px;
	vertical-align: top;
}

.tileBodyRight {
	display: inline-block;
	vertical-align: top;
}

.tileIconLeft .ctrlImagePlaceholder {
	margin: 0 auto;
	width: 48px;
	height: 48px;

	background-color: #808080;
}

.tileIconTop .ctrlImagePlaceholder {
	margin: 0 auto;
	width: 76px;
	height: 48px;

	background-color: #808080;
}

.tileIconTop .ctrlImage {
	display: block;
	margin: 0 auto;
	width: 76px;
	height: 48px;
}

#coreidAccountSignIn {
	cursor: pointer;
}

.gridPaneFooter {
	margin: 0 auto;
	padding: 8px;

	font-size: 10pt;
	text-align: center;

	font-size: 10pt;
	color: var(--color_Overlay);
	background-color: #29343e;
	border-radius: 3px;
}

.gridPaneFooter h1 {
	margin: 0;

	font-size: 11pt;
	font-weight: normal;
	color: var(--color_Overlay);
}

.gridPaneFooter p {
	margin: 0;

	font-size: 10pt;
	color: var(--color_Overlay);
}

.gridPaneFooterLogo {
	display: block;
	width: 120px;
	margin: 24px auto;
}

/* GRID TITLE BAR UI */

.gridHeader {
	display: flex;
	margin: 0;
	background-color: var(--color_Contrast);
}

.gridHeaderIcon {
	display: inline-block;
	margin: 16px 16px 16px 16px;
	vertical-align: top;
}

.gridHeaderIcon .ctrlImagePlaceholder {
	width: 48px;
	height: 48px;

	background-color: #808080;
}

.gridHeaderRight {
	display: inline-block;
	width: 100%;
	vertical-align: top;
}

.gridTitleBar {
	padding: 8px 8px 0 8px;
}

.gridTitleBar h1 {
	margin: 0;

	font-family: var(--typeface_Heading);
	font-size: 18pt;
	font-weight: normal;
	color: var(--color_Overlay);
}

/* GRID COMMAND BAR UI */

.gridCommandBar {
	padding: 4px 8px;
}

.gridCommandBar .button {
	display: inline-block;
	margin: 0 12px 0 0;
	padding: 2px 12px;

	font-size: 11pt;
	font-weight: bold;
	color: var(--color_Accent);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	text-align: center;

	background-color: var(--color_Dark);
	border: 1px solid var(--color_Ink);
	border-radius: 3px;

	text-decoration: none;
	cursor: pointer;
}

.gridCommandBar .button:hover {
	color: var(--color_Accent);
	background-color: var(--color_Dark);
}

/* FILE TILES ------------------------------------------------------------ */

.gridObjectList {
	padding: 20px;
	overflow-y: scroll;
}

.gridObjectList.dropHighlight {
	background-color: rgba(32, 137, 217, 0.25);
}

.fileTile {
	display: inline-block;
	margin: 0 20px 20px 0;

	border: 1px solid #c3cfd9;
	border-radius: 3px;

	background-color: #ffffff;
}

.fileTile:hover {
	border: 1px solid #2089d9;
	background-color: #ffffff;
	cursor: pointer;
}

.fileTile a {
	color: var(--color_Dark);
	text-decoration: none;
}

.fileTile .icon {
	width: 270px;
	height: 152px;
	background-color: #e0e0e0;
}

.fileTile .icon img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.fileTile .info {
	padding: 12px;
	height: 51px;
}

.infoText {
	display: inline-block;
	width: 240px;
	white-space: nowrap;
	overflow-x: clip;
}

.infoMenu {
	float: right;
	position: relative;
	z-index: var(--z-index-modal);
	display: block;
	width: 24px;
	height: 24px;

	background-color: #c3cfd9;
}

.infoMenu:hover {
	background-color: #005ea6
}

.fileTile .info .text {
	font-size: 10pt;
}

.fileTile .info .debugText {
	font-size: 10pt;
	color: #A0A0A0;
}

.fileTile .info .title {
	font-size: 12pt;
	font-weight: 500;
}

/* SECTION PROGRAM FRAME ---------------------------------------------------- */

.sectionProgramFrame {
	/*	Must specify height so that content scrolls.
		80px is height of header */
	height: calc(100% - 80px);
}

.sectionProgramBody {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	background-color: var(--color_Grayscale_20);
}

/* SECTION PROGRAM EDITOR --------------------------------------------------- */

.sectionProgramIDE {
	display: flex;
	position: absolute;
	width: calc(100% - 333px);
	top: 80px;
	bottom: 24px;
}

#idNavBar {
	flex: 0 0 64px;
}

.sectionProgramEditor {
	display: flex;
	width: 50%;
	height: 100%;
	min-width: 20px;
}

.sectionProgramEditor textarea {
	width: 100%;
	padding: 1px 4px;
	border: 1px solid #ccc9c8;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	resize: none;
	white-space: pre;
	tab-size: 4;
}

.sectionProgramMain {
	width: 50%;
	height: 100%;
	min-width: 20px;
}

.sectionProgramOutput {
	height: 100%;
	overflow-y: scroll;

	color: var(--color_SolidText);
	background-color: #404040;
	font-family: var(--typeface_Code);
	white-space: pre;
}

.sectionProgramOutput p {
	margin: 0;
}

.sectionConsoleText {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: min(100ch, 100%);
}

.sectionConsoleTerminal {
	font-family: Consolas, "Lucida Console", monospace;
	white-space: pre;
	overflow-wrap: normal;
	max-width: none;
	overflow-x: auto;
}

.sectionConsoleInput {
	display: table
}

.sectionConsoleText > .sectionConsoleInput {
	display: inline;
}

.sectionConsoleText > .sectionConsoleInput span {
	display: inline;
}

.sectionConsoleText > .sectionConsoleInput .sectionConsoleInputWrapper {
	width: auto;
}

.sectionConsoleText > .sectionConsoleInput input {
	width: 24ch;
}

.sectionConsoleInput span {
	display: table-cell;
}

.sectionConsoleInputWrapper {
	width: 100%;
}

.sectionConsoleInput input {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;

	color: var(--color_SolidText);
	background-color: #404040;
	border: none;
}

.sectionConsoleInput input:focus {
	outline: none;
}

.sectionProgram2DGraph {
	display: block;
	width: 100%;
	height: 100%;
}

.sectionProgramCanvas {
	display: block;
	width: 100%;
	height: 100%;
}

.sectionProgramMarkdownEdit {
	height: 100%;
	border: none;
	resize: none;
}

.sectionProgramMarkdownEdit:focus {
	border: none;
	outline: none;
}

/* LAYOUT GRID -------------------------------------------------------------- */

.sectionLayoutGrid {
	display: grid;
}

.sectionLayoutCell {
	min-height: 0;
	min-width: 0;
}

/* Z LAYOUT ----------------------------------------------------------------- */

.uictrl_ZLayout {
	display: grid;
	isolation: isolate;
	min-height: 0;
	min-width: 0;
}

/* Automatic upper layers pass input through; base layers and explicitly
   overridden stacks inherit. The server authors this on each layer. */
.uictrl_ZLayoutLayer {
	display: grid;
	min-height: 0;
	min-width: 0;
}

.uictrl_ZLayoutLayer > .uictrl_ControlRoot {
	grid-area: 1 / 1;
	height: 100%;
	min-height: 0;
	min-width: 0;
	width: 100%;
}

.sectionLayoutPopup {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	min-width:240px;
	height: 100%;
	white-space: nowrap;
	background: white;
	box-shadow: -2px 0 5px rgba(0,0,0,0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-240px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s; /* Delay visibility */
}

.sectionLayoutPopup.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0s;
}

.sectionLayoutPopupButton {
	pointer-events: auto;
	position: absolute;
	top: 10px;
	left: 10px;
	height: 40px;
	width: 40px;
	z-index: var(--z-index-overlay);
	text-align: center;
	vertical-align: middle;

	background-color: var(--color_Overlay);
	border-radius: 3px;
	border: 1px solid var(--color_Dark);
	color: var(--color_Dark);
	font-size: 12pt;
	text-align: center;
	cursor: pointer;
}

.sectionLayoutPopupButton:hover {
	box-shadow: inset 0 0 8px 2px var(--color_SolidText);
	background-color: #1a9cff;
	color: var(--color_SolidText);
}

.sectionLayoutButtonCell {
	position:relative;
}

.sectionLayoutButtonCell::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;              /* full column height */
	width: 1px;             /* hair-line */
	background: rgba(0,0,0,0.15);   /* divider colour */
	pointer-events: none;   /* don't block clicks on the button */
}

/* NOTE: "leftSide" means the open/close button is on the left */
.sectionLayoutButtonCell.leftSide::before  { left: -1px; }  /* draw on cell's left edge */
.sectionLayoutButtonCell.rightSide::before { right: -1px; }   /* draw on cell's right edge */

.sectionLayoutOpenCloseButton {
	pointer-events: auto;
	position: absolute;
	height: 40px;
	width: 22px;
	z-index: var(--z-index-overlay);
	box-sizing:border-box;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size: 12pt;
	line-height: 40px;

	background-color: var(--color_Light);
	color: var(--color_Solid);

	cursor: pointer;
}

.sectionLayoutOpenCloseButton.leftSide {
	top: 10px;
	left: -21px;
	border-radius: 3px 0 0 3px;
	border-right: 2px solid var(--color_Solid);
}

.sectionLayoutOpenCloseButton.rightSide {
	top: 10px;
	left: calc(100% - 1px);
	border-radius: 0 3px 3px 0;
	border-left: 2px solid var(--color_Solid);
}

.sectionLayoutOpenCloseButton:hover {
	/*box-shadow: inset 0 0 8px 2px var(--color_SolidText);*/
	background-color: var(--color_Highlight);
}

.sectionLayoutDivider {
	pointer-events: auto;
	position:relative;
	width: 6px;                         /* visible grip width */
	margin: 0 -3px;                     /* overlap neighbours so total stays constant */
	z-index: 5;

	background: transparent;
	cursor: col-resize;
}

.sectionLayoutDivider:hover,
.sectionLayoutDivider.dragging {
	background: rgba(0,0,0,0.1);        /* subtle feedback */
}

/* subtle hairline (full height) */
.sectionLayoutDivider::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 1px;                     /* 1-px rule */
	margin: 0 auto;                 /* center horizontally */
	background: rgba(0,0,0,0.15);   /* divider colour */
}

/* 6×40-px grab handle, centred */
.sectionLayoutDivider::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 40px;
	transform: translate(-50%,-50%);
	border-radius: 3px;
	background: var(--color_Solid);
}

.component_ScrollX {
	overflow-x: auto;
}

.component_NoScrollX {
	overflow-x: hidden;
}

/* Optional gutter hit-area that does not visually resize

.sectionLayoutDivider::before {
	content:"";
	position:absolute; inset:0;
	background:transparent;
}
*/

/* MARKDOWN ----------------------------------------------------------------- */

.sectionProgramBody .sectionMarkdown {
}

.sectionProgramBody .sectionMarkdownPage {
}

.dlgContent .sectionMarkdown {
	color: var(--color_SolidText);
}

.sectionMarkdown li {
	margin: 3pt 0 0 0;
}

.sectionMarkdown p {
	margin: 0 0 11pt 0;
}

.sectionMarkdown h1 {
	margin: 0;

	line-height: 40pt;
	font-family: var(--typeface_Heading);
	font-size: 20pt;
	font-weight: bold;
	color: var(--color_Overlay);
}

.sectionMarkdown h2 {
	margin: 0;

	line-height: 28pt;
	font-family: var(--typeface_Heading);
	font-size: 14pt;
	font-weight: bold;
	color: var(--color_Overlay);
}

.sectionMarkdown h3 {
	margin: 0;

	line-height: 24pt;
	font-family: var(--typeface_Heading);
	font-size: 12pt;
	font-weight: normal;
	color: var(--color_Overlay);

	text-transform: uppercase;
}

.sectionMarkdown blockquote {
	margin: 0 20px 11pt 20px;
	padding: 12px 12px 12px 12px;

	background-color: var(--color_Grayscale_20);
	border-radius: 3px;
	border: solid 1px var(--color_Grayscale_30);
}

.sectionMarkdown pre {
	margin: 0 0 11pt 0;
	padding: 12px 12px 12px 12px;

	color: #333a40;
	background-color: var(--color_Grayscale_20);
	border-radius: 3px;

	tab-size: 4;
	overflow-x: auto;
	overflow-y: hidden;

	font-family: var(--typeface_Code);
	font-size: 10pt;
}

.sectionMarkdown code {
	font-family: var(--typeface_Code);
	font-size: 10pt;
}

:not(pre) > code {
	padding: 1px 4px 0 4px;
	border-radius: 2px;
	color: #333a40;
	background-color: var(--color_Grayscale_20);
}

/* LISTBOX CONTROL ---------------------------------------------------------- */

.sectionListbox {
	box-sizing: border-box;
	border-collapse: collapse;
	font-size: 0;
	line-height: 0;

	overflow-y: auto;
}

.sectionListboxPalette {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
}

.sectionListboxList {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.sectionListbox .entry {
	font-size: 10pt;
	overflow: hidden;
	border-radius: 3px;

	cursor: pointer;
	user-select: none;
}

.sectionListbox .boxEntry {
	position: relative;		/* Needed for checkboxes, which are absolute */
	display: flex;
	flex-direction: row;

	flex-shrink: 0;			/* Prevents row from shrinking */
}

.sectionListbox .lineEntry {
	display: flex;
	flex-direction: row;	/* Aligns select checkbox, if necessary */

	flex-shrink: 0;			/* Prevents row from shrinking */
}

.sectionListbox .selectionCheck {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
}

.sectionListbox .selectionCheckOverlay {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 2px;
	z-index: var(--z-index-overlay);
}

.sectionLibox .lineEntry * {
	user-select: none;
}

.sectionListbox .lineBorder {
	padding: 3px 12px;
}

.sectionListbox .boxBorder {
	padding: 4px;
}

.sectionListbox .largeBoxBorder {
	padding: 8px;
}

.sectionListbox .unselected {
}

.sectionListbox .tileTitleOnly {
	font-size: var(--gw-listbox-font-size, 12pt);
	line-height: normal;
}

/* Line entry */

.sectionListbox .tileContainerHorz {
	display:flex;
	flex-direction:row;
	column-gap:16px;
	height:100%;
}

/* Tile entry */

.sectionListbox .tileContainerVert {
	display:flex;
	flex-direction:column;
	row-gap:4px;
	height:100%;
}

.tileContainerVert .tileTextDesc {
	margin: 0 0 4px 0;
}

/* Tile with text on top of icon */

.sectionListbox .tileContainerLayered {
	display:flex;
	flex-direction:column;
	row-gap:4px;
	height:100%;

	position: relative;
}

.tileContainerLayered .alignTop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	display: flex;
	flex-direction: column;
}

.tileContainerLayered .alignBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	display: flex;
	flex-direction: column;
}

.tileContainerLayered .tileTextTitle {
	height: calc(1.5em + 8px);
	box-sizing: border-box;
	padding: 4px;

	text-align: center;

	background-color: rgba(0,0,0,0.5);
	color: var(--gw-listbox-color, white);
}

.tileContainerLayered .tileTextDesc {
	height: calc(3em + 8px);
	box-sizing: border-box;
	padding: 4px;

	background-color: rgba(0,0,0,0.5);
	color: var(--gw-listbox-color, white);
	overflow: hidden;
}

.sectionListbox .tileTextTitle {
	font-size: var(--gw-listbox-font-size, 12pt);
	font-weight: var(--gw-listbox-font-weight, bold);
	line-height: 1.5;
}

.sectionListbox .tileTextDesc {
	font-size: var(--gw-listbox-font-size, 10pt);
	line-height: 1.5;
}

.tileTextTitle {
	white-space: nowrap;	/* Single line */
	overflow: hidden;
	text-overflow: ellipsis;
}

.tileIcon {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.textToolTip {
	position: absolute;
	z-index: var(--z-index-hover);
	padding: 4px 8px;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: var(--color_Paper);
	color: var(--color_Ink);
}

/* DROPDOWN CONTROl --------------------------------------------------------- */

.component_Dropdown {
	padding: 6px 6px;
	height: fit-content;
	box-sizing: border-box;
	min-height: 20px;

	background-color: var(--color_Light);
	border-radius: 3px;
	border: 1px solid var(--color_Marker);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
	color: var(--color_Ink);
}

.component_Dropdown[aria-disabled="true"] {
	background-color: var(--color_Grayscale_30);
	color: var(--color_Grayscale_70);
	border-color: var(--color_Grayscale_60);
}

/* LISTBOX CONTROL ---------------------------------------------------------- */

.component_Listbox:focus {
	outline: none;
}

.component_ListboxHeader {
	color: var(--color_SolidText);
	background-color: var(--color_Accent);
}

.component_ListboxHeaderClickable {
	cursor: pointer;
}

.component_ListboxHeaderClickable:hover {
	background-color: var(--color_Solid);
}

.component_ListboxEntry {
	box-sizing: border-box;
}

a.component_ListboxEntry,
a.component_ListboxEntry:link,
a.component_ListboxEntry:visited,
a.component_ListboxEntry:hover,
a.component_ListboxEntry:focus,
a.component_ListboxEntry:active,
a.component_ListboxLink,
a.component_ListboxLink:link,
a.component_ListboxLink:visited,
a.component_ListboxLink:hover,
a.component_ListboxLink:focus,
a.component_ListboxLink:active {
	color: inherit;
	text-decoration: none;
}

.component_ListboxLink {
	display: flex;
	flex: 1;
	min-width: 0;
}

.component_ListboxContent {
	min-width: 0;
}

.component_ListboxMarkers {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	align-self: stretch;
}

.component_ListboxMarkersLeft {
	margin-right: 8px;
}

.component_ListboxMarkersRight {
	margin-left: auto;
	padding-left: 8px;
}

.component_ListboxMarker {
	display: inline-block;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	margin: auto 0;
	flex: 0 0 auto;
}

.component_ListboxMarkerDot {
	border-radius: 50%;
	background-color: var(--color_Marker);
}

.component_ListboxMarkerCheck {
	position: relative;
	width: 12px;
	height: 12px;
	color: var(--color_Marker);
}

.component_ListboxMarkerCheck::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 5px;
	height: 9px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.component_ListboxPlaceholder {
	padding: 24px;
	margin: 0 auto;
	max-width: 8.5in;
	color: var(--color_Grayscale_50);
	text-align: center;
}

.component_ListboxDropTarget {
	background-color: var(--color_Green_20) !important;
}

.component_ListboxSelection {
	background-image: none !important;
}

.component_Listbox:focus-within .component_ListboxSelection {
	background-color: var(--color_Overlay) !important;
}

.component_Listbox:not(:focus-within) .component_ListboxSelection {
	background-color: var(--color_Grayscale_30) !important;
}

.component_Listbox:not([data-gw-selection-mode="cell"]):not([data-gw-selection-mode="multipleCell"]) .component_ListboxUnselected:hover {
	background-color: var(--color_Light) !important;
}

.component_Listbox:is([data-gw-selection-mode="cell"], [data-gw-selection-mode="multipleCell"]) [data-gw-part="tableCell"]:hover {
	background-color: var(--color_Light) !important;
}

.component_Listbox:focus-within .component_ListboxSelection .tableCell {
	background-color: var(--color_Overlay) !important;
	/* NOTE: Needed to override a cell with a custom color. */
}

.component_Listbox:not(:focus-within) .component_ListboxSelection .tableCell {
	background-color: var(--color_Grayscale_30) !important;
	/* NOTE: Needed to override a cell with a custom color. */
}

.component_ListboxIndent {
	width: calc(var(--level) * var(--listbox-indent-step));
	position: relative;
	align-self: stretch;
	flex-shrink: 0;
}

.component_ListboxGuide {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

.component_ListboxTwisty {
	color: inherit;
	font: inherit;
	width: var(--listbox-twisty-size);
	height: var(--listbox-twisty-size);
	padding: 0;
	border: 0;
	background: transparent;
	display: grid;
	place-items: center;
	border-radius: 4px;
	cursor: pointer;
}

.component_ListboxTwistyIcon {
	width: 0;
	height: 0;
	border-style: solid;

	/* right-pointing triangle */
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent currentColor;
}

.component_ListboxEntry[data-has-children="0"] .component_ListboxTwisty {
	/* show twisty only if entry has children */
	visibility: hidden;
	pointer-events: none;
}

.component_ListboxEntry[aria-expanded="true"] .component_ListboxTwistyIcon {
	/* down-pointing triangle */
	border-width: 7px 5px 0 5px;
	border-color: currentColor transparent transparent transparent;
}

/* TABLE CONTROL ------------------------------------------------------------ */

.sectionTable {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;

	border-spacing: 0;
	cursor: pointer;
}

.tableContainer {
	display: flex;
	flex-direction: column;
	overflow-x: auto;
	box-sizing: border-box;
	height: 100%;
}

.uictrl_HeightAuto > .tableContainer,
.uictrl_HeightAuto .sectionTable {
	height: auto;
}

.tableSpacer {
}

.uictrl_Table.uictrl_HeightAuto > .tableContainer > .sectionTable > .tableSpacer {
	display: none;
}

.tableView {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
}

.uictrl_Table.uictrl_HeightAuto > .tableContainer > .sectionTable > .tableView {
	position: static;
}

.tableRow {
	display: grid;
	width: 100%;
	min-width: fit-content;
	box-sizing: border-box;
}

.uictrl_Table:not(.uictrl_HeightAuto) > .tableContainer > .sectionTable > .tableView > [data-gw-part="tableRow"] {
	flex: 0 0 var(--gw-table-row-height, auto);
	height: var(--gw-table-row-height, auto);
	min-height: 0;
	max-height: var(--gw-table-row-height, none);
	overflow: hidden;
}

.tableHeaderRow {
	position: sticky;
	top:0;
	z-index: var(--z-index-overlay);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.tableHeader, .tableCell {
	padding: 3px 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	user-select: none;
}

.component_TableCellEditFrame {
	overflow: hidden;
}

.component_TableCellEditFrame > .component_TableCellEditInput {
	height: 100%;
	min-width: 0;
	margin: 0;
}

.tableCheckbox {
	margin-block: 0;
}

.component_Listbox:focus-within .tableKeyboardActive {
	outline: 1px dotted var(--color_Solid);
	outline-offset: -1px;
}

.tableHeader {
	position: relative;
	padding: 3px 18px 3px 12px;
	vertical-align: bottom;
	font-weight: bold;
}

/*

.sectionTable .tableHeader {
	text-align: left;

	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.sectionTable th {
	padding: 3px 18px 3px 12px;
	position: sticky;
	top: 0;
	vertical-align: bottom;
}

.sectionTable th:first-child {
	border-top-left-radius: 3px;
}

.sectionTable th:last-child {
	border-top-right-radius: 3px;
}

.sectionTable td {
	padding: 3px 12px;
	white-space: nowrap;
}
*/


.icon_sort {
	display: inline-block;
	position: absolute;
	right: 4px;
}

/* SPLITTER ----------------------------------------------------------------- */

.ctrlSplitter {
	width: 100%;
	height: 100%;
	display: flex;
}

.ctrlSeparator {
	cursor: col-resize;
	background-color: #aaa;
	width: 10px;
	height: 100%;

	/* prevent browser's built-in drag from interfering */

	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* IMAGE SELECTOR ----------------------------------------------------------- */

.ctrlImageSelector {

}

.ctrlImageChoice {
	display: inline-block;
	padding: 8px;

	border-radius: 3px;
}

.ctrlImageChoice img {
	width: 96px;
	height: 96px;
}

.ctrlImageChoice p {
	margin: 0;
}

.ctrlImageSelector .ctrlSelected {
	background-color: #78bff5;
}

/* TEXT CONTROl --------------------------------------------------------------- */

.component_Label {
	font-size: 14px;
	padding: 6px 6px;	/* NOTE: Padding, not margin because otherwise size gets messed up. */
	box-sizing: border-box;
}

.component_TextLines:disabled {
	color: #333a40;
}

.component_Text {
	color: var(--color_Solid);
	overflow-y: auto;
}

.component_TextMarkdown {
	color: var(--color_Grayscale_100);
	overflow-y: auto;
}

.component_TextMarkdown a {
	color: var(--link-color);
	background-color: var(--link-background);
	border-radius: 3px;
	text-decoration: none;
}

.component_TextMarkdown a:hover {
	color: var(--link-hover-color);
	background-color: var(--link-hover-background);
}

.component_InputContainer {
	display: flex;
	flex-direction: column;
}

.component_SwitchContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	width: 100%;
}

.component_Switch {
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	box-sizing: border-box;
	width: 40px;
	height: 20px;
}

.component_SwitchInput {
	opacity: 0;
	width: 0;
	height: 0;
}

.component_SwitchSlider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	border-radius: 20px;
	transition: background-color 0.2s;
	border: 1px solid var(--color_Marker);
	background-color: var(--color_Light);
}

.component_SwitchSlider::before {
	content: "";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 1px;
	top: 1px;
	border-radius: 50%;
	transition: transform 0.2s;
	background-color: var(--color_Ink);
}

.component_SwitchInput:checked + .component_SwitchSlider {
	background-color: var(--color_Solid);
}

.component_SwitchInput:checked + .component_SwitchSlider::before {
	background-color: var(--color_SolidText);
	transform: translateX(20px);
}

.component_SwitchInput:disabled + .component_SwitchSlider {
	background-color: var(--color_Grayscale_30);
}

.component_SwitchInput:disabled + .component_SwitchSlider::before {
	background-color: var(--color_Grayscale_70);
}

.component_InputFrame {
	display: inline-flex;
	height: fit-content;
	box-sizing: border-box;

	background-color: var(--color_Light);

	border-radius: 3px;
	border: 1px solid var(--color_Marker);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}

.component_InputFrame:focus-within {
	background-color: var(--color_Highlight);
	border: 1px solid var(--color_Solid);
	outline: none;
}

.component_InputFrame:has(.component_Input:disabled) {
	border-color: var(--color_Grayscale_60);
}

.component_Input {
	width: 100%;
	height: fit-content;
	flex-grow: 1;
	padding: 6px 6px;
	box-sizing: border-box;

	border: none;
	border-radius: 2px;
	outline: none;
	background: none;
	color: var(--color_Ink);
}

.component_Input:disabled {
	color: var(--color_Grayscale_70);
	background-color: var(--color_Grayscale_30);
}

.component_InputPrefix {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 6px 6px;
	white-space: nowrap;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	color: var(--color_Highlight);
	background-color: var(--color_Dark);
	text-shadow: 0 0 2px white;
}

.component_InputSuffix {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 6px 6px;
	white-space: nowrap;

	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	color: var(--color_Highlight);
	background-color: var(--color_Dark);
	text-shadow: 0 0 2px white;}

/*	ANIMATIONS */

@keyframes image_slideInBottomToTop {
	from {
		margin-top: 100%;
	}

	to {
		margin-top: 0;
	}
}

@keyframes image_slideInLeftToRight {
	from {
		margin-left: -100%;
	}

	to {
		margin-left: 0;
	}
}

@keyframes image_slideInRightToLeft {
	from {
		margin-left: 100%;
	}

	to {
		margin-left: 0;
	}
}

@keyframes image_slideInTopToBottom {
	from {
		margin-top: -100%;
	}

	to {
		margin-bottom: 0;
	}
}


@media print {
	body {
		overflow-y: visible !important;
		height: auto !important;
		font-size: 10pt !important;
	}

	#ctrlid_printParent {
		display: block !important;
		overflow-y: visible !important;
		height: auto !important;
	}

	.uictrl_ControlRoot {
		overflow-y: visible !important;
		height: auto !important;
		max-height: none !important;
	}

	.uictrl_Container {
		width: 100%;
		overflow-y: visible !important;
		height: auto !important;
		max-height: none !important;
	}

	.uictrl_Container_Variable {
		position: static !important;
		width: 100%;
		overflow-y: visible !important;
		height: auto !important;
		max-height: none !important;
	}

	.uictrl_FormRoot {
		overflow-y: visible !important;
	}

	.uictrl_Form {
		overflow: visible visible !important;
	}

	.uictrl_TextMarkdown {
		font-size: 11pt;
	}

	.uictrl_TextMarkdown td {
		font-size: 10pt;
	}

	.uictrl_TextMarkdown h1 {
		line-height: 44pt;
		font-size: 28pt;
	}

	.uictrl_TextMarkdown h2 {
		line-height: 30pt;
		font-size: 22pt;
	}

	.uictrl_TextMarkdown h3 {
		line-height: 24pt;
		font-size: 18pt;
	}

	.uictrl_ProgramFrame {
		display: none !important;
	}

	.component_TextMarkdown {
		overflow-y: visible !important;
	}

	.component_Text {
		overflow-y: visible !important;
	}

	.component_ScrollX {
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	.component_NoScrollX {
		overflow-x: visible;
		overflow-y: visible !important;
	}

	.appFooter {
		display: none !important;
	}

	.dlgCover {
		display: none !important;
	}

	.dlgCenterPoint {
		display: none !important;
	}

	#ctrlid_dialogParent {
		display: none !important;
	}
}



/* Read-only reports retain document flow and materialize every source row. */
.uictrl_ReportTable { width: 100%; min-width: 0; overflow: auto; }
.uictrl_ReportTableBody { min-width: 0; }
.uictrl_ReportTableGrid { width: max-content; border-collapse: collapse; border-bottom: 1px solid currentColor; }
.uictrl_ReportTableGrid.is-sized { table-layout: fixed; }
.uictrl_ReportTableGrid th, .uictrl_ReportTableGrid td {
    padding: 0.3em 0.65em; vertical-align: top; white-space: pre-wrap;
}
.uictrl_ReportTableCell {
    width: max-content; min-width: 4em; max-width: 24em;
    white-space: pre-wrap; overflow-wrap: break-word;
}
.uictrl_ReportTableCell[data-text-mode="nowrap"] { white-space: pre; max-width: none; }
.uictrl_ReportTableCell[data-text-mode="ellipsis"], .uictrl_ReportTableCell[data-text-mode="clip"] {
    white-space: pre; overflow: hidden;
}
.uictrl_ReportTableCell[data-text-mode="ellipsis"] { text-overflow: ellipsis; }
.uictrl_ReportTableGrid.is-sized .uictrl_ReportTableCell {
    width: auto; min-width: 0 !important; max-width: none !important; overflow: hidden;
}
/* Keyboard users can reveal complete clipped text without a mouse tooltip. */
.uictrl_ReportTableGrid.is-sized .uictrl_ReportTableCell[tabindex]:focus {
    white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip;
}
.uictrl_ReportTableGrid th { font-weight: bold; text-align: center; }
.uictrl_ReportTableGrid thead { border-bottom: 1px solid currentColor; }
.uictrl_ReportTableFootnotes { margin-top: 0.6em; white-space: pre-wrap; }
.uictrl_ReportTablePlaceholder { text-align: left; }
.uictrl_ReportTableError { white-space: pre-wrap; }
.uictrl_ReportTableGroup { min-width: 0; }
.uictrl_ReportTableSubheader {
    padding: 0.8em 0 0.35em; font-weight: bold; text-align: left;
    white-space: pre-wrap; overflow-wrap: anywhere; break-after: avoid;
}
@media print {
    .uictrl_ReportTable, .uictrl_ReportTableBody {
        height: auto !important; min-height: 0 !important; max-height: none !important;
        overflow: visible !important;
    }
    .uictrl_ReportTable > .uictrl_ControlHeader { break-after: avoid; }
    .uictrl_ReportTableGrid thead { display: table-header-group; }
    .uictrl_ReportTableGrid tr { break-inside: avoid; }
    .uictrl_ReportTableGrid { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}