#druck .flexContainer:first-of-type {
	width: 70%;
}

.outputs .wcag .check {
	width: 20px;
}
output.kontrast {
	float: right;
	text-align: right;
}
.outputs output.kontrast::after {
	content: url(daumen-gruen.svg);
	display: block;
	width: 70px;
	margin: 1rem 0;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.outputs.side output.kontrast::after {
	content: url(daumen-grau.svg);
	transform: rotate(-90deg);
}
.outputs.down output.kontrast::after {
	content: url(daumen-rot.svg);
	transform: rotate(-180deg);
}
.outputs .reflexionsgrad,
.outputs .wcag {
	font-size: 0.7rem;
	line-height: 1.3;
}
.outputs .reflexionsgrad span,
.outputs .wcag span {
	color: #005d00;
}
.outputs .reflexionsgrad .check::before,
.outputs .wcag span::before {
	content: "";
	background: url(haekchen-gruen.svg);
	background-repeat: no-repeat;
	width: 0.8em;
	height: 0.8em;
	display: inline-block;
	margin-right: 0.5em;
}
.outputs .reflexionsgrad.false span,
.outputs .wcag.false span {
	color: #a30000;
}
.outputs .reflexionsgrad.false .check::before,
.outputs .wcag.false span::before {
	content: "";
	background: url(x-rot.svg);
	background-repeat: no-repeat;
	width: 0.8em;
	height: 0.8em;
	display: inline-block;
	margin-right: 0.5em;
}

#druck .colorbox.fColor fieldset,
#monitor fieldset.fColor {
	margin-bottom: 1rem;
}
#monitor .inputs label,
#monitor input {
	display: block;
	float: left;
	border-width: 0;
	height: 1.6rem;
	line-height: 1.2rem;
}
#monitor .inputs label,
#monitor input:not([type=color]) {
	padding: 0.15em;
}
#monitor input:not([type=color]) {
	/* padding: 0.15rem 0.25em 0.15rem 1.75rem; */
	min-width: 5rem;
	/* margin-right: 1.5%; */
	/* margin-left: -1.6rem; */
	/* box-sizing: border-box; */
	text-align: right;
	/* width: 30%; */
	/* max-width: 7rem; */
}
#monitor input.hexField {
	min-width: 7.5rem;
	/* margin-left: -3rem; */
	max-width: 9rem;
}
#monitor .inputs label {
	width: 1.6rem;
	text-align: center;
	color: #fff;
	position: relative;
	box-sizing: border-box;
}
#monitor .inputs label.hexField {
	width: 3em;
	background: #000;
	border: 1px solid #000;
	clear: both;
}
#monitor .inputs label[for="R1"],
#monitor .inputs label[for="R2"] {
	background: #dc0000;
	border: 1px solid #dc0000;
}
#monitor .inputs label[for="G1"],
#monitor .inputs label[for="G2"] {
	background: #005d00;
	border: 1px solid #005d00;
}
#monitor .inputs label[for="B1"],
#monitor .inputs label[for="B2"] {
	background: #00f;
	border: 1px solid #00f;
}

