:root {
	--body--bgcolor: #1c1c1c;
	--body--color: #fff;
	--link--color: rgb(109, 203, 253);
	--link--color-hover: #c5fc98fe;
	--diagram--bgcolor: #eeffee;
	--info-nav--bgcolor: #111;
	--info-view--padding: 4px;
	--border--color: #fff;
	--button--border-color: #d1d1d1;
	--button--active-color: #666;
	--input--color: #fff;
	--input--bgcolor: rgb(51, 51, 51);
	--input--disabled-color: #77a;
	--input--disabled-bgcolor: #333;
	--input--height: 30px;
	--tableview__value--color1: white;
	--tableview__value--color2: rgba(255,255,230,1);
	--tableview__value--color3:rgba(240,240,255,1);
	--tableview__value--stroke-color: black;
	--tableview__value--bgcolor: rgba(238,255,238,1);
	--tableview__input--color: rgba(254,239,167,1);
	--tableview__selected-color: rgb(165, 214, 81);
	--tableview__error--color: rgb(255, 100, 100);
	--selected__list--bgcolor: rgb(79, 85, 116);
	--expr-table-row-color: rgb(79, 85, 116);
	--subtext--color: darkgray;
	--title--color: #69e469;
	--bold--color: #fbb636;
}
@media (prefers-color-scheme: light) {
	:root {
		--body--bgcolor: #fafafa;
		--body--color: #000;
		--link--color: blue;
		--link--color-hover: #108020;
		--diagram--bgcolor: #eeffee;
		--info-nav--bgcolor: #f3f3f3;
		--border--color: #000;
		--button--border-color: #bababa;
		--button--active-color: #ccc;
		--input--color: #000;
		--input--bgcolor: #fff;
		--input--disabled-color: #555;
		--input--disabled-bgcolor: #ccc;
		--tableview__value--color1: white;
		--tableview__value--color2: rgba(255,255,230,1);
		--tableview__value--color3:rgba(240,240,255,1);
		--tableview__value--stroke-color: black;
		--tableview__value--bgcolor: rgba(238,255,238,1);
		--tableview__input--color: rgba(254,239,167,1);	
		--tableview__error--color: rgb(255, 100, 100);
		--selected__list--bgcolor: lightgray;
		--expr-table-row-color: lightgray;
		--subtext--color: rgb(102, 101, 101);
		--title--color: #040;
		--bold--color: black;
	}
}

input:focus-visible, textarea:focus-visible {
	outline: 1px solid white;
	border: solid 2px blue;
	border-radius: 5px;
}

body {
	background-color: var(--body--bgcolor) !important;
	color: var(--body--color);
	box-sizing: border-box;
}

input {
	font-size: 12pt;
	height: 28px;
	width: 100%;
	box-sizing: border-box;
	padding-left: 3px;
	padding-right: 3px;
	border: solid 1px;
	border-radius: 5px;
	color: var(--link--color);
	background-color: var(--input--bgcolor);
}

input:hover {
	color: var(--link--color-hover);
}

input:disabled {
	color: var(--input--disabled-color);
	background-color: var(--input--disabled-bgcolor);
}

input[type=checkbox] {
	height: 20px;
}

textarea {
	overflow: auto;
	text-align: left;
	font-size: 1em;
	box-sizing: border-box;
	white-space: pre-wrap;
	tab-size: 4;
	padding-left: 5px;
	color: var(--input--color);
	background-color: var(--input--bgcolor);
	border-radius: 5px;
	resize: none;
}

textarea:disabled {
	color: var(--input--disabled-color);
	background-color: var(--input--disabled-bgcolor);
}

b {
	color: var(--bold--color);
}

button {
	color: var(--link--color);
	background-color: var(--input-bgcolor);
	border-radius: 5px;
	border: solid 1px;
	font-size: 12pt;
	height: 28px;
	cursor: pointer;
}

button:active {
	background-color: var(--button--active-color);
}

button:disabled {
	color: var(--input--disabled-color);
	background-color: var(--input--disabled-bgcolor);
}

button:focus {
	outline: none;
}

button:focus-visible {
	outline: 2px solid var(--border--color);
}

button:hover {
	color: var(--link--color-hover);
}

.input-file-button {
	overflow: hidden;
	position: relative;
	text-align: center;
	padding-top: 4px;
	box-sizing: border-box;
	color: var(--link--color);
	background-color: var(--input-bgcolor);
	border-radius: 5px;
	border: solid 1px;
	border-color: var(--button--border-color);
	font-size: 12pt;
	height: 28px;
	float: left;
}

.input-file-button [type=file] {
	display: block;
	cursor: inherit;
	filter: alpha(opacity=0);
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	position: absolute;
	right: 0;
	text-align: right;
	top: 0;
}

svg text {
	pointer-events: none;
}

svg text:hover {
	stroke: var(--link--color-hover);
	fill: var(--link--color-hover);
}

a {
	color: var(--link--color);
}

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

#button {
	overflow: hidden;
}

#button__label_formula-row {
	display: grid;
	grid-template-columns: 60px 1fr;
}

.button__action_select-row {
	margin-top: 10px;
	margin-right: 10px;
	display: grid;
	grid-template-columns: 80px 1fr;
}

.button__action-label {
	padding-right: 10px;
	width: 100px;
}

.button__action_select {
	width: 100%;
}

#button__target_formula-row {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 60px 1fr;
	width: 100%;
}

.button__target-label {
	padding-right: 10px;
	width: 100px;
}

