/* General styles for the range input */
input[type='range'] {
  appearance: none;
  -webkit-appearance: none; /* Remove default styling in WebKit browsers */
  width: 100%; /* Full width */
  height: 10px; /* Height of the track */
  background: black; /* Track color */
  outline: 2px solid chartreuse; /* Remove outline */
  border-radius: 4px;
  opacity: 0.7; /* Slight transparency */
  transition: opacity 0.2s; /* Smooth transition */
}

input[type='range']:hover {
  opacity: 1; /* Full opacity on hover */
}

/* WebKit browsers (Chrome, Safari, etc.) */
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default styling */
  appearance: none; /* Remove default styling */
  width: 10px; /* Width of the thumb */
  height: 10px; /* Height of the thumb */
  background: white; /* Thumb color */
  border: 2px solid chartreuse; /* White border around the thumb */
  border-radius: 50%; /* Round the thumb */
  cursor: pointer; /* Pointer cursor on hover */
  margin-top: 0; /* Center the thumb vertically */
}

/* WebKit browsers (Chrome, Safari, etc.) - Track */
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background: #000;
}

/* Mozilla browsers (Firefox) */
input[type='range']::-moz-range-thumb {
  width: 10px; /* Width of the thumb */
  height: 10px; /* Height of the thumb */
  margin-top: 0; /* Center the thumb vertically */
  background: chartreuse; /* Thumb color */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Mozilla browsers (Firefox) - Track */
input[type='range']::-moz-range-track {
  width: 100%;
  height: 3px;
  background: #000;
}

/* Internet Explorer */
input[type='range']::-ms-thumb {
  width: 10px; /* Width of the thumb */
  height: 10px; /* Height of the thumb */
  margin-top: 0; /* Center the thumb vertically */
  background: chartreuse; /* Thumb color */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Internet Explorer - Track */
input[type='range']::-ms-track {
  width: 100%;
  height: 3px;
  background: #000;
  border-color: transparent;
  color: transparent;
}

/* Internet Explorer - Fill */
input[type='range']::-ms-fill-lower {
  background: #000;
}

input[type='range']::-ms-fill-upper {
  background: #000;
}