.prompt { width: 150px; float: left; font-size: 16px; }
.field  { float: left; font-size: 16px; font-weight: bold; }
.debug  { background-color: lightgrey; color: red; font-size: 12px; padding: 4px; }

.header { text-align: center; background-color: lightgrey; }
.footer { text-align: center; background-color: lightgrey; margin-top: 2em; }

.box    { width: 900px; border: 2px solid green; padding: 10px; margin: 20px; text-align: center; }

.alternate-0 { background-color: lightgreen; padding: 5px 0px 5px 0px; }
.alternate-1 { background-color: white; padding: 5px 0px 5px 0px; }
.knop   { padding: .4em; }
.toon   { background-color: orange; }
.opslaan { background-color: green; color: white; }
.publish { background-color: orange; }
.terug  { background-color: blue; color: white; }
.insert { background-color: yellow; color: black; }
.bewerk { background-color: green; color: white; }
.delete { background-color: red; color: white; }

/* Slider stuff */
.slidecontainer { width: 150%; }

.slider {
  -webkit-appearance: none;
  width: 50%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover { opacity: 1; }

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}