/* ######################################################################## */
/* import font faces */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/etc/roboto.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(/etc/mono.ttf) format('truetype');
}

/* basic print styling */
@media print {
	.NoPrint { display: none !important; }
	.OnPrint { display: initial !important; }
	.PgBreak { page-break-before: always; }
}

/* create font size variables */
:root {
	--font-larger:  18pt;
	--font-large:   16pt;
	--font-normal:  14pt;
	--font-small:   12pt;
	--font-smaller: 10pt;
}

.font-larger  { font-size: var(--font-larger);  }
.font-large   { font-size: var(--font-large);   }
.font-normal  { font-size: var(--font-normal);  }
.font-small   { font-size: var(--font-small);   }
.font-smaller { font-size: var(--font-smaller); }

#body {
	margin: 0;
	font: var(--font-normal) 'Roboto', sans-serif;
	color: var(--fg-body);
	background-color: var(--bg-body);
}

/* ######################################################################## */
a, a:visited {
	color: var(--fg-highlight);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}

img { 
	max-width: 100%; 
	margin: auto; 
}

hr {
	margin: 1.1em 0;
	border-color: var(--bg-dim);
}

button, label {
	cursor: pointer;
	font-weight: bold;
	display: block;
}

button {
	font-family: inherit;
	font-size: inherit;
	padding: 0.45em 1em;
	margin: 0.5em;
	border: 1px solid var(--bg-dim);
	border-radius: 0.25em;
	display: inline-block;
	background-color: transparent;
	white-space: pre;
	color: var(--fg-body);
}

button:hover {
	border-color: unset;
	background-color: rgba(0, 0, 0, 0.5);
}

button:disabled {
	border-color: var(--fg-disabled) !important;
	background-color: transparent !important;
	color: var(--fg-dim);
	cursor: inherit;
}

button.hold {
	--hold-pct: 0%;
	--hold-color: rgba(192, 0, 0, 0.5);
	background: linear-gradient(90deg, var(--hold-color) 0 var(--hold-pct), transparent var(--hold-pct) 100%);
}

/* ######################################################################## */
select option {
	font-family: inherit;
	font-size: inherit;
	background: rgba(0, 0, 0, 0.8);
}

option:checked {
	color: var(--fg-bright);
	background: var(--bg-highlight);
}

/* ######################################################################## */
select {
	padding: 0.45em;
}

input:not([type=color]), textarea {
	padding: 0.5em;
}

input:not([type=color]), textarea, select {
	color: inherit;
	background-color: var(--bg-input);
	font-family: inherit;
	font-size: inherit;
	display: inline-block;
	margin: 0.2em 0;
	border: 2px transparent;
	border-bottom: 1px solid var(--bg-dim);
	border-radius: 0.25em;
}

input:focus:not([type=color]), textarea:focus, select:focus { 
	outline: none !important;
	border-color: var(--fg-highlight);
}

input:disabled:not([type=color]), textarea:disabled, select:disabled { 
	border-bottom: 1px solid #444;
	background-color: transparent;
}

input[type="color"] {
	border: none;
	padding: 0;
	background-color: inherit;
	height: 2.2em;
}

/* ######################################################################## */
/* standard page section and header styling */
section {
	border-top: 1px solid var(--fg-dim);
	margin-bottom: 2em;
}

h3 {
	background-color: var(--bg-bright);
	color: var(--fg-bright);
	padding: 1em;
	margin: 0 0 -1px 0;
	border-bottom: 1px solid var(--bg-dim);
}

small {
	font-size: var(--font-smaller);
	display: block;
	margin-top: 0.5em;
	color: var(--fg-body);
}

/* ######################################################################## */
[hidden] { display: none !important; }
[data-trap-dblclick], [data-trap-click], .Pointer { cursor: pointer; }
[data-trap-dragstart] { cursor: move; }

