/*
// file:	style.css
// version:	2.0 (dtb)
*/

/* VARIABLES ================================================================ */
/*
  variables are not supported by some browsers (notably IE); usage should ensure
  the site is at least usable without them enabled.
 */
body {
	--dark-1: var(--dark-0);
	--medium-1: var(--medium-0);
	--light-1: var(--light-0);
	
	--dark-2: var(--dark-0);
	--medium-2: var(--medium-0);
	--light-2: var(--light-0);
	
	--dark-3: var(--dark-0);
	--medium-3: var(--medium-0);
	--light-3: var(--light-0);
	
	--hover: var(--silver);
	--hover-border: var(--invalid);
	--hover-text: var(--invalid);
	
	--active: var(--hover);
	--active-border: var(--hover-border);
	--active-text: var(--hover-text);
	
	--focus: var(--dark-0);
	
	--panel: var(--white);
	--panel-border: var(--silver);
	--panel-text: var(--black);
	
	--widget: var(--dark-0);
	--widget-border: var(--panel-border);
	--widget-text: var(--white);
	
	--error-text: var(--white);
	--warning-text: var(--black);
}

/* RESET ==================================================================== */
html, body, div, span,
h1, h2, h3, h4, h5, p,
a, img,
dl, dt, dd, ol, ul, li,
button, form, input,
table, tbody, tfoot, thead, tr, th, td,
article, aside, section,
figure, figcaption,
footer, header, hgroup,
menu, nav, summary {
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	border-width: 0;
	font-size: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1.15;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* html5 compatibility patches ============================================== */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

datalist {
	display: none;
}

/* GLOBAL =================================================================== */
* {
	border: 0 solid silver;
	border-color: inherit;
	border-color: var(--border, inherit);
	color: var(--text, inherit);
}
.panel {
	--background: var(--panel);
	--border: var(--panel-border);
	--text: var(--panel-text);
	
	background: white;
	background: var(--background, white);
}
a {
	color: blue;
	color: var(--link, blue);
}

html {
	font-size: 86%;
	height: 100%;
	overflow-y: scroll;
}
body {
	min-width: 25em;
	font-family:
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Cantarell,
		"Helvetica Neue",
		sans-serif;
	background: #f4f4f4;
	border-color: silver;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	min-height: 100%;
	height: auto;
}
body > *:empty {
	display: none;
}

a,
a:link,
a:hover,
a:visited {
	text-decoration: none;
}

h1 { font-size: 2.8em; }
h2 { font-size: 1.1em; }
h3, h4 { font-size: 1em; }
h1, h2, h3 { font-weight: 500; }

svg text {
	fill: currentColor;
}

@media only screen {
	.aria-only {
		display: none;
	}
}
.semi-hidden {
	opacity: 0.5;
}
.hidden,
.aria-only,
body:not([class~="dragging"]) .semi-hidden {
	position: absolute !important;
	bottom: 0 !important;
	border-color: transparent !important;
	background: transparent;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
}
:not(.no-icon) > .label:first-child {
	position: absolute;
	max-height: 0;
	border: 0;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
}

.iff-css-vars {
	display: none;
	display: var(--invalid, initial);
}
.iff-not-css-vars {
	display: var(--invalid, none);
}

.menu {
	display: -webkit-flex;
	display: flex;
	list-style: none;
}
.menu li,
.menu li a {
	display: -webkit-flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon {
	width: 1em;
	height: 1em;
}
.no-icon > .icon {
	display: none;
}
:not(.no-icon) > .icon + .label {
	padding-left: 4px;
}
.icon path {
	fill: currentColor;
}

.show-simple .advanced {
	display: none;
}

/* BUTTONS - see below for focus styling */
.button {
	position: relative;
	display: block;
	border-radius: 3px;
	cursor: default;
	color: currentColor;
	background: transparent;
}
.button:hover {
	--background: var(--hover);
	--border: var(--hover-border);
	--text: var(--hover-text);
	background: var(--background, transparent);
	border-color: var(--border, inherit);
}
.pressed {
	--background: var(--active);
	--border: var(--active-border);
	--text: var(--active-text);
	background: var(--background, silver);
	border-color: var(--border, inherit);
}
.-mfi {
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 2px;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	justify-content: center;
	align-items: center;
}
.button:disabled .-mfi {
	opacity: 0.5;
}

/* FOCUS */
.input input:not([type="checkbox"]):focus,
.button:focus,
.-mfi:focus {
	outline: none;
}
.focused .focusable,
:focus .-mfi {
	/*outline: 1px solid rgba(36,138,184,0.15);*/
	box-shadow: 0 0 3px blue;
	box-shadow: 0 0 3px var(--focus, blue);
}
.label {
	text-align: left;
	text-align: start;
}

/* TOOLTIPS */
.-tth {
	position: relative;
}
.tooltip,
.iconize .icon + .label {
	position: absolute;
	z-index: -99;
	left: -9999px;
	top: 0;
	width: 180px;
	width: intrinsic;
	width: -moz-max-content;
	width: max-content;
	max-width: 180px;
	padding: 4px;
	font-size: 0.9em;
	
	--background: var(--panel);
	--border: var(--panel-border);
	--text: var(--panel-text);
	
	color: black;
	color: var(--text, black);
	background: white;
	background: var(--background, white);
	border-width: 1px;
	border-radius: 3px;
	
	opacity: 0;
	transition: opacity 0.15s;
}
.tooltip > p:first-child {
	margin-top: auto;
}
/* don't want to display tooltips, etc. on devices that can't hover */
@media (hover: hover) {
	/* *:hover> doesn't seem to trigger inside button elements in Firefox */
	*:hover > .tooltip,
	.iconize *:hover > .icon + .label,
	.iconize .button:hover .icon + .label {
		z-index: 9;
		opacity: 1;
		margin: 6px;
		transition: opacity 0.15s 0.5s;
	}
}
.iconize .button:disabled .icon + .label {
	display: none;
}

.dragging * {
	cursor: grabbing !important;
}

/* CUSTOM ELMS ============================================================== */
.fillbar {
	position: relative;
	width: 100%;
	text-align: center;
	height: 1em;
}
.fillbar .box {
	position: absolute;
	display: block;
	top: 50%;
	-webkit-transform: translate(0,-.25em);
	transform: translate(0,-.25em);
	box-sizing: content-box;
	width: 100%;
	height: .5em;
	
	border-width: 1px;
	border-radius: 4px;
	overflow: hidden;
}
.fillbar .bar {
	background: silver;
	background: var(--widget, silver);
	height: 100%;
}
.fillbar .label {
	position: relative;
	font-size: 0.9em;
	opacity: 0;
	transition: opacity .15s;
	/*text-shadow: 0 0 1px white, 0 0 2px white, 0 0 4px white;
	text-shadow: 0 0 1px var(--background), 0 0 2px var(--background),
		0 0 4px var(--background);*/
	z-index: 1;
}
.verbose .fillbar .label,
.fillbar:hover .label {
	opacity: 1;
}

.input .focusable,
.input-select .focusable > span:first-child {
	position: relative;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	/*border: 1px solid transparent;*/
	border-radius: 1em;
	transition: border-color .35s;
}
.input-date .focusable,
.input-select .focusable,
.input-constant {
	padding: .15em .5em .15em .75em;
}
.input-select .focusable {
	border-width: 1px;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.input .focusable > * {
	margin-right: .25em;
}
.input .focusable > :last-child {
	margin-right: 0;
}
.input input {
	line-height: 1.7;
	font-size: 1em;
	background: white;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
.input input[type="checkbox"] {
	line-height: 1;
	-webkit-flex-grow: 0;
	flex-grow: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}
.input .bar {
	position: relative;
	height: .25em;
	min-height: 5px;
	border-width: 1px;
	border-radius: .25em;
	transition: border-color .35s;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-align-self: center;
	align-self: center;
	margin: 0 .5em;
}
.input .handle {
	position: absolute;
	height: 1em;
	width: 0;
	top: 50%;
	border-width: 1px;
	border-radius: 1em;
	background: silver;
	background: var(--widget, silver);
	padding: 0 .5em;
	-webkit-transform: translate(-.5em, -50%);
	transform: translate(-.5em, -50%);
	transition: width .35s linear, height .35s linear, left .35s linear,
		border-color .35s, background .35s;
	overflow: hidden;
}
.input .low {
	padding-right: 0;
	border-radius: 1em 0 0 1em;
}
.input .high {
	padding-left: 0;
	border-radius: 0 1em 1em 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.input .button {
	/*color: var(--theme-midtone);*/
	background: white;
	background: var(--background, white);
	border-width: 1px;
	border-radius: 1em;
	margin-left: 2px;
	-webkit-align-self: center;
	align-self: center;
	transition: opacity .2s, transform .2s;
}
.input-yesno {
	display: -webkit-flex;
	display: flex;
}
.input .yesno-host {
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-align-items: stretch;
	align-items: stretch;
	border-width: 1px;
	border-radius: 1em;
	padding: 0 0.5em;
}
.input-yesno .-yes,
.input-yesno .-no {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	text-align: center;
	cursor: default;
}
.input-yesno .handle {
	position: static;
	-webkit-flex-grow: 0;
	flex-grow: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	-webkit-transform: unset;
	transform: unset;
	transition: unset;
	margin: 0 -0.5em;
	height: auto;
}
.yes > .yesno-host .-no,
.no > .yesno-host .-yes {
	display: none;
}
.input .button svg {
	width: 1em;
	height: 1em;
}
.cross-btn .icon path,
.reset-btn .icon path,
.input .button path {
	stroke: currentColor;
	stroke-width: 3px;
	fill: none;
}
.input .clear-btn {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
}
.focused .bar {
	border-color: transparent;
}
.focused .handle {
	left: 0 !important;
	width: 100%;
	height: 1.7em;
	border-color: transparent;
	background: transparent;
}
.focused .low {
	width: 50%;
	width: calc(50% - .5px);
}
.focused .high {
	left: 50% !important;
	width: 50%,
}
.focused .focusable,
.input-select .focusable {
	/*border-color: #bbb;
	border-color: var(--border);
	border-width: 1px;*/
}
.focused .clear-btn,
.input:hover .clear-btn {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.focused .edit-btn {
	pointer-events: none;
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
}
.handle input {
	position: relative;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	max-width: 100%;
	transition: opacity .35s;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.focused .handle input {
	opacity: 1;
	pointer-events: auto;
}
.dropdown {
	display: block;
	max-height: 30em;
	background: white;
	background: var(--background, white);
	border-radius: 0 0 1em 1em;
	overflow-y: auto;
}
.input:not(.static) .dropdown {
	position: absolute;
	max-height: 0;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
	border-width: 1px;
	border-top: 0;
}
.input-select[class~="focused"]:not(.nomatch):not(.static) .focusable,
input:not(.static) .dropdown-hover .focusable {
	border-radius: 1em 1em 0 0;
}
.invalid:not(.focused) input {
	background: var(--warning);
	box-shadow: 0 0 3px red, 0 0 3px red;
	box-shadow: 0 0 3px var(--error), 0 0 3px var(--error);
	color: var(--warning-text);
}
::placeholder {
	font-style: italic;
	color: #999;
}
.nomatch .dropdown,
.dropdown:empty {
	display: none;
}
:not(.-noexist) .focused .dropdown,
:not(.-noexist) input:focus ~ .dropdown,
:not(.-noexist) .dropdown-hover .dropdown, /* < onmouseleave doesn't always fire */
:not(.-noexist) .dropdown:hover {
	max-height: 30em;
	z-index: 2;
	left: -1px;
	top: 100%;
	width: 100%;
	overflow-y: auto;
}
.option {
	display: block;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.option input,
.option label {
	padding: 4px .5em;
	line-height: 1.15;
}
.option label {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	text-align: start;
}
.option .value {
	opacity: 0.75;
	font-size: 0.8em;
	padding-top: 0.2em;
}
.option .value::before {
	content: "("
}
.option .value::after {
	content: ")"
}
.no-value .option .value {
	display: none;
}
.option input:focus,
.option input:focus + label,
.option:hover {
	--background: var(--hover);
	background: white;
	background: var(--background, white);
}
.option input {
	padding-right: 4px;
}
.input:not(.multiselect) .option input {
	position: absolute !important;
	max-height: 0 !important;
	border: 0 !important;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
}
.multiselect .option label {
	padding-left: 0;
}

.-tth, a.-tth {
	text-decoration: underline;
	-moz-text-decoration-style: dotted;
	text-decoration-style: dotted;
}

/* STACKING ETC. ============================================================ */

#page-header { z-index: 5; }
#modal-host{ z-index: 4; }
#banner-host { z-index: 3; }
#main-container { z-index: 2; }
#page-footer { z-index: 1; }

#main-content section.panel:nth-child(1) { z-index: 9; }
#main-content section.panel:nth-child(2) { z-index: 8; }
#main-content section.panel:nth-child(3) { z-index: 7; }
#main-content section.panel:nth-child(4) { z-index: 6; }
#main-content section.panel:nth-child(5) { z-index: 5; }
#main-content section.panel:nth-child(6) { z-index: 4; }
#main-content section.panel:nth-child(7) { z-index: 3; }
#main-content section.panel:nth-child(8) { z-index: 2; }
#main-content section.panel:nth-child(9) { z-index: 1; }

.no-target #view-menu,
.no-target #fields-section,
.no-target #model-section {
	display: none;
}

/* HEADER =================================================================== */
#page-header {
	display: -webkit-flex;
	display: flex;
	padding: 8px;
	
	--hover: var(--white);
	
	-webkit-align-items: center;
	align-items: center;
}

#logo-host {
	-webkit-flex-grow: 0;
	flex-grow: 0;
}
#company-logo {
	max-width: 160px;
}

#page-title {
	padding: 8px;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-align-self: center;
	align-self: center;
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#page-title .id {
	font-size: 0.8em;
	opacity: 0.8;
}
#page-title .id:before {
	content: " (";
}
#page-title .id:after {
	content: ")";
}

#page-header .button {
	/*border: 1px solid transparent;*/
}
#site-nav,
#tools-menu,
#view-menu {
	display: -webkit-flex;
	display: flex;
}
#tools-menu {
	margin-right: 8px;
}
#site-nav ul,
#site-nav li,
#site-nav .button,
#site-nav .button,
#tools-menu .button,
#view-menu .button {
	box-sizing: border-box;
	height: 100%;
	border-radius: 0;
	min-width: 3.22em;
}
#view-menu .button {
	margin-left: 8px;
}
/* PREFERENCES -------------------------------------------------------------- */
#preferences-section {
	position: absolute;
	z-index: 10;
	right: 0;
	margin: 8px;
	max-width: 20em;
	width: 20em;
	border-radius: 6px;
}
#preferences-section > header {
	background: transparent;
}

