:root {
  --main-text-color: black;							/* main text color */
  --main-text-warning-color: red;
  --main-text-caution-color: goldenrod;
  --main-text-bg-color: white;					/* main text background color */
  --main-text-color-sel: white;					/* main text color for selected elements */
  --main-text-bg-color-sel: darkblue;		/* main text bg color for selected elements */
  --main-fill-color: rgb(220,220,225);	/* fill color for unused areas */
  --main-input-color: darkblue;					/* main text color for inputs */
  --main-input-bg-color: lightgray;			/* main text background color for inputs */
  --main-input-border-color: rgb(128, 128, 128);
  --main-output-color: darkblue;				/* main text color for outputs */
  --main-disabledInput-color: rgb(128, 128, 128);
  --main-disabledInput-bgColor: rgb(240, 240, 240);
  --main-wrapper-haze: rgba(0,0,0,0.2); /* haze over background content */
  --main-button-text-color: black;			/* main button text color */
  --main-button-text-bg-color: lightgrey;	/* main button text background color */
  --main-dialog-border-color: darkblue;	/* main border color for dialogs */
  --main-list-border-color: rgb(180,180,180);	/* main border color for list items */
}

.darkMode {
  --main-text-color: white;
  --main-text-bg-color: rgb(90, 90, 90);
  --main-fill-color: rgb(35,35,40);
  --main-input-color: powderblue;
  --main-input-bg-color: rgb(128, 128, 128);
  --main-input-border-color: rgb(70, 70, 70);
  --main-output-color: powderblue;
  --main-disabledInput-color: rgb(40, 40, 120);
  --main-disabledInput-bgColor: rgb(230, 230, 230);
  --main-wrapper-haze: rgba(255,255,255,0.3); /* haze over background content */
}

* {
	box-sizing: border-box;
}

body {
	font-family: FontAwesome, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  font-size: 16px;		/* overridden in view.js */
	background-color: black;	/* for safe areas on mobile devices */
	user-select: none;
	-webkit-text-size-adjust: none; -ms-text-size-adjust: none;
}

#root {
	font-size: calc(10px + 0.7vmin);	/* overriden in view.js */
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: var(--main-text-color);
	background-color: var(--main-fill-color);
	overflow: hidden;
}

/* safe areas prior to iOS 11.2 */
@supports (padding: constant(safe-area-inset-top)) {
	#root {
		top: constant(safe-area-inset-top);
		right: constant(safe-area-inset-right);
		bottom: constant(safe-area-inset-bottom);
		left: constant(safe-area-inset-left);
	}
}
/* safe areas for iOS 11.2 and after */
@supports (padding: env(safe-area-inset-top)) {
	#root {
		top: env(safe-area-inset-top);
		right: env(safe-area-inset-right);
		bottom: env(safe-area-inset-bottom);
		left: env(safe-area-inset-left);
	}
}

/*
 * Styling for generic elements.
 */
code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
		monospace;
}
/* headings */
h1 {
	font-size: 112%;
	font-weight: bold;
}
h2 {
	font-size: 100%;
	font-weight: bold;
}
h3 {
	font-size: 100%;
	font-weight: bold;
}
/* lists */
ul {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 0;
	padding-left: 1.1em;
}
li {
	margin-left: 0;
	padding-left: 0;
}
/* tables */
table {
	border-collapse: collapse;
}
td {
	vertical-align: middle;
	padding: 2px;
}

thead tr:last-child {
	border-bottom: 1px solid var(--main-input-border-color);
}

th {
	font-weight: bold;
	padding: 2px;
}
/* inputs */

select, input, textarea {
	font-family: FontAwesome, Helvetica, Arial, sans-serif;
	font-size: 100%;
	/* The default input styling seems to come out too small without some help. */
	color: var(--main-input-color);
	font-weight: bold;
  user-select: all;
  border-radius: 4px;
  border: 1px solid var(--main-input-border-color);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
input:disabled, .input-disabled {
	color: var(--main-disabledInput-color);
	background-color: var(--main-disabledInput-bgColor);
	opacity: 1.0;
}

.input, input {
  border: 1px solid var(--main-input-border-color);
	padding: 3px 2px;
	font-family: inherit;
}

input[type="button"], button {
	color: var(--main-button-text-color);
	background-color: var(--main-button-text-bg-color);
	font-size: 100%;
	font-weight: bold;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 4px;
  border: 1px solid var(--main-input-border-color);
  box-sizing: content-box;
	height: 1em;
	min-height: 18px;
	min-width: 24px;
	padding: 3px 4px;
}

.inputButton {
	float: right;
	margin-right: 8px;
	color: black;
  box-sizing: content-box;
	height: 1em;
	min-height: 18px;
	min-width: 24px;
	padding: 3px 4px;
}

input[type="radio"] {
	appearance: radio;
	-webkit-appearance: radio;
	-moz-appearance: radio;
}
input[type="checkbox"] {
	appearance: checkbox;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
}

.warningColor, .warning {
	color: var(--main-text-warning-color);
}

.cautionColor, .caution {
	color: var(--main-text-caution-color);
}

.okColor, .ok {
	color: green;
}