/*scunthorpe.css*/
/* background-color: var(--codeBackground); */


/*#region VARIABLES */

button:first-child {
	__margin-left: 0px;
	
}


:root {

	--codeFontSize: 14px;
	--codeLineHeight: 21px; /*must match value in scunthorpe.js */
	--codeFontPadding: calc((var(--codeLineHeight) - var(--codeFontSize))/2 + 1px) 0; /* 17th Dec 2024. Added +1 px because single full width range with MonospaceKrypton font had gaps */
	--codeFontPadding2: calc((var(--codeLineHeight) - var(--codeFontSize))/2 - 0.15em) 0;
	
	
	--linePaddingLeft: 10px; /*these 3 must match value in scunthorpe.js */
	--mlinePaddingLeft: -10px;
	--linePaddingRight: 24px;
	/* --linePaddingRight: 48px; */
	--lineWordWrapPaddingRight: 10px;
	
	--rulerDisplay: none;
	--rulerWidth: 80ch; 
	
	--codeFont: Consolas;
	/* --searchFont: var(--codeFont); */
	--searchFont: var(--uiFont);
	--codeLetterSpacing: 0;
	--codeFontWeight: 400;
	--codeLigatures: none;
	--indentGuideDisplay: inline-block;
	
	--caretWidth: 1.8px;
	--carrotTransition: none;
	/* --carrotTransition:  all 0.04s linear; */
	
	
	--icodeOverflowY: auto;
	--icodeOverflowX: auto;
	--scrollbarSize: 15px;
	--scrollThumbSize: 40px;
	--limpetSize: 10px; /* must match value in scunthorpe.js */
	--bookmarkLimpetSize: 10px;
	--highlightLimpetSize: 10px;
	
	--minimapDisplay: none;
	--minimapSide: right;
	
	--basketHeight:25px;
	--secondHeadHeight:36px;
	
	
	--tabSize: 4;
	
	 /*--suggestionsWidth: 180px;must match value in scunthorpe.js. not using */
	--numSuggestions: 10;  /*must match default in index.html */
	--resizerWidth2: 4px;
	
	
	--outlineIndent: 8px;
	--outlineIconsDisplay: inline;
	--basketIconsDisplay: inline;
	
	--beforeBreakVisibility: visible;
	--flushBreakVisibility: visible;
	
	--ghostOpacity: 0.3;
	
	--base03:    #002b36;
	--base02:    #073642;
	--base01:    #586e75;
	--base00:    #657b83;
	--base0: #4b3f10;
	--base1:     #93a1a1;
	--base2:     #eee8d5;
	--base3:     #fdf6e3;
	--yellow:    #b58900;
	--orange:    #cb4b16;
	--red:       #dc322f;
	--magenta:   #d33682;
	--violet:    #6c71c4;
	--blue:      #268bd2;
	--cyan:      #2aa198;
	--green:     #859900;
	
	--upyours: rgb(236, 9, 100);
	--getbent: #691d5c;
	
	--indentBox: #ddd;

	--selectionPC: 100%; /* This is reduced when doing highlight on copy */
	
	
	--basketClockDisplay: none;
	
	--filterButtonDisplay: none;
	--listButtonDisplay: none;
	--regexButtonDisplay: none;
	
	--svgHandleWidth: 10;
	--svgHandleScale: 1;
}

/*
https://www.codingfont.com/
https://realpython.com/coding-font/#get-your-new-coding-font

https://www.sitepoint.com/top-10-programming-fonts/

https://kinsta.com/blog/best-programming-fonts/
https://www.elegantthemes.com/blog/wordpress/best-programming-fonts
https://www.codeinwp.com/blog/best-programming-fonts/#gref
https://crocoblock.com/blog/best-programming-fonts/
https://www.creativebloq.com/features/the-best-monospace-fonts-for-coding
https://commitmono.com/

*/


@font-face {
	font-family: "ConsolasLigaturized";
	src: url("fonts/code/arse.ttf");
	/* src: url("fonts/code/ComicMono.ttf"); */
}


@font-face {
	font-family: "FiraMono";
	src: url("fonts/code/FiraMono-Regular.ttf");
}
@font-face {
	font-family: "FiraCode";
	src: url("fonts/code/FiraCode-Regular.ttf");
}
@font-face {
	font-family: "SourceCodePro";
	src: url("fonts/code/SourceCodePro-Regular.ttf");
}
@font-face {
	font-family: "SourceCodeProExtraLight";
	src: url("fonts/code/SourceCodePro-ExtraLight.ttf");
}
@font-face {
	font-family: "CommitMono";
	src: url("fonts/code/CommitMono-300-Regular.otf");
}
@font-face {
	font-family: "OpenDyslexicMono";
	src: url("fonts/code/OpenDyslexicMono-Regular.otf");
}
@font-face {
	font-family: "ComicMono";
	src: url("fonts/code/ComicMono.ttf");
}



@font-face {
	font-family: "CascadiaCode";
	src: url("fonts/code/CascadiaCode.woff2");
}
@font-face {
	font-family: "CascadiaCode";
	font-style: italic;
	src: url("fonts/code/CascadiaCodeItalic.woff2");
}


@font-face {
	font-family: "CascadiaMono";
	src: url("fonts/code/CascadiaMono.woff2");
}
@font-face {
	font-family: "CascadiaMono";
	font-style: italic;
	src: url("fonts/code/CascadiaMonoItalic.woff2");
}



@font-face {
	font-family: "JetBrainsMono";
	
	src: url("fonts/code/JetBrainsMonoRegular.woff2");
}
@font-face {
	font-family: "JetBrainsMono";
	font-style: italic;
	src: url("fonts/code/JetBrainsMonoItalic.woff2");
}
@font-face {
	font-family: "JetBrainsMono";
	font-weight: bold;
	src: url("fonts/code/JetBrainsMonoBold.woff2");
}



/* @font-face { Font is corrupt
	font-family: "JuliaMono";
	src: url("fonts/code/JuliaMono-Regular.ttf");
} */

@font-face {
	font-family: "MonaspaceArgon";
	src: url("fonts/code/MonaspaceArgon.woff2");
	__src: url("fonts/code/MonaspaceArgon-Regular.woff");
}
@font-face {
	font-family: "MonaspaceKrypton";
	src: url("fonts/code/MonaspaceKrypton.woff2");
}
@font-face {
	font-family: "MonaspaceNeon";
	src: url("fonts/code/MonaspaceNeon.woff2");
}
@font-face {
	font-family: "MonaspaceRadon";
	src: url("fonts/code/MonaspaceRadon.woff2");
}
@font-face {
	font-family: "MonaspaceXenon";
	src: url("fonts/code/MonaspaceXenon.woff2");
}


/* @font-face {
	font-family: "JetBrainsMono";
	src: url("fonts/code/JetBrainsMono.ttf");
} */


@font-face {
	font-family: "Menlo";
	
	src: url("fonts/code/Menlo-Regular.ttf");
}


#msg {
	display:none;
  }
  
@media (prefers-color-scheme: dark) {
	#msg {
		display:block;
	}
  }
  
  
  
  
  
  
  
#scunthorpe {
	__filter: invert(100%);
	__filter: invert(100%) hue-rotate(180deg);
}





/*#endregion*/




/*#region MAIN */
*, *::before, *::after {
	box-sizing: border-box;	
}
b {font-weight: var(--bold);}

.hide {
	display:none !important;
}


#scunthorpe, .scunthorpe
{
	float:left; /* don't think we need this and it messes up position of second wiundow */
	/* UPDATE: looks like we do need it when working with second window to the right*/
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
	background-color: var(--codeBackground);
	contain:strict;
	font-variant-ligatures: var(--codeLigatures);
}
#floatingCode_Editor
{
	__background-color: var(--peekBackground);
	background-color: var(--codeBackground);
}

/* #scunthorpe, .scunthorpe, #printTable, #printDiv */
#icode, #stem, #printTable, #printDiv, #minimapBoxLines, #minimapBoxStem
{
	color: var(--codeColor);
	
	font-family: var(--codeFont), monospace;
	
	__font-family:Arial, Helvetica, sans-serif;
	
	__font-family: serif;
	
	/* text-rendering: optimizeLegibility; */
	
	font-size: var(--codeFontSize);
	line-height:var(--codeLineHeight);
	__line-height: calc(var(--codeLineHeight) * 1.05);
	
	
	letter-spacing: var(--codeLetterSpacing);
	font-weight: var(--codeFontWeight);
	
	
	/* TODO: monaspace ligatures don't always look that good, especially the closing html tag. So would have to have an option for these and then how to decide which ones you want? Especially problematic is >= */
	/* UPDATE: we now have anable ligatures as a setting but it looks like we'll need to set a class to apply the stuff below
	
	
	--texture-healing: 1;
	--ligatures: 1;
	
   font-feature-settings: "calt" var(--texture-healing,1),"dlig" var(--ligatures,1),"ss01" var(--ligatures,1),"ss02" var(--ligatures,1),"ss03" var(--ligatures,1),"ss04" var(--ligatures,1),"ss05" var(--ligatures,1),"ss06" var(--ligatures,1),"ss07" var(--ligatures,1),"ss08" var(--ligatures,1);
	*/
	
	
	
}

#icode
{
	__line-height:19.9px;
	__line-height: calc(var(--codeLineHeight) + 0.01px);
	
	__contain: strict; 
	
	/* content-visibility: auto;
	contain-intrinsic-size: 1000px;
	
	transform: translate3d(0,0,0); */
}


#stem, #printStem
{
	__display:none !important;
	position:relative;
	float:left;
	width:40px; /* changed in AdjustDimensions() function */
	height:10000%; /* needs to be more than 100% because of word wrap big offsets */
	background: var(--stemBackground);
	border:0;
	__border-right: 1px dotted var(--mainBorder);
	
	__border-top: var(--borderWidth) solid var(--mainBorder);
	__outline: 1px dotted var(--mainBorder);
	__outline: 1px dashed #ddd;
	
	__box-shadow: 0px 0px 4px var(--mainBorder);
	
	cursor: default;
	
	
	text-align: right;
	overflow:hidden;
	
	user-select: none;
	
	__contain:strict;
	
	
}

#icode, #printIcode
{
	position:relative;
	width: calc(100% - 40px); /* changed in AdjustDimensions() function */
	
	__float:left;	
	display:block;
	
	height:100%;
	
	margin-top:0px;
	
	
	overflow-y: var(--icodeOverflowY);
	overflow-x: var(--icodeOverflowX);
	
	/* overflow-y: overlay; doesn't work. Trying to make the scrollbar track transparent and show the text beneath it
	overflow-x: overlay; */
	
	
	__scrollbar-gutter: stable;
	
	scroll-behavior: auto;
	__overflow-anchor: none; /* makes things worse */
	
	__contain:strict;
	
	/* see https://issues.chromium.org/issues/40307436
	and https://stackoverflow.com/questions/2637058/position-fixed-doesnt-work-when-using-webkit-transform
	translate stops position: fixed from working */
	__transform: translateZ(0);
	
	
	outline:0px !important;
	
	__box-shadow: 0px 2px 4px var(--mainBorder);
}
/*
#icode.autoX
{
	overflow-x:auto;
}
#icode.autoY
{
	overflow-y:auto;
}
#icode.auto
{
	overflow-x:auto;
	overflow-y:auto;
}
*/


#icode.wordwrap
{
	__overflow-x: hidden;
}

#printIcode
{
	overflow:hidden;
}





#divWrap
{
	position:relative;
	top:0;
	min-height: 100%;
	width:100%;
	__background-color: var(--panelBackground);
	
	__overflow:hidden; /* NO! */
}


#innerWrap
{
	__display:none !important;
	position:sticky;
	__position:absolute;
	top:0;
	
	
	/* position:fixed;
	left:-200px;
	__bottom:0;
	z-index:-8888; */
}
#innerWrap.absPos
{
	position:absolute;
	min-width: max-content;
	width:100%;
}



#notAnotherWrap
{
	position:relative;
	top: 0px;
}

/* #contents, #syntaxHighlighted, #searchLines, #hiLines, #wrapLines, .extraRange */
.lines, .extraRange, .multiSearchSection
{
	width:100%; /*  required else word wrap messes up */
	width: max-content; /* 19th Nov 2024. Is the above even relevant now we have bespoke word wrap? */
	/* height:max-content; */
	min-width:100%;
	
	position:absolute;
	top:0;
	left:0;
	white-space: pre;
	tab-size:var(--tabSize);
	border:0;
	__outline:1px solid orange;
	outline:0;
	cursor: text !important;
	__cursor: url('test.png'), text !important;
	__cursor: pointer !important;
	__contain: strict;
	
	
	__content-visibility: auto;
	__contain-intrinsic-size: 1000px;
	
	__transform: translate3d(0,0,0);
	
	
}

#contents.hideCursor
{
	cursor: none !important;
}

#contents:not(:focus)
{
	/* outline: 2px solid orange !important;
	outline-offset: -2px !important; */
	
	__background-color:#ddd;
	__opacity:0.5 !important;
}

#lastEmptyLine {
	pointer-events: none;
}

.wordwrap > .lines,
.wordwrap > #moreRangesWrap > .extraRange { /* not used for bespoke word wrap */

	white-space:pre-wrap;
	
	
	__white-space:break-spaces;
	__text-wrap:wrap;
	__white-space-collapse: preserve;
	__white-space: normal !important;
	
	
	__overflow-wrap: break-word;
	width:100% !important; 
	__background:cornsilk;
}

#charTest
{
	position:absolute;
	visibility:hidden;
	white-space:pre;
	width:max-content; 
}

#__backy
{
  background-image: url('images/hello-icon-128.png');
  width:100%;
  height:1000px;
  background-color:red;
  opacity:0.05
}

#contents
{
	width:max-content; /* https://www.tutorialspoint.com/how-to-set-div-width-to-fit-content-using-css */
	min-width:100%;
	__padding-right:var(--linePaddingRight);
	color: transparent;
	__color:rgba(155,55,0,0.6);
	__color:red;
	__color: green;
	
	background: transparent;
	__background-color:#fed;
	
	
	__caret-color: var(--caretColor) !important;
	__caret-color: red !important;
	caret-color: transparent;
	
	__box-shadow: 0px -8px 0px 0px #000000 inset;
	

}

/* #innerWrap,
#contents,
#notAnotherWrap {
	
	min-height:100%;
}
#notAnotherWrap {height:1000px !important;} */

#contents.systemCaret,
#contents.codeDown
{
	caret-color: var(--caretColor);
}
#contents.emptyDown
{
	caret-color: transparent;
}
#contents.dragging
{
	/* 13th Nov 2024. Decided not to have codeColor for drag and drop.
	 It was being used to show the text next to the drag cursor, but it meant that code color would
	 then apply to contents which made it look different especially with italic comments.
	 Also when dragging large blocks of text, it would be vertically aligned to the middle 
	 so it would end up being dropped in a different place to what it looked */
	 
	___color: var(--codeColor);
}
/* #contents.dragging > .line
{
	color: transparent;
} */

/* .line:empty::before, .hline:empty::before
{
	content: 'E';
} */



.line::selection,
.textFlushWrap::selection
{
	background-color: var(--selection);

	background-color: color-mix(in srgb, var(--selection) var(--selectionPC), #aaa);
	
	
	__text-shadow: 0 0 1.2em blue,
	__line-height:3em;
	__outline:var(--borderWidth) solid var(--mainBorder);
	__background-color: transparent;
	__text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
	__text-shadow: 0 0 0.5em blue, 0 0 0.2em blue;
	__text-shadow: 0 0 0.5em blue;
	__text-shadow: 0px 0px 10px blue;
	__text-decoration: underline;
	__text-decoration-color: var(--mainBorder);
}
#contents.blurred > .line::selection,
#contents.blurred > .line > .textFlushWrap::selection
{
	color:inherit;
	background-color: var(--blurredSelection);
}

#contents > .line > .textChunk::selection
{
	background-color: var(--selection);
}
#contents > .line > .visibleTextTab::selection /* .visibleTextTab only used when var wrap_tabs = true which is never at the moment    */
{
	background-color: var(--selection);
}

/* .visibleTextTab,  .visibleHtmlTab {
	__background:cyan;
	display:inline-block;
	width:4ch;
	text-align: center;
} */

/* .visibleTextTab.size1, .visibleHtmlTab.size1 {width: 1ch;}
.visibleTextTab.size2, .visibleHtmlTab.size2 {width: 2ch;}
.visibleTextTab.size3, .visibleHtmlTab.size3 {width: 3ch;}
.visibleTextTab.size4, .visibleHtmlTab.size4 {width: 4ch;}
.visibleTextTab.size6, .visibleHtmlTab.size6 {width: 6ch;}
.visibleTextTab.size8, .visibleHtmlTab.size8 {width: 8ch;} */


#contents > .line > .visibleTextTab::before{

	position:absolute;
	content: '\21A6';
	content: '\2192';
	content: '\21E5';
	font-size:1em;
	__outline:1px solid blue;
	padding-left:0.5ch;
	color:orange;
	color:var(--codeBackground);
	overflow:hidden;
	__display:inline-block;
	
	
	/* width: 2ch; */
	
}
/* .line > .visibleTextTab.size2::before {content: 'TA';}
.line > .visibleTextTab.size1::before {content: 'T';} */

/* .hline::first-line {
	background-color: magenta;
	padding-left:50px;
	margin-left:50px;
	text-indent:50px;
} */


/* #contents > .line.embedded
{
	background-color: rgba(255,215, 195, 0.2);
} */

.__line.lastLine {
	position:relative;
	__overflow:hidden;
}
/* 6th Aug 2025. Want the last line to extend downwards a bit so that can highlight from the end of the file nicely */
.__line.lastLine::after /* 7th Aug 2025 still caused juddering in small.c file BUT it's okay if extraPixelHeight matches the 200px */
{
	content: '';
	display:block;
	background-color: yellow !important;
	__padding-bottom:200px; 
	height:2000px;
	__position:absolute;
	__top:100%;
	__left:0;
	width:100%;
	cursor:default;
	background-color: var(--panelBackground);
	__height:50px;
	outline:1px solid red;
}

#__contents::after /* also causes juddering */
{
	__pointer-events: none;
	position:absolute;
	top:100%;
	width:100%;
	content: "HELLO";
	display: block;
	height:200px;
	background-color:#fed4;
}



/* .hline::selection,
.hline span::selection
{
	background-color: yellow;
} */
.itabs, .indentTab
{
	__display:none;
	pointer-events: none;
	user-select:none !important;
}
.indentTab::selection
{
	background-color: transparent !important; /* because user-select: none; isn't working for some reason */
}

.textFlushWrap,
.htmlFlushWrap
{
	display:block;
}




#ruler
{
	display:var(--rulerDisplay);
	position:absolute;
	pointer-events:none;
	top:0;
	left:calc(var(--rulerWidth) + var(--linePaddingLeft));
	
	__height:3000px;
	height:100vh;
	width:0px;
	
	__border-left:var(--borderWidth) solid var(--mainBorder);
	border-left:var(--borderWidth) solid var(--indentLine);
	
	__width: 5ch;
	__border-right:var(--borderWidth) solid cyan;

}
#___ruler::before
{
	content: 'ARSE';
	display: var(--rulerDisplay);
	position:absolute;
	pointer-events:none;
	left:-10ch;
	width:5ch;
	height:100vh;
	border-left:var(--borderWidth) solid red;
	border-right:var(--borderWidth) solid green;
}


#___outerCustomDiv
{
	display: block;
	position:absolute;
	pointer-events:none;
	top:0px;
	left:0px;
	
	width: 500px;
	height:500px;
	
	width: 100%;
	height:100%;
	
	border:4px solid red;
	border-radius:20px;
	
	background-image: url('images/acid.svg');
	
	
}






/*#endregion*/


/*#region LINES */


.line, .hline {

	/* -webkit-text-stroke: 1px #04D939; */
	
	__margin-bottom:-0.2px; /* could use negative margin to get rid of selection artefacts, but it will cause other problems */
	
	__direction: rtl;
	
	padding-left:var(--linePaddingLeft);
	padding-right:var(--linePaddingRight);	
	
	/*ADDED: 18th Feb 2024. 100% width still has horizontal scrollbar */
	width: calc(100% - var(--linePaddingLeft) - 5px); /* TODO: not sure why, but hlines don't have full 100% width but lines do */
	
	/* height: var(--codeLineHeight); */
	
	/* overflow-y:hidden; */
	
	___overflow-y: visible;
	
	___white-space:pre-wrap;
	
	/* padding-top:1px;
	padding-bottom:1px; */
	
	--yellow: yellow;
	
	__cursor: text; /* 24th March 2025. Removed as it prevented hide_cursor_on_type. There shouldn't be any need for this anyway as we set cursor:text on .lines */
	/* cursor: url('test.svg') 12 12, text !important; */
	/* https://yoksel.github.io/url-encoder/ */
	/*
	cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='-12 -12 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 -12 L 0 12' fill='none' stroke='yellow'/%3E%3Cpath d='M-12 -12 L 12 -12 L12 12 L-12 12 Z' fill='none' stroke='green'/%3E%3C/svg%3E") 12 12, text !important;
	*/
	
	__height:21px !important;
}