.VBox    { display: flex; flex-flow: column nowrap; }
.HBox    { display: flex; flex-flow: row nowrap;  align-items: center;  }
.VGrid   { display: flex; flex-flow: column wrap; align-items: flex-start; }
.HGrid   { display: flex; flex-flow: row wrap;    align-items: flex-start; }
.Grow    { flex-grow: 2; }

.Third	 { width: 33%; }
.Half    { width: 50%; }
.Full    { width: 100%; }
.Indent  { padding: 0 1em; }

.Inset   { border: 4px inset var(--bg-bright); }

.Around  { justify-content: space-around; }
.Between { justify-content: space-between; }
.Evenly  { justify-content: space-evenly; }

.Left    { text-align: left; }
.Right   { text-align: right; }
.Center  { text-align: center; justify-content: center; }
.Middle  { margin-left: auto; margin-right: auto; }

.Pre     { white-space: pre; }
.NoWrap  { white-space: nowrap; }

.Relative { position: relative; }
.Absolute { position: absolute; }

.Modal {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.Monospace {
	font: var(--font-normal) 'Roboto Mono', monospace;
}

/* ######################################################################## */


/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+json */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

.xterm {
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm {
    cursor: text;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}


/* ######################################################################## */
/* common to both app_title and app_log */
.app_fixed {
	position: fixed;
	left: 0;
	right: 0;
	padding: 0.25em 0.5em;
	background-color: inherit;
}

.app_bottom {
	bottom: 0;
}

/* ######################################################################## */
/* the menu bar at the top of the page */
#app_title {
	top: 0;
	height: 1.2em;
	background-color: var(--bg-dim);
	z-index: 100;
}

/* ## the central main application area ## */
#app_main {
	/* amount of space available between fixed title and log lines */
	--app-height: calc(100vh - calc(1.7em * 2));
	
	padding: 1.7em 0;		/* avoid top and bottom fixed bars */
	height: var(--app-height);	/* use remaining space */
	overflow: auto;			/* scrollbar under top and bottom fixed bars */
}

/* ## the log bar at the bottom of the screen ## */
#app_log {
	height: 1.2em;
	bottom: 0;
	border-top: 1px solid var(--bg-dim);
	font: var(--font-small) 'Roboto Mono', monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 100;
}

/* show all main content and hide title and log bars when printing */
@media print {
	#app_title { display: none; }
	#app_main  { overflow: visible; }
	#app_log   { display: none; }

	:root { zoom: 0.7; }
}

/* ######################################################################## */
/* optional app_module classes */
.app_module_standard {
	--module-height: calc(var(--app-height) - 2vh);
	padding: 1vh 2vw;
}

.app_module_fullsize {
	--module-height: var(--app-height);
	height: 100%;
}

/* ######################################################################## */
/* the context menu */
#app_menu_body {
	font-size: var(--font-small);
	margin: 0.1em 0;
	padding: 0.5em 0;
	border-radius: 0.5em;
        border: 2px 0px solid var(--bg-bright);
        width: fit-content;
        position: fixed;
	color: var(--fg-bright);
        background-color: var(--bg-menu);
	max-height: 50vh;
	overflow-y: auto;
	cursor: pointer;
}

.app_menu_label {
	padding: 0.5em 1.8em 0.25em 0.8em;
}

.app_menu_item {
	color: var(--fg-dim);
        padding: 0.5em 1.8em 0.5em 0.9em;
}

.app_menu_sep {
	height: 0;
	margin: 0.25em 0;
}

.app_menu_sep::after {
	content: "\00a0";
}

.app_menu_active {
	color: var(--fg-normal);
}

.app_menu_active:hover {
	background-color: var(--bg-body);
}

/* ######################################################################## */
/* used on the full page wait container to move the logo to middle of the page */
.app_loading_full {
	margin: calc(50vh - calc(var(--loading-size)/2)) auto;
}

