body {
	/* Temporarily disable side swipes causing a page back navigation
	 while I figure out how to control pointer events better */
	overscroll-behavior-x: none;
}

div.main {
	width: calc(100vw - 2em);
	height: calc(100vh - 7em);
	background-color: #fafafa;
	position: relative;
}

a.plomUiButton, 
a.plomUiButton:active,
a.plomUiButton:link,
a.plomUiButton:visited {
	text-decoration: none;
}

a.plomUiAddButton, 
a.plomUiAddButton:active,
a.plomUiAddButton:link,
a.plomUiAddButton:visited,
a.plomUiRemoveButton, 
a.plomUiRemoveButton:active,
a.plomUiRemoveButton:link,
a.plomUiRemoveButton:visited {
	text-decoration: none;
	display: inline-flex;
	align-content: center;
	border-radius: 50%;
	justify-content: center;
	background-color: black;
	color: white;
	width: 1.1em;
	height: 1.1em;
}

a.plomUiAddButton, 
a.plomUiAddButton:active,
a.plomUiAddButton:link,
a.plomUiAddButton:visited {
	background: url('data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xml=%22http://www.w3.org/XML/1998/namespace%22%20width=%2220px%22%20height=%2220px%22%20viewBox=%220%200%208%208%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M%204%202%20L%204%206%20M%202%204%20L%206%204%22%20stroke=%22white%22%20stroke-width=%222%22/%3E%3C/svg%3E'), #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em;
}

a.plomUiRemoveButton, 
a.plomUiRemoveButton:active,
a.plomUiRemoveButton:link,
a.plomUiRemoveButton:visited {
	background: url('data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xml=%22http://www.w3.org/XML/1998/namespace%22%20width=%2220px%22%20height=%2220px%22%20viewBox=%220%200%208%208%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M%202%202%20L%206%206%20M%202%206%20L%206%202%22%20stroke=%22white%22%20stroke-width=%222%22/%3E%3C/svg%3E'), #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em;
	vertical-align: middle;
}

a.breadcrumb-item, 
a.breadcrumb-item:active,
a.breadcrumb-item:link,
a.breadcrumb-item:visited {
	text-decoration: none;
}