.___hline::before {

	content: attr(data-num);
	__content: 'YO';
	color:white;
	background:red;
	position:absolute;
	left:-0px;
	top:0;
	z-index:500;
	
}

.line.wordwrap,
.hline.wordwrap
{
	padding-right:var(--lineWordWrapPaddingRight);
	padding-right:0;
	width: calc(100% - var(--linePaddingLeft) - 5px);
}

.__beforebreak[data-char]::before
{
	__display:none;
	content: attr(data-char);
	font-family: var(--codeFont), monospace;
	font-size: var(--codeFontSize);
	line-height:var(--codeLineHeight);
	letter-spacing: var(--codeLetterSpacing);
	font-weight: var(--codeFontWeight);
	vertical-align:baseline;
}


.line.wordwrap.wrapped
{
	__background: rgba(255,255,0,0.07);
	
   __outline: 1px solid blue;
}
.line.wordwrap.wrapped::first-line
{
	__background: var(--codeBackground);
}

.__wordWrapBreak::after
{
	content: '\21AA';
	margin-right: -1ch;
	outline:1px solid orange;
}

span.beforebreak
{
	visibility: var(--beforeBreakVisibility);
	__position:relative;
	pointer-events: none;
	color:var(--indentLine);
	__font-family: var(--uiFont); /*NO!!!! This messes up heights */
	__font-size:0.8em;
	__vertical-align: top;
}

span.beforebreak::before
{
	__content: ' \21B4\000A';
	content: '\21B4\000A'; /* without space looks better and doesn't force horizontal scrollbar */
	__content: '\2926\000A';
	font-style: normal;
	
	__content: '\000A';
	
	/* position:absolute;
	left:0px;
	bottom:0; */
}
/* span.beforebreak::after
{
	content: '\21B3\000A';
} 	*/

span.flushbreak
{
	visibility: var(--flushBreakVisibility);
	position:relative;
	background-color: var(--stemBackground);
	font-style: normal;
	__font-size: var(--codeLineHeight);
	
	
	/* TODO: trying to make the size of background match the flushbreak::before bit but it's not quite right, but maybe good enough*/
	
	padding-top:calc(-1px + (var(--codeLineHeight) - var(--codeFontSize)) / 2);
	padding-bottom:calc(-1px + (var(--codeLineHeight) - var(--codeFontSize)) / 2);
	
	__display:inline-block;
	__height:21px;
}
span.flushbreak::before
{
	content: '\00A0';
	__content: 'A';
	width: var(--linePaddingLeft);
	background-color: var(--stemBackground);
	__background-color: red;
	position:absolute;
	display:block;
	height: calc(var(--codeLineHeight) + 0.49px);
	__height: var(--codeLineHeight);
	__font-size: var(--codeLineHeight);
	left: var(--mlinePaddingLeft);
	bottom:0;
}
___span.flushbreak::after
{
	pointer-events: none;
	color:var(--indentLine);
	content: '\21B3';
	__content: '_';
	position:absolute;
	left:-0.6em;
	bottom:0;
}


span.____beforebreak::after
{
	content: 'AAAAAAAA    '
}
.motherHubbard
{
	padding-right:3em;
}

span[data-afterbreak]::before,
span.afterbreak
{
	__content: '\21AA';
	__margin-right: -1ch;
	__display:inline-block;
	__width:0;
	__position:relative;
	__left:-1ch;
	__width:2em;
	__margin-left:-3ch;
	
	color:#ccc;
	
	__background:#cfe;
	__outline:1px solid orange;
}




.hline.testy {

	__background: #f9f9f9;
	__background-color: #ffffff;
	__background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	
	background-color: #ffffff;  
	background-image: url("hello.png");
}


.line.nomatch
{
	background-color: var(--diffColor);  
}



.line.bordered{
	box-shadow: 0 0.49px 0 #eee, 0 -0.49px 0 #eee;
}

.line {box-shadow: none;}

.line.active, .____hline.active, .lineNumber.active {

	/* border-top:3px solid pink;
	border-bottom:3px solid pink; */


	/* https://stackoverflow.com/questions/12671898/outline-on-only-one-border */
	__box-shadow: 0 1px 0 var(--activeLineBorder), 0 -1px 0 var(--activeLineBorder);
	box-shadow: 0 1px 0 var(--activeLineBorder) inset, 0 -1px 0 var(--activeLineBorder) inset;
	/* box-shadow: 0 1px 0 red, 0 -1px 0 red; */
	background-color: var(--activeLineBackground);
	/* background-color: #f004; */
}

.__hline.active {


	/* https://stackoverflow.com/questions/12671898/outline-on-only-one-border */
	box-shadow: 0 1px 0 var(--activeLineBorder), 0 -1px 0 var(--activeLineBorder);
	background-color: var(--activeLineBackground);
}

.line.inspectActive,
.line.peekActive
{
	__background:pink;
	__opacity:1;
	__transition: opacity 3.5s;
	
	animation-name: fadeBackground;
	animation-duration: 1.5s;
	__animation-delay: 5s;
	animation-fill-mode: none;
	
}

.flashActive
{
	__background:cyan;
	
	animation-name: fadeBackground;
	animation-duration: 1.5s;
	__animation-delay: 5s;
	animation-fill-mode: forwards;
}

.flashActive.forFileNode
{
	animation-duration: 5s;
}

@keyframes fadeBackground {
	from { background-color: var(--lineFlashColor); } 
	to { background-color: transparent; }
}

.line.___peekActive
{
	background:yellow;
}


.line.warning {
	background:pink;
	__background: oklch(from blue 25% c h);
}
.__line.folded, .hline.folded
{
	__background: var(--stemBackground);
	
	
	__box-shadow: 0 1px 5px var(--activeLineBorder), 0 -1px 5px var(--activeLineBorder);
	
	__box-shadow: inset 0 0 calc(var(--codeLineHeight) * 0.35) var(--activeLineBorder);
	__box-shadow: inset 0 0 calc(var(--codeLineHeight) * 0.2) var(--lineNumberColor);
	box-shadow: inset 0 0 calc(var(--codeLineHeight) * 0.25) var(--indentLine);
	
	__border-bottom: 1px solid #ccc;
	
	__width:fit-content;
	__padding-right:0;
	__float:left;
}
.line.foldEnd, .hline.foldEnd {

	__background:#304923 !important;
	__float:left;
}


.hline.folded::after
{

	font-size:0.8em;
	font-family: var(--uiFont);
	
	line-height:0.8em;
	margin-left:1ch;
	
	content: ' \22EF\00A0 ';
	
	
	outline: 0.07em solid var(--lineNumberColor);
	__outline-offset: -0.3em;
	
	color: var(--lineNumberColor);
	
	background: var(--codeBackground);
	
}
.hline.folded.includeNumLines::after
{
	content: ' \22EF\00A0 ' attr(data-numfolded) ' lines ';
}

.hline.folded.hiddenFoldEnd::after
{

	font-size:1em;
	font-family: var(--codeFont), monospace;
	line-height: var(--codeLineHeight);
	margin-left:0;
	
	content: ' \22EF\00A0 ';
	
	outline:0;
	
	
	color: var(--curlyBracket);
	color: var(--lineNumberColor);

	
	background:transparent;
	outline: 0.07em solid var(--lineNumberColor);
	padding-right:0.5em;
	margin-left:0.5em;
}

.hline.folded.hiddenFoldEnd[data-lasttext]::after
{

	content: ' \22EF\00A0' attr(data-lasttext);
	
}
.hline.folded.hiddenFoldEnd.includeNumLines::after
{
	content: ' \22EF\00A0' attr(data-numfolded) ' lines \22EF\00A0' attr(data-lasttext);
}
.hline.folded.hiddenFoldEnd[data-lasttext].includeNumLines::after
{
	content: ' \22EF\00A0' attr(data-numfolded) ' lines \22EF\00A0' attr(data-lasttext);
}



.hline.folded::after::after  {

	content: 'YO';
}

/*
.hline.folded.squareBrackets::after {

	content: '\22EF]';
	color: var(--curlyBracket);
}
.hline.folded.backTick::after {

	content: '\22EF`';
	 color:rgb(152, 114, 114); 
}
.hline.folded[data-tagword]::after {


	content: '\22EF\22EF</' attr(data-tagword) '>';
	
	color: var(--tagName);
}
.hline.region.folded::after {

	content: '...';
	__content: '\2026';
	color: #888;
}

.hline.folded[data-env]::after {


	content: ' \22EF\22EF\\end{' attr(data-env) '}';
	
	color: #aaa;
}
.hline.folded[data-section]::after {


	content: ' \22EF\22EF\22EF[collapsed]';
	
	color: #aaa;
}
.hline.folded[data-section="preamble"]::after {

	content: ' \22EF\22EF\22EF[preamble]';
	
	color: #aaa;
}
*/

.line.active.folded.searchFold
{
	background: var(--activeSearchHighlight);
	outline:1.5px dotted blue;
}



/* UPDATE: doing visibleTabs like this is broken because
wrapping tab character in a span tag can change the width,
then you get difference between content and syntax highlighted.
UPDATE2: we're doing it because we're wrapping the plain text with visibleTabs too
*/
.visibleTab {

	__outline: 1px dotted #bbb;
	__border-left: 2px solid #ddd;
	__border-right: 2px solid #000;
	__margin-right:-2px;
	__background-color:#eee;
}
.__visibleTab::before {

	content: '\21A6';
	color:#eee;
	position:relative;
	__left:-2px;
}

.visibleSpace {

	__color: var(--indentLine);
	color: var(--codeBackground); /* this is a neat way to have them visible on select */
	__color:red;
	__color: transparent;
	__caret-color: black;
	/* color:orange;
	letter-spacing: 0.4em; */
	
	/* position:relative;
	z-index:-101; */
}
.visibleSpace.indentation {
	__color:orange;
	__letter-spacing:1ch;
	__z-index:-101;
	/* TODO: if changing letter spacing on the indentation, we'd have to
	have indentation on each contents line which would be annoying having to put a span tag
	in there and it might be buggy */
}
.visibleSpace::selection /*this method will only work when big_change = true */
{
	__color:var(--codeBackground);
}
/* .hline > .visibleSpace:last-child */
.visibleSpace.endtwo /* markdown only */
{
	color:red;
}



.hline {position: relative;}
.itabs, .rtabs {
	pointer-events:none;
	text-indent:0; /* needed because of word wrapped lines which use a negative text indent. Obviously it must inherit or something */
	position:absolute;
	left:calc(var(--linePaddingLeft) - 0px); /* must match padding-left of hline with small offset applied*/
	top:0;
	width:100%;
	__box-shadow: 0 1px 0 var(--activeLineBorder);
	
}
.itabs.rainbowBlocks
{
	__z-index:-100; /* this makes indent lines hidden by selection. And there's no need as long as have low opacity */
}
:is(.itabs,.rtabs):is(.rainbowBlocks,.rainbowBoxes)
{
	left:calc(var(--linePaddingLeft) - 2px);
}


/*

background-color: color-mix(in srgb, var(--codeColor) 5%, transparent);


--rainbowSliceColor1: rgba(255, 155, 0, var(--rainbowOpacity));
--rainbowSliceColor2: rgba(0, 155, 0, var(--rainbowOpacity));
--rainbowSliceColor3: rgba(255, 0, 0, var(--rainbowOpacity));
--rainbowSliceColor4: rgba(0, 0, 255, var(--rainbowOpacity));


--rainbowLineColor1: rgba(255, 155, 0, 0.8);
--rainbowLineColor2: rgba(0, 155, 0, 0.8);
--rainbowLineColor3: rgba(255, 0, 0, 0.8);
--rainbowLineColor4: rgba(0, 0, 255, 0.8);


*/



:root
{
	--indentLineWidth: 0.75px;
	--ILW: var(--indentLineWidth);
	--mILW: calc(0px - var(--indentLineWidth));
	
	--rainbowSliceOpacity: 5%;
	--rainbowLineOpacity: 80%;
	
	--rainbowColor1: rgb(255, 155, 0);
	--rainbowColor2: rgb(0, 155, 0);
	--rainbowColor3: rgb(0, 0, 255);
	--rainbowColor4: rgb(255, 0, 0);
	--rainbowColor5: rgb(0, 155, 255);
	--rainbowColor6: rgb(255, 0, 255);
	--rainbowColor7: rgb(155, 155, 0);
	--rainbowColor8: rgb(155, 155, 155);
	
	
	--rainbowLineColor1: color-mix(in srgb, var(--rainbowColor1) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor2: color-mix(in srgb, var(--rainbowColor2) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor3: color-mix(in srgb, var(--rainbowColor3) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor4: color-mix(in srgb, var(--rainbowColor4) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor5: color-mix(in srgb, var(--rainbowColor5) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor6: color-mix(in srgb, var(--rainbowColor6) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor7: color-mix(in srgb, var(--rainbowColor7) var(--rainbowLineOpacity), transparent);
	--rainbowLineColor8: color-mix(in srgb, var(--rainbowColor8) var(--rainbowLineOpacity), transparent);
	
	
	--rainbowSliceColor1: color-mix(in srgb, var(--rainbowColor1) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor2: color-mix(in srgb, var(--rainbowColor2) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor3: color-mix(in srgb, var(--rainbowColor3) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor4: color-mix(in srgb, var(--rainbowColor4) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor5: color-mix(in srgb, var(--rainbowColor5) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor6: color-mix(in srgb, var(--rainbowColor6) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor7: color-mix(in srgb, var(--rainbowColor7) var(--rainbowSliceOpacity), transparent);
	--rainbowSliceColor8: color-mix(in srgb, var(--rainbowColor8) var(--rainbowSliceOpacity), transparent);
	
}







.indentTab {

	display:var(--indentGuideDisplay);
	__border-left:1px solid var(--indentLine); /* using a border messes with width so use box shadow instead */
	__border-right:1px solid var(--indentLine);
	__margin-right:-1px;
	
	__width:4ch;
	box-shadow: var(--ILW) 0 0 0px var(--indentLine) inset;
	height:100%;
	__overflow: visible;
}
.indentTab.spaces {
	white-space:pre;
}
.indentTab.tabs
{
	__background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	
	__background: #fcfcfc;
	
	__background-color: color-mix(in srgb, var(--codeBackground) 50%, transparent);
}

.__indentTab::after {

	display:block;
	position:absolute;
	left:100%;
	background:red;
	width:10px;
	content:'B';
	z-index:99;
}




.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+1) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor1) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+2) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor2) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+3) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor3) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+4) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor4) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+5) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor5) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+6) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor6) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+7) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor7) inset;}
.indentTab:is(.rainbowLines, .rainbowBoxes, .rainbowLinesSlices):nth-of-type(8n+8) {box-shadow: var(--ILW) 0 0 0px var(--rainbowLineColor8) inset;}

:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+1).indentTab {background-color: var(--rainbowSliceColor1);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+2).indentTab {background-color: var(--rainbowSliceColor2);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+3).indentTab {background-color: var(--rainbowSliceColor3);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+4).indentTab {background-color: var(--rainbowSliceColor4);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+5).indentTab {background-color: var(--rainbowSliceColor5);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+6).indentTab {background-color: var(--rainbowSliceColor6);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+7).indentTab {background-color: var(--rainbowSliceColor7);}
:is(.rainbowSlices, .rainbowBlocks, .rainbowLinesSlices):nth-of-type(8n+8).indentTab {background-color: var(--rainbowSliceColor8);}






.indentTab:is(.rainbowBoxes, .rainbowBlocks):last-child {
	width:100% !important; 
	__margin-right:-5rem;
	__z-index:-100;
	
}

/* .indentTab.rainbowBlocks {position:relative;}
.indentTab.rainbowBlocks:has(+ .topper):after
{
	content: ' ';
	position:absolute;
	left:100%;
	background-color:red;
	z-index:-300;
} */


.indentTab.rainbowBoxes.topper:nth-of-type(8n+1) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor1) inset, var(--ILW) 0 0 0px var(--rainbowLineColor1) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+2) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor2) inset, var(--ILW) 0 0 0px var(--rainbowLineColor2) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+3) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor3) inset, var(--ILW) 0 0 0px var(--rainbowLineColor3) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+4) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor4) inset, var(--ILW) 0 0 0px var(--rainbowLineColor4) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+5) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor5) inset, var(--ILW) 0 0 0px var(--rainbowLineColor5) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+6) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor6) inset, var(--ILW) 0 0 0px var(--rainbowLineColor6) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+7) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor7) inset, var(--ILW) 0 0 0px var(--rainbowLineColor7) inset;}
.indentTab.rainbowBoxes.topper:nth-of-type(8n+8) {box-shadow: 0px var(--ILW) 0 0px var(--rainbowLineColor8) inset, var(--ILW) 0 0 0px var(--rainbowLineColor8) inset;}


.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+1) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor1) inset, var(--ILW) 0 0 0px var(--rainbowLineColor1) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+2) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor2) inset, var(--ILW) 0 0 0px var(--rainbowLineColor2) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+3) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor3) inset, var(--ILW) 0 0 0px var(--rainbowLineColor3) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+4) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor4) inset, var(--ILW) 0 0 0px var(--rainbowLineColor4) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+5) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor5) inset, var(--ILW) 0 0 0px var(--rainbowLineColor5) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+6) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor6) inset, var(--ILW) 0 0 0px var(--rainbowLineColor6) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+7) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor7) inset, var(--ILW) 0 0 0px var(--rainbowLineColor7) inset;}
.indentTab.rainbowBoxes.bottomer:nth-of-type(8n+8) {box-shadow: 0px var(--mILW) 0 0px var(--rainbowLineColor8) inset, var(--ILW) 0 0 0px var(--rainbowLineColor8) inset;}


.indentTab.rainbowBoxes.topper.bottomer {border-top: 0; box-shadow: none;}


.hline:has(> .rtabs)
{
	__outline:2px solid orange;
	padding-right:100px;
}
.indentRight
{
	float:right;
	display:inline-block;
	width:1ch;
	background-color: var(--codeBackground);
	__border-top: 1px solid var(--codeBackground);
	__border-bottom: 1px solid var(--codeBackground);
}
.indentRight.rainbowBoxes
{
	box-shadow:none;
	border:0;
}


.indentRight.rainbowBoxes:nth-of-type(8n+1) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor1) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+2) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor2) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+3) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor3) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+4) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor4) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+5) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor5) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+6) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor6) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+7) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor7) inset;}
.indentRight.rainbowBoxes:nth-of-type(8n+8) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor8) inset;}

.indentRight.rainbowBoxes.topper:nth-of-type(8n+1) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor1) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor1) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+2) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor2) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor2) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+3) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor3) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor3) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+4) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor4) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor4) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+5) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor5) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor5) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+6) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor6) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor6) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+7) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor7) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor7) inset;}
.indentRight.rainbowBoxes.topper:nth-of-type(8n+8) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor8) inset, 0 var(--ILW) 0 0px var(--rainbowLineColor8) inset;}

.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+1) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor1) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor1) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+2) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor2) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor2) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+3) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor3) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor3) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+4) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor4) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor4) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+5) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor5) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor5) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+6) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor6) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor6) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+7) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor7) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor7) inset;}
.indentRight.rainbowBoxes.bottomer:nth-of-type(8n+8) {box-shadow: var(--mILW) 0 0 0px var(--rainbowLineColor8) inset, 0 var(--mILW) 0 0px var(--rainbowLineColor8) inset;}

.indentTab.rainbowBlocks:last-child
{
	__background-color: rgba(255,255,255,0.04);
}

.indentTab.rainbowBlocks.topper{box-shadow: 0px var(--ILW) 0px 0px var(--indentLine) inset, var(--ILW) 0 0 0px var(--indentLine) inset;}

.indentTab.rainbowBlocks.bottomer {box-shadow: 0px var(--mILW) 0 0px var(--indentLine) inset, var(--ILW) 0 0 0px var(--indentLine) inset;}



.indentRight.rainbowBlocks:nth-of-type(8n+1) {background-color: var(--rainbowSliceColor1);}
.indentRight.rainbowBlocks:nth-of-type(8n+2) {background-color: var(--rainbowSliceColor2);}
.indentRight.rainbowBlocks:nth-of-type(8n+3) {background-color: var(--rainbowSliceColor3);}
.indentRight.rainbowBlocks:nth-of-type(8n+4) {background-color: var(--rainbowSliceColor4);}
.indentRight.rainbowBlocks:nth-of-type(8n+5) {background-color: var(--rainbowSliceColor5);}
.indentRight.rainbowBlocks:nth-of-type(8n+6) {background-color: var(--rainbowSliceColor6);}
.indentRight.rainbowBlocks:nth-of-type(8n+7) {background-color: var(--rainbowSliceColor7);}
.indentRight.rainbowBlocks:nth-of-type(8n+8) {background-color: var(--rainbowSliceColor8);}



.indentRight.rainbowBlocks {box-shadow: var(--mILW) 0 0 0px var(--indentLine) inset;}

.indentRight.rainbowBlocks.topper {box-shadow: 0px var(--ILW) 0 0px var(--indentLine) inset, var(--mILW) 0 0 0px var(--indentLine) inset;}
.indentRight.rainbowBlocks.bottomer {box-shadow: 0px var(--mILW) 0 0px var(--indentLine) inset, var(--mILW) 0 0 0px var(--indentLine) inset;}




