/* Maker/taker als schuif in de hoofdcalculator.
   Zelfde vorm als de schuif in de tokenrekenmachine, zodat de twee rekenmachines
   op elkaar lijken. Eigen bestandsnaam met datum: app.css hangt aan een ?v= en
   die bleek niet betrouwbaar te verversen. */
.maker-range{display:flex;align-items:center;gap:12px}
.maker-range input[type=range]{
  flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;
  background:#E4EAF3;border-radius:999px;outline:none;cursor:pointer;
}
.maker-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#2864EA;border:0;cursor:pointer;box-shadow:0 2px 8px -2px rgba(40,100,234,.6);
}
.maker-range input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#2864EA;border:0;cursor:pointer;
}
.maker-range input[type=range]:focus-visible{outline:2px solid #2864EA;outline-offset:4px}
.maker-range-value{
  flex:0 0 auto;min-width:74px;text-align:right;font-size:13px;font-weight:850;
  color:#175CE5;font-variant-numeric:tabular-nums;
}
@media(max-width:640px){
  .maker-range input[type=range]{height:6px}
  .maker-range input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
}