.button__target_formula {
	width: 100%;
}

#button__target_calculated {
	overflow-wrap: break-word;
	padding-right: 5px;
	margin-top: 10px;
}

.checkbox-and-label {
	display: grid;
	grid-template-columns: 50px 1fr;
	grid-template-rows: 1fr;
	color: var(--link--color);
}

.checkbox__label {
	grid-area: 1 / 2 / 1 / 2;
	align-self: center;
}

.checkbox-and-label:hover {
	color: var(--link--color-hover);
}

.checkbox__input {
	grid-area: 1 / 1 / 1 / 1;
	align-self: center;
}

.entry--selected {
	background-color: var(--selected__list--bgcolor);
}

.result-table__column-label {
	font-size: 10pt;
}

#clipboard {
	position: absolute;
	left: 20px;
	top: 20px;
	height: 80%;
	width: 45%;
	background-color: var(--body--bgcolor);
}

#clipboard__header {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-areas: "title import";
	grid-column-gap: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

#clipboard__header-title {
	grid-area: title;
	align-self: center;
	font-size: 18pt;
}

#clipboard__import-button {
	grid-area: import;
	border: solid 1px;
	width: auto;
	justify-self: left;
	border-color: var(--link--color);
	padding-left: 5px;
	padding-right: 5px;
}

#clipboard__import-button:hover {
	color: var(--link--color-hover);
	border-color: var(--link--color-hover);
}


#clipboard__display {
	width: 100%;
	height: 100%;
}

#console {
	height: 100%;
	font-size: 1em;
	display: grid;
	grid-area: view;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 80px;
	grid-template-areas: "result"
		"input"
}

#console__main {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 40px;
	grid-template-areas: "view"
		"footer"					
}

#console__result {
	grid-area: result;
	overflow-y: auto;
}

#console__input {
	grid-area: input;
	margin-top: 3px;
}

#console__footer {
	grid-area: footer;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "toggle readfile spare"
}

#consule__toggle {
	grid-area: toggle;
}

#console__read-file {
	grid-area: readfile;
	justify-self: center;
	align-self: center;
}

#console__spare {
	grid-area: spare;
}

#console__read-file-label {
	margin-top: 5px;
	width: 200px;
}

#console__chatpanel {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 80px;
	grid-template-areas: "chatlog"
		"chatinput"
}

#console__chatlog {
	grid-area: chatlog;
	overflow-y: auto;
}

#console__chatinput {
	grid-area: chatinput;
}

.datatable__column-edit-section {
	margin-top: 5px;
	margin-bottom: 10px;
	padding-top: 10px;
	border-top: solid 1px var(--border--color);
}

#datatable__column-unit-line {
	color: var(--link--color);
	cursor: pointer;
}

#datatable__column-unit-line:hover {
	color: var(--link--color-hover);
}

#datatable__column-delete-button {
	margin-top: 20px;
}

#datatable__row-view {
	display: grid;
	grid-template-rows: var(--input--height) var(--input--height) 1fr;
	grid-template-areas: "number"
		"buttons"
		"fields";
	grid-gap: 5px;
	margin-top: 5px;
}

#datatable__edit-row-number {
	grid-area: number;
	display: grid;
	grid-template-columns: 1fr 30px 30px 30px 30px;
	grid-gap: 5px;
}

#datatable__edit-row-fields {
	overflow: auto;
	grid-area: fields;
	height: calc(var(--info-height) - 120px);
	align-content: start;
	display: grid;
	grid-gap: 10px 5px;
}

#datatable_edit-row-buttons {
	grid-area: buttons;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
}

#datatable__edit-row-last,  #datatable__edit-row-first {
	font-size: 16pt;
}

#datatable__table {
	display: grid;
	grid-area: display-area;
	grid-template-rows: var(--input--height) var(--input--height) 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "display-buttons"
		"filter"
		"display";
	grid-gap: 5px;
	margin-top: 5px;
}

#datatable__display-buttons {
	grid-area: display-buttons;
}

#datatable__display-buttons button {
	margin-right: 10px;
}

#datatable__column-value-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--input--height);
	box-sizing: border-box;
	grid-gap: 20px;
}

#datatable__column-iscalculated {
	color: var(--link--color);
}

#datatable__column-iscalculated:hover {
	color: var(--link--color-hover);
}

#datatable__filter-row {
	display: grid;
	grid-template-columns: 40px 1fr;
}

.diagram__import-warning, .diagram__maxicons_warning {
	fill: red;
	stroke: red;
}

/* prevent diagram text being selected when moving icons on iOS */
.diagram__text-components {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#diagram__context-menu {
	fill: rgb(51, 51, 51);
}

.diagram__context-menu-text {
	fill: rgb(109, 203, 253);
	stroke: rgb(109, 203, 253);
}

/* alas this did not work. Hover seems to be ignored for nested svg things
.diagram__context-menu-text:hover {
	stroke: var(--link--color-hover);
	fill: var(--link--color-hover);
} */

.diagram__toolicon {
	cursor: pointer;
}

#diagram__wrapper {
	/* touch-action: none needed to prevent pinch from zooming entire window on ios */
	touch-action: none;
	/* below needed to prevent long presses on diagram from selecting text on ios */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#expression {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) var(--input--height) var(--input--height) 1fr;
	grid-template-areas: "options"
		"formula"
		"out-units"
		"display";
	box-sizing: border-box;
	grid-gap: 2px;
}

