:host(.bk-RangeSlider) {
    margin-left:20px;
    margin-top:12px;
}

:host {
    --md-sys-color-primary: #2196F3;
    --md-sys-color-primary-alpha50: rgba(30, 129, 240, 0.5);
    --handle-width: 20px;
    --handle-height: 20px;
    --slider-size: 4px !important;
}

.noUi-connect {
    background: var(--md-sys-color-primary) !important;
    border-color: var(--md-sys-color-primary) !important;
}

.noUi-connects {
    background-color: var(--md-sys-color-primary-alpha50);
}

.noUi-handle {
    border-radius: calc( var(--handle-height) / 2 );
    background: var(--md-sys-color-primary);
    /* box-shadow: none; */
    box-shadow: 0px 1px 2px rgba(var(--md-sys-color-shadow-rgb), 0.3), 0px 1px 3px rgba(var(--md-sys-color-shadow-rgb), 0.15);
    border:none;
}

.noUi-handle:hover {
    box-shadow: 0px 0px 0px calc(var(--handle-width) / 2) rgba(var(--md-sys-color-primary-rgb), var(--md-sys-state-hover-state-layer-opacity)); 
    border:none;
}

.noUi-tooltip {
    height: 28px;
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border:none;
    
}
.noUi-target {
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    box-shadow: none;
}

.bk-slider-title, .bk-slider-title * {
   display:none;
}