/* The slider itself */
.slider {
	-webkit-appearance: none;
	/* Override default CSS styles */
	appearance: none;
	/* Full-width */
	height: 25px;
	/* Specified height */
	background: transparent;
	/* Grey background */
	outline: none;
	/* Remove outline */
	opacity: 0.7;
	/* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s;
	/* 0.2 seconds transition on hover */
	transition: opacity .25s;

	min-width: 250px;
	border: none;
	box-shadow: none;
	border-radius: 5px;
	padding: 0;
	height: 10px;
	background-color: lightgray;
	border: 1px solid darkgray;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* Mouse-over effects */
.slider:hover {
	opacity: 1;
	/* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	/* Override default look */
	appearance: none;
	width: 25px;
	/* Set a specific slider handle width */
	height: 25px;
	/* Slider handle height */
	background: black;
	border-radius: 25px;
	/* Green background */
	cursor: pointer;
	/* Cursor on hover */
}

.slider::-moz-range-thumb {
	width: 25px;
	/* Set a specific slider handle width */
	height: 25px;
	/* Slider handle height */
	background: #04AA6D;
	/* Green background */
	cursor: pointer;
	/* Cursor on hover */
}