#expression__formula {
	width: 100%;
	grid-area: formula;
	align-self: center;
	padding: 3px;
	border-top: solid 1px var(--border--color);
	border-bottom: solid 1px var(--border--color);
	box-sizing: border-box;
}

#expression__formula-equal {
	grid-area: formula-equal;
	margin-left: 5px;
}

#expression__formula-field {
	grid-area: formula-field;
}

#expression__options {
	grid-area: options;
}

#expression__in-out-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr 40px;
	grid-template-rows: 1fr;
	grid-template-areas: "is-input show-input add-new";
}

#expression__is-input {
	grid-area: is-input;
	grid-template-columns: 30px 1fr
}

#expression__show-input {
	grid-area: show-input;
	grid-template-columns: 30px 1fr
}

#expression__add-new {
	grid-area: add-new;
	color: var(--link--color);
	cursor: pointer;
}

#expression__is-input-label, #expression__show-input-label {
	font-size: 11pt;
}

#expression__is-input-checkbox, #expression__show-input-checkbox {
	height: 15px;
	width: 15px;
}

#expression__string-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#expression__string-cell-coord {
	align-self: center;
}

#expression__string-done {
	justify-self: center;
}

#expression__string-text {
	width: 100%;
	height: calc(var(--info-height) - calc(var(--input--height) * 2));
}

#expression__table-view {
	display: grid;
	grid-template-rows: var(--input--height) 1fr;
	grid-template-areas: "number"
		"fields";
	grid-gap: 5px;
	margin-top: 5px;
}

#expression__table-row-number {
	grid-area: number;
	display: grid;
	grid-template-columns: 1fr 30px 30px 30px 30px 50px;
	grid-gap: 5px;
}

#expression__table-row-fields {
	overflow: auto;
	grid-area: fields;
	height: calc(var(--info-height) - 120px);
	align-content: start;
	display: grid;
	grid-gap: 10px 5px;
}

#expression__table-row-last,  #datatable__edit-row-first {
	font-size: 16pt;
}

.expression__table-row-name-label {
	background-color: var(--expr-table-row-color);
}

#expression__units-format {
	grid-area: out-units;
	display: grid;
	grid-template-columns: 1fr 50px;
}

#expression__format {
	align-self: end;
}

#expression__format-input {
	font-size: 10pt;
	height: 22px;
}

#expression__string-type {
	color: var(--body--color)
}

#expression__units {
	box-sizing: border-box;
	padding-top: 2px;
	color: var(--link--color);
	cursor: pointer;
	align-self: center;
}

#expression__units:hover {
	color: var(--link--color-hover);
}

.formula-field {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "formula-refresh formula-display";
	width: 100%;
	box-sizing: border-box;
	color: var(--link--color);
	cursor: pointer;
}

.formula-input-field {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 1fr;
	grid-template-areas: "formula-refresh formula-display formula-edit";
	width: 100%;
	box-sizing: border-box;
	color: var(--link--color);
	cursor: pointer;
}

.formula-field__text-display:hover, .formula-field__refresh:hover, .formula-field__edit-button:hover {
	color: var(--link--color-hover);
}

.formula-field__text-display {
	grid-area: formula-display;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--input--bgcolor);
	box-sizing: border-box;
	padding-left: 3px;
	padding-right: 3px;
	border: solid 1px;
	border-radius: 5px;
}

.formula-field__refresh {
	grid-area: formula-refresh;
}

.formula-field__edit-button {
	grid-area: formula-edit;
	justify-self: center;
	font-size: 16pt;
}

#formula-editor {
	height: 100%;
	padding-top: 2px;
	box-sizing: border-box;
}

#formula-editor__edit {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) 1fr var(--input--height) var(--preview-height) ;
	grid-template-areas: "toolbar"
		"input"
		"actions"
		"preview";
	height: 100%;
	box-sizing: border-box;
	grid-gap: 5px;
}

#formula-editor__preview-unit {
	grid-area: previewunits;
	font-size: 15px;
}

#formula-editor__preview-table {
	grid-area: preview;
	height: 100%;
	box-sizing: border-box;
}

#formula-editor__preview-param {
	grid-area: preview;
	box-sizing: border-box;
	overflow: auto;
	color: var(--link--color);
	cursor: pointer;
}

#formula-editor__preview-func-desc {
	grid-area: preview;
	box-sizing: border-box;
	overflow: auto;
}

#formula-editor__toolbar {
	grid-area: toolbar;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 5px;
}

#formula-editor__toolbar button {
	font-size: 10pt;
	width: 100px;
	justify-self: center;
}

.formula-editor__display {
	grid-area: input;
}

#formula-editor__actions {
	display: grid;
	grid-area: actions;
	grid-template-columns: 1fr 1fr 1fr 12px;
	grid-template-rows: 1fr;
	grid-template-areas: "preview current apply resize";
	grid-gap: 5px;
}

#formula-editor__actions button {
	font-size: 10pt;
	width: 95px;
	justify-self: center;
}

#formula-editor__cancel-button {
	font-size: 10pt;
	width: 100px;
	justify-self: center;
}

#formula-editor__apply-button {
	grid-area: apply;
}

#formula-editor__preview-button {
	grid-area: preview;
}

#formula-editor__current-button {
	grid-area: current;
}

#formula-editor__preview-resize {
	grid-area: resize;
	color: var(--link--color);
	cursor: row-resize;
}

#formula-editor__preview-resize:hover {
	color: var(--link--color-hover);
}

