.compare-header {padding:40px 0}
.compare-header .group-title { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; background-color:#f6f6f6; border:1px #eee solid}
.compare-header h2 {flex:0 0 auto; padding:20px 30px}
.compare-header h2 span {display:inline-block; background:url(/templates/b2c/images/arrow-blue.png); width:6px; height:9px; margin:0 12px; vertical-align:middle}
.compare-header .remove-compare-set {flex:0 0 auto; font-size:13px; color:#666; padding:20px 30px; cursor:pointer;text-decoration: none;}
.compare-header .remove-compare-set .cross {vertical-align:middle; display:inline-block; color:var(--color-error-hex); font-size:17px; margin-right:4px}
.compare-header .remove-compare-set .text {vertical-align:middle;color: #a7a7a7;text-decoration: none;}
.compare-header .remove-compare-set .text:hover {text-decoration:underline}
.compare-header .group {position:relative; overflow-x:hidden; margin:-1px 0 50px 0; border:1px #eee solid; border-top:0 none}
.compare-header .group:last-child {margin-bottom:0}
.compare-header .content { display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap}
.compare-header .block { display:flex}
.compare-header .column {flex:0 0 300px; border-top:1px #eee solid; box-shadow:1px 0 0 #eee}
.compare-header .top {flex:0 0 100%}
.compare-header .top .column {position:relative; text-align:center; padding-bottom:80px}
.compare-header .top a.title {color:#000; text-decoration:none; font-family:Roboto, sans-serif; font-weight:700; display:block; padding:20px 20px 5px 20px; height:40px}
.compare-header .top a.title:hover {text-decoration:underline}
.compare-header .top a.image {display:block; height:260px; text-decoration:none}
.compare-header .top a.image img {width:auto; max-width:80%; height:auto; max-height:80%; vertical-align:middle; transition:all 300ms ease}
.compare-header .top a.image:hover img {transform:scale(1.075)}
.compare-header .top .middle {display:inline-block; height:100%; vertical-align:middle}
.compare-header .top .availability {margin:25px 15px 15px 15px; font-size:14px}
.compare-header .top .availability > span {color:#90bf11}
.compare-header .top .price {color:var(--color-01-hex); font-family:Roboto, sans-serif; font-weight:700; font-size:24px; margin:10px 0 25px 0}
.compare-header .top .remove-compare {font-size:15px; padding:20px 0; cursor:pointer;text-decoration: none;color: #a7a7a7;}
.compare-header .top .remove-compare .cross {vertical-align:middle; display:inline-block; color:var(--color-error-hex); font-size:17px; margin-right:4px}
.compare-header .top .remove-compare .text {vertical-align:middle}
.compare-header .top .remove-compare .text:hover {text-decoration:underline}
.compare-header .top .description {margin:20px 20px 0 20px; text-align:left; font-size:11px; line-height:1.4;height: 400px;overflow: auto;}
.compare-header .top .button {position:absolute; bottom:15px; left:15px; right:15px; text-align:left}
.compare-header .top .button .form-button {display:flex}
.compare-header .top a.variants {display:block; background-color:var(--color-02-hex); padding:15px 50px 14px 50px; color:#fff; font-size:18px; font-family:Roboto, sans-serif; font-weight:700; text-align:center; text-transform:uppercase; text-decoration:none; vertical-align:top}
.compare-header .top .quantity {position:relative; display:inline-block; vertical-align:top; padding-right:30px}
.compare-header .top .quantity span {position:absolute; right:0; display:block; background-color:#fff; width:30px; height:25px; line-height:25px; color:#a7a7a7; text-align:center; border:1px #e8e6e6 solid; border-right:0 none}
.compare-header .top .quantity span:hover {background-color:#f6f6f6; cursor:pointer}
.compare-header .top .plus {top:0}
.compare-header .top .minus {bottom:0; font-family:Roboto, sans-serif; font-weight:700}
.compare-header .top input[type=text] {vertical-align:top; border:1px #e8e6e6 solid; width:50px; font-size:14px; text-align:center; color:#231f20; padding:16px 0}
.compare-header .top input[type=button] {flex-grow:1; background-color:var(--color-02-hex); padding:16px 30px; color:#fff; font-size:16px; font-family:Roboto, sans-serif; font-weight:700; text-transform:uppercase; vertical-align:top}
.compare-header .params {flex:0 0 100%}
.compare-header .params .block .column {flex:0 0 270px; padding:8px 15px 8px 15px}

.compare-header .compare-draggable-info {position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); z-index:9999; display:none}
.compare-header .compare-draggable-info > div {position:absolute; top:0; right:0; bottom:0; left:0;  display:flex; justify-content:center; align-items:center}
.compare-header .compare-draggable-info .box {position:relative; background:#fff; padding:30px 50px; text-align:center; font-size:15px}
.compare-header .compare-draggable-info .close {position:absolute; top:0; right:-57px; width:57px; height:57px; background:#484848 url(/templates/b2c/images/popup-close.png) center center no-repeat; cursor:pointer}
.compare-header .compare-draggable-info .close:hover {background-image:var(--color-error-hex)}
.compare-header .compare-draggable-info .image {background:url(/templates/b2c/images/compare-draggable.png) center 0 no-repeat; height:123px; margin-top:20px}

.compare-property {
	display: grid;
	justify-content: left;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #F2F2F2;
}

.compare-property .label {
	font-weight: bolder;
	padding: 10px;
	text-align: left;
}

.compare-property .value {
	padding: 10px;
	text-align: left;
}


@media only screen and (max-width:740px) {
	.compare-header h2 {flex:0 0 100%; padding:15px 20px; font-size:14px}
	.compare-header .remove-compare-set {flex:0 0 100%; padding:7px 20px 15px 20px}
}

@media only screen and (max-width:560px) {
	.compare-header .compare-draggable-info .box {flex:0 0 calc(100% - 100px)}
	.compare-header .compare-draggable-info .close {top:-57px; right:0}
}