/**
 * Filter UX styles – pointer, hover, open/close animations.
 */

.filterValues {font-size: .75em;}
.filterLine {padding: .4em 0;}
.filterLine a,
.filterLine span {display: inline-block; text-decoration: none; vertical-align: middle;}
.filterLine a {cursor: pointer; transition: opacity 0.15s ease, background-color 0.15s ease; border-radius: 3px;}
.filterLine a:hover {opacity: .7; background-color: #f0f4f8;}
.filterLine a span {transition: color 0.15s ease;}
.filterPopup {display: none;}
.filterItemMore {font-size: .6875em; font-weight: 700; padding: .4em 0 0;}
.filterItemMore .filter-more {text-decoration: none; cursor: pointer; transition: opacity 0.15s ease;}
.filterItemMore .filter-more:hover {opacity: .6;}
.filterItem.active .filterPopup {display: block;}
.filterItem.active .filterItemMore {display: none;}
.filterLine a {display: flex; justify-content: space-between; padding: 0 0 0 24px; position: relative;}
.filterLine a::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 3px; background: #fff; transition: all 0.15s ease;}
.filterLine a.selected::before {background: #33a7a0; border-color: #33a7a0;}
.filterLine a.selected::after {content: "\2713"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 12px; font-weight: bold;}
.filterLine a.applied_list::before {background: #e74c3c; border-color: #e74c3c;}
.filterLine a.applied_list::after {content: "\00D7"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 14px; font-weight: bold;}
.filterLine a span {color: #c6c6c8;}
.filterLine span.off {padding: 0 0 0 24px; color: #c6c6c8; position: relative;}
.filterLine span.off::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #e0e0e0; border-radius: 3px; background: #f5f5f5;}
.filterLine span.selected {display: none;}
.filterLine span.applied_list {display: none;}
.selectedFiltersRemove a {cursor: pointer; transition: opacity 0.15s ease;}
.selectedFiltersRemove a:hover {opacity: .6;}
.block-filter .angle {cursor: pointer;}

@keyframes filterFadeIn {
    from {opacity: 0; transform: translateY(-6px);}
    to {opacity: 1; transform: translateY(0);}
}
@keyframes filterItemStagger {
    from {opacity: 0; transform: translateY(-4px);}
    to {opacity: 1; transform: translateY(0);}
}
@keyframes ajaxContentFade {
    from {opacity: 0;}
    to {opacity: 1;}
}
.filter-animate-in {animation: filterFadeIn 0.25s ease-out both;}
.filter-animate-in .filterItem {animation: filterItemStagger 0.2s ease-out both;}
.filter-animate-in .filterItem:nth-child(2) {animation-delay: 0.04s;}
.filter-animate-in .filterItem:nth-child(3) {animation-delay: 0.08s;}
.filter-animate-in .filterItem:nth-child(4) {animation-delay: 0.12s;}
.filter-animate-in .filterItem:nth-child(5) {animation-delay: 0.16s;}
.filter-animate-in .filterItem:nth-child(6) {animation-delay: 0.20s;}
.ajax-content-fade {animation: ajaxContentFade 0.3s ease-out both;}

#filter_overlay {background: rgba(0,0,0,0.5); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1000; transition: opacity 0.2s ease;}
body.filter-loading #filter_overlay { display: block !important; }
.main-block-left-side.ajax-filters-empty { display: none !important; }
#loader {animation: spin 2s linear infinite;border: 6px solid transparent;border-top-color: #33a7a0;border-radius: 50%;display: block;height: 150px;left: 50%;margin: -75px 0 0 -75px;position: relative;top: 50%;width: 150px;z-index: 1001;}
#loader:before {animation: spin 3s linear infinite;content: "";border: 6px solid transparent;border-top-color: #1a5653;border-radius: 50%;bottom: 5px;left: 5px;position: absolute;right: 5px;top: 5px;}
#loader:after {animation: spin 1.5s linear infinite;content: "";border: 6px solid transparent;border-top-color: #fff;border-radius: 50%;bottom: 15px;left: 15px;position: absolute;right: 15px;top: 15px;}
@keyframes spin {
0% {border-width: 6px; transform: rotate(0deg);}
50% {border-width: 2px;}
100% {border-width: 6px; transform: rotate(360deg);}
}