.indentTab:is(.rainbowBoxes, .rainbowBlocks).topper
{
	border-top-left-radius:3px;
}
.indentTab:is(.rainbowBoxes, .rainbowBlocks).bottomer
{
	border-bottom-left-radius:3px;
}

.indentRight:is(.rainbowBoxes, .rainbowBlocks).topper
{
	border-top-right-radius:3px;
}
.indentRight:is(.rainbowBoxes, .rainbowBlocks).bottomer
{
	border-bottom-right-radius:3px;
}









.lineSug
{
	position:absolute;
	
	left:var(--linePaddingLeft);
	top:0;
	color: var(--ghostTextColor);
	font-style: italic;
	font-weight: 100;
	__z-index:-1;
	
	__font-family: "SourceCodeProExtraLight";
}
.invisibleSug
{
	visibility:hidden;
}
.rightSug
{
	position:relative;
	background-color: var(--codeBackground);
}
.rightSug[data-nummatches]::after
{
	content:  attr(data-nummatches);
	position:absolute;
	left:1em;
	top:-0.95em;
	font-size: 0.7em;
	line-height:1.2em;
	padding:0 0.3em;
	background:var(--codeBackground);
	border-radius:0.5em;
	border: 1px solid var(--ghostTextColor);
}

.commentAnswer
{
	color: var(--ghostTextColor);
	font-style: italic;
	font-weight: 100;
}


#ghostText
{
	
	font-style: italic;
	color: var(--ghostTextColor);
	
	
	__text-shadow: 5px 5px 10px #000000;
	__opacity:0.3;
	__color: var(--ghostTextColor);
	__text-shadow: 0px 0px 10px var(--ghostTextColor);
	__text-shadow: 0px 0px 10px cyan;
	__font-family: 'Comic Sans Ms', arial;
	__font-family: arial;
	__outline: 3px dotted orange;
	
	/* position:absolute;
	left:var(--linePaddingLeft);
	top:0; */
	
	__z-index:-2;
}
.invisibleAiSug
{
	__color:red;
	visibility:hidden;
}





#ghostText[data-nummatches]::after
{
	content:  attr(data-nummatches);
	color: var(--ghostTextColor);
	position:absolute;
	right:-2.5em;
	top:-0.45em;
	font-size: 0.7em;
	line-height:1.2em;
	padding:0 0.3em;
	background:var(--codeBackground);
	__z-index:3;
	border-radius:0.5em;
	border: 1px solid var(--ghostTextColor);
}




/* #ghostText.highlighted
{
	position:absolute;
	left:var(--linePaddingLeft);
	top:0;
} */

/* #ghostText.highlighted > #innerGhostText
{
	opacity: var(--ghostOpacity);
}
#ghostText.plain > #innerGhostText
{
	color: var(--ghostTextColor);
} */

/* #numGhostMatches
{
	position:relative;
	top:-0.95em;
	font-size: 0.7em;
	line-height:1.2em;
	padding:0 0.3em;
	background:var(--codeBackground);
	__z-index:3;
	border-radius:0.5em;
	border: 1px solid var(--ghostTextColor);
} */





/* OLD METHOD
[data-variable="localunused"]
{
	outline:1px solid red;
	__font-weight:bold;
}
[data-variable="globalunused"]
{
	outline:1px solid green;
	__font-weight:bold;
}
[data-variable="parameterunused"]
{
	outline:1px solid purple;
	__font-weight:bold;
}
*/


/*
[data-variable="localunused"]
{
	opacity:0.5;
}
[data-variable="globalunused"]
{
	opacity:0.5;
}
[data-variable="parameterunused"]
{
	opacity:0.5;
}
*/


[data-uvar90315="boxed"]
{
	outline:1px solid var(--warningColor);
}
[data-uvar90315="feint30"] {opacity:0.3;}
[data-uvar90315="feint40"] {opacity:0.4;}
[data-uvar90315="feint50"] {opacity:0.5;}
[data-uvar90315="feint60"] {opacity:0.6;}
[data-uvar90315="feint70"] {opacity:0.7;}





/*#endregion*/

/*#region LINE NUMBERS */

.lineNumber {

	/* height: var(--codeLineHeight); */
	/* line-height: var(--codeLineHeight); */
	
	position:relative;
	color:var(--lineNumberColor);
	padding-right:13px;
	__margin-right:13px;
	user-select:none !important;
}
.lineNumber.invisible
{
	visibility:hidden;
}
.lineNumber.hiddenLineNumber
{
	padding-right:4px;
}
.lineNumber.active {

	color:var(--codeColor);
	visibility:visible;
	font-weight:bold;
	__font-weight:var(--bold);
}
.lineNumber:hover
{
	background: var(--hoverBackground);
	cursor:pointer;
}



.lineNumber.modified
{
	border-left:3px solid var(--modifiedColor);
}
.lineNumber.modified_unsaved
{
	border-left:3px solid var(--unsavedColor);
}

.lineNumber.modified.empty,
.lineNumber.modified_unsaved.empty
{
	border-left:0px;
}


.lineNumber.embedded
{
	__border-right: 4px solid var(--mainBorder);
}


/*
.lineNumber:is(.modified, .modified_unsaved)::before
{
	position:absolute;
	content: attr(data-timestamp);
	font-size:0.7em;
	line-height:0.7em;
	left:0;
	top:0;
	color:var(--lineNumberColor);
}
*/

.lineNumber.folded
{
	/* https://stackoverflow.com/questions/12671898/outline-on-only-one-border */
	__box-shadow: 0 1px 0 #ccc, 0 -1px 0 #ccc;
	__opacity:0.6;
}

.lineNumber.foldStart
{
	__box-shadow:  0 -1px 0 var(--activeLineBorder);
	
	__border-right: 1px dotted var(--mainBorder);
	__border-bottom:0;
	__background: var(--codeBackground);
	
	__opacity:0.5;
	
}
.lineNumber.foldEnd
{
	__box-shadow: 0 1px 0 var(--activeLineBorder);
	__border-right: 1px dotted var(--mainBorder);
	__border-top:0;
	__background: var(--codeBackground);
	
	__opacity:0.5;
}



.lineNumber.folded::after,
#____outerLineNumber::after
{
	pointer-events: none; 
	content: '\22EE';
	position:absolute;
	bottom:-0.9em;
	right: calc(50% - 1ch);
	font-size:0.78em;
	font-weight:bold;
	__z-index:1;
}

.lineNumber.width1.folded::after
{
	right: calc(15px + 0ch);
}
.lineNumber.width2.folded::after
{
	right: calc(13px + 1ch);
}
.lineNumber.width3.folded::after
{
	right: calc(11px + 2ch);
}
.lineNumber.width4.folded::after
{
	right: calc(8px + 3ch);
}
.lineNumber.width5.folded::after
{
	right: calc(5px + 4ch);
}
.lineNumber.width5.folded::after
{
	right: calc(1px + 5ch);
}










/* .lineNumber:not([data-num$='0']) {
	color:red !important;
} */



.colorBox, .sideColorWrap
{


	__border: 0 !important;
	border-image-width:0 !important;
	background-color:transparent;
	padding:0;
	position:absolute;
	/* bottom:1px; */ /* Changed 13th July 2025  */
	top: 1px;
	right: 0px;
	width:10px;
	height:calc(var(--codeLineHeight) - 3px);
	cursor: default;
}


.sideColorWrap {
	border:var(--borderWidth) solid var(--mainBorder);
}
/*
.sideColor:hover {outline: 1px solid hsl(59, 96%, 50%);}

.sideColor.active {
	__outline: 2px solid rgb(242, 222, 7);
	__outline-offset: -2px;
	outline-color: hwb(0 20% 25%);
	
	box-shadow: inset 0 0 2px 1px orange;
}
*/


.colorBox2
{
	padding:0 !important;
	border: 0 !important;
	border-image:none !important;
	border-image-width:0 !important;
	background-color:transparent;
	
}



.imagePreview
{
	position:absolute;
	bottom:1px;
	right: 1px;
	__max-height: calc(var(--codeLineHeight) - 4px);
	height: calc(var(--codeLineHeight) - 4px);

	width:94%;
	height:94%;
	object-fit: contain;
	object-position: center center;
	__opacity:0.5;
	
	__vertical-align: middle;
	__outline:1px solid var(--mainBorder);
	background-color: var(--stemBackground);
}

.lineNumber:hover:has(> .imagePreview)
{
	background-color: transparent;
}
.imagePreview:hover
{
	outline: 1px dotted var(--secondColor);
}




/*#endregion*/


/*#region INLINE CHAT  */

.line {position:relative;}

#inlineChatBox
{
	display:block;
	position:absolute;
	top:0px;
	left:var(--linePaddingLeft);
	left:0px;
	width:100%;
	
	overflow:hidden;
	white-space: normal;
	__outline:1px solid orange;
	
	padding: calc(var(--codeLineHeight) * 0.2);
	__margin-left: var(--linePaddingLeft);
	
	offset:
}
#inlineChatInput
{
	height:var(--codeLineHeight);
	width:calc(100% - 4rem);
	vertical-align:top;
	__display: inline;
}
#inlineChatSelect
{
	height:var(--codeLineHeight);
	width:1.5rem;
	vertical-align:top;

}


#inlineChatAccept, #inlineChatDiscard
{
	margin-top: calc(var(--codeLineHeight) * 0.2);
}

.line[data-inline="inlineSelected"]
{
	background-color: rgba(0, 0, 0, 0.1);
}
.line[data-inline="inlineModified"]
{
	background-color: rgba(140, 255, 140, 0.1);
}

#inlineChatHistoryIcon
{
	padding-right:0px;
	padding-left:2px;
	
	height:25px;
	line-height:20px;
	color: var(--color);
}


/*#endregion  */


/*#region FOLDING ARROWS */

.arrowFold
{
	opacity:0;
	position:absolute;
	right:0px;
	__right:-12px;
	top:0px;
	width:12px;
	height:14px;
	height:var(--codeLineHeight);
	__padding-top: calc(var(--codeLineHeight) / 2);
	padding-bottom: 0px;
	__padding-right:2px;
	__padding-left:4px;
	__margin-right:5px;
	__border-left:4px solid var(--stemBackground);
	
	background-color: var(--stemBackground);
	__border-left: 8px solid transparent;
	
	__z-index:2; /* Removed as it was going over the basket. Don't think it's necessary anymore anyway */
}
.arrowFold:hover
{
	__opacity:1;
	__transition: opacity 0.5s;
	__background-color:orange;
	__background-color:var(--secondColor);
	__outline:1px solid var(--mainBorder);
	__border-left: 8px solid transparent !important;
	cursor:default;
	
}
.arrowFold:hover > svg > .triangle
{
	__fill: var(--codeBackground);
	fill-opacity:1;


}

.arrowFold.alwaysVisible
{
	opacity: 1;
}

.arrowFold::before /* This is so that if you're aiming to click on an arrowFold and you just miss, it still counts as otherwise you'd get an accidental bookmark which is annoying */
{
	content: '\00A0';
	position:absolute;
	color:transparent;
	width:3px;
	right:100%;
}

#stem:hover
{
	__background-color: var(--hoverBackground);
}

#stem:hover > .lineNumber > .arrowFold.hoverVisible
{
	opacity:1;
	transition: opacity 0.5s;
}


/* TODO: if we have fading arrows by default we don't need all this extra stuff */
#stem.__fadeArrows > .lineNumber > .arrowFold {
	opacity:0;
	transition: opacity 0.5s;
}
#stem.__fadeArrows:hover > .lineNumber > .arrowFold {
	opacity:1;
}
.lineNumber.folded > .arrowFold {
	opacity:1 !important;
}
.lineNumber.folded > .arrowFold.neverVisible {
	opacity:0 !important;
}

.triangleDown, .triangleRight, .errorTriangle {

	width:8px;
	height:8px;
	pointer-events:none;
	position:absolute;
	left:2px;
	top: calc(var(--codeLineHeight) / 2 - 4px)
}
.triangle {fill:var(--lineNumberColor); fill-opacity:0.6;}
.errorPath {fill:red;}

.__error {
	display:inline-block;
	position:absolute;
	right:5px;
	top:0;
	width:8px;
	font-family: 'comic sans ms';
	color:red;
	__background: yellow;
	font-weight: bold;
}
.lineNumber.errormarker::after {

	/*
	display:inline-block;
	position:absolute;
	right:5px;
	top:0;
	width:8px;
	*/
	position:absolute;
	__content: '!';
	content: '\26A0'; /* exclamation mark in triangle */
	__content: '\24E7'; /* cross in circle. looks naff for some reason */
	right:1px;
	font-size:0.9em;
	__font-size:0.7em;
	
	__background: cyan;
	font-weight: normal;
	
	
}

.lineNumber.errormarker
{
	background-color:var(--warningColor);
	color:white;
	outline: 2px solid var(--warningColor);
}


.lineNumber.mshl
{
	background: cyan;  
}


/* .line.errormarker
{
	__background-color:var(--panelBackground);
	__background-color:gold;
	outline: 2px solid var(--warningColor);
	
	__color:var(--color);
	__font-weight:bold;
} */

/*#endregion*/







/*#region HIGHLIGHTS */
#searchLines {

	pointer-events: none;
	background: transparent;
	__color: hsl(222, 23%, 58%);
	__color:rgba(176, 75, 176);
	color: transparent;
	
	__font-weight: bold;
}
.shi {
	position:static;
	__display: inline-block;
	background: var(--searchHighlight);
	border-radius:3px; 
	outline:1px solid var(--searchHighlight);
	outline:var(--borderWidth) solid var(--mainBorder);
	__padding: 1px 0;
}
.shi.active {
	background: var(--activeSearchHighlight);
	__outline:2px solid var(--activeSearchHighlight);
	outline:2px solid var(--unsavedColor);
	outline:var(--borderWidth) solid var(--mainBorder);
	outline:var(--borderWidth) solid var(--color);
	__outline-offset: 0.49px;
}
.shi.active2 {

	background-color: magenta;
}

/* .shi > .flushbreak,
.shi > .beforebreak
{
	visibility: hidden;
} */



/* .line:has(> .shi)::before {
	position:sticky;
	content: 'A';
	background-color: magenta;
} */

.multiShi {
	__display: inline-block;
	background: var(--searchHighlight);
	padding: var(--codeFontPadding);
	
}
.multiShi.active {
	background:var(--activeSearchHighlight);
}

#hiLines {

	pointer-events: none;
	background: transparent;
	__color: yellow;
	color: transparent;
}
.hi {
	__display: inline-block; /* inline-block messes up long highlights when using word wrap*/
	background: var(--sameWordHighlight);
	border-radius:3px;
	__outline:2px solid var(--sameWordHighlight);
	outline:var(--borderWidth) solid var(--mainBorder);
	__outline-offset: 2px;
}
.foldedHi
{
	background: var(--sameWordHighlight);
	border-radius:3px;
		__outline:2px solid var(--sameWordHighlight);
	outline:1px dotted var(--mainBorder);	
}

::highlight(highlights) {
	background-color: yellow;
	border-radius:3px;
	outline:1px solid red;
	color:cyan !important;
	fill:red !important;
	stroke:green !important;
	stroke-width:4px !important;
	__color: black;
}


#flashNum
{
	display:none;
	position:fixed;
	background:  var(--matchBackground);
	__outline:var(--borderWidth) solid var(--mainBorder);
	height:11px;
	border-radius:5px;
	font-size:11px;
	line-height:11px;
	padding-left:1px;
	padding-right:1px;
	
	/* animation-name: fadeOpacity;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards; */
	
	__opacity: 1;
	__transition: opacity 2s; 
}

#flashNum.show
{
	display:block;
	__opacity:0.5;
}

@keyframes fadeOpacity {
	from { opacity: 1; } 
	to { opacity: 0; }
}


.bracketMatch
{
	/* TODO: using a background is problematic if we're not using a carrot
	e.g. for wordwrap where carrot is in wrong place at start of lines */
	
	/* UPDATE: switched to dotted outline as solid was covering up system caret too much */
	outline:var(--borderWidth) dotted var(--mainBorder);
	__outline-offset: -1px;
	
	/* TODO: maybe a box shadow would be better? */
}
.bracketMatch.error
{

	outline:1px solid red;
}
.lineNumber.BLM {

	background:  var(--matchBackground);
}

#matchLine.oldtype
{
	pointer-events: none;
	position:absolute;
	border-right: 2px dotted var(--activeIndentLine);
	__border-right: 2px dotted var(--indentLine);
	__border-right: 2px solid var(--activeIndentLine);
	__border-right: 2px solid var(--indentLine);
	__border-right: 2px solid var(--indentLine);
	__background:var(--codeBackground); /*WARNING: having a background could cover an extra range caret but I think the problem has been fixed */
	
}

#matchLine
{
	pointer-events: none;
	position:absolute;
	
	/* --indentLineWidth: 1px;
	--activeIndentLine: var(--codeColor); */
	
	/* border-left: var(--indentLineWidth) solid var(--activeIndentLine); */
	
	__--col: color-mix(in srgb, var(--codeColor) 50%, var(--indentLine));
	__--col: color-mix(in srgb, var(--codeColor) 60%, transparent);

	
	__border-left: 1px solid var(--col);
	__border-top: 1px solid var(--codeColor);


	border-left: 1px solid var(--matchLine);
	
	__border-top-width: 0px;
	
	
	/* position:relative; */
	
	__outline:1px solid red;
}

#matchLine.___newtype
{
	pointer-events: none;
	position:absolute;
	
	--indentLineWidth: 1.5px;
	__--activeIndentLine: black;
	
	__box-shadow: 0 1px 4px var(--activeIndentLine), -1px 0 4px var(--activeIndentLine);
	
	box-shadow: 0 0 1px 0 var(--activeIndentLine);
	
	background-color: transparent;
	
	/* position:relative; */
	
	__outline:1px solid red;
}



#matchLine.cutsthrough
{
	opacity:0.25;
}

.bracketMatch.start {

	background:var(--matchBackground);
	
}
.bracketMatch.end {

	background:var(--matchBackground);
	
}



.tagMatch, .envMatch
{
	/* TODO: using a background is problematic if we're not using a carrot
	e.g. for wordwrap where carrot is in wrong place at start of lines */
	
	outline:var(--borderWidth) dotted var(--mainBorder);
	outline-offset: -1px;
	background:var(--matchBackground);
	border-radius:3px;
	opacity:0.90315; /* This helps placate the auto rename hidden caret bug, which is kind of a feature */
}
.tagMatch.error, .envMatch.error {

	outline:2px solid red;
}

#outerMatchBox 
{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	background: #eef;
	
	color:var(--codeColor);
	background: var(--panelBackground);
	background: var(--codeBackground);
	__background: var(--stemBackground);
	font-family:var(--codeFont), monospace;
	font-size:var(--codeFontSize);
	line-height: var(--codeLineHeight);
	__box-shadow: 1px 1px 8px var(--mainBorder);
	__box-shadow: -1px 1px 0.5px var(--mainBorder);
	__border-bottom:var(--borderWidth) solid var(--mainBorder);
	__border-bottom:2px dashed var(--mainBorder);
	border-bottom:1.75px dotted var(--mainBorder);
	
	overflow:hidden;
}
.basketTop + #limpetOptionsButton + #outerMatchBox
{
	top: var(--basketHeight);
}
#outerLineNumber
{
	position:relative;
	__float:left;
	color:var(--lineNumberColor);
	__color:var(--secondColor);
	font-weight:bold;
	__background: var(--stemBackground);
	padding-right:13px;
	text-align: right;
	border:0 !important;
	cursor:pointer;
}
#outerLine
{
	__float:left;
	padding-left: var(--linePaddingLeft);
	__background: var(--stemBackground);
	tab-size: var(--tabSize);
	white-space: pre;
	overflow: hidden;
	border:0 !important;
	cursor:pointer;
}

/*#endregion*/

/*#region EXTRA RANGES */
.extraRange {

	pointer-events: none;
	background: transparent;
	__color: red;
	color: transparent;
	__color:yellow;
	
	
	__width:max-content;
	__overflow:hidden;
}