.app_loading, .app_loading_container {
	position: relative;
        height: var(--loading-size);
        width: var(--loading-size);
        border-radius: 100%;
}

.app_loading {
        border: 2px solid transparent;
        border-color: transparent var(--fg-highlight) transparent var(--fg-highlight);
        animation: rotate-loading 1.7s linear 0s infinite normal;
        transform-origin: 50% 50%;
}

.app_loading_text {
        animation: loading-text-opacity 3s linear 0s infinite normal;
        color: var(--fg-bright);
        font-weight: bold;
        padding-top: calc(var(--loading-size) * 0.45);
        opacity: 0.5;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 0;
        width: var(--loading-size);
	height: var(--loading-size);
	background-image: url(/etc/logo.png);
	background-size: var(--loading-size) var(--loading-size);
	background-repeat: no-repeat;
}

/* ######################################################################## */
@keyframes rotate-loading {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
}

@keyframes loading-text-opacity {
        0%   { opacity: 0.4;  }
	40%  { opacity: 0.95; }
        50%  { opacity: 1;    }
	60%  { opacity: 0.95; }
        100% { opacity: 0.4;  }
}

/* ######################################################################## */

/* ######################################################################## */
/* bc-code custom element internals */
bc-code {
	position: relative;
}

.Code.Edit, .Code.Highlight {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 12lh;
	white-space: nowrap;
	tab-size: 4;
}

.Code.Edit {
	color: transparent;
	background: transparent;
	caret-color: white;
	resize: auto;
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.Code.Highlight {
	position: relative;
	display: inline-block;
	overflow: hidden;
	z-index: 0;
}

.Code.Monospace {
	font: var(--font-small) 'Roboto Mono', monospace;
}

/* ######################################################################## */

/* ######################################################################## */
/* sharable menu styles used by the main menu */
.com_menu_item {
	background-color: var(--bg-bright);
	border-radius: 0.25em;
	padding: 0.75em;
	margin: 0.5em;
}

.com_menu_item:hover {
	color: var(--fg-bright);
	background-color: var(--bg-highlight);
}

.com_menu_sep::after {
	content: ">";
	color: var(--fg-dim);
	font-weight: normal;
}

.com_menu_name {
	white-space: nowrap;
}

.com_menu_name:first-child {
	color: var(--fg-dim);
}

.com_menu_name:last-child {
	color: var(--fg-bright);
}

.com_select {
	background-color: var(--bg-highlight) !important;
}

/* ######################################################################## */

/* modal dialog box */
.dialog_main {
	position: relative;
	top: 10vh;
	background-color: var(--bg-bright);
	margin: auto;
	min-width: 800px;
	max-width: 80vw;
	width: fit-content;
	box-shadow: 0 0 12px 12px rgb(0 0 0 / 50%);
}

.dialog_title {
	border-top: 1px solid var(--fg-highlight);
	font-weight: bold;
	color: var(--fg-bright);
	background-color: var(--bg-highlight);
	padding: 1em;
}

.dialog_content {
	padding: 0.5em;
	background-color: var(--bg-body);
	color: var(--fg-bright);
}

.dialog_body {
	padding: 1em;
	max-height: 65vh;
	overflow: auto;
}

.dialog_buttons {
	justify-content: space-between;
	font-size: var(--font-small);
}

/* ######################################################################## */
bc-section + bc-section {
	margin-top: 2em;
}

/* the editor form itself */
bc-form {
	margin: 1vh 2vw;
}

/* if a form contains a dialog then hide the original empty form anchor */
bc-form.editor_dialog {
	height: 0;
	margin: 0;
}

/* the header controls type above tables and other lists */
.header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--bg-bright);
	font-size: var(--font-normal);
	border-bottom: 1px solid var(--bg-dim);
	border-top: 1px solid var(--bg-dim);
}

.header_controls {
	font-size: var(--font-small);
	padding-right: 1em;
}

