@charset "UTF-8";
* {
   margin: 0px;
   padding: 0px;
}
@font-face
	{font-family: Arial;
	src: url('../fonts/Arial.ttf') format('truetype');
	}
@font-face
	{font-family: Rockwell;
	src: url('../fonts/Rock.ttf') format('truetype');
	}
@font-face
	{font-family: IndieFlower;
	src: url('../fonts/IndieFlower.ttf') format('truetype');
	}
@font-face
	{font-family: DancingScript;
	src: url('../fonts/DancingScript-Regular.ttf') format('truetype');
	}	
@font-face
	{font-family: Coiny;
	src: url('../fonts/coiny-v1-latin-regular.ttf') format('truetype');
	}
@font-face
	{font-family: BigSmalls;
	src: url('../fonts/BigSmalls-Regular.otf');
	}
@font-face
	{font-family: Roboto;
	src: url('../fonts/Roboto-Regular.ttf');
	}
@font-face
	{font-family: Vegur;
	src: url('../fonts/Vegur-Light.otf');
	}
/*****************************************************************************/	
header, section, footer, aside, details, main, nav, 
summary, article, figure, figcaption, hgroup {
   display: block;
}
html {
	overflow-y:scroll;
}
body {	
	font-family: "Roboto";
	/*font-size: 87.5%;*/
	width: 100%;
	/*color: #9B5C44;*/
	color: #333;		

	display: -moz-box;
	display: -webkit-box;

   -moz-box-pack: center;
   -webkit-box-pack: center;
   
   /*margin-top:100px;*/
}
h1 {
   text-align: center;
   /*font: bold 24px IndieFlower;*/
   /*font: bold 26px Verdana, sans-serif;*/
   /*font: 26px Verdana;*/
   font:  26px Rockwell;
   /*font-family: "YanoneKaffeesatz";
   font: bold 26px YanoneKaffeesatz;*/
   /*font-family: "Coiny";*/
   /*font: bold 18px;*/
  }
h1 input {
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 5px;
} 
h2 {
   text-align: center;
   /*font: 20px Roboto;*/
   font:  20px Rockwell;
   color:#5F8196;
   line-height:32px;
}
h2 img {
	float: right;
    vertical-align: middle;
}
h3 {	
   font-family: "Roboto";
   font-size: 14px;
}
h4 {
	text-align: center;
	font-family: "Roboto";
	font-size: 14px;
	color:#5F8196;
}
a { 
	text-decoration: none;
}
.material-icons.md-18 { font-size: 18px; padding:1px 5px 0px 2px; }
.material-icons.md-18a { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/*****************************************************************************/
#wrapper{
   max-width: 960px;
   margin: 15px 0px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   display: -moz-box;
   display: -webkit-box;

   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;

   -moz-box-flex: 1;
   -webkit-box-flex: 1;
}
#container {
   display: -moz-box;
   display: -webkit-box;

   -moz-box-orient: horizontal;
   -webkit-box-orient: horizontal;
}
#container0 {
   width: 15em;
   display: block;
   margin: 1px;
   padding: 0px;
   font:  14px Roboto;
   font-weight:700;
}
@media (max-width: 50em) {
	#container0 {
		width: 100%;
	}
}
#container0 li{
   list-style: none;
   /*background: #f1f1f1;*/
   padding: 0px;
   display: block;
   margin: 0px;
}
#container1 {
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
   /*border: 1px solid #999999;*/
   background: #FFFFFF;
   font:  14px Roboto;
   /*background: #F7EECD;*/
   /*margin: 20px 0px 20px 20px;*/
   /*padding: 5px;*/
   /*font: bold 10px verdana, sans-serif;*/
}
#container2 {
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
   background: #E8E8E8;
}