.codemain, 
.methodpanel, 
.globalspanel, 
.classpanel {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.methodsidesplit, 
.globalsidesplit, 
.classsidesplit,
.codesidesplit {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	position: relative;
} 

.globaldetails, 
.classdetails, 
.methoddetails {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.globaldetails .scrollable-interior, 
.classdetails .scrollable-interior, 
.methoddetails .scrollable-interior,
.code .scrollable-interior {
	width: 100%;
}

.code {
	background-color: #fafafa;
	padding-right: 1em;
	flex-grow: 1;
	overflow: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	touch-action: none;  /* this could be pinch-zoom, but on Safari, after zooming, single touches no longer go to the code area until you do a single click to give it focus again, which can be confusing */
	user-select: none;
	-webkit-user-select: none;
}

.codesvg {
	padding: 0;

	/* Helps prevent jank from the scrollbar appearing and disappearing, which
	can trigger a need to layout the svg again. But if the code section never
	scrolls, then this isn't necessary */
	overflow-y: scroll;
	overflow-x: auto;  
}

.codesvg svg {
	padding-bottom: 100vh;  /* So that the code area won't scroll when the keyboard pops in and out */ 
}

.codesvg.subcodesvg svg {
	/* In a coding area that's not full-screen, we add the extra padding to the whole page, not just for the coding area  */
	padding-bottom: 0;
}

.sidechoices {
	background-color: #eee;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 20%;
	min-width: 8em;	
}

.sidechoices:focus {
	outline: 0px none;
	border: 0px none;
}

.codesidesplit svg.cursoroverlay,
.methodsidesplit svg.cursoroverlay,
.globalsidesplit svg.cursoroverlay,
.classsidesplit svg.cursoroverlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	touch-action: none;
}

.codesidesplit svg.cursoroverlay .cursorhandle,
.methodsidesplit svg.cursoroverlay .cursorhandle,
.globalsidesplit svg.cursoroverlay .cursorhandle,
.classsidesplit svg.cursoroverlay .cursorhandle {
	pointer-events: auto;
	touch-action: none;
	fill: transparent;
	stroke: black;
	stroke-width: 2px;
}

.codesidesplit svg.cursoroverlay .cursorcaret,
.methodsidesplit svg.cursoroverlay .cursorcaret,
.globalsidesplit svg.cursoroverlay .cursorcaret,
.classsidesplit svg.cursoroverlay .cursorcaret {
	pointer-events: auto;
	touch-action: none;
	fill: transparent;
	stroke: red;
	stroke-width: 3px;
}

.codesidesplit svg.cursoroverlay .maincursorcaret,
.methodsidesplit svg.cursoroverlay .maincursorcaret,
.globalsidesplit svg.cursoroverlay .maincursorcaret,
.classsidesplit svg.cursoroverlay .maincursorcaret {
	pointer-events: auto;
	touch-action: none;
	fill: transparent;
	stroke: black;
	stroke-width: 3px;
}

.lineIndicator {
	position: absolute; 
	right: 0; 
	bottom: 0;
	pointer-events: none;
	background: #fafafa;
	box-shadow: 0 0 5px 2px #fafafa;
/*	background: radial-gradient(circle at bottom right, #fafafa 0, #fafafa00 100%);*/ 
	padding-left: 2px;
}

.choices {
	background-color: #eee;
	border-top: 1px solid black;
	flex-grow: 0;
	flex-shrink: 0;
	height: 50%;
	touch-action: manipulation;
	overflow-y: auto;
}

.choices:focus {
	outline: 0px none;
	border: 0px none transparent;
	border-top: 1px solid black;
}

.simpleentry {
	background-color: #fff;
	flex-grow: 0;
	flex-shrink: 0;
	padding: 3px;
}

.simpleentry:focus {
	outline: 0px none;
	border: 0px none transparent;
}

.simpleentry form {
	padding: 3px;
	border-radius: 2px;
	border: 1px solid black;
}

.simpleentry input {
	background: transparent;
	border: 0px;
}

.simpleentry input:active,
.simpleentry input:focus {
	outline: 0px none;
}

.simpleentry form:focus-within {
    outline: auto;
}

.simpleentry_done {
	padding-left: 0.5em;
	padding-right: 0.5em;
}


.simpleentry_erase:link,
.simpleentry_erase:visited,
.simpleentry_erase {
	padding-right: 0.5em;
	color: #ccc;
}

.codemain .code .tokenline {
	padding-left: 2em;
	text-indent: -2em;
}

.codemain div.token, 
.methodpanel .typeEntry div.token, 
.globalspanel .typeEntry div.token,
.classpanel .typeEntry div.token {
	background-color: #ccc;
	display: inline-block;
	padding: 0.2em;
	border-radius: 0.2em;
	border: 1px solid #aaa;
	text-indent: 0;
}

.codemain span.token, 
.methodpanel .typeEntry span.token, 
.globalspanel .typeEntry span.token,
.classpanel .typeEntry span.token {
	background-color: #ccc;
	display: inline;
	padding: 0.2em;
	border-radius: 0.2em;
	border: 1px solid #aaa;
	text-indent: 0;
}

.codemain div.blocktoken, 
.methodpanel .typeEntry div.blocktoken,
.globalspanel .typeEntry div.blocktoken, 
.classpanel .typeEntry div.blocktoken {
	background-color: #ddd;
	display: block;
	padding: 0.2em;
	border-radius: 0.2em;
	border: 1px solid #aaa;
}

.codemain div.blocktoken.tokenselected,
.codemain span.token.tokenselected,
.codemain div.token.tokenselected {
	background-color: #587de6;
}

.codemain .tokenError, 
.methodpanel .typeEntry tokenError, 
.globalspanel .typeEntry tokenError,
.classpanel .typeEntry tokenError {
	text-decoration: underline;
	text-decoration: underline red;
}

.codemain .choices,
.methodpanel .choices,
.globalspanel .choices,
.classpanel .choices {
	line-height: 2.5em;
}

.codemain .choices div.tokenchoice,
.methodpanel .choices div.tokenchoice,
.globalspanel .choices div.tokenchoice,
.classpanel .choices div.tokenchoice {
	background-color: #fff;
	display: inline-block;
	padding: 0.2em;
	border-radius: 0.2em;
	border: 1px solid #ccc;
	margin-left: 0.5em;
	margin-right: 0.5em;
	line-height: 1.2em;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

.codemain .choices div.tokenchoicedisabled,
.methodpanel .choices div.tokenchoicedisabled,
.globalspanel .choices div.tokenchoicedisabled,
.classpanel .choices div.tokenchoicedisabled {
	color: #999;
	/*background-color: #ddd;*/
	display: inline-block;
	padding: 0.2em;
	border-radius: 0.2em;
	border: 1px solid #ccc;
	margin-left: 0.5em;
	margin-right: 0.5em;
	line-height: 1.2em;
}

.sidechoices a div {
	padding: 0.5em;
}

.sidechoices a:link, 
.sidechoices a:visited, 
.sidechoices a:hover,
.sidechoices a:active {
	text-decoration: underline;
	color: black;
}

.testbuttons {
		background: white;
		border: 1px solid black;
		padding: 0.5em;
		display: none; 
		position: absolute; 
		right: 0; 
		top: 0;
		z-index: 1;
		flex-direction: column;
}

.console {
}

a.runbutton {
	
}

.plomNavigationHeader {
	border-bottom: 1px solid black;
	display: flex; 
	align-items: flex-start;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.plomNavigationHeader .subject {
	display: flex;
	padding-left: 0.5em;
	padding-right: 0.5em;
	min-height: 1.5em;
	min-width: 0;
	align-self: center;
}

.plomNavigationHeader .subject .breadcrumb {
	flex-grow: 1;
	align-self: center;
	overflow: clip;
}

.plomNavigationHeader .subject .breadcrumb .breadcrumb-item {
	padding-right: 1em;
}

.plomNavigationHeader .subject .edit {
	min-width: 1.5em;
	background-color: #ddd;
	text-align: center;
}

.globalspanel .functionList>div {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}

.globalspanel .functionList>div.moduleImported {
	padding-left: 1.25em;
	font-style: italic;
}

.globalspanel .globalVarsList>div {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}

.globalspanel .globalVarsList>div.moduleImported {
	padding-left: 1.25em;
	font-style: italic;
}

.globalspanel .classesList>div {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}

.globalspanel .classesList>div.moduleImported {
	padding-left: 1.25em;
	font-style: italic;
}

.classpanel .methodsList>div, 
.classpanel .staticMethodsList>div,
.classpanel .constructorMethodsList>div {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}

.methodpanel h3, 
.globalspanel h3, 
.classpanel h3 {
	margin-top: 1em;
	margin-bottom: 0.25em;
	font-size: 1.25em;
	font-weight: bold;
	font-family: system-ui;
}

.methodpanel .typeEntry, 
.globalspanel .typeEntry, 
.classpanel .typeEntry {
	display: inline-block;
	min-width: 3em;
	position: relative;
}

.methodpanel .typeEntry:not(:empty), 
.globalspanel .typeEntry:not(:empty), 
.classpanel .typeEntry:not(:empty) {
}

.methodpanel .typeEntry:empty, 
.globalspanel .typeEntry:empty, 
.classpanel .typeEntry:empty {
	border: 1px solid black;
	min-height: 1em;
}	

div.typeEntry svg {
	vertical-align: middle;
}

.methodpanel .typeEntry .tokenline, 
.globalspanel .typeEntry .tokenline,
.classpanel .typeEntry .tokenline {
	display: inline;
}

.methodpanel .typeEntry span.typeTokenSelected, 
.globalspanel .typeEntry span.typeTokenSelected,
.classpanel .typeEntry span.typeTokenSelected {
	background-color: #7f7;
}

.plomToast {
	position: fixed;
    bottom: 20vh;
    text-align: center;
    left: 25%;
    right: 25%;
    background-color: #fafad2;
    padding: 0.3em;
    border: 1px solid #ddddba;
    border-radius: 0.3em;
}

plom-autoresizing-input {
	--input-font: 1rem system-ui, sans-serif;
	--input-background: transparent;
}

.flexloosewrappinggroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.flextightgroup {
	display: flex;	
	flex-wrap: nowrap;
}

svg rect.codetoken {
	fill: #eee;
	stroke: #aaa;
}

svg path.codetoken {
	fill: #eee;
	stroke: #aaa;
}

svg text.codetoken {
	font-size: 15px;
	white-space: pre;
}

svg rect.tokenselected,
svg path.tokenselected {
	fill: #587de6;
}

svg rect.tokenactive,
svg path.tokenactive {
	fill: #d0d6e8;
}

svg rect.typeTokenSelected,
svg path.typeTokenSelected {
	fill: #7f7;
}

svg rect.fillinblank {
	fill: #e0e0e0;
	stroke: #aaa;
}

svg text.tokenError {
	text-decoration: underline;
	text-decoration: underline red;
	fill: red;
}

svg path.tokenslot {
	stroke-width: 1px;
	stroke: black;
	fill: none;
}

svg path.wideexpressionslot {
	/*stroke-width: 1px;
	stroke: black;*/
	stroke: none;
	fill: none;
}

svg rect.plomMultilineAccent {
	fill: url(#plomMultilineAccent);
}

svg.widthCalculator {
	width: 0px;
    height: 0px;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

svg.widthCalculator text {
	white-space: pre;
}