/* This line can be removed it was just for display on CodePen: */
        .container {
            margin:15px 0 25px 0;
            padding:10px;
            box-sizing:border-box;
            position:relative;
            background-color:var(--dark-box-color);
            display:inline-block;
            border-radius:12px;
        }
            .container .rs-title {
                position: absolute;
                top: -13px;
                right: 0;
                padding: 2px 5px;
                background-color:var(--dark-color); /*rgba(53,93,187,0.58);*/
                color: #fff;
                font-size: .6em;
                border-radius: 5px;
            }
        .slider-labels {
            margin-bottom: -2px;
            border-bottom:1px dashed var(--main-color); /*rgba(53,93,187,0.38);*/
            display:inline-block;
            font-size:.7em;
        }

          .container1 {
            margin:15px 0 5px 0;
            padding:10px 20px;
            box-sizing:border-box;
            position:relative;
            background-color:#f9f9f9/*var(--box-color)*/;
            display:inline-block;
            opacity:.82;
            width: 49%;
        }
        .container1 .rs-title {
                position: absolute;
                top: -15px;
                right: 0;
                padding: 0px 10px;
                background-color:var(--main-color); /*rgba(53,93,187,0.58);*/
                color: #fff;
                font-size: .7em;
                border-radius: 5px;
            }
        .slider-labels1 {
            margin-top:2px;
            margin-bottom: -2px;
            border-bottom:1px dashed var(--dark-color); /*rgba(53,93,187,0.38);*/
            display:inline-block;
            font-size:.7em;
        }
        /* 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-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: var(--main-color); /*#345DBB;*/
            }
             .noUi-horizontal .noUi-handle1 {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                left: -7px;
                top: -7px;
                background-color: var(--main-color); /*#345DBB;*/
            }
        /* Styling;
 */
        .noUi-background {
            background: var(--dark-color);/*#D6D7D9;*/
        }

        .noUi-connect {
            background:var(--main-color); /*#345DBB;*/
            -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;
        }


 /************************************ChekBox****************************************/
.chk-container {
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size:.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.chk-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border:1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.chk-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chk-container input:checked ~ .checkmark {
    background-color:rgba(53,93,187,0.9) /*#2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chk-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chk-container .checkmark:after {
    right: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}