/* talents */

a.header {
 text-decoration: none;
 border-bottom: 0;
}

img[src*="classname"] {
 opacity: 0;
 display: none !important;
}

.buildmenu {
 display: flex;
 margin: 0;
 gap: 1rem;
 flex-wrap: wrap;
}

.buildmenu div {
 background: #101010;
 border-radius: 8px;
 padding: .5rem;
 width: calc(50% - 1rem);
}

.trees {
 display: flex;
 flex-direction: row;
 gap: 1rem;
 font-family: open sans, verdana, sans-serif !important;
}

.tree {
 flex: 1;
 background: #101010;
 border-radius: 8px;
 display: flex;
 flex-direction: column;
}

.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-family: open sans, verdana, sans-serif !important;
 padding: .5rem .7rem;
 font-size: .7rem;
}
.header * {
 font-size: 1rem;
 font-weight: bold;
}
.header.separate {
 background: #101010;
 margin: 0 0 1rem;
 border-radius: 8px;
}

.header .characterclass {
 vertical-align: middle;
 font-size: 1.5rem;
}

.talents {
 padding: 1rem;
 background-size: 125% 100%;
 background-position: center center;
 box-shadow: inset 0 0 30px 10px #101010;
}

.talents table { zoom: 125% }

tbody {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

tr {
 display: flex;
 flex-direction: row;
 gap: 1rem;
 justify-content: center;
}

.talent {
 width: 50px;
 height: 50px;
}

.talent .container {
 display: inline-block;
 position: relative;
}

.talent img {
 width: 100%;
 border: 1.4px solid #999;
 cursor: pointer;
 border-radius: 5px;
 box-shadow: 0px 1px 6px 1px #000;
}

.talent img.gray, .talent img.done {
 border-color: #999;
 -webkit-filter: grayscale(95%); 
}
.talent img.green { border-color: #3EA749 }
.talent img.yellow { border-color: #D8B20B }
.talent img.red { border-color: #F00 }

.red { color: #ff4040 !important }
.gray, .done { color: #999 !important }
.green { color: #1AFF1A !important }
.yellow { color: #FFD100 !important }
.white { color: #FFF !important }

.arrow.green { filter: invert(30%) sepia(12%) saturate(3271%) hue-rotate(72deg) brightness(113%) contrast(115%) }
.arrow.yellow { filter: invert(74%) sepia(29%) saturate(1843%) hue-rotate(2deg) brightness(108%) contrast(106%) }

.arrow img {
 border: 0;
 box-shadow: none;
 cursor: default;
}

.arrowdown1 {
 display: flex;
 position: absolute;
 bottom: 48px;
 left: 14px;
 width: 25px;
}

.arrowdown2 {
 display: flex;
 position: absolute;
 bottom: 48px;
 left: 14px;
 width: 25px;
}

.arrowdown3 {
 display: flex;
 position: absolute;
 bottom: 48px;
 left: 14px;
 width: 25px;
}	   	   

.arrowacrossright {
  display: flex;
  position: absolute;
  top: 14px;
  right: 43px;
  width: 25px;
}

.arrowacrossleft {
 display: flex;
 position: absolute;
 top: 0;
 left: 1.75rem;
 width: 1rem;
 padding: calc(1.75rem/4) 0;
}   

.arrowdownright {
  display: flex;
  position: absolute;
  bottom: 51px;
  left: -19px;
  width: 55px;
}

.arrowdownleft {
  display: flex;
  position: absolute;
  bottom: 51px;
  right: -19px;
  width: 55px;
}

.arrowdown2right {
  display: flex;
  position: absolute;
  bottom: 49px;
  left: -19px;
  width: 55px;
}

.arrowdown2left {
  display: flex;
  position: absolute;
  bottom: 49px;
  right: -19px;
  width: 55px;
}

.talent .mouseOverHide {
 position: absolute;
 bottom: 2.25rem;
 left: 2rem;
 width: 300px;
 display: none;
 border: 1.4px solid #999;
 padding: 10px;
 z-index: 2;
 background: rgba(0, 10, 40, .9);
 border-radius: 5px;
 box-shadow: 0px 1px 6px 1px #000;
}

.tree:last-child .talent .mouseOverHide {
 left: unset;
 right: 2rem;
}

.mouseOverHide p {
 font-size: 8pt;
 text-align: left;
 line-height: 1.5;
 margin: 0;
 padding: 0;
}
.mouseOverHide p.description { color: #ffd100 }

.talent .talentRank {
 position: absolute;
 bottom: 0px;
 right: -8px;
 background: rgba(0,0,0,.8);
 padding: 0 3px;
 border-radius: 4px;
 font-size: 12px;
 cursor: default;
 color: #F00;
 z-index: 1;
}

.talent .talentTooltipNameStyle {
 font-size: 10pt;
 font-weight: bold;
 
}
.talent .talentTooltipRankStyle {
 font-size: 10pt;
 font-weight: bold;
 float: right;
}

.debug { display: none }

.resetbutton {
 border: 2px solid #404040;
 background: #000;
 color: #FFF;
 text-align: center;
 margin: .7rem 1rem;
 padding: .25rem 0;
 border-radius: 5px;
 font-size: .7rem;
}
.resetbutton i {
 position: relative;
 top: -.5px;
 margin-right: 1ch;
 color: #c0392b;
 font-size: .65rem;
}
.resetbutton:hover {
 cursor: pointer;
 background: #101010;
}
.resetbutton:hover i { color: #e74c3c }