/*
 *
 * https://www.florian-kittel.de/blog/responsive-flexible-input-forms
 *
 * 12 Spalten Grid-System
 * Die einzelnen Klassen können so verwendet werden, dass innerhalb eines Elements mit der Klasse "row" immer Grid-Elemente sind welche in Summe maximal 12 ergeben.
 * Die Angaben können für schmale Layouts und breite Layouts gleichzeitig vorgenommen werden. Es wird dann abhängig von der Fensterbreite automatisch zwischen beiden Vorgaben gewechselt.
 *
*/

/* Setting box model */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

.metaashe.max-width-800 {
	max-width: 800px;
}

.metaashe.grid {
	margin-bottom: 50px;
}

/* Grid classes from 1 to 12 for a 12 column grid layout */
.metaashe .grid-12-col .grid-wide-layout-1-col,
.metaashe .grid-12-col .grid-wide-layout-2-col,
.metaashe .grid-12-col .grid-wide-layout-3-col,
.metaashe .grid-12-col .grid-wide-layout-4-col,
.metaashe .grid-12-col .grid-wide-layout-5-col,
.metaashe .grid-12-col .grid-wide-layout-6-col,
.metaashe .grid-12-col .grid-wide-layout-7-col,
.metaashe .grid-12-col .grid-wide-layout-8-col,
.metaashe .grid-12-col .grid-wide-layout-9-col,
.metaashe .grid-12-col .grid-wide-layout-10-col,
.metaashe .grid-12-col .grid-wide-layout-11-col,
.metaashe .grid-12-col .grid-wide-layout-12-col {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
}

.metaashe .grid-12-col .row {
	clear: both;
	width: auto;
	min-height: 20px;
	float: none;
	margin-left: -5px;
	margin-right:-5px;
}

.metaashe .grid-12-col .row:after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0px;
}

/* Default values */
.metaashe .grid-12-col .grid-wide-layout-1-col {
	width: 8.3333333333%;
}

.metaashe .grid-12-col .grid-wide-layout-2-col {
	width: 16.6666666666%;
}

.metaashe .grid-12-col .grid-wide-layout-3-col {
	width: 25%;
}

.metaashe .grid-12-col .grid-wide-layout-4-col {
	width: 33.3333333333%;
}

.metaashe .grid-12-col .grid-wide-layout-5-col {
	width: 41.6666666666%;
}

.metaashe .grid-12-col .grid-wide-layout-6-col {
	width: 50%;
}

.metaashe .grid-12-col .grid-wide-layout-7-col {
	width: 58.3333333333%;
}

.metaashe .grid-12-col .grid-wide-layout-8-col {
	width: 66.6666666666%;
}

.metaashe .grid-12-col .grid-wide-layout-9-col {
	width: 75%;
}

.metaashe .grid-12-col .grid-wide-layout-10-col {
	width: 83.3333333333%;
}

.metaashe .grid-12-col .grid-wide-layout-11-col {
	width: 91.6666666666%;
}

.metaashe .grid-12-col .grid-wide-layout-12-col {
	width: 100%;
}

/* formular input elements */
.metaashe .grid-12-col input,
.metaashe .grid-12-col select,
.metaashe .grid-12-col textarea,
.metaashe .grid-12-col label {
	width: 100%;
	padding: 5px;
	min-height: 30px;
}

.metaashe .grid-12-col input,
.metaashe .grid-12-col select,
.metaashe .grid-12-col textarea,
.metaashe .grid-12-col .chosen-container-single .chosen-single,
.metaashe .grid-12-col .chosen-container-multi .chosen-choices {
	border: 1px solid #006ba1
}

.metaashe .grid-12-col select {
  background-color: rgba(0,0,0,0.02);
}

.metaashe .grid-12-col input:disabled,
.metaashe .grid-12-col select:disabled,
.metaashe .grid-12-col textarea:disabled {
	color: #999;
	border-color: #CCC;
}

.metaashe .grid-12-col input[type="checkbox"],
.metaashe .grid-12-col input[type="radio"] {
	width:auto;
	height:auto;
	padding:0;
	min-height: 16px;
}

