/* Stylesheet
GMS GOURMET Deutschland
Version: 1.2, 16.08.2018 */

@import 'normalize.css';
@import 'custom-fonts.css';

/* Color CSS Variables

--light: #fff;
--basic: #6179c1;
--basic-medium: #859bd4;
--basic-light: #d7ddef;
--primary: #003769;
--primary-medium: #4d7fab;
--primary-light: rgba(0, 55, 100, 0.3);
--secondary: #b5935b;
--secondary-light: rgba(181, 147, 91, 0.3);
--text: #003769;
--text-light: #859bd4;
--text-dark: #000000;
--overlay: rgba(0, 11, 31, 0.8);
}

*/


/* PHP-Layout info */

/*

Ergänzungen 15.08.2018:
--------------------------------

------------------------------------------------
Button "to-top" siehe footer.php
------------------------------------------------


----------------------------------------------------------------
index-TSuebersichtalle.php bzw. <div id="TSuebersichtalle">
----------------------------------------------------------------
ALT:

<h3><?php echo $Daten2['VORNAME'].' '.$Daten2['NAME1'] ?></h3>

<div class="order">...</div>
<div class="order">...</div>
<div class="order">...</div>

NEU:

+++    id=1000 und for=1000    +++
1000 entspricht ID Tauchlehrer oder Tauchschule (?!?, z.B. Klaus Klink = 1000)

<div class="toggleBox">
	<input name="toggleContent" id="<?php echo $Daten2['KUNDENNR'] ?>" type="checkbox">
	<label for="<?php echo $Daten2['KUNDENNR'] ?>" class="open"><?php echo $Daten2['VORNAME'].' '.$Daten2['NAME1'] ?></label>
	<label for="<?php echo $Daten2['KUNDENNR'] ?>" class="close"><?php echo $Daten2['VORNAME'].' '.$Daten2['NAME1'] ?></label>

	<div class="content-inner">

		<div class="order">...</div>
		<div class="order">...</div>
		<div class="order">...</div>

	</div>

</div>


*/



/* Basics */

html, body, table, tr, th, td, section, div, h1, h2, h3, h4, h5, h6, p, span, a, ul, ol, li, form, legend, fieldset, input, select, textarea, button {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { overflow-y: scroll; }
body { font-size: 62.5%;
/*	line-height: 1.6em; */
}


/* Layout */

html, body { height: 100%;width: 100%;padding: 0; margin: 0;text-align: center; }

#wrapper { background: #fff;width: 95%;max-width:95%;text-align: center;margin: 0 auto;}

header, section#content, footer {
	clear: both;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

header { clear: both;text-align: left;display: table-row; position: relative}

#intro {
	background:#f0f06e; /* Fallback */
	background-image: url("../images/fchg2-1024x431.png");
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #003669),
	color-stop(1, #0B467A)
);*/
/*background-image:-o-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-moz-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-webkit-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-ms-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:linear-gradient(to bottom, #003669 0%, #0B467A 100%);*/
	overflow: hidden;
}
/* 
#intro::after {
	content: url(../images/BioWuermchen.png);

	position: absolute;
	right: 8px;
	top: 2px;
	  transform: scale(.95);
	 /* transform-origin: top right; */
	/* content: "test"; */
/*} */

@media (max-width: 800px) {
	#intro::after {
		right: 2px;
		transform: scale(.65);
		transform-origin: top right;
	}
  }


#logo { /*float: left;width: 20%; */display: table-cell;width: 20%;text-align: center;}
#logo img { width: 100%; height: auto; padding: 3px }


body.logged-out header {
	display: block;
	text-align: center;
	background:rgba(255,236,123,1.0); /* Fallback */
	/* background-image: url("../images/fchg2-200x200.png"); */
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #003669),
	color-stop(1, #0B467A)
);
background-image:-o-linear-gradient(bottom, #f0f06e 0%, #0B467A 100%);
background-image:-moz-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-webkit-linear-gradient(bottom, #f0f06e 0%, #0B467A 100%);
background-image:-ms-linear-gradient(bottom, #f0f06e 0%, #0B467A 100%);
background-image:linear-gradient(to bottom, #f0f06e 0%, #0B467A 100%);*/
	margin-bottom: 2em;
	overflow: hidden;
}

body.logged-out a { display: block;}
body.logged-out img {width: 48%; height:auto; margin: 0.5em auto;}
body.logged-out section#content p { text-align: justify;}
body.logged-out form#error {padding: 1em;}
body.logged-out section#content .error p  { color: red;}

/*section#content { padding: 2em; }*/

footer {  background: rgba(255,236,123,1.0); color: #000; padding: 1em 0;}


#to-top {
float: right;
margin-right: 3em;
}
#to-top span {
  display: none;
}
#to-top i {
  color: #fff;
  font-size: 3em;
}

.logged-out #to-top { display: none;}


/* Infobereich im Header */

#info {
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	background:#FFEC7B; /* Fallback */
	background-image: url("../images/fchg2-1024x431.png");
	color: #000;
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #003669),
	color-stop(1, #0B467A)
);
background-image:-o-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-moz-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-webkit-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:-ms-linear-gradient(bottom, #003669 0%, #0B467A 100%);
background-image:linear-gradient(to bottom, #003669 0%, #0B467A 100%);*/
	overflow: hidden;
}

#info ul {
	list-style-type: none;
	display: block;
	width: 100%;
	background: #FFEC7B;
	font-size: 8px;
	font-size: 0.8rem;
	text-align: left;
	overflow: hidden;
	/* vertical-align: top; */
	color: #000;
}

#info ul > li { border-bottom: 1px solid #fff;border-right: 1px solid #fff;
	background: #fff;
}

#info ul > li span {
	display: inline-block;
	width: 40%;
	font-weight: bold;
	padding: 0.5em;
	background: #fff;
	margin-right: 0.5em;
}