/* MESSAGES ----------------------------------------------------------------- */
#banner-host > div {
	--text: var(--white);
	--background: var(--gray);
	
	display: -webkit-flex;
	display: flex;
	padding: 4px;
	background: #333;
	background: var(--background, #333);
	color: white;
	color: var(--text, white);
}
#banner-host > div > * {
	-webkit-flex-grow: 0;
	flex-grow: 0;
}
#banner-host p {
	text-align: center;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
#banner-host > .error {
	--background: var(--error);
	--text: var(--error-text);
	background: red;
	background: var(--background, red);
}
#banner-host > .warning {
	--background: var(--warning);
	--text: var(--warning-text);
	background: red;
	background: var(--background, red);
	color: black;
	color: var(--text, black);
}

/* MAIN ===================================================================== */
#main-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
#main-controls-host {
	position: relative;
	left: -8px;
	box-sizing: border-box;
	width: 20em;
	width: calc(20em + 8px);
	max-width: 50%;
	max-width: calc(50% - 32px);
	margin: 20px 0;
}
#main-content {
	box-sizing: border-box;
	margin: 20px;
	width: calc(100% - 20em);
	min-width: 50%;
}

#main-controls section > header,
#main-content > section > header {
	--active: var(--dark-0);
	--background: var(--dark-0);
	--hover: var(--dark-0);
	--text: var(--white);
	
	background: silver;
	background: var(--background, silver);
	color: var(--text, inherit);
	
	/*--active-background: var(--theme-medium);
	--active-color: var(--theme-hint);
	--highlight-background: var(--theme-medium);
	--highlight-color: var(--theme-panel);
	--background: var(--theme-dark);
	--color: var(--theme-panel);*/
}
#main-container header.iconize .button:hover,
#main-container header.iconize .pressed {
	box-shadow: 0 0 2px white;
}