.range {
	__display: inline-block; /* inline-block messes up long highlights when using word wrap*/
	
	__outline: 2px solid orange;
	
	__background:var(--selection2);
	background-color: color-mix(in srgb, var(--selection2) var(--selectionPC), #aaa);
	__outline:1px solid red;
	__background:magenta; 
	
	padding: var(--codeFontPadding); /* https://stackoverflow.com/questions/52980728/extend-background-color-of-wrapped-span-when-line-height-is-set-and-spacing-appe */
	/* display:inline-block; */ /* NO! This doesn't work with word wrapped lines */
}
.singleRange
{
	background:var(--selection);
	__background:red;
	__background:#cbf;
}

.range.curvetop
{
	/* border-top-right-radius: 5px;
	border-top-left-radius: 5px; */
	
	__border-bottom-right-radius: 5px;
}
.range.curvebottom
{
	/* border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px; */
	
	__border-top-right-radius: 5px;
}


/* .range.curvetop.curvebottom */
.range.reduceHeight
{
	__line-height: calc(var(--codeLineHeight) - 1px);
	
	__border-radius:5px;
	
	
	padding: var(--codeFontPadding2);
	__padding:4px;
}

.line.forRanges
{
	overflow:hidden;
	__padding-right:0;
	
}

.range.fullLine
{
	padding-right: 1ch;
}

.range.fullLine.fullWidth
{


	padding-right: calc(100% + var(--linePaddingRight)); /* changes icode width so not good. But it's better than a serated edge I reckon */
	__padding-right:100%; /* but this has serated edge at the moment */
	__display:inline-block;
	__width:100%;
}

.range.fullLine.fullWidth.is_empty
{
	padding-right: calc(100% + var(--linePaddingRight));
}

.__range:not(.caret):empty::before {
	content: ' ';
	__padding-right: calc(100% + 3ch) !important;
	background:var(--selection2);
	__background:magenta;	
}

.range.caret {

	__width:2px;
	__width: var(--caretWidth);
	
	
	display: inline-block;
	vertical-align: top;
	height:var(--codeLineHeight);
	
	/*
	margin-right:-1px;
	margin-left:-1px;
	border-right:none;
	*/
	
	border-right: var(--caretWidth) solid var(--caretColor2);
	
	margin-right: calc(-1 * var(--caretWidth));
	position:relative;
	right: calc(var(--caretWidth) * 0.5);
	
	__background:magenta;	
	__background:red;	
	__background:var(--caretColor2);	
	
	/* z-index: 9999; */
}
.singleRange.caret {display:none;}


.range.____searchSelection {
	background:var(--blurredSelection);
}
/* .range.searchSelection:not(.caret):empty::before {
	background:var(--blurredSelection);
} */


#moreRangesWrap.activated.flashing > .extraRange > .line > .range.caret:empty {

	animation: flashingcarrot 0.5s ease-in-out 0s 1000 alternate;
	z-index:2222;
}
#moreRangesWrap.activated.expanding > .extraRange > .line > .range.caret:empty {

	animation: expandingcarrot 0.5s ease-in-out 0s 1000 alternate;
	z-index:2222;
}


#___moreRangesWrap
{
	z-index:5555 !important;
}


#moreRangesWrap.blurred > .extraRange > .line > .range,
#moreRangesWrap.blurred > .extraRange > .line > .range.empty::before,
#moreRangesWrap.blurred > .extraRange > .line > .range:not(.caret):empty::before
{
	color:inherit;
	background-color: var(--blurredSelection) !important;
}

#moreRangesWrap.blurred > .extraRange > .line > .range.caret
{
	border-right-color: var(--blurredSelection) !important;
	animation: none !important;
}


#singleRange
{
	pointer-events: none;
	background: transparent;
	__color: red;
	color: transparent;
	__width:100%;
	overflow: hidden;
}

.blurredSelection,
.blurredSelection:not(.caret):empty::before
{
	background-color: var(--blurredSelection);
	color: transparent;
	
}
.blurredSelection.caret
{
	border-right-color: var(--blurredSelection);
}


.fullWidthSelection,
.fullWidthSelection:not(.caret):empty::before
{
	background-color: pink;
	color: transparent;
	
}
.fullWidthSelection.caret
{
	border-right-color: pink;
}



/*#endregion*/




/*#region BOOKMARKS */
.limpetStrip
{
	display:block;
	position: absolute;
	
	top:calc(var(--scrollThumbSize) * 0.5);
	
	width:0px; /* Don't want bookmark strip to have width as it would interfere with editing area. Turns out limpets still show with zero width */
	__background-color:rgba(255,255,0, 0.3);
	
	
	height:calc(100% - var(--scrollbarSize) - var(--scrollThumbSize));
	/* height:calc(100% - var(--scrollThumbSize)); */
	
	
	
	user-select:none;
	
}
.basketTop:not(.hide) ~ .limpetStrip
{
	top:calc(var(--scrollThumbSize) * 0.5 + var(--basketHeight));
	height:calc(100% - var(--scrollbarSize) - var(--scrollThumbSize) - var(--basketHeight));
	/* height:calc(100% - var(--scrollThumbSize) - var(--basketHeight)); */
}

.lineNumber.bookmark,
#outerLineNumber.bookmark
{
	background:var(--bookmarkBackground);
	__background-position: calc(50% + 20px) calc(50% - 10px);
	__1F516
}
.lineNumber:not(.hasFoldArrow).bookmark::after,
#outerLineNumber.bookmark::after
{
	content: '\1F516';
	position:absolute;
	right:0;
	top:0px;
	font-size:0.75em;
	filter: grayscale(80%);
	__z-index: -99;
}
#stem
{
	__z-index:999;
}
.__lineNumber.bookmark:after
{
	content:"B";
	position: absolute;
	top:0;
	left:0;
	background-color:cyan;
	font-size:0.8em;
	line-height:1em;
	__left: 85%;
	/* top:0px;
	width:0px;
	height:0px;
	border-top:10px solid transparent;
	border-left:20px solid blue;
	border-bottom:10px solid transparent; */
	__z-index:999;
}


.limpet
{
	pointer-events:none;
	position: absolute;
	right:-2px;
	width:var(--limpetSize);
	height:var(--limpetSize);
	overflow: visible;
	/* Getting limpet in the correct spot is tricky because it depends on whether horizontal scroll bar is always visible. If it is then doing the below is best, but if it isn't visible then don't.
	Reckon it's best to just leave margin as 0.*/
	__margin-top: calc(var(--limpetSize) * -0.5);
}
/* .bookmark.limpet
{
	width:var(--bookmarkLimpetSize);
	__width:30px;
	height:var(--bookmarkLimpetSize);  
}
.highlight.limpet
{
	width:var(--highlightLimpetSize);
	height:var(--highlightLimpetSize);  
} */
.limpetPath
{
	__display:none;
	pointer-events:all;
	stroke-width: 8;
	stroke: var(--mainBorder);
	
}
.limpetStem
{
	pointer-events:none;
	stroke-width: 3;
	stroke: var(--mainBorder);
	__stroke-opacity:0.3;
	fill:red;
	__fill-opacity:0.3;
	
}
.limpetPath:hover
{

	stroke: var(--color);
	fill-opacity:0.9;
}
.bookmark.limpetPath,
.bookmark.limpetStem
{
	fill: var(--bookmarkBackground);
}
.search.limpetPath,
.search.limpetStem
{
	fill: var(--searchHighlight);
	/* fill-opacity:0.4; */
}
.highlight.limpetPath
{
	fill: var(--sameWordHighlight);
}
.visited.limpetPath
{
	fill: var(--visitedColor);
}
.visited.limpetPath:hover
{
	fill: color-mix(in srgb, var(--visitedColor) 75%, transparent);
}
.diff.limpetPath
{
	__fill: var(--diffColor);
	fill: color-mix(in srgb, var(--diffColor) 50%, var(--codeColor));
}
.modified > .modstrip.limpetPath
{
	fill: var(--modifiedColor);
}
.modified_unsaved > .modstrip.limpetPath
{
	fill: var(--unsavedColor);
}
.warning.limpetPath
{
	fill: var(--warningColor);
}

.active > .search.limpetPath
{
	fill: var(--activeSearchHighlight);
	fill-opacity:1;
	stroke: var(--unsavedColor);
}

.limpetTitle /* don't think it's possible to style this */
{
	/* font-family: var(--codeFont), monospace;
	stroke:red; */
}

.limpetText
{
	pointer-events: none;
	font: normal 80px sans-serif;
	stroke:var(--codeColor);
	font-style: italic;
}


#limpetOptionsButton
{
	/* background-color: var(--panelBackground); */
	background-color: transparent;
	position:absolute;
	bottom:0px;
	right:var(--scrollbarSize);
	right:0;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	line-height:8px;
}

.basketBottom + #limpetOptionsButton
{
	bottom: var(--basketHeight);
}


#limpetOptionsButton:hover
{
	background: var(--hoverBackground);
}











/* https://css-generators.com/ribbon-shapes/ */



/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
  }
  .____lineNumber.bookmark {
	--f: .5em; /* control the folded part*/
	--r: .8em; /* control the ribbon shape */
	
	__position: absolute;
	__top: 20px;
	right: calc(-1*var(--f));
	__padding-inline: .25em;
	__line-height: 1.8;
	background: #FA6900;
	__border-bottom: var(--f) solid #0005;
	__border-left: var(--r) solid #0000;
	clip-path: 
	  polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
		calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),
		0 calc(50% - var(--f)/2));
  }
  
  
  
  
  
  
  
  
  
  
  
/*#endregion*/


/*#region @@@ MINIMAP */

#minimapWrap
{
	display:var(--minimapDisplay);
	display:block;
	
	height: 100%;
	overflow-y:hidden;
	
	position:relative;
	float: var(--minimapSide);
	
}

#minimap
{	
	margin:0;
	padding-left:2px;
	
	background:var(--codeBackground);
	border-left:var(--borderWidth) solid var(--mainBorder);
	border-right:var(--borderWidth) solid var(--mainBorder);
	
	 /* 
	 image-rendering: pixelated;
	 image-rendering: crisp-edges;
	 font-smooth: never;
	-webkit-font-smoothing : none; */
}
#minimap:hover {
	__outline: 2px solid orange;
}


#miniIsland
{
	position: absolute;
	top: 60px;
	width: 100%;
	height:80px;
	
   /* background-color: var(--codeColor);
	opacity:0.05; */
	
	background-color: color-mix(in srgb, var(--codeColor) 5%, transparent);
	
	border:1px solid var(--unsavedColor);
	border:1px solid red;
	
}
#miniIsland:hover
{
	background-color: color-mix(in srgb, var(--codeColor) 10%, transparent);
	__opacity:0.1;
}
#miniIsland.active
{
	__opacity:0.08;
}

#minimapBox
{
	position: fixed;
	background-color: var(--codeBackground);
	border: 2px solid var(--focusBackground);
	border: 2px solid var(--secondColor);
}
#minimapBoxOutline
{
	pointer-events:none;
	position: fixed;
	border: 1px solid var(--secondColor);
}

#minimapBoxStem
{
	position:absolute;
	__float:left;
	top:0;
	left:0;
	text-align:right;
	__width:50px !important;
	background-color: var(--stemBackground);
	__background-color: yellow;
	++outline:3px solid red;
}

/* #minimapBoxStem > .lineNumber {outline:1px solid orange;}
#minimapBoxLines > .hline {outline:1px solid orange;} */


#minimapBoxLines
{
	__float:left;
}


/* TODO: could hide vartical scrollbar when minimap visible, but would need
to adjust in the js so that limpets are in the right place. Also there would
no longer be a scrollbar menu to toggle various limpets   */
/* #minimapWrap:not(.hide) + #stem + #icode.custom.scrollbars::-webkit-scrollbar
{
	__width:0;
	--scrollbarSize: 0;
} */


#testPoint
{
	position:fixed;
	width:2px;
	height:2px;
	background-color:red;
}



/*#endregion*/


/*#region @@@ OUTLINE */


#outlineLabel
{
	padding-left: 0.3rem;
}

#bookmarkSpace, #_bookmarkSpace
{
	overflow-y: auto;
	overflow-x:hidden;
	padding-left: 4px;
	padding-left: 0px;
	__max-height:50%;
}

#bookmarkSpace > .bookmarkItem, #_bookmarkSpace > .bookmarkItem
{
	width:100%;
}

/* #bookmarkSpace::before, #_bookmarkSpace::before,
#historySpace::before, #_historySpace::before,
#outlineSpace::before, #_outlineSpace::before, */
.spaceLabel
{
	display:block;
	opacity:1;
	__text-align:center;
	__color:var(--secondColor);
	__color:transparent;
	font-size:0.9rem;
	height:18px;
	margin-top:0.6rem;
	__font-weight:bold;
	
	padding-left:4px;
	background-color: var(--stemBackground);
	background-color: var(--panelBackground);
	font-family: var(--mainFont);
	/* position:absolute;
	top:0;
	right:0; */
}
.__spaceLabel:hover
{
	opacity:1;
}

#_historySpaceLabel, #historySpaceLabel
{
	opacity:1;
}

#_bookmarkSpaceLabel:has(+ #_bookmarkSpace:empty) {display:none;}
#bookmarkSpaceLabel:has(+ #bookmarkSpace:empty) {display:none;}
#_historySpaceLabel:has(+ #_historySpace:empty) {display:none;}
#historySpaceLabel:has(+ #historySpace:empty) {display:none;}

#_historySpace:empty {display:none;}
#_bookmarkSpace:empty {display:none;}

/*
#bookmarkSpace::before, #_bookmarkSpace::before
{
	content: 'Bookmarks:';  
}
#historySpace::before, #_historySpace::before
{
	content: 'History:';  
}
 #outlineSpace::before, #_outlineSpace::before
{
	content: 'Outline:';  
} */

#historySpace, #_historySpace
{
	overflow-y: auto;
	overflow-x:hidden;
	__padding-left: 0.3rem;
	__max-height:25%;
	border-top: var(--borderWidth) solid var(--mainBorder);
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	padding-left:4px;
}

#historySpace > .historyItem, #_historySpace > .historyItem
{
	width:100%;
}

.historyItem
{
	border-bottom: 0px !important;
}
.historyItem:hover
{
	background-color: var(--hoverBackground);
}
.historyItem[data-type="id"][data-lang="html"]::before{
	content: "#";
}

#clearHistory, #sortBookmarks, #clearBookmarks
{
	font-size:0.9rem;
	height:18px;
	line-height:1em;
	display: none;
	cursor: pointer;
}
#_historySpaceLabel:hover > #clearHistory, 
#historySpaceLabel:hover > #clearHistory,
#_bookmarkSpaceLabel:hover > #sortBookmarks, 
#bookmarkSpaceLabel:hover > #sortBookmarks,
#_bookmarkSpaceLabel:hover > #clearBookmarks, 
#bookmarkSpaceLabel:hover > #clearBookmarks
{
	display: inline;
}
#_historySpaceLabel, #historySpaceLabel
{
	width: calc(100% - 20px);
}




#_outlineWrap
{
	height: var(--outlineHeight);
}





#outlineWrap, #_outlineWrap
{   
	display:flex;
	flex-direction: column;
	
	position: relative;
	cursor: default;  
	user-select: none;
	
	__background-color: var(--stemBackground);
}

#bookmarkSpace, #_bookmarkSpace
{
	flex-shrink: 0;
	max-height:calc(100% - 8rem);
	max-height:40%;
}
#historySpace, #_historySpace
{
	max-height:40%;
	flex-shrink: 0;
}





#outlineWrap.rhs
{
	height:100%;
	float:right;
	border-left: var(--borderWidth) solid var(--mainBorder);
}



.outlineTable
{
	line-height: 1;
	border-top: var(--borderWidth) solid var(--mainBorder);
}
.outline.miniButton
{
	height:20px;
	border-bottom: var(--borderWidth) solid var(--mainBorder);
}



/* #outlineFilter
{
	width:100%;
	background: var(--codeBackground);
	caret-color: var(--caretColor);
} */


#outlineSpace, #_outlineSpace
{
	flex:1;
	_visibility: hidden;
	
	min-height: 50%;
	
	background-color: var(--codeBackground);
	__background-color: var(--panelBackground);
	__background-color: var(--stemBackground);
	__background:#eee;
	color: var(--codeColor);
	font-family: var(--codeFont), monospace;
	
	
	padding-left: 0.3rem;
	padding-left: 0;
	font-size:12px; 
	/* line-height: 1.35rem; 
	line-height: 1.4em;*/
	line-height: 1.6em;
	
	/* TODO: variable? or just something like calc(--codeFontSize * 0.8) */
	
	overflow-y:auto;
	overflow-x:hidden;
	overflow-x:auto;
	
	
	
	/*TODO: experimenting here: https://web.dev/articles/content-visibility */
	content-visibility: auto;
	
	position:relative;
}

#outlineSpace
{
	margin-left:0.3rem; /* so that splitter can be hovered over */
}

.ontry
{
	white-space:nowrap;
	cursor:pointer;
	__filter: grayscale(100%);
	/* color: var(--color) !important; */
	color: var(--color);
	padding-left:5px; /* Note: sometimes gets overridden by indented ontries eg. html ontries */
}

.ontry::before
{
	__background-color:#888 !important;	
}

.ontry:hover
{
	background: var(--hoverBackground);
}

.ontry.active
{
	background: var(--selection);
	background: var(--focusBackground);
}

.ontry.aregion
{
	__font-weight:bold;
	__text-decoration:underline;
}


.ontry.function.camel
{
	color: var(--camelCaseMethod);
}
.ontry.function.title
{
	color: var(--titleCaseMethod);
}
.ontry.function.upper
{
	color: var(--upperCaseMethod);
}
.ontry.aregion
{
	color: var(--comment);
}

.ontry.html
{
	color: var(--classSelector);
	font-weight: var(--classSelectorFW);
	font-style: var(--classSelectorFS);
	
}
.ontry.id
{
	color: var(--idSelector);
	font-weight: var(--idSelectorFW);
	font-style: var(--idSelectorFS);
}
.ontry.cls
{
	color: var(--classSelector);
	font-weight: var(--classSelectorFW);
	font-style: var(--classSelectorFS); 
}

.ontry.cssvar {color: var(--cssVariable);}
.ontry.csstag {}
.ontry.cssid {color: var(--idSelector);}
.ontry.csscls, .ontry.htmlcls {color: var(--classSelector);}



/**/


.preontry
{
	display: none !important;
	font-size:10px;
	font-weight:bold;
	/* width:10px;
	height:10px; */
	__display:inline-block;
	
	border-radius:6px;
	background-color:black;
	color:white;
	/*color:#ccc;  more comfortable for dark mode */
	
	
	margin-right:5px;
	
	padding-left: 3px;
	padding-right:3px;
}

.ontry::before
{
	__display: none !important;
	
	font-size:10px;
	font-weight:bold;
	/* width:10px;
	height:10px; */
	__display:inline-block;
	
	border-radius:6px;
	color:white;
	/*color:#ccc;  more comfortable for dark mode */
	
	
	margin-right:5px;
	
	padding-left: 3px;
	padding-right:3px;
	
	__opacity:0.85;
}

.typeButton,
.typeCheckbox
{
	color: var(--codeColor);
	font-family: var(--codeFont), monospace;
}
.typeButton::before,
.typeCheckbox::before
{
	font-size:10px;
	font-weight:bold;
	
	border-radius:6px;
	color:white; 
	
	padding-left: 3px;
	padding-right:3px;
}
.typeCheckbox
{
	display:block;
}

.__ontry, .ontry::before{
	__filter: grayscale(1);
}

.ontry::before
{
	display:var(--outlineIconsDisplay);
	__background-color: currentColor !important;
	color: var(--codeBackground);
	background-color: var(--color);
	
}
.basketOntry::before
{
	display:var(--basketIconsDisplay);
}

.ontry.var::before,
.ontry.cssvar::before,
.typeButton.var::before
{

	content: 'v';
	__background:violet;
	
}
.ontry.let::before
{
	content: 'l';
	__background:violet;
}
.ontry.const::before
{
	content: 'c';
	__background:violet;
}

.ontry.function::before,
.typeButton.function::before
{
	content: 'f';
	__background:red;
	__background: var(--titleCaseMethod);
	background: var(--color);
}
.ontry.title::before,
.typeButton.title::before
{
	background-color: var(--titleCaseMethod);
}
.ontry.camel::before,
.typeButton.camel::before
{
	background-color: var(--camelCaseMethod);
}
.ontry.upper::before,
.typeButton.upper::before
{
	background-color: var(--upperCaseMethod);
}

.ontry.var::before,
.typeButton.var::before
{
	background-color: var(--color);
}




.ontry.aregion::before,
.typeButton.aregion::before,
.typeCheckbox.aregion::before
{
	content: 'r';
	__background:green;
	background-color:var(--comment);
}

.ontry.class::before,
.typeButton.class::before
{
	content: 'c';
	__background:orange;
	__background-color:var(--classSelector);
	background-color: var(--color);
	background-color: var(--keyword);
}

.ontry.id::before,
.ontry.cssid::before,
.typeButton.id::before
{
	content: '#';
	__background:brown;
	background-color:var(--idSelector);
}
.tname {
	pointer-events:none;
	__color:var(--tagName);
	color: var(--tagSelector);	
}



.ontry.csscls::before,
.ontry.htmlcls::before,
.typeButton.cls::before
{
	content: '.';
	__background:purple;
	background-color:var(--classSelector);
}

.ontry.csstag::before,
.ontry.htmltag::before,
.typeButton.tag::before
{
	content: 't';
	content: '<';
	__background:black;
	background-color: var(--tagSelector);
}

.ontry.cssvar::before,
.typeButton.cssvar::before
{
	background-color:var(--cssVariable);
}

.ontry.markdownHeading::before
{
	content: 'H';
	
}
.ontry.markdownHeading.h1
{
	font-weight:bold;
	text-decoration: underline;
}
.ontry.markdownHeading.h2
{
	font-weight:bold;
}

.__ontry.id
{
	clear:right;
}

.ontryIndent
{
	background: #fec;
}







.ontry.bookmarked
{
	__outline: 1px solid var(--bookmarkBackground);
	background: var(--bookmarkBackground);
}



