/*
	M3Web-Design: Erscheinungsbild für Formulare 
	(Fieldsets, Inputs Labels, aber auch Display...)

	- wird nach layout.css und style.css geladen
*/

/* ==== Bootstrap-Definitionen zurücksetzen */

/* Inputs: runde Ecken zurücksetzen */

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.input-append .add-on,
.input-prepend .add-on,
.btn
{
	border-radius: 0 !important;
}

select
{
	line-height: 24px;
}

select.input-small
{
	width: 104px; /* 90px + 1px border + 1px padd von input.small */
}

select.input-mini
{
	width: 74px; /* 90px + 1px border + 1px padd von input.small */
}

select.input-micro
{
	width: 54px; /* 90px + 1px border + 1px padd von input.small */
}

.form-inline > label
{
	padding-top: 5px;
	margin-bottom: 0;
}

.form-inline input,
.form-inline select
{
	margin-bottom: 5px;
}

.label-counter
{
	margin-right: 5px;
	text-align: right;
	min-width: 20px;
}

form
{
	margin-bottom: 0;
}

.controls + .controls
{
	margin-top: 5px;
}

.input-micro,
.input-prepend input.input-micro,
.input-append input.input-micro
{
	width: 40px;
}

.form-horizontal .control-group
{
	margin-bottom: 12px;
}




@media (min-width: 768px)
{
	.form-horizontal.small-labels .control-label
	{
		width: 120px;
	}

	.form-horizontal.small-labels .controls
	{
		margin-left: 120px;
	}
}



	/* ==== Filter-Zeile ==== */


.popover-content:empty
{
	display: none;
}

fieldset.filter,
fieldset.filter-form
{
	/* siehe auch print.css - wird nicht gedruckt */
	/* padding: 2px;
	margin-bottom: 10px; */
	margin-top: 0;
}


fieldset.filter-form
{
	background: #E5E5E5;
	padding: 10px 15px 16px 15px;
	border: none;
}

fieldset.filter-form div.filter-label
{
	display: none;
}

fieldset.filter-form input,
fieldset.filter-form select,
fieldset.filter-form div.btn-group a.btn
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 0;
	max-width: 200px;
	height: 30px;
}

.filter-form > .filter,
.filter-form > .filter-notes
{
	font-size: .9em;
	float: left;
	min-width: 200px;
	margin-top: 5px;
	margin-right: 5px;
}

.filter-form > .filter-notes
{
	float: right;
}

.filter-form > .filter:last-child,
.filter-form > .filter-notes:last-child
{
	margin-right: 0;
}

div.filter.small
{
	width: 100px;
}

div.filter-notes
{
	float: right;
	width: auto;
	padding-top: 6px;
}

.filter:hover .filter-description,
.controls:hover .control-description,
.editor:hover .editor-description,
.display:hover .display-description
{
	display: block;
}

div.filter label
{
	display: block;
	width: 100%;
}

div.filter-label,
div.filter-editor,
div.filter-description
{
	/* padding: 1px 5px; untereinander darstellen */
	display: block;
	clear: both;
	width: 100%;
	min-height: 15px; /* sonst rutscht description manchmal über den editor */
}


div.filter-label
{
	color: #888;
	margin-bottom: 0;
	padding-bottom: 0;
}

div.filter-label label
{
	font-size: 0.9em;
	display: block;
	width: 100%;
}


div.filter-editor div.input-small
{
	width: 100%;
}

div.filter-editor select
{
	/* padding-top: 0px; */
}

div.filter-editor .input-small input
{
	width: 90px;
}

div.filter-description,
div.display-description,
div.control-description,
div.editor-description
{
	/* css-Tooltip */
	display: none;
	
	font-size: 1em;
	text-align: left;
	clear: both;
	color: #aaa5b0;
	position: absolute;
	background-color: #fff;
	border: 1px solid #ccc;
	margin: 2px 0px;
	z-index: 9000;
}

div.filter-description
{
	width: 200px;
}

.filter:hover .filter-description,
.controls:hover .control-description,
.display:hover .display-description,
.editor:hover .editor-description
{
	display: block;
}

div.filter .popover,
div.controls .popover,
div.display .popover,
div.editor .popover
{
	top: inherit;
	left: inherit;
}

/* ==== Bootstrap Typeahead ==== */

.typeahead.dropdown-menu
{
	max-height: 400px;
	overflow-y: auto;
}

/* ==== Collapsible Fieldset ==== */

fieldset.collapsible.collapsed > legend
{
	border-bottom: 1px solid #e5e5e5;
}

fieldset.collapsible > legend:hover
{
	background-color: #e5e5e5;
	cursor: pointer;
}


/* ==== Detail-Ansichten ==== */


.display
{
	display: block;
	line-height: 20px;
	min-height: 20px;
	margin-top: 5px;
	padding-bottom: 5px;
}

.display-separated .display
{
	padding-top: 10px;
	border-top: 1px solid rgb(250, 250, 250);
}

.display-field
{
	vertical-align: top;
	display: block;
	margin-left: 180px;
}

.display-field:empty
{
	content: 'hmm';
	color: #aaa;
	padding: 10px 20px; /* height=20px, width=40px */
	font-size: 0px;
}

.display-label
{
	vertical-align: top;
	display: block;
	float: left;
	width: 160px;
}

@media (max-width: 379px)
{
	.display-label,
	.display-field
	{
		width: 100%;
		margin-left: 0;
	}

	.display-label
	{
		text-decoration: underline;
	}
}

	/* ==== Fieldsets ==== */

.form-container
{
	background: #f2f2f2; /* hellgrauer Hintergrund */
	border-left: 5px solid #0567b0; /* dunkler (Status-) Streifen links */
	border-bottom: none;
	border-right: none;
	border-top: none;
	padding: 10px 20px 10px 20px;
}