header {
	background: #ddd;
	background: var(--background, #ddd);
}

section > header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

section.panel,
section > div.panel:only-child {
	padding: 8px;
	border-width: 1px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	background: white;
	background: var(--background, white);
}
section.panel > header {
	margin: -8px -8px 0;
	padding: 3px 8px;
	/*overflow: hidden;*/
}
.panel h2 {
	font-size: 1.1em;
}
.panel p {
	margin-top: 1em;
}
header > *,
header > .button:first-child {
	-webkit-flex-grow: 0;
	flex-grow: 0;
}
header > *:first-child {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
#main-content section.panel {
	position: relative;
	border-radius: 6px;
	margin-bottom: 20px;
}
#main-content section.panel > header:first-child {
	border-radius: 6px 6px 0 0;
}

#-drag-payload {
	z-index: 20;
	position: absolute;
	border-width: 1px;
	border-radius: 1em;
	background: white;
	background: var(--background, white);
	padding: 2px 1em;
}

.dragging * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* "SIDEBAR" ---------------------------------------------------------------- */
#main-controls section.panel {
	border-width: 0;
	box-shadow: none;
}
#main-controls {
	border-width: 1px;
	border-radius: 6px;
	padding-left:8px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
#main-controls section.panel:first-child,
#main-controls section.panel:first-child > header:first-child {
	border-radius: 0 6px 0 0;
}

