/*
.ci-talents .dragonflight-talent-trees{
	position:relative;
}

.ci-talents .dragonflight-talent-tree-icons{
	position:relative;
}

.ci-talents .ci-talent-lines{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.ci-talents .ci-talents-code code{
	white-space:normal;
}

.ci-talents .dragonflight-talent-tree-grid-class,
.ci-talents .dragonflight-talent-tree-grid-spec{
	display:grid;
	grid-template-columns:repeat(9, 0.2fr);
	grid-template-rows:repeat(5, 0.1fr);
	gap:0;
	position:relative;
}

.ci-talents .dragonflight-talent-tree-grid-hero{
	display:grid;
	grid-template-columns:repeat(5, 0.2fr);
	grid-template-rows:repeat(5, 0.1fr);
	gap:0;
	position:relative;
}

.ci-talents .dragonflight-talent-tree-talent{
	width:56px;
	height:56px;
	margin:7% 7%;
	position:relative;
}

.ci-talents .talent-tree-point-block{
	position:absolute;
	bottom:-6px;
	right:-6px;
	background:rgba(0,0,0,.7);
	border-radius:6px;
	padding:0 6px;
	font-size:11px;
	line-height:18px;
}

.ci-talents .talent-tree-icon-image,
.ci-talents .talent-tree-icon-image-left,
.ci-talents .talent-tree-icon-image-right{
	width:56px;
	height:56px;
	background-size:cover;
	background-position:center;
	border-radius:8px;
}

*/





.talent-tree-class,
.talent-tree-spec{
width:99%;
display:inline-grid}
.talent-tree-icon-border.unavailable div{
filter:grayscale(1)}
.talent-tree-icon-border.unavailable .hex-background div{
filter:grayscale(1)}
.talent-tree-icon-container{
display:grid;
grid-template-columns:repeat(25,.9fr);
grid-template-rows:repeat(20,.9fr);
position:relative;
height:700px}

.talent-tree-icon-container [data-col="1"] {
	grid-column: 1 / 3
}

.talent-tree-icon-container [data-col="2"] {
	grid-column: 2 / 4
}

.talent-tree-icon-container [data-col="3"] {
	grid-column: 3 / 5
}

.talent-tree-icon-container [data-col="4"] {
	grid-column: 4 / 6
}

.talent-tree-icon-container [data-col="5"] {
	grid-column: 5 / 7
}

.talent-tree-icon-container [data-col="6"] {
	grid-column: 6 / 8
}

.talent-tree-icon-container [data-col="7"] {
	grid-column: 7 / 9
}

.talent-tree-icon-container [data-col="8"] {
	grid-column: 8 / 10
}

.talent-tree-icon-container [data-col="9"] {
	grid-column: 9 / 11
}

.talent-tree-icon-container [data-col="10"] {
	grid-column: 10 / 12
}

.talent-tree-icon-container [data-col="11"] {
	grid-column: 11 / 13
}

.talent-tree-icon-container [data-col="12"] {
	grid-column: 12 / 14
}

.talent-tree-icon-container [data-col="13"] {
	grid-column: 13 / 15
}

.talent-tree-icon-container [data-col="14"] {
	grid-column: 14 / 16
}

.talent-tree-icon-container [data-col="15"] {
	grid-column: 15 / 17
}

.talent-tree-icon-container [data-col="16"] {
	grid-column: 16 / 18
}

.talent-tree-icon-container [data-col="17"] {
	grid-column: 17 / 19
}

.talent-tree-icon-container [data-col="18"] {
	grid-column: 18 / 19
}
.talent-tree-icon-container [data-col="19"] {
	grid-column: 19 / 19
}
.talent-tree-icon-container [data-col="20"] {
	grid-column: 20 / 20
}

.talent-tree-icon-container [data-row="1"] {
	grid-row: 1
}

.talent-tree-icon-container [data-row="2"] {
	grid-row: 2
}

.talent-tree-icon-container [data-row="3"] {
	grid-row: 3
}

.talent-tree-icon-container [data-row="4"] {
	grid-row: 4
}

