/* scaffolding */
/* ----------- */

body {
background-image: url("../bilder/Logo_kopf_blau_schrift_gruen2.png");

}

html {
  overflow-y: auto;
  overflow-x: auto;
}

.gesamt {

  overflow-x: auto;
}


header {

   display: flex;
 align-content: center;
 flex-wrap:  wrap ;
 justify-content: space-around;
  align-items: center;
border-bottom: #002060 10px solid;

}

.ui-tooltip {

               color: #002060;
                background-color: rgba(255,255,255,0.8);
   font-size: 70%;
        padding: 8px;
        position: bottom left;
        z-index: 9999;
        max-width: 300px;
        -webkit-box-shadow: 0 0 5px #aaa;
        box-shadow: 0 0 5px #aaa;

}
body .ui-tooltip {
        border-width: 2px;

}


.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */
head,
html {
 font-family: Gabriola, Comic Sans MS, Times New Roman, Times, serif;
  font: normal normal normal 1.4em/1.1  Gabriola, "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #002060;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;

}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;

}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}


.Einleitung {
 text-align: center;

}

#Suchfeld{

}

.user_eingabe{
font-family: Gabriola;
font-size: 80%;
margin: 5px;
}

.Reset:active{

background-color: rgb(123, 180, 17, 0.5);

}

.typeahead2:active{

background-color: rgb(123, 180, 17, 0.5);

}

#button_user {
    background-color: rgba(255,255,255,0.8);
   font-family: Gabriola;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

#button_user:hover,
.Reset:hover,
.typeahead2:hover {
  background-color: #03739c;
}

.typeahead2{
  background-color: rgba(255,255,255,0.8);
  color: #002060;
  font-family: Gabriola;
  width: 15em;
  height: 2em;
  margin: 5px;
  font-size: 80%;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;


}

.Eingabe,
.typeahead,
.tt-query,
.tt-hint {

  color: #002060;
  font-family: Gabriola;
  width: 15em;
  height: 2em;
  margin: 5px;
  font-size: 80%;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;

}





.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color:  green;
}

.tt-menu {
  width: 400px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 70%;
  line-height: 20px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

.scrollable-dropdown-menu  {
  display: flex;
align-items: flex-start;
 align-content: center;
 flex-wrap:  wrap ;
 justify-content: space-around;
 margin-bottom: 10px;
border-bottom: #002060 10px solid;

}


td {
        border: 1px solid black;
        padding: 2px 2px;


tr {

}

}

table {
font-size: 70%;

color: #002060;
 border: 0px solid #002060;
  border-spacing: 1px;
margin: auto;


max-width: 90%;
}

tr:nth-child(even) {background-color: #e3dede;}
tr:nth-child(odd) {background-color: white;}

.Reset {
font-family: Gabriola;
 width: auto;
  margin-left: auto;
    margin-right: auto;
   background-color: rgba(255,255,255,0.8);
   font-size: 80%;
 padding: 8px 12px;
  margin-bottom: 10px;
   -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}


.einfuegen {
  display: inline;
}

#Vitamine{

}

.Einleitungstext {
background-color: rgba(255,255,255,0.8);
display: flex;
flex-direction: row;
flex-wrap:  nowrap ;
gap: 2%;
}

@media screen and (max-width: 50em){
.Einleitungstext {
display: flex;
flex-direction: column;

 font-size: 80%;
}
.ui-tooltip {
display: none;
}
.Standardabfragen {
display: flex;
flex-direction: column;
}
.gesamt {

}
}



@media screen and (max-width: 50em){
.Einleitungstext_p{

}
}




#button_user,
#mineraliengesamt,
#Eingabe,
#Standard,
#fettegesamt,
#vitaminegesamt
 {



}

 h3 {
font-size: 120%;
 background-color: rgba(255,255,255,0.8);
}

#gesamt2 h3 {
 background-color: rgba(255,255,255,0.8);
}

#Vitamin{
 background-color: rgba(255,255,255,0.8);
}

#Nahrungsmittel{
 background-color: rgba(255,255,255,0.8);

}


#speichern{
display: flex;
flex-wrap:  wrap ;

  justify-content: center;
display: none;
}

#einfuehrung,
#Grundbedarf,
#Grundbedarf2 {
font-size: 80%;
text-align: center;
margin: auto;
}

#Grundbedarf2 {

}

#Standardabfragen2 {

display: none;
}

.Standardabfragen {

display: inline;
}


.infogrundbedarf {
 visibility: hidden;
}


#eingabevit {
  display: flex;
  justify-content: center;
flex-wrap:  wrap ;
}

#multiple-datasets {
  display: none;
   justify-content: center;
flex-wrap:  wrap ;

 align-items: flex-start;
}


.auswaehlen {
  display: none;
}

.Eingabe {

}

.gesamt {
color: #002060;
 display: flex;
flex-direction: column;
 align-content: center;
 justify-content: flex-start;
 align-items: center;
border-bottom: #002060 10px solid;
padding: 20px;
font-size: 80%;
}

.tabellen  {
 color:#002060;
 display: flex;
 align-content: center;
 flex-wrap:  wrap ;
 justify-content: space-around;
 align-items: flex-start;
padding: 20px;

}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 250px;
  overflow-y: auto;

}

#rtl-support .tt-menu {
  text-align: right;
}