.flex-row {display: -webkit-box; display:-webkit-flex; -webkit-flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; 
display:flex; flex-flow:row wrap; justify-content:space-between;}
.filter-wrap {margin-bottom: 30px; padding: 30px 12px 20px 12px;
	background-color: #1b1b1e; color: #ccc; border-radius: 3px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.filter-box {opacity: 0;}
.js .filter-box {opacity: 1;}
.fb-sect-name {margin-bottom:10px; font-weight:700;}
.fb-sect {margin-bottom:10px;}
.fb-checks {margin-bottom:10px;}
.flex-2 > * {display:inline-block; width:48%;}
.flex-3 > * {display:inline-block; width:32%;}
.flex-4 > * {display:inline-block; width:23%;}
.fb-sel select {width:100%;}
.fb-submit input[type="button"] {display:inline-block; text-align:center;
height: 32px;line-height: 32px; border-radius: 3px; font-size: 14px;}
.fb-submit input[type="button"]:hover {}
.fb-check2 {margin-bottom:5px;}
.fb-check2 input {margin:0 5px 0 0; vertical-align:middle; display:inline-block; position:relative; top:-2px;}

.fb-sect input[type="text"] {background-color:#191919;}
.fb-check {position: relative; cursor: pointer; font-weight: 400; 
height: 30px; line-height: 30px; display: block; margin-bottom: 2px;}
.fb-check input {opacity: 0; position: absolute; cursor: pointer;}
.fb-check span {display: inline-block; padding-left: 50px; height: 30px; line-height: 30px; 
	white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis;
text-overflow: ellipsis; width: 100%;}
.fb-check span:before, .fb-check span:after{content: '';position: absolute;top: 50%;transition: .3s;}
.fb-check span:before{left: 0;height: 20px;margin-top: -10px;width: 40px;border-radius: 4px;
	background: #191919;box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);}
.fb-check span:after{left: 1px;height: 18px;width: 18px;margin-top: -9px;background: #444;
	border-radius: 4px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.fb-check input:checked + span:before{background-color: #191919;}
.fb-check input:checked + span:after{left: 21px; background-color: #9b59b6;}
.filt-col {width: 30%;}
.fb-range {margin-top:10px;}

.fb-sect input[type="button"] {
    display: inline-block;
    text-align: center;
    border-radius: 3px;
    font-size: 14px;
}

.fb-sect select option {
    display: none!important;
}

.filter-wrap select {height:42px; background-color:#191919; color:#ccc; box-shadow: none; overflow:hidden;}

.filters > div .search {
    border: 1px solid #191a1d;
    background: #242227!important;
    min-width: 150px;
    width: 100%;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,.1), 0 0 1px 1px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,.1), 0 0 1px 1px rgba(0,0,0,.25);
    border-radius: 3px;
    height: 40px;
    line-height: 30px;
}

.filters>* {
    flex: 1 1 0;
    max-width: 100%;
    min-width: auto;
    white-space: nowrap;
    position: relative;
}

.filters > div, .filters > li {
    padding: 0 2px;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

.filters > div .btn, .filters > div .search {
    padding: .5rem 1rem;
}

.form-control {
    display: block!important;
    width: 100%!important;
    padding: .5rem 1rem!important;
    color: #ececec!important;
    background-color: #292929!important;
    background-clip: padding-box!important;
    border: 0 solid #cecece!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out!important;
}

.form-control::placeholder {
    font-size: 14px;
    color:#ececec;
}

.fb-sect .tail-select {
    width: 100%!important;
    min-width: 120px!important;
    line-height: 30px;
    height: 40px;
}

.fb-sect .tail-select .select-label {
    background: #242227;
    color: #eeecf9;
    font-size: 14px;
}

.fb-sect .tail-select .select-label .label-count {
    color:#cdcdcd;
    border-color: rgba(255, 255, 255, 0.12);
}

.fb-sect .tail-select .select-label .label-inner {
    font-weight:500;
}

.fb-sect .tail-select:hover .select-label, .fb-sect .tail-select.active .select-label, .tail-select.idle .select-label {
    z-index: 25;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,.1), 0 0 1px 1px #9b59b6;
    -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,.1), 0 0 1px 1px #9b59b6;
    color: #fff;
}

.fb-sect .tail-select .select-dropdown ul li.dropdown-option.selected {
    color: #fff;
    background-color: rgb(155 89 182 / 50%);
}

.fb-sect .tail-select .select-dropdown ul li.dropdown-option {
    cursor: pointer;
    color: #cdcdcd;
    font-size: 14px;
}

.fb-sect .tail-select .select-dropdown {
    color: #cdcdcd;
    width: 200px;
    min-height: 35px;
    margin: 5px 0 0 0;
    background-color: #242227;
}

.tail-select .select-dropdown ul li.dropdown-option.hover, .tail-select .select-dropdown ul li.dropdown-option:hover {
    color: #9b59b6!important;
    background-color: transparent!important;
}

.tail-select .select-dropdown ul li.dropdown-option:before {
    width: 30px;
    height: 28px;
}

.tail-select.multiple .select-dropdown ul li.dropdown-option:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEUlEQVR4nLXUS05CQRAFUFgBGME1CK4GP8FtiGuQMGNEJKxBEyNxFY5EnfpZhkyOqdAmD+yHaKSTO+hbldv1ue9VKts+2MExejjDEeq/EdjDBHM84Cphlrgxmj+JHOAdN9jPxFu4xRva6yoJkQtU1zxWRR+vaOQSJqmSJRGcBDJiU1zmBjsvaWcYyPBtfKBWJGM7s5JWhjmhFHvCYZE4j80U7l0MEu4Tvu7dQl5ss/cfQterQmG2xz+09oxOkainwbU2FbLw3PKwU2CczLa6/tNAZv13GOXKbCbH9jcw5AAv2C1LaifHTnOfgEU7UUmIfBvDanIjHJv6f0ybCYRnghuVVlIiWAuzpV9IoPNtsNs4n9UvyYraq3kNAAAAAElFTkSuQmCC)!important;
}

.tail-select.multiple .select-dropdown ul li.dropdown-option.selected.hover:before, .tail-select.multiple .select-dropdown ul li.dropdown-option.selected:hover:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA60lEQVR4nL2TwRGCMBBFGTyKYgtACXSgbSiC1VgQelK7QC+obcjpOTvsIWKIctDM7IFsePk/P/G8fwwgARZaydCfR8AGuAANUGs1OlcA/ifIBNgDV2AFjI1eAGTADdjJWpcSgRyAqWOzEDgCpVWZ2rm6IB2YKMttTfG/9L4ctDbP3ckYeMg5DAAFGkBkTkq8tfGdAtueSo11kub8J6BYZQ6xNnmzZhz2agBoDVS2RqGRhl9AZsBdYLamrzf26ILRQk69F9LwXaqyzDwz2rjFjiiRNfYn0lGWy2WzPNpKYe5Ha4FGEq/Wazq/Gk9A/JzpeWlAQwAAAABJRU5ErkJggg==)!important;
}

