.class-tree
{
	display: flex;
	flex-direction: column;
	width: calc(100% - 5rem);
	min-width: 10rem;
	max-width: 45rem;
	align-items: center;
}

.class-tree-row
{
	display: flex;
	width: 100%;
	justify-content: space-evenly;
	padding: 2rem;
	border-top: 1px solid white;
}

.class-tree-node
{
	border-radius: 0.25rem;
	border: 1px solid white;
	width: 4rem;
	height: 4rem;
	background-color: #555;
	align-content: end;
	user-select: none;

	background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
	&:hover
	{
		filter:brightness(1.2);
		z-index: 100;
	}

	.tooltiptext
	{
		max-width: 14rem;
	}

}

.talent-tooltip-title
{
	font-size: 1.1em;
    border-bottom: 1px solid white;
    width: 100%;
    display: inline-block;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Locked talent nodes  */
.class-tree-row[locked="true"] .class-tree-node, .class-tree-node[locked="true"]
{
	background-color: #533;
	filter: opacity(0.6);
}