.jfilter { margin: 0 0 20px 0; background: #fff; }

/* филды */
.jfilter__field { padding: 22px 20px 22px 20px; border-bottom: 1px solid #ddd; position: relative; }
.jfilter__field:last-child { border-bottom: none; }
.jfilter__field-title { font: 600 17px/17px "source sans pro"; margin: 0 0 15px 0; }

/* инпуты */
.jfilter__input { width: 100%; font: 500 16px/16px "source sans pro"; padding: 5px 11px; border-radius: 3px; border: 1px solid #ddd; height: 35px; position: relative; }
.jfilter__input:focus { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; outline: none; }
.jfilter__input--tick { background: url(i/filters/tick.svg) no-repeat right 10px top 55%; padding: 0 20px 0 8px; width: 100%; cursor: pointer; }
.jfilter__input:hover { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; outline: none; }


/* инпут поиска */
.jfilter__input--search { padding-right: 35px; }
.jfilter__search-ico { background: url(i/filters/search.svg) no-repeat 50% 50% / 16px 16px; position: absolute; right: 21px; width: 35px; height: 35px; cursor: default; opacity: .6; z-index: 1 }
.jfilter__search-ico:hover { opacity: 1; }
.jfilter__search-ico:hover + .jfilter__input { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; }
.jfilter__search-ico--clear { cursor: pointer; background: url(i/filters/close.svg) no-repeat 50% 50% / 14px 14px; }

/* подсказка под поиском */
.jfilter__hint { font: 300 14px/15px "source sans pro"; margin: 7px 0 -7px 0; color: #aaa; }


/* селекты */
.jfilter__select { margin: 2px 0 0 0; left: 20px; right: 20px; position: absolute; z-index: 2; visibility: hidden; opacity: 0; background: #fff; max-height: 0; overflow: hidden; -webkit-overflow-scrolling: touch;  border-radius: 3px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .25);
  transform: translateY(10px);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s;
}

.jfilter__select-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 15px/17px "source sans pro"; cursor: pointer; padding: 10px 10px; position: relative; }

.jfilter__select-option:hover { background-color: rgba(255, 228, 132, .3); }

.jfilter--select-sort .jfilter__select--sort,
.jfilter--select-employment .jfilter__select--employment,
.jfilter--select-education .jfilter__select--education,
.jfilter--select-salary .jfilter__select--salary {
  max-height: 270px; visibility: visible; opacity: 1; overflow: auto;
  transform: translateY(0);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s;
}

/* чекбоксы */
.jfilter__checkbox-wrap { font: 400 16px/17px "source sans pro"; position: relative; cursor: pointer; }
.jfilter__checkbox { position: absolute; left: -9999px; }
.jfilter__checkbox-text { margin: 0 0 0 25px; display: inline-block; vertical-align: baseline; cursor: pointer; }
.jfilter__checkbox-text:hover { color: #f00; }
.jfilter__checkbox-ico { width: 14px; height: 14px; transition: border-color 200ms, background-color 200ms; border-radius: 3px; border: 1px solid #ddd; background: #fff; position: absolute; margin: 1px 0 0 0; }
.jfilter__checkbox-ico:before { content: ""; position: absolute; width:  20px; height: 15px; background: url(i/filters/checkbox.svg) no-repeat; top: -3px; left: -1px; opacity: 0; transition: opacity 200ms; }
.jfilter__checkbox:checked + .jfilter__checkbox-ico { border-color: #d2c48a; background: #fea; }
.jfilter__checkbox:checked + .jfilter__checkbox-ico:before { opacity: 1; }