@CHARSET "UTF-8";
/**
 * Styles für Formulare
 */ 

@media all {
	.dp-form <<* {  }
		input:focus,
		textarea:focus,
		select:focus,
		button:focus{ outline: 2px solid inherit !important; box-shadow: none !important; }
		
		.row + .row{ margin-top: 1rem; }
		.label-with-checkbox <<* { display: inline-flex; align-items: flex-start; }
			input{ display: none; }
			.checkbox-visual <<* { display: inline-flex; align-items: center; }
				svg{ width: 1.125em; height: 1.125em; }
				.checkbox-deselected{ display: inline; color: #fff; }
				.checkbox-selected{ display: none; color: #fff; }
			>>
			input:checked + .checkbox-visual <<* {  }
				.checkbox-deselected{ display: none; }
				.checkbox-selected{ display: inline; }
			>>
			.checkbox-label{ margin-left: .25em; line-height: 1.25em; }
		>>
		.dpf4-rowHasRequired .label::after,
		.dpf4-rowHasRequired .checkbox-label::after{ content: "*"; font-size: .75em; vertical-align: top; }
		input.text,
		textarea{ width: 100%; padding: .5em 1em; background: var(--lightgrey); border: none; border-bottom: 2px solid rgba(0,0,0,.05); border-radius: .25em; transition: border .5s; }
		input.text.dpf-ajax-error,
		textarea.dpf-ajax-error{ border-bottom: 2px solid red; }
		input.text:focus,
		textarea:focus{ border-bottom-color: var(--brandprimary); }
		input.text{ max-width: 460px; }
		textarea{ min-height: 11em; }
		.message.has-row-error{ font-weight: bold; color: white; font-size: .875rem; }
		.requiredNotice{ font-size: .75em; margin: .75rem 0; opacity: .666; }
	>>
}

@media all and (min-width: var(--breakpoint-s)){
}

@media all and (min-width: var(--breakpoint-m)){
}

@media all and (min-width: var(--breakpoint-l)){
}

@media all and (min-width: var(--breakpoint-xl)){
}

@media all and (min-width: var(--breakpoint-xxl)){
}