@charset "UTF-8";
/* CSS Document */
/* =======================================================================
   CAPTCHA
   ======================================================================= */
.captcha-container {
  width: 640px;
  margin: 40px auto;
  padding: 20px;
  background: #ffeecc;
  border-radius: 12px;
  text-align: center;
  touch-action: none;
  box-sizing: border-box;
}
/* voorkom dat de algemene div-opmaak hier invloed heeft */
.captcha-container div {
  background: #ffeecc;
  padding: 0;
}
.captcha-container {
  background: #ffeecc;
  padding: 20px;
}
.puzzel {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
}
.laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; 
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.sliders {
  margin-top: 25px;
}
.sliders input[type=range] {
  display: block;
  width: 600px;
  margin: 18px auto;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* rails */
.sliders input[type=range]::-webkit-slider-runnable-track {
  height: 71px;
  /*background:#999;
    border:2px solid #444;*/
  border-radius: 70px;
}
.groen::-webkit-slider-runnable-track {
  background: #3fa34d;
  border: 2px solid #2b7a36;
}
.rood::-webkit-slider-runnable-track {
  background: #d9534f;
  border: 2px solid #a8322d;
}
/* knop */
.sliders input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 110px;
  height: 65px;
  border-radius: 70px;
  margin-top: 0px;
}
.groen::-webkit-slider-thumb {
  background: #00aa00;
  border: 5px solid #cfc;
}
.rood::-webkit-slider-thumb {
  background: #dd0000;
  border: 5px solid #fcc;
}
.captcha-container h3 {
  margin-top: 20px;
}
/* ======================= Desktop ======================= */
@media (min-width:1000px) {
  .captcha-container {
    width: 340px;
  }
  .puzzel {
    width: 300px;
    height: 300px;
  }
  .sliders input[type=range] {
    width: 300px;
  }
  .sliders input[type=range]::-webkit-slider-runnable-track {
    height: 30px;
  }
  .sliders input[type=range]::-webkit-slider-thumb {
    width: 40px;
    height: 26px;
    margin-top: 0px;
  }
  .groen::-webkit-slider-thumb {
    border: 2px solid #cfc;
  }
  .rood::-webkit-slider-thumb {
    border: 2px solid #fcc;
  }
}