.header_search.important {
	border: none;
	background-color: inherit;
	border-bottom: 1px solid var(--bg-body);
	padding-top: 0.4em;
	width: 25vw;
}

.editor_table_masked > tr[hidden] {
	display: table-row !important;
	pointer-events: none;
	user-select: none;
	filter: brightness(0.65);
}

/* ######################################################################## */
.editor_table_image {
	max-width: 100px;
	max-height: 100px;
}

/* ######################################################################## */
/* wrap the bc-table structure in an element that limits the maximum vertical size */
.editor_table_container {
	max-height: 25em;
	overflow-y: auto;
	resize: vertical;
	line-height: 1.7em;
	--editor-border-page: 4px;
}

/* if the attribute "paginate" is "off" then don't paginate the table */
.editor_table_container[paginate="off"] {
	max-height: unset;
	--editor-border-page: 0px;
}

/* however, if the table is resized, then unset the maximum height */
.editor_table_container[style*="height"] {
	max-height: unset;
	min-height: 10em;
	--editor-border-page: 4px;
}

/* ######################################################################## */
.editor_table {
	font-size: inherit;
	border-spacing: 0;
	width: 100%;
	text-align: left;
	margin-bottom: 1em;
}

/* the default max-size shows 10 rows of a table,  draw a border under
   each 10th row, starting with the 10th row as a visual landmark */
.editor_tr {
	--editor-border: 0px;
	margin: 0;
	padding: 0;
	height: 2.5em;
	background-color: var(--bg-body);
}

.editor_tr:hover {
	background-color: var(--bg-bright);
}

.editor_tr:nth-child(10n+10 of :not([hidden])) {
	--editor-border: var(--editor-border-page);
}

.editor_tr_highlight {
	background-color: var(--bg-highlight) !important;
}

/* ######################################################################## */
.editor_td {
	margin: 0;
	padding: 0.25em 0.1em 0.25em 1.1em;
	overflow: auto;
	text-overflow: ellipsis;
	font-family: 'Roboto Mono', monospace;
	border-bottom: var(--editor-border) groove var(--bg-bright);
}

.editor_th {
	background-color: var(--bg-body);
	border-top: 1px solid var(--fg-disabled);
	border-bottom: 1px solid var(--fg-disabled);
	padding: 0.5em 0;
	user-select: none;
	resize: horizontal;
	overflow: auto;
	text-overflow: ellipsis;
	z-index: 2;
	position: sticky;
	top: 0;
}

.editor_th_first {
	width: 2em;
	padding-left: 0.1em;
	resize: none;
	text-align: center;
}

.editor_td_first {
	width: 2em;
	padding-left: 0.2em;
	resize: none;
	text-align: center;
}

/* display sorted coumns with highlight based on data sort attribute */
.editor_th[data-sort-order="asc"] {
	background: linear-gradient(var(--bg-bright), var(--bg-body));
	border-top: 1px solid var(--fg-dim);
}

.editor_th[data-sort-order="desc"] {
	background: linear-gradient(var(--bg-body), var(--bg-bright));
	border-bottom: 1px solid var(--fg-dim);
}

/* provide subtle table borders around header elements */
.editor_b {
	border-left: 1px solid var(--fg-disabled);
	padding-left: 1em;
}

.editor_b_first {
	border-left: none;
	padding-left: 0;
}

/* ######################################################################## */
/* ######################################################################## */
/* editor input element description and help text inside bc-input */
.editor_label {
	color: var(--fg-label);
}

.editor_p, .editor_span, .editor_em {
	display: block;
	margin: 0.2em 0 0 0;
	font-size: var(--font-smaller);
	color: var(--fg-body);
	max-width: 800px;
}

.editor_p {
	margin-bottom: 0.25em;
}

.editor_span {
	font-style: italic;
	color: var(--fg-help);
}

.editor_em {
	font-weight: normal;
	color: var(--fg-red);
}

