/*  
	----------------------------------------------------------------------------
  Programm  : MyMTOO V1
  Funktion  : MyMTOO.css
  Zweck     : Dies ist die .css-Datei für die Webanwendung MyMTOO 
  Autor     : Thomas Glöyer
  Erstellt  : 2019-01
  Geändert  : 2020-02-03
  Änderungen:
    24.03.19:  
    23.01.20: Code formatiert (CSS)
    03.02.20: #intro_1 in .intro_1 überführt (von ID zu Class)
    05.02.20: Hintergrundfarbe für Body und row verändert (weiss, grau)
              .mtoo-button-standard eingeführt für die Buttons auf der Hauptseite
  ----------------------------------------------------------------------------- 
  - Farbe 
  - Finale Festlegung (3.3.2019 14:27) 
  -     - Farbe hellblau: rgb(141, 198, 229);
	-             Für favIcon, body und logo
  -     - Farbe dunkelblau: rgb(44,60,104);
  -             Für favicon, Navbar, Grundschrift, und für FAQ-Bereich
  -     - Farbe white rgb (255,255,255);
  -             Für row (d.h. den Background) der Kackeln
  ----------------------------------------------------------------------------
  - Farben gesetzt bis 2019-02-28
  -  - Hintergrundfarbe für body          background-color: rgb(144, 181, 223);
  -  - Schriftfarbe für body              color: rgb(14, 14, 63);
  -  - Hintergrundfarbe für row           background-color: rgb(245, 242, 240);
  -  - Hintergrundfarbe für #mtoo_navbar  background-color: rgb(14, 14, 63);
  - Farben gesetzt ab 3.3.2019 (auf 50er Sticker und Logoschrift und Hintergrund Kachel = weiss)
  -  - Hintergrundfarbe für body          background-color: rgb(141, 198, 229) oder White
  -  - Schriftfarbe für body              color: rgb(44,60,104);
  -  - Hintergrundfarbe für row           background-color: white;
  -  - Hintergrundfarbe für #mtoo_navbar  background-color: rgb(44,60,104);
  - Farben Experiemente ab 5.2.2020
  -  - Hintergrundfarbe für body          background-color: White
  -  - Schriftfarbe für body              color: rgb(44,60,104);
  -  - Hintergrundfarbe für row           background-color: rgb(218, 216, 216); ein helles Grau
  -  - Hintergrundfarbe für #mtoo_navbar  background-color: rgb(44,60,104);
	*/

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  /* Standard ist 14px */
  padding-top: 0px;
  /* vorher 5px;  dann 1 */
  padding-bottom: 2px;
  /* vorher 2, wenn die Cookie-Info den Footer nicht verdecken soll dann auf 74px setzen */
  background-color: white;  /* rgb(141, 198, 229); */
  color: rgb(44, 60, 104);
}



.navbar {
  margin-bottom: 0px;
  /* 0px vor 20.2 */
  margin-left: -15px;
  margin-right: -15px;
  /* Farbe rechts und links der Navigationszeile so setzen wie im body, nötig falls "fixed"-Navbar */
  background-color: rgb(141, 198, 229);
  border: 0px;
  /* verhindert, dass die Navbar eine Umrandung hat */
  /* border-bottom-color: blueviolet;  ein test, kann wieder raus */
}

.navbar a:link {
  color: white; 
}

/* Farbe der Navigationszeile oben setzen */
#mtoo_navbar {
  background-color: rgb(44, 60, 104);
}

/*  
	======================== 
  - Note: Hilfen für die Farbgebungen 5.2.2020
	======================== 
	*/
  /* Noch nicht im Einsatz */
  .link-farbe {
    color:rgb(8, 48, 14)!important; 
  }

  /* für die Buttons auf der Homepage im Einsatz */ 
  .mtoo-button-standard {
    color:white !important; 
    width: 300x; 
    background-color: rgb(44, 60, 104);
  }




/*  
	======================== 
	- Note:  Folgende Anweisungen sind aus Grid.css übernommen
	======================== 
	*/

.row {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 3px;
  /* 2px für kleinen Abstand zu nächsten Karte */
  /* background-color: rgb(221, 158, 42); */
  background-color: rgb(218, 216, 216);
}


[class*="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  /* fehlt Border, dann geht die Formatierung der Abstände im iphone möglichereweise kaput */
  /* border: 1px solid rgba(129, 128, 134, 0.151); */
  /* border: 1px solid #ddd; */
}

h1, h2, h3, h4, h5 {
  margin-top: 5px;
}

/*  
	======================== 
	- Note:  Folgende Anweisungen sind für die Formatierung von Links in den Tabellen mit class=links
	======================== 
  */

.links ul {
  margin-left: 0px;
  padding-left: 20px;
  text-align: left;
}

.links a {
  font-size: 1.0em;
}

.links a:link {
  /* color: rgb(37, 36, 36); */
  color: rgb(16, 4, 124); 
  /* font-weight: bold;  */
  text-decoration: none;
  border-bottom: none;
}

