.dd-rangeslider-slider {
	--dd-rangeslider-color: black;
	--dd-rangeslider-thumbfill: white;
    --dd-rangeslider-linewidth: 1px;
    --dd-rangeslider-size: 18px;
}

.dd-rangeslider-slider {
	position: relative;
	width: 100%;
	height: 2em;
}

.dd-rangeslider-slider input {
	position: absolute;
	margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 0;
    /*  pointer-events: none; /* Prevent mouse interaction on the range slider. It didn't work in edge, so I fixed it in JS */
	-webkit-appearance: none;
	width: 100%;
	height: 2em;
	border-radius: 5px;
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
    display: block;
	background: #FFFFFF;
	background: #00000000;
	background-color:transparent;
}

.dd-rangeslider-slider input:focus {
    outline:none;
    border:none;
}

.dd-rangeslider-slider input.dd-rangeslider-input-fallback-receiver {
    opacity: 0!important;
}


/* .dd-rangeslider-slider input[type=range]::-webkit-slider-thumb {
    border: none;
}
.dd-rangeslider-slider input[type=range]::-moz-range-thumb {
    border: none;
}
.dd-rangeslider-slider input[type=range]::-ms-thumb {
    border: none;
} */



@media (hover: hover) {
    .not-touch-device .dd-rangeslider-slider  input:hover {
    	opacity: 1;
    }
}




input.dd-rangeslider-input-max{
	background: #FFFFFF;
	background: #00000000;
	background-color:transparent;
}




.dd-rangeslider-track {
    display: block;
    position: absolute;
    height: var(--dd-rangeslider-linewidth);
    background-color: var(--dd-rangeslider-color);
    width: 100%;
    z-index: 0;
    margin: 0.75em 0em;
    border: 0px solid #7d7d7d;
    opacity: 1;
    border-radius: 1em;
    pointer-events: none;
    transform:translate(0, 2px)
}

.dd-rangeslider-marker {
    background-color: var(--dd-rangeslider-color);
    width: auto;
    height: 100%;
    margin: 0px;
    margin-left: 0%;
    margin-right: 0%;
}


/* TRACKS */
.dd-rangeslider-slider input::-webkit-slider-runnable-track {
    cursor: default;
    height: 1px; /* Required for Samsung internet based browsers */
    outline: 0;
    -webkit-appearance: none;
}

.dd-rangeslider-slider input::-moz-range-track {
    cursor: default;
    -moz-appearance: none;
    outline: 0;
    height: 1px;
}

.dd-rangeslider-slider input::-ms-track {
    color:transparent;
}


/* THUMBS */
.dd-rangeslider-slider input::-webkit-slider-thumb {
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	width: var(--dd-rangeslider-size);
	height: var(--dd-rangeslider-size);
    transform:translateY(-50%);
    border: var(--dd-rangeslider-linewidth) solid var(--dd-rangeslider-color);
	border-radius: 50%;
	background: var(--dd-rangeslider-thumbfill);
	cursor: pointer;
	cursor: grab;
	z-index: 100;
	pointer-events: auto; /* Re-enable pointer events so the handles can be used. */
	bottom:0px;
}
.dd-rangeslider-slider input:focus-visible::-webkit-slider-thumb {
	outline: solid 2px var(--dd-rangeslider-color);
    outline-offset: 2px;
    background: var(--dd-rangeslider-color);
}
input.dd-rangeslider-input-min::-webkit-slider-thumb {
	right:0.5em;
}
input.dd-rangeslider-input-max::-webkit-slider-thumb {
	left:0.5em;
}


.dd-rangeslider-slider input::-moz-range-thumb {
	position: relative;
	width: var(--dd-rangeslider-size);
	height: var(--dd-rangeslider-size);
    border: var(--dd-rangeslider-linewidth) solid var(--dd-rangeslider-color);
	border-radius: 50%;
	background: var(--dd-rangeslider-thumbfill);
	cursor: pointer;
	cursor: grab;
	z-index: 100;
	pointer-events: auto; /* Re-enable pointer events so the handles can be used. */
}
.dd-rangeslider-slider input:focus-visible::-moz-range-thumb {
	outline: solid 2px var(--dd-rangeslider-color);
    outline-offset: 2px;
    background: var(--dd-rangeslider-color);
}
input.dd-rangeslider-input-min::-moz-range-thumb {
	right:0.5em;
}
input.dd-rangeslider-input-max::-moz-range-thumb {
	left:0.5em;
}



/* LABELS */
.dd-rangeslider-labels {
    display: flex;
    justify-content: space-between;
}