.ncMinimalTree{
	cursor: default;

	/* 
	max-content allows content to grow when using BE trees within scrolling conatiners (otherwise we get ellipses on text and very short text elements)
	the user can override width (or max-width) in the container settings to implement overflow control
	*/
	width: max-content;

	/* for user editable classes */
	/*
	--line-height: 22px;
	--icon-width: 16px;
	--icon-and-text-bg-color
	--icon-color
	*/
}
.ncMinimalTree div.ncTreeNode, .ncMinimalTree div.ncTreeNodeSelected{
	display: flex;		
}
/* 
make all elements except the text one fixed in the grid with icon width 
n.b. not all will directly be icon containers, sometimes the icon is wrapped in another div
*/
.ncMinimalTree div.ncTreeNode>*:not(:last-child), .ncMinimalTree div.ncTreeNodeSelected>*:not(:last-child){
	flex-grow: 0;
	flex-shrink: 0;	
	width: var(--icon-width); 
}
/* apply background color to last two elements of flex container */
.ncMinimalTree div.ncTreeNodeSelected>div:nth-last-child(-n + 2){
	background-color: var(--icon-and-text-bg-color);
}
.ncMinimalTree div.ncTreeNode>div:nth-last-child(-n + 2){
	background-color: var(--icon-and-text-bg-color);
}

.ncMinimalTree div.treeIconHolder
{
    /* n.b. using line-height as height to constrain icon container */
	height: var(--line-height);
	line-height: var(--line-height);	
    text-align: left;
    padding: 0px;

	/*
	flex-grow: 0;
	flex-shrink: 0;
	width: var(--icon-width); 
	*/
}
.ncMinimalTree div.treeTextHolder{
	/* this is required for text overflow control on links (otherwise overflowcontrol there is ignored), only applied when tree container has a width on it */
	overflow: hidden;  

	line-height: var(--line-height);
	flex-grow: 0;
	flex-shrink: 1;	
}
/* this allows the extend items to the right setting to take up full available space to right of the tree */ 
.ncMinimalTree div.treeTextHolder.extendTextRight{
	flex-grow: 1;
}
.ncMinimalTree div.treeTextHolder>span{
	display: block;
	
	/* for user editable classes */
	/*
	white-space: nowrap;	
	*/
}
/* <a> for linking, extra <span> for non-linking */
.ncMinimalTree div.treeTextHolder>span>a, .ncMinimalTree div.treeTextHolder>span>span{
	display: block;		

	/* these overflows only get applied when either the tree container or this element have a width applied */
	overflow: hidden;
	text-overflow: ellipsis;

	/* to be applied in user editable css */
	/*	
	line-height: 12px;		
	margin-top: 3px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;	
	*/
}
/* these images are normally blank on a minimal tree but we keep them there as they're used on the classic tree for backgrounds etc */ 
.ncMinimalTree img.TreeBlank, .ncMinimalTree img.TreeVertTop, .ncMinimalTree img.TreeVertBottom, .ncMinimalTree img.TreeVert, 
.ncMinimalTree img.TreeNode, .ncMinimalTree img.TreeNodeBottom{
	width: var(--icon-width); 

	/* n.b. using line-height as height to constrain icon container */
	height: var(--line-height);

	/* 
	height: 22px;
	*/

	border: 0;
	/* this is required for tree with images (may not be if we apply divs round the images)
	vertical-align: middle;
	*/
    background-repeat: no-repeat;
}

/* ===== chevrons ===== */
.ncMinimalTree div.nodeSmallChevronLeft, .ncMinimalTree div.nodeSmallChevronRight, .ncMinimalTree div.nodeSmallChevronUp, .ncMinimalTree div.nodeSmallChevronDown{	
  /* control size */
  width: 5px;
  height: 5px;
  
  /* create chevron shape with borders */
  border-right: 1.5px solid var(--icon-color);
  border-bottom: 1.5px solid var(--icon-color);
  
  /* position in center via translate */
  /* rotate to make it look like a ">" chevron */
  position: relative;
  top: 50%;
  left: 50%;

  /* smooth rotation animation */
  transition: transform 0.25s ease-in-out;     
}

.ncMinimalTree div.nodeSmallChevronLeft{
	transform: translate(-50%, -40%) rotate(135deg);
}
.ncMinimalTree div.nodeSmallChevronRight{
	transform: translate(-50%, -40%) rotate(-45deg);
}
.ncMinimalTree div.nodeSmallChevronUp{
	transform: translate(-50%, -60%) rotate(-135deg);
}
.ncMinimalTree div.nodeSmallChevronDown{
	transform: translate(-50%, -60%) rotate(45deg);
}
/* ===== /chevrons ===== */

/* ===== arrows ===== */
.ncMinimalTree div.nodeArrowLeft, .ncMinimalTree div.nodeArrowRight, .ncMinimalTree div.nodeArrowUp, .ncMinimalTree div.nodeArrowDown{
  /*
  width: 16px;  
  height: 22px;
  */



  position: relative;  

  /* create solid triangle using borders */
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--icon-color);

  /* center it */  
  top: 50%;
  left: 50%;
  
  /* smooth rotation animation */
  transition: transform 0.25s ease-in-out; 
}
.ncMinimalTree div.nodeArrowUp{
	transform: translate(-50%, -60%) rotate(180deg);
}
.ncMinimalTree div.nodeArrowDown{
	transform: translate(-50%, -40%);
}
.ncMinimalTree div.nodeArrowLeft{
	transform: translate(-60%, -50%) rotate(90deg);
}
.ncMinimalTree div.nodeArrowRight{
	transform: translate(-40%, -50%) rotate(-90deg);
}
/* ===== /arrows ===== */

/* ===== circle =====*/
.ncMinimalTree div.nodeCircle {
  /* Reset arrow borders */
  border: none;

  /* Create the circle */
  width: 10px;
  height: 10px;
  background-color: var(--icon-color);  
  border-radius: 5px;

  /* Center it in the 16×22 box */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ===== /circle =====*/