.slider-labels {
            margin-top: 10px;
        }

        /* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
        .noUi-target, .noUi-target * {
            -webkit-touch-callout: none;
            -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;
        }

        .noUi-target {
            position: relative;
            direction: ltr;
        }

        .noUi-base {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
            /* Fix 401 */
        }
            .noUi-base:hover,.noUi-handle:hover {
            cursor:pointer;
            }

        .noUi-origin {
            position: absolute;
            right: 0;
            top: 0;
            left: 0;
            bottom: 0;
        }

        .noUi-handle {
            position: relative;
            z-index: 1;
        }

        .noUi-stacking .noUi-handle {
            /* This class is applied to the lower origin when
   its values is > 50%. */
            z-index: 10;
        }

        .noUi-state-tap .noUi-origin {
            -webkit-transition: left 0.3s,top .3s;
            transition: left 0.3s,top .3s;
        }

        .noUi-state-drag * {
            cursor: inherit !important;
        }

        /* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
        .noUi-base, .noUi-handle {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        /* Slider size and handle placement;
 */
        .noUi-horizontal {
            height: 4px;
        }

            .noUi-horizontal .noUi-handle {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                left: -7px;
                top: -7px;
                background-color: #ffd119;
            }

        /* Styling;
 */
        .noUi-background {
            background: #D6D7D9;
        }

        .noUi-connect {
            background: #28a745;
            -webkit-transition: background 450ms;
            transition: background 450ms;
        }

        .noUi-origin {
            border-radius: 2px;
        }

        .noUi-target {
            border-radius: 2px;
        }

            .noUi-target.noUi-connect {
            }

        /* Handles and cursors;
 */
        .noUi-draggable {
            cursor: w-resize;
        }

        .noUi-vertical .noUi-draggable {
            cursor: n-resize;
        }

        .noUi-handle {
            cursor: default;
            -webkit-box-sizing: content-box !important;
            -moz-box-sizing: content-box !important;
            box-sizing: content-box !important;
        }

            .noUi-handle:active {
                border: 8px solid #345DBB;
                border: 8px solid rgba(53,93,187,0.38);
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                left: -14px;
                top: -14px;
            }

        /* Disabled state;
 */
        [disabled].noUi-connect, [disabled] .noUi-connect {
            background: #B8B8B8;
        }

        [disabled].noUi-origin, [disabled] .noUi-handle {
            cursor: not-allowed;
        }
        .caption {
        color:white;
        }