#popup-compare.chart-loaded #compare,
#popup-compare #chart {
	display: none;
}

#popup-compare.chart-loaded #chart {
	display: inherit;
	padding: 50px;
}

.content-compare .attribute:not(*:last-child) {
	border-bottom: 1px solid #ebecec;
	margin-bottom: 5px;
}

.head-compare {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 20px;
	padding: 8px;
}

.content-compare .attribute>div,
.head-compare>div {
	padding: 8px;
}

.content-compare .attribute-name {
	font-weight: 900;
}

select#compare_product {
	background-color: transparent;
	padding: 5px;
}

.head-compare .name {
	font-weight: 900;
	color: var(--e-global-color-primary);
}

.product-link.active a#compare-product-link {
	display: block !important;
}

a#compare-product-link {
	display: none;
	color: #fff;
	background-color: var(--e-global-color-primary);
	border-radius: 500px;
	padding: 5px 10px;
	border: 1px solid var(--e-global-color-primary);
	width: 100%;
	text-align: center;
}

.content-compare .attribute {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#compare-wrapper {
	padding-bottom: 50px;
}

a#compare-product-link:hover {
	color: var(--e-global-color-primary);
	background-color: #fff;
}

a#view-chart {
	padding: 5px 10px;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 500px;
	color: var(--e-global-color-primary);
}

a#view-chart:hover {
	color: #fff;
	background-color: var(--e-global-color-primary);
}

a#view-chart svg use {
	fill: var(--e-global-color-primary);
}

a#view-chart svg {
	margin-left: 10px;
}

a#view-chart:hover svg use {
	fill: #fff;
}

.head-compare.loading .products-select:before,
.head-compare.loading .product-link:before {
	content: '';
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	background-color: rgb(255 255 255 / 50%);
	cursor: progress;
}

.head-compare.loading .products-select,
.head-compare.loading .product-link {
	position: relative;
}

@media (max-width: 767px) {

	.content-compare .attribute>div,
	.head-compare>div {
		padding: 8px;
	}

	a#view-chart {
		font-size: 10px;
	}

	a#view-chart svg {
		width: 10px;
		padding-top: 6px;
	}

	.content-compare .attribute-name {
		font-size: 12px;
	}

	.content-compare .attribute>div,
	.head-compare>div {
		font-size: 12px;
	}

	select#compare_product {
		font-size: 10px;
	}

	#popup-compare.chart-loaded #chart {
		padding: 0px;
	}
}