

.swatchesContainer_ul{ display: flex; flex-wrap: wrap; }

.swatchesContainer {padding-top: 8px;}
.swatchContainer {
     width: 25%;
     text-align: center;
     padding: 5px;
    position: relative;
    margin-bottom: 5px;
    
}



.swatchesContainer_ul .cart-icon{ position: absolute; right: 10px; top: 10px; color: #cbab00; }

.swatchContainer .swatch .swatch-label img{ width: auto; height: auto; }

.swatch {
    
    margin: 0;
    padding: 0;
    border: 1px solid #ddd !important;
    display: block;
    float: none;
    margin-bottom: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;

}

.swatch-daekevne {font-family: Bitter, georgia, serif;font-size: 9px;line-height: 1.5em;width: 87px;height: 17px;margin: 2px 0 0 0;}
.swatch-daekevne img {margin: 2px 2px 2px 1px;vertical-align: bottom;}

.swatch-title {
	font-size: 12px;
	width: 100%;
	font-weight: bold;
	padding: 6px ;
}
#swatch-header {background-color: #efefeb;margin-bottom: 5px;}
#swatch-label {font-family: Bitter, georgia, serif;font-weight: normal;font-style: normal;font-size: 16pt;padding: 10px 2px 5px 10px;text-align: center;}
#swatch-coverage {font-family: Bitter, georgia, serif;font-size: 12px;margin: 0 0 5px 7px;}
.attribute-hover-container table, #attribute-inline-container table {width: 100%;}
.attribute-hover-container tr, #attribute-inline-container tr + tr {border-top: 1px solid #eee;}
.swatchesContainer th {text-align: center;font-weight: bold;}
.attribute-hover-container td, #attribute-inline-container td {padding: 8px 2px;text-align: right;vertical-align: middle;}
.attribute-hover-container input, #attribute-inline-container input {width: 2em;text-align: right;}
.option_price_strike {text-decoration: line-through;color: red;}

.attribute-hover-container {
	display: block;
	background: #fff;
	z-index: 9;
	border: 1px solid #aaa;
	padding: 5px;
	background-color: #fff;
	box-shadow: #aaa 3px 3px 15px;
	border-radius: 4px;
	position: absolute;
	width: auto;
	left: 0;
	top:calc(100% - 20px) !important;
}

.attribute-hover-container::before {
	content: "";
	font-family: "FontAwesome",sans-serif;
	color: #aaa;
	position: absolute;
	top: -11px;
	right: 0;
	left: 12px;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	width: 20px;
	height: 20px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: -1;
}



.inputqtyfield input{ padding: 1px; word-spacing: normal;letter-spacing: normal;
 width: 40px; text-align: center;  border: 1px solid #000; border-radius: 0;}
.attribute-hover-container button{box-shadow: none; border:none; width: 84px; max-width: 100%; padding: 6px 8px; font-size: 13px;}

.attribute-addto-button{ display: flex; } 
.attribute-addto-button .fa{ font-weight: normal; }
.attribute-addto-button .minus,
.attribute-addto-button .plus{ height: 28px; background-color: rgba(0, 0, 0, .03); padding: 2px 8px; }



@media only screen and (min-width: 768px){

	.swatchContainer:nth-child(3n) .attribute-hover-container::before{left:auto !important;right: 12px;}
	.swatchContainer:nth-child(3n) .attribute-hover-container{left:auto !important;right:0;}

}

@media only screen and (max-width: 991px){

.swatchesContainer_ul li.swatchContainer{ width: 50%; margin-right: 0; }
	
}

@media only screen and (max-width: 767px){
	

	.swatchContainer:nth-child(odd) .attribute-hover-container {left: -12px !important;max-width: 270px;z-index: 1;}
	.swatchContainer:nth-child(odd) .attribute-hover-container::before {right: 0;left: 22px;}

	.swatchContainer:nth-child(even) .attribute-hover-container::before{left:initial !important;right: 30px;}
	.swatchContainer:nth-child(even) .attribute-hover-container{left:initial !important;right:-22px;max-width: 270px;z-index: 1;}

	.attribute-hover-container table, #attribute-inline-container table {
		display: block;
		overflow-x: auto;
	}

	
}

@media only screen and (max-width: 350px) {
	
	.attribute-hover-container table {
	    width: 273px;
	    display: block;
	    overflow-x: auto;
	}
	.swatchesContainer_ul li.swatchContainer{ width: 50%; margin-right: 0; }

} 