.ocf-noUi-target,
.ocf-noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ocf-noUi-base,
.ocf-noUi-connects {
width: 100%;
height: 19px;
position: relative;
z-index: 1;
}
.ocf-noUi-connect,
.ocf-noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: -2px;
right: 0;
-ms-transform-origin: 0;
-webkit-transform-origin: 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0;
transform-style: flat;
}
.ocf-noUi-connect {
height: 100%;
width: 100%;
}
.ocf-noUi-origin {
height: 10%;
width: 10%;
}
.ocf-noUi-txt-dir-rtl .ocf-noUi-origin {
left: 0;
right: auto;
}
.ocf-noUi-origin {
height: 0;
}
.ocf-noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.ocf-noUi-touch-area {
height: 100%;
width: 100%;
}
.ocf-noUi-state-tap .ocf-noUi-connect,
.ocf-noUi-state-tap .ocf-noUi-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.ocf-noUi-state-drag * {
cursor: inherit !important;
}
.ocf-noUi-handle {
width: 24px;
height: 24px;
right: -13px;
top: -3px;
}
.ocf-noUi-txt-dir-rtl .ocf-noUi-handle {
left: -13px;
right: auto;
}
.ocf-noUi-base:before,
.ocf-noUi-connect:before {
content: "";
border-radius: 20px;
width: 100%;
height: 4px;
position: absolute;
top: 50%;
margin-top: -2px;
}
.ocf-noUi-base:before {
background-color: #eceef2;
}
.ocf-noUi-connect:before,
.ocf-noUi-handle {
background-color: #3366d5;
}
.ocf-noUi-connects:before,
.ocf-noUi-connects:after {
content: "";
border-radius: 100%;
position: absolute;
background-color: #eceef2;
width: 10px;
height: 11px;
top: 50%;
margin-top: -8px;
}
.ocf-noUi-connects:before {
left: 0;
margin-left: -5px;
}
.ocf-noUi-connects:after {
right: 0;
margin-right: -5px;
}
.ocf-noUi-draggable {
cursor: ew-resize;
}
.ocf-noUi-handle {
border: 3px solid #fff;
border-radius: 100%;
cursor: default;
box-shadow: 0 3px 6px -3px #bbb;
}
.ocf-loading .ocf-noUi-handle {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
-webkit-animation: progresss 600ms linear infinite;
animation: ocf-progress 600ms linear infinite;
}
.ocf-noUi-active {
box-shadow: 0 0 0 6px #3366d540;
}
[disabled].ocf-noUi-handle,
[disabled] .ocf-noUi-handle,
[disabled] .ocf-noUi-connect:before,
.ocf-loading .ocf-noUi-connect:before {
background-color: #aeb5bd;
}
[disabled].ocf-noUi-target,
[disabled].ocf-noUi-handle,
[disabled] .ocf-noUi-handle {
cursor: not-allowed;
}
.ocf-noUi-pips,
.ocf-noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ocf-noUi-pips {
position: relative;
color: #999;
padding: 10px 0 0;
height: 45px;
}
.ocf-noUi-value {
position: absolute;
margin-top: 15px;
top: 0;
white-space: nowrap;
text-align: center;
font-size: 11px;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.ocf-noUi-marker:first-child + .ocf-noUi-value,
.ocf-noUi-value:last-child {
color: #555;
}
.ocf-noUi-rtl .ocf-noUi-value {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.ocf-noUi-value-sub {
color: #ccc;
font-size: 10px;
}
.ocf-noUi-marker {
position: absolute;
background: #ccc;
margin-left: -1px;
width: 2px;
margin-top: 6px;
height: 3px;
}
.ocf-noUi-marker:first-child,
.ocf-noUi-marker[style*="100%"] {
height: 10px;
margin-top: 0;
}
@keyframes ocf-progress {
from {
background-position: 0 0;
}
to {
background-position: 1rem 0;
}
}
.ocf-text-right {
text-align: right !important;
}
.ocf-text-center {
text-align: center !important;
}
.ocf-btn {
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
background-color: #eceef2;
border: 0;
border-radius: 4px;
}
[role="button"] {
cursor: pointer;
}
.ocf-btn:focus,
.ocf-btn:active:focus {
outline: 0;
}
.ocf-btn:hover,
.ocf-btn:focus {
color: #333;
text-decoration: none;
}
.ocf-btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
}
.ocf-btn.ocf-disabled,
.ocf-btn[disabled] {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.65;
}
a.ocf-btn.ocf-disabled {
pointer-events: none;
}
.ocf-btn-link {
font-weight: normal;
color: #555;
border-radius: 0;
}
.ocf-btn-link,
.ocf-btn-link:active,
.ocf-btn-link[disabled] {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.ocf-btn-link:hover,
.ocf-btn-link:focus {
color: #23527c;
text-decoration: underline;
background-color: transparent;
}
.ocf-btn-link[disabled],
.ocf-btn-link[disabled]:hover,
.ocf-btn-link[disabled]:focus {
color: #777;
text-decoration: none;
}
.ocf-btn-block {
display: block;
width: 100%;
max-width: 200px;
}
.ocf-collapse {
display: none;
}
.ocf-collapse.ocf-in {
display: block;
}
.ocf-collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
.ocf-input-group {
position: relative;
display: table;
border-collapse: separate;
width: 100%;
}
.ocf-slider-input-group {
margin-bottom: 5px;
}
.ocf-input-group .ocf-form-control {
font-size: 14px;
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.ocf-input-group .ocf-form-control:focus {
z-index: 3;
}
.ocf-input-group-addon,
.ocf-input-group-btn,
.ocf-input-group .ocf-form-control {
display: table-cell;
}
.ocf-input-group-addon:not(:first-child):not(:last-child),
.ocf-input-group-btn:not(:first-child):not(:last-child),
.ocf-input-group .ocf-form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.ocf-input-group-addon,
.ocf-input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.ocf-input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eceef2;
border-radius: 4px;
}
.ocf-input-group .ocf-form-control:first-child,
.ocf-input-group-addon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ocf-input-group-addon:first-child {
border-right: 0;
}
.ocf-input-group .ocf-form-control:last-child,
.ocf-input-group-addon:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ocf-input-group-addon:last-child {
border-left: 0;
}
.ocf-form-control,
input.ocf-form-control,
textarea.ocf-form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
margin: 0;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #eee;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.2s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.2s, box-shadow ease-in-out 0.15s;
-webkit-transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.2s, -webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.2s, -webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.2s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.2s, -webkit-box-shadow ease-in-out 0.15s;
}
.ocf-form-control:focus,
input.ocf-form-control:focus,
textarea.ocf-form-control:focus {
border-color: #5aa3c6 !important;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.ocf-form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.ocf-form-control:-ms-input-placeholder {
color: #999;
}
.ocf-form-control::-webkit-input-placeholder {
color: #999;
}
.ocf-form-control::-ms-expand {
background-color: transparent;
border: 0;
}
.ocf-form-control[disabled],
.ocf-form-control[readonly] {
background-color: #eee;
opacity: 1;
}
.ocf-form-control[disabled] {
cursor: not-allowed;
}
.ocf-invisible {
visibility: hidden;
}
.ocf-hidden {
display: none !important;
}
.ocf-overflow-hidden {
overflow: hidden !important;
}
.ocf-clearfix::before,
.ocf-clearfix::after {
display: table;
content: "";
clear: both;
width: 100%;
}
@-ms-viewport {
width: device-width;
}
.ocf-form-control[type="number"]::-webkit-outer-spin-button,
.ocf-form-control[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ocf-form-control[type="number"] {
-moz-appearance: textfield;
}
.ocf-icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
min-width: 12px;
min-height: 12px;
display: inline-block;
vertical-align: middle;
}
.ocf-icon-16 {
min-width: 16px;
min-height: 16px;
}
.ocf-sliders {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z'/%3e%3c/svg%3e");
}
.ocf-angle {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3e%3c/svg%3e");
}
.ocf-angle-right {
transform: rotate(90deg);
}
.ocf-angle-down {
transform: rotate(180deg);
}
.ocf-angle-left {
transform: rotate(-90deg);
}
.ocf-arrow-long {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3e%3c/svg%3e");
}
.ocf-arrow-right {
transform: rotate(90deg);
}
.ocf-arrow-down {
transform: rotate(180deg);
}
.ocf-arrow-left {
transform: rotate(-90deg);
}
.ocf-times-circle {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%236B7275' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
}
.ocf-times {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%236B7275' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.ocf-help-circle {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3e%3c/svg%3e");
}
.ocf-minus-circle {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/%3e%3c/svg%3e");
}
.ocf-between {
display: flex !important;
justify-content: space-around;
flex-wrap: nowrap;
align-items: center;
}
.ocf-collapse,
.ocf-collapsing {
width: 100%;
}
[aria-expanded="false"] > .ocf-hide-expand-0 {
display: none;
}
[aria-expanded="true"] > .ocf-hide-expand-1 {
display: none;
}
.ocf-is-mobile {
display: none;
height: 0;
overflow: hidden;
}
.ocf-mobile {
display: none;
}
.ocf-container,
.ocf-filter-list {
overflow-anchor: auto;
}
.ocf-header {
font-size: 18px;
display: flex;
align-items: center;
}
.ocf-header .ocf-brand {
margin-right: 12px;
}
.ocf-hidden-filters-divider {
margin-bottom: 45px;
position: relative;
top: 15px;
text-align: center;
height: 1px;
}
.ocf-hidden-filters-divider > span {
cursor: pointer;
padding: 1px 10px;
border-radius: 15px;
vertical-align: top;
margin-top: -10px;
display: inline-block;
}
.ocf-filter-header {
display: flex;
align-items: center;
font-style: normal;
line-height: 1.5;
cursor: default;
}
.ocf-more-selected {
background-color: rgba(0 0 0 / 12%);
padding: 1px 5px;
border-radius: 2px;
font-size: 12px;
color: #444;
}
.ocf-filter-name,
.ocf-active-label {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.ocf-filter-header-append {
margin-left: auto;
display: flex;
align-items: center;
order: 9;
}
.ocf-filter-header-append > * {
min-width: 16px;
}
.ocf-filter-discard {
display: none;
cursor: pointer;
}
.ocf-collapse-value .ocf-value-list {
border-top: 1px solid #e0e1e5;
margin-top: 10px;
}
.ocf-collapse-value .ocf-value-list-body {
padding-top: 10px;
}
.ocf-value,
.ocf-value:active,
.ocf-value:focus,
.ocf-value:visited,
.ocf-value:hover {
cursor: pointer;
font-weight: normal;
font-style: normal;
display: flex;
width: 100%;
flex-wrap: nowrap;
align-items: flex-start;
text-decoration: none;
text-transform: none;
padding: 4px 0;
text-transform: none;
background: transparent;
box-shadow: none;
border: 0;
outline: 0;
}
.ocf-value:last-child {
margin-bottom: 0;
}
.ocf-value.ocf-disabled,
.ocf-value[disabled],
.ocf-value:disabled {
color: #aeb5bd;
cursor: not-allowed;
}
.ocf-value-image,
.ocf-value-color {
position: relative;
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-right: 10px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 200ms;
}
.ocf-selected .ocf-value-image,
.ocf-selected .ocf-value-color {
box-shadow: inset 0 0 0 2px #fff;
border-color: #65a2c7;
}
.ocf-disabled .ocf-value-image,
.ocf-disabled .ocf-value-color {
opacity: 0.25;
filter: saturate(0.5);
}
.ocf-value-image + .ocf-value-name,
.ocf-value-color + .ocf-value-name {
align-self: center;
}
.ocf-value-input {
position: relative;
width: 16px;
height: 16px;
flex: 0 0 16px;
margin-right: 10px;
margin-top: 2px;
}
.ocf-value-input::before,
.ocf-value-input::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.ocf-value-input::before {
pointer-events: none;
background-color: #fff;
border: #adb5bd solid 1px;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.ocf-value-input::before {
transition: none;
}
}
.ocf-value:active .ocf-value-input::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.ocf-value:focus:not(:active) .ocf-value-input::before {
border-color: #328ca7;
}
.ocf-value:not(.ocf-disabled):active .ocf-value-input::before {
color: #fff;
background-color: #4fa6d966;
border-color: transparent;
}
.ocf-value.ocf-disabled .ocf-value-input::before,
.ocf-value[disabled] .ocf-value-input::before,
.ocf-value:disabled .ocf-value-input::before {
background-color: #eceef2;
}
.ocf-selected .ocf-value-input::before {
color: #fff;
border-color: #3366d5;
background-color: #3366d5;
}
.ocf-value .ocf-value-input::after {
background-repeat: no-repeat;
background-position: center;
background-size: 8px;
}
.ocf-value-input-checkbox::before {
border-radius: 2px;
}
.ocf-value:active .ocf-value-input-checkbox::before {
border-color: #328ca7;
background-color: #219ac7;
}
.ocf-value.ocf-selected.ocf-disabled .ocf-value-input-checkbox::before,
.ocf-value.ocf-disabled:active .ocf-value-input-checkbox::before {
background-color: rgb(33 154 200 / 50%);
}
.ocf-selected .ocf-value-input-checkbox::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.ocf-value.ocf-selected:active .ocf-value-input-checkbox::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.ocf-value-input-radio::before {
border-radius: 50%;
}
.ocf-value.ocf-selected.ocf-disabled .ocf-value-input-radio::before {
background-color: rgba(0, 123, 255, 0.5);
}
.ocf-value.ocf-selected .ocf-value-input-radio::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.ocf-value.ocf-selected:active .ocf-value-input-radio::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.ocf-value-name {
margin-right: 5px;
word-break: break-word;
text-align: left;
font-size: inherit;
}
.ocf-auto-column .ocf-value-name {
white-space: nowrap;
}
.ocf-value-append {
margin-left: auto;
min-width: 50px;
text-align: right;
}
.ocf-auto-column .ocf-value-append {
min-width: auto;
}
.ocf-value-count {
padding: 2px 6px;
font-size: 11px;
font-weight: 400;
}
.ocf-value-count .ocf-num-abbr {
font-weight: 600;
color: #db5c68;
}
.ocf-selected .ocf-value-count,
.ocf-value-count:empty {
display: none;
}
.ocf-disabled .ocf-value-count {
color: #b5b9c1;
}
.ocf-search-btn-static,
.ocf-search-btn-popover {
padding-top: 9px;
padding-bottom: 9px;
}
.ocf-page-list-top,
.ocf-page-list-bottom {
overflow: hidden;
position: relative;
z-index: 3;
}
.ocf-page-list-top {
margin-bottom: 5px;
}
.ocf-page-list-bottom {
margin-top: 25px;
}
.ocf-page-group {
margin-bottom: 10px;
display: flex;
align-items: start;
}
.ocf-page-group-name {
font-weight: bold;
font-size: 14px;
margin-top: 3px;
margin-right: 15px;
width: 150px;
flex: 0 0 150px;
}
.ocf-category-page-list {
max-height: 135px;
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
overflow-y: scroll;
overflow-x: hidden;
}
.ocf-category-page-list::-webkit-scrollbar {
width: 8px;
}
.ocf-category-page-list::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
.ocf-category-page-list::-webkit-scrollbar-thumb {
background-color: #dfe3ed;
border-radius: 10px;
}
.ocf-category-page-list:hover::-webkit-scrollbar-thumb {
background-color: #9096a4;
}
.ocf-category-page-list::-webkit-scrollbar-corner {
display: none;
}
.ocf-category-page-list::-webkit-resizer {
display: none;
}
.ocf-category-page-list li {
margin-bottom: 10px;
}
.ocf-category-page-list li.ocf-page-selected {
}
.ocf-category-page-list a {
background-color: #eceef2;
padding: 3px 7px;
border-radius: 7px;
color: #3a3c40;
display: block;
font-size: 13px;
align-items: center;
font-weight: normal;
margin: 0 5px;
min-height: 100%;
text-decoration: none;
}
.ocf-category-page-list .ocf-page-selected a {
background-color: #656565;
color: #fff;
}
.ocf-category-page-list .ocf-page-selected a:after {
content: "";
width: 12px;
height: 12px;
display: inline-block;
color: #656565;
vertical-align: top;
margin-left: 5px;
margin-top: 4px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff' fill-opacity='0.8' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
}
.ocf-theme-light .ocf-text-danger {
color: #d1524c;
}
.ocf-theme-light .ocf-hidden-filters-divider {
background-color: #ebebeb;
}
.ocf-theme-light .ocf-hidden-filters-divider > span {
background-color: #eceef2;
color: #a0a4a6;
box-shadow: 0 0 0 10px #fff;
font-size: 13px;
}
.ocf-theme-light .ocf-hidden-filters-divider > span:hover {
background-color: #cbced4;
color: #575c5f;
}
.ocf-theme-light .ocf-hidden-filters-divider > span .ocf-icon {
filter: brightness(1.3);
}
.ocf-theme-light .ocf-hidden-filters-divider > span:hover .ocf-icon {
filter: brightness(0.7);
}
.ocf-theme-light .ocf-filter-header {
color: #444;
}
.ocf-theme-light .ocf-value-count {
background-color: #eceef2;
border-radius: 50px;
color: #46494e;
}
.ocf-theme-light .ocf-search-btn-static:hover,
.ocf-theme-light .ocf-search-btn-popover:hover {
background-color: #596063;
}
.ocf-theme-light .ocf-search-btn-static:focus,
.ocf-theme-light .ocf-search-btn-static:active,
.ocf-theme-light .ocf-search-btn-popover:focus,
.ocf-theme-light .ocf-search-btn-popover:active {
background-color: #596063;
}
.ocf-theme-light .ocf-search-btn-static,
.ocf-theme-light .ocf-search-btn-popover,
.ocf-theme-light .ocf-search-btn-static.ocf-disabled,
.ocf-theme-light .ocf-search-btn-popover.ocf-disabled {
background-color: var(--color-brand);
color: #fff;
}
.ocf-theme-light-block .ocf-noUi-connects:before,
.ocf-theme-light-block .ocf-noUi-connects:after,
.ocf-theme-light-block .ocf-noUi-base:before {
background-color: #81858c;
}
.ocf-theme-light-block .ocf-text-danger {
color: #d1524c;
}
.ocf-theme-light-block .ocf-footer {
background-color: #fff;
box-shadow: 0 -10px 10px 0 #fff;
}
.ocf-theme-light-block .ocf-hidden-filters-divider {
background-color: #ebebeb;
}
.ocf-theme-light-block .ocf-hidden-filters-divider > span {
background-color: #eceef2;
color: #a0a4a6;
box-shadow: 0 0 0 10px #fff;
}
.ocf-theme-light-block .ocf-hidden-filters-divider > span:hover {
background-color: #cbced4;
color: #575c5f;
}
.ocf-theme-light-block .ocf-hidden-filters-divider > span .ocf-icon {
filter: brightness(1.3);
}
.ocf-theme-light-block .ocf-hidden-filters-divider > span:hover .ocf-icon {
filter: brightness(0.7);
}
.ocf-theme-light-block .ocf-input-group-addon {
background-color: #dee2e6;
}
.ocf-theme-light-block .ocf-form-control {
border-color: #dee2e6;
border-width: 2px;
}
.ocf-theme-light-block .ocf-search-btn-static:hover,
.ocf-theme-light-block .ocf-search-btn-popover:hover {
background-color: #596063;
}
.ocf-theme-light-block .ocf-search-btn-static:focus,
.ocf-theme-light-block .ocf-search-btn-static:active,
.ocf-theme-light-block .ocf-search-btn-popover:focus,
.ocf-theme-light-block .ocf-search-btn-popover:active {
background-color: #596063;
}
.ocf-theme-light-block .ocf-search-btn-static,
.ocf-theme-light-block .ocf-search-btn-popover,
.ocf-theme-light-block .ocf-search-btn-static.ocf-disabled,
.ocf-theme-light-block .ocf-search-btn-popover.ocf-disabled {
background-color: #6a7275;
color: #fff;
}
.ocf-active-label,
.ocf-open .ocf-active-label,
.ocf-slider.ocf-has-input .ocf-active-label,
.ocf-slider.ocf-has-input.ocf-open .ocf-active-label {
display: none;
}
.ocf-value-slider {
padding: 10px 10px 0;
}
@media (max-width: 991px) {
.ocf-btn-mobile-static,
.ocf-close-mobile {
display: inline-block;
}
.ocf-desktop {
display: none;
}
.ocf-container {
display: none;
}
.ocf-container.ocf-mobile-active {
width: 100vw;
display: block;
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: 2147483648 !important;
}
.extended-container {
z-index: 100 !important;
}
.ocf-overflow-hidden .extended-container {
z-index: 99999 !important;
}
.ocf-content {
background-color: #fff;
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
}
.ocf-header {
background: var(--color-bg-gray);
border-radius: 6px;
margin: 0 15px;
height: 40px;
padding: 0 20px;
position: absolute;
top: 15px;
left: 0;
right: 0;
z-index: 1;
}
.ocf-header .ocf-close-mobile {
margin-left: auto;
padding: 0;
line-height: 1;
}
.ocf-body {
position: absolute;
top: 70px;
height: calc(100vh - 120px);
width: 100vw;
bottom: 0;
z-index: 3;
overflow-x: hidden;
overflow-y: scroll;
background: rgb(0 0 0 / 50%);
}
.ocf-body > .ocf-filter-list {
padding-bottom: 20px;
max-width: 340px;
background: var(--color-bg-white);
padding: 0px 40px 70px 25px;
min-height: 100%;
}
.ocf-value-list-body {
}
.ocf-filter .ocf-value-list.custom-scroll {
max-height: 281px;
}
.ocf-filter button.ocf-value {
display: flex;
align-items: center;
padding: 6px 0;
}
.ocf-footer {
display: block;
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 3;
padding: 5px 0;
left: 0px;
right: 0px;
}
.ocf-footer .ocf-between {
width: 100%;
}
.ocf-popover {
width: 0px;
height: 0px;
overflow: hidden;
}
}
@media (max-width: 350px) {
.ocf-body > .ocf-filter-list {
max-width: 300px;
}
.ocf-btn-block {
max-width: 160px;
}
.ocf-body > .ocf-filter-list {
padding: 0px 30px 70px 20px;
}
.ocf-footer .ocf-between {
max-width: 100vw;
}
}
@media (min-width: 992px) {
.ocf-footer,
.ocf-header {
display: none;
}
#column-left-grid,
#column-right-grid,
#column-left,
#column-right {
z-index: 6;
}
.ocf-popover {
position: absolute;
max-width: 240px;
opacity: 0;
top: 0;
left: 0;
z-index: 1075;
display: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
font-size: 14px;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
box-shadow: 0 6px 30px rgb(0 0 0 / 25%);
-webkit-transition: transform 300ms ease-in-out, opacity 200ms linear;
-moz-transition: transform 300ms ease-in-out, opacity 200ms linear;
-ms-transition: transform 300ms ease-in-out, opacity 200ms linear;
-o-transition: transform 300ms ease-in-out, opacity 200ms linear;
transition: transform 300ms ease-in-out, opacity 200ms linear;
will-change: transform, opacity;
}
.ocf-popover.ocf-in {
opacity: 1;
}
.ocf-popover.ocf-in.ocf-top {
transform: translateY(-3px);
}
.ocf-popover.ocf-in.ocf-right {
transform: translateX(3px);
}
.ocf-popover.ocf-in.ocf-bottom {
transform: translateY(3px);
}
.ocf-popover.ocf-in.ocf-left {
transform: translateX(-3px);
}
.ocf-popover.ocf-top {
margin-top: -15px;
}
.ocf-popover.ocf-right {
margin-left: 15px;
}
.ocf-popover.ocf-bottom {
margin-top: 15px;
}
.ocf-popover.ocf-left {
margin-left: -15px;
}
.ocf-popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.ocf-popover-content {
color: #333;
padding: 12px;
}
.ocf-popover > .ocf-arrow {
position: absolute;
display: block;
background-color: #fff;
transform: rotate(45deg);
border-radius: 3px;
width: 16px;
height: 16px;
z-index: -1;
}
.ocf-popover.ocf-top > .ocf-arrow {
left: 50%;
margin-left: -8px;
bottom: -5px;
}
.ocf-popover.ocf-bottom > .ocf-arrow {
left: 50%;
margin-left: -8px;
top: -5px;
}
.ocf-popover.ocf-right > .ocf-arrow {
top: 50%;
margin-top: -8px;
left: -5px;
}
.ocf-popover.ocf-left > .ocf-arrow {
top: 50%;
margin-top: -8px;
right: -5px;
}
.ocf-scroll-y {
max-height: 240px;
margin-right: -12px !important;
padding-right: 10px !important;
overflow-y: scroll;
overflow-x: hidden;
overscroll-behavior: contain;
background-image: linear-gradient(white 30%, transparent), linear-gradient(transparent, white 70%), radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 10%), transparent),
radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 10%), transparent);
background-position-x: 0;
background-position-y: 0, 100%, 0, 100%;
background-repeat: no-repeat;
background-color: #fff;
background-size: 100% 65px, 100% 65px, 100% 12px, 100% 12px;
background-attachment: local, local, scroll, scroll;
}
.ocf-scroll-y:hover {
padding-right: 2px !important;
}
.ocf-scroll-y::-webkit-scrollbar {
width: 2px;
margin-right: -5px;
}
.ocf-scroll-y:hover::-webkit-scrollbar {
width: 10px;
}
.ocf-scroll-y::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
.ocf-scroll-y:hover::-webkit-scrollbar-track {
background-color: transparent;
}
.ocf-scroll-y::-webkit-scrollbar-thumb {
background-color: #3f67d8;
border-radius: 10px;
}
.ocf-scroll-y::-webkit-scrollbar-corner {
display: none;
}
.ocf-scroll-y::-webkit-resizer {
display: none;
}
.ocf-content {
margin-bottom: 25px;
}
.ocf-header .ocf-header-btn {
margin-left: auto;
}
.ocf-selected-card {
padding: 15px;
margin-bottom: 20px;
}
.ocf-selected-header {
font-size: 16px;
margin-bottom: 10px;
}
.ocf-selected-filter {
font-size: 13px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
padding: 4px 10px;
}
.ocf-selected-filter-name {
font-size: inherit;
margin-right: 5px;
margin-left: 7px;
}
.ocf-selected-discard {
padding: 0 2px 0 6px;
max-width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.ocf-selected-value-name {
font-size: inherit;
overflow: hidden;
margin-right: 5px;
text-overflow: ellipsis;
}
.ocf-selected-discard .ocf-icon {
border-radius: 14px;
width: 14px;
height: 14px;
flex: 0 0 14px;
margin-left: auto;
}
.ocf-filter-list {
}
.ocf-horizontal .ocf-filter-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
margin-right: -5px;
margin-left: -5px;
}
.ocf-horizontal .ocf-collapse-filter .ocf-filter-list {
margin-left: 0;
margin-right: 0;
}
.ocf-horizontal .ocf-btn-show-filters {
margin-bottom: 10px;
margin-top: 0;
margin-right: 5px;
margin-left: 5px;
}
.ocf-filter {
margin-bottom: 15px;
}
.ocf-horizontal .ocf-filter {
padding-left: 5px;
padding-right: 5px;
min-width: 200px;
flex: auto;
}
.ocf-filter-body {
position: relative;
}
.ocf-filter-header,
.ocf-module-page-header {
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
}
.ocf-dropdown .ocf-filter-header {
cursor: pointer;
margin-bottom: 0;
position: relative;
z-index: 1;
}
.ocf-dropdown.ocf-open .ocf-filter-header {
z-index: 21;
}
.ocf-active-label {
margin-right: 5px;
}
.ocf-slider .ocf-active-label {
white-space: nowrap;
}
.ocf-dropdown .ocf-active-label,
.ocf-slider .ocf-active-label,
.ocf-horizontal .ocf-slider.ocf-has-input .ocf-active-label,
.ocf-slider.ocf-open .ocf-active-label {
display: block;
}
.ocf-filter-name {
margin-right: 5px;
order: -1;
}
.ocf-horizontal .ocf-filter-name,
.ocf-slider .ocf-filter-name,
.ocf-horizontal .ocf-active-label {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ocf-dropdown .ocf-active-label + .ocf-filter-name {
display: none;
}
.ocf-dropdown.ocf-slider .ocf-active-label + .ocf-filter-name {
display: block;
}
.ocf-active-label:empty + .ocf-filter-name,
.ocf-open .ocf-active-label + .ocf-filter-name {
display: block;
}
.ocf-open .ocf-active-label + .ocf-filter-name:hover {
white-space: nowrap;
text-overflow: initial;
overflow: visible;
background-color: #fff;
}
.ocf-has-input .ocf-slider-value {
display: none;
}
.ocf-horizontal .ocf-has-input .ocf-slider-value {
display: block;
}
.ocf-filter-description ~ * {
margin-left: 5px;
}
.ocf-filter-description .ocf-icon {
display: block;
filter: invert(37%) sepia(24%) saturate(2825%) hue-rotate(199deg) brightness(96%) contrast(94%);
}
.ocf-active .ocf-filter-header .ocf-angle-down {
display: none;
}
.ocf-dropdown.ocf-active .ocf-filter-discard,
.ocf-horizontal .ocf-active .ocf-filter-discard,
.ocf-slider.ocf-active .ocf-filter-discard {
display: block;
}
.ocf-dropdown .ocf-filter-body > .ocf-value-list {
background-color: #fff;
padding: 55px 15px 15px;
margin: -10px 0 0;
position: absolute;
top: 0;
left: -3px;
right: -3px;
z-index: 20;
display: none;
min-width: 100%;
}
.ocf-horizontal .ocf-dropdown .ocf-filter-body > .ocf-value-list {
min-width: 260px;
}
.ocf-dropdown.ocf-open .ocf-filter-body > .ocf-value-list {
display: block;
}
.ocf-auto-column {
display: grid;
gap: 6px 15px;
justify-items: stretch;
}
.ocf-column-1 {
grid-template-columns: repeat(1, 1fr);
}
.ocf-column-2 {
grid-template-columns: repeat(2, 1fr);
}
.ocf-column-3 {
grid-template-columns: repeat(3, 1fr);
}
.ocf-column-4 {
grid-template-columns: repeat(4, 1fr);
}
.ocf-column-5 {
grid-template-columns: repeat(5, 1fr);
}
.ocf-column-6 {
grid-template-columns: repeat(6, 1fr);
}
.ocf-btn-show-values {
margin-top: 10px;
padding: 0;
}
.ocf-auto-column .ocf-value {
margin-bottom: 0;
width: auto !important;
}
.ocf-value-image ~ .ocf-value-append,
.ocf-value-color ~ .ocf-value-append {
margin-top: 2px;
}
.ocf-footer {
display: none;
}
.ocf-search-btn-popover {
min-width: 190px;
}
.ocf-module-page {
background-color: #fff !important;
box-shadow: 0 3px 15px rgb(0 0 0 / 12%);
margin-bottom: 15px;
}
.ocf-module-page-header {
margin-bottom: 15px;
}
.ocf-module-page-list {
list-style-type: none;
margin: 0;
padding: 0;
max-height: 200px;
}
.ocf-module-page-list li + li {
margin-top: 3px;
}
.ocf-module-page-list a {
display: block;
line-height: 1.5;
color: #4a5057;
font-size: 13px;
}
.ocf-module-page-list a:hover {
color: #353a40;
text-decoration: underline;
}
.ocf-module-page-list a.ocf-page-selected {
font-weight: bold;
color: #000;
}
.ocf-theme-light .ocf-module-page {
padding: 12px;
border-radius: 4px;
box-shadow: none;
border: 4px solid #fff8e1;
}
.ocf-theme-light .ocf-module-page-header {
}
.ocf-theme-light .ocf-module-page-list {
margin: 0;
}
.ocf-theme-light .ocf-module-page-list a {
color: #2e3135;
}
.ocf-theme-light .ocf-selected-card {
background-color: #fff;
box-shadow: 0 0 16px rgb(0 0 0 / 15%);
border-radius: 5px;
}
.ocf-theme-light .ocf-selected-header {
font-weight: bold;
}
.ocf-theme-light .ocf-selected-filter {
background-color: #f5f7f9;
border-radius: 15px;
}
.ocf-theme-light .ocf-selected-filter-name {
color: #8596a4;
}
.ocf-theme-light .ocf-selected-discard {
border: 1px solid transparent;
border-radius: 20px;
background-color: transparent;
}
.ocf-theme-light .ocf-selected-discard:hover {
border-color: #d9534f;
}
.ocf-theme-light .ocf-selected-value-name {
color: #222;
}
.ocf-theme-light .ocf-filter {
margin-bottom: 25px;
}
.ocf-theme-light.ocf-horizontal .ocf-filter {
margin-bottom: 10px;
}
.ocf-theme-light .ocf-filter-header,
.ocf-theme-light .ocf-module-page-header {
color: #212529;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
margin-bottom: 15px;
}
.ocf-theme-light .ocf-filter-header .ocf-active-label {
font-weight: normal;
}
.ocf-theme-light.ocf-horizontal .ocf-filter-header {
font-weight: normal;
margin-bottom: 0;
}
.ocf-theme-light .ocf-dropdown .ocf-filter-header {
border: 0;
font-weight: bold;
padding: 8px 12px;
background-color: #eceef2;
border-radius: 3px;
}
.ocf-theme-light .ocf-dropdown .ocf-filter-header:hover {
background-color: #f4f5f8;
}
.ocf-theme-light.ocf-horizontal .ocf-dropdown .ocf-filter-header {
font-weight: normal;
}
.ocf-theme-light .ocf-active.ocf-dropdown .ocf-filter-header {
background-color: #ffeedf;
}
.ocf-theme-light .ocf-filter-header .ocf-filter-discard:hover {
filter: invert(38%) sepia(18%) saturate(5963%) hue-rotate(328deg) brightness(81%) contrast(105%);
}
.ocf-theme-light .ocf-more-selected {
background-color: rgba(0 0 0 / 12%);
padding: 1px 5px;
border-radius: 2px;
color: #444;
font-weight: bold;
}
.ocf-theme-light .ocf-dropdown.ocf-open .ocf-filter-header {
background-color: #fff;
}
.ocf-theme-light .ocf-dropdown .ocf-filter-body > .ocf-value-list {
background-color: #fff;
border-radius: 5px;
}
.ocf-theme-light-block .ocf-selected-card {
border-radius: 5px;
}
.ocf-theme-light-block .ocf-selected-header {
font-size: 16px;
font-weight: bold;
}
.ocf-theme-light-block .ocf-selected-filter {
background-color: #f5f7f9;
border-radius: 15px;
}
.ocf-theme-light-block .ocf-selected-filter-name {
color: #8596a4;
font-size: 13px;
}
.ocf-theme-light-block .ocf-selected-discard {
border: 1px solid transparent;
border-radius: 20px;
background-color: transparent;
}
.ocf-theme-light-block .ocf-selected-discard:hover {
border-color: #d9534f;
}
.ocf-theme-light-block .ocf-selected-value-name {
font-size: 13px;
color: #222;
}
.ocf-theme-light-block.ocf-vertical .ocf-filter,
.ocf-theme-light-block.ocf-vertical .ocf-module-page {
margin-bottom: 15px;
padding: 15px 20px;
border-radius: 5px;
}
.ocf-theme-light-block.ocf-vertical .ocf-filter {
background-color: #f0f2f5;
}
.ocf-theme-light-block.ocf-horizontal .ocf-filter {
margin-bottom: 10px;
}
.ocf-theme-light-block.ocf-vertical .ocf-active {
background-color: #ffeedf;
}
.ocf-theme-light-block.ocf-horizontal .ocf-filter-header {
background-color: #f0f2f5;
padding: 10px 15px;
border-radius: 5px;
}
.ocf-theme-light-block.ocf-horizontal .ocf-dropdown.ocf-open .ocf-filter-header {
background-color: #fff;
}
.ocf-theme-light-block .ocf-filter-header .ocf-filter-name,
.ocf-theme-light-block .ocf-filter-header .ocf-active-label,
.ocf-theme-light-block .ocf-module-page-header {
color: #444;
}
.ocf-theme-light-block .ocf-filter-header .ocf-active-label {
font-weight: normal;
}
.ocf-theme-light-block.ocf-horizontal .ocf-filter-header .ocf-filter-name,
.ocf-theme-light-block.ocf-horizontal .ocf-filter-header .ocf-active-label {
font-weight: normal;
}
.ocf-theme-light-block.ocf-horizontal .ocf-active.ocf-dropdown .ocf-filter-header {
background-color: #fdeede;
}
.ocf-theme-light-block .ocf-filter-header .ocf-filter-discard:hover {
filter: invert(1) saturate(20);
}
.ocf-theme-light-block .ocf-more-selected {
background-color: rgba(0 0 0 / 12%);
padding: 1px 5px;
border-radius: 2px;
font-size: 12px;
color: #444;
font-weight: bold;
}
.ocf-theme-light-block .ocf-dropdown .ocf-open .ocf-filter-header,
.ocf-theme-light-block.ocf-horizontal .ocf-open.ocf-active.ocf-dropdown .ocf-filter-header {
background-color: #fff;
}
.ocf-theme-light-block .ocf-dropdown .ocf-filter-body > .ocf-value-list {
background-color: #fff;
box-shadow: 0 5px 17px rgb(0 0 0 / 15%);
border-radius: 5px;
padding: 55px 20px 15px;
margin: -15px -17px 0;
}
.ocf-theme-light-block.ocf-horizontal .ocf-dropdown .ocf-filter-body > .ocf-value-list {
padding: 60px 17px 15px;
margin: -8px 0 0;
}
.ocf-theme-light-block .ocf-scroll-y {
background-color: transparent;
background-image: linear-gradient(#f0f2f5 30%, transparent), linear-gradient(transparent, #f0f2f5 70%), radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 10%), transparent),
radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 10%), transparent);
}
.ocf-theme-light-block .ocf-active .ocf-scroll-y {
background-image: linear-gradient(#fdeede 30%, transparent), linear-gradient(transparent, #fdeede 70%), radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 10%), transparent),
radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 10%), transparent);
}
.ocf-theme-light-block .ocf-dropdown .ocf-scroll-y,
.ocf-theme-light-block .ocf-module-page-list.ocf-scroll-y {
background-image: linear-gradient(white 30%, transparent), linear-gradient(transparent, white 70%), radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 10%), transparent),
radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 10%), transparent);
}
.ocf-theme-light-block .ocf-selected .ocf-value-input::before {
background-color: #fff;
}
.ocf-theme-light-block .ocf-value .ocf-value-input::after {
filter: invert(46%) sepia(39%) saturate(589%) hue-rotate(151deg) brightness(100%) contrast(88%);
background-size: 10px;
}
.ocf-theme-light-block .ocf-value-count {
font-size: 11px;
background-color: rgb(79 83 88 / 10%);
border-radius: 50px;
font-weight: 400;
color: #46494e;
}
}