/* Media Queries 
SF GMS GOURMET Deutschland Kitaflex
Version: 1.1, 22.11.2020 */

/* Media Query for screens wider than 480px */	
	
@media screen and (min-width: 480px) {
	
body.logged-out form h1 { float: left; width: auto;text-align: left;}
body.logged-out #login-language { float: right; width: auto;}

#info ul > li span { display: inline-block; width: 30%; }

figure.einzel {
					width: 32.8%;
					margin: 0;
					padding: 0;
			
				}
	
}


/* Media Query for screens wider than 800px */	
	
@media screen and (min-width: 800px) {

	body { width: 100%; max-width: 100%;}
	
	.ie-helper { display: block; width: 100%;}

	#wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
		flex-direction: column; 
   -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
		width: 100%;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		background:#fff; /* Fallback */
		background-image:-webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, #ECECEC),
			color-stop(1, #DCDCDC)
		);
		background-image:-o-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-moz-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-webkit-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-ms-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:linear-gradient(to bottom, #ECECEC 0%, #DCDCDC 100%);
	}
	
	header, nav, section#content { background: #fff;}
	header { display: block;/*flex: 1 0 auto; */}
/*	section#content { display: block;flex: 1 0 auto; padding: 3em 2em; }*/
	section#content { display: block;flex: 1 0 auto; padding: 0em 0em;}
		
	/* form {} */
	
	#intro {  
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	}

	#logo { /*width: 10%;*/ text-align: center; }

	#info { 