.talent-tree-icon-container [data-row="5"] {
	grid-row: 5
}

.talent-tree-icon-container [data-row="6"] {
	grid-row: 6
}

.talent-tree-icon-container [data-row="7"] {
	grid-row: 7
}

.talent-tree-icon-container [data-row="8"] {
	grid-row: 8
}

.talent-tree-icon-container [data-row="9"] {
	grid-row: 9
}

.talent-tree-icon-container [data-row="10"] {
	grid-row: 10
}
.talent-tree-icon-container [data-row="11"] {grid-row: 11}
.talent-tree-icon-container [data-row="12"] {grid-row: 12}
.talent-tree-icon-container [data-row="13"] {grid-row: 13}
.talent-tree-icon-container [data-row="14"] {grid-row: 14}
.talent-tree-icon-container [data-row="15"] {grid-row: 15}
.talent-tree-icon-container [data-row="16"] {grid-row: 16}
.talent-tree-icon-container [data-row="17"] {grid-row: 17}
.talent-tree-icon-container [data-row="18"] {grid-row: 18}
.talent-tree-icon-container [data-row="19"] {grid-row: 19}
.talent-tree-icon-container [data-row="20"] {grid-row: 20}
[data-line-row="5"]{
grid-row:8}
[data-line-row]{
grid-column:1/-1}
[data-line-row="8"]{
grid-row:14}
.talent-tree-required-line{
stroke:#151515;
stroke-width:3;
z-index:1}
svg{
width:100%;
height:100%}
.talent-tree-icon-wrapper{
position:relative;
top:-10px}
.talent-tree-icon-wrapper svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0}
.talent-tree-icon-border.available .hex{
background:rgba(64,
191,
64,
.8)}
.talent-tree-icon-border.selected .hex{
background:#ffda24}
.talent-tree-icon-border.unavailable .hex{
background-color:#a9a9a9}
.hex{
display:block;
margin:0 auto;
position:relative;
width:30px;
height:30.64px;
box-sizing:border-box;
}
.hex-background{
position:absolute;
background-color:orange;
width:30px;
height:23.64px;
}
.hex img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
-webkit-clip-path:polygon(0% 50%,
25% 0,
75% 0,
100% 50%,
75% 100%,
25% 100%);
-moz-clip-path:polygon(0% 50%,
25% 0,
75% 0,
100% 50%,
75% 100%,
25% 100%)}
.talent-tree-icon-image-left{
width:50%;
position:absolute;
left:0;
height:30px;
background-size:30px 30px}
.talent-tree-icon-image-right{
width:50%;
position:absolute;
right:0;
height:30px;
background-size:30px 30px}
.talent-tree-point-line hr{
border:0;
border-top:1px dotted red;
color:#000;
background-color:#000;
height:1px;
width:200%}
.talent-tree-point-line span{
position:relative;
left:90%}
.talent-tree-dual-container{
position:absolute;
top:-40px}
.talent-tree-dual-container .talent-tree-icon-border.circle{
display:inline-block}
.talent-tree-dual-container .talent-tree-icon-image{
width:36px;
height:36px;
background-size:100%;
border-radius:8px;
margin:5px}
.p-talentCalc-spec-nav li{
display:inline-block;
float:none;
padding:5px}
.p-talentCalc-spec-nav h3{
clear:none}
.p-talentCalc-spec-nav ul{
float:right;
display:contents}
.talent-tree-required-line{
stroke:#a9a9a9}
.talent-tree-required-line.selected,
.talent-tree-required-line.available{
stroke:#ffda24!important}
.p-talentCalc-spec-nav{
height:100px;
text-align:center}
.p-newTalentCalc-content{
background-size:cover;
background-repeat:no-repeat;
background-position-x:right}
.talent-calc-bg-druid-balance{
background-image:url(images/new-talent-calc/talentbg-druid-balance.jpg)}
.talent-calc-bg-druid-feral{
background-image:url(images/new-talent-calc/talentbg-druid-feral.jpg)}
.talent-calc-bg-druid-guardian{
background-image:url(images/new-talent-calc/talentbg-druid-guardian.jpg)}
.talent-calc-bg-druid-restoration{
background-image:url(images/new-talent-calc/talentbg-druid-restoration.jpg)}
.talent-calc-bg-death-knight-blood,
.talent-calc-bg-deathknight-blood{
background-image:url(images/new-talent-calc/talentbg-death-knight-blood.jpg)}
.talent-calc-bg-death-knight-frost,
.talent-calc-bg-deathknight-frost{
background-image:url(images/new-talent-calc/talentbg-death-knight-frost.jpg)}
.talent-calc-bg-death-knight-unholy,
.talent-calc-bg-deathknight-unholy{
background-image:url(images/new-talent-calc/talentbg-death-knight-unholy.jpg)}
.talent-calc-bg-demon-hunter-havoc,
.talent-calc-bg-demonhunter-havoc{
background-image:url(images/new-talent-calc/talentbg-demon-hunter-havoc.jpg)}
.talent-calc-bg-demon-hunter-vengeance,
.talent-calc-bg-demonhunter-vengeance{
background-image:url(images/new-talent-calc/talentbg-demon-hunter-vengeance.jpg)}

.talent-calc-bg-evoker-devastation{
background-image:url(images/new-talent-calc/talentbg-evoker-devastation.jpg)}
.talent-calc-bg-evoker-preservation{
background-image:url(images/new-talent-calc/talentbg-evoker-preservation.jpg)}
.talent-calc-bg-evoker-augmentation{
background-image:url(images/new-talent-calc/talentbg-evoker-augmentation.jpg)}

.talent-calc-bg-hunter-beast-mastery,
.talent-calc-bg-hunter-beastmastery{
background-image:url(images/new-talent-calc/talentbg-hunter-beastmastery.jpg)}
.talent-calc-bg-hunter-marksmanship{
background-image:url(images/new-talent-calc/talentbg-hunter-marksmanship.jpg)}
.talent-calc-bg-hunter-survival{
background-image:url(images/new-talent-calc/talentbg-hunter-survival.jpg)}
.talent-calc-bg-mage-arcane{
background-image:url(images/new-talent-calc/talentbg-mage-arcane.jpg)}
.talent-calc-bg-mage-fire{
background-image:url(images/new-talent-calc/talentbg-mage-fire.jpg)}
.talent-calc-bg-mage-frost{
background-image:url(images/new-talent-calc/talentbg-mage-frost.jpg)}
.talent-calc-bg-monk-brewmaster{
background-image:url(images/new-talent-calc/talentbg-monk-brewmaster.jpg)}
.talent-calc-bg-monk-mistweaver{
background-image:url(images/new-talent-calc/talentbg-monk-mistweaver.jpg)}
.talent-calc-bg-monk-windwalker{
background-image:url(images/new-talent-calc/talentbg-monk-windwalker.jpg)}
.talent-calc-bg-paladin-holy{
background-image:url(images/new-talent-calc/talentbg-paladin-holy.jpg)}
.talent-calc-bg-paladin-protection{
background-image:url(images/new-talent-calc/talentbg-paladin-protection.jpg)}
.talent-calc-bg-paladin-retribution{
background-image:url(images/new-talent-calc/talentbg-paladin-retribution.jpg)}
.talent-calc-bg-priest-holy{
background-image:url(images/new-talent-calc/talentbg-priest-holy.jpg)}
.talent-calc-bg-priest-shadow{
background-image:url(images/new-talent-calc/talentbg-priest-shadow.jpg)}
.talent-calc-bg-priest-discipline{
background-image:url(images/new-talent-calc/talentbg-priest-discipline.jpg)}
.talent-calc-bg-rogue-assassination{
background-image:url(images/new-talent-calc/talentbg-rogue-assassination.jpg)}
.talent-calc-bg-rogue-outlaw{
background-image:url(images/new-talent-calc/talentbg-rogue-outlaw.jpg)}
.talent-calc-bg-rogue-subtlety{
background-image:url(images/new-talent-calc/talentbg-rogue-subtlety.jpg)}
.talent-calc-bg-shaman-elemental{
background-image:url(images/new-talent-calc/talentbg-shaman-elemental.jpg)}
.talent-calc-bg-shaman-enhancement{
background-image:url(images/new-talent-calc/talentbg-shaman-enhancement.jpg)}
.talent-calc-bg-shaman-restoration{
background-image:url(images/new-talent-calc/talentbg-shaman-restoration.jpg)}
.talent-calc-bg-warlock-affliction{
background-image:url(images/new-talent-calc/talentbg-warlock-affliction.jpg)}
.talent-calc-bg-warlock-demonology{
background-image:url(images/new-talent-calc/talentbg-warlock-demonology.jpg)}
.talent-calc-bg-warlock-destruction{
background-image:url(images/new-talent-calc/talentbg-warlock-destruction.jpg)}
.talent-calc-bg-warrior-arms{
background-image:url(images/new-talent-calc/talentbg-warrior-arms.jpg)}
.talent-calc-bg-warrior-fury{
background-image:url(images/new-talent-calc/talentbg-warrior-fury.jpg)}
.talent-calc-bg-warrior-protection{
background-image:url(images/new-talent-calc/talentbg-warrior-protection.jpg)}
.p-talentCalc-a .p-talentCalc-content h2{
margin-left:15px}
.p-talentCalc-a .p-talentCalc-content h2{
margin-left:15px}
.talent-tree-points-class{
margin-left:15px}
.talent-tree-point-block{
background-color:#000;
width:2em;
position: absolute;
    bottom: -13px;
    right: -13px;
border-radius:5px;
color:#fff;
text-align:center;
border:1px solid grey}
.p-newTalentCalc-content{
		padding: 10px;
width:99%}
.talent-tree-class h2,
.talent-tree-spec h2{
	color:#fff;
	text-align: center;
}
.talent-tree-class span,
.talent-tree-spec span{
color:#fff;
font-size: 12px;}
.talent-tree-point-line span{
color:#fff}
.talent-tree-header span{
margin-left:15px;
padding-top:17px}
.talent-calc-bg-warrior-arms .talent-tree-spec .talent-tree-icon-container,
.talent-calc-bg-warrior-fury .talent-tree-spec .talent-tree-icon-container{
grid-template-columns:repeat(20,
36px)!important}
.talent-calc-bg-paladin .talent-tree-icon-border{
margin-left:-50px}
.talent-calc-bg-deathknight-frost .talent-tree-spec .talent-tree-icon-container{
grid-template-columns:repeat(20,
30px)!important}
.talent-calc-bg-rogue .talent-tree-class .talent-tree-icon-container{
margin-left:10px}

.dragonflight-talent-tree-talent [data-col="1"] {
	grid-column: 1 / 3
}

.dragonflight-talent-tree-talent [data-col="2"] {
	grid-column: 2 / 4
}

.dragonflight-talent-tree-talent [data-col="3"] {
	grid-column: 3 / 5
}

.dragonflight-talent-tree-talent [data-col="4"] {
	grid-column: 4 / 6
}

.dragonflight-talent-tree-talent [data-col="5"] {
	grid-column: 5 / 7
}

.dragonflight-talent-tree-talent [data-col="6"] {
	grid-column: 6 / 8
}

.dragonflight-talent-tree-talent [data-col="7"] {
	grid-column: 7 / 9
}

.dragonflight-talent-tree-talent [data-col="8"] {
	grid-column: 8 / 10
}

.dragonflight-talent-tree-talent [data-col="9"] {
	grid-column: 9 / 11
}

.dragonflight-talent-tree-talent [data-col="10"] {
	grid-column: 10 / 12
}

.dragonflight-talent-tree-talent [data-col="11"] {
	grid-column: 11 / 13
}

.dragonflight-talent-tree-talent [data-col="12"] {
	grid-column: 12 / 14
}

.dragonflight-talent-tree-talent [data-col="13"] {
	grid-column: 13 / 15
}

.dragonflight-talent-tree-talent [data-col="14"] {
	grid-column: 14 / 16
}

.dragonflight-talent-tree-talent [data-col="15"] {
	grid-column: 15 / 17
}

.dragonflight-talent-tree-talent [data-col="16"] {
	grid-column: 16 / 18
}

.dragonflight-talent-tree-talent [data-col="17"] {
	grid-column: 17 / 19
}

.dragonflight-talent-tree-talent [data-col="18"] {
	grid-column: 18 / 19
}
.dragonflight-talent-tree-talent [data-col="19"] {
	grid-column: 19 / 19
}
.dragonflight-talent-tree-talent [data-col="20"] {
	grid-column: 20 / 20
}

.dragonflight-talent-tree-talent [data-row="1"] {
	grid-row: 1
}

.dragonflight-talent-tree-talent [data-row="2"] {
	grid-row: 2
}

.dragonflight-talent-tree-talent [data-row="3"] {
	grid-row: 3
}

.dragonflight-talent-tree-talent [data-row="4"] {
	grid-row: 4
}

.dragonflight-talent-tree-talent [data-row="5"] {
	grid-row: 5
}

.dragonflight-talent-tree-talent [data-row="6"] {
	grid-row: 6
}

.dragonflight-talent-tree-talent [data-row="7"] {
	grid-row: 7
}

.dragonflight-talent-tree-talent [data-row="8"] {
	grid-row: 8
}

.dragonflight-talent-tree-talent [data-row="9"] {
	grid-row: 9
}

.dragonflight-talent-tree-talent [data-row="10"] {
	grid-row: 10
}
.dragonflight-talent-tree-talent [data-row="11"] {grid-row: 11}
.dragonflight-talent-tree-talent [data-row="12"] {grid-row: 12}
.dragonflight-talent-tree-talent [data-row="13"] {grid-row: 13}
.dragonflight-talent-tree-talent [data-row="14"] {grid-row: 14}
.dragonflight-talent-tree-talent [data-row="15"] {grid-row: 15}
.dragonflight-talent-tree-talent [data-row="16"] {grid-row: 16}
.dragonflight-talent-tree-talent [data-row="17"] {grid-row: 17}
.dragonflight-talent-tree-talent [data-row="18"] {grid-row: 18}
.dragonflight-talent-tree-talent [data-row="19"] {grid-row: 19}
.dragonflight-talent-tree-talent [data-row="20"] {grid-row: 20}

.grid-container {
  display: grid;
  	grid-template-columns: repeat(10,1fr);
	grid-template-rows: repeat(20,1fr);
  gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.dragonflight-talent-tree{
position:relative;
user-select:none
}

.dragonflight-talent-tree-space{
position:relative
}

.dragonflight-talent-tree-grid-class {
	display: grid;
	grid-template-columns: repeat(10, 2fr);
	grid-template-rows: repeat(10, 0.2fr);
	/*position: absolute;*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-items: center;
}

.dragonflight-talent-tree-grid-spec {
    display: grid;
    grid-template-columns: repeat(10, 2fr);
    grid-template-rows: repeat(10, 0.2fr);
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-items: center;
}

.dragonflight-talent-tree-grid-hero {
display: grid;
    grid-template-columns: repeat(5, 0.9fr);
    grid-template-rows: repeat(6, 0.1fr);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width: 100%; */
    align-content: space-around;
    justify-content: center;
    align-items: center;
    justify-items: stretch;
}

.dragonflight-talent-tree-grid[data-selecting] .dragonflight-talent-tree-talent{
pointer-events:none
}

.dragonflight-talent-tree-talent{
/*filter:grayscale(100%);*/
margin: 7% 7%;
position:relative;
z-index:20
}
.hex-frame {
	overflow: hidden;
}
.talent-tree-icons
{
	position:relative;
}

.dragonflight-talent-tree [data-column="1"] { grid-column: 1 / 3 }
.dragonflight-talent-tree [data-column="2"] { grid-column: 2 / 4 }
.dragonflight-talent-tree [data-column="3"] { grid-column: 3 / 5 }
.dragonflight-talent-tree [data-column="4"] { grid-column: 4 / 6 }
.dragonflight-talent-tree [data-column="5"] { grid-column: 5 / 7 }
.dragonflight-talent-tree [data-column="6"] { grid-column: 6 / 8 }
.dragonflight-talent-tree [data-column="7"] { grid-column: 7 / 9 }
.dragonflight-talent-tree [data-column="8"] { grid-column: 8 / 10 }
.dragonflight-talent-tree [data-column="9"] { grid-column: 9 / 11 }
.dragonflight-talent-tree [data-column="10"] { grid-column: 10 / 12 }
.dragonflight-talent-tree [data-column="11"] { grid-column: 11 / 13 }
.dragonflight-talent-tree [data-column="12"] { grid-column: 12 / 14 }
.dragonflight-talent-tree [data-column="13"] { grid-column: 13 / 15 }
.dragonflight-talent-tree [data-column="14"] { grid-column: 14 / 16 }
.dragonflight-talent-tree [data-column="15"] { grid-column: 15 / 17 }
.dragonflight-talent-tree [data-column="16"] { grid-column: 16 / 18 }
.dragonflight-talent-tree [data-column="17"] { grid-column: 17 / 19 }
.dragonflight-talent-tree [data-row="1"] { grid-row: 1 }
.dragonflight-talent-tree [data-row="2"] { grid-row: 2 }
.dragonflight-talent-tree [data-row="3"] { grid-row: 3 }
.dragonflight-talent-tree [data-row="4"] { grid-row: 4 }
.dragonflight-talent-tree [data-row="5"] { grid-row: 5 }
.dragonflight-talent-tree [data-row="6"] { grid-row: 6 }
.dragonflight-talent-tree [data-row="7"] { grid-row: 7 }
.dragonflight-talent-tree [data-row="8"] { grid-row: 8 }
.dragonflight-talent-tree [data-row="9"] { grid-row: 9 }
.dragonflight-talent-tree [data-row="10"] { grid-row: 10 }
.dragonflight-talent-tree [data-row="11"] { grid-row: 11 }
.dragonflight-talent-tree [data-row="12"] { grid-row: 12 }

.dragonflight-talent-trees-tree {
	/*margin: auto;
	max-width: 600px;*/
	margin: 0% auto;
}

.talent-tree-icon-border{
width:34px;
height:34px}
.talent-tree-icon-image{
width:30px;
height:30px}
.talent-tree-icon-border.unavailable div{
filter:grayscale(1)}
.talent-tree-icon-border.unavailable .hex-background div{
filter:grayscale(1)}
.talent-tree-icon-border{
	z-index:2;
	border: solid 2px gray;
    border-radius: 10px;
	}
.talent-tree-icon-border.selected{
	border: solid 2px yellow !important;
    border-radius: 10px;}

.dragonflight-talent-trees-tree-background {
	/*flex: 1;*/
	position: relative;
	width: 40%;
}

.tree-area-hero {
	width: 20% !important;
}


.dragonflight-talent-trees {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	justify-content: center;
	padding: 30px 0;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: right;
}
.dragonflight-talent-trees {
	margin: 0% auto;
}


.dragonflight-talent-tree-space svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
svg {
	width: 100%;
	height: 100%;
}
svg {
	overflow: hidden;
	vertical-align: middle;
}

.ci-talents-specs {
	display: flex;
	gap: 12px;
}

.ci-spec {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid #2b2b2b;
	cursor: pointer;
	background: #121212;
}
.ci-spec-name{
	color: #f8b700;
}
.ci-spec-status .active {
color: #0f0;
}
.ci-spec-meta {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: column;
}
.ci-spec.active {
	border-color: #f5c542;
	background: #1b1b1b;
}

.ci-talents-loadouts {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.ci-talents-spec {
margin-top: 12px;
}

.ci-loadout {
	padding: 6px 10px;
	border: 1px solid #333;
	cursor: pointer;
	background: #121212;
}

.ci-loadout.active {
	border-color: #f5c542;
	color: #f5c542;
}