/*garbage*/
.slidecontainer {
  flex-grow: .8;
}
/*necessary*/
[pointed] {
  --position: 0;
  --color-green: rgba(179,216,165,1);
  --color-gray: rgba(204,210,205,1);
  -webkit-appearance: none;
  box-sizing:border-box;
  width: 100%;
  height: 7px;
  border-radius: 15px;  
  background: #CCD2CD;
  background: linear-gradient(90deg,  var(--color-green) 0%, var(--color-green) calc( var(--position)* 100%), var(--color-gray) calc( var(--position)* 100%), var(--color-gray) 100%);
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  z-index:2;
}

[pointed]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  box-sizing:border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%; 
  border:2px solid #214824;
  background: #387002;
  cursor: pointer;
}
 [pointed]::-moz-range-thumb{
  box-sizing:border-box;
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%; 
  border:2px solid #214824;
  background: #387002;
  cursor: pointer;
}

[pointed]::-moz-range-thumb:hover {
  background: #2A6D99;
  border:4px solid #2A6D99;

}
 [pointed]::-webkit-slider-thumb:hover  {
  background: #2A6D99;
  border:4px solid #2A6D99;

}

div.slider-points {
  box-sizing:border-box;
  width: calc(100% - 3px);
  height: 12px;
  pointer-events: none; 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  margin-top: -16.5px;
  padding-left: 7px;
}
@-moz-document url-prefix() {
  div.slider-points {
    margin-top: -18px;
  }
}
div.slider-points span {
  box-sizing:border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #387002;
}