/* CSS for bubble events in rangers (page_experiment.html) */

.ranger {
  padding: 0.2em;
}
.ranger {
  width: 100%;
}
.ranger.input {
  -webkit-appearance: none;
  width: calc(70%); /* was 77% but UNINOVE's Chromebooks 'bugs' it */
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}
.ranger.input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
.ranger.input::-webkit-slider-thumb:hover {
  background: #1abc9c;
}
.ranger.input:active::-webkit-slider-thumb {
  background: #1abc9c;
}
.ranger.input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
.ranger.input::-moz-range-thumb:hover {
  background: #1abc9c;
}
.ranger.input:active::-moz-range-thumb {
  background: #1abc9c;
}
.ranger.input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.ranger.value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}
.ranger.value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: '';
}
::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}
input::-moz-focus-inner, input::-moz-focus-outer {
  border: 0;
}