/* image and preview display controls inside bc-upload */
.editor_main {
	max-width: 300px;
}

.editor_preview {
	margin: 0.25em 0;
	background: var(--bg-bright);
	overflow: hidden;
	height: 80px;
	border-radius: 0.4em;
	max-width: 320px;
}

/* ######################################################################## */
/* the controls at the bottom of a bc-form */
.editor_controls {
	padding: 1em;
	font-size: var(--font-small);
}

.editor_save {
	background: var(--bg-highlight);
}

.editor_cancel {
	background: var(--bg-dim);
}

/* ######################################################################## */
/* ######################################################################## */
/* editor input element types */
bc-input {
	padding: 1em 1em 0 1em;
	color: var(--fg-bright);
	font-size: var(--font-small);
	--width: 32ch;
}

.bc_input_table {
	padding: 0;
}

/* ensure certain input elements are reasonably sized */
.editor_input_text, .editor_input_search, .editor_input_url, .editor_input_email, .editor_input_password {
	min-width: 8ch;
	max-width: 640px;
	width: var(--width);
	resize: horizontal;
}

/* style internal bc_input elements based upon element state */
.bc_input_internal:required:focus:valid {
	background-color: var(--bg-valid) !important;
	border-color: var(--fg-valid) !important;
}

.bc_input_internal:focus:invalid {
	background-color: var(--bg-invalid) !important;
	border-color: var(--fg-invalid) !important;
}

/* highlight help message when sibling element is invalid */
.bc_input_internal:invalid ~ .editor_span, .bc_input_internal:state(invalid) ~ .editor_span {
	color: var(--fg-yellow);
}

/* ######################################################################## */

/* ######################################################################## */
.info_form {
	margin: 0;
	padding: 0.5em 0.75em;
	border: 1px solid var(--bg-dim);
	border-top: none;
	border-radius: 0.25em;
}

/* ######################################################################## */
.data_copy {
	cursor: pointer;
	font-size: var(--font-small);
}

.data_copy:active {
	font-size: var(--font-normal);
	color: var(--fg-valid);
	transition: color 0.25s ease-in;
}

/* ######################################################################## */
.info_panel {
	background-color: var(--bg-dim);
	padding: 1em 0;
}

.info_card {
	padding: 0.5em 1em;
	width: 30%;
	min-width: 30%;
	border-right: 1px solid var(--fg-bright);
	white-space: nowrap;
}

.info_card:nth-child(3n) {
	border-right: none;
}

.info_label {
	color: var(--fg-dim);
	margin-bottom: 0.2rem;
}

.info_data {
	color: var(--fg-bright);
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info_status {
	display: none;
}

/* ######################################################################## */

#media_dialog {
	max-width: 70vh;
}

#media_search {
	width: 100%;
}

#media_grid {
	max-height: 35vh;
	overflow: auto;
	color: #aaa;
}

#media_grid > div {
	margin: 0.3em;
	padding: 0.2em;
}

#media_grid > div:hover {
	box-shadow: rgba(0, 0, 0, 0.7) 0px 0.2em 0.3em 0px, rgba(0, 0, 0, 0.6) 0px 0.1em 0.2em 0px;
	color: #fff;
}

bc-plot {
	width: 540px;
	margin: 1em 0;
}

/* ######################################################################## */
.HBox.Tab {
	border: 1px solid var(--fg-gray);
	background-color: var(--bg-menu);
}

.Tab.Link {
	border-left: 1px solid var(--fg-gray);
	border-right: 1px solid var(--fg-gray);
	text-align: center;
	cursor: pointer;
	height: 1.7em;
	padding: 0.5em 4em 0 4em;
}

.Tab.Link:hover {
	color: var(--fg-highlight);
}

.Tab.Link.Open {
	font-weight: bold;
	color: var(--fg-highlight);
	background-color: var(--bg-dim);
	border-bottom: 3px inset var(--fg-highlight);
}

/* ######################################################################## */