.links a:visited {
  color: rgb(16, 4, 124);
  /* color: rgb(37, 36, 36); */
  /* font-weight: bold; */
  text-decoration: none;
  border-bottom: none;
}

/*  
	======================== 
  - Note:  Folgende Anweisungen sind für die Formatierung Input-Feldes von QR-Codes
  - Quelle:  https://www.sitepoint.com/create-qr-code-reader-mobile-website/
	======================== 
  */

input {
  font-size: 10pt
}

input, label {
  vertical-align: middle
}

/* Formatierung für QR-Code einlesen mit kleinem Symbol / alt/läuft
.qrcode-text {padding-right:1.8em; margin-right:0}
.qrcode-text-btn {display:inline-block;  
  background: url("./img/1499401426qr_icon.svg") 50% 50% no-repeat; 
  vertical-align: middle;
  height: 1.32em; 
  width: 1.7em; 
  margin-top: 0.3em; 
  margin-left:-1.9em;
  cursor:pointer;}
.qrcode-text-btn > input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0} 

*/

.qrcode-text {
  padding-left: 0.5em;
  padding-right: 1.8em;
  margin-right: 0
}

.qrcode-text-btn {
  display: inline-block;
  /* background: url("./img/1499401426qr_icon.svg") 50% 50% no-repeat;  */
  /* oder unter dem Namen scan-button-v1.svg ist der alte Original-Scan-Button 1499401426qr_icon.svg abgelegt */
  background: url("./img/scan-button-v2.svg") 50% 50% no-repeat;
  vertical-align: middle;
  height: 2.2em;

  width: 6.0em;
  margin-top: 0.4em;
  margin-left: -6.5em;
  cursor: pointer;
}

.qrcode-text-btn>input[type=file] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0
}

textarea {
  width: 100%;
  height: 10em;
}

/*  
	======================== 
  - Note:  Folgende Anweisungen sind für die Formatierung des Bereiches Sign-In nach der Methode Thomas, nicht PHP-Einfach
	======================== 
  */

/* Weitere ccs aus PHP-Einfach-Vorlage für Login
   wird nicht mehr benutzt und kann später gelöscht werden  */

.main-container {
  margin-top: 20px;
}

.registration-form {
  max-width: 450px;
  margin: 0 auto;
}

.small-container-500 {
  max-width: 500px;
  padding: 15px;
  margin: 0 auto;
}

.small-container-330 {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.small-container .small-container-heading, .small-container .checkbox {
  margin-bottom: 10px;
}

.small-container .checkbox {
  font-weight: normal;
}

.small-container .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 1em;
  /* original vorher 16px */
}

.small-container .form-control:focus {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.login td {
  padding-right: 2px;
  padding-left: 2px;
}

/*
#login_pro .form-control {
  width: auto;
}
*/

/* Übertreifende Festlegung für Feedback-Meldungen formatieren */

.feedback_erfolg {
  color: green;
  font-weight: bold;
}

.feedback_misserfolg {
  color: red;
  font-weight: bold;
}

/* Ab hier für index.html id= */

/* 3.2.2020 ich habe die ID #intro_1 in .intro (d.h. eine Class umgenannt), wird aktuell in index.htm. nicht mehr genutzt */
.intro_1 {
  text-align: center;
  padding-bottom: 15px;
}

.intro_1 h2 {
  text-align: center;
}

/* Ab hier für Class .funktionen in index.html */

.funktionen {
  text-align: center;
  padding-bottom: 15px;
}

.funktionen img {
  text-align: center;
  width: 100%;
  height: auto;
}

/* Ab hier für Sektion #Erklärung in index.html */

.erklaerung {
  font-size: 1.0em; /* 1.2 ist richtig */
  text-align: center;
  padding-bottom: 15px;
}

/* Achtung: login wurde als ID vor class geschrieben */
#login {
  background-color: rgba(114, 80, 6, 0.315);
}

#registieren {
  background-color: rgba(37, 114, 6, 0.315);
}

/* Ab hier für FAQ */
.panel {
  color: rgb(44, 60, 104);
}

.panel-title {
  color: rgb(44, 60, 104);
  font-size: 100%;
}

/* Ab hier für Footer.inc.php */
#fusszeile {
  text-align: center;
}

/* Ab hier für Cookie-OK-Frage */
#cookie_navbar {
  background-color: rgb(14, 14, 63);
}

#eu-cookie-message {
  /* position: absolute; /*fixed */
  /* bottom: 0;  */
  width: 100%;
  text-align: center;
  color: #fff;
}

#eu-cookie-message form {
  border: 0;
  margin: 0;
  padding: 10px;
}

#eu-cookie-message form input {
  display: block;
  margin: 5px auto 0 auto;
  padding: 3px 10px;
  background-color: #F6D000;
  border: 2px solid #787252;
  border-radius: 5px;
  cursor: pointer;
}