.sfl { background: #fff; border-radius: 3px;  margin: 0 0 20px 0; box-shadow: 0 0 30px -10px rgba(0,0,0,.15) }

.sfl__block { padding: 22px 20px 22px 25px; border-bottom: 1px solid #ddd }
.sfl__block:last-child { border-bottom: 0; }
.sfl__block--checkbox { padding-top: 15px; padding-bottom: 15px; }
.sfl__title { font: 600 17px/17px geometria, arial; margin: 0 0 15px 0 }
.sfl__name { font: 400 16px/17px geometria, arial;  }
.sfl__filter:not(.sfl__filter--disabled) .sfl__name:hover { color: #ff0000; cursor: pointer; }
.sfl__filter { margin: 0 0 15px 0; cursor: default; position: relative; padding: 0 0 0 14px; }
.sfl__filter--hidden { display: none; }
.sfl__filter--disabled { opacity: 0.3; }
.sfl__filter:last-child { margin: 0 }


.sfl__checkbox { position: absolute; left: -9999px; }
.sfl__checkbox-i { width: 14px; height: 14px; transition: border-color 200ms, background-color 200ms; border-radius: 3px; border: 1px solid #ddd; position: absolute; background: #fff; left: -11px; top: -1px;  }
.sfl__checkbox-i:before { content: ""; position: absolute; width: 20px; height: 15px; background: url(i/checkbox.svg); top: -3px; left: -1px; opacity: 0; transition: opacity 200ms; }
.sfl__checkbox:checked + .sfl__checkbox-i { border-color: #D2C48A; background: #FFEEAA }
.sfl__checkbox:checked + .sfl__checkbox-i:before { opacity: 1; }

.sfl__filter--empty:not(.sfl__filter--disabled):hover .sfl__checkbox-i { border-color: #bbb; }

.sfl__filter-a { color: #000; cursor: default; margin: 0 2px 0 0}
.sfl__filter-a:hover { text-decoration: none; }
.sfl__filter:not(.sfl__filter--disabled) .sfl__filter-a:hover { color: #ff0000; cursor: pointer }