/*	Layout für die Unterwebseite medikamente.php */
/*	Es ist das komplizierteste Layout.
	Auf dem Smartphone stehen alle Daten untereinander, sodass der Benutzer
	von oben nach unten durch die Daten blättern kann.
	Auf breiteren Bildschirmen gibt es sechs Zeilen, die jeweils in vier Spalten
	ausgeteilt sind.
	1. Zeile: Überschrift über alle Spalten hinweg
	2. Zeile: Verpackungsbild | Tablettenbild | Tablettenname | Tablettenhersteller
	3. Zeile: Überschrift der Dosierungshinweise über alle Spalten hinweg
	4. Zeile: Dosierung morgens | Dosierung mittags | Dosierung Abends | sonstige Zeiten
	5. Zeile: Dosierungshinweise über alle Spalten hinweg
	5. Zeile: Absendebuttons über alle Spalten hinweg
	
/*	Layout des Willkommen-Logos */
.willkommen img {
		float: left;
		width: 40%;
}
@media all and (min-width: 1024px) {
	.willkommen img {
		width: auto;
	}
}
/*	Zentrales Layout für die Medikamenteneingabe */
#medikamenteneingabe {
	background-color: #effbfb;
	display: grid;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto 3em;
	grid-template-areas:  
    "eingabe_ueberschrift"
	"eingabe_verpackung"
	"eingabe_tablette"
    "eingabe_name"
	"eingabe_hersteller"
	"dosierung_ueberschrift"
	"dosierung_morgens"
	"dosierung_mittags"
	"dosierung_abends"
	"dosierung_sonstiges"
	"dosierung_hinweise"
	"daten_uebernehmen";
}
@media all and (min-width: 1024px) {
	#medikamenteneingabe {
		width: 100%;
		background-color: #effbfb;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto auto auto auto 3em;
		grid-template-areas:
		"eingabe_ueberschrift eingabe_ueberschrift eingabe_ueberschrift eingabe_ueberschrift"
		"eingabe_verpackung eingabe_tablette eingabe_name eingabe_hersteller"
		"dosierung_ueberschrift dosierung_ueberschrift dosierung_ueberschrift dosierung_ueberschrift"
		"dosierung_morgens dosierung_mittags dosierung_abends dosierung_sonstiges"
		"dosierung_hinweise dosierung_hinweise dosierung_hinweise dosierung_hinweise" 
		"daten_uebernehmen daten_uebernehmen daten_uebernehmen daten_uebernehmen";
	}
}
#medikamenteneingabe div {
	text-align: center;
	padding: 0.2em 0em 0.2em 0em;
}
#eingabe_ueberschrift {
	grid-area: eingabe_ueberschrift;
}
#eingabe_verpackung {
	grid-area: eingabe_verpackung;
}
#eingabe_tablette {
	grid-area: eingabe_tablette;
}
#eingabe_name {
	grid-area: eingabe_name;
}
#eingabe_hersteller {
	grid-area: eingabe_hersteller;
}
#dosierung_ueberschrift {
	grid-area: dosierung_ueberschrift;
}
#dosierung_morgens {
	grid-area: dosierung_morgens;
}
#dosierung_mittags {
	grid-area: dosierung_mittags;
}
#dosierung_abends {
	grid-area: dosierung_abends;
}
#dosierung_sonstiges {
	grid-area: dosierung_sonstiges;
}
#dosierung_hinweise {
	grid-area: dosierung_hinweise;
}
#daten_uebernehmen {
	grid-area: daten_uebernehmen;
}
/*	Wenn die Dosierungsformulare bei breiten Bildschirmen nebeneinander stehen,
	sollen sie durch einen rechten Rand voneinander abgetrennt werden */
@media all and (min-width: 1024px) {
	#dosierung_morgens .dateneingabe {
		height: 85%;
		border-right: 1px solid #017e62;
	}
	#dosierung_mittags .dateneingabe{
		height: 85%;
		border-right: 1px solid #017e62;
	}
	#dosierung_abends .dateneingabe{
		height: 85%;
		border-right: 1px solid #017e62;
	}
}
#medikamenteneingabe img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	border: 1px solid #017e62;
}
#inp_file_verpackung, #inp_file_tablette {
	display: none;
}
/*	da die Checkboxen (Formulare, bei denen man ein Kästchen an- und abwählen kann) zu
	klein sind, habe ich sie auf die Größe des Hinweistextes (label) vergrößert */
.dosierung label {
	line-height: 1.6em;
	font-size: 0.9em;
	font-weight: bold;
}
.dosierung input[type="checkbox"] {
	transform: scale(1.7);	
}
/* 	speziell für Tablets muss diese Anpassung sein, da erst bei einer Bildschirmauflösung
	von über 1440 Pixeln die Font-Größe auf 1,1-mal so groß wie die Standardgröße passt */
@media all and (min-width: 1440px) {
	.dosierung label {
		font-size: 1.1em;
	}
}
.dosierung h2 {
	display: block;
	text-align: center;
	line-height: 1.2em;
	background-color: #d6fcf3;
	border-top: 1px solid #017e62;
	border-bottom: 1px solid #017e62;
	margin-bottom: 0.2em;
}

/*	Die Medikamente, die bereits erfasst sind, werden als Liste über den Formularen der
	Medikamenteneingabe dargestellt. Auf dem Smartphone in drei Zeilen mit jeweils zwei
	Spalten:
	1. Zeile: Name und Hersteller des Medikamentes
	2. Zeile: Bild der Verpackung | Bild der Tablette
	3. Zeile: Dosierungsinformationen */