.functionParams
{
	color: var(--codeColor);
}


.ontry.latexSection::before
{
	content: 'S';
	background-color: var(--sectionColor);
}
.ontry.latexSection
{
	color: var(--sectionColor);
}

.ontry.latexLabel::before
{
	content: 'L';
	background-color: var(--refLabels);
}
.ontry.latexLabel
{
	color: var(--refLabels);
}

.ontry.latexSection[data-type="part"],
.ontry.latexSection[data-type="chapter"],
.ontry.latexSection[data-type="section"]
{
	font-weight:bold;
	text-decoration: underline;
}

.ontry.latexSection[data-type="subsection"]
{
	font-weight:bold;
}

/*#endregion*/


/*#region @@@ BASKET @@@ */



/* #basket.basketTop + #stem */


.scunthorpe:has(> #basket.basketTop)
{
	padding-top: var(--basketHeight);
	
}
.scunthorpe:has(> #basket.basketBottom)
{
	padding-bottom: var(--basketHeight);
}

/* #divWrap.paddTop, #stem.paddTop
{
	padding-top: 32px !important;
} 
#notAnotherWrap.paddTop, #stem.paddTop
{
	__background-color:violet;
	top:30px !important;
}
*/
#icode.paddTop, #stem.paddTop
{
	padding-top: 36px !important;
}


#basket
{
	position:absolute;
	
	width:100%;
	height: var(--basketHeight);
	
	background:#cfe;
	background: var(--codeBackground);
	__box-shadow: 1px 2px 6px var(--mainBorder);
	
	border-bottom:var(--borderWidth) solid var(--mainBorder);
	
	font-size: 12px;
	padding-left:0.5rem;
	padding-top:2px;
	
	color: var(--lineNumberColor);
	
	__background:var(--secondColor);
	__color: var(--codeBackground);
	
	overflow:hidden;
	white-space: nowrap;
	
	user-select: none;
	
	/* padding-right:20px;
	overflow:hidden; */
}
#basket.basketTop
{
	top:0;
}
#basket.basketBottom
{
	bottom:0;
	border-top: var(--borderWidth) solid var(--mainBorder);
	border-bottom:0;
}
#basket.basketTitle
{
	height: env(titlebar-area-height, 32px);
	height:33px;
	padding-top:6px;
}


.dname::before, .fname::before
{
	content: ' \\ ';
	color: var(--lineNumberColor) !important;
	text-decoration: none !important;
}

.dname, .fname
{ 
	cursor: pointer;
}
.dname:hover, .fname:hover
{
	color: var(--color);
	__color:red;
}

.dname.with_menu, .fname.with_menu
{
	__text-decoration: underline;
	color:var(--secondColor);
}
.basketOntry.with_menu
{
	text-decoration: underline;
}




#basketPath
{
	padding-left:0.5em;
	padding-right:0.5em;
	border-right: var(--borderWidth) solid var(--mainBorder);
	border-left: var(--borderWidth) solid var(--mainBorder);
}


#basketOntries, #basketList.hasOntries
{
	color:var(--codeColor);
	background: var(--codeBackground);
	font-family:var(--codeFont), monospace;
	font-size:12px;
}
#basketMenuOntries
{
	background: var(--stemBackground);
}



/*
#basketBook 
{
	__position:absolute;
	__right:6px;
	cursor: pointer;
}

#basketBook::before
{
	content: 'b';
	color: var(--color);
	background: var(--bookmarkBackground);
	outline: var(--borderWidth) solid var(--mainBorder);
}

#basketSearch 
{
	__position:absolute;
	__right:24px;
	cursor: pointer;
}

#basketSearch::before
{
	content: 's';
	color: var(--color);
	background: var(--activeSearchHighlight);
	outline: var(--borderWidth) solid var(--mainBorder);
}
*/

.basketLabel
{
	font-size:0.9rem;
	color: var(--secondColor);
	__border-right: var(--borderWidth) solid var(--mainBorder);
	padding-left:2px;
	padding-right:2px;
	cursor: pointer;
}
.basketLabel:hover
{
	background: var(--hoverBackground);
}

.basketIcon 
{
	vertical-align: top;
	fill: var(--color);
	
}
svg.basketIcon 
{
	width:19px;
	__height:var(basketHeight);
	__fill:none;
	
	padding-left:2px;
	padding-right:2px;
	padding-top:3px;
	padding-bottom:2px;
	
	
	
}
.basketIcon:hover
{
	background: var(--hoverBackground);
}

.basketIcon.rhs
{
	float:right;
}
#basketSearch.rhs {
	margin-right:1.5rem;
}
.hide.rhs#basketSearch + #basketGo.rhs {
	margin-right:1.5rem;
}

.basketIconPath
{
	pointer-events: none;
	stroke: var(--color);
	stroke-width:9;
	__stroke-width:12;
	fill:none;
	__stroke:var(--codeBackground);
}
.basketIconPath.filled
{
	fill: var(--color);
}
.basketIconText, .basketIconText2
{
	font: italic 120px sans-serif;
	fill: var(--color);
}
.basketIconText2
{
	font-size:160px;
}
#basketGo
{
	padding-left:0.2rem;
	padding-right:0.2rem;
}


#basketErrors.gotErrors > g > .basketIconPath
{
	stroke:var(--warningColor);
}

#basketErrors.gotErrors > g > .basketErrorText
{
	display: inline;
}

#basketNumErrors
{
	width:0;
	display:inline-block;
	position:relative;
	font-size:8px;
	top:6px;
	left:-8px;
	color:var(--warningColor);
	__display:none;
}

#basketAi {display: var(--basketAiDisplay);}
#basketWordWrap {display: var(--basketWordWrapDisplay);}
#basketErrors {display: var(--basketErrorsDisplay);}
#basketBookmarks {display: var(--basketBookmarksDisplay);}
#basketHistory {display: var(--basketHistoryDisplay);}
#basketSearch {display: var(--basketSearchDisplay);}
#basketGo {display: var(--basketGoDisplay);}
#basketCommands {display: var(--basketCommandsDisplay);}
#basketInfo {display: var(--basketInfoDisplay);}
#basketBack {display: var(--basketBackDisplay);}
#basketForward {display: var(--basketBackDisplay);}
#basketClock {display: var(--basketClockDisplay);}
#basketPath {display: var(--basketPathDisplay);}

.basketOntry.aregion {display: var(--basketRegionDisplay);}
.basketOntry.class {display: var(--basketClassDisplay);}
.basketOntry.function {display: var(--basketFunctionDisplay);}
.basketOntry.var, .basketOntry.cssvar {display: var(--basketVarDisplay);}
.basketOntry.htmlcls, .basketOntry.csscls {display: var(--basketClsDisplay);}
.basketOntry.id, .basketOntry.htmlid, .basketOntry.cssid {display: var(--basketIdDisplay);}
.basketOntry.htmltag, .basketOntry.csstag {display: var(--basketTagDisplay);}


#basketOntries
{
	position:sticky;
	top:0;
	right:12px;
	
	__padding-left: 1rem;
	__text-align:right;
}
.basketOntry
{
	display:inline;
	padding-left:0.5rem;
	padding-right:0.5rem;
	cursor: pointer;
	

	/*
	TODO: max-width with overflow:hidden messes up the alignment for some reason so not gonna have it.
	max-width:22%;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis; */
	
	__border-left: var(--borderWidth) solid var(--mainBorder);
}
.basketOntry.improper
{
	__opacity:0.5;
	padding-right:0;
}
/* .basketOntry.improper::before {

	content: 'f^' !important;
} */

#basketOptions
{
	position:absolute;
	top:2px;
	right:0px; 
	padding-left:4px;
	padding-right:4px;
	__border-left: var(--borderWidth) solid var(--mainBorder);
	background: var(--codeBackground);
	cursor: pointer;
	color: var(--color);
}
#basketOptions:hover 
{
	background-color: var(--hoverBackground);	
}


#basketMenu
{
	min-width:16rem;
	width: max-content;
	__max-width:80%;
	max-width:40rem;
	max-height: 75vh;   
}
#basketList
{
	max-height: calc(75vh - 2rem);
	overflow-y: auto;
	overflow-x: hidden;
	padding-left:4px;
	padding-left:0;
	__padding-right:4px;
}

#basketList.forFolder
{
	padding-left:4px;
}

#basketHead
{
	__height:2rem;
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	padding-bottom: 0.4rem;
	padding-left: 0.4rem;
}

/* Experimenting with horizontal bookmarks at the top, but not sure it's gonna look right */
/*
#basketMenu
{
	width:100%;
	max-width:400000rem;
}
#basketList
{
	width:100%;
	display:flex;
}
#basketList > .bookmarkItem
{

	flex: 1;
	border-left:2px solid blue;
}
*/


#basketAlphButton
{
	width: 2.2rem;
	height:1.7rem;
	margin-left:-2px;
}
#basketFilter
{
	__width: calc(100% - 2rem - var(--scrollbarSize));
	width: calc(100% - 3rem);
}
#basketAlphButton.hide + #basketFilter
{
	width: calc(100% - 0.6rem);
	
}


#basketClock
{

	__border-left: var(--borderWidth) solid var(--mainBorder);
	__padding-left:2px;
	
}
#basketClock:hover
{
	background-color: var(--hoverBackground);
}

#basketAi.active > g > .basketIconPath
{
	stroke: var(--secondColor);
	__stroke: greenyellow;
	__fill: greenyellow;
}
#basketAi.error.active > g > .basketIconPath
{
	stroke: var(--warningColor);
	__fill: greenyellow;
}
#basketAi > g > .smilePath {display:none;}
#basketAi.active > g > .smilePath {display:inline; !important}
#basketAi.active > g > .frownPath {display:none;}

#basketWordWrap > g > .offPath {}
#basketWordWrap > g > .onPath {display:none;}
#basketWordWrap.on > g > .offPath {display:none;}
#basketWordWrap.on > g > .onPath {display:inline;}


/*#endregion */





/*#region CARROT */
#carrot
{
	pointer-events: none;
	
	position:absolute;
	
	border-right: var(--caretWidth) solid var(--caretColor);
	
	
	transform: scale(1);
	
	transition: var(--carrotTransition);
	
	__animation: solidcarrot 0.5s ease-in-out 0s 1000 alternate;
}

@keyframes solidcarrot {
	0%,20% {opacity: 1; }
	60%,to {opacity: 0.99; }
}

#carrot.insert
{
	border-right:0px;
	border-bottom: 2px solid var(--caretColor);
}
#carrot.flashing
{
	animation: flashingcarrot 0.5s ease-in-out 0s 1000 alternate;
}
@keyframes flashingcarrot {
	0%,20% {opacity: 1; }
	60%,to {opacity: 0; }
}

#carrot.expanding
{
	animation: expandingcarrot 0.5s ease-in-out 0s 1000 alternate;
}
@keyframes expandingcarrot {
	/* 0%,20% {opacity: 1; transform: scale(1);}
	60%,to {opacity: 0; transform: scale(0.5);} */
	
	0%,20% {transform: scale(1, 1);}
	80%,to {transform: scale(1, 0);}
}

/*#endregion*/

/*#region SEARCH BOX */

.searchBox, #goToLineBox
{
	width:36rem; /* should match defaultSearchWidth */
	min-width: 10rem;
	max-width:92%;
	font-size:1rem;
	
	position:absolute;
	__top:-10px;
	top:4px;
	__top:21px;
	
	transition: top 0.2s ease;
	__transition-delay:1s;
	__transition: bottom 0.2s ease;
	
	__left:0;
	right:calc(var(--scrollbarSize) + 12px);
	
	
	
	
	
	
	__background: var(--panelBackground);
	background: var(--menuBackground);
	__background: var(--codeBackground);
	border: var(--borderWidth) solid var(--mainBorder);
	__border-top:0;
	box-shadow: 1px 1px 8px var(--mainBorder);
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	border-radius:4px;
	border-radius:1rem;
	
	
	padding:1px 0 1px 0px;
	
	overflow:hidden;
	
	__opacity:0.85;
	__background-color: transparent;
	__backdrop-filter: blur(6px); /* looks crazy, especially in light mode */
}

.searchBox:is(.topmiddle, .topmiddlelower, .bottommiddle),
#goToLineBox.middle
{
	left: 0;
	right: 0;
	margin: auto;
}

.searchBox:is(.toplower, .topmiddlelower)
{
	top: var(--codeLineHeight);
}


/* 3rd Dec 2024. Not using as have gone back to having a title on the outerMatchBox */
/* 18th Feb 2025. Trying again with a transition delay */
/* 21st Feb 2025. Still too annoying as search box moves when clicking next search to cycle results */
/*
#outerMatchBox:not(.hide) ~ .searchBox:not(.hidden):is(.top, .topmiddle)
{
	top: calc(var(--codeLineHeight) - 2px);
	__top: var(--codeLineHeight);
	border-top: var(--borderWidth) solid var(--mainBorder);
	transition: top 0.3s 0.2s ease;
}
#outerMatchBox.hide ~ .searchBox:not(.hidden):is(.top, .topmiddle)
{
	top: 4px;
	__top: var(--codeLineHeight);
	__border-top: var(--borderWidth) solid var(--mainBorder);
	transition: top 0.3s 0.2s ease;
}
*/


.searchBox.__title
{
	left:0;
	right:auto;
	top:-10px;
	z-index:9999;
}


/*

.searchBox.inTitleBar
{
	display:block !important;
	position: absolute;
	right:auto;
	left:160px;
	top:0 !important;
	border:0;
	border-radius:0;
	height: env(titlebar-area-height, 32px);
	
	box-shadow: none;
	z-index:6999;
}

.searchBox.inTitleBar > #searchSection:has(+ #replaceSection:not(.hide))
{
	width:60%;
	float:left;
	position:relative;
}
.searchBox.inTitleBar > #replaceSection:not(.hide)
{
	width:40%;
	float:left;
	
}

*/




/* #searchSection {
  container-type: inline-size;
  container-name: searchBox;
}

@container searchBox (min-width: 200px) {
  .searchText {
	font-size: 2em;
	background-color:yellow !important;
  }
} */


.basketTop ~ .searchBox,
.basketTop ~ #goToLineBox
{
	margin-top: var(--basketHeight);
}

.searchBox.hidden {

	top: -5.4rem;
}

.searchBox:is(.bottom, .bottommiddle).hidden {

	top: auto;
	bottom: -5.4em;
}



#searchSection,
#replaceSection
{
	width:100%;
	
}

.searchBox:is(.bottom, .bottommiddle), #____goToLineBox.bottom
{
	top:auto;
	bottom: var(--scrollbarSize);
	/* border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:4px;
	border-top-right-radius:4px; */
	border-radius:4px;
}

.basketBottom ~ .searchBox:is(.bottom, .bottommiddle)
{
	bottom: calc(var(--scrollbarSize) + var(--basketHeight));
}


#searchBoxHandle{

	display: none;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:2px;
	background:var(--mainBorder);
	cursor: ew-resize;
	
}


/* #searchInfo2 {
	
	font-size:0.9rem;
	line-height:1em;
	color:var(--secondColor);
	padding-top:3px;
	padding-left:3px;
} */

#searchInfo {

	/*
	position: absolute;
	bottom:-2px;
	margin-left:0.5rem;
	color:var(--secondColor);
	display: inline-block;
	
	vertical-align: middle;
	*/
	
	color:var(--secondColor);
	
	overflow:hidden;
	font-size:0.9rem;
	vertical-align: middle;
	__overflow:hidden;
	white-space:nowrap;
	width:4rem;
	max-width:14%;
	line-height:2em;
	max-height:2.2rem; /* same as miniButton */
	
	padding-top:4px;
	padding-left:3px;
	__outline:1px dotted blue;
	z-index:10;
}
#searchInfo.noresults,
#searchText.noresults
{
  color:var(--warningColor);
}
#searchText.oneresult
{
  color:var(--secondColor);
}

#searchInfo.double {
	line-height: 1rem;
	padding-top:1px;
}



.searchSection,
.replaceSection
{
	display:flex;
}

.searchInput
{
	position:relative;
	flex-grow: 1;
}
#searchText, #_searchText
{
	margin-top:2px;
}
#searchText, #replaceText
{
	padding-right:1rem;
	height:1.8rem;
}
#searchText, #replaceText
{
	padding-right:1rem;
}
#_searchText, #_replaceText
{
	height:1.8rem;
}

#_searchAllButton
{
	margin-top:5px;
	margin-right:4px;
	width:max-content;
}




.searchDiv
{
	width:1.6rem;
	flex-shrink: 0;
	max-width:6%;
	
}
.searchBlock
{
	width:8rem;
	flex-shrink: 0;
	max-width:25%;
	border-left:var(--borderWidth) solid var(--mainBorder);
	border-right:var(--borderWidth) solid var(--mainBorder);
}
.replaceButtons
{
	width:16rem;
	flex-shrink: 0;
	__max-width:25%;
}

#smallerSearchButtons
{
	width:100%;
	position:absolute;
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	top:0px;
	__right:2px;
	display:flex;
}

.smallerSearchButton
{
	__float:left;
	__width:20%;
	
	display:block;
	flex-grow: 1;
	flex-basis: 0;
	text-align: center;
	min-width: 0;
	
	font-size:0.66rem;
	line-height:1.3em;
	border: 0px solid var(--mainBorder);
	padding-left:2px;
	padding-right:2px;
	overflow:hidden;
	
	background-color:transparent !important;
}
.smallerSearchButton:not(.active):hover
{
	background: var(--hoverBackground);
	__cursor:pointer;
}
.smallerSearchButton.active
{
	background: var(--focusBackground) !important;
}
#___searchOptionsButton
{
	/* position:absolute;
	line-height:12px;
	right:4px;
	bottom:2px;
	background-color: var(--panelBackground); */
	position: absolute;
	bottom: -2px;
	right: 2px;
	padding-left: 4px;
	padding-right: 4px;
	line-height: 1.3em;
}
#__searchOptionsButton:hover
{
	background: var(--hoverBackground);
}

#searchHistoryIcon,
#replaceHistoryIcon,
#_searchHistoryIcon,
#_replaceHistoryIcon
{
	position:absolute;
	top:2px;
	right:0;
	padding-right:2px;
	padding-left:2px;
	
	height:25px;
	line-height:22px;
	__background-color: var(--codeBackground);
}
#replaceHistoryIcon, #_replaceHistoryIcon {top:0px;}
#searchHistoryIcon:hover,
#replaceHistoryIcon:hover,
#_searchHistoryIcon:hover,
#_replaceHistoryIcon:hover
{
	background:var(--hoverBackground);
}


#searchHistoryMenu
{
	position: fixed;
	__border:2px solid purple;
	__width: max-content;
	__min-width:200px;
	max-height:75%;
	overflow-y:auto;
}
.searchHistoryItem
{
	position: relative;
	padding-left:4px;
	padding-right:4px;
	font-family:var(--codeFont), monospace;
	font-size:12px;
	line-height:20px;
}
.searchHistoryItem:hover
{
	background-color: var(--hoverBackground);
}
.deleteSearchHistoryItem
{
	display: none;
	position: absolute;
	top: 0;
	right: 2px;
	padding-left: 3px;
	padding-right: 3px;
	background: var(--menuBackground);
	cursor: default;
}
.searchHistoryItem:hover > .deleteSearchHistoryItem
{
	display:block;
}




#firstSearchNum:hover,
#lastSearchNum:hover
{
	background: var(--hoverBackground);
}

.textBox
{
	height:2rem;
	
	__line-height:2.1rem;
	__line-height:1.8em; /* 8th Feb 2025. Removed so that when text box word is selected, the selection isn't as tall */
	__border:0;
	border: 1px solid var(--mainBorder);
	color: var(--color);
	background: var(--codeBackground);
	font-size: var(--fontSize);
	__font-family: var(--uiFont);
	
	__cursor:none;
	
	/*TODO: only have underline when trim_search_terms = true */
	/* text-decoration: underline solid #ddd 2px;
	text-underline-offset: 7px; */
	
	border-radius: 1rem;
	padding-left:0.6rem;
	padding-right:0.6rem;
}
#searchText,
#replaceText,
#_searchText,
#_replaceText
{
	__font-family: var(--codeFont), monospace;
	font-family: var(--searchFont), monospace;
}

.textBox:focus {
	outline:1px solid var(--focusBackground);
}
.textBox {position:relative; top:1px;} 

.searchBox.hideCursor,
.textBox.hideCursor,
#chatTextArea.hideCursor
 { cursor: none !important; }








#searchGroup
{
	display:inline-block;
	
}


.historySelect
{
	font-family: var(--codeFont), monospace;
	line-height:21px; /* makes no difference */
	height:23px;
	width:16px;
	border:0 !important;
	background:var(--codeBackground);
	position:absolute;
	top:0;
	right:0;
	opacity:0.5;
	padding:4px;
}
.historyOption
{
	padding-left:4px;
	padding-right:4px;
}



.miniButton
{

	font-size:0.66rem;
	font-size:1rem;
	
	margin:0 0px;
	padding:0 !important;
	margin-top:1px !important;
	padding-top:1px !important;
	background:transparent !important;
	
	__vertical-align:middle;
	position:relative;
	__top:-1px;
	
	height:2.2rem;
	height:2.0rem;
	border:0;
	border-radius:0;
	
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}
.miniButton:hover
{
	__border-radius:12px;
}

