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

@media all {
	.dp-form <<* {  }
		.row{ margin-bottom: 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: var(--grey); }
				.checkbox-selected{ display: none; color: var(--brandprimary); }
			>>
			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,
		select.select,
		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{ background: rgba(255,0,0,.1); }
		input.text:focus,
		textarea:focus{ border-bottom-color: var(--brandprimary); }
		select.select, input.text{ max-width: 460px; }
		textarea{ min-height: 11em; }
		.message{ font-weight: bold; color: red; font-size: .75rem; line-height: 1.25; margin-top: .25em; text-transform: uppercase; }
		.requiredNotice{ font-size: .75em; margin: .75rem 0; opacity: .666; }
		
		.hidden { display: none; }
		
		.radios-div <<* { padding-bottom: var(--defaultspacing); }
			.radio-item { display: inline-block; padding-right: var(--smallspacing); }
		>>
		
		.gutscheintemplate, .gutscheinbox <<* { display: flex; padding: var(--defaultspacing) 0; flex-wrap: wrap; }
			.row { width: 50%; margin: 0; }
		>>
		.minus, .plus{ color: var(--brandprimary); }
		.daten-topic { padding-top: var(--defaultspacing); }
		.daten-wrap <<* { display: flex; }
			.daten, .datenright { width: 50%; }
		>>
		select.select { -moz-appearance: none; -webkit-appearance: none; background: url(../images/chevron.png) no-repeat 98% center, var(--lightgrey); background-size: 3%; }

		.useown-fields <<* { display: none; max-width: 500px; padding: 1.25rem; background: #fff; position: relative; filter: drop-shadow(0 0 1px #000); border-radius: 1rem; margin-bottom: 1rem;  }
			&::before{ position: absolute; bottom: 100%; left: 2rem; content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; }
			> *:last-child{ margin-bottom: 0; }
			&.-visible{ display: block; }
		>>

	>>
}