.filter { position: sticky; top: 62px; margin-bottom: 20px; width: 100%; display: flex; gap: 10px; box-sizing: border-box; padding: 12px 12px; border-radius: 14px; background-color: rgba(204,204,240,0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 3; }
.filter .filter-item { position: relative; display: flex; min-width: 100px; border-radius: 8px; padding: 8px 14px; background-color: #DEDFF8; outline: 1px solid #afb7d1; user-select: none; cursor: pointer; }
.filter .filter-item:hover { outline: 2px solid black; }
.filter .filter-item .name { position: relative; width: 100%; min-width: 140px; box-sizing: border-box; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.filter .filter-item .name .ico { position: relative; width: 22px; height: 20px; top: -2px; }
.filter .filter-item .name .arrow-down { position: relative; margin-left: auto; width: 20px; height: 20px; background-image: url('https://chilicars.com.ua/images/ico/arrow-down.svg'); background-size: 15px 15px; background-position: center center; background-repeat: no-repeat; transition: all 0.2s ease-out; }
.filter .filter-item.active .name .arrow-down { transform: rotate(180deg); }
.filter .filter-item a { text-decoration: none; color: black; }
.filter .filter-item ul { display: none; }
.filter .filter-item.active ul { position: absolute; display: flex; max-height: 300px; overflow-y: auto; flex-direction: column; top: -3px; left: 20px; width: 100%; margin: 0 0 0 -25px; padding: 0; background-color: white; border: 5px solid white; border-radius: 14px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .2); z-index: 5; }
.filter .filter-item.checked:before { content:''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 4px; outline: 4px solid #DEDFF8; background-color: black; z-index: 6; }
.filter .filter-item b { display: flex; align-items: center; padding: 8px 18px; margin: 0; color: black; font-size: 14px; }
.filter .filter-item .selector { display: flex; gap: 10px; align-items: center; padding: 8px 18px 8px 12px; margin: 0; color: black; font-size: 14px; cursor: pointer; }
.filter .filter-item .selector:hover { background-color: #eee; color: #0c7ffa; }
.filter .filter-item .selector:before { content: ''; position: relative; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('https://chilicars.com.ua/images/ico/checkbox-empty.svg'); }
.filter .filter-item .selector.active:before { background-image: url('https://chilicars.com.ua/images/ico/checkbox.svg'); }

.filter .reset-filter { display: none; }
.filter .reset-filter.active { position: relative; margin-left: auto; font-style: normal; color: black; font-size: 13px; width: 70px; display: flex; align-items: center; gap: 5px; opacity: .7; user-select: none; cursor: pointer; }
.filter .reset-filter:before { content: ''; width: 16px; height: 16px; background-size: 100% 100%; background-image: url('https://chilicars.com.ua/images/ico/x.svg'); }
.filter .reset-filter:hover { opacity: 1; }

#filter { position: absolute; width: 1px; height: 1px; top: -62px; left: 0; visibility: hidden; }

@media screen and (max-width: 1100px) {
.wrapper { width: 100%; }
}

@media screen and (max-width: 930px) {
.filter { position: relative; flex-wrap: wrap; top: 0; }
.filter .filter-item { flex: 1 1 150px; }
}