.label {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
}

.header {
	display: flex;
	justify-content: space-between;
}

.chart-wrap {
  margin: 8px 0 0;
	height: 84px;
}

.chart-wrap svg {
  height: 100%;
}

html[class~=dark] .stats, html[class~=dark] .tooltip {
	background-color: rgb(17, 17, 17);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

.stats {
  position: absolute;
	z-index: 10;
	display: flex;
	flex-direction: column;
	padding: 8px 16px;
	border-radius: 4px;
	background-color: #ffffff;
	box-shadow:
		rgb(255, 255, 255) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
		rgba(0, 0, 0, 0.1) 0px 1px 2px 0px,
		rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: 12px;
  line-height: 12px;
  text-align: left;
}

.stats-item {
  display: flex;
	align-items: center;
	color: #999;
}

.stats-item:not(:first-of-type) {
  margin-top: 8px;
}

html[class~=dark] .accent-text {
	color: #f0f0f0;
}

.accent-text {
	white-space: nowrap;
  color: #222;
  margin-left: 8px;
}

.tooltip-wrap, .tooltip-wrap-underline {
  position: relative;
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
}

.tooltip-wrap-underline {
  text-decoration: underline;
  text-decoration-style: dashed;
  cursor: help;
}

.tooltip-wrap-underline:hover .tooltip {
  display: flex;
}

html[class~=dark] .tooltip {
	color: #f0f0f0;
}

.tooltip {
  position: absolute;
	display: none;
	flex-direction: column;
	padding: 8px;
	white-space: nowrap;
	border-radius: 4px;
	background-color: #ffffff;
	box-shadow:
		rgb(255, 255, 255) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
		rgba(0, 0, 0, 0.1) 0px 1px 2px 0px,
		rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -4px);
	pointer-events: none;
	font-size: 12px;
	line-height: 12px;
	color: #222;
	text-align: left;
}


.success-icon-wrap {
  display: flex;
	width: 12px;
	margin-right: 4px;
}

.success-icon-wrap svg {
  color: #13862e;
  width: 100%;
  height: 100%;
}


html[class~=dark] .line {
	stroke: #47b7f8;
}

.line {
	stroke: #0b6ec5;
}

html[class~=dark] .color-stop-polygon {
	stop-color: #08204e;
}

.color-stop-polygon {
	stop-color: #e2f4ff;
}

html[class~=dark] .dashed-line {
	stroke: #414141;
}

.dashed-line {
	stroke: #e1e1e1;
}

html[class~=dark] .circle {
	fill: #111;
	stroke: #47b7f8;
}

.circle {
	fill: #ffffff;
	stroke: #0b6ec5;
}

html[class~=dark] .selected-line {
	stroke: #47b7f8;
}

.selected-line {
	stroke: #111;
}