/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #FFFFFFAA;
    border-radius: 10px;
    cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

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: 6px;
    background: #4B5563;
  }
  
  /* Thumb: webkit */
  input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    height: 22px;
    width: 22px;
    background-color: #4B5563;
    border-radius: 50%;
    border: 1px solid #6B7280;
  
    /* box-shadow: -407px 0 0 400px #4B5563; emove this line */
    transition: .2s ease-in-out;
  }
  
  /* Thumb: Firefox */
  input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: #4B5563;
    border-radius: 50%;
    border: none;
    border: 1px solid #6B7280;
    
    /* box-shadow: -407px 0 0 400px #4B5563; emove this line */
    transition: .2s ease-in-out;
  }
  
  /* Hover, active & focus Thumb: Webkit */
  input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px #3F83F822 
  }
  input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 7px #3F83F855
  }
  input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 7px #3F83F855
  }
  
  /* Hover, active & focus Thumb: Firefox */
  input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px #3F83F822
  }
  input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px #3F83F855
  }
  input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px #3F83F855  
  }