.barberry-td-30 {
	width: 30%;
	@include breakpoint(500px down) {
		width: 100%;
		display: block;
		text-align: center;
	}
}

.barberry-td-40 {
	width: 40%;
	@include breakpoint(500px down) {
		width: 100%;
		display: block;
	}	
}

.static-content-position {
	position: relative;
}

.barberry-compare-list-bottom {
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	right: 0;
	@include transform(translate3d(0,100%,0));
	@include transition(transform .75s cubic-bezier(.19,1,.22,1));

	&:before {
	    content: "";
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
	    background-color: white;
	}


	&.barberry-active {
		@include transform(translate3d(0,0,0));
		@include transition(transform 1s cubic-bezier(.19,1,.22,1));
	}

	#barberry-compare-sidebar-content {
		position: relative;
		min-height: 120px;

	}	

	.barberry-loader {
		display: block;
		position: absolute;
		z-index: 9;
		opacity: 1;
		top:  calc(50% - 15px);
		left: calc(50% - 15px);
		width: 30px;
		height: 30px;
		@include loader(30px, 30px);

		&:after {
			border-top-color: #000;
			position: absolute;
		    top: 0;
		    left: calc(50% - 15px);
		}			
	}

	.barberry-compare-list {
		padding: 20px 0;
		position: relative;
		@include breakpoint(medium down) {
			padding: 0;
		}
		.compare-cells {
				.compare-cell {
					@include breakpoint(1200px down) {
						width: 100%;
						margin-left: 0;
						@include poly-fluid-sizing('padding-left', (768px:30px, 1200px:80px));
						@include poly-fluid-sizing('padding-right', (768px:30px, 1200px:80px));						
					}
				}
		}
		table {			
			tbody, tr {
				border:none;
			}
			margin: 0;
			border:none;
			tbody {
				tr {
					td {
						padding-left: 0;
					}
				}
			}
		}

		.compare_title_section {
			@include breakpoint(500px down) {
				padding-bottom: 5px;
			}			
			.barberry-compare-label {
				margin-bottom: 0;
				font-size: rem-calc(26);
				line-height: 1.4;
				font-weight: 600;

				@include breakpoint(1200px down) {
					font-size: rem-calc(22);
				}


				.barberry-block {
					display: block;
					@include breakpoint(500px down) {
						display: inline-block;
					}
					@include breakpoint(320px down) {
						display: block;
					}

					&.compare-count {
						font-size: rem-calc(12);
						line-height: rem-calc(12);
						font-weight: 400;
						text-transform: uppercase;
						letter-spacing: 2px;
						opacity: 0.5;
						@include breakpoint(1200px down) {
							font-size: rem-calc(12);
						}
						@include breakpoint(500px down) {
							letter-spacing: 1px;
							margin-left: 10px;
							@include breakpoint(320px down) {
								margin-left: 0;
							}
						}
					}
				}				
			}

		}

		.compare_products_section {

			@include breakpoint(small only) {
				display: none;
			}
			&.max-compare-2,
			&.max-compare-3,
			&.max-compare-4 {
				
				.cell {
					@include breakpoint(1400px down) {
						padding-left: rem-calc(15px);
						padding-right: rem-calc(15px);
					}
					@include breakpoint(1200px down) {
						padding-left: rem-calc(10px);
						padding-right: rem-calc(10px);
					}					
				}

			}

			.barberry-compare-wrap-item {
				position: relative;
				text-align: center;
				.barberry-compare-item {
					max-width: 100px;
					position: relative;
					margin: 0 auto;
					z-index: 2;					
					.barberry-no-image,
					.barberry-img-compare {
						display: inline-block;
						padding: 7px;
						border: 1px solid #EDEDED;
						@include transition(all 350ms ease);
						img {
							height: auto;							
						}
					}

					.barberry-img-compare {
						border-color:#fff;
						@include box-shadow(5px 5px 30px rgba(0,0,0,0.1))
					}

					.barberry-remove-compare {
						height: 18px;
						width: 18px;
						line-height: 22px;
						text-align: center;
						position: absolute;
						right:-5px;
						top: -5px;
						border-radius:50%;
						border:1px solid #000;
						background-color: #fff;
						visibility: hidden;
						opacity: 0;							
						&:before {
							position: absolute;
							left: calc(50% - 7px);
							top: calc(50% - 7px);
							
							font-size: 14px;
							@include barberry_icon('\ea2a');
						}

						&:hover {
							background-color: #000;
							&:before {
								color: #fff;
							}
						}						
					}

					&:hover {
						.barberry-remove-compare {
							z-index: 2;
							visibility: visible;
							opacity: 1;							
						}
					}
				}
				.barberry-compare-item-hover {
					position: absolute;
					bottom: 100%;
					width: 230px;
					left: 50%;
					padding-bottom: 20px;
					z-index: 0;
					visibility: hidden;
					opacity: 0;		
					@include transform(translateX(-50%));
					@include transition(all 350ms ease);

					.barberry-compare-item-hover-wraper {
						position: relative;
						padding: 15px;
						text-align: center;	
						background-color: #fff;
						-webkit-filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.1));
						filter        : drop-shadow(3px 3px 7px rgba(0,0,0,0.1));
						-ms-filter    : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#000')";
						filter        : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#000')";

						&:after {
							top: 100%;
							left: 50%;
							border: solid transparent;
							content: "";
							height: 0;
							width: 0;
							position: absolute;
							pointer-events: none;
							border-color: rgba(255, 255, 255, 0);
							border-top-color: #ffffff;
							border-width: 15px;
							margin-left: -15px;
						}	

						.product-title {
							font-weight: 400;
							margin-top: 15px;
							margin-bottom: 0;
							font-size: 18px;
							line-height: 1.2;
						}				
					}				
				}	
				&:hover {
					.barberry-compare-item-hover {
						background: #fff;
						z-index: 2;
						visibility: visible;
						opacity: 1;						
					}
				}			
			}
		}

		.compare_button_section {
			text-align: right;
			@include breakpoint(500px down) {
				padding-top: 0;
				text-align: center;
			}

			.barberry-compare-label {

				.barberry-compare-clear-all {
					display: inline-block;
					position: relative;
					padding-left: 20px;
					margin-right: 10px;
					vertical-align: middle;
					font-weight: 400;
				    font-size: rem-calc(11);
				    line-height: rem-calc(11);
					color: inherit;
					text-transform: uppercase;	
				    &:hover {
				    	opacity: .6;
				    }

					&:before {
						position: absolute;
						left: 0;
						top: -4px;
						width: 10px;
						height: 10px;
						font-size: 16px;
					    @include barberry-icon('\ea2a');
					}

				}
				.button {
					margin-bottom: 0;
					i {
						&:before {
							@include barberry-icon('\ea41');
							margin-right: 10px;
						}
					}
					@include breakpoint(medium down) {
						padding: 12px 15px 10px;
					}
				}	
				&.hidden-tag {
					.barberry-compare-clear-all {
						display: none;
					}
				}							
			}
		}
	}

	.barberry-compare-mess {
	    position: absolute;
	    display: block;
	    width: 100%;
	    left: 0;
	    right: 0;
	    top: -40px;
	    text-align: center;
	    font-size: 100%;
	    color: #f76b6a;
	    z-index: 1;	
	    display: none;

	    span {
	    	height: 40px;
	    	display: inline-block;
	    	font-size: 16px;
	    	line-height: 1.8;
	    	font-weight: 400;
	    	color: #fff;
	    	background-color: #0a0a0a;
			padding: 6px 14px 4px 14px;

			&:after {
				position: absolute;
				bottom: -16px;
				right: auto;
				left: 50%;
				transform: translate3d(-50%, 0, 0);
				content: '';
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px;
				border-color: transparent transparent transparent;
				border-top-color: #0a0a0a;				
			}			
	    }	
	}

	.barberry-close-mini-compare {
		position: absolute;
		top: 20px;
		right: 20px;
		left: auto;
		z-index: 2;	
		@include breakpoint(medium down) {
		top: 10px;
		right: 10px;			
		}
	}

	&.barberry-active {
		.barberry-close-mini-compare {
			opacity: 1;
			@include transition-delay(0.3s); 

			.close-icon_top {
			    @include transform(rotate(-45deg) translateX(0%));
			    @include transition-delay(0.5s);    
			}
			.close-icon_bottom {
			    @include transform(rotate(45deg) translateX(0%));
			    @include transition-delay(0.5s);          
			}	

		    @include breakpoint(medium down) {
		        width: 1rem;
		        height: 1rem;
		    }  

		    @include breakpoint(small only) {
		        width: 0.7rem;
		        height: 0.7rem;
		    } 

		    .close-icon_top,
		    .close-icon_bottom {
			    @include breakpoint(medium down) {
			        height: 0.1rem;
			    }  
		    }

		}
	}
}

