:root{
  --highlightColor: #0000ff;
  --showborder: coral;
  //--showbordersty: solid; /*debugging only*/
  --showbordersty: none;
  --basecolor: black;
  --basefontcol: WhiteSmoke;
  --ctrlcolor:#548DD4; /* same as Raven logo color */ 
}
#textEditorWin{/*same size as map window*/
  position: absolute;
  //width: 50%;
  width: 100%;
  height: 100%;
  z-index: 10000;
  top:0;
  left:0;
  border-radius: 10px;
  background-color: var(--basefontcol);
  visibility: hidden;
}
#textEditorDiv {/*background div for text Editor*/
  width: calc(100% - 53px);
  height: 100%;
  position: absolute;
  top:0;
  left:53px;
  border-radius: 0px 10px 10px 0px;
}
#textEdFilename{
	position:absolute;
	top:0;
	left:60px;
	padding: 3px;
}
#textEditorDiv{
	top:20px;
}
#textEditor, #backdrop {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 6px 6px 6px 10px;
  padding: 10px; /*internal*/
  border: 0;
  width: calc(100% - 17px);
  height: calc(100% - 32px);
  overflow: auto;
  border-radius: 0px 6px 6px 0px;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
  resize: none;
}
::selection{
	background-color: lightgrey;
}
#lineNumbers{
  color:grey;
  background-color: white;
  position: absolute;
  top:20px;
  text-align: right;
  left: 25px;
  margin: 6px 6px 6px 10px;
  padding: 10px 1px 6px; 
  border: 0px solid black;
  width: 24px;
  height: calc(100% - 32px);
  /*overflow: auto;*/
  white-space: wrap; /* Allows textarea to scroll horizontally */
  resize: none;
  border-color: black;
  border-left-width: 1px;
}
#textEditor, #textEditorHighlight, #backdrop, #highlighting-content, #lineNumbers {
  /* Also add text styles to highlighing tokens */
  font-size: 11pt;
  font-family: monospace;
  line-height: 1.25;
  tab-size: 2;
}
#textOptGroup {
  font-size: 11pt;
  font-family: monospace;
}
#textEditor {
  z-index: 1; /*on top*/
  color: transparent;
  background: white;
  caret-color: blue; /* Or choose your favourite color */ 
}
#textEditorHighlight {
  position:absolute;
  left:0; 
  top:0;
  color: green;
  background: white;
  background: transparent;
  pointer-events: none;
  /*left: 60px;*/ /*tmp debug*/
  z-index: 0;
}
#backdrop{
	color: black;
	pointer-events: auto;
	white-space: pre; /*miracle command!*/
}
.hoverword, .hoverDate, .hoverMethod{
	pointer-events: auto;
}
.hoverword{
	color: blue;
}
.hoverMethod{
	color: purple;
}
.hoverDate{
	color: purple;
}
.textComment{
  color: green;
  background: rgba(100,255,100,0.3);
}
.hoverword:hover,
.hoverDate:hover 
{
  opacity:0.5;
  background: lightblue;
}
.hoverMethod:hover 
{
  opacity:0.5;
 /*  background: thistle;*/
  background: rgba(113,100,113,0.3);
}
#customOutputDialog
{
  position: absolute;
  left: 10%;
  width:700px;
  height: 102px;
  top: calc(80% - 120px);
  border-radius: 10px;
  background-color: black;
  color: var(--basefontcol);
}