.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: 18px; position: relative; z-index: 1; }
.ocf-noUi-connect,
.ocf-noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 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: 16px;
  height: 16px;
  right: -8px;
  top: 0px;
}
.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: #ff8ac9; }

.ocf-noUi-connects:before,
.ocf-noUi-connects:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  background-color: #eceef2;
  width: 10px;
  height: 10px;
  top: 50%;
  margin-top: -5px;
}
.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-radius: 100%;
  cursor: default;
}
.ocf-loading .ocf-noUi-handle {
  background-image: linear-gradient(45deg ,rgba(255,255,255,0.40) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.40) 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 { display: none; }

.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-value-slider {
	width: calc(100% - 16px);
	margin: 10px auto;
}