/* coderef-TG12 */
:root {
  --clrBgTop:	darkslategrey;
  --clrTxTop:	greenyellow;
  
  --clrBgPanesLiteMode:	white;			/* Standard, can be changed for dark mode */
  --clrTxPanesLiteMode:	black;
  --clrBgPanesDarkMode: black;
  --clrTxPanesDarkMode: white;
  
  --clrStNew:	#ffff99;		/* lightyellow 80% */
  --clrStTodo:	#ffe4b3;		/* orange 85% */
  --clrStSel:	lavender;
  --clrStInp:	lightblue;
  --clrStDone:	lightgreen;
  --clrStArc:	#d1e0b8;		/* darkolivegreen 80% */
  --clrStCan:	lightgrey;
  
  --clrPrHig:	lightcoral;
  --clrPrMed:	#FFFF70;
  --clrPrLow:	lightgreen;
  --clrPrCvdHig:	lightcoral;
  --clrPrCvdMed:	#FFFF70;
  --clrPrCvdLow:	lightblue;
  
  --clrInfo:	lightgreen;
  --clrInpFld:	floralwhite;
  --clrDetails:	floralwhite;
}
/*
up to 2024-11-23:
  --clrStNew:	lightgrey;
  --clrStTodo:	lightgrey;
  --clrStSel:	lightblue;
  --clrStInp:	lightblue;
  --clrStDone:	lightgreen;
  --clrStArc:	lightgreen;
  --clrStCan:	lightgreen;


Option 2: Light and Bright
New: Light Yellow			lightyellow
To Do: Light Orange			orange
Selected: Light Blue		lightblue
In Progress: Light Purple	purple
Done: Light Green			lightgreen
Archived: Light Pink		lightpink
Canceled: Light Red			red

Option 3: Cool Tones
New: Light Mint				mintcream
To Do: Light Teal			teal
Selected: Light Sky Blue	lightskyblue
In Progress: Light Lavender	lavender
Done: Light Lime			lime
Archived: Light Peach		peachpuff
Canceled: Light Coral		lightcoral, #f7bbbb = lightcoral 85% was tried

Option 4: Earthy Tones
New: Light Sand
To Do: Light Terracotta
Selected: Light Sage
In Progress: Light Moss
Done: Light Olive
Archived: Light Clay
Canceled: Light Rose
*/

body {
	background-color: var(--clrBgPanes);
	color: var(--clrTxPanes);
}
/* General styling */
.lef { text-align: left; }
.cen { text-align: center; }
.rig { text-align: right; }

.tdVtop { vertical-align: top; }

.tdPaddL5	{ padding-left: 5px; }
.tdPaddL10	{ padding-left: 10px; }
.tdPaddL20	{ padding-left: 20px; }
.tdPaddR5	{ padding-right: 5px; }
.tdPaddR10	{ padding-right: 10px; }
.tdPaddR20	{ padding-right: 20px; }

/* General for all/most view pages */
.myFa-red { color: red; }		/* mostly for icons, prio and status */
.myFa-green { color: green; }
.myFa-blue { color: blue; }

/* Top */
.divHeader {
	width: 100%;
	margin: auto;
	background-color: var(--clrBgTop);
	padding-top: 15px;
	padding-bottom: 5px;
	margin-top: 0px;
}
.hTop	{
	font-family: 'Source Sans 3', "Verdana", "Arial", sans-serif;
	font-style: italic;
	text-align: center;
	color: var(--clrTxTop);
}

/* Menu */
.frmSelView {
	margin: 10px;
}
.btnSelView {
	background-color: lightblue;
	color: darkblue;
	border: solid darkblue 1px;
	border-radius: 20px;
	min-width: 30px;
}
.btnSelView:hover {
	background-color: darkgreen;
	color: lightgreen;
}
.btnSelNew {
	background-color: yellow;
	color: darkblue;
	border: solid darkblue 1px;
	border-radius: 20px;
}
.btnSelNew:hover {
	background-color: darkgreen;
	color: lightgreen;
}
.btnInfo {
	background-color: lightgreen;
	color: darkgreen;
	border: solid darkgreen 1px;
	border-radius: 20px;
}
.btnAction {
	background-color: lightblue;
	color: darkblue;
	border: solid darkblue 1px;
	border-radius: 20px;
	padding: 0 5px;
}
.btnAction:hover {
	background-color: darkgreen;
	color: lightgreen;
}
@media all and (max-width: 1200px) {
	.frmSelView {
		margin-left: 5px;
		margin-right: 5px;
	}
}

/* Panes */
.spnPaneTitle { font-size: x-large; font-weight: bold; padding-top: 15px;}

/* side pane */

/* Graph view */
.divMapNode {
	display: inline-block;
	margin: 20px;
	border: solid green 2px;
	border-radius: 10px;
	padding: 5px;
}
.tblMapNode {
	display: inline-block;
	margin: 5px;
	border: solid blue 2px;
	border-radius: 10px;
	padding: 5px;
}
.tdMapNodeL {
	padding: 5px;
	max-width: 100px;
}
.tdMapNodeM {
	padding: 5px;
	font-weight: bold;
}
.tdMapNodeR { padding: 5px; }

.tdItemCol1 {
	padding-right: 20px;
	font-weight: bold;
}
.tdChartListTitle {
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
 }

/* Table view */
.tdTableItem { padding-right: 10px; }
.tdTableItemL { border-left: solid black 1px; }
.tdTableItemR { border-right: solid black 1px; white-space: pre; }
.tdTableItemType { font-weight: bold; }
.spnStatus { font-size: 4px; }

/* Hierarchy view */

.ramg { border: solid green 1px; }

/* Forms */

.inpItemForm { width: 100%; }
.txtarItemForm {
    height: 4em;
	min-height: 2em;
    width: 100%;
}
.spnWarning { padding: 10px; }

@media all and (min-width: 1000px) {
	.inpItemForm { width: 100%; }
	.txtarItemForm {
		height: 6em;
		width: 100%;
	}
}

/* mostly for test purposes */

.ram { border: solid black 1px; }