#uf-currency, #uf-capacity, #uf-clasp, #uf-closure, #uf-color, #uf-fits, #uf-group, #uf-material, #uf-length, #uf-price, #uf-search, #uf-size, #uf-width, #uf-type {display:flex;align-items: center}
#uf-capacity ul li:has(> a[href="#all"]) {display:none}
#uf-closure ul li a:hover {cursor:pointer}
#uf-closure ul li a[href="#button"] {background-image:url(../img/bag-icon-closure-type-button.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.75rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#foldover"] {background-image:url(../img/bag-icon-closure-type-foldover-hardware.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.55rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#hook"] {background-image:url(../img/bag-icon-closure-type-hook.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.75rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#magnetic"] {background-image:url(../img/bag-icon-closure-type-magnetic.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.75rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#open"] {background-image:url(../img/bag-icon-closure-type-open.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.85rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#turnlock"] {background-image:url(../img/bag-icon-closure-type-turnlock.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.8rem auto;padding-left:2.1rem}
#uf-closure ul li a[href="#zipper"] {background-image:url(../img/bag-icon-closure-type-zipper.png);background-position:.75rem center;background-repeat:no-repeat;background-size:.3rem auto;padding-left:1.75rem}
#uf-price {align-items:start}
#uf-color .uf-tags a, #uf-group .uf-tags a {padding-left:1.8rem}
#uf-color .uf-tags li.more a {padding-left:.5rem}
#uf-color .uf-tags li.more a:hover {cursor:pointer}
#uf-currency, #uf-group {display:none}