#formula-editor__editor {
	grid-area: input;
	height: 100%;
	margin-right: 1px;
}

#f-picker {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) 1fr;
	grid-template-areas: "header"
		"scrollarea";
}

#f-picker__header {
	grid-area: header;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "title cancel";
}

#f-picker__scroll-area {
	grid-area: scrollarea;
	overflow: auto;
	height: calc(var(--info-height) - 70px);
}

#f-picker__title {
	grid-area: title;
	color: var(--title--color);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0em;
	margin-bottom: 0.2em;
}

#f-picker__cancel {
	grid-area: cancel;
	width: 5em;
	justify-self: right;
}

.f-picker__section {
	border-top: solid 1px var(--border--color);
	padding-bottom: 5px;
}

.f-picker__section-header {
	color: var(--link--color);
	padding: 3px 0;
	cursor: pointer;
}

.f-picker__section-header:hover {
	background-color: var(--button--active-color);
}

.f-picker__comment {
	padding: 5px 0;
}

.f-picker__f {
	padding: 0 10px;
}

.f-picker__f-def {
	color: var(--link--color);
	border-top: solid 1px var(--border--color);
	padding: 3px 0;
	cursor: pointer;
}

.f-picker__f-def:hover {
	background-color: var(--button--active-color);
}

#f-picker__f-desc {
	color: var(--body--color);
}

#f-picker__insert {
	margin: 5px auto;
	display: flex;
	justify-content: center;
}

#htmlpage {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) 1fr;
	grid-template-areas: "formula"
		"display";
	box-sizing: border-box;
	grid-gap: 2px;
	padding-right: 5px;
}

#htmlpage__formula {
	padding-top: 5px;
}

#htmlpage__iframe {
	height: calc(var(--info-height) - 75px);
	width: 100%;
}

#htmlpage__iframe-import {
	height: calc(var(--info-height) - 120px);
	width: 100%;
}


#graph__button-fields {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
	height: var(--input--height);
	margin-top: 5px;
	margin-bottom: 5px;
}

.graph__display-unit {
	color: var(--link--color);
	cursor: pointer;
}

.graph__display-unit:hover {
	color: var(--link--color-hover);
}

#graph__input-rows {
	border-top: solid 1px var(--border--color);
	overflow: auto;
	height: calc(var(--info-height) - 80px);
}

.graph__input-row {
	display: grid;
	grid-template-rows: 1fr var(--input--height);
	border-bottom: solid 1px var(--border--color);
	padding-bottom: 5px;
	padding-top: 5px;
}

.graph__input-row-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 40px;
	grid-gap: 5px;
	grid-template-areas: "line scatter bar bardot hidden delete";
	padding-top: 5px;
}

.graph__type-button {
	justify-self: center;
}

.graph__type-selected {
	color: var(--link--color);
	cursor: pointer;
}

.graph__type-selected:hover {
	color: var(--link--color-hover);
}

#graph__plot-view {
	height: calc(var(--info-height) - 80px);
}

#graph__svg-plot2d {
	font-size: 12pt;
	/* touch-action: none needed to prevent pinch from zooming entire window on ios */
	touch-action: none;
	/* below needed to prevent long presses on diagram from selecting text on ios */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#graph__svg-plot3d {
	font-size: 12pt;
	/* touch-action: none needed to prevent pinch from zooming entire window on ios */
	touch-action: none;
	/* below needed to prevent long presses on diagram from selecting text on ios */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.graph__row-delete-button {
	justify-self: right;
	grid-area: delete;
	color: red;
	padding-right: 5px;
}

.graph__row-inputs {
	display: grid;
	grid-template-columns: 50px 2fr 1fr;
	grid-gap: 5px;
}

#info-view {
	grid-area: info;
	padding-left: var(--info-view--padding);
	padding-right: var(--info-view--padding);
}

#info-nav {
	grid-area: nav;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-areas: "back title help";
	align-items: center;
	background-color: var(--info-nav--bgcolor);
	border-bottom: solid 1px var(--border--color);
	/* below needed to prevent long presses on diagram from selecting text on ios */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#info-nav__back {
	grid-area: back;
	margin-left: 10px;
	color: var(--link--color);
	cursor: pointer;
}

#info-nav__back:hover {
	color: var(--link--color-hover);
}

#info-nav__title {
	grid-area: title;
	justify-self: center;
}

#info-nav__help {
	grid-area: help;
	color: var(--link--color);
	margin-right: 10px;
	justify-self: right;
	cursor: pointer;
}

#info-nav__help:hover {
	color: var(--link--color-hover);
}

#info-tools {
	grid-area: infotools;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
	grid-template-rows: 1fr;
	grid-template-areas: "expand sessions console undo redo units";
	justify-items: center;
	align-items: center;
	border-top: solid 1px var(--border--color);
}

.info-tools__button {
	padding: 0;
	width: 100%;
	background: transparent;
	border: 0;
	font-size: 10pt;
}

#info-tools__expand-button {
	grid-area: expand;
}

#info-tools__undo-button {
	grid-area: undo;
}

#info-tools__redo-button {
	grid-area: redo;
}

#info-tools__units-button {
	grid-area: units;
}

#info-tools__console-button {
	grid-area: console;
}

#info-tools__sessions-button {
	grid-area: sessions;
}

#iter__control-line {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "autorun addrecord";
	padding-top: 5px;
}

#iter__current-i-x {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin-left: 20px;
}

.iter__input {
	border-bottom: solid 1px;
	margin-bottom: 5px;
	padding: 5px;
}

