/**
 * Estilização de inputs como slider de valor minimo/máximo
 */
.rangeslider {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  margin: 0 auto;
  min-height: 20px;
  margin-bottom: 15px;
}

.rangeslider .sliders {
  position: relative;
}

div:has(> .rangeslider) label {
	width: 100%;
}

div:has(> .rangeslider) .range-values {
	margin: 0;
	position: relative;
	height: 0;
}

.rangeslider .sliders input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.rangeslider .sliders input[type=range]::-moz-range-thumb {
	appearance: none;
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.rangeslider .sliders input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  width: 100%;
  position: absolute;
  background-color: var(--primary-color);
  pointer-events: none;
}

.rangeslider .sliders input[type=range]:first-of-type {
  height: 0;
  z-index: 1;
  top: 2px;
}

.singleslider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  width: 100%;
  position: absolute;
  background-color: var(--primary-color);
  pointer-events: none;
}

.singleslider::-webkit-slider-thumb {
  	appearance: none;
    -webkit-appearance: none;
    pointer-events: all;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.singleslider::-moz-range-thumb {
  	appearance: none;
    -webkit-appearance: none;
    pointer-events: all;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}