#info ul li:first-of-type {
	display: block;
	width: 100%;
	font-size: 7px;
	font-size: 0.7rem;
	font-weight: 400;
	padding: 0.5em;
	background: #FFEC7B;
	text-transform: uppercase;
	color: #000;
	letter-spacing: 1px;
}

#info ul:last-of-type > li { border-right: none; }
#info ul > li span + span {background: none;padding: 0;font-weight: 300; }
.important {color: #cc0000; font-weight: 700 !important; }




/* Typography */


body {
	font-family: 'Proza Libre', sans-serif;
	color: #000;
}

section#content { text-align: left; }


h1, h2, h3, nav {
	font-family: 'Proza Libre', serif;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4em;
}

section#content h1,
section#content h2,
section#content h3 { margin-bottom: 1em; }



header h1 {
/*	float: left;
	display: block;
	width: 80%;*/
	display: table-cell;
	text-transform: uppercase;
	color: #8c794d;
	font-size: 5vw;
	letter-spacing: 1px;
	text-align: left;
	font-weight: 500;
	padding: 1em 0.5em;
	margin: 0;
	vertical-align: middle;
}

@media (max-width: 800px) {

	#intro h1 {
		padding-top: 1.3em !important;
		padding-bottom: 0.7em !important;
	}

}

