.range-wrap {
	position: relative;
	margin: 0;
	padding: 0;
}

.range {
	width: 100%;
	--SliderColor:#54a8c7;
	-webkit-appearance: none;
}

.range-bubble {
	background: #54a8c7;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 24px;
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
}

input[type="range"] {
    color:#54a8c7
}
  
  /* --------------------------- webkit browsers */
  .range::-webkit-slider-thumb {
	-webkit-appearance: none;	
	background-color: var(--SliderColor);
  }
  /* -------------------------- Firefox */
  .range::-moz-range-thumb { 
	-moz-appearance: none;
	background-color: var(--SliderColor);
  }