.opacity-slider-control .ui-slider-range {
    background-image: none;
    background-color: #646464;
} 



.opacity-slider-container {
    background-color: #fff;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
}
.opacity-slider-container.horizontal {
    padding: 1.8em 1.2em .6em 1.2em;
}
.opacity-slider-container.vertical {
    padding: 1.2em .6em 1.2em 1.4em;
}

/* test */
.ui-slider-vertical .ui-slider-markers {
    position: relative;
    margin: .3em 0;
    width: 100%;
    height: calc(100% - .6em);
}
.ui-slider-horizontal .ui-slider-markers {
    position: relative;
    margin: 0 .3em;
    width: calc(100% - .6em);
    height: 100%;
}


.ui-slider .ui-slider-markers > .ui-slider-marker {
    background-color: #909090;
    position: absolute;
    z-index: 2;
}
.ui-slider-vertical .ui-slider-markers > .ui-slider-marker {
    width: 100%;
    height: 1px;
    left: initial !important;
}
.ui-slider-horizontal .ui-slider-markers > .ui-slider-marker {
    width: 1px;
    height: 100%;
    bottom: initial !important;
}


.ui-slider-marker > .ui-slider-marker-text {
    color: #323232;
    position: absolute;
    cursor: pointer;
    user-select: none;
}
.ui-slider-horizontal .ui-slider-marker > .ui-slider-marker-text {
    top: -1.6em;
    transform: translateX(-50%);
}
.ui-slider-vertical .ui-slider-marker > .ui-slider-marker-text {
    right: 1.6em;
    transform: translateY(-50%);
    white-space: nowrap;
}

.ui-slider-horizontal .ui-slider-handle {
    transform: translateX(-2px);
}
.ui-slider-vertical .ui-slider-handle {
    transform: translateY(2px);
}

.leaflet-opacity-stack {
    position: relative;
    transition: opacity .25s linear;
}