#medikamentenausgabe {
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto auto;
	grid-template-areas:  
    "ausgabe_daten ausgabe_daten"
	"ausgabe_verpackung ausgabe_tablette"
	"medikamenteneinnahme medikamenteneinnahme";
}
#medikamentenausgabe img {
	width: 98%;
	border: 1px solid #017e62;
}
#medikamentenausgabe a {
	text-decoration: none;
	color: black;
}
#medikamentenausgabe h2 {
	display: block;
	text-align: center;
	line-height: 1.2em;
	background-color: #d6fcf3;
	border-top: 1px solid #017e62;
	border-bottom: 1px solid #017e62;
	margin-bottom: 0.2em;
}
#medikamentenausgabe h3 {
	display: block;
	line-height: 1.2em;
	margin-bottom: 0.2em;
}
#medikamentenausgabe .wirkstoff {
	text-align: center;
	line-height: 1.0em;
	background-color: #d6fcf3;
	border-top: 1px solid #d6fcf3;
	border-bottom: 1px solid #017e62;
	margin: -0.3em 0 0.2em 0;
}
/*	Auf großen Bildschirmen ist die Medikamentenausgabe anders gestylt:
	es gibt zwei Zeilen mit jeweils drei Spalten:
	1. Zeile: Name und Hersteller des Medikamentes
	2. Zeile: Bild der Verpackung | Bild der Tablette | Dosierungsinformationen
	Die Bilder sollen eine feste Breite (16-fache Schriftgröße) einnehmen, der
	Rest der Zeile füllt die Dosierungsinformation aus */
@media all and (min-width: 1024px) {
	#medikamentenausgabe {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: 16em 16em auto;
		grid-template-areas:  
		"ausgabe_daten ausgabe_daten ausgabe_daten"
		"ausgabe_verpackung ausgabe_tablette medikamenteneinnahme";
	}
	#medikamentenausgabe img {
		max-width: 15em;
	}
}
#ausgabe_daten {
	grid-area: ausgabe_daten;
	margin: 1em 0 0.1em 0;
}
#ausgabe_verpackung {
	grid-area: ausgabe_verpackung;
}
#ausgabe_tablette {
	grid-area: ausgabe_tablette;
}
#medikamenteneinnahme {
	grid-area: medikamenteneinnahme;
}
/* Die Dosierungsübersicht ist eine Tabelle, welche alle Medikamente übersichtlich ausflistet */
#dosierung_uebersicht table {
	margin-top: 0.1em;
	text-align: left;
	width: 100%;
	border-top: 1px solid #2ab092;
	border-bottom: 3px solid #2ab092;
	font-size: 0.5em;
}
@media all and (min-width: 1024px) {
	#dosierung_uebersicht table {
		font-size: 1.2em;
	}
}
#dosierung_uebersicht table thead {
	font-weight: bold;
	background-color: #d6fcf3;
}
#dosierung_uebersicht table tbody tr {
	border-top: 1px solid #2ab092;
}
#dosierung_uebersicht table tbody tr:last-child {
	background-color: #d6fcf3;
}
#dosierung_uebersicht td, #dosierung_uebersicht th {
	padding: 0 1em 0 0;
}
#dosierung_uebersicht td:not(.spalte1), #dosierung_uebersicht th:not(.spalte1) {
	text-align: center;
}
#dosierung_uebersicht strong {
	text-decoration: none;
	font-weight: bolder;
}
#dosierung_uebersicht .tagausgabe_verpackung, #dosierung_uebersicht .tagausgabe_tablette {
	max-width: 5em;
	margin: 0.1em 0 0 0;
	border: 1px solid #017e62;
}
#dosierung_uebersicht td a {
	display: block;
	text-decoration: none;
	color: black;
}
@media all and (min-width: 1024px) {
	#dosierung_uebersicht .tagausgabe_verpackung, #dosierung_uebersicht .tagausgabe_tablette {
		max-width: 6em;
	}
}
.dosierung_tagesuebersicht {
	table-layout: fixed;
}
.dosierung_tagesuebersicht td{
	vertical-align: middle;
}
.rechtsbuendig{
	text-align: right !important;
}

/*	Der Drucken-Button wird gestylt und den übrigen Buttons angepasst */
#druckbutton {
	grid-area: ausgabe_daten;
	display: block;
	color: black;
	border: 1px solid #2ab092;
    font-family: helvetica;
	background-color: #d6fcf3;
	margin: 1em 0.2em 0.2em 0.2em;
	padding: 0.5em 2em 0.5em 2em;
	text-align: center;
}
#druckbutton a {
	text-decoration: none;
	color: black;
}
#druckbutton:hover {
	background-color: #9ef0de;
	cursor: pointer;
}
.fehler {
	background-color: #aed9c3;
	color: #bf3100;
	border: 1px solid #bf3100;
	padding: 0.1em;
}
content h1 {
	display: block;
	text-align: center;
	padding-top: 0.3em;
	margin-top: 0.3em;
	font-size: 1.4em;
	font-weight: bolder;
	background-color: #2ab092;
	line-height: auto;
	padding: 0.2em 2em 0.2em 2em;
	border-top: 1px solid #017e62;
	border-bottom: 1px solid #017e62;
}
content h2 {
	font-size: 1.2em;
	font-weight: bolder;
}
content h3 {
	font-size: 1.1em;
	font-weight: bolder;
}
content h4 {
	font-weight: bold;
}
content strong {
	text-decoration: underline;
}