.control-label,
.form-horizontal .control-label
{
	text-align: left;
}


.form-container.central-form
{
	padding-left: 225px;
	padding-right: 225px;
}

.form-container .form-heading
{
	/* gleiche Farbe wie dunkler Streifen, nur transparent */
	background: rgba(4, 104, 177, 0.1); /* = #0567b0 */
	margin: -10px -20px 0px -20px;
	padding: 10px 20px 10px 20px;
}

.form-container .form-heading h2
{
	margin: 0;
	background-position: center right;
	background-repeat: no-repeat;
	border: none;
}

.form-actions
{
	margin-top: 10px;
	border-top: 2px solid #0468B1;
	clear: both;
	padding: 0px;
}

.form-container .form-actions
{
	background: #fff;
	margin: 0px -20px -5px -20px;
	padding: 0px 20px;
	border: none;
}

.form-container > .form-heading + .form-actions
{
	margin-top: 0px;
	margin-bottom: 20px;
}


.form-container > fieldset + fieldset,
.form-container > fieldset + .row-fluid,
.form-container > .row-fluid + fieldset,
.form-container > .row-fluid + .row-fluid,
.form-container .separate
{
	padding-top: 20px;
	margin-bottom: 0px;
	border-top: 2px solid #fff;
}


fieldset legend
{
	line-height: 18px;
	font-size: 15px;
	font-weight: bold;
	/*padding: 20px 20px 5px 0px;*/
	/*margin-left: -25px;*/
	margin-bottom: 15px;
	border: none;
}


fieldset
{
	margin-top: 20px;
	margin-bottom: 20px;
}

div.invisible-label label,
td.invisible-label label
{
	display: none;
}

.display-description,
.editor-description
{
	width: 400px;
}




.editor-label,
div.editor-label label,
div.display-label label,
td.editor-label label,
td.display-label label
{
	display: block;
	min-width: 150px;
}

/* ==== Form-Inputs ==== */


input.search,
.filter.search input
{
	background-image: url(/Public/Images/Herbstwest/Icons/Suche-inactive_18x18px.png);
	background-position: right center;
	background-position: right 5px top 50%;
	background-repeat: no-repeat;
}



/* ==== Validierung ==== */

fieldset span.field-validation-error,
fieldset span.Syncfusion_Validator,
span.Autocomplete_Wrapper.error
{
	font-size: 0.8em;
	text-align: left;
	margin: 2px;
	margin-top: -10px;
	position: relative;
	display: block;
	clear: both;
	color: #BF4160;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
.input-validation-error input,
.input-validation-error select,
.input-validation-error textarea,
.editor-field input.input-validation-error,
.editor-field select.input-validation-error,
.editor-field textarea.input-validation-error
{
	background-color: #FFE0DC;
	border-color: #BF4160;
}

.validation-summary-valid
{
	display: none;
}

.full-width,
input.full-width,
.full-width input
{
	width: 100%;
}

textarea.huge
{
	width: 100%;
	height: 150px;
}



/* ==== Spezial-Formate ==== */

span.winbutton
{
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
	text-align: left;
	background-color: #FBFAF9;
	color: #111;
	box-shadow: inset 0 0 .3em #333;
	border-radius: 2px;
	padding: 1px 6px;
	margin: 0px 3px;
}


	

li.color-green,
li.color-green a
{
	/* zugestellte in Message-Recipients */
	color: forestgreen;
}

li.color-red,
li.color-red a
{
	/* nicht-zugestellte in Message-Recipients */
	color: darkred;
}



.editor-field input[type="checkbox"]
{
	width: auto;
	background-color: white;
}




.display-small .display-label,
.editor-small .editor-label
{
	width: 100px;
	min-width: 100px;
}



.subform td.editor-field
{
	width: auto;
}

.editor-field input,
.editor-field select,
.editor-field textarea
{
	color: #333;
	width: 200px;
}

.editor-field textarea
{
	height: 60px;
}

.editor-field-small input,
.editor-field-small select
{
	width: 60px;
}


.editor-field-date input,
.editor-field-date select
{
	width: 75px;
}


.editor-field-medium input,
.editor-field-medium select
{
	width: 90px;
}

.editor-field-100 input,
.editor-field-100 select
{
	/*width: 100%;*/
}


.editor-field-xsmall input,
.editor-field-xsmall select
{
	width: 40px;
}


.editor-field-large input,
.editor-field-large select
{
	width: 300px;
}


.editor-field-xlarge input,
.editor-field-xlarge select
{
	width: 450px;
}


.editor-field-xxlarge input,
.editor-field-xxlarge select
{
	width: 600px;
}




fieldset span.field-validation-error,
fieldset span.Syncfusion_Validator,
span.Autocomplete_Wrapper.error
{
	font-size: 0.8em;
	text-align: left;
	margin: 2px;
	position: relative;
	display: block;
	clear: both;
	color: #BF4160;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
.input-validation-error input,
.input-validation-error select,
.input-validation-error textarea,
.editor-field input.input-validation-error,
.editor-field select.input-validation-error,
.editor-field textarea.input-validation-error
{
	background-color: #FFE0DC;
	border-color: #BF4160;
}

.full-width,
input.full-width,
.full-width input
{
	width: 100%;
}

textarea.huge
{
	width: 100%;
	height: 150px;
}


span[title]
{
	cursor: pointer; /*)text-decoration: underline; 		text-decoration-style: dotted;*/
}


.achtung,
span.achtung,
span.achtung a,
span.achtung a:link,
span.achtung a:hover,
span.achtung a:visited
{
	color: red !important;
}