#talent-template,
#talent-tree-template {
	display: none;
}

.iconmedium.empty .icon-border {
	background-position: 0px 0px;
}

.iconmedium.empty .icon {
	filter: grayscale(100%);
	opacity: 0.7;
}

.iconmedium.notfull .icon-border {
	background-position: -84px 0px;
}

.iconmedium.full .icon-border {
	background-position: -42px 0px;
}

.iconmedium .icon-border {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 1px;
	top: 1px;
	background-repeat: no-repeat;
}

.iconmedium a span {
	display: none;
}

.iconmedium::after {
	content: attr(rank);
	background-color: black;
	position: absolute;
	top: 30px;
	left: 30px;
	font-size: 14px;
	padding: 0px 2px;
}

.iconmedium.empty::after {
	display: none;
}

.iconmedium.full::after,
.iconmedium.notfull::after {
	border-radius: 4px;
	cursor: default;
	user-select: none;
	pointer-events: none;
}

.iconmedium.notfull::after {
	color: #30ec30;
	border: 1px solid #30ec30;
}

.iconmedium.full::after {
	color: #ffcf00;
	border: 1px solid #ffcf00;
}

#talents-spec-0.hidden,
#talents-spec-1.hidden {
	display: none;
}

.talent-tree .header {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}

.talent-tree .cols {
	display: flex;
	justify-content: center;
	gap: 14px;
}

.talent-tree .cols .col {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#spec-links {
	margin-bottom: 32px;
}