.bucle input[type="range"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0 2px;
  /*overflow: hidden;*/
  border: 0;
  border-radius: 1px;
  outline: none;
  pointer-events: none;
  height: inherit;
  width: 100%;
  position: absolute;
  z-index: 1000;
}

.bucle input[type="range"]:active,
.bucle input[type="range"]:focus {
  outline: none;
}

.bucle input[type="range"]::-webkit-slider-thumb {
  height: 24px;
  width: 18px;
  /*border-radius: 28px;
  background-color: #fff;*/
  background-color: transparent;
  position: relative;
  margin: 5px 0;
  /* Add some margin to ensure box shadow is shown */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  /*background-image: url('../images/icon-bucle-end.svg');*/
  background-repeat: no-repeat;
  background-position: top;
  -webkit-appearance: none;
  appearance: none;
pointer-events: all;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.bucle input[type="range"]::-webkit-slider-thumb {
  background-position: top;
}

.bucle input[type="range"].bucle-start::-webkit-slider-thumb {
  background-image: url('../images/icon-bucle-start.svg');
}

.bucle input[type="range"].bucle-end::-webkit-slider-thumb {
  background-image: url('../images/icon-bucle-end.svg');
}

.multi-range {
  position: relative;
}
.multi-range input[type="range"] {
  position: absolute;
  top: -22px;
}

.bucle .slider-line {
  position: absolute;
  display: block;
  top: 5px;
  height: 2px;
  background: #00D586;
  z-index: 999;
}
/*
.multi-range input[type="range"]:nth-child(1)::-webkit-slider-thumb::before {
  background-color: red;
}
.multi-range input[type="range"]:nth-child(2) {
  background: none;
}
.multi-range input[type="range"]:nth-child(2)::-webkit-slider-thumb::before {
  background-color: grey;
}*/