@charset "utf-8";
/* FORM-CSS für www.salsa-y-corazon.de */

/* FARBEN
#000000 / rgba(0,0,0,1) - Black
#231f20 / rgba(35,31,32,1) - Grey (Text)
#808080 / rgba(128,128,128,1) - Grey middle
#d9d9d9 / rgba(217,217,217,1) - Grey bright
#f0f0f0 / rgba(240,240,240,1) - Grey very bright
#9d2743 / rgba(157,39,67,1) - Red
#ce91a2 / rgba(206,145,162,1) - Red bright
#e87917 / rgba(232,121,23,1) - Orange
#fbc697 / rgba(251,198,151,1) - Orange bright
#1f56be / rgba(31,86,190,1) - Blue
#a3c3ff / rgba(163,195,255,1) - Blue bright
#49bf9f / rgba(73,191,159,1) - Green
#9defd9 / rgba(157,239,217,1) - Green bright
#93500d / rgba(147,80,13,1) - Brown
#cd945c / rgba(157,239,217,1) - Brown bright
#f1e2d3 / rgba(241,226,211,1) - Brown very bright
#7a2783 / rgba(122,39,131,1) - Violet
#cda0d2 / rgba(205,160,210,1) - Violet bright
*/

/* ################################################ FORMULARE ################################################ */
textarea, input, select	    { font-family: 'Roboto Flex'; font-size: 1em; font-weight: 400; -webkit-appearance: none; box-shadow: 2px 2px 4px #e6e6e6; }
input[type=text], input[type=password], input[type=email], input[type=date], textarea, select 
							{ border: 1px solid #fff; background-color: #fff; color: #231f20; font-size: 1.1em; padding: 0.4em 0.7em; line-height: 1; -webkit-appearance: none; transition: all 0.3s ease-in-out; }	
select, textarea			{ padding: 0.6em 0.7em; color: #231f20; }
.select_wrap				{ position: relative; display: inline-block; width: 100%; }
.select_wrap::after			{ position: absolute; top: 0; right: 0.3em; content: "\f078"; font-family: 'Font Awesome 6 Free'; font-size: 2em; font-weight: 900; pointer-events: none; color: #9d2743; }	
.select_wrap select 		{ padding-right: 2em; }
.select_wrap option 		{ width: 100%; }

.intro .select_wrap         { margin: 0.4em 0; background-color: rgba(240,240,240,1); }
.select_wrap::before		{ position: absolute; top: 0; left: 0; height: 1.4em; padding: 0 0.4em; content: "\f061"; font-family: 'Font Awesome 6 Free'; font-size: 1.8em; font-weight: 900; pointer-events: none; color: #ffffff; background-color: #9d2743; }	
    .intro .select_wrap label { display: none; }
    .intro .select_wrap select { width: 100%; height: 2.2em; padding: 0.1em 2.6em 0.1em 3.3em; background-color: rgba(240,240,240,1); border: none; }

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus
							{ outline: none !important; box-shadow: 2px 2px 6px rgba(128,128,128,0.8); }

input[type=submit], .submit	{ position: relative; display: inline-block; max-width: 700px; margin: 0.6em 0 0 0; line-height: 1;	cursor: pointer; white-space: normal; -webkit-appearance: none; transition: all 0.3s ease-in-out; }
input[type=submit]:hover, .submit:hover	{ color: #fff; cursor: pointer; text-decoration: none; }

/* checkboxes, radios */
input[type="radio"], input[type="checkbox"] { display: none !important; }
label.checkbox 				{ position: relative; float: left; padding: 0.3em 0.2em 0.3em 2.5em; margin: 0; cursor: pointer; }
label.checkbox::before 		{ position: absolute; top: 0.2em; left: 0; content: "\f0c8"; font-family: 'Font Awesome 6 Free'; font-weight: 400; color: #303030; font-size: 2em; line-height: 1; transition: all 0.3s ease-in-out; }
input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before 	{ content: "\f14a"; color: #808080; }

div.form_distance			{ clear: both; width: 100%; height: 0.5em; }
div.form_distance_thin		{ clear: both; width: 100%; height: 0.2em; }

label.hidden				{ display: none; }
.input_1, .input_2, .input_3 { display: inline-block; margin-bottom: 1em; }
.input_1					{ width: 100%; }
.input_2					{ width: 30%; }
.input_3					{ width: 69%; margin-left: 1%; }
.select_1, .select_2		{ display: inline-block; margin-bottom: 1em; }
.select_1					{ width: 100%; }
.textarea_1					{ display: inline-block; width: 100%; height: 10em; }

.form_box					{ }
.form_box > h3				{ margin-top: 0.8em; }
.form_box > h3:first-child	{ margin-top: 0; }

.form_box_fields			{ }
	.form_box_fields a			{ color: #231f20; }
	.form_box_fields a:hover	{ color: #f7941d; }

.submit_notice				{ font-size: 0.9em; }

/* Fehlermeldung */
textarea.error, input.error, select.error { border-color: #f7941d; }
.form_box_fields.error label, .form_box_fields.error label a, .form_box_fields.error label::before { color: #f7941d; }

#error_notice 	{ position: relative; margin-bottom: 2em; padding-left: 3em; }
#error_notice::before 	{ position: absolute; top: -6px; left: 0; content: "\f12a"; font-family: 'Font Awesome 6 Free'; font-weight: 400; color: #f7941d; font-size: 6em; line-height: 1; }
	#error_notice .error_title { display: block; margin-bottom: 0.2em; font-size: 1.2em; font-weight: 600; color: #f7941d; }
	#error_notice .error_text ul { margin-top: 0.4em; }
		#error_notice .error_text ul > li { position: relative; margin: 0.2em 0; padding: 0.1em 0 0 30px; color: inherit; }
            #error_notice .error_text ul > li::before  { position: absolute; top: 8px; left: 0; width: 20px; height: 8px; content: ""; background-repeat: no-repeat; background-position: top left; background-image: url(/dev/images/dot-orange.svg); }
@media (min-width: 690px) {	
#error_notice 	{ padding-left: 6em; }
#error_notice::before 	{ font-size: 8em; }
}