#GRahmen {
	width: 600px;
}
#GCanvas {
	width: 600px;
	border: 1px solid #999999;
}
@media (min-width: 768px) and (max-width: 1024px) {
	#GRahmen {
		width: 450px;
	}
	#GCanvas {
		width: 450px;
		border: 1px solid #999999;
	}
}
@media (min-width: 320px) and (max-width: 767px) {
	#GRahmen {
		width: 300px;
	}
	#GCanvas {
		width: 300px;
		border: 1px solid #999999;
	}
}
#main_header {
	/*background: #FFFCF2;*/
	/*background:#F6EDCC;aktuell*/
	background:#99B7C9;
	color:#FFFFFF;
	/*background: #FFFBCC;*/
	/*background: #E8E8E8;*/
	/*background-image: linear-gradient(to bottom,#FCFCFC, #D8DBD9);*/
	/*background-image: linear-gradient(to bottom,#FCFCFC, #FFFBCC);*/
	/*padding: 20px;*/
	display:flex;
	width:100%;
}
#main_menu {
    position: relative;
	background: #CCCCCC;
	padding: 5px 0px;
	width:100%;
    margin: 5px auto;
}
#main_footer {
   text-align: center;
   padding: 20px;
}
.InnerSection1 {
	/*height:450px; */
	overflow-y:auto;
}
.InnerSection3 {
	height:620px;
	/*width:100%;*/
	overflow-y:auto;
}
/*** Haushaltsbuch ***/
.InnerSection4 {
	height:492px;
	overflow-y:auto;
}
/*** Standardgroesse ***/
.InnerSection5 {
	height:585px;
	overflow-y:auto;
}
/*** Wunschlistenverteiler ***/
.InnerSection6 {
	height:525px;
	overflow-y:auto;
}
.klein {
	font-family: "Verdana";
	font-size: 0.8em;
}
.Feiertag {
	font-style:italic;
}
.Hilfe {
	font-family: "Rockwell";
}
.rechts { 
	text-align: right;
}
.links { 
	text-align: left;
}
.mitte { 
	text-align: center;
}
.Sp1 {
	font-size: 1em;
	font-weight: bold;
}
.Sp2 {
	font-family: "Rockwell";
	font-size: 0.5em;
}
.Sp3 {
	font-family: "Rockwell";
	font-size: 0.5em;
	color:red;
}
.UB {
	display: none;
}
.Gross {
   text-align: center;
   font: bold 30px Rockwell;
   color:#78B833;
 }
.kursiv {
	font-style: italic;
}
.GB {
	text-align: center;
	font-weight: bold;
}
.B1L {
	margin-right:5%;
}
.B1R {
	margin-left:5%;
}
.rechtsA {
	margin-right:5px;
}
label {
	display: block;
	margin-bottom: .5em;
	position: relative;
	text-align:left;
}
fieldset {
	background-color: #fefefe;
	padding: 20px;
}
legend {
	font-size:20px;
	padding:0px 10px 0px;
}
fieldset.Kopf {
	background: #eeee;
	padding: 10px;
	margin:5px;	
}
fieldset.Format1{
	border: 1px solid #333;
	background: #eee;
	padding: 5px;
	margin:5px;
	font-size: 14px;
	}
fieldset.Format1 label{
	display: inline-block;
	width: 40%;
	float: left;
	clear: left;
	margin:0px;
	text-align: left;
}
fieldset.Dialog{
	border: 1px solid black;
	border-radius: 10px;
	background: #F1F1F1;
	color:#333;
	margin-top: 1em;
	}
fieldset.Dialog > div { margin-bottom: 1em; } 
fieldset.Dialog label{
	display: inline-block;
	width: 50%;
	float: left;
	clear: left;
	text-align: left;
}

/*fieldset.Dialog label:after { content: ": " }*/
fieldset.Dialog input:not([type]) {
	left: 5em;
	position: absolute;
	top: -.1em;
}

fieldset.DialogL{
	border: 1px solid #CCA383;
	background: #F1F1F1;
	margin-top: 1em;
	}
