/* FORM-CSS für feinkonzept CMS Administrationsbereich */
form						{ float: left; width: 100%; }
form.with_submit			{ }
textarea, input, select		{ font-family: Verdana; }
input[type=text], input[type=password], input[type=email], input[type=date], textarea, select 
							{ float: left; padding: 0.3em 0.5em; border: 1px solid #c4c4c2; background-color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }							
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus
							{ border: 1px solid #0b41cd; }
select						{ padding: 0.3em 0.3em; }						

.submit						{ position: relative; display: block; padding: 6px 1em 5px 1em; margin-top: 1em; font-size: 1.2em; font-weight: bold; color: #4b4b4b; background: #d5d5d5; border: 1px solid #aaaaaa;
					  			text-align: center; text-decoration: none !important; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
								transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; 
								-webkit-appearance: none; -moz-appearance: none;  appearance: none; }
.submit:hover				{ background: #555555; color: #fff; border: 1px solid #555555; cursor: pointer; }

button.login				{ padding-left: 2em; font-size: 1.5em; line-height: 1; text-transform: uppercase; }
button.login i					{ position: relative; }
button.login i:before			{ position: absolute; top: -2px; left: -36px; content: "\f2f6"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 24px; line-height: 1; font-style: normal; }

a.logout					{ padding-left: 2em; text-transform: uppercase; }
a.logout i						{ position: relative; }
a.logout i:before				{ position: absolute; top: -2px; left: -28px; content: "\f2f5"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 22px; line-height: 1; font-style: normal; }

button.save					{ padding-left: 2.6em; text-transform: uppercase; }
button.save:before			{ position: absolute; top: 2px; left: 0.3em; content: "\f0c7"; font-family: 'FontAwesome'; font-size: 24px; line-height: 1; font-weight: normal; }
article#pictures button.save, article#downloads button.save, article#boxes button.save, article#buttons button.save, article#faqs button.save, article#slides button.save { margin: 0.5em 0 0.5em 0; }

button.saveandclose			{ padding-left: 3em; text-transform: uppercase; }
button.saveandclose:before	{ position: absolute; top: 2px; left: 0.3em; content: "\f0c7"; font-family: 'FontAwesome'; font-size: 24px; line-height: 1; font-weight: normal; }
button.saveandclose:after	{ position: absolute; top: -1px; left: 1em; content: "\f00d"; font-family: 'FontAwesome'; font-size: 20px; line-height: 1; font-weight: normal; }

button.import				{ margin-top: 0.8em; margin-bottom: 0.5em; padding: 0.4em 1em 0.4em 34px; text-transform: uppercase; }
button.import:before		{ position: absolute; top: 2px; left: 6px; content: "\f574"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 22px; line-height: 1; }

a.export					{ position: relative; display: inline-block; margin-top: 0.1em; margin-bottom: 0.5em; padding: 0.4em 1em 0.4em 34px; text-transform: uppercase; }				
a.export:before				{ position: absolute; top: 2px; left: 6px; content: "\f56d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: 1; font-size: 22px; color: #4b4b4b;
								transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
a.export:hover:before		{ color: #e7e7e7; }
							
/* checkboxes, radios */
input[type="radio"], input[type="checkbox"] { display: none !important; }

/* Hinweise, Abstände, Spans */
article.form .cell_title	{ font-weight: bold; color: #808080; padding-bottom: 0.3em; }
p.notice					{ clear: left; display: block; width: 100%; padding: 1em 0; font-size: 0.9em; }
article#pictures p.notice	{ padding: 0.5em 0 0 0; }
p.notice_submit				{ font-size: 0.9em; }
div.form_distance			{ clear: left; height: 1.5em; }
div.form_distance_thin		{ clear: left; height: 0.5em; }
span.snippet				{ float: left; padding: 0.5em 0 0 0.5em; font-style: italic; cursor: copy; }
span.snippet:hover			{ color: #808080; }
span.fieldinfo				{ float: left; padding: 0.5em 0 0 0.5em; }
span.fieldinfo_left			{ float: left; padding: 0.5em 0.5em 0 0; }
span.fieldinfo_middle		{ float: left; padding: 0.5em 0.5em 0 0.5em; }
span.fieldinfo_checkbox		{ float: left; padding: 0.2em 0.6em 0 0; }

/* Formularfelder */
.label_checkbox				{ position: relative; float: left; padding: 0.4em 2em 0 26px; margin: 0.2em 0.1em 0.8em 0; cursor: pointer; }
.label_checkbox::before		{ position: absolute; top: 0; left: 0; content: "\f096"; font-family: 'FontAwesome'; color: #808080; font-size: 24px; line-height: 1; }
input[type="radio"]:checked + label.label_checkbox:before, input[type="checkbox"]:checked + label.label_checkbox:before	{ content: "\f046"; color: #0b41cd; }
.label_checkbox.language	{ float: left; width: 60px; height: 22px; margin: 0.2em 1em 0.8em 0; }
.label_checkbox.language.flag_de	{ background-position: 26px 2px; }
.label_checkbox.language.flag_en	{ background-position: 26px -28px; }
.label_checkbox.language.flag_it	{ background-position: 26px -78px; }
.label_checkbox.language.flag_nl	{ background-position: 26px -118px; }

.label_1					{ clear: left; float: left; width: 20%; padding: 0.4em 0 0 0; }
.label_1_margin				{ clear: left; margin-left: 20% !important; }
.label_1_padding			{ padding-left: 20% !important; }
.label_2					{ clear: left; float: left; width: 30%; padding: 0.4em 0 0 0; }
.label_2_margin				{ clear: left; margin-left: 30% !important; }
.label_2_padding			{ padding-left: 30% !important; }

.input_1					{ width: 70%; margin: 0 0 0.3em 0; }
.input_1.with_snippet		{ width: 60%; }
.input_1.with_flag			{ width: 70%; padding-left: 38px !important; }
.input_1.with_snippet.with_flag	{ width: 60%; padding-left: 38px !important; }
.input_2					{ width: 30%; margin: 0 0 0.3em 0; }
.input_3					{ width: 70%; margin: 0 0 0.3em 0; }
.input_4					{ width: 20%; margin: 0 1% 0.3em 0; } /* PLZ */
.input_4.with_snippet		{ width: 16%; }
.input_5					{ width: 49%; } /* Ort */
.input_5.with_snippet		{ width: 43%; }
.input_6					{ width: 34.5%; margin: 0 0.5% 0.3em 0; } /* Vorname */
.input_7					{ width: 34.5%; margin: 0 0 0.3em 0.5%; } /* Nachname */
.input_8					{ width: 14%; margin: 0 0.5% 0.3em 0; } /* Zahlen (Pixelangaben) */
.input_date					{ width: 8em; margin: 0 0 0.3em 0; }
	.input_date + button.ui-datepicker-trigger	{ position: relative; float: left; width: 2em; height: 1.95em; margin-left: -1px; background: #a8a8a8;
													-moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; }
	.input_date + button.ui-datepicker-trigger::before	{ position: absolute; top: 0.1em; left: 0.2em; content: "\f073"; color: #fff; font-family: 'FontAwesome'; font-size: 1.5em; line-height: 1; }
	.input_date + button.ui-datepicker-trigger:hover	{ background: #8b8a8a; cursor: pointer; }

.select_1					{ width: 70%; margin: 0 0 0.3em 0; }
.select_1.with_snippet		{ width: 60%; }
.select_1.with_label_2		{ width: 60%; }
.select_2					{ width: 70%; margin: 0 0 0.3em 0; }
.select_3					{ width: 70%; margin: 0 0 0.3em 0; }
.select_4					{ width: 25%; margin: 0 0 0.3em 0; }

.textarea_1					{ width: 70%; font-size: 1.0em; }
.textarea_1.with_snippet	{ width: 60%; }
.textarea_2					{ width: 90%; font-size: 1.0em; margin-bottom: 0.5em; }
.mce-tinymce				{ float: left !important; width: 69.8% !important; font-size: 1.1em !important; margin: 0.2em 0 0.3em 0 !important; }

div.entrydata				{ float: left; padding: 0.3em 0 1em 0; }
	div.entrydata a				{ float: left; }
	div.entrydata > a.delete	{ position: relative; margin: 0 0 0 0.6em; }
	div.entrydata > a.delete:before	{ position: absolute; top: -3px; left: 0; content: "\f014"; font-family: 'FontAwesome'; font-size: 2em; color: #a81801; line-height: 1; }
	
input.error, textarea.error, select.error	{ border: 1px solid #ed7741; background: #ffecde; }

/* Submit */
#form_submit				{ position: fixed; bottom: 0; left: 240px; z-index: 10; width: 100%; padding: 13px 240px 24px 1%; background: rgba(255,255,255,0.8); border-top: 1px solid #fff; overflow: hidden; }
	#form_submit button				{ float: left; margin-left: 2%; }
	#form_submit button:first-child	{ float: left; margin-left: 0; }
	
	#form_submit a	{ position: relative; float: right; margin: 1.2em 2em 0 4em; padding: 0.6em 1em 0.7em 3em; color: #4b4b4b; background: #d5d5d5; border: 1px solid #aaaaaa;
						text-align: center; text-decoration: none; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
						transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
	#form_submit a::before	{ position: absolute; font-family: 'FontAwesome'; color: #7c7c7c; line-height: 1;
								transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
	#form_submit a:hover	{ color: #fff; background: #555555; border: 1px solid #555555; }
	#form_submit a:hover::before	{ color: #e7e7e7; }
	#form_submit a.back::before	{ content: "\f100"; top: 0; left: 0.3em; font-size: 2.3em; }
	#form_submit a.new::before	{ content: "\f196"; top: 0.1em; left: 0.3em; font-size: 2.1em; }

/* Meldungen */
#form_messages				{ float: left; width: 98%; margin: 0 1%; }
#form_messages > div			{ margin: 1em 0; }

.form_message				{ position: relative; display: none; width: 100%; height: auto; padding: 0.5em 0.5em 0.5em 5em; margin: 1em 0 0 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.form_message::before		{ position: absolute; left: 10px; font-family: 'FontAwesome'; font-size: 3em; line-height: 1; }
.form_message strong		{ display: block; }

.form_message.success		{ background: #cdecd5; color: #00982b; border: 1px solid #00982b; }
.form_message.success::before	{ top: 1px; content: "\f00c"; line-height: 1; }

.form_message.error			{ background: #ffecde; color: #ea5a18; border: 1px solid #ed7741; }
.form_message.error::before	{ top: 10px; content: "\f071"; line-height: 1; }
#form_messages div.form_message.error	{ padding: 0.8em 0.5em 1em 5em; }

/* Login */
#login div.form input[type=email], #login div.form input[type=password]
							{ display: block; width: 100%; font-size: 1.2em; padding: 0.4em 0.4em 0.5em 0.4em; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }
#login div.form input[type=email]		{ margin: 1em 0 0.5em 0; }
#login div.form input[type=password]	{ margin: 0.2em 0 0.5em 0; }
#login div.form input[type=email]:focus, #login div.form input[type=password]:focus	
							{ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); }						
#login div.form button[type=submit] 	{ width: 100%; }

/* Text-Counter */
article.form textarea.counter	{ margin-bottom: 0.2em; }
article.form div.charleft		{ width: 100%; font-size: 0.9em; margin: 0 0 0.2em 20%; text-align: center; }

/* Passwort-Info (Benutzerverwaltung) */
#pswd_input	{ position: relative; float: left; width: 100%; }
#pswd_info 	{ display: none; position: absolute; z-index: 100; top: 3.2em; left: 0; margin-left: 36%; width: 300px; padding: 15px; background: #fff;
				font-size: 0.9em; border-radius: 5px; box-shadow: 0 1px 3px #ccc; border: 1px solid #999; }
#pswd_info h4 	{ margin: 0 0 8px 0; padding: 0; font-weight: normal; }
#pswd_info ul 	{ margin: 0; padding: 0; list-style-type: none; }
#pswd_info::before 		{ content: "\25B2"; position: absolute; top: -13px; left: 45%; font-size: 15px; line-height: 14px; color: #999; text-shadow: none; display: block; }
#pswd_info .invalid 	{ position: relative; padding: 0.1em 0 0.8em 2.3em; line-height: 1.2; color: #ec3f41; }
#pswd_info .invalid::before 	{ position: absolute; top: 0; left: 0; content: "\f071"; font-family: 'FontAwesome'; font-size: 1.2em; line-height: 1; }
#pswd_info .valid 		{ position: relative; padding: 0.1em 0 0.8em 2.3em; line-height: 1.2; color: #3a7d34; }
#pswd_info .valid::before 	{ position: absolute; top: 0; left: 0; content: "\f00c"; font-family: 'FontAwesome'; font-size: 1.2em; line-height: 1; }

/* ################################################ MEDIA QUERY: >= 1025px ################################################ */
@media screen and (min-width: 1025px) {
.input_2					{ width: 40%; }
.input_8					{ width: 18%; }
#form_submit				{ left: 300px; padding: 18px 300px 28px 1%; }
}

/* ################################################ MEDIA QUERY: >= 1280px ################################################ */
@media screen and (min-width: 1280px) {
#form_submit				{ left: 400px; padding-right: 400px; }
}