body {
	font-family: sans-serif;
	background-color: var(--background-color-neutral);
}
article {
	color: var(--color-base);
	font-size: 14.5px !important;
	line-height: 1.6;
	padding: 0.5em 0.75em 1em 0.75em;
	word-break: normal;
	overflow: hidden;
	border: 1px solid #a7d7f9;
	border: 1px solid var(--border-color-base);
}
.headerLink {
	font-size: 14px;
	padding-bottom: 5px;
	float: right;
}
.collapseContent {
	table:has(input.collapse:checked) &, table:has(input.expand:not(:checked)) & {
		display: none;
		Height: 0px;
		overflow: hidden;
	}
}
.redirect {
	color: var(--color-subtle);
}
#Redirected {
	color: var(--color-subtle);
}
table {
	border-collapse: collapse;
}
th {
	background-color: var(--background-color-interactive);
	font-weight: bold;
}
th, td {
	border: 1px solid #a2a9b1;
	padding: 8px;
}
tr:nth-child(even) {
}
td:has(img) {
	background-color: #ffffff;
	vertical-align: middle;
	text-align: center; 
	padding: 0;
}
.effects {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}
.effects > div table {
	width: 100%;
	margin-top: 0;
	break-inside: avoid;
	page-break-inside: avoid;
	padding-right: 0.5em;
	margin-bottom: 0.5em;
}
.ranklist {
	max-width: 700px;
}
.ranklist img {
	max-width: 200px;
	vertical-align: middle;
	text-align: center; 
}
.ranklist table {
	width: 100%;
}

#SubmitPanel {
	margin-top: 1em;
}
#Infobox {
	content: "";
	clear: both;
	float: right;
	display: table;
	margin: 0.25em 0 0 1em;
	min-width: 150px; 
	max-width: 300px; 
	table {
		width: 100%;
		box-sizing: border-box;
	}
}
.Infobox > th {
	text-align: center;
}
.Infobox > table {
}
 .svg {
	min-width: 0;
	max-width: 300px;
	line-height: 0;
	padding: 1px;
}
.InfoboxImage {
	min-width: 100px;
	max-width: 300px;
	line-height: 0;
	padding: 0;
	img {
		max-width: 300px;
	}
}
.svg > img{
	min-width: 0;
	max-width: 258px;
	padding: 20px;
}
.Infobox > table > tbody > td:has(.svg) {
	padding: 0;
}
.InfoboxWhite {
	text-align: left;
	background-color: #ffffff;
	color: #333333;
	line-height: 1.0;
	padding-bottom: 0;
}
.Infobox > table > tbody > td {
	border-bottom: none;
	padding-bottom: 2px;
	text-align: right;
	align: right;
}
.InfoboxTitle {
	background-color: var(--background-color-disabled);
	text-align: center;
	&.InfoboxLabel {
		font-weight: bold;
		font-size: 13px;
	}
}
.InfoboxLabel {
	line-height: 1.2;
	text-align: left;
}
.InfoboxData {
	line-height: 1.2;
	font-size: 13px !important;
	word-break: break-all;
}
.InfoboxSubtle {
	background-color:.var(--background-color-base);
}
.InfoboxLabelCenter {
	background-color: var(--background-color-disabled);
	font-size: 13px;
	line-height: 1.2;
}
.ContactList {
	word-break: break-all;
}

