.node-card {
	background: white;
	stroke: 1px solid var(--gray-200);
	box-shadow: var(--shadow-base);
	border-radius: 0.5rem;
	padding: 0.75rem;
	margin-left: 3rem;
	width: 18rem;

	.btn-edit-node {
		display: none;
	}

	.edit-chart-node {
		display: none;
	}

	.node-edit-icon {
		display: none;
	}
}

.node-image {
	width: 3.0rem;
	height: 3.0rem;
}

.node-name {
	font-size: 1rem;
	line-height: 1.72;
}

.node-title {
	font-size: 0.75rem;
	line-height: 1.35;
}

.node-connections {
	font-size: 0.75rem;
	line-height: 1.35;
}

.node-card.active {
	background: var(--blue-50);
	border: 1px solid var(--blue-500);
	box-shadow: var(--shadow-md);
	border-radius: 0.5rem;
	padding: 0.75rem;
	width: 18rem;
	height: 5rem;

	.btn-edit-node {
		display: flex;
		background: var(--blue-100);
		color: var(--blue-500);
		padding: .25rem .5rem;
		font-size: .75rem;
		justify-content: center;
		box-shadow: var(--shadow-sm);
	}

	.edit-chart-node {
		display: block;
	}

	.node-edit-icon {
		display: block;
	}

	.edit-chart-node {
		margin-right: 0.25rem;
	}

	.node-edit-icon > .icon{
		stroke: var(--blue-500);
	}

	.node-name {
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2px;
	}
}

.node-card.active-path {
	background: var(--blue-100);
	border: 1px solid var(--blue-300);
	box-shadow: var(--shadow-sm);
	border-radius: 0.5rem;
	padding: 0.75rem;
	width: 15rem;
	height: 3.0rem;

	.btn-edit-node {
		display: none !important;
	}

	.edit-chart-node {
		display: none;
	}

	.node-edit-icon {
		display: none;
	}

	.node-info {
		display: none;
	}

	.node-title {
		display: none;
	}

	.node-connections {
		display: none;
	}

	.node-name {
		font-size: 0.85rem;
		line-height: 1.35;
	}

	.node-image {
		width: 1.5rem;
		height: 1.5rem;
	}

	.node-meta {
		align-items: baseline;
	}
}

.node-card.collapsed {
	background: white;
	stroke: 1px solid var(--gray-200);
	box-shadow: var(--shadow-sm);
	border-radius: 0.5rem;
	padding: 0.75rem;
	width: 15rem;
	height: 3.0rem;

	.btn-edit-node {
		display: none !important;
	}

	.edit-chart-node {
		display: none;
	}

	.node-edit-icon {
		display: none;
	}

	.node-info {
		display: none;
	}

	.node-title {
		display: none;
	}

	.node-connections {
		display: none;
	}

	.node-name {
		font-size: 0.85rem;
		line-height: 1.35;
	}

	.node-image {
		width: 1.5rem;
		height: 1.5rem;
	}

	.node-meta {
		align-items: baseline;
	}
}

// horizontal hierarchy tree view
.hierarchy {
	display: flex;
	padding-top: 30px;
}

.hierarchy li {
	list-style-type: none;
}

.child-node {
	margin: 0px 0px 16px 0px;
}

.level {
	margin-right: 8px;
}

#arrows {
	position: absolute;
}

.active-connector {
	stroke: var(--blue-500);
}

.collapsed-connector {
	stroke: var(--blue-300);
}