canvas {
		border: solid 1px #000;
	}
input[type="range"] {
		width: 100%
	}
	#colorControls label, .swatch label {
		display: block;
	}
	.border {
		border: var(--border-style) var(--border-width) var(--border-color);
	}
	.border-dark {
		border: solid 1px #000;
	}
	.rounded {
		border-radius: var( --border-radius);
	}
	iframe {
		height: 490px;
		max-height: 490px;
		overflow: auto;
	}
	#resetAll::before {
		font: var(--fa-font-solid);
		content: "\f2ea";
	}
	#swatch1, #swatch2, #swatch3, #swatch4, #swatch5 {
		margin-bottom: 1.5rem;
	}

/* ============================================================
   SWATCH REGLER ICONS – MONOCHROMES DESIGN MIT SVG-THUMBS
   ============================================================ */

/* Regler allgemein */
.swatch input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: 4px;
}
.swatch input[type="range"]::-moz-range-progress{
		height: 12px;
		background: linear-gradient(to bottom, #0062b3 5%, #0070cc 15%, #66baff 50%, #0070cc 75%, #0062b3 95%); 
	 border-radius: 9px;
  }
 #colorControls input[type="range"]::-moz-range-progress{
		height: 12px;
  background: linear-gradient(to bottom, #0062b3 5%, #0070cc 15%, #66baff 50%, #0070cc 75%, #0062b3 95%); 
	 border-radius: 9px;
  }
/* ------------------------------------------------------------
   SLIDER TRACK (Leiste)
   ------------------------------------------------------------ */

.swatch input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 3px;
  background: #ddd;
	 height: 8px;
}

.swatch input[type="range"]::-moz-range-track {
  border-radius: 3px;
  background: #ddd;
		height: 8px;
}

#colorControls input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 3px;
  background: #ddd;
		height: 8px;
}

#colorControls input[type="range"]::-moz-range-track {
  border-radius: 3px;
  background: #ddd;
		height: 8px;
}

/* ------------------------------------------------------------
   SLIDER THUMB (Basis)
   ------------------------------------------------------------ */

.swatch input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
	 border: none;
  cursor: pointer;
}

.swatch input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
	 border: none;
  cursor: pointer;
}

#colorControls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border: none;
  cursor: pointer;
}

#colorControls input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border: none;
  cursor: pointer;
}

/* ------------------------------------------------------------
   HUE / FARBTON
   ------------------------------------------------------------ */

.swatch input[id$="farbton"]::-webkit-slider-thumb {
  background-image: url("../svg/palette.svg");
	 background-size: 18px;
}

.swatch input[id$="farbton"]::-moz-range-thumb {
  background-image: url("../svg/palette.svg");
	 background-size: 18px;
}

/* ------------------------------------------------------------
   SATURATION / SÄTTIGUNG / KONTRAST
   ------------------------------------------------------------ */

#colorControls input[id$="kontrast"]::-webkit-slider-thumb {
  background-image: url("../svg/circle-half-stroke.svg");
	 background-size: 18px;
}

#colorControls input[id$="kontrast"]::-moz-range-thumb {
  background-image: url("../svg/circle-half-stroke.svg");
	 background-size: 18px;
}

.swatch input[id$="saettigung"]::-webkit-slider-thumb {
  background-image: url("../svg/shower-down.svg");
	 background-size: 18px;
}

.swatch input[id$="saettigung"]::-moz-range-thumb {
  background-image: url("../svg/shower-down.svg");
	 background-size: 18px;
}

/* ------------------------------------------------------------
   LIGHTNESS / HELLIGKEIT
   ------------------------------------------------------------ */

#colorControls input[id$="helligkeit"]::-webkit-slider-thumb {
  background-image: url("../svg/brightness.svg");
	 background-size: 24px;
}

#colorControls input[id$="helligkeit"]::-moz-range-thumb {
  background-image: url("../svg/brightness.svg");
	 background-size: 24px;
}

.swatch input[id$="helligkeit"]::-webkit-slider-thumb {
  background-image: url("../svg/brightness.svg");
	 background-size: 24px;
}

.swatch input[id$="helligkeit"]::-moz-range-thumb {
  background-image: url("../svg/brightness.svg");
	 background-size: 24px;
}