/**
 * Add general frontend styles.
 */

.acsell-filter-group-widget {
	margin: 0 10px;
}

.acsell-filter-group-component {
	margin-bottom: 20px;
}
.acsell-filter-group-component-title {
	margin: 0px;
	font-size:0.9rem;
}

.acsell-filter-attribute-lbl {
    transition: max-height 0.25s ease-in-out;
	max-height: 100px;
}

.acsell-attribute-search-hidden {
	max-height: 0;
    transition: max-height 0.25s ease-in-out;
	overflow: hidden;
	margin-bottom: 0px !important;
}

/* Using in javascript */
.acsell-attribute-empty-hidden {
	display: none !important;
}

.acsell-filter-group-accordion .acsell-filter-group-component-title {
	width: auto;
}

.acsell-filter-group-component-heading .acsell-filter-group-component-clear {
	cursor: pointer;
	margin-left: auto;
	font-size: 0.85rem;
	padding-right: 6px;
}

.acsell-filter-group-component-heading .acsell-filter-group-component-clear:hover {
	text-decoration: underline;
}

.acsell-filter-group-component-html {
    clear: both;
	margin-bottom: 5px;
}

/* Style the buttons that are used to open and close the accordion panel */
.acsell-filter-group-accordion {
	color: #444;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	margin-bottom: 15px;
	border-bottom:1px solid #333;
	background:none;
	display: flex;
	align-items: center;
}

.acsell-filter-group-panel-hide {
	max-height: 0 !important;
	overflow: hidden;
	margin-bottom: 0px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.acsell-filter-group-active, .acsell-filter-group-accordion:hover {
  background: none; /* Remove background style */
}

/* Style the accordion panel. Note: hidden by default */
.acsell-filter-group-accordion-panel {
  padding: 0 10px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
  max-height: 1500px;
}

.acsell-filter-group-accordion:after {
	content:'';
	height:10px;
	width:10px;
	border:2px solid #333333;
	border-left:0;
	border-top:0;
	transform:rotate(45deg);
}

.acsell-filter-group-accordion.acsell-filter-group-active:after {
	content:'';
	height:10px;
	width:10px;
	border:2px solid #333333;
	border-left:0;
	border-top:0;
	transform:rotate(225deg);
}

.acsell-filter-attribute-less-more {
	cursor: pointer;
}
.acsell-filter-attribute-less-more:hover {
	text-decoration: underline;
	animation: ease-in-out;
}
.acsell-filter-search-input {
	margin-bottom: 10px;
	min-width: 100%;
	margin-top: 2px;		/* to show borders in some themes */
}

label:not(.acsell-filter-mechanism-switch, .acsell-plugin-mechanism-swatch-container, body.wp-admin) {
	cursor: pointer;
}

input[type="checkbox"]:not(body.wp-admin) {
	cursor: pointer;
}

.acsell-filter-attribute-more-options {
	width: 100%;
}

.acsell-filter-mechanism-switch-div {
	display: inline;
	cursor: pointer;
}
.acsell-clear-hidden {
	visibility: hidden;
}

.acsell-plugin-mechanism-checkboxes > label > input[type="checkbox"],
.acsell-filter-group-component-html > div > label > input[type="checkbox"]{
	margin-right: 5px;
}

.acsell-filter-group-component-html > div > label:not(.acsell-filter-mechanism-switch):not(.acsell-plugin-mechanism-swatch-container) {
	display: block;
}

.woocommerce-pagination {
	justify-content: center !important;
}
.woocommerce-pagination .page-numbers {
	list-style: none;
	margin: 0;
	vertical-align: middle;
}

div.placeholder {
	background: #ccc;
	min-height: 100px;
}

.acsell_clear_filters {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.acsell-clear-single {
	cursor:pointer;
	margin-right:5px;
	padding:6px 10px;
	margin-bottom:5px;
	display: initial;
	border: 1px solid black;
	box-sizing: border-box;
}

.acsell-clear-single:hover {
	background:#f1f1f1;
}

.acsell-clear-single .acsell-clear-single-text {
	position:relative;
	padding-right:14px;
}

.acsell-clear-single:hover .acsell-plugin-close-btn:after {
	transform: translate3d(-50%, -50%, 0)  rotate(0deg);
	transition-property:transform;
	transition-duration: 300ms;
}

.acsell-clear-single:hover .acsell-plugin-close-btn:before {
	transform: translate3d(-50%, -50%, 0)  rotate(0deg);
	transition-property:transform;
	transition-duration: 300ms;
}

.acsell-plugin-close-btn:before {
	content: '';
	position: absolute;
	right: -12px;
	top: 50%;
	width: 0;
	height: 2px;
	border-left: 8px solid #7A7A7A;
	border-right: 8px solid #7A7A7A;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	transform:translate3d(-50%, -50%, 0) rotate(-45deg);
	transition-property:transform;
	transition-duration: 300ms;
}
.acsell-plugin-close-btn:after {
	content: '';
	position: absolute;
	right: -12px;
	top: 50%;
	width: 0;
	height: 2px;
	border-left: 8px solid #7A7A7A;
	border-right: 8px solid #7A7A7A;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
	transform:translate3d(-50%, -50%, 0) rotate(45deg);
	transition-property:transform;
	transition-duration: 300ms;
}

.acsell-hidden {
	display: none !important;
}

.acsell_filter_button {
	width: 100%;
	float: left;
	display: none;
}

.acsell_filter_button a:nth-child(2){
	float: right;
}

/* Patch for Ipad not showing as mobile issue */
.acsell-show-if-mobile {
	display: none;
}

@media (max-width: 820px) {
	.acsell-show-if-mobile {
		display: inline-flex;
	}
	.acsell_filter_button {
		display: block;
	}
}