.Bold {
	text-indent: 0.25em;
}

@media (orientation: portrait) {
	div.SideBar {
		width: calc(100% - 2px);
		flex-wrap: wrap;
		flex-direction: column;
		border-right: 1px solid #DDD;
	}
}

@media (orientation: landscape) {
	div.SideBar {
		width: calc(20em - 1px);
		flex-wrap: wrap;
		flex-direction: column;
		border-right: 1px solid #DDD;
	}
}

div.SideBar div.MidTitle {
	font-weight: bold;
	font-size: 1.5em;
	width: calc(100% - 1em);
	margin: 0.5em 0.5em;
	justify-content: center;
	padding: 0.3em 0;
	border-bottom: 1px solid #DDD;
}

div.SideBar div.BarLinks {
	width: 100%;
	flex-wrap: wrap;
}

div.SideBar div.TreeChildren {
	width: calc(100% - 2em);
	flex-wrap: wrap;
	padding: 0 1em;
}

div.SideBar div.TreeNode {
	width: 100%;
	margin: 0.25em 0;
	flex-wrap: wrap;
}

div.SideBar div.Hidden {
	display: none;
}

div.SideBar div.Rotated {
	transform: rotate(90deg);
}

div.CaretTitle {
	position: relative;
	display: flex;
	width: 100%;
	cursor: pointer;
}

div.CaretTitle:hover {
	background-color: #e8f0fe;
}

div.CaretTitle a {
	width: 100%;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.CaretTitle div.Caret {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: black;
}

div.CaretTitle .Title {
	text-indent: 0.25em;
}