.uf-title {color: #767676;padding-right:5rem;width:5%}
#uf-color .uf-title {padding-top:.5rem;align-self:start}

.uf-search, .uf-filter {margin-bottom:1rem}

.uf-filter .uf-tags,  .uf-filter .uf-tags li, .uf-sort-box .uf-options, .uf-sort-box .uf-options li  {list-style: none; padding: 0; margin: 0; display:flex; align-items:center;row-gap:.75rem;flex-wrap:wrap}
#uf-price {padding-top:.25rem}

.uf-filter .uf-tags a {
padding: .5rem;
display: inline-block;
border-radius: 5px;
border: 1px solid #e3e3e3;
color: #666;
text-align: center;
box-sizing: border-box;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

.uf-filter .uf-tags a:hover {background: #e3e3e3;background:rgba(227,227,227,.25);}

.uf-reset {
width: .75rem;
height: .75rem;
border: 0;
background: url(../img/bg-reset.png) no-repeat;
background-size: .75rem;
cursor: pointer;
opacity:.5;
}

#uf-color .uf-tags a[href="#beige"] {background-image:url(../img/filter-bg-color-beige.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#black"] {background-image:url(../img/filter-bg-color-black.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#blue"] {background-image:url(../img/filter-bg-color-blue.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#brown"] {background-image:url(../img/filter-bg-color-brown.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#burgundy"] {background-image:url(../img/filter-bg-color-burgundy.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#cream"] {background-image:url(../img/filter-bg-color-cream.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#dark brown"] {background-image:url(../img/filter-bg-color-dark-brown.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#green"] {background-image:url(../img/filter-bg-color-green.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#grey"] {background-image:url(../img/filter-bg-color-grey.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#gold"] {background-image:url(../img/filter-bg-color-gold.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#navy"] {background-image:url(../img/filter-bg-color-navy.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#orange"] {background-image:url(../img/filter-bg-color-orange.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#pink"] {background-image:url(../img/filter-bg-color-pink.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#purple"] {background-image:url(../img/filter-bg-color-purple.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#red"] {background-image:url(../img/filter-bg-color-red.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#silver"] {background-image:url(../img/filter-bg-color-silver.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#taupe"] {background-image:url(../img/filter-bg-color-taupe.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#white"] {background-image:url(../img/filter-bg-color-white.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-tags a[href="#yellow"] {background-image:url(../img/filter-bg-color-yellow.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-color .uf-reset {margin: 2px 0}

#uf-group .uf-tags a[href="#color"] {background-image:url(../img/filter-bg-group-color.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8em}
#uf-group .uf-tags a[href="#neutral"] {background-image:url(../img/filter-bg-group-neutral.png);background-position:center left .5rem;background-repeat:no-repeat;background-size:.8rem}

.uf-search-box .uf-reset {
position: absolute;
right: 0; 
top: 50%;
transform: translate(-50%, -50%);
width: .75rem;
height: .75rem;
background: url(../img/bg-reset.png) no-repeat center;
background-size:.75rem;
cursor: pointer;
opacity:.5;
}

.uf-filter .uf-tags li {
display: inline-block;
position: relative;
margin-right: .9rem;
box-sizing: border-box;
vertical-align: top;
}

#uf-capacity li a::after {content: '"\00a0\00a0laptop'}

.uf-filter a,
.uf-search a,
.uf-sort a,
.uf-filter a:hover,
.uf-search a:hover,
.uf-sort a:hover {
text-decoration: none;
outline: none!important;
color: inherit;
}

.unifilter {
position: relative;
}

.unifilter::after,
.uf-search::after, 
.uf-filter::after,
.uf-sort::after,
.uf-select::after,
.uf-range::after {
display: block;
content: "";
visibility: hidden;
clear: both;
height: 0;
}

.uf-filter,
.uf-search,
.uf-sort,
.uf-range {
font-weight: normal;
}

.uf-filter .uf-title span,
.uf-search .uf-title span,
.uf-sort .uf-title span,
.uf-range .uf-title span {
display: block;
color: #999;
font-weight: normal;
}

.uf-list .uf-item {
position: relative;
top: 0; 
left: 0;
}

.uf-list #uf-separator {display:none}
.uf-list #uf-empty {width: 100%;text-align: center;color: #999;list-style-type:none;margin-bottom:1.5rem}

.uf-animate .uf-item {
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
-o-transition: -o-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}

.uf-item.uf-animate-opacity {
opacity: 0;
}

.uf-item.uf-animate-scale {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}

.uf-item.uf-animate-translate {
-webkit-transform: translateY(30px) scale(0.95);
-moz-transform: translateY(30px) scale(0.95);
-o-transform: translateY(30px) scale(0.95);
transform: translateY(30px) scale(0.95);
}

.uf-item.uf-animate-rotate {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}

.uf-tags a::first-letter {text-transform: uppercase}

.uf-filter .uf-tags a:hover {
text-decoration: none;
color: #999;
}

.uf-filter .uf-tags .uf-selected a {
background-color: #eee;
color: #555;
}

.uf-filter .uf-tags .uf-reset:hover {
opacity: 1;
}

.uf-filter .uf-tags .uf-tooltip {
position: absolute;
left: 50%;
top: -2.4rem;
margin-left: -1rem;
text-align: center; 
background-color: #555;
border-radius: 5px;
padding:.3rem .9rem .5rem .9rem;
opacity: 0;
color: #fff;
pointer-events: none!important;
-webkit-transition: all 0.2s ease 0.3s;
-moz-transition: all 0.2s ease 0.3s;
-o-transition: all 0.2s ease 0.3s;
transition: all 0.2s ease 0.3s;
-webkit-transform: translate3d(0,-5px,0);
-moz-transform: translate3d(0,-5px,0);
-o-transform: translate3d(0,-5px,0);
transform: translate3d(0,-5px,0);
}

.uf-filter .uf-tags li:hover .uf-tooltip {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.uf-filter .uf-tags .uf-tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #555;
top: 1.8rem;
margin-left: -.35em;
left: 50%;
}

.uf-slider .uf-tooltip {
position: absolute;
left: 50%;
top: -2.5rem;
width: auto;
padding:.3rem .5rem .5rem .5rem;
text-align: center; 
background-color: #555;
color: #fff;
border-radius: 5px;
opacity: 0;
box-sizing: border-box;
pointer-events: none!important;
-webkit-transition: all 0.2s ease 0.3s;
-moz-transition: all 0.2s ease 0.3s;
-o-transition: all 0.2s ease 0.3s;
transition: all 0.2s ease 0.3s;
-webkit-transform: translate3d(0,-5px,0);
-moz-transform: translate3d(0,-5px,0);
-o-transform: translate3d(0,-5px,0);
transform: translate3d(0,-5px,0);
}

.uf-slider .uf-tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #555;
top: 1.8rem;
left: 50%;
margin-left: -5px;
}

.uf-slider .uf-handle-left .uf-tooltip {
margin-left: -1.45em;
}
.uf-slider .uf-handle-right .uf-tooltip {
margin-left: -1.75em;
}

.uf-slider.uf-dragging-left .uf-handle-left .uf-tooltip,
.uf-slider.uf-dragging-right .uf-handle-right .uf-tooltip,
.uf-slider .uf-handle-right:hover .uf-tooltip,
.uf-slider .uf-handle-left:hover .uf-tooltip {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.uf-search-box {
position: relative;
width: 25%;
overflow: hidden;
}

.uf-search input {
border: 0;
padding: .5rem;
margin: 0;	
width: 100%;
outline: none;
color: #888;
background-color: #f7f7f7;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 5px;
}

.uf-search input:focus,
.uf-search input:active {
outline: none;
background-color: #fff;
border-color: #eee;
}

.uf-search input::-webkit-input-placeholder  { 
color: #bbb;
opacity: 1;
}

.uf-search input::-moz-placeholder  {
color: #bbb;
}

.uf-search input:-moz-placeholder {
color: #bbb;
}

.uf-search input:-ms-input-placeholder {
color: #bbb;
}

.uf-sort .uf-sort-box {
position: relative;
width: 220px;
}

.uf-sort-box .uf-select span {
float: left;
position: relative;
height: 45px;
border-radius: 5px;
width: 80%;
color: #888;
background-color: #f7f7f7;
cursor: pointer;
box-sizing: border-box;
}

.uf-sort-box .uf-select span:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
margin-top: -3px;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #ccc;
}

.uf-sort-box .uf-order {
float: left;	
width: 20px;
height: 20px;
margin: 12px 0 0 10px;
}

.uf-sort-box.uf-order-desc .uf-order {
background: url(https://plugins.gravitysign.com/unifilter/template1/images/unifilter-icons.png) no-repeat -20px -20px;
}

.uf-sort-box.uf-order-asc .uf-order {
background: url(https://plugins.gravitysign.com/unifilter/template1/images/unifilter-icons.png) no-repeat 0 -20px;
}

.uf-sort-box .uf-order:hover {
opacity: 1;
}

.uf-sort-box .uf-select span:hover,
.uf-sort-box.uf-show-options .uf-select span {
background-color: #f8f8f8;
}

.uf-sort-box .uf-options {
display: none;
position: absolute;
left: 0; top: 42px;
background-color: #f7f7f7;
width: 80%;
margin-top: 5px;
border-radius: 5px;
box-sizing: border-box;
overflow: hidden;
box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1);
z-index: 1000;
}

.uf-sort-box.uf-show-options .uf-options {
display: block;
}

.uf-sort-box .uf-options li {
margin: 0;
padding: 0;
list-style: none!important;
}

.uf-sort-box .uf-options li:last-child a {
border-top: 1px solid #eee;
}

.uf-sort-box .uf-options li a {
display: block;
text-decoration: none;
color: #777;
}

.uf-sort-box .uf-options li a:hover {
color: #777;
text-decoration: none;
background-color: #f0f0f0;
}

.uf-slider  {
position: relative;
width:25%
}

.uf-slider .uf-path {
position: relative;
height: 10px;
border-radius: 5px;
background-color: #eee;
cursor: pointer;
}

.uf-slider .uf-handle-left,
.uf-slider .uf-handle-right {
position: absolute;
top:-.2rem; left: 0;
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: #999;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

.uf-slider .uf-handle-right { 
left: auto; 
right: 0; 
}

.uf-slider.uf-dragging-left .uf-handle-left,
.uf-slider.uf-dragging-right .uf-handle-right {
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;
}

.uf-slider.uf-dragging-left .uf-handle-left,
.uf-slider.uf-dragging-right .uf-handle-right,
.uf-slider .uf-handle-left:hover,
.uf-slider .uf-handle-right:hover {
background-color: #555;
}

.uf-slider .uf-start,
.uf-slider .uf-end {
color: #999;
margin: .9rem 0 0 .1rem;
}

.uf-slider .uf-end {float: right}
.uf-slider .uf-start {float: left}

.uf-filter .uf-tag-hidden {
opacity: 0.1!important;
pointer-events: none;
}

@media screen and (min-width: 1500px) 
{
.uf-title {width:5%}
}

@media screen and (max-width: 1000px) 
{
.uf-title, .uf-filter .uf-tags .uf-tooltip {display:none}
#uf-color {display:none}
#uf-group {display:flex}
.uf-search-box {width:100%}
.uf-slider {width:calc(100% - 105px - 3rem)}
}
@media screen and (max-width: 550px) 
{
#uf-capacity .uf-title {visibility: hidden;position: relative}
#uf-capacity li:not(:first-child) a::after {content: '"'}
}