#iter__input-list {
	overflow: auto;
	height: calc(var(--info-height) - 115px);
	border: solid 1px;
	margin-top: 5px;
}

#iter__autorun {
	grid-area: autorun;
}

#iter__addrecord-button {
	grid-area: addrecord;
}

.iter__record-desc-line {
	display: grid;
	grid-template-columns: 1fr 20px;
}

.iter__recorded-delete {
	color: red;
}

.iter__input .formula-field {
	padding-top: 5px;
	padding-bottom: 5px;
}

.link {
	color: var(--link--color);
}

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

#matrix {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) var(--input--height) var(--input--height) 1fr;
	grid-template-areas: "size"
		"formula"
		"out-units"
		"display";
	box-sizing: border-box;
	grid-gap: 2px;
}

#matrix__formula-line {
	grid-area: formula;
	width: 100%;
	align-self: center;
	padding: 3px;
	border-top: solid 1px var(--border--color);
	border-bottom: solid 1px var(--border--color);
}

#matrix__cell-formula {
	width: 100%;
}

#matrix__size-fields {
	grid-area: size;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 4em 1fr 4em 1fr;
	grid-gap: 3px;
	width: 100%;
	align-self: center;
	border-top: solid 1px var(--border--color);
}

#matrix__unit-line {
	display: grid;
	grid-area: out-units;
	grid-template-columns: 1fr 50px;
	padding-top: 3px;
}

#matrix__format-input {
	font-size: 10pt;
	height: 22px;
}

#matrix__output-unit {
	color: var(--link--color);
	margin-right: 5px;
	cursor: pointer;
}

#matrix__output-unit:hover {
	color: var(--link--color-hover);
}

#menu__options_formula-row {
	display: grid;
	grid-template-columns: 60px 1fr;
}

.menu__select-row {
	text-align: center;
	margin-top: 15px;
	margin-right: 10px;
}

#menu__selected-value-row {
	text-align: center;
	margin-top: 15px;
	margin-right: 10px;
}

#mmapp__wrapper--two-pane {
	font-size: 1em;
	width: 100%;
	display: grid;
	grid-template-areas: "diagram info";
}

#mmapp__info-view {
	display: grid;
	grid-template-areas: "nav"
		"info"
		"infotools";
}

.mmapp__wrapper--one-pane {
	font-size: 1em;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "nav"
		"info"
		"infotools";
}

.mmapp__diagram {
	background-color: var(--diagram--bgcolor);
	border-right: 1px solid var(--border--color);
}

#mmapp__diagram--two-pane {
	grid-area: diagram;
}

#mmapp__diagram--one-pane {
	grid-area: nav / 1 / info / 1;
}

#model__fields-list {
	width: 100%;
	border-bottom: solid 1px;
	box-sizing: border-box;
	overflow-y: auto;
	height: calc(var(--info-height) - 33px);
}

#model__import-source {
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-template-rows: var(--input--height);
	grid-template-areas: "label makelocal";
	grid-gap: 5px;
	padding: 5px 2px 5px 2px;
	border-bottom: solid 2px;
	border-top: solid 2px;
	}

#model__import-label {
	grid-area: label;
	padding-left: 5px;
}

#model__import-button {
	grid-area: label;
}

#model__sessions-list {
	/* grid-area: menu-start / list-start / list-end / list-end; */
	grid-area: display-area;
	height: calc(var(--info-height) - 100px);
	margin-top: 20px;
	overflow: auto;
}

#model__import-makelocal {
	grid-area: makelocal;
}

#model__indextool-fields {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-gap: 10px;
	margin-top: 5px;
}

#model__inputs-title {
	border-bottom: solid 2px;
	padding: 5px;
}

#model__indextool-input {
	height: 22px;
}

#model__outputs-title {
	border-bottom: solid 2px;
	border-top: solid 2px;
	padding: 5px;
}

#model__others-title {
	border-bottom: solid 2px;
	border-top: solid 2px;
	padding: 5px;
}

.model__input-field {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "name"
		"formula"
		"value";
	color: var(--link--color);
	border-bottom: dashed 1px var(--border--color);
	padding: 5px 0px;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
}

.model__input-field:hover {
	color: var(--link--color-hover);
}

.model__input-field-name {
	grid-area: name;
	white-space: nowrap;
	overflow: hidden;
}

.model__input-field-formula {
	grid-area: formula;
	white-space: nowrap;
	overflow: hidden;
}

.model__input-field-value {
	grid-area: value;
	white-space: nowrap;
	overflow: hidden;
}

.model__output-field {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "name"
		"value";
	color: var(--link--color);
	border-bottom: dashed 1px var(--border--color);
	padding: 5px 0px;
	cursor: pointer;
}

.model__output-field:hover {
	color: var(--link--color-hover);
}

.model__output-field-name {
	grid-area: name;
	white-space: nowrap;
	overflow: hidden;
}

.model__output-field-value {
	grid-area: value;
	white-space: nowrap;
	overflow: hidden;
}

.model__other-field {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "type name";
	color: var(--link--color);
	border-bottom: dashed 1px var(--border--color);
	padding: 5px 0px;
	cursor: pointer;
}

.model__other-field:hover {
	color: var(--link--color-hover);
}

.model__output-other-name {
	grid-area: name;
	white-space: nowrap;
	overflow: hidden;
}

.model__output-other-type {
	grid-area: type;
	white-space: nowrap;
	overflow: hidden;
}