.miniButton
{
	__border-left:var(--borderWidth) solid var(--mainBorder) !important;
	__border-right:var(--borderWidth) solid var(--mainBorder) !important;
}

.toggleBit
{
	width:1.34rem;
}

.miniButton.last
{

	___border-right: var(--borderWidth) solid var(--mainBorder);
}

/* .miniButton,
.smallerSearchButton
{
	max-width:2rem;
} */

button {
	font-size: var(--fontSize);
	font-family: var(--uiFont);
	
	
}


.miniButton.active
{
	background: var(--focusBackground) !important;
}
.miniButton:not(.active):hover
{
	background: var(--hoverBackground);
}

#forwardSearchButton,
#backwardsSearchButton,
#__goToLineButton
{
	background:transparent !important;
	border:0;
	__vertical-align:middle;
	font-size:1.33rem;
	
}
#closeSearchButton, .closeSearchButton {

	font-size:1rem;
	background:transparent !important;
	
}
#forwardSearchButton:hover,
#backwardsSearchButton:hover,
#closeSearchButton:hover,
.closeSearchButton:hover
{
	background: var(--hoverBackground) !important;
}

#listSearchResults { font-size:1.33rem; } 
#searchOptionsButton { font-size:1.2rem; } 


.toggleButton {

	font-size:0.83rem;
	/* width:12px;
	padding-left:0;
	padding-right:0;
	margin:0; */
	margin-left:2px;
	
	border:0;
	opacity:0.5;
}
#_toggleReplaceButton
{
	margin-left:0;
}
.replaceSection {

	margin-top:1px;
	padding-top:1px;
	__border-top: 1px dashed var(--mainBorder);
	padding-bottom:4px;
	
}
.replaceButton,
#_previewReplaceButton
{
	flex-shrink: 0;
	font-size: 0.83rem;
	padding:2x 4px;
	margin-right: 0.3rem;
	margin-top:2px;
	max-width:30%;
	
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}
#_previewReplaceButton
{
	max-width:50%;
}


#preserveCaseButton,
#_preserveCaseButton
{
	margin-left:2px;
	flex-shrink: 0;
	font-size: 0.83rem;
	width: max-content;
	height:1.75rem;
	line-height: 1.75rem;
}


#___closeSearchButton, .___closeSearchButton, #___closeGoToLineButton
{
	float:right;
	__padding:3px 6px;
	border:0 !important;
	__text-align:right !important;
	background:transparent;
}



#searchFilterButton[data-filter] > #filterIcon
{
	border: 1px solid var(--warningColor);
	border-radius:4px;
	
}
#searchFilterButton
{
	padding-top:2px !important;
	__padding-bottom:8px !important;
}

#searchFilterButton > #filterIcon
{
	width:17px;
}

#filterDiv
{
	display: var(--filterButtonDisplay);
}
#listDiv
{
	display: var(--listButtonDisplay);
}
#regexDiv
{
	display: var(--regexButtonDisplay);
}


#__caseButton,
#__backwardsSearchButton,
#__searchFilterButton,
#closeSearchDiv
{
	__border-left: 1px solid var(--mainBorder);
}






/* GoTO Box */





#goToLineBox {

	width:30rem;
	height:2.25rem;
	
	/* top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto; */
}



#goToText {

	width:16.5rem;
	padding-right:0;
	margin-left:4px;
	font-family: var(--codeFont), monospace;
}


#goToLineButton,
#goToFirstLineButton,
#goToLastLineButton
{
	position:relative;
	top:2px;
}


#autoGoToButton
{
	width:2rem;
	border-right: var(--borderWidth) solid var(--mainBorder);
}



#goToLineBox.farout 
{
	top:3rem;
}
#goToLineBox.bottom.farout {

	top: auto;
	bottom: 3rem;
}

#goToLineBox.farfarout 
{
	top:5.35rem;
}
#goToLineBox.bottom.farfarout {

	top: auto;
	bottom: 5.35rem;
}


#goToLineBox.hidden {

	__display:none;
	top: -5rem;
}

#goToLineBox.bottom.hidden {

	top: auto;
	bottom: -3em;
}


/*#endregion*/






/*#region @@@@ BOXES @@@@ */


#spellingSuggestionList
{
	max-height:12em;
	overflow-y:auto;
}

.menuItem.spellingSug, .menuItem#addToDictionary {
	__color:red;
}


#suggestionBox, #peekBox, #emmetBox, #bookmarkBox, #pasteBox, #historyBox, #unicodeBox, #renameBox, #macroBox
{
	position:fixed;
	background-color:var(--menuBackground);
	border:var(--borderWidth) solid var(--mainBorder);
	box-shadow: 1px 2px 6px var(--mainBorder);
	user-select:none;
	/* max-height:150px; */
	
	
	
	__padding-right: var(--resizerWidth2);
	padding-bottom: var(--resizerWidth2);
	
	border-radius: 3px;
	overflow:hidden;
	
	__outline:1px dotted orange;
	
	z-index:20;
	___z-index:999999;
	
}
#suggestionBox, #bookmarkBox, #pasteBox, #historyBox, #renameBox, #macroBox
{
	__width:var(--suggestionsWidth);
	__width: max-content;
	min-width:150px;
	max-width:80%; /* this is % width of scunthorpe */
	z-index:9999;
}



#suggestionList, #bookmarkList
{
	overflow-y:auto;
	overflow-x:hidden; /*TODO: ellipsis if overflowing? */
	max-height:calc(var(--codeLineHeight) * var(--numSuggestions));
}

#suggestionList, #peekBox, #bookmarkList
{
	font-family: var(--codeFont), monospace;
	color:var(--codeColor);
	font-size: var(--codeFontSize);
	line-height: var(--codeLineHeight);
	
}

.suggHi
{
	__color:var(--secondColor);
	__font-weight:bold;
	__text-decoration:underline;
	__background-color: var(--hoverBackground);
}

#peekBox
{
	white-space:pre;
}
#pasteList
{
	max-height: 40vh;
	overflow-y: auto;
	overflow-x:auto;
}


#emmetBox
{
	border-color:red;
}

#bookmarkList, #pasteList
{
	white-space: nowrap;
}
.bookmarkItem, .pasteItem, .historyItem
{
	position:relative;
	border-bottom:1px dashed var(--mainBorder);
	color:var(--codeColor);
	background: var(--codeBackground);
	__background: var(--panelBackground);
	font-family:var(--codeFont), monospace;
	font-size:12px;
	line-height:20px;
	/* height:18px;  */
	
	
	
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	
	cursor: pointer;
}
.deleteBookmark, .addBookmarkAbbr, .deletePasteItem, .deleteHistoryItem
{
	display:none;
	position: absolute;
	top:0;
	right:2px;
	padding-left: 3px;
	padding-right: 3px;
	background: var(--menuBackground);
	cursor: default;
}
.addBookmarkAbbr
{
  right:auto;
  left:0px;
  top:2px;
  __background:yellow;
  padding-left:1px;
  padding-right:1px;  
}
.lineNumber[data-bookmarkabbr]::before,
#outerLineNumber[data-bookmarkabbr]::before
{
  content: attr(data-bookmarkabbr);
  position: absolute;
  left:2px;
  right:auto;
  top:3px;
}
.addBookmarkAbbr.isAbbr,
.lineNumber[data-bookmarkabbr]::before,
#outerLineNumber[data-bookmarkabbr]::before
{
	display:block;
	background-color:var(--codeBackground);
	color: var(--codeColor);
	font-weight: normal;
	__font-style: italic;
	border: 1px solid var(--codeColor);
	line-height:1em;
	border-radius:2px;
}


.bookmarkItem:hover > .deleteBookmark,
.bookmarkItem:hover > .addBookmarkAbbr,
.pasteItem:hover > .deletePasteItem,
.historyItem:hover > .deleteHistoryItem
{
	display: block;
}
.bookmarkItem.active,
.historyItem.active,
.pasteItem.active
{
	background:var(--focusBackground);   
}

.refLineNumber {
	__background-color: var(--stemBackground);
}

.refLineNumber[data-refIndex]
{
	margin-left:6px;
}

.refLineNumber[data-refIndex]::before
{
	display: inline-block;
	position:absolute;
	left:0px;
	top:5px;
	
	content: attr(data-refIndex);
	color:white;
	__background-color: var(--bookmarkBackground);
	background-color: blue;
	font-size:8px;
	height:10px;
	width:10px;
	line-height:10px;
	border-radius: 5px;
	text-align: center;
}

.pasteItem
{
	white-space: pre;
	max-height: calc(3 * var(--codeLineHeight));
}

.peekTypeButton.pbactive {
	
	background-color:yellow;
}


/* #suggestionBox, #peekBox {

	max-height:calc(var(--codeLineHeight) * 10);
} */

.suggestion, .emmet, .__bookmarkItem
{
	width:max-content;
	min-width:100%;
	padding: 0px 5px;	
}
.bookmarkItem
{
	padding: 0px 1px;
	padding-left:4px;	
}

 .suggestion.active
{
	background:var(--focusBackground);
} 
.suggestion:not(.active):hover, .bookmarkItem:not(.active):hover, .pasteItem:not(.active):hover
{
	background:var(--hoverBackground);
}
.suggestion.firstLineSug
{
	border-top:1px dashed var(--mainBorder);
}
.suggestion.snippet
{
	/* background-color:yellow; */
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	__white-space: pre;
}



#sugSideResizer
{
	top: 0px;
	right: calc(0px - var(--resizerWidth2));
	width: calc(var(--resizerWidth2) * 2);
	
	height: 100%;
	position: absolute;
	
	background-color: transparent;
	__opacity:0.5
}
#sugSideResizer:hover
{
	cursor: ew-resize;
}

#sugBottomResizer
{
	left: 0px;
	bottom: calc(0px - var(--resizerWidth2));
	height: calc(var(--resizerWidth2) * 2);
	
	width: 100%;
	position: absolute;
	
	background-color: transparent;
}
#sugBottomResizer:hover
{
	cursor: ns-resize;
}



.emmet {
	background-color: skyblue;
}
pre#emmetPreview {
	tab-size: var(--tabSize);
	margin:6px;
}

#fileOutlineBox, #refOutlineBox
{
	font-size:1rem;
	/* font-family: var(--uiFont); */
	position:absolute;
	top:0px;
	__right:24px;
	left:0px;
	background: var(--menuBackground);
	box-shadow: 1px 2px 6px #777; 
	padding:0px 3px 1px 3px;
	
}
#fileOutline {
	max-width:140px;
}
#fileOutline > option.bold {
	font-weight:bold;
}
#goToText {
	__max-width:240px;
}

#refOutlineBox {

	max-width:340px;
	left: auto;
	right:44px;
}



#statusBox {
	position:absolute;
	top:unset;
	bottom:var(--scrollbarSize);
	padding: 1rem;
	width:24rem;
}

#tabsSpacesStatusSelect, #crlfStatusSelect {

}


#unicodeBox
{
	padding:1rem;
	width:40rem;
	max-width:100%;
	height:20rem;
	cursor:auto;
	user-select:auto;
}
#unicodeInput
{
	width:60%;
}
#unicodeTableWrap
{
	height: calc(100% - 4.5rem);
	overflow:auto;
}
#unicodeTable {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	cursor:text;
	user-select:text;
	
	/* table-layout: fixed; */
}
.unicodeTh {text-align: left;}
.insertUnicodeButton {__visibility: hidden; margin-left:0.2em;}
.unicodeRow:hover > td > .insertUnicodeButton {visibility: visible;}

.charBit
{
	display:inline-block;
	width:2rem;
}

#previousUnicodeChars
{
	padding-top:0.5rem;
	border-top: var(--borderWidth) solid var(--mainBorder);
}
.prevUnicodeChar
{
	width:1.5rem;
	text-align: center;
}
.prevUnicodeChar:hover
{
	background: var(--hoverBackground);
}





#renameBox
{
	padding:1rem;
	width:30rem;
	max-width:100%;
	__height:20rem;
	cursor:move;
	user-select:auto;
}
#renameInput
{
	margin-bottom:1rem;
	width: calc(100% - 2rem);
	font-family: var(--codeFont), monospace;
	padding-left:0.5rem;
}
#renameInput:invalid {
  __background-color: lightpink;
  border-color: var(--warningColor);
}
#renamePreview
{
	margin-top:1rem;
	max-height: 15rem;
	overflow:auto;
	white-space: pre;
	__border: 1px solid var(--mainBorder);
	cursor: default;
}
.renameItems
{
	white-space: pre !important;
	font-family: var(--codeFont), monospace;
	__margin-bottom:0.75rem;
	

	
}
.renameHead, .renameItem
{
	position: relative;
	border: 1px solid var(--mainBorder)
}
.renameHead
{
	
	padding-left: 0.5rem;	
}
#renameAi {cursor: default;}

.renameItem{border-top:0;}
.renameItem:first-child {border-top:0;}

.renameDismissButton,
.renameDismissButton2
{
	display:none;
}
.renameHead:hover > .renameDismissButton,
.renameItem:hover > .renameDismissButton2
{
	display: inline;
}

#renameSuggestions
{
	
	border: 1px solid var(--mainBorder);
	max-height:10rem;
	overflow: auto; 
	margin-bottom:1rem;
	padding-left:0.35rem;
	cursor: default;
}
#renameSuggestions.active
{
	font-family: var(--codeFont), monospace;
	padding-left:0;
}
.renameSuggestion
{
	padding-left:0.35rem;
}
.renameSuggestion:hover
{
	background-color: var(--hoverBackground);
	
}

[data-renamecandidate90315]
{
	__outline:2px solid blueviolet;
	__background-color: var(--selection2);
	background: var(--sameWordHighlight);
	border-radius:3px;
	__outline:2px solid var(--sameWordHighlight);
	outline:var(--borderWidth) solid var(--secondColor);
}


#viewSwitcher
{
	/* display:none; */
	position:absolute;
	top:8px;	
	right:calc(var(--scrollbarSize) + 6px);
	font-size:12px;
	width:50px;
	
	box-shadow: 1px 1px 8px var(--mainBorder);	
}

#texCompileButton
{
	/* display:none; */
	position:absolute;
	top:8px;	
	right:calc(var(--scrollbarSize) + 6px);
	font-size:12px;

	
	box-shadow: 1px 1px 8px var(--mainBorder);	
}

/* MACRO BOX */

#macroBox
{
	padding:1rem;
	width:22rem;
	max-width:100%;
	__height:20rem;
	cursor:move;
	user-select:auto;
}

#macroButton
{
	width:6rem;
}

#closeMacroBox
{
	position: absolute;
	top:0.5rem;
	right:0.5rem;
	cursor: default;
}

#replayMacro
{
	width: 6rem;
}

#replayMacroNum
{
	width:4.5rem;
}

#selectMacro
{
	width:12rem;
}

/*#endregion*/



/*#region SECOND WINDOW */

.secondWindow
{
	float: left;
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	__border-left: var(--borderWidth) solid var(--mainBorder);
}
.secondWindow.dockRight
{
	border-left: var(--borderWidth) solid var(--mainBorder);
}

.secondHead
{
	overflow:hidden;
	
	height:var(--secondHeadHeight);
	__background-color: var(--stemBackground);
	background-color: var(--headBackground);
	__background-color: var(--codeBackground);
	border-top: var(--borderWidth) solid var(--mainBorder);
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	__border:1px solid var(--secondColor);
}
.secondHead.dockRight
{
	__border-top-width:0;
}

#peekOnly, #extraSecondHeadStuff
{
	/* float:left;
	width:max-content; */
	
	background-color: var(--headBackground);
	__background-color: var(--codeBackground);
} 

#peekOnly
{
	height:var(--secondHeadHeight);
	display:flex;
}

#peekTab
{
	__margin-left:0.3em;
	background-color: var(--codeBackground);
	__background-color: transparent;
	float:left;
	display:inline-block;
	height: var(--secondHeadHeight);
	line-height: calc(var(--secondHeadHeight) - 2px);
	__width:max-content;
	border-right: var(--borderWidth) solid var(--mainBorder);
	text-align: center;
	width:200px;
	max-width:50%;
}

#peekTab > .saveMarker
{
	top:0.2em;
}
#peekTabText
{
	__margin-left:0.5rem;
	background-color: var(--codeBackground);
	__background-color: transparent;
}

#peekTab.distant
{
	__background-color: yellow;
	__color: var(--secondColor);
}


#peekGoToButton,
#peekSplitButton,
#peekSplitWindowButton
{
	__float:left;
	margin-left:0.6rem;
	margin-top:7px;
}


#dockButton, #closeSecondWindow
{
	__float:right;
	background-color: var(--headBackground) !important;
}
#dockButton
{
	position: absolute;
	right: 24px;
	top: 4px;
	height: 1.8rem;
	padding-left:3px;
	padding-right:3px;
	
}

.editor2
{
	background-color: var(--peekBackground);
	__background-color: var(--codeBackground);
}

#peekRefCode, #peekRefList
{
	position:relative;
	float:left;
	height:100%;
	overflow-y:auto;
}
#peekRefList
{
	display:flex;
	flex-direction: column;
	
	position:relative;
	background-color: var(--codeBackground);
	__border-left: var(--borderWidth) solid var(--mainBorder);
	overflow-y:hidden;
}
.innerRefList
{
	overflow-y:auto;
	__height: calc(100% - 4.2rem);
	__height: calc(100% - 6.2rem);
	overflow-x:auto;
	max-width:1000px;
	border-top: var(--borderWidth) solid var(--mainBorder);
}

#peekSelect
{
	width: 100%;
	font-family: var(--uiFont), sans-serif;
	__font-size: 1rem;
	color: var(--color);
	background: var(--codeBackground);
	border:var(--borderWidth) solid var(--mainBorder);
	border-radius:2px;
	min-height:2rem;
}
#peekTypeButtons
{
	border-top: var(--borderWidth) solid var(--mainBorder);
	border-bottom: var(--borderWidth) solid var(--mainBorder);
}

.secondData
{
	overflow: auto;
	
	position:relative;
	height:calc(100% - var(--secondHeadHeight));
	width:100%;
	
	__float:left; /* only need this if .scunthorpe has float:left */
	__overflow-x:auto;
	
	/* https://gist.github.com/dfrankland/f6fed3e3ccc42e3de482b324126f9542 */
	
	/*
	background: repeating-conic-gradient(#CCC 0% 25%, transparent 0% 50%) 50% / 20px 20px;
	background: repeating-conic-gradient(#CCC 0% 25%, #eee 0% 50%) 50% / 20px 20px;
	__background: repeating-conic-gradient(#333 0% 25%, #555 0% 50%) 50% / 20px 20px;
	*/
	
	
	/*TODO: has artefacts so look for better soln */
	__background-image:
	  linear-gradient(45deg, #ccc 25%, transparent 25%), 
	  linear-gradient(135deg, #ccc 25%, transparent 25%),
	  linear-gradient(45deg, transparent 75%, #ccc 75%),
	  linear-gradient(135deg, transparent 75%, #ccc 75%);
	background-size:25px 25px; /* Must be a square */
	background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
	
	
}

.secondData:has(> #mySvg), 
.secondData:has(> #mySvgWrap) 
{height:100%;}

.secondData > img,
.secondData > video
{
	display:block; /* default for images is inline which has padding on bottom */
	
	/* https://stackoverflow.com/questions/72880939/how-to-fit-image-to-parent-div-with-scaling-and-without-stretching */
	object-fit: contain;
	width:100%;
	height:100%;
	__height: calc(100% - var(--secondHeadHeight));
	position:relative;
	
	
	
	__border:1px solid red;
}

.secondData > iframe,
.secondData > embed
{
	width:100%;
	height:100%;
	border:0;
}

/*#endregion*/

/*#region @@@@ SVG PREVIEW @@@@ */


/* @@@ TOP BAR */


#svgTopBar
{
	position: absolute;
	top: 0;
	left: calc(50% - 200px);
	width: 100%;

	width: max-content;
	background-color: var(--codeBackground);
	background-color: var(--headBackground);

	box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
	__box-shadow: 1px 2px 6px var(--mainBorder);
}

.svgTopBarText
{
	font-size:12px;
	line-height:3em;
	padding-right:0.2rem;
	
}

#svgDrawingTools /* like .head class */
{
	display:flex;
	flex-direction: row;
	
	position:relative;
	width:auto;
	
	overflow-y:hidden;
	overflow-x:hidden;
	height: var(--sideHeadHeight);
	__height:40px;
	
	background-color: var(--headBackground);
	__background-color: transparent;
	user-select:none;
	width: max-content;
	float:left;
	margin-right:2rem;
}
#svgStyleMenu
{
	position:absolute;
	
	/* right:0;
	width:120px;
	height:100%; */
	
	display:flex;
	flex-direction: row;
	bottom:0;
	width:100%;
	height:40px;
	
	
	background-color: var(--headBackground);
	
	
	
	
	
	
	__background-color: beige;
	__height: var(--sideHeadHeight);
	__height:40px;
	__background-color: var(--headBackground);
	__background-color: transparent;
	border-left: 1px solid var(--mainBorder);
	user-select:none;
	__width: max-content;
	float:left;
}
#strokeWidthInput {width:38px;}

#classTextbox, #fillInput, #strokeInput, #strokeWidthInput, #fontFamilyInput, #fontSizeInput {
	height:19px;
}

#fillCheckbox, #classCheckbox, #strokeCheckbox, #textCheckbox {display:none;}

#fillColorBox, #strokeColorBox {
	
	border: var(--borderWidth) solid var(--mainBorder);
	background-color: transparent;
	display:inline-block;
	width:16px;
	height:18px;
	position:relative;
	top:0px;
}
#fillInput, #strokeInput {
	
	width:75px;
	font-size:12px;
}
#strokeWidthInput, #fontSizeInput {
	
	width:40px;
	font-size:12px;
}

#fontFamilyInput, #fontSizeInput {
	
	font-size: 12px;
}


#boldButton, #italicButton, #underlineButton
{
	width:12px;
	height:18px;
	font-size:12px;
	line-height:12px;
}

.drawingIcon.active {
    
    background-color: var(--focusBackground);
    background-color: var(--secondColor);
    
}
.drawingIcon.active > .iconPath
{
	stroke:white;
}

.drawingIcon:not(.active):hover
{
    background-color: var(--hoverBackground);
}

.drawingIcon
{
    fill: var(--color);
    __border: 1px solid var(--color);
    __margin:2px;
    
    padding-left:1px;
    padding-right:1px;
    padding-top:9px;
    padding-bottom:9px;
    
    width:28px;
    __width:100%;
    max-width:28px;
    __height:34px;
    height: var(--sideHeadHeight);
    height:34px;
    __height: calc(var(--sideHeadHeight) - 4px);
    display:block;
    /* flex-grow: 1;
    flex-basis: 0;
    text-align: center; */
}
#pathSelect {
	
	display:none;
	width:2.5rem;
	height:1.2rem;
	margin-top:0.75rem;
	margin-left:0.2rem;
	background-color: transparent;
	__border:0;

} 
#pathIcon.active + #pathSelect { display: inline; } 

