.pie-block {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.pie-block > div {
	width: 100%;
}

.pie-block > div.pie-area {
	width: 80%;
	text-align: center;
}

.pie-data {
	display: flex;
	flex-direction: column;
	margin: auto 0;
}

.pie-data > .data-cell {
	display: flex;
	line-height: 1.2rem;
	padding: 0.5rem;
}

.data-cell > .light {
	flex-grow: 0;
	flex-shrink: 0;
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	margin-right: 0.5rem;
}

.data-cell > .desc {
	width: 100%;
	margin-right: 0.5rem;
}

.data-cell > .rate {
	width: 40%;
	text-align: center;
}

.data-cell > div {
	position: relative;
	padding: 0;
}

.data-cell > div[data-desc] {
	text-align: right;
	z-index: 2;
}

.data-cell > div[data-unit] {
	padding-right: 3rem;
	z-index: 2;
}

.data-cell > .rate[data-unit] {
	padding-right: 1.25rem;
}

.data-cell > [data-desc]:before {
	content: attr(data-desc);
	position: absolute;
	z-index: 1;
	left: 0;
	opacity: 0.75;
}

.data-cell > [data-unit]:after {
	content: attr(data-unit);
	position: absolute;
	z-index: 1;
	right: 0;
	opacity: 0.75;
}