#ode__button-fields {
	width: 100%;
	display: grid;
	grid-template-rows: var(--input--height);
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
	column-gap: 10px;
}

#ode__check-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "is-stiff autorun";
	padding-top: 5px;
}

.ode__input {
	border-bottom: solid 1px;
	margin-bottom: 5px;
	padding: 5px;
}

#ode__input-list {
	overflow: auto;
	height: calc(var(--info-height) - 155px);
	border: solid 1px;
	margin-top: 5px;
}

#ode__is-stiff {
	grid-area: is-stiff;
}

#ode__autorun {
	grid-area: autorun;
}

#ode__current-t {
	margin-left: 20px;
}

#ode__t-and-addrecord {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--input--height);
	padding-top: 5px;
	column-gap: 10px;
}

#ode__addrecord-button {
	margin-right: 5px;
}

#ode__run-button {
	margin-right: 5px;
}

.ode__record-desc-line {
	display: grid;
	grid-template-columns: 1fr 20px;
}

.ode__recorded-delete {
	color: red;
}

.ode__input .formula-field {
	padding-top: 5px;
	padding-bottom: 5px;
}

#opt__button-fields {
	width: 100%;
	display: grid;
	grid-template-rows: var(--input--height);
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 1px;
	column-gap: 10px;
}

#opt__fx-fields {
	margin-bottom: 5px;
}

#opt__output-header {
	background-color: var(--input--bgcolor);
	height: var(--input--height);
	padding-top: 10px;
}

#opt__output-list {
	overflow: auto;
	height: calc(var(--info-height) - 250px);
	margin-top: 5px;
}

.opt__line {
	display: grid;
	grid-template-columns: 40px 1fr;
	border-bottom: solid 1px;
	margin-bottom: 5px;
	margin-right: 5px;
	padding: 5px;
}

#sessions__wrapper {
	display: grid;
	grid-template-rows: 50px 1fr 1fr;
	grid-template-areas: "header"
		"menu"
		"list";
}

#sessions__header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: "new save import download";
	grid-column-gap: 10px;
	padding-top: 5px;
}

#sessions__new-button {
	grid-area: new;
}

#sessions__save-button {
	grid-area: save;
}

#sessions__import-button {
	grid-area: import;
	border: solid 1px;
	border-color: var(--link--color);
}

#sessions__import-button:hover {
	color: var(--link--color-hover);
	border-color: var(--link--color-hover);
}

#sessions__export-button {
	grid-area: download;
	font-size: 8pt;
}

#sessions__list {
	grid-area: menu-start / list-start / list-end / list-end;
	height: calc(var(--info-height) - 50px);
	overflow: auto;
	z-index: 1;
}

#sessions__menu-wrapper {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	grid-template-areas: "title"
		"rename"
		"delete"
		"clip"
		"export"
		"copy"
		"cancel";
		width: 150px;
		margin: 0 auto;
		grid-row-gap: 15px;
}

#sessions__menu-title {
	grid-area: title;
	font-size: 16pt;
	text-align: center;
}

#sessions__menu-copy {
	grid-area: copy;
}

#sessions__menu-rename {
	grid-area: rename;
}

#sessions__menu-delete {
	grid-area: delete;
}

#sessions__menu-clip {
	grid-area: clip;
}

#sessions__menu-export {
	grid-area: export;
}

#sessions__menu-cancel {
	grid-area: cancel;
}

.sessions__menu-button {
	justify-self: center;
	width: 100%;
}

#sessions__prompt-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: "prompt prompt"
		"input input"
		"cancel apply";

	width: 300px;
	margin: 0 auto;
	grid-row-gap: 15px;

}

#sessions__menu-prompt {
	grid-area: prompt;
	margin-top: 10px
}

#sessions__prompt-input {
	grid-area: input;
}

#sessions__prompt-cancel {
	grid-area: cancel;
	width: 100px;
}

#sessions__prompt-apply {
	grid-area: apply;
	width: 100px;
}

.sessions__entry {
	display: grid;
	grid-template-columns: 1fr 30px;
	cursor: pointer;
}

.sessions__folder-name:hover, .sessions__entry-menu:hover, .sessions__entry-name:hover {
	background-color: var(--button--active-color);
}

.sessions__folder-name {
	color: var(--link--color-hover);
}

#sessions__remote {
	padding-bottom: 5px;
	border-bottom: solid 1px;
	text-align: center;
	color: green;
}

#solver__button-fields {
	width: 100%;
	display: grid;
	grid-template-rows: var(--input--height);
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 10px;
	column-gap: 10px;
}

#solver__function-list {
	overflow: auto;
	height: calc(var(--info-height) - 145px);
	border: solid 1px;
	margin-top: 5px;
}

.solver__function {
	display: grid;
	grid-template-columns: 30px 1fr;
	grid-template-rows: var(--input--height) var(--input--height);
	grid-template-areas: "flabel formula"
		"clabel count";
	grid-gap: 5px;
	border: solid 1px;
	margin-bottom: 5px;
	padding: 5px;
}

.solver__formula-label {
	grid-area: flabel;
}

.solver__func-formula {
	grid-area: formula;
}

.solver__count-label {
	grid-area: clabel;
}

.solver__count-formula {
	grid-area: count;
}

.solver__fx-and-rm {
	display: grid;
	grid-template-columns: 1fr 20px;
}

.solver__delete-button {
	color: red;
}

#solver__max-fields {
	display: grid;
	grid-template-rows: var(--input--height);
	grid-template-columns: 1fr 1fr;
	margin-top: 5px;
}