/*		width: 90%;
		margin-left: 10%; */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex; 
		-ms-flex-wrap: nowrap; 
		flex-wrap: nowrap;
	}

	body.logged-out {	
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: center;
    -ms-flex-align: center;
     align-items: center;
		-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
		background:#fff; /* Fallback */
		background-image:-webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, #ECECEC),
			color-stop(1, #DCDCDC)
		);
		background-image:-o-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-moz-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-webkit-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:-ms-linear-gradient(bottom, #ECECEC 0%, #DCDCDC 100%);
		background-image:linear-gradient(to bottom, #ECECEC 0%, #DCDCDC 100%);
	}
	

	body.logged-out #wrapper {
		background: #fff;
		display: block;
		width: 30%; 
		min-height: auto;
		padding: 0;
		margin: 0 auto;
		margin-top: -6em;
		min-width: 400px;
	}
	
	body.logged-out #logo { width: 10vw;}
	body.logged-out section#content { padding: 0 2em;width: 100%;}
	
	header h1 { width: 90%; font-size: 16px;font-size: 1.6rem; align-self: center;}
	

/* Desktop/Tablet  Navigation */
	
 	a.menu-toggle,
	a.menu-close {
    display: none;
  }
	
  
/* Undo positioning of off-canvas menu */
  nav {
	clear: both;
	width: 100%;
	max-width: 1200px;
    position: relative;
    left: auto;
    top: auto;
    height: auto;
	margin: 0 auto;
	overflow: hidden;
  }
  
  nav ul {
	background: #000;    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	text-align: center;
    /* Undo off-canvas styling */
    padding: 0;
	 line-height: 1.6em !important;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    height: auto;
    width: auto;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
     justify-content: space-between;
	overflow: hidden;
	}
	
	nav ul > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
		background: #333; /* Fallback */
		background-image:-webkit-gradient(
			linear,
			left top,
			right top,
			color-stop(0, #000),
			color-stop(0.44, #333)
		);
		background-image:-o-linear-gradient(right, #000 0%, #444 44%);
		background-image:-moz-linear-gradient(right, #000 0%, #444 44%);
		background-image:-webkit-linear-gradient(right, #000 0%, #444 44%);
		background-image:-ms-linear-gradient(right, #000 0%, #444 44%);
		background-image:linear-gradient(to right, #000 0%, #444 44%);
		padding: 0 !important;
		align-items: stretch;
	}
	
	nav ul > li a {
	background: none;
	font-size: 7px;
	font-size: 0.7rem;
    padding: 1em 0.5em !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}

  
  nav a {
    color: #fff !important;
    border: 0 !important; /* Remove borders from off-canvas styling */
  }
	
 nav a[href='#'] {
    color: #888 !important;
  }
	
	nav a:hover,
	nav a:focus { background: none; }
  
	nav li:hover,
	nav li:focus {	background: #efefef !important; color: #003769 !important; cursor: pointer;}
	nav li.active {	
		background: rgb(245, 48, 48); 
		background-image:-webkit-gradient(
			linear,
			left bottom,
			right top,
			color-stop(0, #fff),
			color-stop(0.59, #fff)
		);
		background-image:-o-linear-gradient(right top, #cdefdd 0%, #cdefdd 59%);
		background-image:-o-linear-gradient(right top, #cdefdd 0%, #cdefdd  59%);
		background-image:-moz-linear-gradient(right top, #cdefdd 0%, #cdefdd 59%);
		background-image:-webkit-linear-gradient(right top, #cdefdd 0%, #cdefdd 59%);
		background-image:-ms-linear-gradient(right top, #cdefdd 0%, #cdefdd 59%);
		background-image:linear-gradient(to right , #a7a6a6 0%, #6b6b6b 59%);
		color: #000 !important;
	}
/*	nav li.active a {color: #000 !important;} */ /*Be. überschreibt a: Color) in active*/
	
	form ul { display: table;width: 100%;table-layout: auto; }
	
	a.button { 
	float: left;
	width: auto;
	margin-right: 1em;
	}
	
	a.button + a.button + p { 
	clear: both;
	display: block;
	margin-top: 6em;
	}
	
	#uebersichtalle .excel h2,
	#TSuebersichtalle .excel h2{ float: left; }
	
	a[id^=excel] {
	float: right;
	width: auto;
		margin-left: 0.25em;
	}
	
	
	input[name='hinzufuegen'],
	input[name='brevposeintragen'],
	#brevposkasse { width: auto; padding: 1em;margin: 1em 0 0 0; }
	
	li.table-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
   -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
	width: 100%;
}
	
	li.table-row span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
	width: 100%; 
	background: #dfdfdf; 
	color: #003769; 
	padding: 0.5em; 
	overflow: hidden;
}

	
	li.table-head,
	li.table-row  { display: table-row;}
	li.table-head { background:rgba(255,236,123,1.0); }
	li.table-row { background: #fff;  }
	li.table-head span,
	li.table-row span,
	li.table-row > span:first-of-type span { display: table-cell; width: auto; vertical-align: middle; padding: 0;color: #003769; background: none !important;}
	li.table-row > span:first-of-type span { padding-left: 0.5em !important; }
	li.table-row:nth-of-type(2) { background: #efefef;}
	li.table-row:nth-of-type(2n+2) { background: #ddd;}
	li.table-row span > span  { display: none; }
	
	li.table-head span { 
		font-weight: 400;
		font-size: 7px;
		font-size: 0.7rem;
		padding: 0;
		background: #003769;
		text-transform: uppercase;
		color: #000;
		letter-spacing: 1px;
		
	}
	li.table-head .sortdown:after {
		content: "\f063";
		font-family: FontAwesome;
	 }

	 li.table-head span .sortup:after {
		content: "\f062";
		font-family: FontAwesome;
	 }

	li.table-head input,
	li.table-head button { 
		padding: 0.75em 0px;
		margin-bottom: 0;
		width: auto;
    	min-width: 0;
	}


	li.table-row span { padding: 0.25em; }
	li.table-row:last-of-type > span:nth-last-of-type(2),
	li.table-row:last-of-type > span:last-of-type {border-bottom: none;}
	li.table-row input { padding: 0.75em 0.5em;margin-bottom: 0; }
	
	ul.schueler { 
		background: #fff;    display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex; 
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap; 
		width: 100%; 
		height: auto; 
		overflow: hidden;
		margin-bottom: 1em;
		-webkit-box-align: center;
	    -ms-flex-align: center;
        align-items: center;
	}
	
	ul.schueler li {padding: 0 0.5em; }
	/* ul.schueler li:first-of-type { } */
	ul.schueler li:last-of-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	ul.schueler input { margin: 0;padding-left: 1em; padding-right: 1em;}
	
	ul.schueler li.anmeldename {width: 80%;}
	ul.schueler li.name {width: 100%;}
	ul.schueler li.lieferid {width: 20%;}
	ul.schueler li.tour {width: 150%;}
	ul.schueler li.email {width: 150%;}
	ul.schueler li.gesperrt {width: 15%;}
	ul.schueler li.optionen {width: 150%;}
/*
	li.table-head span.anmeldename {width: 80%;}
	li.table-head span.name {width: 100%;}
	li.table-head span.lieferid {width: 20%;}
	li.table-head span.tour {width: 150%;}
	li.table-head span.email {width: 150%;}
	li.table-head span.gesperrt {width: 5%;}
	li.table-head span.optionen {width: 100%;}
*/
    li.table-head span {padding-left: 5px;}
	li.table-head span.anmeldename {width: 11%;}
	li.table-head span.name {width: 14%;}
	li.table-head span.lieferid {width: 9%;}
	li.table-head span.tour {width: 20%;}
	li.table-head span.email {width: 15%;}
	li.table-head span.gesperrt {width: 9%;}
	li.table-head span.optionen {width: 16%;}

	input[name='NeuerBenutzer'] {width: auto;}


	
	
/* Profil bearbeiten */
	
	#profil {margin-left: 1em;}
	#profil form {  float: left;width: 60%;margin-left: 0em; }
	#profil textarea { flex-basis: 100% !important;}
	#profil fieldset {margin-bottom: 2em;}
/*	#profil fieldset:last-of-type { float: right;width: 30%; margin-left: 5%; }
*/	#profil fieldset.data { 
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex; 
   -ms-flex-wrap: wrap;
        flex-wrap: wrap;
		-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
 }

 #profil fieldset.data > .row { flex-basis: 100%;}  
 #profil fieldset.data > .col-xs-5 { flex-basis: 50%;}  

 #profil fieldset.data > .select { flex-basis: 50%;}  
	#profil fieldset.data > * { flex-basis: 33%;}
	#profil fieldset.data > label,
	#profil fieldset.data > .header,
/*	#profil fieldset.data > label + input,*/
	#profil fieldset.data > .select-wrap,
	#profil fieldset.data > .email,
	#profil fieldset.data > .datum,
	#profil fieldset.data > h3 { flex-basis: 100%;}
		
	#profil fieldset.data > input[name='ort'] { flex-basis: 66.666%;} 
	#profil fieldset.data > input[name='einrichtung'] { flex-basis: 100%;}
	#profil fieldset.data > input[name='email'] { flex-basis: 100%;}
	#profil fieldset.data > select[name='Sprache'] { flex-basis: 32.9%;} /*Be 16.07.2018 eingefügt*/
	
	#profil fieldset.alt-data > * { flex-basis: 100%;}


	#profil input[type="submit"] { 
		width: auto; 
		/* padding: 1em; */
	}	
	#profil h2 {margin-top: 1em;}
	/* #profil form {margin-left: 1em;} */


/* aktuelle Bestellungen - #uebersichtaktuell */

/* #uebersichtaktuell  { } */
#benutzerverwaltung h2 {margin-top: 1em;}

#benutzerverwaltung li.table-row > span:nth-last-of-type(2),
#benutzerverwaltung li.table-row > span:last-of-type { float: none; display: table-cell;width: auto;padding: 0;border-bottom: 1px solid #fff;}
	
	


/* Bestellung abschliessen - #kasse1 || #kasse2 */

/* #kasse1 {} */
	
	#kasse1 form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#kasse1 form > input,
	#kasse1 form > input + input { width: auto;padding: 1em;margin-top: 1em; }
	
	
/* #kasse2 {}	 */
	
/* #kasse2  { } */
#kasse2 li.table-row > span:nth-last-of-type(2),
#kasse2 li.table-row > span:last-of-type { float: none; display: table-cell;width: auto;padding: 0;border-bottom: 1px solid #fff;}
#kasse2 form:last-of-type { background: none;padding: 0;}

	



/* #uebersichtprint {} */
#uebersichtprint li.table-row > span:nth-last-of-type(2),
#uebersichtprint li.table-row > span:last-of-type { float: none; display: table-cell;width: auto;padding: 0;border-bottom: none;}
#uebersichtprint li.table-row input { border-left: none; }


/* Übersicht alle Bestellungen - #uebersichtalle */

/* #uebersichtalle {} */
#uebersichtalle .order ul {	display: table;	width: 100%;}
#uebersichtalle .order li.table-head span,
#uebersichtalle .order li {padding: 0.25em 0.5em; }
#uebersichtalle li.table-row span { padding: 0.25em 0.5em;}
#uebersichtalle ul.schueler {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	}
#uebersichtalle ul.schueler li:first-of-type { padding-left: 5.25em;}	



/* TS Übersicht alle - #TSuebersichtalle */

/* #TSuebersichtalle {}	 */
#TSuebersichtalle .order ul {	display: table;	width: 100%;}
#TSuebersichtalle .order li.table-head span,
#TSuebersichtalle .order li {padding: 0.25em 0.5em; }
#TSuebersichtalle li.table-row span { padding: 0.25em 0.5em;}
#TSuebersichtalle ul.schueler {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	}
#TSuebersichtalle ul.schueler li:first-of-type { padding-left: 5.25em;}	
	



/* Schülerdaten ändern -  #tsupdate */

/* #tsupdate {} */


/* ändern - #posupdate */

	#posupdate { clear: both; overflow: hidden;}
	#posupdate form { float: left;width: 60%; }
	#posupdate input[type="submit"] { width: 33%; margin-bottom: 4em;}
	

/* löschen - #posdelete */
	/* #posdelete {}		 */
	#posdelete form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#posdelete form > input,
	#posdelete form > input + input { width: auto;padding: 1em;margin-top: 1em; }

/* Hochgeladene Bilder - #pictures */
	/* #pictures {}		 */
	#pictures form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#pictures form > input,
	#pictures form > input + input { width: auto;padding: 1em;margin-top: 1em; }


/* Kontakt - #kontakt */
	#kontakt {margin-left: 1em;}
	#kontakt form { float: left;width: 60%; }
	#kontakt input[type="submit"] { width: 33%; margin-bottom: 1em;}
	#kontakt h2 {margin-top: 1em;}

	figure.einzel {
					width: 24.5%;
					margin: 0;
					padding: 0;					
				}
	
}


/* Media Query for screens between 799 and 1024px */	
	
@media screen and (min-width: 799px) and (max-width: 1024px) {
	
	nav ul { flex-wrap: wrap;justify-content: flex-start}
	nav li { flex-grow: 1; text-align: center;}
	nav li a { width: 100%;}
	
}