.sidebar-filter {
background-color: #fff;
border-radius: 5px;
padding: 35px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
.sidebar-filter .filter-block {
margin: 0px;
}
.sidebar-filter .filter-block + .filter-block {
margin-top: 30px;
}
.sidebar-filter .filter-block .filter-block-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
flex-align: center;
align-items: center;
padding: 0px;
color: #000;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin: 0px 0px 15px 0px;
}
.sidebar-filter .filter-block .filter-block-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.sidebar-filter .filter-block .filter-block-content input[type="number"] {
appearance: none;
-o-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.sidebar-filter .filter-block .filter-block-content input[type="number"]::-webkit-outer-spin-button,
.sidebar-filter .filter-block .filter-block-content input[type="number"]::-webkit-inner-spin-button {
appearance: none;
-o-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.sidebar-filter .filter-block .filter-block-content .range-slider + .inputs {
margin-top: 20px;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal {
height: 1px;
margin: 10px;
border-radius: 2px;
background-color: #e09542;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-base,
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-connect,
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-connect {
top: -2px;
height: 5px;
border-radius: 2px;
background-color: #e09542;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-origin {
left: auto;
right: 0;
}
.sidebar-filter .filter-block .filter-block-content .noUi-horizontal .noUi-handle {
position: absolute;
top: -8px;
left: auto;
right: -8px;
width: 17px;
height: 17px;
border-radius: 50%;
border: 1px solid #e09542;
background-color: #fff;
outline: none;
cursor: pointer;
}
.sidebar-filter .filter-block .filter-block-content .inputs.range {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.sidebar-filter .filter-block .filter-block-content .inputs.range .group {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-align: start;
align-items: flex-start;
width: calc(50% - 5px);
}
.sidebar-filter .filter-block .filter-block-content .inputs.range .group input {
width: 100%;
padding: 5px;
color: #c4c4c4;
font-size: 14px;
text-align: center;
background-color: #fff;
border: 1px solid #e09542;
border-radius: 2px;
position: relative;
z-index: 1;
}
.sidebar-filter .filter-block .filter-block-content .inputs.range .group input[name] {
color: #000;
}
.sidebar-filter .filter-block .filter-block-content .inputs.range .group + .group {
margin-left: 10px;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group label {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-align: center;
align-items: center;
padding-left: 35px;
position: relative;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 24px;
min-height: 24px;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group label .indicator {
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
margin: auto 0px;
width: 20px;
height: 20px;
border: 2px solid #e09542;
border-radius: 2px;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group label .indicator:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width: 12px;
height: 12px;
border-radius: 2px;
background-color: #e09542;
opacity: 0;
transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-webkit-transition: opacity 0.1s linear;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group label:hover .indicator:before {
opacity: 0.2;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group input {
display: none;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group input:checked + label .indicator:before {
opacity: 1;
}
.sidebar-filter .filter-block .filter-block-content .inputs.checkboxes .group + .group {
margin-top: 5px;
}