
      


        .SIBG-Range {
            direction: ltr !important;
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
        }

        .SIBG-line-holder {
            direction: ltr !important;
            width: 100%;
            height: 100px;
            display: block;
        }

        .SIBG-line {
            width: calc(100% - 18px);
            height: 5px;
            margin-left: 10px;
            background-color: #bbbbbb;
            display: block;
            top: 50%;
            position: relative;
            direction: ltr !important;
        }

        .SIBG-min,
        .SIBG-max {
            background-color: white;
            padding: 5px;
            color: #0389ff;
            font-size: 12px;
            position: relative;
            transition: opacity 0.1s ease-in-out;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            top: 3px;
            opacity: 1;
            direction: ltr !important;
            -webkit-transition: opacity 0.1s ease-in-out;
            -moz-transition: opacity 0.1s ease-in-out;
            -ms-transition: opacity 0.1s ease-in-out;
            -o-transition: opacity 0.1s ease-in-out;
}

        .SIBG-min {
            float: left;
            direction: ltr !important;
        }

        .SIBG-max {
            float: right;
            direction: ltr !important;
        }

        .SIBG-thumb {
            position: absolute;
            will-change: transform;
            transform-origin: left;
            width: 20px;
            transform: translateX(0);
            height: 20px;
            border-radius: 50%;
            background-color: white;
            display: inline-block;
            top: 36%;
            border: solid 1px #6d6d6d;
            direction: ltr !important;
        }

        .SIBG-thumb::before,
        .SIBG-bar::before {
            padding: 5px;
            background-color: #0389ff;
            color: white;
            content: attr(data-value);
            bottom: 26px !important;
            border-radius: 2px;
            position: absolute;
            left: var(--from-left);
            visibility: hidden;
            font-size: 12px;
            transform: translateX(-50%);
            border-radius: 50;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            white-space: nowrap;
            direction: ltr !important;
        }

        .SIBG-thumb.SIBG-to::before {
            left: var(--to-left);
            direction: ltr !important;
        }

        .SIBG-thumb::after {
            content: "";
            border: 5px solid;
            bottom: 16px;
            left: 4px;
            border-color: #0389ff transparent transparent transparent;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            position: absolute;
            direction: ltr !important;
        }

        .SIBG-bar {
            height: 5px;
            background-color: #0389ff;
            display: inline-block;
            position: absolute;
            top: 42%;
            direction: ltr !important;
        }

        .SIBG-hasValue.SIBG-bar::before {
            bottom: 19px !important;
            left: var(--bar-left) !important;
            transform: translateX(-50%);
            visibility: visible;
            transition: width 0.3s ease-in-out;
            -webkit-transition: width 0.3s ease-in-out;
            -moz-transition: width 0.3s ease-in-out;
            -ms-transition: width 0.3s ease-in-out;
            -o-transition: width 0.3s ease-in-out;
            direction: ltr !important;
        }


        .SIBG-hasValue.SIBG-thumb::before {
            visibility: visible;
            direction: ltr !important;
        }

        .SIBG-to {
            left: calc(100% - 20px);
            direction: ltr !important;
        }

        .SIBG-cover {
            width: 100%;
            position: absolute;
            top: 0;
            height: 44px;
            left: 0;
            z-index: 99;
            background-color: transparent;
            direction: ltr !important;
        }

        .SIBG-grid {
            width: calc(100% - 20px);
            display: block;
            height: 1px;
            position: relative;
            top: 50%;
            margin-left: 10px;
            direction: ltr !important;
        }

        .SIBG-step {
            position: absolute;
            margin-top: 15px;
            display: inline-block;
            width: 2px;
            top: -15px;
            height: 8px;
            left: 50%;
            background: #bbbbbb;
            direction: ltr !important;
        }

        .SIBG-step:after {
            content: attr(data-value);
            position: absolute;
            color: #bbbbbb;
            word-break: keep-all !important;
            display: inline-block;
            transform: translateX(-50%);
            margin-top: 15px;
            font-size: 12px;
            direction: ltr !important;
        }

        .SIBG-step-grid {
            position: absolute;
            margin-top: 15px;
            display: inline-block;
            width: 2px;
            top: -15px;
            height: 5px;
            background: #bbbbbb;
            direction: ltr !important;
        }