/*body.logged-out  h1 { float: none; width: 100%; color: #003769;font-size: 11px; font-size: 1.1rem;margin-bottom: 1em;}
*/
body.logged-out  h1 {width: 100%; color: #000;text-align: center;font-size: 10px; font-size: 1rem;margin-bottom: 2em;}
body.logged-out  #login-language { width: 100%;text-align: center;margin-bottom: 2em;}


p {
	font-size: 9px;
	font-size: 0.8rem;
	line-height: 1.6em;
	margin-bottom: 1em;
}

ul { list-style-type: none; }


code {
	display: inline-block;
	width: auto;
	text-align: center;
	font-size: 9px;
	font-size: 0.8rem;
	line-height: 1.6em;
	margin: 1em 0;
	padding: 0.5em;
	color: #cc0000;
	background: rgba(204,0,0,0.25);
}


/* Links & Navigation */

/*a:link,
a:visited {
	color: #f0f06e;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}*/

a:hover,
a:active,
a:focus {
	color: rgba(0,55,105,0.3);
	outline: none;
}


a[id^=excel] {
	display: block;
	width: 100%;
	background: rgba(0,55,105,0.8); /* Fallback */
	background-image: url("../images/fchg2-200x200.png");
/*	background-image:-webkit-gradient(
	linear,
	right top,
	right top,
	color-stop(0, #003669),
	color-stop(0.44, #0B467A)
	);
	background-image:-o-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-moz-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-webkit-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-ms-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:linear-gradient(to right top, #003669 0%, #0B467A 44%);
	*/
	border: none;
	color: #fff;
	font-size: 7px;
	font-size: 0.7rem;
	text-align: center;
	text-decoration: none;
	padding: 0.75em;
	margin: 0 0 0.25em 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	cursor: pointer;
	}


a[id^=excel]:hover,
a[id^=excel]:focus {
	background: rgba(0,55,105,0.6);
}


footer a:link,
footer a:visited { color: #fff   f; text-decoration: none; }
footer a:hover,
footer a:active,
footer a:focus { color: #404040; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button styling */
.menu-toggle {
	background: #FFEC7B;
	display: block;
	padding: 1em 0.5em;
	line-height: 1em;
	font-size: 12px;
	font-size: 1.2rem;
	color: #000 !important;
}

.menu-toggle:hover,
.menu-toggle:focus {
  color: rgba(0,55,105,0.3) !important;
}

/* Mobile first Offscreen menu style */
nav {
  position: absolute;
  left: -200px;
  top: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: visible;
  transition: left 0.3s ease;
  -webkit-box-shadow: 0.3s ease;
     -moz-box-shadow: 0.3s ease;
          box-shadow: 0.3s ease;
  z-index: 999;
}

nav ul {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 2.5em 0 0;
  /* Hide shadow w/ -8px while 'closed' */
  -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
     -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
          box-shadow: -8px 0 8px rgba(0,0,0,.5);
  min-height: 100%;
  width: 200px;
  background: #efefef;
  text-transform: uppercase;
  letter-spacing: 1px;
}

nav a {
  display: block;
  padding: 0.65em;
  line-height: 1.2em;
  font-size: 8px;
  font-size: 0.8rem;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}
/*
nav li:first-child a {
  border-top: 1px solid #ccc;
}*/


nav a:hover,
nav a:focus {
  background: rgba(0,55,105,0.3) !important;
  color: #000 !important;
  text-decoration: none;
}

nav .menu-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  font-size: 1rem;
  padding: 0.25em 0.45em;
  border-bottom: none;
  background: #f0f06e;
  color: #fff;
}

nav .menu-close:hover,
nav .menu-close:focus {
  background: #efefef;
  color: #f0f06e;
}


/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
nav:target,
nav[aria-expanded="true"] {
  left: 0;
  outline: none;
  -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  box-shadow: 3px 0 12px rgba(0,0,0,.25);
}

nav:target .menu-close,
nav[aria-expanded="true"] .menu-close {
  z-index: 1001;
}

nav:target ul,
nav[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/*
 We could us `nav:target:after`, but
 it wouldn't be clickable.
*/
nav:target + .backdrop,
nav[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #000;
  background: rgba(0,0,0,.85);
  cursor: default;
}

@supports (position: fixed) {
  nav,
  nav:target + .backdrop,
  nav[aria-expanded="true"] + .backdrop {
    position: fixed;
  }
}



/* Form Elements */

form,
fieldset,
input,
textarea,
select  { width: 100%; }

form {
	font-family: 'Proza Libre', sans-serif;
	color: #000;
	font-size: 8px;
	font-size: 0.8rem;
	font-weight: 400;
/*	margin: 2em 0;*/
}

fieldset { display: block;border: none; }
fieldset p { margin: 1em 0; }

.data {margin-top: 1em;}

fieldset h3 {
	color: #f0f06e;
	font-size: 9px;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.25em 0;
	margin-bottom: 2em !important;
	border-bottom: 2px solid #f0f06e;
}

legend {
	font-size: 12px;
	font-size: 12px;
	font-size: 1.2rem;
}

label { display: block; margin: 1em 0 0.5em 0; }

input, textarea,
li.table-head button {
	background: #fff;
	border: none;
	padding: 1em 0.5em;
	margin-bottom: 1em;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

input + input { border-left: 1px solid #efefef; }

input:focus,
textarea:focus { background: rgba(0,55,105,0.3); font-weight: 500;}

body.logged-out input[type=text],
body.logged-out input[type=password]{ background: #efefef;}
body.logged-out input[type=text]:focus,
body.logged-out input[type=password]:focus {  background: rgba(0,55,105,0.3); font-weight: 500;}

form#login {background: transparent; margin: 1em auto;}

form#login .passwort_alt {
	margin-bottom: 1em;
}


input[type=submit],
input[type=reset],
input[type=button],
li.table-head button,
.select-button button,
a.button {
background: rgba(255,236,123,1.0);  /* Fallback */
/*	background-image:-webkit-gradient(
	linear,
	right top,
	right top,
	color-stop(0, #003669),
	color-stop(0.44, #0B467A)
	);
	background-image:-o-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-moz-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-webkit-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:-ms-linear-gradient(right top, #003669 0%, #0B467A 44%);
	background-image:linear-gradient(to right top, #003669 0%, #0B467A 44%);*/
	color: #000;
	font-size: 7px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	}

.select-button button { 
	padding: 0.5em 3em;
	margin-bottom: 10px;
	width: auto;
	min-width: 0;
	border: none;
}
.select-button label {
	display: inline-block;
}


.glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	font-size: 1.2rem;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

.glyphicon-forward:before {
	content: "\f103";
 }	
 .glyphicon-chevron-down:before {
	content: "\f107";
 }	
 .glyphicon-chevron-up:before {
	content: "\f106";
 }	
 .glyphicon-backward:before {
	content: "\f102";
 }	


input.posloeschen:disabled	
{
	background: none;
}

a.button {
	display: block;
	text-decoration: none;
	border: none;
	padding: 1em 0.5em;
	margin-bottom: 1em;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
 /*   background: rgba(255,55,105,0.6);*/
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
a.button:hover,
button:hover,
input[type=submit]:focus,
input[type=reset]:focus,
input[type=button]:focus,
button:focus,
a.button:focus {
	background: rgba(238,111,18,0.6) !important;
}

input[type=image] { width: 3.5em; height: auto; margin: 0;padding: 0.75em;}
input[type=image]:last-of-type { margin-right: -0.75em;}
input[type=image]:hover { opacity: 0.4; }


#brevposkasse {
		border: none;
		padding: 1em 0.5em;
		margin-bottom: 1em;
		color: #fff;
		font-size: 7px;
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 1px;
		text-align: center;
		background: #947544; /*Fallback */
		background-image: url("../images/fchg2-200x200.png");
/*		background-image:-webkit-gradient(
		linear,
		left bottom,
		right top,
		color-stop(0, #947544),
		color-stop(0.59, #B5925B)
		);
		background-image: -o-linear-gradient(right top, #947544 0%, #B5925B 59%);
		background-image: -moz-linear-gradient(right top, #947544 0%, #B5925B 59%);
		background-image: -webkit-linear-gradient(right top, #947544 0%, #B5925B 59%);
		background-image: -ms-linear-gradient(right top, #947544 0%, #B5925B 59%);
		background-image: linear-gradient(to right top, #947544 0%, #B5925B 59%);*/
		cursor: pointer;
		}

#brevposkasse:hover,
#brevposkasse:focus { background: rgba(148,117,68, 0.8); }

/* input[type=radio] {}
input[type=radio]:checked {}

input[type=checkbox] {}
input[type=checkbox]:checked {}

input[type=checkbox] {}
input[type=checkbox]:checked {}
 */

.checkbox-wrap { clear: both; float: none; display: block; overflow: hidden;margin: 0;padding: 0.6em 0.5em 0 0;}
.checkbox-wrap input[type='checkbox'] { display: none; }
.checkbox-wrap input[type='checkbox'] + label::before {
	float: left;
	display: block;
	width: 1.2em;
	font-family: 'FontAwesome';
	font-size: 16px;
	font-size: 1.6rem;
	letter-spacing: 5px;
	content: "\f096";
	height: 30px;
}

.checkbox-wrap input[type=checkbox]:checked + label:before {
	font-family: 'FontAwesome';
	font-size: 16px;
	font-size: 1.6rem;
	content: "\f046";
}


.checkbox-wrap input[type='checkbox'] + label {
	float: left;
	width: 100%;
	margin: 0.5em 0;
	line-height: 1.6em;
}

.checkbox-wrap { padding-top: 0;}

.checkbox-wrap-small input[type='checkbox'] + label::before {
	font-size: 12px;
	font-size: 1.2rem;
	padding-top: 0px;
}

.checkbox-wrap-small input[type=checkbox]:checked + label:before {
	font-size: 12px;
	font-size: 1.2rem;
}


.checkbox-wrap-small input[type='checkbox'] + label {
	font-size: 0.7rem;
	line-height: 1em;
}
.anmeldename-merken {
	display: flex;
	justify-content: space-between;
}

.cookieHinweis p {
	font-size: 0.7rem;
	padding-left: 1em;
	padding-right: 1em;
	margin: 0;
	line-height: normal;
}

.impressumLink p {
	margin: 0;
}

.anmeldename-merken p {
	margin: 0;
}

select {
	/* background: #fff url(../images/arrow-down.png) right no-repeat; */
	border: none;
	/* background-color: #003769;	 */
	padding: 1em 0.5em;
	margin-bottom: 1em;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}


select::-ms-expand {
    display: none;
}

.select-wrap {
	position: relative;
	display: block;
	margin-bottom: 1em;
	-webkit-transition: all s ease; /* Firefox */
	-moz-transition: all s ease; /* WebKit */
	-o-transition: all s ease; /* Opera */
	transition: all s ease; /* Standard */
}

.select-wrap select::selection,
.select-wrap select::-moz-selection
{
	background: yellow;
}
/*.select-wrap::after {
	position: absolute;
	top: 0.75em;
	right: 1em;
	font-family: 'FontAwesome';
	font-size: 12px;
	font-size: 1.2rem;
	content:'\f0d7';
}*/
.headerSelect {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0.4em;
	background:rgba(255,236,123,1.0);
	background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, black, black);
  background-position:
    calc(100% - 20px) calc(0.7em + 2px),
    calc(100% - 15px) calc(0.7em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 8px,
    3em 2em;
  background-repeat: no-repeat;
}
.headerSelect option:not(:checked) {
	background-color: #fff;
  }
.headerSelect option {
	display: inline-block;
	width: 70%;
	margin: 0;
	padding: 0;
	/* background: #FFEC7B; */
	background-color: #fff;
}

.testAfter {
	width: 67% !important;
	position: relative;
}


/* .headerSelect::after {  */
	.testAfter_:after{
	position: absolute; 
	/* top: 0.75em;  */
	 right: 0.5em;  
	font-family: 'FontAwesome';
	font-size: 12px; 
	font-size: 1.2rem; 
	content:'\f0d7';
}


.testAfter_:after{
    content:"\25B6"
}

.testAfter___::after {
	content: '\25BE';
	background-color: var(--focused-border-color);
	color: #fff;
	width: 2rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}


.benutzerSelect {
	display: inline-block;
	/* width: 66%; */
	margin: 0;
	padding: 0.4em;
	/* background:rgba(255,236,123,1.0); */
}


.benutzerSelect option:not(:checked) {
	background-color: #fff;
  }
.benutzerSelect option {
	display: inline-block;
	width: 66%;
	margin: 0;
	padding: 0;
	  /* background: #FFEC7B;   */
	background-color: #fff;
}


.datum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width: 100%;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.datum div {width: 33%;}

option { line-height: 2em;}
/* textarea {} */

input::-webkit-input-placeholder { color: #003769; }
input::-moz-placeholder { color: #003769; }
input:-ms-input-placeholder { color: #003769; }
input:-moz-placeholder { color: #003769; }
input::placeholder { color: #003769; }

input[type=text] + label,
input[type=password] + label
{
	/* color : grey; */
	font-size: 0.6rem;
	/* display: inline-block; */
	color: #003769 !important;
	opacity: 0.5;
	transition: all 0.3s ease-in;
	margin-bottom: 0px;
    margin-top: 0px;
  }

.animate{
	position: absolute;
	transform: translate(5px,-3.3rem);	

}
.password {
	position: relative;
}
.eye{
	position: absolute;
	/* transform: translate(0px,0.8rem);  */
	right: 0px;
	top: 0px;
	padding: 1.2em 1em 1.2em 1em;
	
}

.header label {
	/* color: #003769 !important; */
	/* opacity: 0.5; */
	margin-bottom: 0px;
    margin-top: 0px;
}

#login #name, #login #password {
	padding: 1.2em 0.5em;	
}


  input:placeholder-shown + label{
	opacity: 0.5;
	font-size: 0.8rem;
	/* display: inline-block; */
	transform: translate(5px,-2.5rem);
  }

  input::placeholder{
	/* color: red; */
	/* font-size: 1rem; */
	opacity: 0.0;
  }

  #login input:placeholder-shown + label{
	transform: translate(5px,-3.5rem);
  }
  #login .animate{
	transform: translate(5px,-3.5rem);	
  }


form { display: block;background: #efefef;width: auto; padding: 0px 10px  ;overflow: hidden;}


/* CSS Accordions */

.toggleBox {
    position: relative;
}

/* Ausblenden des input-Feldes */
/*.toggleBox input[type=checkbox],
.toggleBox input[type=radio] {*/
	.toggleBox input[name="toggleContent"]
	 {
		position: absolute;
    left: -99999px;
}

/* Gestaltung der labels */
.toggleBox label[name="header"] {
    display: block;
	font-family: 'Proza Libre', serif;
	color: #003669;
	font-size: 9px;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.25em 0;
	margin-bottom: 1em !important;
	border-bottom: 2px solid #003669;
    cursor: pointer;
}


#TSuebersichtalle .toggleBox label {
	background: #b5935b; /*Fallback */
	background-image: url("../images/fchg2-200x200.png");
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #b5935b),
	color-stop(1, #d3be99)
	);
	background-image:-o-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-moz-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-webkit-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-ms-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:linear-gradient(to bottom, #d3be99 0%, #b5935b 100%); */
	color: #fff;
	font-size: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	text-transform:none;
	padding: 1em;
	border: none;
    cursor: pointer;
}


/* .toggleBox label:hover {
} */

/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div {
    opacity: 0;
	height: 0;
}

.toggleBox input:checked ~ div {
    opacity: 1;
    height: auto;
	display: block;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close,
.toggleBox input:checked ~ .open {
    display: none;
}

.toggleBox .content-inner { min-height: 0.25em;}




/* Content Elements - Mobile first */

section#content ul.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   -ms-flex-wrap: wrap;
        flex-wrap: wrap;width: 50%; margin: 3em auto;}
section#content ul.nav > li { width: 50%; text-align: left;}
section#content ul.nav > li > a {
	display: block;
	width: 90%;
	background: #efefef;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	padding: 1em;
	margin-bottom: 2em;
	margin-right: 2em;
}

section#content ul.nav > li > a:nth-of-type(2n+2) { margin-right: 0; }

li.table-head { display: none; }

li.table-row {
	display: block;
	width: 100%;
}
li.table-row span {
	display: block;
	width: 100%;
	background: #dfdfdf;
	color: #003769;
	padding: 0.5em;
	overflow: hidden;
}

li.table-row span > span {
	display: inline-block;
	width: 30%;
	font-weight: bold;
	padding: 0.5em;
	margin: -0.5em;
	margin-right: 1em;
	background: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
}

li.table-row > span:first-of-type  { background: none; }
li.table-row > span:first-of-type span {
	display: block;
	font-weight: 400;
	padding: 0.5em;
	background: rgba(255,236,123,1.0);
	text-transform: uppercase;
	color: #000;
	letter-spacing: 1px;
}

li.table-row input { font-size: 7px;font-size: 0.7rem;margin-bottom: 2em;border-left: 1px solid #fff; }



/* anlegen -  */




/* aktuelle Bestellungen - #uebersichtaktuell */

/* #uebersichtaktuell {} */
ul.schueler { clear: both;display: block; width: 100%; height: auto; overflow: hidden;margin-bottom: 2em;}
ul.schueler li {width: 100%; line-height: 1.8em;height: auto; }
ul.schueler li:last-of-type {
	clear: both;
	float: none;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width: 100%;
}
ul.schueler input { width: 50%; font-size: 7px;font-size: 0.7rem;margin-top: 0.5em;margin-bottom: 0.5em; }

#uebersichtaktuell li.table-row > span:nth-last-of-type(2),
#uebersichtaktuell li.table-row > span:last-of-type { float: left; display: block;background: none;padding: 0;width: 50%;}

#benutzerverwaltung li.table-row > span:nth-last-of-type(2),
#benutzerverwaltung li.table-row > span:last-of-type { float: left; display: block;background: none;padding: 0;width: 50%;}


#brevposkasse { display: inline-block;text-decoration: none;width: 100%; }



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

/* #kasse1 {} */
#kasse1 form { background: none; }



/* aktuelle Bestellungen - #uebersichtaktuell */

/* #kasse2 {} */
#kasse2 form:last-of-type { background: none;padding: 0;}
ul.schueler { clear: both;display: block; width: 100%; height: auto; overflow: hidden;margin-bottom: 2em;}
ul.schueler li {width: 100%; line-height: 1.8em;height: auto; }
ul.schueler li:last-of-type {
	clear: both;
	float: none;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width: 100%;
}
/* ul.schueler input { width: 50%; font-size: 7px;font-size: 0.7rem;margin-top: 2em;margin-bottom: 0.5em; } */

#kasse2 li.table-row > span:nth-last-of-type(2),
#kasse2 li.table-row > span:last-of-type { float: left; display: block;background: none;padding: 0;width: 50%;}

#brevposkasse { display: inline-block;text-decoration: none;width: 100%; }



/*  hinzufügen */

/* #pos {} */
ul.schueler { clear: both;display: block; width: 100%; height: auto; overflow: hidden;margin-bottom: 2em;}
ul.schueler li {width: 100%; line-height: 1.8em;height: auto; }
ul.schueler li:last-of-type {
	clear: both;
	float: none;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width: 100%;
}
/* ul.schueler input { width: 50%; font-size: 7px;font-size: 0.7rem;margin-top: 2em;margin-bottom: 0.5em; } */

#brevpos li.table-row > span:nth-last-of-type(2),
#brevpos li.table-row > span:last-of-type { float: left; display: block;background: none;padding: 0;width: 50%;}





/* vorl drucken - #uebersichtprint */

/* #uebersichtprint {} */
#uebersichtprint ul.schueler li { font-weight: 700; }
#uebersichtprint li.table-row > span:last-of-type { float: none; display: block;background: none;padding: 0;width: 100%;}
#uebersichtprint li.table-row > span:last-of-type input[type=submit] { margin-bottom: 0; }




/* Übersicht alle Bestellungen - #uebersichtalle */

#uebersichtalle .order {
	background: #efefef;
	padding: 1em;
	font-size: 8px;
	font-size: 0.8rem;
	margin-bottom: 2em;
}

#uebersichtalle .excel h2,
#TSuebersichtalle .excel h2 { float: none; width: auto; }


#uebersichtalle .order h3 {
	background: #003769; /*Fallback */
	background-image: url("../images/fchg2-200x200.png");
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #003669),
	color-stop(1, #0B467A)
	);
	background-image:-o-linear-gradient(bottom, #003669 0%, #0B467A 100%);
	background-image:-moz-linear-gradient(bottom, #003669 0%, #0B467A 100%);
	background-image:-webkit-linear-gradient(bottom, #003669 0%, #0B467A 100%);
	background-image:-ms-linear-gradient(bottom, #003669 0%, #0B467A 100%);
	background-image:linear-gradient(to bottom, #003669 0%, #0B467A 100%);*/
	color: #fff;
	font-size: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	margin: -1em;
	margin-bottom: 2em;
	padding: 0.5em 1em;
}

#uebersichtalle li.table-row { margin-bottom: 2em;}


/* TS Übersicht alle - #TSuebersichtalle */

/* #TSuebersichtalle {} */

#TSuebersichtalle .order {
	background: #efefef;
	padding: 1em;
	font-size: 8px;
	font-size: 0.8rem;
	margin-bottom: 2em;
}


#TSuebersichtalle h3 {
	background: #b5935b; /*Fallback */
	background-image: url("../images/fchg2-200x200.png");
/*	background-image:-webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #b5935b),
	color-stop(1, #d3be99)
	);
	background-image:-o-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-moz-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-webkit-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:-ms-linear-gradient(bottom, #d3be99 0%, #b5935b 100%);
	background-image:linear-gradient(to bottom, #d3be99 0%, #b5935b 100%); */
	color: #fff;
	font-size: 8px;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 1em;
}
/*
#TSuebersichtalle li.table-head { }  */
#TSuebersichtalle li.table-row { margin-bottom: 2em;}
/*
#profil input[name="kz_gesperrt"] + label {
	margin: 0.5em 0;
	line-height: 1.6em;
}
#profil input[name="kz_PwAendern"] + label {
	margin: 0.5em 0;
	line-height: 1.6em;
}
*/
/* Schülerdaten ändern -  #tsupdate */

/* #tsupdate {} */

/*  ändern - #posupdate */

/* #posupdate {} */


/*  löschen - #posdelete */
	/* #posdelete {}	 */
	#posdelete form { background: none; }

/* Hochgeladene Bilder - #pictures */
	/* #pictures {}	 */
	#pictures form { background: none; }


/* Kontakt - #kontakt */

#kontakt textarea {  min-height: 12em; resize: vertical; }


/* Excel liste - #excel */
#excel0 h2{
	  float: left;
    width: auto;
		color: blue;
}

		figure, figcaption {
				margin: 0;
				margin-bottom: 2px;

				padding: 0;
			}

			figure.einzel {
				position: relative;
				display: inline-block;
				width: 100%;
			}

			figure img {
				width: 100%;
				display: block;
			}

			figcaption {
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				line-height: 3em;
				color: white;
				background: rgba(0,0,0,0.5);
			}


.meldung-container {
	display:flex;
	padding-top: 20px;
	justify-content:center;
	height: auto;
}

.meldung {
	display:flex;
	/* margin: auto; */
	min-height: 100px;
	flex-direction: column;
  }

.meldung-label {
	/* display:flex; */
	display: block;
	text-align: center;
	margin:  20px auto 5px auto;

	font-size:20px;
	color:#000;
  }

  .meldung-bestellstopp {
	/* display:flex; */
	display: block;
	min-height: 50px;
	max-width: 300px;
	text-align: center;
	margin:  20px auto;
	padding: 20px;
	font-size:16px;
	color:#FFFFFF;
	background-color: #cc0000;
  }


  .meldung-hint {
	/* display:flex; */
	display: block;
	text-align: center;
	margin: 5px auto auto auto;
	font-size:14px;
	color:#000;
  }

  .meldung-list {
	list-style-type: circle !important;
	margin-top: 20px;
	margin-bottom: 20px;
  }

  .meldung-list li {
	padding: 5px;
	margin-left: 35px;
  }



  /* third example */
.call-outs-container {
/*	max-width: 1400px;*/
	margin: 0px auto 0px auto;
  }


  .call-out1 {
	  display: flex;
	  flex-wrap: grow;
	/* padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	flex-basis: 30%; */
	/* background-color: #c0dbe2; */
	min-width: 190px;
	margin: auto 0;
  }

  .call-out1 p {
	margin: auto auto auto 3px;
  }

  .call-out2 {
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	flex-basis: 30%;
	background-color: #cdf1c3;
	min-width: 400px;
  }

  .call-out3 {
	/* padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	flex-basis: 30%;
	background-color: #ccb9da;*/
	/* align-items : flex-end;  */
	display: flex;
	flex-direction: column;
	align-content : space-between;
	margin-top: auto;
	min-width: 190px;
  }

  @media (max-width: 800px) {
	.call-out3 {
		flex-direction: row;
		flex-wrap: wrap;
	}
  }

  .call-out3-oeko {
	display: flex;
	width: 200px;
	justify-content: space-between;
	/* margin: auto; */
  }

  .call-out3-oeko p{
	 margin-right: 5px;
  }

  .call-out3-button {
	width: 100%;
	/* margin: auto; */
  }

  .call-out3-oeko img{
	width: 50px;
	/* margin: auto; */
  }

  .call-out3-oeko p{
	 margin: auto 2px;
  }


  .call-out3 input {
	margin-top: auto;
	margin-bottom: auto;
	/* width: 190px; */
	font-weight: bold;
	padding-top: 1.2em;
  }
  .call-out3 .pdf {
	display: flex;
	/* width: 50px; */
	margin-left: auto;
	min-height: 30px;
  }

  @media (min-width: 800px) {
	.call-outs-container {
	  display: flex;
	  justify-content: space-between;
	}
  }

  @media (max-width: 800px) {
	.call-out1 {
	  display: none;
	  justify-content: space-between;
	}
  }
/* Kalenderwoche */
.kalenderwoche-container {
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items : flex-end;
	 align-content : space-between;
	padding-top: 10px;
}
.kalenderwoche-spinner {
	min-width: 200px;
}

.kalenderwoche-empty {
	width: 200px;
}

.title {
	width: 100%;
	text-align: center;
	color: white;
	margin: 5px;
	font-weight: 700;
	font-size: 45px;
  }

  .timer-controls {
	display: flex;
	justify-content:center;
  }

  .controls-container {
	display: flex;
  }

  .control{
	text-align:center;
	width: 310px;
	/* height: 70px; */
	margin: 5px 10px;
	display: flex;
  }

  .control-label {
	font-size:20px;
	padding:2px;
	margin: auto 0;
	width:100%;
	/* height: 30px; */
	color:#000;
	text-align: right;
  }

  .button-container {
	display:inline;
	/* width:100%;
	height:30px; */
	font-size: 25px;
	cursor: pointer;
	font-family: sans-serif;
  }

  .control-button {
	float:left;
	width:36px;
	height:40px;
	line-height: 1.5em;

  }

  .minus-button {
	border-radius: 5px 0px 0px 5px;
	background: #FF6B6B;
  }

  .plus-button {
	border-radius: 0px 5px 5px 0px;
	background:#C7F464;
  }

  .control-display {
	float:left;
	width:73px;
	height:40px;
	background:white;
	font-size: 30px;
	margin: 0px 2px;
	line-height: 1.5;
  }

  .countdown-container {
	margin: 10px;
	display: flex;
	justify-content: center;
  }

  .countdown-frame {
	width: 170px;
	height: 40px;

  }

  .status-container {
	position:absolute;
	height:50px;
	width:500px;
  }

  .status {
	background:white;
	width: 494px;
	font-size:20px;
	padding:0px;
	float:left;
	height: 40px;
	text-align: center;
	line-height: 24px;
	vertical-align: center;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 8px;
	margin:3px;
	border-radius: 20px 20px
  }

  .arrow-container {
	position: absolute;
	height: 50px;
	width: 500px;
	top: 384px;
	display: flex;
	justify-content: center;
  }

  .arrow-up{
	align-self: flex-end;
	width: 0;
	  height: 0;
	  border-left: 130px solid #FF6B6B;
	  border-right: 0px solid #FF6B6B;
	  border-bottom: 50px solid #FF6B6B;

  }

  .scroll-container {
	background: #C44D58;
	height:100%;
	display:flex;
	overflow:hidden;
	border-radius: 20px;

  }

  .number-scroller {
	display:flex;
	position: relative;
	align-items: center;
	left:50%;
	transform:translateX(-75px);
  }

  .num-item {
	display: block;
	float: left;
	width: 150px;
	height: 150px;
	min-width: 150px;
  }
  .number {
	position:relative;
	text-align:center;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 15px;
	color: white;
  }

  .begin-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align:center;
  }

  .begin-button {
	display: flex;
	width: 100px;
	height:50px;
	background: #4ECDC4;
	cursor: pointer;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
  }

  .button-text {
	font-size: 20px;
	margin:0px;
	padding:0px;
  }


  /*---SPEISEPLAN-------------------*/

  .speiseplan-text-gross {
	font-size: 16px;
	line-height: 16px;
  }
  .speiseplan-text-klein {
	font-size: 12px;
	line-height: 16px;
  }
  .speiseplan-container {
/*	  display: grid; */
	  display: none;
	  grid-template-columns: 100px 250px 250px 250px 250px;
	  grid-template-rows: 30px 150px 150px 150px 150px 150px;
/*	  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));*/
	  grid-gap: 10px;
	  align-items: center;
	}

	.speiseplan-menu {
		background: #4ECDC4;
		height: 30px;
		text-align: center;
		border: 4;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle
	}
	.speiseplan-menu0 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 1;
		grid-row-end: 1;

	  }
	.speiseplan-menu1 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 1;
	  }

	  .speiseplan-menu2 {
		grid-column: 3 / 3;
		grid-row: 1 / 1;
	  }


    .speiseplan-day {
		background: #4ECDC4;
		height: 150px;
		text-align: center;
		border: 4;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
    	vertical-align: middle
    }

    .speiseplan-day1 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 2;
		grid-row-end: 2;

	}
    .speiseplan-day2 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 3;
		grid-row-end: 3;
	}
    .speiseplan-day3 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 4;
		grid-row-end: 4;
	}
  .speiseplan-day4 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 5;
		grid-row-end: 5;
	}
    .speiseplan-day5 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 6;
		grid-row-end: 6;
  	}