h1 {
	font-size: 28px !important;
	padding: 0;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
h4 {
	color: var(--color-emphasized);
	color: var(--color-emphasized);
	line-height: 1.3;
	font-weight: 400;
	border-bottom: 1px solid #a2a9b1;
	overflow: hidden;
	word-break: break-all;
	display: block;
	min-width: calc(100% - 400px);
}
h2, h3, h4 {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	padding: 0;
}
h2 {
	font-size: 24px !important;
}
h1, h2, h3 {
	color: var(--color-emphasized);
	line-height: 1.3;
	font-weight: 400;
	border-bottom: 1px solid #a2a9b1;
	overflow: hidden;
	word-break: break-all;
	display: block;
	min-width: calc(100% - 400px);
}

.threshold {
	text-decoration: underline;
	text-decoration-color: #81f7f3;
}
.light {
	border-bottom: 1px solid #90ee90;
}
span.reverse {
	text-decoration: underline;
	text-decoration-color: #ff3311;
}
span.severity-light {
	text-decoration: underline;
	text-decoration-color: #90ee90;
}
span.severity-common {
	text-decoration: underline;
	text-decoration-color: #ffff00;
}
.common {
	border-bottom: 2px solid #ffff00;
}
span.severity-moderate {
	text-decoration: underline;
	text-decoration-color: #ffff00;
}
span.severity-strong {
	text-decoration: underline;
	text-decoration-color: #ff0000;
}
.strong {
	border-bottom: 2px solid #ff0000;
}
.heavy {
	border-bottom: 2px solid #ff00ff;
}
span.severity-heavy {
	text-decoration: underline;
	text-decoration-color: #ff00ff;
}
.extreme {
	border-bottom: 2px solid #ff00ff;
}
span.severity-extreme {
	text-decoration: underline;
	text-decoration-color: #ff00ff;
}
span.severity-intense {
	text-decoration: underline;
	text-decoration-color: #ff00ff;
}

.good {
	background-color: #ffccff;
}

.bad {
	background-color: #ffbbbb;
}

footer {
	color: var(--color-base);
	border-top: 1px solid #a2a9b1;
	padding: 0.75em;
	margin-left: 0;
}
footer ul {
	list-style: none none;
	margin: 0;
	padding: 0;
}
footer li {
	margin: 0;
	padding: 0.5em 0;
	font-size: 0.75em;
}
p {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}
ul {
	margin: 0.3em 0 0 1.6em;
	margin-block-start: 0em;
	margin-block-end: 0em;
	padding: 0;
}

a {
	text-decoration: none;
	color: var(--color-progressive);
	&:hover {
		text-decoration: underline;
	}
	&:visited, &:active {
		color: var(--color-visited);
	}
}
/* collapse/expand */
input[type=checkbox] {
	&.collapse, &.expand {
		display: none;
	}
}
label {
	&:has(input[type=checkbox]) {
		cursor: pointer;
		color: var(--color-progressive);
		&:hover {
			text-decoration: underline;
		}
		&:active {
			color: var(--color-visited);
		}
	}
	&:has(input.collapse), &:has(input.expand:checked) {
		&::before { content: 'Collapse'; }
	}
	&:has(input.collapse:checked), &:has(input.expand:not(:checked)) {
		&::before { content: 'Expand'; }
	}
	&:has(input .censor .collapse:checked), &:has(input.expand:not(:checked)) {
		&::before { content: 'Show'; }
	}
	&:has(input .censor .collapse), &:has(input.expand:checked) {
		&::before { content: 'Hide'; }
	}
}
tr:has(td) {
	table:has(input.collapse:checked) &, table:has(input.expand:not(:checked)) & {
		display: block;
		height: 0px;
		overflow: hidden;
	}
}
.collapserContent {
	.collapser:has(input.collapse:checked):not(:has(.collapsercontent input.collapse:checked)) &, .collapser:has(input.expand:not(:checked)):not(:has(.collapsercontent input.collapse:checked)) & {
		display: block;
		height: 0px;
		overflow: hidden;
	}
}
/* js-mol related*/
#_Loader-status {
	display: none;
}
.jmolPopupMenu > li {
	display: none;
}
.image-grid {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
}
.image-grid > .image-item {
	width: 250px;
}
.image-grid > .image-item p {
	margin-bottom: 4px;
	text-align: left;
	margin-top: 0;
}
input::placeholder {
	color: var(--color-subtle);
}
button, input, textarea {
	border: 1px solid #54595d !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
}
.dropdown {
	position: relative;
	display: inline-block;
}
details {
	position: relative;
	.options:has(open) {
		display: block;
	}
}
#Search {
	float: right;
	input[type="search"] {
		appearance: none;
	}
}
summary::marker {
	display: none;
	appearance: none;
}
.dropdown-container:hover .dropdown-list,
.dropdown-container:focus-within .dropdown-list {
	display: block;
}
.options div {
	padding: 8px;
	cursor: pointer;
}
.options div:hover {
	background: #eee;
}
.options label:hover {
	background-color: #f0f0f0;
}
.options {
	align-self: flex-end;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--background-color-base);
	border: 1px solid #ccc;
	width: 100%;
	z-index: 100;
	margin-bottom: 0.5em;
	min-height: 100px;
	overflow-y: auto;
	color: white;
}
.options.show {
	display: block;
}
.options label {
	display: block;
	padding: 5px;
	cursor: pointer;
}
.options label:hover {
	background-color: #f0f0f0;
}
.dropdown:hover .options {
	display: block;
}
.svg {
	background-color: #ffffff;
	max-width: 100%;
	height: 100%;
}
.svg > svg {
	padding: 20px;
	max-width: 100%;
}
.collapseButton {
	padding-left: 10px;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	margin-bottom: 0px;
}
a.show-href::before {
	content: attr(href);
}
.userMatrixSingle {
	box-sizing: border-box;
	border-collapse: collapse;
	border-left: 1px solid gray;
	background: white;
	text-align: center;
	vertical-align: middle;
}
em {
	font-style: normal;
	text-decoration: underline dotted var(--color-disabled-emphasized);
	font-weight: 564;
}
#Fortune {
	font-weight: 560;
}
blockquote {
	background-color: var(--background-color-neutral-subtle);
	padding-left: 5px;
	padding-right: 5px;
}
.UserAbout {
	word-break: normal;
}
.anodyneUserMatrixStruct {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5px;
}
.anodyneUserMatrixStruct div {
	padding: 2px; box-sizing: border-box; border-collapse: collapse;
	border: 1px solid var(--border-color-base);
	background: white;
	text-align: center;
	vertical-align: middle;
}
ul[class=FormList] {
	li:last-child {
		color: red; !important
		span[class=FormField]::before {
			background-color: red; !important
		}
	}
}
/* Placeholders for empty editable trd fields */
.trdname:empty::before        { content: 'Name'; }
.trdsalts  > li:empty::before { content: 'Salts'; }
.trdsource > li:empty::before { content: 'Source'; }
.trdnotes  > li:empty::before { content: 'Notes'; }
.trdroutes > li:empty::before { content: 'Routes'; }
.trdodor   > li:empty::before { content: 'Odor'; }
.trdname:empty::before,
.trdsalts  > li:empty::before,
.trdsource > li:empty::before,
.trdnotes  > li:empty::before,
.trdroutes > li:empty::before,
.trdodor   > li:empty::before {
  color: grey;
  font-style: italic;
  opacity: 0.6;
  pointer-events: none; /* let clicks fall through to the editable element */
}
/* Keep empty fields clickable so the caret can be placed in them */
.trdname:empty {
  display: inline-block;
  min-width: 4em;
}

