:root {
  --baseChartColor: var(--uiBaseColor);
}

.chart {
  position: relative;
  display: flex;
  flex-direction: column;
}

.chart-title {
  color: #666;
  position: relative;
  text-align: center;
  font-size: 1.1em;
  letter-spacing: 0;
}

.chart-content {
  position: relative;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  margin: 0 auto;
}

.chart-content:before,
.chart-content:after {
  content: attr(data-ylabel);
  position: absolute;
  width: 100%;
  font-size: .8em;
  color: #888;
  text-align: center;
  opacity: .8;
  transition: opacity .3s;
}

.darkmode .chart-content:before,
.darkmode .chart-content:after {
  color: #ccc
}

.chart-content:before {
  content: attr(data-ylabel);
  left: calc(-0.8em - 50%);
  top: 50%;
  transform: rotate(-90deg);
}

.chart-content:after {
  content: attr(data-xlabel);
  left: 0%;
  top: 105%;
}

.block-chart {
  display: flex;
  align-items: flex-end;
  margin: 1.5em auto 1em auto;
}

.block-chart>div {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 .05em;
  min-height: 1px;
  background-color: var(--baseChartColor);
  color: #555;
  flex-grow: 1;
  opacity: .7;
  font-size: .7em;
  letter-spacing: 0;

  transition: opacity .4s, height 1.5s;
}

.block-chart>div:hover {
  opacity: 1;
}

.block-chart div:before,
.block-chart div:after {
  content: attr(data-val);
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  color: var(--baseChartColor);
  transform: translateY(-100%);
}


.block-chart div:after {
  content: attr(data-name);
  color: #555;
  top: auto;
  bottom: 0%;
  transform: translateY(100%);
}

.darkmode .block-chart div:after {
  color: #aaa;
}

/* block epoch chart */
.epoch-blocks {
  height: 350px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.epoch-blocks .current-luck {
  font-size: 1.1em;
  margin-top: 1em;
  color: var(--baseChartColor);
}

.epoch-blocks .block-chart {
  width: 35%;
  min-width: 100px;
  max-width: 500px;
  margin-top: 0;
}

.epoch-blocks .block-chart div {
  height: 70%;
  transition: opacity .4s, height 1.5s;
  font-size: 1em;
}

.epoch-blocks .block-chart div>div {
  position: relative;
  flex-grow: 1;
  height: 0%;
  background-color: var(--baseChartColor);
  color: var(--baseChartColor);

}

.epoch-blocks .estimated {
  background-color: rgba(0, 0, 0, .05);
  color: #aaa;
}

.darkmode .epoch-blocks .estimated {
  background-color: rgba(255, 255, 255, .1);
}

.epoch-blocks .estimated:before {
  color: #aaa;
  text-align: left;
  left: -1.5em;
  width: calc(100% + 1.5em);
  border-bottom: 2px dashed rgba(0, 0, 0, .1);
  font-size: .9em;
}

.darkmode .epoch-blocks .estimated:before {
  border-bottom: 2px dashed rgba(255, 255, 255, .25);
}

.epoch-blocks .estimated>div {
  opacity: .7;
  filter: saturate(.9);
}

.epoch-blocks .estimated>div:after {
  color: var(--baseChartColor);
  font-size: .9em;
  /*   left: auto;
  right: 0;
  width: 200%;
  text-align: right; */
}

.epoch-blocks .actual {
  background-color: transparent;
}

.epoch-blocks .actual:before {
  color: #aaa;
  text-align: right;
  right: -2.8em;
  width: calc(100% + 2.8em);
  border-bottom: 2px dashed rgba(0, 0, 0, .1);
  font-size: .8em;
}

.darkmode .epoch-blocks .actual:before {
  border-bottom: 2px dashed rgba(255, 255, 255, .25);
}

.epoch-blocks .actual>div:before {
  font-size: 1.6em;
}

.epoch-blocks .actual>div:after {
  color: var(--baseChartColor);
  font-size: .9em;
}

/* block history chart */
.block-history {
  height: 250px;
}

.block-history .block-chart {
  margin: 2em auto;
  width: 90%;
}


/* ROA history chart */
.roa-history {
  height: 250px;
}

.roa-history .block-chart {
  margin: 2em auto;
  width: 90%;
}

/* svg stake pie-chart */
.stake-chart {
  position: relative;
  height: 300px;
}

.stake-chart svg {
  width: 100%;
  height: 100%;
}

.stake-chart circle {
  fill: transparent;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dasharray 1.5s, opacity .3s;
  stroke-width: 25;
  opacity: .8;
}

.stake-chart circle:hover {
  opacity: 1;
}

.stake-chart #active,
.stake-chart #active-saturated {
  stroke: var(--baseChartColor);
  opacity: .3;
  stroke-dasharray: 0 800;
}

.stake-chart #active:hover {
  opacity: .4;
}

.stake-chart #available {
  stroke: rgba(0, 0, 0, .1);
}

.darkmode .stake-chart #available {
  stroke: rgba(255, 255, 255, .1);
}

.stake-chart #live {
  stroke: var(--baseChartColor);
  stroke-dasharray: 0 800;
}

.stake-chart #active-saturated,
.stake-chart #live-saturated {
  stroke: #aa0000;
  opacity: .5;
  filter: brightness(50%);
  stroke-dasharray: 0 800;
  transition: stroke-dasharray .4s;
  transition-delay: 1s;
}

.stake-chart #live-saturated {
  opacity: 1;
}

.stake-chart #stake {
  fill: var(--baseChartColor);
  font-size: 1.4em;
}

.stake-chart #saturation {
  font-size: 1.2em;
}

/* stake legend */
.stake-legend {
  position: relative;
  width: 85%;
  min-width: 200px;
  margin: 1em auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  letter-spacing: 0px;
  font-size: .9em;
}

.stake-legend>div {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  padding: .2em;
}

.stake-legend>div:before {
  content: ' ';
  position: relative;
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  border-radius: .3em;
  margin: 0 .4em 0 0;
}


.stake-legend>.live:before {
  background-color: var(--baseChartColor);
  opacity: .8;
}

.stake-legend>.active:before {
  background-color: var(--baseChartColor);
  opacity: .4;
}

.stake-legend>.available:before {
  background-color: rgba(0, 0, 0, .15);
}

.darkmode .stake-legend>.available:before {
  background-color: rgba(255, 255, 255, .2);
}

.stake-legend>.available.saturated {
  color: #d00;
}

.stake-legend>.available.saturated:before {
  background-color: #d00;
  opacity: .8;
}

.stake-legend>div:after {
  content: attr(data-val);
  position: relative;
  flex-grow: 1;
  /*   vertical-align: middle; */
  text-align: right;
}