ul.tree {
	list-style: none;
	padding-left: 1rem;
}

ul.tree li:first-child {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	position: relative;
}

ul.tree li {
	margin-bottom: 0.5rem;
	position: relative;
}

/* Expand/collapse styling */
.tree-toggle {
	/* cursor: pointer; */
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.tree-children {
	list-style: none;
	display: none;
	margin-left: 1.5rem;
	border-left: 2px solid #ccc;
	padding-left: 1rem;
}

.tree-children li {
	position: relative;
	padding-left: 1rem;
	/* space for the arrow */
	margin-bottom: 0.5rem;
}

.tree-children li::before {
	content: "➤";
	/* or try: "▶", "▸", or "\25B6" (CSS unicode) */
	position: absolute;
	left: -1rem;
	top: 50%;
	transform: translateY(-50%);

	font-size: 2rem;
	color: #555;
}

.tree-children.show {
	display: block;
}

.infoButtonColour {
	background-color: #0E4C65;
	color: white;
}



.card-icon-strip {
	width: 30px;
	background-color: #0E4C65;
	color: white;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	/* This makes it stretch the full height of the card */
}

.card.tree-toggle {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	/* important */
}

.disabledInteraction {
	pointer-events: none;
	opacity: 1;
	/* keep original opacity */
	filter: none;
	/* prevent dimming (Bootstrap) */
	cursor: default;
	/* or 'not-allowed' if you want */
}