#tableview__value-svg {
	grid-area: display;
	background-color: var(--tableview__value--bgcolor);
	width: 100%;
	font-size: 10pt;
	stroke: var(--tableview__value--stroke-color);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tableview__value-svg rect {
	cursor: pointer;
}

#tableview__origin-box {
	height: var(--input--height);
}

.tableview__cell-text {
	white-space: pre;
	font-family: monospace;
	font-size: 9.5pt;
}

.tableview__cell--selected {
	fill: var(--tableview__selected-color);
}

.tableview__cell--color1 {
	fill: var(--tableview__value--color1);
}

.tableview__cell--color2 {
	fill: var(--tableview__value--color2);
}

.tableview__cell--color3 {
	fill: var(--tableview__value--color3);
}

.tableview__cell--input {
	fill: var(--tableview__input--color);
}

.tableview__cell--error {
	fill: var(--tableview__error--color);
}

#tableview__string-text, #tableview__scalar-string {
	/* height: calc(var(--preview-height) - 20px); */
	height: var(--tableview-height);
	width: 100%;
}

#tool-view {
	height: 100%;
	display: grid;
	grid-template-rows: var(--input--height) 1fr;
	grid-template-areas: "name-area"
		"display-area";
	grid-gap: 5px;
}

#tool-view__name-area {
	grid-area: name-area;
	display: grid;
	grid-template-columns: 1fr 70px 4em;
	grid-template-areas: "name is-output note-toggle";
	grid-gap: 5px;
	width: 100%;
	height: var(--input--height);
	box-sizing: border-box;
	padding-top: 5px;
	padding-right: 2px;
}

#tool-view__name {
	grid-area: name;
}

#tool-view__name-input {
	height: 24px;
}

#tool-view__in-out-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "is-input is-output";
}

#tool-view__is-input {
	display: grid;
	grid-area: is-input;
	grid-template-columns: 20px 1fr;
}

#tool-view__is-output {
	display: grid;
	grid-area: is-output;
	grid-template-columns: 20px 1fr;
}

#tool-view__is-input-label, #tool-view__is-output-label {
	font-size: 11pt;
}

#tool-view__is-output-checkbox {
	height: 10px;
	width: 10px;
}

#tool-view__notes-toggle {
	grid-area: note-toggle;
	font-size: 10pt;
	height: 24px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tool-view__notes {
	grid-area: display-area;
	display: grid;
	grid-template-rows: var(--input--height) 1fr;
	grid-template-areas: "notes-header"
		"notes-input";
	grid-gap: 10px;
}

#tool-view__notes-header {
	grid-area: notes-header;
	display: grid;
	grid-template-columns: 1fr 6em 6em;
	grid-template-areas: "notes-title notes-html notes-diagram";
	padding-top: 5px;
	grid-gap: 5px;
}

#tool-view__notes-title {
	grid-area: notes-title;
}

#tool-view__diagram-notes-toggle {
	grid-area: notes-diagram;
}

#tool-view__html-notes-toggle {
	grid-area: notes-html;
}

.tool-view__show-notes-toggle {
	font-size: 8pt;
	text-align: center;
	vertical-align: middle;
	/* color: var(--link--color); */
	box-sizing: border-box;
	cursor: pointer;
}

#tool-view__notes-input {
	grid-area: notes-input;
}

#units {
	--button-section-height: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--button-section-height) 1fr;
	grid-template-areas: "customunits customsets"
		"setslist setslist";
	gap: 10px 10px;
	background-color: var(--input--bgcolor);
}

#units button {
	justify-self: center;
	align-self: center;
	margin-top: 10px;
}

#units__custom-units-button {
	grid-area: customunits;
}

#units__custom-sets-button {
	grid-area: customsets;
}

#units__sets-list {
	grid-area: setslist;
	width: 100%;
	border-bottom: solid 1px;
	overflow: auto;
	height: calc((var(--info-height) - var(--button-section-height)) - 10px);
}

.units__set-select {
	display: grid;
	grid-template-columns: 1fr 3fr;
	border-top: solid 1px;
	padding: 5px;
}

.units__set-select input {
	grid-area: 1 / 1 / 1 / 1;
	margin-left: 15px;
	margin-right: 25px;
}

.units__label--checked {
	grid-area: 1 / 2 / 1 / 2;
	color: var(--body--color);
	font-weight: bold;
}

.units__label {
	grid-area: 1 / 2 / 1 / 2;
	color: var(--link--color);
	padding-top: 8px;
	cursor: pointer;
}

.units__label:hover {
	background-color: var(--button--active-color);
}

#user-units {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 70px 1fr;
	grid-template-areas: "inputsection"
		"unitslist";
	height: 100%	
}

#user-units__input-section {
	grid-area: inputsection;
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "label input"
		"example example";
	grid-gap: 5px;
	margin-right: 5px;
}

#user-units__input-label {
	grid-area: label;
	margin-top: 10px	
}

#user-units__input {
	grid-area: input;
	justify-self: center;
	font-size: 10pt;
	margin-top: 5px;
	border: solid 1px
}

#user-units__example {
	grid-area: example;
	margin-left: 10px;
	margin-top: 5px;
}

#user-units__unit-list {
	background-color: var(--input--bgcolor);
	height: 100%;
	border-top: solid 1px
}

.user-units__unit {
	border-bottom: solid 1px;
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "definition delete"
		"unittype delete";
	padding-top: 5px;
	padding-bottom: 5px;
}