fieldset.DialogL label{
	display: inline-block;
	width: 95%;
	float: left;
	clear: left;
	text-align: left;
}
fieldset.Dialog2{
	border: 1px solid #CCA383;
	background: #eeee;
	width: 80%;
	padding: 10px;
    display: inline-block;
	}
fieldset.Dialog2 label{
	display: block;
	width: 60px;
	float: left;
	clear: left;
	text-align: left;
}
fieldset.Dialog3{
	border: 1px solid black;
	border-radius: 10px;
	background: #F1F1F1;
	width: 80%;
	margin-top: 1em;
	}
fieldset.Dialog3 label{
	display: inline-block;
	width: 220px;
	float: left;
	clear: left;
	text-align: left;
}
.labeltext {
	font-weight: bold;
	opacity: 0.7;
}
.DD {
	width: 10em;
	text-align: center;
}
.DD1 {
	width: 12em;
	text-align: center;
}
.Eingabe{
    width: 10em;
    display: inline-block;
	padding: 9px 0px 9px 0px;
	margin-left:0px;
	text-align:left;
}
.Eingabe1{
    width: 10em;
    display: inline-block;
	margin:5px;
	text-align:left;
}
.Eingabe1K{
    width: 6em;
    display: inline-block;
	margin:5px;
	text-align:left;
}
.Eingabe2{
    width: 10em;
    display: inline-block;
	margin-left:0px;
}
.Eingabe2S{
    width: 10em;
    display: inline-block;
	margin-left:0px;
}
/*** Eingabe fuer Textfeld */
.Eingabe3{
    width: 15em;
    display: inline-block;
	margin-left:0px;
}
/*** Eingabe fuer Textfeld lang */
.Eingabe4{
    width: 100%;
    display: inline-block;
	margin-left:0px;
}
/*** Eingabe fuer kurzes Textfeld z.B. Tag*/
.Eingabe5{
    width: 3em;
    display: inline-block;
	margin-left:0px;
	text-align:center;
}
/*** Eingabe Select Monat **/
.Eingabe6{
    width: 8em;
    display: inline-block;
	margin-left:0px;
	text-align:center;
}
.Eingabe61{
    width: 10em;
    display: inline-block;
	margin-left:0px;
	text-align:center;
}
.Eingabe7{
    width: 100%;
    display: inline-block;
	text-align:center;
}
.Eingabe8{
    width: 12em;
    display: inline-block;
}
.EinDate{
    font-family: Roboto;	
	width: 10em;
}
.EingabeTime{
    width: 6em;
    display: inline-block;
	margin-left:0px;
	text-align:center;
}
.EingabeBetrag{
    width: 6em;
    display: inline-block;
	margin-left:0px;
	text-align:right;
}
.EingabeMenge{
    width: 4em;
    display: inline-block;
	margin-left:0px;
	text-align:right;
}
.EingabeBetragKurz{
    width: 2em;
    display: inline-block;
	margin-left:0px;
	text-align:right;
}
.EingabeAuto{
    width: 8em;
    display: inline-block;
}
.EingabeRadio{
    width: 6em;
	height: 1.5em;
    display: inline-block;
	margin-left:0px;
	padding: 2px;
}
.Select1{
    width: 10em;
    display: inline-block;
}
.SelectFAQ{	
	font-family: "Roboto";
	font-size: 1.1em;
    display: inline-block;
}
	/* Infobox*/
.QHelp {
	color:	#99B7C9;
}
.QHelp:hover {
    opacity:0.5;
	cursor:	pointer;
}
	/* Hilfe fuer Dialoge */
.dlgInfobox {
  position: relative;
  display: inline-block;
}
.dlgInfobox .dlgInfotext {
  visibility: hidden;
  width: 250px;
  padding: 10px;
  text-align: left;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  color:	gray;
  background-color: #f7f7f7;
  /* Position the tooltip text */
  position: 	absolute;
  z-index: 		1;
  top: -5px;
  left: 180%; 
  margin-left:	182px;
  margin-top:	-61px;
}
	/* Hilfe fuer Eingabefelder */
