@import url("s2r://panorama/styles/dotastyles.css");
@import url("s2r://panorama/styles/hudstyles.css");
@import url("file://{resources}/styles/shared/variables.css");

#Contents {
  padding: 12px 12px 8px;
  background-color: gradient(linear, 0% 0%, 0% 100%, from (#181b1d), to (#22292f));
}

.TooltipStatBranchRoot {
  flow-children: down;
  width: 430px;
  height: fit-children;
}

.TooltipStatBranchTitle {
  horizontal-align: center;
  height: 24px;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #e1e1e1;
  text-shadow: 0 0 4px 2 #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  vertical-align: top;
}

#TooltipStatBranchContainer {
  flow-children: down;
  width: 100%;
}

.TooltipStatBranchRow {
  width: 100%;
}

.TooltipStatBranchRow .Branch {
  width: 50%;
  height: 45px;
  padding: 8px 4px 0;
}

.TooltipStatBranchRow .Branch.BranchLeft {
  padding-right: 20px;
  background-color: gradient(linear, 0% 0%, 100% 0%, from (#0e1011), to (#22292f00));
}

.TooltipStatBranchRow .Branch.BranchRight {
  horizontal-align: right;
  padding-left: 20px;
  tooltip-position: right;
  background-color: gradient(linear, 0% 0%, 100% 0%, from (#22292f00), to (#0e1011));
}

.TooltipStatBranchRow .Branch .BranchChoice {
  width: 100%;
  height: 100%;
}

.TooltipStatBranchRow .Branch.BranchLeft .BranchChoice {
  tooltip-position: left;
}

.TooltipStatBranchRow .Branch .StatBonusLabel {
  horizontal-align: middle;
  font-size: 15px;
  line-height: 16px;
  color: #676e70;
  text-align: center;
  text-overflow: clip;
  text-shadow: 1px 1px 2px 2 #0006;
  vertical-align: middle;
}

.TooltipStatBranchRow.BranchRightSelected .Branch.BranchRight .StatBonusLabel,
.TooltipStatBranchRow.BranchLeftSelected .Branch.BranchLeft .StatBonusLabel {
  color: #e7d291c8;
  text-shadow: 0 0 1px 1.3 #ec780e24;
}

.TooltipStatBranchRow .CenterNode {
  flow-children: right;
  horizontal-align: center;
}

.TooltipStatBranchRow .CenterNode .LevelBG {
  width: 52px;
  height: 52px;
  margin-bottom: -1px;
  background-image: statBranchLevelBgHud;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
}

.TooltipStatBranchRow .CenterNode .HeroLevelLabel {
  z-index: 50;
  horizontal-align: center;
  width: 30px;
  margin-top: 14px;
  margin-right: 1px;
  font-family: monospaceNumbersFont;
  font-size: 20px;
  font-weight: normal;
  color: #e7d291;
  text-align: center;
  text-shadow: 0 0 3px 3.7 #ec780e24;
}
