input[type="range"] {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;
	/* creating a custom design */
	width: 100%;
	cursor: pointer;
	outline: none;
	border-radius: 15px;
	/*  overflow: hidden;  remove this line*/

	/* New additions */
	height: 16px;
	background: hsl(var(--default-color));
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;
	/* creating a custom design */
	--size: 2rem;
	height: var(--size);
	width: var(--size);
	background-color: hsl(var(--gatewayfy-color));
	border-radius: 50%;
	border: none;

	transition: 0.2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
	height: 15px;
	width: 15px;
	background-color: hsl(var(--gatewayfy-color));
	border-radius: 50%;
	border: none;

	/* box-shadow: -407px 0 0 400px hsl(var(--gatewayfy-color)); emove this line */
	transition: 0.2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 10px hsla(var(--gatewayfy-color), 0.1);
}
input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: 0 0 0 13px hsla(var(--gatewayfy-color), 0.2);
}
input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 13px hsla(var(--gatewayfy-color), 0.2);
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
	box-shadow: 0 0 0 10px hsla(var(--gatewayfy-color), 0.1);
}
input[type="range"]:active::-moz-range-thumb {
	box-shadow: 0 0 0 13px hsla(var(--gatewayfy-color), 0.2);
}
input[type="range"]:focus::-moz-range-thumb {
	box-shadow: 0 0 0 13px hsla(var(--gatewayfy-color), 0.2);
}