.Infobox {
  position: relative;
  display: inline-block;
}
.Infobox .Infotext {
  visibility: hidden;
  width: 250px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  color:	gray;
  background-color: #f7f7f7;
  /* Position the tooltip text */
  position: 	absolute;
  z-index: 		1;
  top:			100%;
  left: 		50%;
  /*margin-left:	-55px;*/
  margin-top:	10px;
}
.Infobox .Infotext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
	/* Tooltips */
	/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #99B7C9;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #99B7C9 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
.TDMerkmalT {
	/*font-family: "YanoneKaffeesatz";*/
	font-family: "Roboto";
	font: bold;
}
.TDMerkmalE {
	width: 100%;
	display: inline-block;
}
.tabapp {
	font-size: 14px;
}
#TerminAuswahl {
	/*background: #F6EDCC;*/
   background: #E8E8E8;
}
.KopfBild {
	/*box-shadow: #969696 4px 4px 5px;*/
	/*box-shadow: #969696 8px 8px 10px;*/
    /* -moz-border-radius: 10px;*/
    /* -khtml-border-radius: 30px;*/
    /* -webkit-border-radius: 10px;*/
    /* border-radius: 10px;*/
}	
#menu {
  font-size:16px;
  /*position:absolute;*/  
}
#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}
#menu li.topmenu {
  float:left;
  /*background: #E8E8E8;*/
  /*background: #F9F9F9;*/
  font-size:1em;
  width: 100%;
  padding:0px 0px 7px 0px;
  /*border-radius:5px;*/
}
.topmenu ul{
  display:none;
}
.topmenu a, .submenu a{
	padding:1px 5px;
	width:90%;
	/*background-image: linear-gradient(to bottom,#F5EDED, #CCCCCC);*/
	/*background-image: linear-gradient(to bottom,#FCFCFC, #CCCCCC);*/
	color:#FFFFCC;
	/*background-color:#00a0c8;*/
	/*font-weight:bold;*/
	text-decoration:none;
	margin:0;
}
.Hintergrundgruen {
	background-color:#CCFF66;
}
.Ueberschrift {
	float:left;
}
.LinksRechts {
	margin:0px 30px 0px 30px;
}
.Terminbutton {
    background-color: #5B75A0;
	opacity:0.7;
    border: none;
    color: white;
	width: 45px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	padding:3px;
	cursor: pointer;
}
.Terminbutton:hover {
    opacity:0.5;
}
.Terminbutton2 {
    background-color: #5B75A0;
	opacity:0.7;
    border: none;
    color: white;
	width: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
	padding:2px;
	cursor: pointer;
}
.Terminbutton2:hover {
    opacity:0.5;
}
.Icon:hover {
	opacity:0.5;
}
.topmenu a {
  float:left;
  text-align:left;
}
.submenu a{
  font-size:12px;
  width:110px;
  list-style-type:disc;
  position:relative;
  clear:both; /* special IE6 */
}
#menu a:hover,a:focus {
  /*color:#4C4C4C;*/
  /*color:#FFFFFF;*/
  /*background-color:#ffddbb !important;*/
  background:#ccc;
}
.topmenu:hover, .topmenu:focus ul {
  display:block;  
  z-index:500;
}
/*.topmenu:hover {
	background:#797979;
}*/
.zoom {	
	transition: transform 0.2s;
}.zoom:hover {
	 transform: scale(1.02,1.02);
}
.TextBox10 a {
		 /*color: #CC4E27;*/
		 /*color: #9B5C44;*/
		 color: #333;
}
.TextBox20 a {
		 color: #333;
}
.TextBox30 a {
		 /*color: #E52C2F;*/
		 color: #333;
}
.TextBox40 a {
		 /*color: #78B833;*/
		 color: #333;
}
.TextBox50 a {
		 /*color: #C9A100;*/
		 color: #333;
}
/*** Bilder hochladen ***/
.form-wrap{
    max-width: 400px;
    padding: 30px;
    background: #f1f1f1;
    margin: 20px auto;
    border-radius: 4px;
	text-align: center;
}
.form-wrap form{
	border-bottom: 1px dotted #ddd;
	padding: 10px;
}
.form-wrap #output{
    margin: 10px 0;
}
.form-wrap .error{
    color: #d60000;
}
.form-wrap .images {
    width: 100%;
    display: block;
    border: 1px solid #e8e8e8;
    padding: 5px;
    margin: 5px 0;
}
.form-wrap .thumbnails {
    width: 32%;
    display: inline-block;
    margin: 3px;
}
/***********************/
.Kopfeingabe {	
    float: left;
    padding: 2px;
}
#Familiendaten{
	display:flex;
}
#Personendaten{
	display:flex;
}
#Firmendaten{
	display:flex;
}
#header_Einkauf{
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
   border: 1px solid #999999;

   margin: 20px;
   }
