/*========================================================
        DARK LAYOUT
=========================================================*/
.noUi-background
{
    background: #f0f0f0;
}

.noUi-target
{
    border: none;
    border-radius: 1rem; 
    background-color: #ebebeb;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.noUi-target.noUi-connect
{
    -webkit-box-shadow: none;
            box-shadow: none;
}

.noUi-horizontal
{
    height: 10px;
    padding-right: 17px;
}
.noUi-horizontal .noUi-handle
{
    top: -5px;
    left: -1px; 

    width: 20px;
    height: 20px;
}
.noUi-horizontal .noUi-origin
{
    right: -17px; 
    left: 17px;
}
.noUi-horizontal.slider-xl
{
    height: 14px;
}
.noUi-horizontal.slider-xl .noUi-handle
{
    top: -7px; 

    width: 28px;
    height: 28px;
}
.noUi-horizontal.slider-lg
{
    height: 12px;
}
.noUi-horizontal.slider-lg .noUi-handle
{
    top: -6px; 

    width: 24px;
    height: 24px;
}
.noUi-horizontal.slider-sm
{
    height: 6px;
}
.noUi-horizontal.slider-sm .noUi-handle
{
    right: -2px !important; 

    width: 15px;
    height: 15px;
}
.noUi-horizontal.slider-xs
{
    height: 3px;
}
.noUi-horizontal.slider-xs .noUi-handle
{
    top: -4px;
    right: -2px !important; 

    width: 10px;
    height: 10px;
}

.noUi-handle
{
    border: none;
    border: 5px solid #7367f0; 
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.noUi-handle:after,
.noUi-handle:before
{
    display: none;
}

.circle-filled .noUi-handle
{
    border-radius: 50%; 
    background: #7367f0;
}
.circle-filled .noUi-handle:after,
.circle-filled .noUi-handle:before
{
    display: none;
}

.square .noUi-handle
{
    border-radius: 3px; 
    background: #7367f0;
}
.square .noUi-handle:before
{
    top: 0; 
    left: 2px;

    display: block;

    width: 2px;
    height: 10px;
}
.square .noUi-handle:after
{
    top: 0; 
    left: 7px;

    display: block;

    width: 2px;
    height: 10px;
}

.square.slider-xl .noUi-handle:before
{
    top: 4px; 
    left: 5px;
}

.square.slider-xl .noUi-handle:after
{
    top: 4px; 
    left: 10px;
}

.square.slider-lg .noUi-handle:before
{
    top: 2px; 
    left: 3px;
}

.square.slider-lg .noUi-handle:after
{
    top: 2px; 
    left: 8px;
}

.square.slider-sm .noUi-handle:before
{
    top: -1px;
    left: -1px;

    height: 7px;
}

.square.slider-sm .noUi-handle:after
{
    top: -1px;
    left: 4px;

    height: 7px;
}

.square.slider-xs .noUi-handle:before
{
    top: -3px;
    left: -3px;

    height: 5px;
}

.square.slider-xs .noUi-handle:after
{
    top: -3px;
    left: 1px;

    height: 5px;
}

.noUi-connect
{
    background: #7367f0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.noUi-vertical
{
    display: inline-block;

    width: 8px;
    height: 150px;
}
.noUi-vertical .noUi-handle
{
    top: -5px;
    left: -6px; 

    width: 20px;
    height: 20px;
}
.noUi-vertical.square .noUi-handle
{
    border-radius: 3px; 
    background: #7367f0;
}
.noUi-vertical.square .noUi-handle:before
{
    top: 2px; 
    left: -1px;

    display: block;

    width: 12px;
    height: 2px;
}
.noUi-vertical.square .noUi-handle:after
{
    top: 7px; 
    left: -1px;

    display: block;

    width: 12px;
    height: 2px;
}

.example-val
{
    font: 400 12px Arial;

    display: block;

    margin: 15px 0; 

    color: #888;
}

.noUi-handle:focus
{
    outline: 0;
}

_:-ms-lang(x),
.slider-select
{
    max-width: 10%; 

    -ms-flex: 0 0 10%;
        flex: 0 0 10%;
}