.dot {
	height: 25px;
	width: 25px;
	background-color: #000000;
	border-radius: 50%;
	display: inline-block;
}

input[type=range] {
	height: 37px;
	-webkit-appearance: none;
	margin: 15px 0;
	width: 100%;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 14px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #C9D0D1;
	border-radius: 8px;
	border: 0px solid #000000;
}

.notclicked::-webkit-slider-thumb {
	visibility: hidden;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8.5px;
}

.clicked::-webkit-slider-thumb {
	visibility: visible;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8.5px;
}   

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #C9D0D1;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 14px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #C9D0D1;
	border-radius: 8px;
	border: 0px solid #000000;
}
.notclicked::-moz-range-thumb {
	visibility: hidden;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
}

.clicked::-moz-range-thumb {
	visibility: visible;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
}

input[type=range]::-ms-track {
	width: 100%;
	height: 14px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: #C9D0D1;
	border: 0px solid #000000;
	border-radius: 16px;
	box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
	background: #C9D0D1;
	border: 0px solid #000000;
	border-radius: 16px;
	box-shadow: 0px 0px 0px #000000;
}
.notclicked::-ms-thumb {
	visibility: hidden;
	margin-top: 1px;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
}

.notclicked::-ms-thumb {
	visibility: visible;
	margin-top: 1px;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #000000;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #000000;
	cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
	background: #C9D0D1;
}
input[type=range]:focus::-ms-fill-upper {
	background: #C9D0D1;
}