#imageIcon
{
	padding:0;
}
#svgImagePreview
{
	pointer-events: none;	
}


.svgTopBox {
	margin-top:-2px;
	border-left: 1px solid var(--mainBorder);
	font-size:12px;
	line-height:15px;	
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 4px;
	padding-right: 2px;
}

#classTextbox {width:80px;}
#fontFamilyInput {width: 80px;}



/* MAIN */

#mySvgWrap
{
	caret-color: transparent;
}

#mySvg
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: default;
	caret-color: red !important;
	__background-color: #fec;
	__background: repeating-conic-gradient(#CCC 0% 25%, #eee 0% 50%) 50% / 20px 20px;
}
#mySvg.panning
{
	__cursor:move;
}

#gridPath {stroke:purple;}

#crossHairCircle
{
	fill:none;
	stroke-width:1;
	stroke:red;	
	vector-effect: non-scaling-stroke;
}


#rotator
{
	position:fixed;
	width:16px;
	height:16px;
	font-size:10px;
	line-height:16px;
	border-radius:8px;
	text-align:center;
	
	border:1px solid red;
	
	background:cyan;
	color:purple;
}
#htmlCrossHair
{
	pointer-events: none;
	position:absolute;
	width:10px;
	height:10px;
	border-radius:5px;
	translate: -5px -5px;
	
	border:1px solid red;

}
#vguide
{
	pointer-events: none;
	position:absolute;
	top:0;
	height:100%;
	border-left: 1px dashed blue;
	width:0px;
}
#vguide.snapped {border-left-color: red;}

#hguide
{
	pointer-events: none;
	position:absolute;
	left:0;
	width:100%;
	border-top: 1px dashed blue;
	height:0px;
}
#hguide.snapped {border-top-color: red;}

#mySvg[data-drawingmode="path"],
#mySvg[data-drawingmode="freehand"],
#mySvg[data-drawingmode="image"],
#mySvg[data-drawingmode="rect"],
#mySvg[data-drawingmode="circle"]
{
	cursor:crossHair;
	__cursor:none;
}
#mySvg[data-drawingmode="text"]
{
	/* cursor: copy; */
	cursor: text;
}

#recticle
{
	position:fixed;
	border:2px solid red;
	pointer-events:none;
}


#rotateBit, #moveBit
{
	stroke-width:1;
	stroke:white;
	fill: rgba(0,0,255,0.2);
	fill:orange;
	
	
	vector-effect: non-scaling-stroke;
}
#rotateBit {fill:brown;}
#moveBit {cursor: move;}

#rotateBit:hover,
#moveBit:hover
{
	fill:red;
}

:is(path,rect,line,polygon,circle,ellipse,use,image).svgFlashActive
{
	__fill:blue !important;
	__filter: brightness(2.25);
	__outline:10px dashed blue;
	stroke: blue;
	fill:blue;
	outline:1px dashed blue;
	
	animation-name: fadeOutline;
	animation-duration: 6s;
	__animation-delay: 5s;
	animation-fill-mode: forwards;
}

@keyframes __fadeOutline {
	from { outline-color: var(--lineFlashColor); } 
	to { outline-color: transparent; }
}


foreignObject {
	
	outline:2px dashed pink;
	/* stroke-width:1;
	stroke:green;
	fill:red; */
	
	
}
foreignObject > div[contenteditable="true"]
{
	cursor:text;
	font-size: unset;
}
foreignObject > div[contenteditable="true"]:focus
{
	__outline:none;
}

/* @@@ TRANSFORM RECT */


#transformPath
{
	display:none;
	pointer-events: none;
	stroke:white;
	stroke-width:1;
	fill:none;
	vector-effect: non-scaling-stroke;
	__filter: drop-shadow(0px 0px 0.5px black);
}
#transformPath2
{
	__display:none;
	pointer-events: none;
	stroke:orange;
	stroke-width:1;
	__stroke-dasharray: 3 2;
	__fill:rgba(0,0,255,0.2);
	fill:none;
	vector-effect: non-scaling-stroke;
	__animation: dash 0.25s linear infinite;
	
}
[data-nodename="g"] > #transformPath2
{
	stroke:red;
	stroke-width:1;
	stroke-dasharray: 3 2;
}

.handle,
.handle2
{
	stroke-linecap:round;
	
	fill:none;
	vector-effect: non-scaling-stroke;
}
.handle0 {stroke: black; stroke-width: calc(var(--svgHandleWidth) + 2);}
.handle {stroke: white; stroke-width: var(--svgHandleWidth);}
.handle2 {stroke: orange; stroke-width: calc(var(--svgHandleWidth) - 2); pointer-events:none;}
.handle:hover + .handle2 {stroke: red;}
/* .handle:hover > .handle2 {stroke:orange; stroke-width:12;} */

#__nwHandle2 {stroke:green;}
#__neHandle2 {stroke:blue;}



@keyframes dash {
  to {
	stroke-dashoffset: 4;
  }
}


#transformHandle,
#transformHandle2
{
	/* stroke-width:14; */
	stroke:magenta;
	stroke-linecap:square;
	
	fill:none;
	vector-effect: non-scaling-stroke;
}
#transformHandle:hover
{
	stroke:cyan;
}
#transformHandle2
{
	stroke:red;
}

.outerPathHandle
{
	__pointer-events: none;
	
	stroke:blue;
	stroke-linecap:round;
	stroke-width: var(--svgHandleWidth);
	
	fill:none;
	vector-effect: non-scaling-stroke;
}
.innerPathHandle
{
	__pointer-events: none;
	
	stroke:white;
	stroke-linecap:round;
	stroke-width: calc(var(--svgHandleWidth) - 2);
	
	fill:none;
	vector-effect: non-scaling-stroke;
	
}
.innerPathHandle.start {stroke: greenyellow;}
.innerPathHandle.second {stroke: orange;}
.innerPathHandle.finish {stroke: red;}

.innerPathHandle.move {stroke: #E0B0FF;} /* mauve! */
.innerPathHandle:hover, .outerPathHandle:hover + .innerPathHandle {stroke:cyan;}






.outerControlPoint
{
	stroke:blue;
	stroke-linecap:square;
	stroke-width: calc(var(--svgHandleWidth) - 4);
	
	fill:none;
	vector-effect: non-scaling-stroke;
}
.innerControlPoint
{
	stroke:#ddd;
	stroke-linecap:square;
	stroke-width: calc(var(--svgHandleWidth) - 5);
	
	fill:none;
	vector-effect: non-scaling-stroke;
}
.innerControlPoint:hover, .outerControlPoint:hover + .innerControlPoint {stroke:cyan;}

.controlLine
{	
	pointer-events: none;
	stroke:orange;
	stroke-width: 1;
	fill:none;
	vector-effect: non-scaling-stroke;
}

#editNodes.drawing > :is(.outerPathHandle, .innerPathHandle, .outerControlPoint, .innerControlPoint, .controlLine)
{
	stroke-opacity: 0.4;
}

#editNodes.drawing > :is(.outerPathHandle, .innerPathHandle).finish {display:none;}

/* @@@ PATH OUTLINE */


#svgHoverNode {
	
	pointer-events: none !important;
	
	stroke-width:1 !important;
	stroke:cyan !important;
	fill:none !important;
	
	vector-effect: non-scaling-stroke !important;
	
}
#svgDrawingNode {
	
	pointer-events: none !important;
	
	stroke-width:1 !important;
	stroke:red !important;
	fill:none !important;
	
	vector-effect: non-scaling-stroke !important;
	
}

/*
hoverNode.style.setProperty('stroke-width', '1', 'important')
hoverNode.style.setProperty('vector-effect', 'non-scaling-stroke', 'important')

hoverNode.style.setProperty('stroke', 'cyan', 'important')
hoverNode.style.setProperty('fill', 'none', 'important')
hoverNode.style.setProperty('pointer-events', 'none', 'important')

*/



#outlinePath
{
	pointer-events: none;
	stroke:white;
	stroke-opacity:0.5;
	stroke-width:.75;
	fill:none;
	__vector-effect: non-scaling-stroke;
	paint-order: stroke;
}
#outlinePath2
{
	pointer-events: none;
	stroke:blue;
	stroke-width:.75;
	stroke-dasharray: 3 2;
	stroke-opacity:0.5;

	fill:none;

	__vector-effect: non-scaling-stroke;
	paint-order: stroke;
}

#hoverNode
{
	
}

.vanillasegment
{
	__display:none;
	stroke:transparent !important;
	stroke-width:6 !important;
	fill:none !important;
	vector-effect: non-scaling-stroke !important;

}
.vanillasegment:hover
{
	__display:inline;
	__stroke-width:1 !important;
	stroke:orange !important;
	stroke-opacity:0.6 !important;
}


/* @@@ GUIDES */


.drawingNode
{
	stroke:black;
	stroke-width:1;
	fill:none;
}


#viewportRect
{
	__fill:none;
	stroke:purple;
	stroke-width:4;
	stroke-opacity:0.2;
	__stroke-dasharray: 1 1;
	vector-effect: non-scaling-stroke;
}


.svg_vline, .svg_hline
{
	pointer-events: none;
	stroke:#999;
	stroke-width:0.1%;
}

.clickPointData
{
	margin-left:1em;
	color:red;
}

text:hover
{
	__stroke:orange;
}

/* @@@ PATH INSERT MARKER */

/* .lineNumber[data-num="18"]:after
{
	content: '\2192';
	position:absolute;
	right:0;
	bottom:-5px;
	color:red;
	background-color: white;
	font-size:1.2em;
	line-height: 0.75em;
	border:1px solid red;
	border-radius: 3px;
} */

.__line[data-num="18"]:after
{
	position:absolute;
	bottom:0;
	left:0;
	content: ' ';
	width:100%;
	height:1px;
	border-bottom: 1px dashed red;
}


#svgTextModal {
	
	position:fixed;
	cursor:move;
	width: max-content;
	padding:1rem;
	
}
#svgTextArea {
	
	width: 300px;
	height:100px;
	margin-top:1.5rem;
	/* margin-left:0.5rem;
	margin-right:0.5rem; */

}
#svgLineHeightInput {
	
	width:48px;
	
}
#closeSvgTextModal {
	
	cursor: default;
}


/*#endregion*/


/*#region @@@@ RANDOM @@@@ */


#statusBar {

	__display:none;
	opacity:1;
	position:absolute;
	bottom:0px;
	
	left: 0;
	
	height:var(--scrollbarSize);
	font-size:0.9rem;
	
	background:var(--stemBackground);
	color: var(--color);

	

	cursor:pointer;
}
#statusBar.seethru {
	opacity:0;
}
#statusBar:hover {
	opacity:1;
	background:var(--hoverBackground);
}


#infoMenu
{
	width: max-content;
	width:16rem;
}
.infoMenuItem
{
	color: var(--secondColor);
	__font-weight:bold;
}



.mdtable
{
	width: 100%;
	border-collapse: collapse;
	border-spacing:0;
	
	__table-layout: fixed;
}
.mdtable td
{
	border: 1px solid black;
}
/* @ CSV */
.csvTable
{
	width: 100%;
	border-collapse: collapse;
	border-spacing:0;
	__line-height: 1.7;
	
	table-layout: fixed;
	
	__content-visibility: auto;
	__contain-intrinsic-height: 1000rem;
	
	__cursor: default;
	user-select: text;
}
.csvCell::selection,
.csvInner::selection,
.resizeCol::selection
{
  __color:inherit;
  __background-color: transparent;
}
.csvCell
{
	text-align:left;
	__border: 1px solid black;
	box-shadow: 0px 0px 0px 0.5px var(--mainBorder) inset;
	__width:10%;
	 white-space: nowrap;
	overflow:hidden;
	/*text-overflow: ellipsis; */
	padding:0 0.2em;
	__max-width:100px;
	
	line-height: var(--codeLineHeight);

}
/* .csvRow:nth-of-type(2n) */
.csvRow
{
  background-color: var(--codeBackground);
}



th.csvCell
{
  position: sticky;
  top: 0;
  background-color: var(--panelBackground);
}
.filterIcon
{
  display:none;
  position:absolute;
  right:8px;
  padding:4px;
  background-color: var(--panelBackground);
}
th.csvCell:hover > .filterIcon
{
  display:block;
}
.filterIcon:hover
{
  background-color: var(--hoverBackground);
}
.filterIconPath
{
  pointer-events: none;
}
.filterColumn > .filterIcon
{
  display:block;
}
.filterColumn > .filterIcon > .filterIconPath
{
  fill:orange;
}
.resizeCol
{
  background-color:#FAA9;
  display:inline-block;
  position:absolute;
  right:-2px;
  width:12px;
  cursor: ew-resize;
}


.csvLineNumber
{
  background-color: var(--stemBackground);
  text-align:right;
  padding-right:1em;
  font-weight: normal; 
  font-family: var(--codeFont), monospace;
  color: var(--lineNumberColor);
  white-space: nowrap;
  overflow:hidden;
}
.___csvCell:first-child
{
	width:60px;
}
.__csvCell:last-child
{
  __font-weight:bold;
  __width: 300px;

}
.___csvCell[data-col="6"]
{
  width:30ch !important;
}
.csvCell.active {
  
	__outline:2px solid blue;
	
	overflow:visible;
	position:relative;
}

.csvInner
{
  __pointer-events: none;
}
.csvInner:focus {
  outline:0;
}
.csvCell.active > .csvInner 
{
	background-color: var(--codeBackground);
	z-index:2;
	padding-right:1em;
	outline: 2px solid var(--secondColor);
	___box-shadow: 3px 0px 0px 3px var(--mainBorder);
}
.csvCell.active.editable > .csvInner
{
  outline: 2px solid orange;
  outline-offset: 1px;
  cursor:text;
}
.___csvInner[contenteditable="true"] {background-color: cyan;}

.csvCell.active.editable > .csvInner::selection
{
  color:inherit;
  background-color: var(--selection);
  
}
.csvRow:has(>.csvCell.editable)
{
  outline:1px solid var(--secondColor);
}
.csvRow.highlighted
{
  __outline:1px solid red;
  outline:1px solid var(--secondColor);
}

.___category {
  content-visibility: auto;
  contain-intrinsic-size:
	/* width */
	calc(var(--num-columns) * var(--total-emoji-size))
	/* height */
	calc(var(--num-rows) * var(--total-emoji-size));
}


.sstable
{
	width: 100%;
	border-collapse: collapse;
	border-spacing:0;
	
	table-layout: fixed;
}


.si
{
	width:100%;
	white-space: nowrap;
	overflow:hidden;
}

td { 
	padding: 0;
	border:var(--borderWidth) solid var(--mainBorder);
	border-top:0;
	border-bottom:0;
}

td.si
{
	max-width:2rem !important;
}

td.center
{
	text-align: center;
}

td.text, td.html
{
	border:0;
}

#spellingTable, #unusedTable, #errorTable, #modifiedTable
{
	border-collapse: collapse;
	border-spacing:0;
	background-color: var(--codeBackground);
	min-width:100%;
}
.wordCell, .lineNumbersCell, .occurrencesCell, .htmlCell
{
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	vertical-align: top;
	cursor: pointer;
	padding-left:5px;
	padding-right: 5px;
	padding-top:1px;
	padding-bottom:1px;
}
.wordCell, .lineNumbersCell, .htmlCell
{
	font-family: var(--codeFont), monospace;
}
.errorRow > .lineNumbersCell {width:50%;}


.lineNumbersCell.for_modified {width: 80px;}

.lineNumbersCell.modified {border-left:3px solid var(--modifiedColor);}
.lineNumbersCell.modified_unsaved {border-left:3px solid var(--unsavedColor);}

.lineNumbersCell.modified.empty,
.lineNumbersCell.modified_unsaved.empty
{
	border-left:0px;
}




.spellingRow:hover,
.unusedRow:hover
{
	/* background-color:yellow; */
	background-color: var(--hoverBackground);
}

.errorBit
{
	margin-left:8px;
	font-weight:bold;
	color: var(--warningColor);
}


#printArea {

	width:100%;
	overflow-wrap: break-word;
	white-space:pre-wrap;
	background:white;
	color:black;
	
	tab-size:var(--tabSize);
}
#printTable {
	table-layout: fixed;
	width:100%;
	border:none;
	border-collapse: collapse;
	overflow-wrap: break-word;
	white-space:pre-wrap;
	
	background:white;
	color:black;
	tab-size:var(--tabSize);
}
.printRow {

}
.printLineNumber {
	border-right:1px solid #000;
	vertical-align: baseline;
}
.printHtml {
   padding-left:14px;
   overflow-wrap: break-word;
}

#printMenu {
	position:fixed;
	top:10px;
	right:10px;
	width:auto;
}

@media print {

	#printMenu {display:none;}
}


#getbent {

}

/* https://css-tricks.com/almanac/properties/s/scrollbar/ */
/* https://stackoverflow.com/questions/63007003/how-can-i-get-a-scrollable-sidebar-similar-to-www-youtube-com*/

/* TODO: might need separate colors for the variables */

 .custom.scrollbars::-webkit-scrollbar {
	width: var(--scrollbarSize);
	__width:0px;
	height: var(--scrollbarSize);
}

/* Useful method if you want the icode scrollbars to be larger than all the others
:not(#icode).custom.scrollbars::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}
*/



.custom.scrollbars::-webkit-scrollbar-track {
	__border-radius: 8px;
	__background: var(--panelBackground);
	__background: transparent;
	__background: var(--stemBackground);
	background-color: var(--scrollbarTrack);
	__background-color: transparent !important;
	
	__display:none;
	
	__overflow:overlay !important; /* doesn't work */
	
	/* outline:0.49px solid var(--mainBorder);
	outline-offset:-2px; */
	
	__background: var(--scrollbars);
	
	__background: #eee;
	
	__box-shadow: 0px 0px 0px 0.5px var(--mainBorder) inset;
	
	__box-shadow: 0px 0.5px 0 0px var(--mainBorder) inset
	
	/* box-shadow: -1px 0px 3px 5px #000000; */
	
}

.___custom.scrollbars {
	scrollbar-color: red transparent;
}

.custom.scrollbars::-webkit-scrollbar-track:hover {
	__background: transparent;
	__background: var(--panelBackground);
}
.custom.scrollbars::-webkit-scrollbar-corner {
	__background: var(--panelBackground); 
	__background: transparent;
	/* background: var(--stemBackground); */
	background: var(--scrollbarTrack);
	
	__background: var(--scrollbars);
}

.custom.scrollbars::-webkit-scrollbar-thumb {
	__height: 56px;
	height: var(--scrollThumbSize);
	width:var(--scrollThumbSize);
	border-radius: calc(var(--scrollbarSize) * 0.5);
	border: 3px solid transparent;
	background-clip: content-box;
	__background-color: var(--mainBorder);
	background-color: var(--scrollbarIsland);
}

.custom.scrollbars::-webkit-scrollbar-thumb:hover {

	border: 2.5px solid transparent;
	
	__background-color: var(--hoverBackground);
	background-color: var(--scrollbarIslandHover);
	
	/* https://ishadeed.com/article/css-relative-colors/ */
	__background-color: hsl(from var(--scrollbarIsland) h  calc(l - 10));
}