.metaashe .grid-12-col .grid-1 input[type="checkbox"] {
	margin: 5px;
	display: inline-block;
}

/* special format for label element */
.metaashe .grid-12-col .label {
	margin-bottom: 5px;
	padding: 0 5px;
}

.metaashe .grid-12-col .label label {
	display: block;
	background-color: #006ba1;
	color: #fff;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
}
.metaashe .grid-12-col .label label a {
	color: #ffffff;
}

.metaashe .grid-12-col .label.wrap label {
	white-space: normal;
}

.metaashe .col {
	margin: 0;
}


@media screen and (max-width: 500px) {
	
	/* Grid classes from 1 to 12 for a 12 column grid layout */
	.metaashe .grid-12-col .grid-small-layout-1-col,
	.metaashe .grid-12-col .grid-small-layout-2-col,
	.metaashe .grid-12-col .grid-small-layout-3-col,
	.metaashe .grid-12-col .grid-small-layout-4-col,
	.metaashe .grid-12-col .grid-small-layout-5-col,
	.metaashe .grid-12-col .grid-small-layout-6-col,
	.metaashe .grid-12-col .grid-small-layout-7-col,
	.metaashe .grid-12-col .grid-small-layout-8-col,
	.metaashe .grid-12-col .grid-small-layout-9-col,
	.metaashe .grid-12-col .grid-small-layout-10-col,
	.metaashe .grid-12-col .grid-small-layout-11-col,
	.metaashe .grid-12-col .grid-small-layout-12-col {
		float: left;
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 10px;
	}

	/* Default values */

	/*.label {
	width:100%;
	}*/

	.metaashe .grid-12-col .grid-small-layout-1-col {
		width: 8.3333333333%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-2-col {
		width: 16.6666666666%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-3-col {
		width: 25%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-4-col {
		width: 33.3333333333%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-5-col {
		width: 41.6666666666%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-6-col {
		width: 50%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-7-col {
		width: 58.3333333333%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-8-col {
		width: 66.6666666666%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-9-col {
		width: 75%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-10-col {
		width: 83.3333333333%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-11-col {
		width: 91.6666666666%;
	}
	
	.metaashe .grid-12-col .grid-small-layout-12-col {
		width: 100%;
	}
	
	/* Bei schmalen Layouts wird der Inhalt in zwei Zeilen (Zeile 1: Label, Zeile2: Inhalt) dargestellt. Unter der zweiten Zeile kann ein Abstand eingefügt werden. In der zweiten Zeile können durchaus auch mehrere Felder enthalten sein.*/
	.metaashe .grid-12-col .col:not(.label){
		padding-bottom: 25px;
	}
}


/* Bei verschachtelten Grids soll die innere Tabelle früher in den Modus für schmale Seiten umschalten. */
@media screen and (max-width: 700px) {
	
	/* Grid classes from 1 to 12 for a 12 column grid layout */
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-1-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-2-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-3-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-4-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-5-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-6-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-7-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-8-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-9-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-10-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-11-col,
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-12-col {
		float: left;
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 10px;
	}

	/* Default values */

	/*.label {
	width:100%;
	}*/

	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-1-col {
		width: 8.3333333333%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-2-col {
		width: 16.6666666666%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-3-col {
		width: 25%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-4-col {
		width: 33.3333333333%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-5-col {
		width: 41.6666666666%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-6-col {
		width: 50%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-7-col {
		width: 58.3333333333%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-8-col {
		width: 66.6666666666%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-9-col {
		width: 75%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-10-col {
		width: 83.3333333333%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-11-col {
		width: 91.6666666666%;
	}
	
	.metaashe .grid-12-col .row .grid-12-col .grid-small-layout-12-col {
		width: 100%;
	}
	
	/* Bei schmalen Layouts wird der Inhalt in zwei Zeilen (Zeile 1: Label, Zeile2: Inhalt) dargestellt. Unter der zweiten Zeile kann ein Abstand eingefügt werden. In der zweiten Zeile können durchaus auch mehrere Felder enthalten sein.*/
	.metaashe .grid-12-col .row .grid-12-col .col:not(.label){
		padding-bottom: 25px;
	}
}