#druck .colsystem {
	margin: 0 0 0.7rem 16px;
	width: 14rem;
}
#druck .inputs label,
#druck input {
	display: block;
	float: left;
	border-width: 0;
	height: 1.6rem;
	line-height: 1.2rem;
	margin-bottom: 8px;
}
#druck select {
	margin-bottom: 8px;
}
#druck .cmyk label {
	width: 1.6rem;
	text-align: center;
	color: #fff;
	position: relative;
	box-sizing: border-box;
	display: block;
	float: left;
	border-width: 0;
	height: 1.6rem;
	line-height: 1.2rem;
	padding: 0.15em;
}
#druck input {
	padding: 0.15rem 0.25em 0.15rem 1.75rem;
	min-width: 5rem;
	margin-right: 1.5%;
	margin-left: -1.6rem;
	box-sizing: border-box;
	text-align: right;
	width: 23%;
	max-width: 7rem;
}
#druck .inputs label[for="C1"],
#druck .inputs label[for="C2"] {
	background: #0078ff;
	border: 1px solid #0078ff;
}
#druck .inputs label[for="M1"],
#druck .inputs label[for="M2"] {
	background: #cc18c1;
	border: 1px solid #cc18c1;
}
#druck .inputs label[for="Y1"],
#druck .inputs label[for="Y2"] {
	color: #000;
	background: #fc0;
	border: 1px solid #fc0;
}
#druck .inputs label[for="K1"],
#druck .inputs label[for="K2"] {
	background: #000;
	border: 1px solid #000;
}
#druck .thecolor {
	padding: 0 0.2em 0 0.2em;
	display: block;
	background: #fff;
	cursor: default;
}
#druck .colorselect {
	padding: 5px;
	display: block;
	overflow: hidden;
	position: relative;
	float: none;
	margin: 0;
}
#druck label.colorselect {
	float: none;
	margin-bottom: 0;
	z-index: 50;
}
#druck .colorselect.active,
#druck .colorselect:hover {
	padding: 3px;
	border: 2px solid #000;
}
#druck .colorselect input[type="radio"] {
	position: absolute;
	left: -100px;
	cursor: default;
}
#druck #colspecial1,
#druck #colspecial2 {
	display: none;
	position: relative;
	max-width: 20rem;
}
#druck .allcolors {
	max-height: 300px;
	overflow-y: scroll;
	display: none;
	border: 1px solid #000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	position: absolute;
	width: 100%;
}
#colsystem1 .allcolors {
	z-index: 100;
}
#druck .thecolor:after {
	content: "+";
	float: right;
	display: block;
	margin-top: -0.1em;
}
#druck .thecolor.active:after {
	content: "-";
}
#druck .dunkel {
	color: #fff;
}
#druck input[type="text"] {
	width: 70px;
}
#cc {
	background: #e1e1e1;
	font-size: 0.6rem;
	padding: 0.5rem;
	box-sizing: border-box;
}

#cc p {
	max-width: initial;
}

.colorAni {
	-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#textSample {
	width: 100%;
	padding: 1rem 2rem;
	box-sizing: border-box;
	color: #fff;
	background: #005a5a;
	letter-spacing: 0.01em;
}

#textSample.border {
	border: 4px solid #e1e1e1;
	border-top: 0;
}

.temp-hidden {
	display: none !important;
	visibility: hidden;
}

.colorflex { position:relative; }

.ColorSwitcher {
	content: url("data:image/svg+xml,%3Csvg width='19' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.26,29.72L18.5,21.841L18.5,27.825L9.45,36.9L0.401,27.924L0.401,21.941L7.54,29.819L7.64,29.819C7.54,27.027 7.439,23.137 7.439,18.55C7.439,13.962 7.54,10.073 7.64,7.28L7.54,7.28L0.3,15.159L0.3,9.175L9.35,0.1L18.399,9.076L18.399,15.059L11.26,7.181L11.16,7.181C11.26,9.973 11.361,13.863 11.361,18.45C11.361,22.938 11.361,26.827 11.26,29.72Z' style='fill:%23AD005F;fill-rule:nonzero;'/%3E%3C/svg%3E ");
	display:block;
	background: rgba(173, 0, 95, 0.2);
	position: absolute;
	right: 40px;
	top:calc(50% - 19px);
	padding: 10px;
	width: 19px;
	height: 37px;
	border-radius: 19.5px;
	-webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ColorSwitcher:hover { background:rgba(173, 0, 95, 0.3); }

.eyedropper {
	display:block;
	background: rgba(173, 0, 95, 0.2);
	height:0.8em;
	aspect-ratio:1;
	float:left;
	padding:0.4em;
	content:url("data:image/svg+xml,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z' style='fill:%23AD005F;fill-rule:nonzero;'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1200px) {
	#druck .flexContainer:first-of-type {
		width: 100%;
	}
}

@media only screen and (max-width: 900px) {
	#druck input {
		width: 48.5%;
		max-width: 48.5%;
	}
}
@media only screen and (max-width: 850px) {
	#druck .colsystem {
		margin-left: 0;
		width: 98.5%;
		max-width: 98.5%;
	}
	#druck #colspecial1,
	#druck #colspecial2 {
		width: 98.5%;
		max-width: 98.5%;
	}
}

@media only screen and (max-width: 500px) {
	#textSample {
		padding: 0.5rem;
	}
}
@media only screen and (max-width: 400px) {
	#monitor input {
		width: 98.5%;
		max-width: 98.5%;
	}
}

@supports (-moz-appearance:none) {
	::-moz-color-swatch { box-sizing:content-box; width:100%; border:none; }
	.eyedropper {	padding:0; width:1.6em; margin-left:1px; }
}