// Compare table

.barberry-wrap-table-compare {

	ul {
		display:flex;
		top:0px;
		z-index:10;
		margin: 0;

		@media (min-width: 900px) {
			display: none;
		}

		li {
			margin: 0;
			list-style:none;
			flex:1;
			&:last-child {
				border-right:1px solid rgba(0,0,0,0.1);
			}	
			.compare-product-inner {
				position: relative;
				width:100%;
				height: 100%;
				border: 1px solid rgba(0,0,0,0.1);
				border-right:0;
				border-bottom:0;
				// background-color: #fff;
				padding: 10px;
				text-align: center;	
				// border-bottom: 4px solid rgba(0,0,0,1);
				&:before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					background-color: white;	
					z-index: -1;				
				}	

				.image-wrap {
					position: relative;
					z-index: 1;
				}

				.compare-product-title {
					position: relative;
					margin-top: 10px;
					margin-bottom: 0;
					font-size: 16px;
					line-height: 1.2;
					font-weight: 400;
					z-index: 1;
				}		
			}

			&.active {
				.compare-product-inner {
					border: 1px solid #fff;
					&:before {
						right: -2px;
						bottom: -1px;
						border-right: 1px solid #fff;
						z-index: 1;
						@include box-shadow(2px 2px 30px rgba(0,0,0,0.15))
					}
				}
			}		
		}		
	}


	.barberry-table-compare {
		@include breakpoint(medium down) {
			margin-top: -1px;
		}
		thead, tbody {
			background-color: transparent;
			border:none;
			tr, th, td {
				background-color: transparent;
				padding: 0;
				border:none;
			}
		}


		border-collapse:collapse; table-layout:fixed; width:100%;

		thead, tbody {

			th {
				background-color:rgba(0,0,0,0.02);
				display:none;
			}
			td, th {
			  // height:53px;
			}	
			td, th {
				border:1px solid rgba(0,0,0,0.1);
				padding:20px;
				empty-cells:show;
				vertical-align: top;
				@include breakpoint(medium down) {
					padding:10px;
				}
			}
			td,th {
			  text-align:left;
			}
			td+td, th+th {
			  text-align:center;
			  display:none;
			}
			td.default {
			  display:table-cell;
			}

			.empty-cell {
				border: none;
				background-color: transparent;				
			}


			@media (min-width: 900px) {
				td,th {
				display:table-cell !important;
				}
				td,th {
				// width: 330px;

				}
				td+td, th+th {
				width: auto;
				}				
			}

		}

		thead {
			@include breakpoint(900px down) {
				display: none;
			}
			tr {
				// border-bottom: 4px solid rgba(0,0,0,1);
			}
			th {
				// border: none;
				background-color: transparent;
				.image-wrap {
					margin-top: 10px;
					@include breakpoint(medium down) {
						margin-top: 0;
					}
				}
				.compare-product-title {
					margin-top: 15px;
					margin-bottom: 0;
					font-size: 20px;
					line-height: 1.3;
					@include breakpoint(medium down) {
						font-size: 18px;
					}
				}						
			}
		}

		tbody {
			tr {
				@include transition(background-color .3s ease);
				td {
					font-size: 18px;
					text-align: center;

					&.left-cell {
						text-align: left;
						font-weight: 400;
						background-color: rgba(0,0,0,0.02);
					}


				}

				&:hover:not(.remove-item) {
					background-color: rgba(0,0,0,0.02);
				}

				th {
					font-size: 20px;
				}
				&.image,
				&.price:not(.repeated),
				&.add-to-cart:not(.repeated) {
					display: none;
				}
				&.price {
					.amount {
						font-size: 18px;
						line-height: 1.1;
						font-weight: 600;

						.woocommerce-Price-currencySymbol {
							font-size: 70%;
							margin-right: 3px;
						}

				    	sup {
						    font-size: 60%;
						    line-height: 1.5;
						    margin-left: 0.1rem;			    		
				    	}	


					}

					del {
						text-decoration: none;
						font-size: 85%;

			    		span.amount {
			    			position: relative;
			    			color: #666;
			    			font-size: 95%;
			    			font-weight: 300;

				    		.amount:before {
				    			width: 100%;
								position: absolute;
								content: "";
								right: 0;
								top: 50%;
								height: 0px;
								border-bottom: 1px solid #f9423a;
								opacity: 0.7;
								transform: rotate(-15deg);			    			
				    		}		    			
			    		}					
					}

			    	ins {
			    		color: #f9423a;
			    		text-decoration: none;
			    		line-height: 1;
			    	}



				}
				&.description {
					td {

					}
					
					p {
						text-align: left;
						font-size: 18px;
						padding-left: 10px;
						padding-right: 10px;
						a {
							font-size: 18px;
						}
					}
				}	

				&.add-to-cart {
					.button {
						margin-bottom: 0;
						@include breakpoint(1440px down) {
							padding: 12px 15px 10px;
						}
						@include breakpoint(medium down) {
							padding: 10px 12px 8px;
							font-size: 12px;
						}						
					}
					.added_to_cart {
						display: none;
					}
				}	

				&.remove-item {

					th, td {
						border: none;
						background-color: transparent;	
					}

					.barberry-remove-compare {
						display: inline-block;
						position: relative;
						padding-left: 20px;
						font-weight: 400;
					    font-size: rem-calc(12);
					    line-height: rem-calc(12);
						color: inherit;
						text-transform: uppercase;	
					    &:hover {
					    	opacity: .6;
					    }

						&:before {
							position: absolute;
							left: 0;
							top: -4px;
							width: 10px;
							height: 10px;
							font-size: 18px;
						    @include barberry-icon('\ea2a');
						}
					}

				}		
			}

		}
	}	
}

.empty-compare-section {
	text-align: center;
	margin: 0 0 30px 0;
	.barberry-empty-icon {
		&:before {
			font-size: 200px;
			color: rgba(0,0,0,0.1);
			@include barberry-icon('\ea41');
			@include breakpoint(small only) {
				font-size: 120px;
			}
		}
	}
	.woocommerce-compare__empty-message {
		margin-top: rem-calc(40);
	    font-size: rem-calc(30);
	    line-height: 1.2;	
	    font-weight: 300;
	    @include breakpoint(small only) {
			font-size: rem-calc(30);
			margin-bottom: rem-calc(20);
	    }
	}	
}

body.header-has-no-title {
	.barberry-wrap-table-compare {
		.empty-compare-section {
			margin-top: 40px;
		}
	}
}