/*----------------------*/
    .speiseplan-item {
		background: #4ECDC4;
		height: 150px;
		text-align: center;
		border: 4;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 16px;
	/*	display: flex;*/
		padding: 10px;
		display: block;
        margin: 0px auto;
		justify-content: center;
		align-items: center;
    	/* vertical-align: middle */
    }

    .speiseplan-item11 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 2;

	}
    .speiseplan-item12 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 3;
	}
    .speiseplan-item13 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 4;
		grid-row-end: 4;
	}
  .speiseplan-item14 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 5;
		grid-row-end: 5;
	}
  .speiseplan-item15 {
		grid-column-start: 2;
		grid-column-end: 2;
		grid-row-start: 6;
		grid-row-end: 6;
	}

    .speiseplan-item21 {
		grid-column-start: 3;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 2;

	}
    .speiseplan-item22 {
		grid-column-start: 3;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 3;
	}
    .speiseplan-item23 {
		grid-column-start: 3;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 4;
	}
  .speiseplan-item24 {
		grid-column-start: 3;
		grid-column-end: 3;
		grid-row-start: 5;
		grid-row-end: 5;
	}
  .speiseplan-item15 {
		grid-column-start: 3;
		grid-column-end: 3;
		grid-row-start: 6;
		grid-row-end: 6;
	}