.auto.scrollbars
{
	scrollbar-width: auto;
	scrollbar-color: var(--scrollbarIsland) var(--scrollbarTrack);	
	/*  scrollbar-color: red transparent; transparent doesn't work */	
}
/* following doesn't work - was trying to make the scroll island bigger */
/* .auto.scrollbars::-webkit-scrollbar {
	width: var(--scrollbarSize);
	height: var(--scrollbarSize);
}
.auto.scrollbars::-webkit-scrollbar-thumb {
	height: var(--scrollThumbSize) !important;
} */
.thin.scrollbars
{
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbarIsland) var(--scrollbarTrack);
}
.none.scrollbars
{
	scrollbar-width: none;
	scrollbar-color: var(--scrollbarIsland) var(--scrollbarTrack);
}











#keyDisplay
{
	position:fixed;
	top:0;
	left: calc(50% - 100px);
	background-color: black;
	color:yellow;
	font-size:20px;
	font-family:arial;
	border:2px solid red;
	z-index:20;
}



#wlog
{
	position:fixed;
	padding:1rem;
	top:400px;
	left:500px;
	background:cornsilk;
	color:red;
	font-weight:bold;
	border: 2px solid orange;
	z-index:1000;
	
}


/*#endregion*/



/*#region SYNTAX HIGHLIGHTING */

#contents
{
	__color:orange;
}

#syntaxHighlighted {
	__display:none;
	___pointer-events:none;
	
}
#syntaxHighlighted.listeningForMove /* not using */
{
	pointer-events: auto;
}

.peekHover
{
	text-decoration: underline;
	cursor: pointer;
}



/*@@@ JAVASCRIPT @@@ */


.php {color: var(--phpTag); font-weight: var(--phpTagFW); font-style: var(--phpTagFS);}
.____php.heredoc {color:cyan;}



.blockComment, .blockComment1, .blockComment2, .multiComment, .lineComment, .hashComment {color:var(--comment); font-weight:var(--commentFW); font-style:var(--commentFS); font-variant-ligatures: none;}

 /* TODO: would be nice to have the option of comments in a different font, but I don't think this will
 ever be possible because of bespoke word wrap needing a monospace font.*/
/* .lineComment, .textComment {font-family:arial;} */

/* .todo {__outline:2px solid var(--todoComment); _background:var(--todoComment); color: var(--todoComment);}
.exclamation {outline:2px solid var(--exclamationComment); _background:var(--exclamationComment);}
.question {outline:2px solid var(--questionComment); _background:var(--questionComment);} */



.regex, .cc {color:var(--regex); font-weight: var(--regexFW); font-style: var(--regexFS); font-variant-ligatures: none;}




/* js/ruby regex highlighting */

.backslash, .backslashEscaped, .square,  .paren, .leftparen, .rightparen, .special, .meta, .unicode, .cc
{color: var(--regex2); font-weight: var(--regexFW); font-style: var(--regexFS);}

.__paren {font-weight:bold;}

.leftparen, .rightparen
{	
	/* 
	display: inline-block;
	transform-origin: center;
	transform: scaleY(1.25); 
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 6px;
	 */
}





.squote, .squote3, .dquote, .dquote3, .dquote4, .dquote5, .mquote, .bquote, 
.backtick, .slashy, .dslashy, .heredoc, .nowdoc {color:var(--string); font-weight: var(--stringFW); font-style: var(--stringFS); font-variant-ligatures: none;}

/* .backtick {background:#fbfbfb;} */

.temple, .temple2, .temple3, .doubleCurly  {color:var(--temple); font-weight: var(--templeFW); font-style: var(--templeFS);}

.keyword {color:var(--keyword); font-weight:var(--keywordFW); font-style:var(--keywordFS);}
.type {color:var(--type); font-weight:var(--typeFW); font-style:var(--typeFS);}
/* .variableKeyword {color:var(--variableKeyword); font-weight:var(--variableKeywordFW); font-style:var(--variableKeywordFS);} */


/* .objectProperty {color:var(--objectProperty); font-weight: var(--objectPropertyFW); font-style: var(--objectPropertyFS);} */

.camelCaseMethod {color:var(--camelCaseMethod); font-weight: var(--camelCaseMethodFW); font-style: var(--camelCaseMethodFS);}
.camelCaseWord {color:var(--camelCaseWord); font-weight: var(--camelCaseWordFW); font-style: var(--camelCaseWordFS);}
.titleCaseMethod {color:var(--titleCaseMethod); font-weight: var(--titleCaseMethodFW); font-style: var(--titleCaseMethodFS);}
.titleCaseWord {color:var(--titleCaseWord); font-weight: var(--titleCaseWordFW); font-style: var(--titleCaseWordFS);}
.upperCaseMethod {color:var(--upperCaseMethod); font-weight: var(--upperCaseMethodFW); font-style: var(--upperCaseMethodFS);}
.upperCaseWord {color:var(--upperCaseWord); font-weight: var(--upperCaseWordFW); font-style: var(--upperCaseWordFS);}

.variable {color:var(--codeColor);}


.number, .js[data-word="Infinity"] {color:var(--number); font-weight: var(--numberFW); font-style: var(--numberFS);}

.operator {color:var(--operator); font-weight: var(--operatorFW); font-style: var(--operatorFS);}

.__colon {color:orange;}

/* .js {background-color: #eef !important;}
.html {background-color: #fec !important;} */


.json.dquote:has(+ .json.colon)
{
	color:var(--codeColor); 
	
	
}
.yaml[data-word]:has(~ .yaml.colon) /* https://tobiasahlin.com/blog/previous-sibling-css-has/ */
{
	color:var(--keyword); font-weight:var(--keywordFW); font-style:var(--keywordFS);
}



.leftBracket, .rightBracket {color:var(--roundBracket); font-weight: var(--roundBracketFW); font-style: var(--roundBracketFS);}
.leftSquareBracket, .rightSquareBracket {color:var(--squareBracket); font-weight: var(--squareBracketFW); font-style: var(--squareBracketFS);}
.leftCurly, .rightCurly {color:var(--curlyBracket); font-weight: var(--curlyBracketFW); font-style: var(--curlyBracketFS);}



.inner.leftBracket, .inner.rightBracket {color:var(--roundBracket2);}
.inner.leftSquareBracket, .inner.rightSquareBracket {color:var(--squareBracket2);}
.inner.leftCurly, .inner.rightCurly {color:var(--curlyBracket2);}

.tomlTable, .tomlTable2 {__color:var(--squareBracket2); font-weight:normal; text-decoration: underline;}


/* .secondInner.leftBracket, .secondInner.rightBracket {color:orange;} */
/* .thirdInner.leftBracket, .thirdInner.rightBracket {color:orange;} */

/* 
.leftBracket:has(~ *:not(.rightBracket) ~ .leftBracket) {color:pink !important;}
.leftBracket:has(~ .rightBracket) {color:red !important;}
 */
/* 
.leftBracket:not(:has(~ .leftBracket):has(~ .rightBracket)) {color:red !important;}
*/




/* .leftBracket:has(~ .rightBracket) {color:red !important;} */
/* .leftBracket:not(:has(~ .rightBracket):has(~ .leftBracket)) {color:orange !important;} */
/* .leftBracket:has(~ .leftBracket):not(:has(~ .rightBracket)) {color:orange !important;} */

/* .leftBracket:has(~ :not(.leftBracket) ~ .rightBracket) {color:orange !important;} */


/* .leftBracket:not(:has(~ .rightBracket ~ ~ .leftBracket)) {color:orange !important;} */




/*
.leftBracket:has( ~ .rightBracket) {color:red !important;}
.leftBracket~.rightBracket {color:red !important;}

.leftBracket:has(~ .leftBracket ~ .rightBracket) {color:var(--roundBracket) !important;}
.leftBracket:has(~ .leftBracket ~ .rightBracket ~ .rightBracket) {color:yellow !important;}
.leftBracket ~ .leftBracket ~ .rightBracket ~ .rightBracket {color:yellow !important;}
*/



/* .hline:has(> :is(
	[data-word="function"],
	[data-word="class"],
))
{
	background:#ff02;
	box-shadow: 0px 0.5px 0 0px #777 inset;
} */

/* .js[data-word="function"]::before
{
	content: 'PPP';
	display: block;
	position:absolute;
	border-top:2px solid red;
} */

/* overrides */
/*
.js[data-word="function"] {font-weight:bold;}

.js[data-word="function"]+.titleCaseMethod {text-decoration:underline;}
*/

/*
[data-word="LogTimeout"] {font-style:italic;}

[data-word="vschode"] {background:red;}
[data-word^="scun"] {text-decoration: underline; outline:2px solid orange;}
[data-word="log"] {text-decoration: underline; outline:2px solid red;}
*/



/*@@@ CSS @@@ */


.property {color: var(--property); font-weight: var(--propertyFW); font-style: var(--propertyFS);}
.pseudoSelector {color: var(--pseudoSelector); font-weight: var(--pseudoSelectorFW); font-style: var(--pseudoSelectorFS);}
.classSelector {color: var(--classSelector); font-weight: var(--classSelectorFW); font-style: var(--classSelectorFS);}
.idSelector {color: var(--idSelector); font-weight: var(--idSelectorFW); font-style: var(--idSelectorFS);}
.cssVariable {color: var(--cssVariable); font-weight: var(--cssVariableFW); font-style: var(--cssVariableFS);}
.tagSelector {color: var(--tagSelector); font-weight: var(--tagSelectorFW); font-style: var(--tagSelectorFS);}
/* .tagSelector {color: orange; font-weight: bold; font-style: var(--tagSelectorFS);} */
.atSelector {color: var(--atSelector); font-weight: var(--atSelectorFW); font-style: var(--atSelectorFS);}
.cssNumber {color: var(--cssNumber); font-weight: var(--cssNumberFW); font-style: var(--cssNumberFS);}
 /* .hexcolor {outline-style: solid; outline-width: 2px;}  */
 
.css.url {__outline:1px solid orange; __color: var(--string); color:var(--camelCaseMethod);} 
 
 
/* @@@ HTML @@@ */

/* .hline.html {font-weight:var(--htmlTextFW);}  
.html.equals {font-weight:normal;} */






.htmlText
{
	color: var(--htmlText); font-weight: var(--htmlTextFW); font-style: var(--htmlTextFS);
}


.startTagName, .endTagName {color: var(--tagName); font-weight: var(--tagNameFW); font-style: var(--tagNameFS);}
.tag, .closingSlash {color:var(--tagAngledBrackets); font-weight: var(--tagAngledBracketsFW); font-style: var(--tagAngledBracketsFS);}
.attribute {color: var(--attributeName); font-weight: var(--attributeNameFW); font-style: var(--attributeNameFS);}
.attsquote, .attdquote, .attnquote, .attdstylequote, .___attdpathquote  {color: var(--attributeValue); font-weight: var(--attributeValueFW); font-style: var(--attributeValueFS);}
.comment, .cdata {color: var(--htmlComment); font-weight: var(--htmlCommentFW); font-style: var(--htmlCommentFS);}

.charEnt {color: var(--characterEntity); font-weight: var(--characterEntityFW); font-style: var(--characterEntityFS);}


/* .startTagName, .endTagName, .attribute, .attdquote, span.html {background-color:#eee;} */

/* .lineComment {font-family: ComicMono !important;} */

.curly {color:var(--temple); __background:yellowgreen;}
.curly0 {color:var(--temple); __background:yellow;}
.curly1 {color:var(--temple); __background:cyan;}
.curly2 {color:var(--temple); __background: magenta}
.html_doubleCurly_JS {color:var(--temple); __background:yellow;}

[data-name="script" i], [data-name="/script" i],
[data-name="style" i], [data-name="/style" i]
{
	___color:hsla(137, 90%, 49%, 0.995);
}


.___attribute[data-word^="hx-"] {font-weight: bold;}



/* 
.attribute[data-word="href"] + .html.attdquote {text-decoration: underline;}
.attribute[data-word="src"] + .html.attdquote {text-decoration: underline;}
 */
 
 
 

.hline:not(.active, [data-h]) > .html.attdquote:has(+ .foldBit)
{
	display:none;
}

 
.hline:not(.active, [data-h]) > .foldBit::before
{
	display:inline;
	content: '"' attr(data-start) '\25E6\25E6\25E6"';
	__content: '"' attr(data-start) '\2026\2026"';
	__content: '"' attr(data-start) '\22EF\22EF"';
	__content: '"\25E6\25E6\25E6"';
	opacity:0.5;
}


/*
.hline:not(.active) > :is(

	[data-word="class"],
	[data-word="d"],
) 
+ .html.attdquote:has(+ .foldBit)
{
	display:none;
}

 
.hline:not(.active) > :is(

	[data-word="class"],
	[data-word="d"],
) 
+ .html.attdquote + .foldBit::before
{
	display:inline;
	content: '"' attr(data-start) '\25E6\25E6\25E6"';
	__content: '"\25E6\25E6\25E6"';
	opacity:0.5;
}  
*/






 
 
/* @@@ MARKDOWN RAW @@@ */


md-h1, md-h2, md-h3, md-h4, md-h5, md-h6
{
	color:purple;
	font-weight:bold;
}

md-blockquote
{
	color: blue;
	font-weight:bold;
}

md-uli
{
	color: orange;
	font-weight:bold;
}

md-oli
{
	color: red;
	font-weight:bold;
}

md-footnote
{
	color:blue;
}

md-hr
{
	/* text-decoration: underline; */
	color:red;
	font-weight:bold;
}

md-checkbox
{
	color: violet;
}

.hline:has(> .md.hr)
{
	__text-decoration: underline;
	__box-shadow: 0 1px 0 blue;
	__border-bottom:1px solid blue;
}

.md.ast
{
	color:magenta;
}
.md.bracket
{
	color:blue;
}
.md.linkText
{
	color:brown;
}
.md.urlText
{
	color:brown;
}
.md.exclamation
{
	color:blue;
}

.md.codeblock
{
	color:magenta;
}
.md.inlinecode2,
.md.inlinecode3,
.md.inlinecode4,
.md.inlinecode5
{
	color: orange;
}
.md.inlinecode1
{
	color:red;
}


/* @@@ MARKDOWN PRESENTAION @@@ */
.markdownDiv
{
	margin:25px;
	margin-left:8px;
	margin-right:32px;
	padding: 10px;
	border: 1px solid red;
	position:relative;
	background: white;
	overflow-x: visible;
	line-height:1.5;
	/* cursor:pointer; */
	user-select:text;
}
.mkd::selection,
.markdownDiv::selection
{
	background-color:magenta;
}

.mkd
{
	position:relative;
}


p.__mkd
{
	margin-top:0;
	margin-bottom:0;
	padding-top:1em;
	padding-bottom:1em;
}

pre.mkd
{
	background-color:#fec;
	border:1px solid black;
	overflow-x: auto;
}
code.mkd,
.code.mkd
{

	white-space: pre-wrap;
	background:#eef; 
	/* if we have a background color, need position static for the caret to be seen when contenteditable = true
		see https://stackoverflow.com/questions/70565449/why-is-the-caret-invisible-in-a-contenteditable-with-positionrelative
	*/   
	position:static; 
	border:var(--borderWidth) solid var(--mainBorder);
	padding-left:0.2em;
	padding:0.2em;
	line-height:1.5em;
}
/* code.mkd > b.mkd { font-weight:normal; } 
code.mkd > b.mkd::before { content: '**'; } 
code.mkd > b.mkd::after { content: '**'; }  */

hr.mkd
{
	margin-top:1em;
	margin-bottom:1em;
}

blockquote.mkd
{
	background: #eee;
	margin-left:0;
	margin-right:0;
	padding-left:1em;
	border-left:2px solid #cdf;
}

div.mkd.footnote,
footnote
{
	__color:red;
}

label.mkd
{
	display:block;
}

ol.mkd
{
	border:1px dotted black;
}
ul.mkd
{
	border:1px dotted blue;
}
li.mkd
{
	/* background:cyan; */
	outline: 1px dotted orange;
}

:is(ol,ul).mkd:has(> li > .blanko) > li > p
{
	outline:2px dotted green;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.__md:hover::before
{
	content:'c';
	position:absolute;
	left:-20px;
}

.mkd[data-num]::before,
ol.mkd::before
{
	__display:none;
	position:absolute;
	color:red;
	font-size:1rem;
	__top:5px;
	left:-36px;
	__right:-30px;
	left: calc(100% + 14px);
	width:2px;
	content: attr(data-num);
	white-space: nowrap;
}
ol.mkd::before
{
	__left:-60px;
	__top: -20px;
	__content: 'quack';
}
.mkd[data-num]:hover::before
{
	__display:block;
	
}
.mkd > p.__md::before,
__li.mkd::before,
li.mkd > p.__md:first-child::before
{
	display: none;
}

p.mkd::before,
input.mkd::before
{
	display: none;
}

pre.mkd::before
{
	display:none;
}

img.mkd
{
	__width:calc(100% - 50px);
	max-width:100%;
}


table.mkd
{
	width: 100%;
	border-collapse: collapse;
	border-spacing:0;
}
th.mkd
{
	border-bottom: 2px solid var(--mainBorder);
}
td.mkd
{
	border: 0px solid black;
	border-bottom: var(--borderWidth) solid var(--mainBorder);
	
}
th.mkd, td.mkd
{
	padding-left:1em;
	padding-right:1em;
}
td.mkd.leftAlign, th.mkd.leftAlign {text-align: left;}
td.mkd.rightAlign, th.mkd.rightAlign {text-align: right;}
td.mkd.centerAlign, th.md.centerAlign {text-align: center;}




#footnotes
{
	__background:yellow;
	__position:relative;
	__anchor-name: --footnoteAnchor;
	
	border-top: var(--borderWidth) solid var(--mainBorder);
}











.backslash,
.squarecc,
.paren,
.special, 
.meta,
.unicode,
.cc {
	__box-shadow: 0 -1px 0 var(--activeLineBorder);
	__outline:1px solid #ddd;
	__background:rgba(155,55,0,0.2);
}



.paren.scale, .regex.scale, .square.scale {transform: scale(1, 1.25);}

/* @@@ LATEX */
.tex.lineComment {color: var(--texComment);}
.Math
{
	color: var(--mathMode);
	__background: #eee;
}
.dollarInline, .bracketInline, .envInline {__outline: 1px dotted #ddd;}
.mathDelim {color:var(--mathDelimiter);}
.mathCommand {color: var(--mathCommand);}
.textCommand, .___newcommand {color: var(--textCommand);}
.texmath.leftCurly, .texmath.rightCurly {color:var(--mathCommand);}
.text.leftCurly, .text.rightCurly {color:var(--textCommand);}
.bigVerb {color:var(--verbatim);}
span[data-begin="verbatim"], span[data-end="verbatim"] {font-style:italic;}
.smallVerb {color:var(--verbatim);}
.env {color:var(--textEnvironment);}
.env>.textCommand {color:var(--textEnvironment);}
.env>.text.leftCurly, .env>.text.rightCurly {color:var(--textEnvironment);}

.texmath.env {color:var(--mathEnvironment);}
.texmath.env>.mathCommand {color:var(--mathEnvironment)}
.env>.texmath.leftCurly, .env>.texmath.rightCurly {color:var(--mathEnvironment);}


.textmode0 {color:var(--textCommand); _background:yellow;}
.textmode1 {color:var(--textCommand); _background:cyan;}
.textmode2 {color:var(--textCommand); _background:magenta;}
.textmode3 {color:var(--textCommand); _background:magenta;}
.textmode4 {color:var(--textCommand); _background:magenta;}


[data-command="section"], 
[data-command="chapter"], 
[data-command="part"] {font-weight: bold; text-decoration: underline; }

[data-command="subsection"] {font-weight: bold;}

[data-command="section"], 
[data-command="subsection"], 
[data-command="subsubsection"], 
[data-command="chapter"], 
[data-command="part"]
{
	color:var(--sectionColor);
	
}

.hline[data-section]
{
	box-shadow: 0px 0.5px 0 0px var(--sectionColor) inset;
}


[data-command="label"],
[data-command="ref"],
[data-command="label"] + .leftCurly, 
[data-command="label"] + .leftCurly + .rightCurly, 
[data-command="ref"] + .leftCurly, 
[data-command="ref"] + .leftCurly + .rightCurly
{color:var(--refLabels);}

/* @@@ */



.link {text-decoration: underline;}

.misspelt
{
	text-decoration: var(--spellingMistakeColor) wavy underline 0.5px;
	text-underline-offset: 0.22em; 
}




.error::after {
	content: ' ';
	margin-left: -4px;
	__background-color:pink;
	text-decoration: purple wavy underline;
}






/* .csvItem:nth-of-type(4n+1) {color:red;}
.csvItem:nth-of-type(4n+2) {color:green;}
.csvItem:nth-of-type(4n+3) {color:blue;}
.csvItem:nth-of-type(4n+4) {color:orange;} */

.csvItem:nth-of-type(4n+1) {color:var(--tagName);}
.csvItem:nth-of-type(4n+2) {color:var(--comment);}
.csvItem:nth-of-type(4n+3) {color:var(--attributeName);}
.csvItem:nth-of-type(4n+4) {color:var(--attributeValue);}








background-color: var(--codeBackground);
/*#endregion*/