#search-container {
	margin-top: 8px;
	display: -webkit-flex;
	display: flex;
}
#search-mode-input {
	box-sizing: border-box;
	display: none;
	width: 20%;
	border-right: 0;
}
#search-value-input {
	box-sizing: border-box;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	width: 100%;
}
.show-advanced #search-mode-input {
	display: block;
}
.show-advanced #search-value-input {
	width: 80%;
}
.show-advanced #search-mode-input input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.show-advanced #search-value-input input {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
#search-mode-input input:focus + .dropdown,
#search-mode-input .dropdown:hover {
	width: calc(100% + 1px);
}

.dataset-select {
	padding-left: 2px;
}

/* FIELD LIST --------------------------------------------------------------- */
#data-section .group-header {
	display: -webkit-flex;
	display: flex;
	margin: 0 -8px;
	--background: var(--medium-0);
	--hover: var(--medium-0);
}
#data-section .group-header label {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	padding: 4px 0;
}
#data-section .collapsed header .icon {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
section.collapsed .field-list {
	display: none;
}
.field-list {
	list-style: none;
}
.field-bar {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin: 0 -8px;
	padding: 1px 8px;
}
.field-bar:hover {
	background: var(--hover, #eee);
}
.field-properties header {
	font-weight: 500;
	background: transparent;
	color: currentColor;
	margin-bottom: 1em;
}
.field-properties p {
	font-style: italic;
	margin-bottom: 1em;
}
.field-properties .disabled,
.field-properties .metadata {
	display: none;
}
.unlocked .field-properties .disabled,
.show-metrics .field-properties .metadata {
	display: block;
}

.btn-display {
	display: none;
}
.show-vis-btn .btn-display {
	display: initial;
}
.btn-filter,
.btn-contributor,
.btn-display,
.btn-filter:hover,
.btn-contributor:hover,
.btn-display:hover {
	margin: .125em;
	border-radius: 0.625em;
	position: relative;
}
.btn-filter::before,
.btn-contributor::before,
.btn-display::before {
	content: "";
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: gray;
	background: var(--dark-0, gray);
	opacity: 0.5;
	border-radius: 0.625em;
}
.show-vis-btn .btn-filter::before {
	background: var(--dark-1, gray);
}
.show-vis-btn .btn-contributor::before {
	background: var(--dark-2, gray);
}
.show-vis-btn .btn-display::before {
	background: var(--dark-3, gray);
}
.btn-filter .-mfi,
.btn-contributor .-mfi,
.btn-display .-mfi {
	border-radius: 0.625em;
}
.btn-filter[class~="on"]::before,
.btn-contributor[class~="on"]::before,
.btn-display[class~="on"]::before {
	opacity: 1;
}
.btn-filter:disabled,
.btn-contributor:disabled {
	background: transparent;
}
.btn-filter:disabled::before,
.btn-contributor:disabled::before {
	display: none;
}
.btn-filter:disabled .-mfi,
.btn-contributor:disabled .-mfi {
	opacity: 0;
}
.btn-filter svg {
	-webkit-transform: translate(0,.084em);
	transform: translate(0,.084em);
}
.btn-contributor svg {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.btn-filter svg,
.btn-contributor svg,
.btn-display svg {
	width: 1em;
	height: 1em;
	z-index: 1;
}
.btn-filter path,
.btn-contributor path,
.btn-display path {
	fill: white;
}
.btn-field-args {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
.field-properties > .btn-field-args {
	padding: .25em 0;
}
.btn-field-args .-mfi {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.btn-field-args:hover {
	background: none;
}

/* SETTINGS ================================================================= */
#model-host {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin: 0 -8px;
}
#model-host header > h3 {
	margin-top: 8px;
	padding-bottom: 8px;
}

#model-host > div {
	box-sizing: border-box;
	min-width: 18em;
	width: 50%;
	padding: 0 8px;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

#global-controls:not(:last-child) {
	display: none;
}

#filter-list,
#contributor-list {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
@supports (flex-wrap:wrap) {
	#filter-list,
	#contributor-list {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

#filter-list li,
#contributor-list li {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	list-style: none;
	background: silver;
	background: var(--background, silver);
	border-width: 1px;
	border-radius: 1em;
	margin: 4px;
	/*overflow: hidden;*/
	padding: 0 .5em;
}
#filter-list li:hover,
#contributor-list li:hover {
	background: var(--hover, #eee);
}
#filter-list li.default .reset-btn path,
#contributor-list li.default .reset-btn path {
	stroke: none;
}
#filter-list li.selected,
#contributor-list li.selected {
	background: var(--active, #eee);*/
}
#contributor-list .required-btn path {
	fill: silver;
}
#contributor-list li.required .required-btn path {
	fill: red;
}
#filter-list .button path,
#contributor-list .button path {
	/*stroke: var(--theme-midtone);*/
}