#parentbox{
   display: -moz-box;
   display: -webkit-box;
   box-orient: horiziontal;
   width: 100%;
   height: 620px;
   border: 1px solid #999999;
   margin: 0px;
   }
#parentbox2{
   display: -moz-box;
   display: -webkit-box;
   box-orient: horiziontal;
   width: 700px;
   height: 620px;
   border: 1px solid #999999;

   margin: 20px;
   }
#CloudLinks{
	width: 30%;
	background: #E8E8E8;
	overflow-y:auto;
	}
#CloudRechts{
	width: 70%;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	background:  #E8E8E8;
	overflow-y:auto;
}
#tagebuch_header{
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
   border: 1px solid #999999;
   height: 500px;
   margin: 20px;
}
article {
   background: #FFFBCC;
   border: 1px solid #999999;
   padding: 20px;
   margin-bottom: 15px;
}
time {
   color: #999999;
}
article footer {
   text-align: right;
}
figcaption {
   font: italic 14px Rockwell, sans-serif;
}
#dlgDateien div {
     width:300px;
}
#dlgWunsch div {
     width:400px;
}
#dlgWLVTEintragxxx div {
     width:300px;
}
#dlgBerechtigungen {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#dlgBerechtigungen div {
     width:300px;
     margin: 100px auto;
     background-color: #FFFFFF;
     border:1px solid #000;
     padding:15px;
     text-align:center;
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#dlgHilfetext {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 9998;
}
#dlgHilfetext div {
     width:400px;
     margin: 100px auto;
	 background-color: #DDE9C1;
     border:1px solid #000;
     padding:15px;
     text-align:center;
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     /*-moz-border-radius: 10px;
     -khtml-border-radius: 30px;
     -webkit-border-radius: 10px;
     border-radius: 10px;*/
}
/*** Standard-Drop-Down Menue ***/
 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	width: 100%;
	overflow: auto;
}
ul.tab {
	height:32px;
}
@media (max-width: 50em) {
	ul.tab {
		height:64px;
	}
}	
/* Float the list items side by side */
ul.tab li {
	height:32px;
	float: left;
}
/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
	padding: 8px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:focus {background-color: #ccc;}
/*ul.tab li a:hover {background-color: #ddd;}*/
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
/*ul.tab li a:focus, .active {background-color: #ccc;}*/
ul.tab li a:active {background-color: #ccc;}
/* Style the tab content */
.tab_content {
    display: none;
    /*padding: 6px 12px;*/
    border: 1px solid #ccc;
    border-top: none;
}
/* Dropdown Button */
.dropbtn {
    color: white;
    border: none;
    cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    border: 1px solid #ccc;
}
/* Ein weiterer Dropdown Button */
.dropbutton {
    background-color: #99B7C9;
    /*color: black;*/
    color: white;
    padding: 3px;
	font-family: Roboto;
    font-size: 16px;
    border: none;
    cursor: pointer;
	width:150px;
	margin-left:5px;
	text-transform:uppercase;
}
.dropbutton:hover, .dropbutton:focus {
    background-color: #ccc;color:white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
	float: right;
    position: relative;
    display: inline-block;
	width:	20%;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
	position: absolute;
    background-color: #f9f9f9;
    min-width: 130px;
	z-index: 2;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}
#dlgAnzeigemitglied div {
     width:300px;
}
#dlgAufgabeLoeschen div {
     width:300px;
}
#dlgKommunikation {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#dlgKommunikation div {
     width:350px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
     -moz-border-radius: 10px;
     -khtml-border-radius: 30px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}