.tail-select.multiple .select-dropdown ul li.dropdown-option.selected:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9ElEQVR4nL2UwQ7BQBCGm3Bp8QzqghNO1EVaT1jlMdQVz8M7oJdPJh3RLF3LwSSTNDPTL/PP7K7n/cMAHxiq+78AlsARKHhaobHEBdAENsAFSIEp0FKfASvgCmRSawMJ5ASMLDVjrclsci42iAGTzuJ3SdGfeo5GKW9vBls6zKkR7wE7IAdCIxcBNyCoBge6mbZRvKtsLTdyHY33vwVtXUBBjbRQZW2Bbo00/92wV56jAeuXYWsi0ZWOHSAT7WZhW+nJBqOEnK1HRa9IVrkGkSxAfa5ypBO5Po1PnQswBg7608Pke18r5wNQnhE5GuLfPyO/2B1U7KGiKOknYQAAAABJRU5ErkJggg==)!important;
}

/* ********************************************** */

.filter-block {margin-bottom: 30px;}
.filter-block__form {display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); grid-gap: 10px 20px;}
.filter-block__cell--full-width {grid-column: 1 / -1;}
.filter-block__cell-caption {margin-bottom: 10px;}
.filter-block__cell-content > * {width: 100%; display: block;}
.filter-block__cell-content--two-columns {display: flex; justify-content: space-between;}
.filter-block__cell-content--two-columns > * {width: calc((100% - 10px)/2) !important;}
.filter-block__cell-content select, .filter-block__cell-content input[type="text"], 
.filter-block__cell-content--check-group {height: 36px; line-height: 34px; background-position: right 8px top 50%;
    background-color: var(--bg-2); color: var(--tt-2); border: 1px solid var(--bg-2); border-radius: 4px; 
    box-shadow: none; font-size: 14px;  padding: 0 7px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.filter-block__cell-content select {padding: 0 8px 0 4px;}
.filter-block__cell-content input[type="text"]::placeholder {opacity: 1; color: var(--tt-2); font-size: 14px;}
.filter-block__cell-content input[type="text"]:focus::placeholder {opacity: 0;}
.filter-block__cell-content label {position: relative; padding-left: 50px; cursor: pointer; 
    height: 36px; display: flex; flex-direction: column; justify-content: center; font-size: 14px;}
.filter-block__cell-content label input {display: inline-block; appearance: none; -webkit-appearance: none;
    height: 20px; width: 40px; border-radius: 10px; background-color: var(--bg-2); cursor: pointer; transition: all .2s linear; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); position: absolute; left: 0; top: 50%; margin-top: -10px;}
.filter-block__cell-content label input::before {content: ''; width: 18px; height: 18px; border-radius: 10px; 
    position: absolute; left: 1px; top: 1px; background-color: var(--bg); transition: all .2s linear;}
.filter-block__cell-content label input:checked {background-color: #6ab04c;}
.filter-block__cell-content label input:checked::before {left: 21px;}
.filter-block__cell-content input[type="button"], .filter-block__cell-content button {cursor: pointer; 
    height: 36px; display: inline-flex; justify-content: center; padding: 0 10px; box-shadow: none; border-radius: 4px;}
.filter-block__cell-content input[type="button"][data-dlefilter="reset"] {background: var(--bg-2); color: var(--tt-3);}
.filter-block__cell-content--check-group label {padding: 0; text-align: center; white-space: nowrap; 
    flex: 1 1 0; min-width: 30px; max-width: 100%; background: var(--bg);}
.filter-block__cell-content--check-group label input {position: absolute; left: 0; top: 0; 
    width: 100%; height: 100%; opacity: 0; z-index: 5;}
.filter-block__cell-content--check-group {display: flex; justify-content: center; overflow: hidden; padding: 0;}
.filter-block__cell-content--check-group label + label {border-left: 1px solid var(--bg-2);}
.filter-block__cell-content--check-group label div {height: 36px; font-size: 13px;}
.filter-block__cell-content--check-group label input:checked + div {background-color: var(--bg-2); color: var(--tt);}

.fx-row-2 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right:5px;
}

@media screen and (max-width: 760px) {

    .filter-btn {display: inline-block; margin: 0; padding: 0 10px;}
    .fb-col {width: 100%; top: 0;}
    .fb-checks .fb-sect {flex-wrap: wrap;}
    .filter-wrap {display: none;}
    .fx-row-2 {-ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}
}