/*------------------------------------*\
    COMPARE CHART
\*------------------------------------*/
.compare-chart {
	padding: 2rem;
}
.chart-header {
	background: var(--dark-gray);
	color: #fff;
	text-align: center;
	align-items:center;
}
.chart-header .title {
	font-size: var(--small-font);
}
.compare-chart .chart-row > div {
	text-align:center;
	padding: 0.5rem 1rem;
}
.compare-chart .chart-row img {
	width:100px;
}
.chart-row:nth-child(2n) {
	background-color: var(--light-gray);
}
.chart-body {
	border: 1px solid var(--border-color);
}
.chart-row {
	align-items: center;
}
.compare-chart .name {
	font-weight: 600;
	font-size: 110%;
}
.compare-chart .view-product {
	background: var(--secondary-color);
	border-radius: 50px;
	color: #fff;
	font-weight: 400;
	padding: 0.25rem;
	margin: 0.5rem auto;
	transition:all 0.5s ease;
}
.compare-chart .gist {
	margin: 0;
	border-top: 1px solid rgba(0,0,0,0.05);
	font-size: var(--small-font);
	display:none;
}
.chart-row .btn {
	padding: 0.2rem 1rem;
	margin: 0.5rem 0 0;
	font-size: 12px;
}
.compare-chart .image {
	background: #fff;
}
.label {
	font-weight: 600;
}
.header-cell {
	
	padding: 0.5rem 1rem;
	position:relative;
	cursor: pointer;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}
.header-cell .title {
	flex-grow: 1;
	padding-right:0.5em;
}
.header-cell .icon {
	flex-grow: 1;
	padding: 0.5em;
	display: flex;
}
.header-cell i {
	color: grey;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
}
.header-cell i.current-active-sorting-white {
	color: #fff;
}
@media only screen and (max-width: 640px) {
	.chart-row .data {
		text-align: left;
	}
	.chart-row .name {
		font-size: var(--large-font);
	}
}