#dlgKommLoeschen {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#dlgKommLoeschen div {
     width:350px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
     -moz-border-radius: 10px;
     -khtml-border-radius: 30px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}
.xscroll {
	overflow-x:scroll;
}
table.TForm1 {
	font-family: "Roboto";
	font-size: 14px;
	color: black;
	width: 100%;
	border-collapse: collapse;
}
table.TForm1 td {
	padding: 5px 5px;
}
th.canSort:hover {
	cursor: n-resize;
}
/** Familienchronik	**/
table.TForm2 {
	color: black;	
	width: 100%;
	height:100px;
	padding: 5px 5px;
	border-collapse: collapse;
}
table.TForm2 td {
	padding: 5px 5px;	
	border: 1px solid black;
	white-space:pre-wrap;
}
/**	Tagebuch	**/
table.TForm3 {
	color: black;	
	width: 100%;
	height:100px;
	padding: 5px 5px;
	background-color: #ffffff;
	border-collapse: collapse;
}
table.TForm3 td {
	padding: 5px 5px;	
	border: 1px solid black;	
	white-space:pre-wrap;
}
/***	Haushaltsbuch ***/
table.TForm4 {
	font-family: "Roboto";
	font-size: 14px;
	width: 100%;
	border-collapse: collapse;
}
table.TForm4 th {
	padding: 5px 5px;
}
table.TForm4 td {
	padding: 5px 5px;
	border: 1px solid #5F8196;
}
/*************************/
div.wrapperT {	
  max-width: 200px;
  max-height: 100px;
	overflow: scroll;
}
table.scroll {
	font-family: "Roboto";
	font-size: 14px;
	color:#333;
	width: 100%;
	padding: 5px;
	border-collapse: collapse;
	border: 1px solid #D9D9D9;
}
table.scroll thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;	
  padding: 5px 5px;
  background-color: #f2f2f2;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
}
table.scroll tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}
table.scroll thead th:first-child {
  left: 0;
}
table.scroll td {
	padding: 5px 5px;
	border-right:1px solid #D9D9D9;
	border-left:1px solid #D9D9D9;
}
table.scroll tfoot,
table.scroll tfoot th,
table.scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: #f2f2f2;
  border-top: 2px solid #D9D9D9;
}
table.scroll tr:nth-child(even) {
	background-color: #d4d6d4;
} 
.auswahl {
	font-size: 20px;
}

/**	Termine,Ereignisse	**/
table.TForm5 {
	font-family: "Roboto";
	font-size: 14px;
	color:#333;
	width: 100%;
	overflow-x:scroll;
	padding: 5px;
	border-collapse: collapse;
	border: 1px solid #D9D9D9;
}
table.TForm5 th {	
	padding: 5px 5px;
	/*border:1px solid #5F8196;*/
	border: 1px solid #D9D9D9;
	/*display: block;*/
}
table.TForm5 tr {
	border:none;
}
table.TForm5 tr:nth-child(even) {
	background-color: #d4d6d4;
}
table.TForm5 td {
	padding: 5px 5px;
	border-right:1px solid #D9D9D9;
	border-left:1px solid #D9D9D9;
}
table.TForm5 a {
	text-decoration:none;
}
table.TForm5 a:hover, a:focus {
	background-color: #ddd; 
}
/**	Stundenplaene	**/
table.TForm6 {
	font-family: "Roboto";
	font-size: 14px;
	width: 100%;
	padding: 5px 5px;
	border-collapse: collapse;
}
table.TForm6 th {
	padding: 5px 5px;	
	border: 1px solid #5F8196;
}
table.TForm6 td {
	padding: 5px 5px;	
	border: 1px solid #5F8196;
	text-align: center;
	vertical-align: middle;
}
/** Fotos / Ordner		**/
table.TFotos {
	border-collapse: collapse;
}
table.TFotos tr {
	border: 1px solid;
	border-color: #9B5C44;
}
 /* Wunschlisten */