/* Anzahl Menüs auswählen */
.anzahl-container {
	display:flex;
	justify-content:center;
/*	align-items : flex-end;*/
	/* align-content : space-between; */
}

.dietlabel {
	display: block !important;
	font-size: 0.9em;
}

	.diet-order {
		/* width: 320px !important; */
		text-align: left;
		margin-top: 0.4em;
	}
/*	.diet-order_ span {white-space: nowrap;}*/

	.diet-order input {
		width: auto !important;
		margin-left: 0.4em
	}
	.diet-order label {
		display: unset;
	}

	.anzahl-container label {
		margin: 0.3em 0 0.1em 0 !important;
	}

	.count {
		width: 120px !important;
		padding-top: 10px;
		/* flex-shrink: 0; */

	}
	.count .add, .count input, .count .reduce {
		float: left;
		margin-right: -1px;
		position: relative;
		z-index: 0;
		margin-bottom: 0px;
	}
	/* Firefox */
	input[type=number] {
		-moz-appearance:textfield;
	}

	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
  		-webkit-appearance: none;
  		margin: 0;
	}

	.count .add, .count .reduce {
	/*	height: 23px;*/
		width: 23px;
		border: 1px solid #C4C1C1;
		background: #C4C1C1;
		text-align: center;
		line-height: 23px;
		color: #444;
		font-size: 31px;
	}
	.count .add:hover, .count .reduce:hover {
		color: #c81622;
		z-index: 3;
		border-color: #c81622;
		cursor: pointer;
	}
	.count input {
		width: 40px;
		height: 25px;
		line-height: 15px;
		border: 1px solid #aaa;
		color: #343434;
		text-align: center;
		padding: 4px 0;
		background-color: #fff;
		z-index: 2;
	}


	a[href$="pdf"] {
		background: url(../images/icon-pdf.gif) no-repeat right;
		padding-right: 20px;
		line-height: 30px;
	}

	.call-out3 .abgabetermin {
		padding-right: 20px;
		line-height: 30px;
		color: 	#fF0000;
	}


	.hint-container {
		/* font-size: 0.8em; */
		display: flex;
	}
	.hint-cert {
		/* font-size: 0.8em; */
		display: flex;
		/* width: 200px; */
		margin-right: 10px;
		height: 120px;
		float: left;
		flex-direction: column;
		justify-content: space-around;
	}
	.hint-oeko {
		/* font-size: 0.8em; */
		display: flex;
		/* width: 400; */

		/* flex-direction: column; */
	}
	.hint-oeko p {
		margin: auto;

		/* flex-direction: column; */
	}
	.hint-image {
		/* float:left;  */
		margin:20px;
		width:30%
	}

	.hint-image img {
		/* height: 140px; */
		height: 50px;

	}

	.hint-text img {
		height: 50px;
		/* float: left; */
		margin-right: 10px;
		width: 70px;
	}

	.hint-content {
		display: flex;
		/* width: 60%; */
	}

	.hint-ingredients {
		text-align: left;
		/* flex-grow: 5; */
		 width: 62%;
		 margin: 10px;
	}
	.hint-additives {
		 /* flex-grow: 4;  */
		width: 38%;
		margin: 10px;
	}

	.hint-traces{
		font-size: 0.8em;
		margin-bottom: 10px;
		margin-left: 10px;
	}

	.hint-traces-list{
		font-size: 0.8em;
		display: flex;
		flex-wrap: wrap;
	}
	.hint-button{
		display: flex;
		 /* margin-left: 100; */
	}
	.hint-button input{
		/* flex-grow: 4;  */
	   width: 200px;
		margin: 10px auto 0px;
	    font-size: 0.6rem;
   }

	.hint-traces-item {
		/* font-size: 0.7em; */
		margin-left: 10px;
	}
	.hint-caption {
		font-size: 1.3em;
		text-align: center;
		line-height: 1em;
		margin-bottom: 5px;
	}
	.hint-betrieb {
		text-align: center;
		font-size: 0.7em;
		margin-bottom: 10px;
	}
	.hint-text {
		font-size: 0.7em;
		text-align: center;
	}

	@media (max-width: 800px) {
		.hint-content {
			flex-wrap: wrap;
		  /* justify-content: space-between; */
		}
		.hint-ingredients {
			width: 100%;
		}
		.hint-additives {
		   width: 100%;
		}
		.hint-container {
			flex-wrap: wrap;

		}
	}


	/* custom-select */

	.custom-select {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		position:relative;
		background-color: yellowgreen;
		--focused-border-color: #333;
	}

	.custom-select label {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
	}

	.custom-select select {
		appearance: none;
		border-width: 2px;
		border-color: transparent;
		box-sizing: border-box;
		height: 2rem;
		width: 100%;
		flex-grow: 1;
		padding: 0;
		margin: 0;
		color: red;
	}
	.custom-select select:focus {
		outline: none;
		border-color: var(--focused-border-color);
	}


	.custom-select label {
		width: 100%;
		display: flex;
		overflow: hidden;
		background-color: rgba(255,128,0,.5);
		padding: 0;
		margin: 0;
	}
	.custom-select label::after {
		content: '\25BE';
		background-color: var(--focused-border-color);
		color: #fff;
		width: 2rem;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: none;
	}
	.custom-select.Rtable-cell-disabled label::after {
		background-color: #ddd;
	}

	.Rtable-wochentag-container textarea{
		margin: 0;
		padding: 0;

	}

	.sonstige-bemerkung textarea {
		resize: vertical;
		padding: 2px;
		height: 3em;
		transition: none;
		min-height: 3em;
		margin-bottom: 0;
	}
	
	.sonstige-bemerkung{
		position: relative;
		border: 2px solid red;
		opacity: 0;
		visibility: hidden;
		/* resize: none; */
		/* height: 0 !important; */
		margin-bottom: 3px;
		height: 0; 
/*		-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
		-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
		transition: opacity 0.3s 0s, visibility 0s 0.3s;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;*/
		/* z-index: 999; */
	}
	.sonstige-bemerkung.is-visible{
		opacity: 1;
		height: auto; 
		/* min-height: 1em; */
		visibility: visible;
/*		-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
		-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0s;*/
	  
	}

	.animate-bemerkung{
		position: absolute;
		/* top: 2px; */
		left: 2px;
		/* margin: auto; */
		/* margin-bottom: auto; */
		/* transform: translate(5px,-3.6rem); */
		text-align: left;
		visibility: hidden;
		
	}
	textarea + label{
		margin: 0;
	}
	textarea:placeholder-shown + label{
		opacity: 0.5;
		font-size: 0.8rem;
		/* display: inline-block; */
		transform: translate(5px,-2.5rem);
		visibility: visible;
	  }
	
	 textarea::placeholder{
		/* color: red; */
		/* font-size: 1rem; */
		opacity: 0.0;
	  }
	.saveName {
		border: 2px solid red;

	}