:root
{
	--tv-header-bgcolor: #eee;
	--tv-header-bordercolor: #ccc;
	--tv-colheader-bgcolor: #eee;
	--tv-colheader-bordercolor: #ccc;
	--tv-bgcolor: #fff;
	--tv-item-border-color: #ddd;
	--tv-border-color: #999 #ccc #ccc #999;
	--tv-selected-color: #DBEDED;

	--tv-item-icon-color: #98C375;

	--tv-attention-color: #66aaaa;
	--tv-warning-color: #FF7F00;
	--tv-danger-color: #cc0000;

	--tv-onlycustomer-color: #daf;
	--tv-nocustomer-color: #e9f;
}

.treeviewscroller
{
	position: relative;
	width: 100%;
	height: 100%;
}

.treeview
{
    background-color: var(--tv-bgcolor);
	overflow-y: scroll;
	overflow-x: auto;
	position: relative;
	width: 100%;
	text-align: left;
	line-height: 2em;
}

.treeviewscroller .treeview
{
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
}

.treeview img
{
	vertical-align: text-bottom;
	background-repeat: no-repeat;
	background-position: center center;
	height: 16px;
}

.treeview img[name=iTVIimg]
{
	margin: 0 0.2em;
}

.treeview img:not([width])
{
	width: 16px;
}

.treeview input.tvchkbox
{
	vertical-align: baseline;
	margin: 0 0 0 0.5em;
}

.treeview,
.treeview div,
.treeview span
{
	outline: none;
}

.treeview.bordered
{
	background-color: var(--tv-bgcolor);
	border-width: 1px;
	border-style: solid;
	border-color: var(--tv-border-color);
}

.treeheader
{
	line-height: 1px;
	width: auto;
	overflow-y: visible;
	min-width: 100%;
	position: sticky;
	z-index: 1;
	top:  0;
	background-color: var(--tv-header-bgcolor);
	border-bottom: 1px solid var(--tv-header-bordercolor);
	z-index: 25;
}

.treecolumnheader
{
	background-color: var(--tv-colheader-bgcolor);
	border: none;
	border-top: none;
	padding: 0 0.3em;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	line-height: 1.5em;
	height: 1.8em;
}

.treecolumnheader + .treecolumnheader
{
	border-left: 1px dotted var(--tv-colheader-bordercolor);
}


.treecolumnheader input
{
	vertical-align: middle;
}

.treeitemcolumn
{
	padding: 0px 3px 0px 3px;
}

.TreeItem
{
    background-color: var(--tv-bgcolor);
    white-space: nowrap;
    width: auto;
    overflow: visible;
}

.TreeItem + .TreeItem,
.TreeItem .TreeItem
{
	border-top: 1px solid var(--tv-item-border-color);
}

.TreeItem i[name=iTVIexpicon],
.TreeItem i[name=iTVIicon]
{
	width: 1.25em;
	text-align:center;
}

.TreeItem i[name=iTVIicon]
{
	display: inline-block;
    margin-right: 0.25em;
}

/* Pagina's in de sitestructuur krijgen Bonniegroen, de rest niet */
.treeview.sitestructure .TreeItem[img="1"] > span > i[name=iTVIicon],
.treeview.sitestructure .TreeItem[img="7"] > span > i[name=iTVIicon]
{
	color: var(--tv-item-icon-color);
}

.TreeItem span[name=iTVIsp]
{
	height: 1em;
       display: inline-block;
}

.TreeItemSel,
.TreeItem.selected
{
	background-color: var(--tv-selected-color);
    white-space: nowrap;
}

.TreeItem > span
{
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	padding-right: 0.3em;
}

.TreeItem.secondary > span
{
	opacity: 0.5;
}

/**
.TreeItem.onlycustomer > span,
.TreeItem.onlycustomer > span .fa-file
{
	color: var(--tv-onlycustomer-color);
}
.TreeItem.nocustomer > span,
.TreeItem.nocustomer > span .fa-file
{
	color: var(--tv-nocustomer-color);
}
**/

.TreeItem.onlycustomer > span[name=column1] > span.t::before
{
	content: "\f023";
	padding-right:  0.5em;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	font-size:  75%;
	font-style: normal;
}
.TreeItem.nocustomer > span[name=column1] > span.t::before
{
	content: "\f3c1";
	padding-right:  0.5em;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	font-size:  75%;
	font-style: normal;
}


.TreeItem.primary > span
{
	font-weight: bold;
}

.TreeItem.warning > span
{
	color: var(--tv-warning-color);
	font-style: italic;
}

.TreeItem.danger > span
{
	color: var(--tv-danger-color);
	font-style: italic;
}

.TreeItem.attention > span
{
	color: var(--tv-attention-color);
	font-style: italic;
}

.checkbox-toggle
{
	margin: 0;
	margin-right: 0.5em;
	vertical-align: middle;
}