ul.tab_wunschliste {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_wunschliste li {float: left;}
/* Style the links inside the list items */
ul.tab_wunschliste li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
/* Change background color of links on hover */
ul.tab_wunschliste li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_wunschliste li a:focus, .active {background-color: #ccc;}

 /* Verliehen/Geliehen */
ul.tab_vgliste {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_vgliste li {width:50%;float: left;}
/* Style the links inside the list items */
ul.tab_vgliste li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 18px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_vgliste li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_vgliste li a:focus, .active {background-color: #ccc;}

 /* 2-Tabs */
ul.tab_2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_2 li {width:50%;float: left;}
/* Style the links inside the list items */
ul.tab_2 li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_2 li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_2 li a:focus, .active {background-color: #ccc;}

 /* 3-Tabs */
ul.tab_3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_3 li {width:33%;float: left;}
/* Style the links inside the list items */
ul.tab_3 li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_3 li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_3 li a:focus, .active {background-color: #ccc;}

 /* 4-Tabs */
ul.tab_4 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_4 li {width:25%;float: left;}
/* Style the links inside the list items */
ul.tab_4 li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_4 li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_4 li a:focus, .active {background-color: #ccc;}

 /* 5-Tabs */
ul.tab_5 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_5 li {width:20%;float: left;}
/* Style the links inside the list items */
ul.tab_5 li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_5 li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_5 li a:focus, .active {background-color: #ccc;}

 /* 6-Tabs */
ul.tab_6 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_6 li {width:16.6%;float: left;}
/* Style the links inside the list items */
ul.tab_6 li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_6 li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_6 li a:focus, .active {background-color: #ccc;}

 /* Geschenke */
ul.tab_Geschenke {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_Geschenke li {width:50%;float: left;}
/* Style the links inside the list items */
ul.tab_Geschenke li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_Geschenke li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_Geschenke li a:focus, .active {background-color: #ccc;}

 /* Aktionen */
ul.tab_Aktionen {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab_Aktionen li {width:25%;float: left;}
/* Style the links inside the list items */
ul.tab_Aktionen li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	width:100%;
}
/* Change background color of links on hover */
ul.tab_Aktionen li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab_Aktionen li a:focus, .active {background-color: #ccc;}

#Auswahlanzeige {
	padding:5px;
}
.SchliessenHelp{
	width:6em;
	font-size: 1em;
	background: #ddd;
	padding: 2px;
    cursor: pointer;
}
@media (max-width: 50em) { 
.SchliessenHelp {
    font-size: 0.8em;
  }
}
.SchliessenHelp:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.TDAuswahl {
	color:white;
    background: #797979;
	padding: 3px;
}
.ButtonBreit{
	width:40%;
	font-size: 1.5em;
	background: #DDE9C1;
	padding: 2px;
	color: #333;
    cursor: pointer;
	margin: 2px;
}
@media (max-width: 50em) { 
.ButtonBreit {
    width:60%;
  }
}
.ButtonBreit:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.ButtonBreit2{	
   font-family: "Roboto";
	width:60%;
	font-size: 1em;
	background: #99B7C9;
	padding: 2px;
	color: white;
    cursor: pointer;
	margin: 2px;
	box-shadow:none;
}
.ButtonBreit2:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.ButtonGanzBreit{	
   font-family: "Roboto";
	width:100%;
	font-size: 1em;
	background: #99B7C9;
	padding: 2px;
	color: white;
    cursor: pointer;
	margin: 4px;
}
.ButtonGanzBreit:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.ButtonGanzBreit2{	
   font-family: "Roboto";
	width:100%;
	font-size: 1em;
	background: #7BAD45;
	padding: 2px;
	color: white;
    cursor: pointer;
	margin: 4px;
}
.ButtonGanzBreit2:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.standardSubmit{
	width:6em;
	font-size: 1em;
	background:  #99B7C9;
	padding: 2px;
	/*color: #9B5C44;*/
	color: white;
    cursor: pointer;
	margin: 2px;
	box-shadow:none;
	border:none;
}
@media (max-width: 50em) { 
.standardSubmit {
    font-size: 0.8em;
  }
}
.standardSubmit:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.BLoeschen {
	width:6em;
	font-size: 1em;
	background:#CC4E27;
	padding: 2px;
	color:white;
    cursor: pointer;
	margin: 2px;
	box-shadow:none;
	border:none;
}
@media (max-width: 50em) { 
.BLoeschen {
    font-size: 0.8em;
  }
}
.BLoeschen:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.BLoeschen2 {
	width:6em;
	font-size: 0.8em;
	color:red;
	visibility: hidden;
    cursor: pointer;
}
.BLoeschen2:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.BLoeschen3 {
	width:50%;
	background:  #99B7C9;
	font-size: 1em;
	padding: 2px;
	margin: 2px;
	color: white;
    cursor: pointer;
}
.BLoeschen3:hover {
	box-shadow: #969696 2px 2px 2px; 
}
.BSpeichern2 {
	width:80%;
	background: #99B7C9;
	font-size: 1em;
	padding: 2px;
	margin: 2px;
	color:  white;
    cursor: pointer;
}
.BSpeichern2:hover {
	box-shadow: #969696 2px 2px 2px; 
}
 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
	width: 320px;
     margin: 100px auto;
     background-color: #fefefe;
     border:1px solid #000;
     padding:15px; 
     text-align:center;
     /*-moz-border-radius: 10px;*/
     /*-khtml-border-radius: 30px;*/
     /*-webkit-border-radius: 10px;*/
     /*border-radius: 10px;*/	
}
@media (max-width: 50em) { 
  .modal-content {
    width: 50%;
    margin: 40px auto;
  }
}
.modal-content2 {
	width: 40%;
     margin: 100px auto;
     background-color: #fefefe;
     border:1px solid #000;
     padding:15px;
     text-align:center;
     /*-moz-border-radius: 10px;*/
     /*-khtml-border-radius: 30px;*/
     /*-webkit-border-radius: 10px;*/
     /*border-radius: 10px;*/	
}
@media (max-width: 50em) { 
  .modal-content2 {
    width: 80%;
    margin: 40px auto;
  }
}
.modal-content3 {
	width: 300px;
     margin: 100px auto;
     background-color: #fefefe;
     border:1px solid #000;
     text-align:center;
}
.modal-content4 {
	width: 350px;
     margin: 100px auto;
     background-color: #fefefe;
     border:1px solid #000;
     padding:15px; 
     text-align:center;
}
.modal-content5 {
	width: 50%;
     margin: 100px auto;
     background-color: #fefefe;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
.EingabeDatum {
	text-align:center;
}
#BAuswahl {
	text-align: center;
	padding: 5px;   
}
.Breit {
	width: 100%;
}
.BuButton {
	cursor: pointer;
	font-family: "Rockwell";
	font: 12px Rockwell,sans-serif;
	border: 1px solid #000000;
	color:white;
    background: #797979;
	padding: 2px;
	line-height: 130%;
}
.BuButton:hover {
    background-color: #ccc;
	color:white;
}.BuButton1 {
	cursor: pointer;
	font-family: "Rockwell";
	font: 20px Rockwell,sans-serif;
	border: 1px solid #000000;
	color:white;
    background: #797979;
	padding: 2px;
	line-height: 130%;
}
/***input[type="file"] {
    display: none;
}
**/
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
	width: 100%;
}