#TitleMain {
  min-width: calc(100% - 400px) !important;
  margin-bottom: 0.20em;
}
.FormField {
  display: inline-block;
  font: inherit;
  color: inherit;
  border: none;
  background: inherit;
  min-width: 2ch;
  vertical-align: baseline;
}
.arrow {
  position: relative;
  width: 100px;
  height: 2px;
  background: black;
  display: inline-block;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid black;
}
[contenteditable="true"]:focus {
  outline: none;
  opacity: 0.7;
}
#Toolbar li {
	margin: 0 0.7rem;
}
#Toolbar {
	padding-bottom: 3px;
	border-bottom: 1px var(--color-disabled) solid;
	vertical-align: center;
	color: grey;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow-y: clip;
}
.Toolbaritem a {
	word-break: keep-all;
	text-align: center;
	/* font-size: 12.5px; */
	font-size: 0.8125em;
	max-width: 200px;
	border-collapse: collapse;
	overflow-x: clip;
	display: inline-flex;
}
.linkcancel a {
	color: var(--color-destructive) !important;
}
.barleft > div {
	max-width: 200px;
}
.barright > div {
	max-width: 200px;
}
.barleft {
	border-right: 1px var(--color-disabled) solid;
	padding-right: 7px;
	display: flex;
}
.Toolbarleft .Toolbarlink a {
	padding-left: 7px;
	border-left: 1px var(--color-disabled) solid;
}
.Toolbarright .Toolbarlink a {
	padding-right: 7px;
	border-right: 1px var(--color-disabled) solid;
}
.Toolbarright {
	display: flex;
	border-left: 1px var(--color-disabled) solid;
	padding-left: 7px;
	margin: 0 0.5rem; /* spacing between links */
	max-width: 100%
}
#editpanel {
	background-color: var(--background-color-interactive-subtle--active);
	border: 1px solid var(--border-color-base);
	padding: 5px;
	margin-top: 1em;
	overflow: hidden;
	font-family: sans-serif;
}
#editsubmit {
	color: var(--color-inverted-fixed,#fff);
	background-color: var(--background-color-progressive,#36c);
	border-color: var(--background-color-progressive,#36c);
	font-weight: bold;
	font-family: inherit;
	padding-right: 1.5em;
	padding-left: 1.5em;
	line-height: 2.25;
}
#editcancel {
	margin-left: 1.5em;
}
#editsummary {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color-base);
}
.times {
	display: flex;
	justify-content: space-between;
	margin-left: -0.75em;
}
.time {
	padding-right: 5px;
	margin-right: 5px;
	text-align: center;
}
.report-title {
	display: inline-block;
	max-width: 64ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
#TitleMain {
  white-space: nowrap;
  overflow-x: auto;
}

/* Extracted from repeated inline styles across *.html / *.md */
/* Collapse toggle next to a heading; tight line-height variant of .collapseButton */
.collapseButtonTight {
	padding-left: 10px;
	font-size: 14.5px !important;
	line-height: 1.2 !important;
	margin-bottom: 0px;
}
/* Flex menu list with no bullets/margins (toolbar link row) */
.ToolbarMenu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.border-left-disabled {
	border-left: 1px var(--color-disabled);
}
/* Full-width zero-height separator div */
.spacer {
	width: 100%;
	height: 0px;
	overflow: hidden;
}
/* Inline-editable list entry that should not wrap/overflow */
.keepclip {
	word-break: keep-all;
	overflow: clip;
}
/* 3Dmol viewer container + its (initially hidden) infobox cell */
.molViewer {
	background: white;
	height: 220px;
	width: 298px;
	position: relative;
}
.molViewerCell {
	display: none;
	max-width: 298px;
	max-height: 220px;
}
/* Transparent span that inherits text color (structure annotations) */
.plainspan {
	background-color: transparent;
	color: inherit;
}
/* Generic utilities */
.float-right {
	float: right;
}
.full-width {
	width: 100%;
}
.text-left {
	text-align: left;
}
.bg-neutral {
	background-color: var(--background-color-neutral);
}
.about {
	display: flex;
	width: 100%;
}
.about > div {
	flex: 1;
	box-sizing: border-box;
}
.copyable {
	cursor: pointer;
	display: inline-block;
	margin: 4px 0;
}