#filter-list li > *,
#contributor-list li > * {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

#filter-list li > :first-child,
#contributor-list li > :first-child {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
}

/* PROPERTIES --------------------------------------------------------------- */
.property-host,
.property-group {
	display: -webkit-flex;
	display: flex;
	padding-top: .5em;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.property-host {
	margin-left: -8px;
}
.property-group {
	position: relative;
	border-width: 1px;
	padding: 1.35em 0 8px;
	-webkit-transform: translate(0,-.65em);
	transform: translate(0,-.65em);
}
.property-group-head {
	position: relative;
	display: -webkit-flex;
	display: flex;
	margin: 0.7em 5px 0;
	padding: 0 4px;
	background: white;
	background: var(--background);
	font-weight: 500;
	width: intrinsic;
	width: -moz-max-content;
	width: max-content;
	-webkit-align-items: center;
	align-items: center;
	z-index: 1;
}
.property-group-head input[type="checkbox"] {
	margin-left: -4px;
}
.property-host > .property,
.property-group > .property {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	min-width: 16em;
}
.property-host > .property {
	margin-left: 8px;
}
.property-group > .property {
	margin: .5em 1em;
}
.property {
	display: -webkit-flex;
	display: flex;
	margin: .5em 0;
	-webkit-align-items: center;
	align-items: center;
}
.show-advanced .property[class~="advanced"] {
	display: -webkit-flex;
	display: flex;
}
.property input,
.property select {
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
}
.property > label {
	min-width: 80px;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
.property > .input,
.property > input,
.property > select {
	min-width: 10em;
	width: 50%;
	box-sizing: border-box;
}
#main-controls .property > .input,
#main-controls .property > input,
#main-controls .property > select {
	width: 70%;
}
.property-group-head input[type="checkbox"],
.property input[type="checkbox"] {
	min-width: 0;
	width: 1.5em;
}

.desc-host {
	border-width: 1px;
	padding: 8px;
	max-height: 100%;
	transition: max-height .5s;
}
.desc-host:empty,
.property .description {
	position: absolute;
	max-height: 0;
	border: 0;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
}

.field-properties > header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.field-properties > header .button {
	background: transparent;
	color: currentColor;
	box-shadow: none !important;
}
.field-properties > header svg {
	width: 1em;
	height: 1em;
}

.field-properties div { position: relative; }
.field-properties div:nth-child(1) { z-index: 5; }
.field-properties div:nth-child(2) { z-index: 4; }
.field-properties div:nth-child(3) { z-index: 3; }
.field-properties div:nth-child(4) { z-index: 2; }
.field-properties div:nth-child(5) { z-index: 1; }

/* METADATA ----------------------------------------------------------------- */
.metadata {
	margin-top: 0.7em;
	border-width: 1px;
	font-size: .9em;
	padding: 1em;
}
.metadata dt,
.metadata dd {
	display: inline-block;
	width: 50%;
}
.metadata dd {
	font-variant-numeric: slashed-zero tabular-nums;
	text-align: right;
}

/* START ==================================================================== */
#intro-head {
	font-size: 2em;
}