.user-units__definition {
	color: var(--link--color);
	grid-area: definition;
	margin-left: 10px;
	cursor: pointer
}

.user-units__definition:hover {
	color: var(--link--color-hover);
}

.user-units__type {
	grid-area: unittype;
	margin-left: 10px;
}

.user-units__delete {
	grid-area: delete;
	font-size: 10pt;
	margin-right: 5px;
}

#unit-sets {
	--input-section-height: 40px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input-section-height) 1fr;
	grid-template-areas: "inputsection"
		"setslist";
	height: 100%;
}

#unit-sets__input-section {
	grid-area: inputsection;
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-areas: "label input clone";
	grid-gap: 10px;
}

#unitsets__name-label {
	grid-area: label;
	margin-left: 10px;
	align-self: center;
}

#unit-sets__name-field {
	grid-area: input;
	justify-self: center;
	padding-left: 5px;
	margin-left: 10px;
	border: solid 1px;
	align-self: center;
}

#unit-sets__clone-button {
	grid-area: clone;
	align-self: center;
}

#unit-sets__list {
	grid-area: setslist;
	background-color: var(--input--bgcolor);
	border-top: solid 1px;
	overflow: auto;
	box-sizing: border-box;
	height: calc((var(--info-height) - var(--input-section-height)) - 10px);
}

.unit-sets__row {
	border-bottom: solid 1px;
	display: grid;
	grid-template-columns: 1fr 40px;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "name info"
		"settype info"	
}

.unit-sets__list-set-name {
	color: var(--link--color);
	grid-area: name;
	margin-left: 10px;
	font-size: 14pt;
	overflow: hidden;
	cursor: pointer;
}

.unit-sets__list-set-name:hover {
	color: var(--link--color-hover);
}

.unit-sets__list-set-type {
	grid-area: settype;
	margin-left: 10px;
	color: var(--subtext--color);
}

#unit-sets__info {
	grid-area: info;
	margin-right: 5px;
	font-size: 14pt;
	font-weight: bold;
	color: var(--link--color);
	align-self: center;
	width: 30px;
	border-radius: 10px;
	cursor: pointer;
}

#unit-sets__info:hover {
	color: var(--link--color-hover);
}

#unit-set {
	display: grid;
	--input-section-height: 120px;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input-section-height) 1fr;
	grid-template-areas: "inputsection"
		"unitslist";
	grid-gap: 5px;
	height: 100%
}

#unit-set__input-section {
	grid-area: inputsection;
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: "buttons buttons"
		"namelabel namefield"
		"unitlabel unitfield";
	grid-row-gap: 10px;
}

#unit-set__name-label {
	grid-area: namelabel;
	padding-left: 5px;
}

#unit-set___name-field {
	grid-area: namefield;
}

#unit-set__unit-label {
	grid-area: unitlabel;
	padding-left: 5px;
}

#unit-set___unit-field {
	grid-area: unitfield;
}

#unit-set__buttons {
	grid-area: buttons;
	justify-self: stretch;
	align-self: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: 5px;
}

#unit-set__buttons button {
	width: 140px;
	justify-self: center;
}

#unit-set__delete-set {
	grid-area: 1 / 1 / 1 / 1;
}

#unit-set__clear-selection {
	grid-area: 1 / 2 / 1 / 2;
}

#unit-set__list {
	grid-area: unitslist;
	background-color: var(--input--bgcolor);
	border-top: solid 1px;
	overflow: auto;
	box-sizing: border-box;
	height: calc((var(--info-height) - var(--input-section-height)) - 10px);
}

.unit-set__row {
	border-bottom: solid 1px;
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "name delete"
		"unit delete";
}

.unit-set__name {
	grid-area: name;
	margin-left: 5px;
	font-size: 14pt;
	overflow: hidden;	
}

.unit-set__unit {
	grid-area: unit;
	margin-left: 5px;
	color: var(--link--color);
	cursor: pointer;
}

.unit-set__unit:hover {
	color: var(--link--color-hover);
}

.unit-set__delete {
	grid-area: delete;
	align-self: center;
	margin-right: 10px;
}

#unit-picker {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--input--height) var(--input--height) 1fr;
	grid-template-areas: "buttons"
		"input"
		"list";
		height: 100%
	}

#unit-picker__list {
	grid-area: list;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "types units";
}

#unit-picker__list-types {
	grid-area: types;
	border-right: 1px solid;
	overflow: auto;
	box-sizing: border-box;
	height: calc(var(--info-height) - (3.5 * var(--input--height)));
	white-space: nowrap;
}

.unit-picker__type-name, .unit-picker__unit-name {
	cursor: pointer;
}

.unit-picker__type-name:hover, .unit-picker__unit-name:hover {
	background-color: var(--button--active-color);
}

#unit-picker__list-units {
	grid-area: units;
	padding-left: var(--info-view--padding);
	overflow: auto;
	box-sizing: border-box;
	height: calc(var(--info-height) - (3.5 * var(--input--height)));
	white-space: nowrap;
}

#unit-picker__input {
	grid-area: input;
}

#unit-picker__buttons {
	grid-area: buttons;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "cancel apply";
	justify-content: center;
	padding-left: 10%;
	padding-right: 10%;
	grid-gap: 10px;
}

#unit-picker__cancel {
	grid-area: cancel;
}

#unit-picker__apply {
	grid-area: apply;
}

#worker__status-message {
	text-align: center;
	margin-top: 5px;
}