.its input[type=range] {
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
   width: 100%; /* Specific width is required for Firefox. */
   background: transparent; /* Otherwise white in Chrome */
   border:none;
 }

 .its  input[type=range]:focus {
   outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
   border:none;
 }

 .its input[type=range]::-ms-track {
   width: 100%;
   cursor: pointer;

   /* Hides the slider so custom styles can be added */
   background: transparent;
   border-color: transparent;
   color: transparent;
 }

 .its input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 4px 20px rgba(60, 60, 60, 0.15);
   -webkit-appearance: none;
   height: 50px;
   width: 50px;
   border-radius: 50%;
   /* background: white; */

   cursor: pointer;
   margin-top: -22px;


   background-image: url('./thumb.svg')  ;
   background-repeat: no-repeat ;
   background-position: center center;
   background-size: auto;
 }



 .its input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  border:none;
  height: 7px;
  cursor: pointer;
  background: #FEF3C0;
}

.its input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FEF3C0;
  border:none;
}

.its input[type=range]::-moz-range-track {
  border:none;
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #FEF3C0;
}