/* TABLE ==================================================================== */
#table-host {
	overflow-x: auto;
	padding-left: 0.4em;
}
#table-host table {
	width: 100%;
}
#table-host tr:nth-child(odd) {
	background: #eee;
}
#table-host td,
#table-host .field-label {
	font-size: .9em;
	padding: .3em .15em;
}
#table-host th {
	cursor: default;
	font-weight: 600;
	height: 100%;
	vertical-align: bottom;
}
td.default {
	opacity: 0.5;
}
td.field-numeric,
td.field-integer,
td.field-percent,
td.field-distance {
	font-variant-numeric: slashed-zero tabular-nums;
	text-align: right;
}
#table-host .-th {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
#table-host .field-label {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	cursor: grab;
}
#table-host .field-label span {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	text-align: start;
}
#table-host .insert-btn {
	margin-left: -0.4em;
	margin-right: -0.4em;
	margin-left: calc(-2px - 0.4em);
	margin-right: calc(-2px - 0.4em);
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
#table-host:not(.transposed) .cross-btn,
#table-host:not(.transposed) .insert-btn {
	display: none;
}
/*#table-host .move-btn {
	display: none;
}
#table-host .move-btn .icon {
	width: .5em;
	height: .9em;
}*/
#table-host thead path {
	fill: none;
	stroke: currentColor;
	stroke: var(--dark-0, currentColor);
	stroke-width: 3px;
}
#table-host th:last-child {
	max-width: 0;
}
#table-host:not(.transposed) td.field-minify {
	text-align: right;
}
#table-host:not(.transposed) .field-minify + :not(.field-minify) {
	padding-left: 1.5em;
}
#table-host:not(.transposed) .field-minify + th:not(.field-minify) {
	white-space: nowrap;
}
#table-host:not(.transposed) th.field-minify + th:last-child {
	min-width: 8.5em;
}
#table-host:not(.transposed) th.field-minify .-th {
	width: 3em;
	max-width: 3em;
	height: 10.7em;
	margin-left: auto;
	margin-right: 0;
}
#table-host:not(.transposed) th.field-minify .field-label {
	position: relative;
	left: 100%;
	max-width: 0;
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: translate(0, 0.3em) rotate(315deg);
	transform: translate(0, 0.3em) rotate(315deg);
}
#table-host:not(.transposed) th.field-minify .field-label span {
	position: absolute;
	bottom: 0;
	width: 14em;
	text-align: start;
	border-bottom-width: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*#table-field-select {
	position: absolute;
	z-index: 5;
	background: white;
	background: var(--background);
}*/
#table-host.transposed th:last-child {
	max-width: none;
}
#table-host.transposed tr {
	display:block
}
#table-host.transposed td {
	position: relative;
	display: -webkit-flex;
	display: flex;
}
#table-host.transposed td::before {
	position: relative;
	display: inline-block;
	width: 38%;
	min-width: 38%;
	max-width: 38%;
	margin-right: 1.5em;
	text-align: left;
}
#table-host.transposed thead {
	position: fixed;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	-webkit-flex-direction: column;
	flex-direction: column;
	border-width: 1px;
	border-right-width: 0;
	border-radius: 1em 0 0 1em;
	margin-top: 1em;
	padding: 8px;
	padding-left: 1em;
	background: white;
	background: var(--background, white);
	right: -17em;
	z-index: 1;
	overflow: hidden;
	width: 17em;
	min-width: 17em;
	max-width: 17em;
	transition: right 0.1s;
}
#table-host.transposed thead::before {
	text-align: center;
	font-style: italic;
	font-weight: normal;
}
#table-host.transposed thead.show {
	right: 0;
}
#table-host.transposed th {
	width: 16em;
}

#table-field-select,
#table-host.insert-column .-th {
	display: none;
}
#table-host.insert-column #table-field-select {
	display: block;
}

/* CHART ==================================================================== */
#chart-host {
	margin: 0 auto;
}
#chart-host svg {
	max-width: 100%;
}
#chart-host path:not([stroke]),
#chart-host rect:not([stroke]) {
	stroke: currentColor;
}

/* HELP ===================================================================== */
.contextual-help {
	position: absolute;
	overflow: hidden;
	max-width: 0;
	transition: max-width .1s, padding-right .1s;
	right: 0;
	padding-bottom: 1em;
	z-index: 1;
}
.contextual-help[class~="show"] {
	max-width: 19em;
	padding-right: 1em;
}
.contextual-help > div {
	border-width: 1px;
	border-radius: 6px;
	width: 16em;
	max-width: 16em;
}
.contextual-help h3 {
	margin: 0;
	padding: 0;
}
.help-btn {
	-webkit-order: 100;
	order: 100;
	width: 1.1em;
}
h3+.help-btn {
	margin-right: 1em;
	border-radius: 1em;
	width: 0.95em;
	height: 0.95em;
	padding: 2px;
	opacity: 0.8;
}
h3+.help-btn:hover {
	opacity: 1;
}

/* FOOTER =================================================================== */
#page-footer {
	min-height: 20px;
	margin-top: auto;
	/*background: var(--background);*/
	border-top-width: 1px;
}
#page-footer small {
	display: block;
	width: intrinsic;
	width: -moz-max-content;
	width: max-content;
	margin: 6px auto 0;
	opacity: 0.5;
}

.content {
	max-width: 60em;
	padding: 1em;
	margin: 0 auto;
}
#page-footer .content {
	display: -webkit-flex;
	display: flex;
}
#page-footer .content > div {
	width: 50%;
	min-width: 18em;
}
#page-footer p {
	margin-top: 4px;
}
#page-footer a {
	color: var(--text, inherit);
}

/* LOADING UI =============================================================== */
.no-js #page-header,
.no-js #page-footer,
.no-js > :not(.main-host),
.loading #page-header,
.loading #page-footer,
.loading > :not(.main-host) {
	display: none;
}

#load-host {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	transition: opacity .15s;
	min-width: 100px;
	opacity: 0;
}
.no-js #load-host,
.loading #load-host {
	opacity: 1;
}
.loading {
	cursor: progress;
}

/* DEBUGGING ETC. =========================================================== */
.error {
	background: #f0f;
	stroke: #f0f;
	fill: #f0f !important;
	color: white;
	font-style: italic;
}