/*****   0    -   T A B L E   O F   C O N T E N T S   *****/
/***********************************************************
1	Google Fonts			Import and define Google fonts
2	Login                   Style for login.php
3   Messages & Error        Style the error messages for failed forms
4   Basic                   Grid style for header, main and footer and basic text style
5   Navigation              Main navigation bar in header.php
6   Tiles                   Layout for all tiles
7   Links                   Basic style for links
8   Customer Table          for customer/overview.php
9	Progressbar				Progressbar Design for add and edit forms
10	Add forms				for custoner and dogs
11  Customer Details     	for customer/details.php
12  Dog Table               for dogs/overview.php (also works in customer/details.php)
13	Dog Details
14 	Calendar

************************************************************/

/*****   1    -   G O O G L E    F O N T S   *****/
/* lato-100 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/lato-v15-latin_latin-ext-100.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline'), local('Lato-Hairline'),
       url('/fonts/lato-v15-latin_latin-ext-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-100.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-100.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/lato-v15-latin_latin-ext-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('/fonts/lato-v15-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-300italic - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/lato-v15-latin_latin-ext-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
       url('/fonts/lato-v15-latin_latin-ext-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-100italic - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/lato-v15-latin_latin-ext-100italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
       url('/fonts/lato-v15-latin_latin-ext-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-100italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lato-v15-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('/fonts/lato-v15-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lato-v15-latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
       url('/fonts/lato-v15-latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lato-v15-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('/fonts/lato-v15-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700italic - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/lato-v15-latin_latin-ext-700italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('/fonts/lato-v15-latin_latin-ext-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-700italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/lato-v15-latin_latin-ext-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
       url('/fonts/lato-v15-latin_latin-ext-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-900.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900italic - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/lato-v15-latin_latin-ext-900italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Black Italic'), local('Lato-BlackItalic'),
       url('/fonts/lato-v15-latin_latin-ext-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v15-latin_latin-ext-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-900italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v15-latin_latin-ext-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v15-latin_latin-ext-900italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/*****   2    -   L O G I N   *****/
.loginPage {
	margin: auto;
	margin-top: 70px;
	width: 350px;
	border: 3px solid #009e71;
	padding: 10px;
}

.logoBig {
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
}

.containerLabelInput {
	display: grid;
	grid-template-columns: 40% 60%;
	padding-bottom: 5px;
}

.myLabel {
	font-size: 16px;
	font-family: Lato;
	color: black;
}

.containerButtonRight {
	text-align: right;
}

.myButton {
	width: 100px;
	padding: 7px;
	font-family: Lato;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #7e65aa;
	background: white;
	border-color: #7e65aa;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.myButton:hover {
	color: white;
	border-color: #7e65aa;
	background: #7e65aa;
}

/*****   3    -   M E S S A G E   &   E R R O R   *****/
.messageContainer {
	width: 600px;
	margin: auto;
	padding-top: 20px;
}

.error {
	border: 3px solid #ff2828;
	padding: 5px;
	margin-bottom: 10px;
	font-family: Lato;
	font-size: 16px;
}

.message {
	border: 3px solid #0bbd00;
	padding: 5px;
	margin-bottom: 10px;
	font-family: Lato;
	font-size: 16px;
}

@media screen and (max-width: 500px) {
	.messageContainer {
		width: 330px;
	}
}

/*****   4    -   B A S I C   *****/
.grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 5vw minmax(35vw, auto) 5vw;
  grid-template-areas: "Header" "Main" "Footer";
}

.Footer { 
	grid-area: Footer; 
}

.Header { 
	grid-area: Header; 
	background: #f9f7f4;
	margin: -9px;
	padding: 9px;
}

.Main { 
	grid-area: Main; 
}

.content {
	font-size: 16px;
	font-family: Lato;
	color: black;
}

.basicForm {
	width: 600px;
	margin: auto;
}

.formsButton { /*TODO: addEntryButton kann durch diesen hier ausgetauscht werden!*/
	width: 200px;
	padding: 7px;
	font-family: Lato;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #7e65aa;
	background: white;
	border-color: #7e65aa;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.formsButton:hover {
	color: white;
	border-color: #7e65aa;
	background: #7e65aa;
}

/*****   5    -   N A V I G A T I O N   *****/
.logo {
	display: none;
}

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

.menu-toggle {
  display: inline-block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
  color: #000000 !important;
}

.main-menu {
  position: absolute;
  display: none;
  left: -200px;
  top: 0;
  height: 100%;
	overflow-y: scroll;
	overflow-x: visible;
	transition: left 0.3s ease, box-shadow 0.3s ease;
	z-index: 999;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 2.5em 0 0;
  -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: #f9f7f4;
}

.main-menu a {
  display: block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 20px;
  font-family: Lato;
  color: #000000 !important;
  text-decoration: none;
  
}

.main-menu li a {
	border-bottom: 1px solid #ffffff;
}

.main-menu a:hover,
.main-menu a:focus {
  background: #009e71;
} 

.main-menu .menu-close {
  position: absolute;
  right: 0;
  top: 0;
} 

.main-menu:target,
.main-menu[aria-expanded="true"] {
  display: block;
  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);
}

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

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

.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
  position: absolute;
  display: block;  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #000;
  background: rgba(0,0,0,.85);
  cursor: default;
}

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

@media (min-width: 1250px) {
	.navigation { 
		display: grid;
		grid-template-columns: 270px auto;
	} 
	
	.menu-toggle,
	.main-menu .menu-close {
		display: none;
	}
  
	.logo {
		display: inherit;
		text-align: center;
		padding-bottom: 20px;
	}
  
	.main-menu {
		position: relative;
			left: auto;
			top: auto;
			height: auto;
		display: block;
		overflow-y: hidden;
	}
  
	.main-menu ul {
		display: flex;
		align-items: center;
		justify-content: end;
		padding: 0;
		-webkit-box-shadow: none;
			-moz-box-shadow: none;
				box-shadow: none;
		height: auto;
		width: auto;
		background: none;
	}
  
	.main-menu a {
		color: #000000;
		border: 0 !important; 
	}
  
	.main-menu a:hover,
	.main-menu a:focus {
		background: none; 
		color: #009e71;
	}
}

/*****   6    -   T I L E S   *****/
.tileContainer {
	display: flex;
	justify-content: space-evenly;
	width: 50%;
	margin: auto;
	padding: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.tile {
	width: 200px;
	height: 100px;
	text-align: center;
}

div.tile a {
	display: inherit;
	padding: 20px;
	font-family: Lato;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #7e65aa;
	background: white;
	border-color: #7e65aa;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	border: 3px solid #7e65aa;
}

div.tile a:hover {
	color: white;
	border-color: #7e65aa;
	background: #7e65aa;
}

.search {
	border: 3px solid #7e65aa;
	padding: 16px 0px;
	font-size: 16px;
	font-family: Lato;
	font-weight: bold;
	color: #7e65aa;
	text-transform: uppercase;
}

.searchInput {
	width: 180px;
	margin-top: 5px;
}

/*****   7    -   L I N K S   *****/
a:link {
	text-decoration: none;
	color: #7e65aa;
}

a:visited {
	text-decoration: none;
	color: #7e65aa;
}

a:hover {
	text-decoration: none;
	color: #7e65aa;
}

a:active {
	text-decoration: none;
	color: #7e65aa;
}  


/*****   8    -   C U S T O M E R   T A B L E   *****/
.headerTable {
	background-color: #009e71;
	color: white;
	font-size: 1.5em;
	padding: 1rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

.tableCustomers {
	border: 1px solid #009e71;
	border-radius: 10px;
	max-width: 80%;
	margin: 1em auto;
	overflow: hidden;
}

.tableCustomers table {
	width: 100%;
}

.tableCustomers th {
	padding: 20px 15px;
	text-transform: uppercase;
	background-color: #009e71;
	color: white;
} 

.tableCustomers tr:nth-child(even) {
	background-color: #f2f2f2;
}

.tableCustomers td {
  padding: 15px;
  border-bottom: 0px;
  text-align: center;
  color: black;
} 

@media screen and (max-width: 900px) {   
	table, tr, td { 
		display: block; 
	}

	td {
		clear: both;
		margin-left: 100px;
		padding: 4px 4px 4px 4px;
		text-align: left;
	}
		
	td:before{
		color: #009e71;
		content: '';
		display: block;
		left: 0;
		position: absolute;
		margin-left: 20px;
	}
		
	.tableCustomers td:nth-child(1):before {
		content: 'Kundennr:'; 
	}
	.tableCustomers td:nth-child(2):before {
		content: 'Name:'; 
	}
	.tableCustomers td:nth-child(3):before {
		content: 'Telefon:'; 
	}
	.tableCustomers td:nth-child(4):before {
		content: 'Mobil:'; 
	} 
	.tableCustomers td:nth-child(5):before {
		content: 'E-Mail:'; 
	} 
	.tableCustomers td:nth-child(6):before {
		content: 'Aktionen:'; 
	} 

	tr {
		padding: 10px 0;
		position: relative;
		width: 800px;
	}

	tr:first-child {
		display: none;
	}
}  

@media screen and (max-width: 500px) {
	.headerTable {
		background-color: transparent;
		color: #009e71;
		font-size: 2em;
		font-weight: 700;
		padding: 0;
		text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
	}

	td {
		margin: 0;
		padding: 5px 1em;
		width: 100%
	}	
	
	td:before {
		font-size: 0.8em;
		padding-top: 0.3em;
		position: relative;
		margin: 0;
	}
		
    td:last-child {
		padding-bottom: 1rem !important;
	}
       
	tr {
		background-color: white !important;
		border: 1px solid #009e71;
		border-radius: 10px;
		margin: 0.5rem 0;
		padding: 0;
		width: 250px;
	}
	
	.tableCustomers { 
		border: none; 
		box-shadow: none;
		overflow: visible;
   }
}

/*****   9    -   P R O G R E S S B A R   *****/
.progressBarContainer {
	width: 100%;
	height: 70px;
}

.progressBar {
	counter-reset: step;
	display: flex;
	justify-content: space-evenly;
}

.progressBar li {
	list-style-type: none;
	float: left;
	position: relative;
	text-align: center;
	width: 33%;
}

.progressBar li:before {
	content: counter(step);
	counter-increment: step;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #f2f2f2;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: white;
}

.progressBar li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #f2f2f2;
	top: 15px;
	left: -50%;
	z-index: -1;
}

.progressBar li:first-child:after {
	content: none;
}

.progressBar li.active {
	color: #009e71;
	font-weight: bold;
}

.progressBar li.active:before {
	border-color: #009e71;
}


/*****   10    -   A D D   F O R M S   *****/
.newEntryForm {
	width: 600px;
	margin: auto;
	padding-top: 20px;
}

.addEntryButton {
	width: 200px;
	padding: 7px;
	font-family: Lato;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #7e65aa;
	background: white;
	border-color: #7e65aa;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.addEntryButton:hover {
	color: white;
	border-color: #7e65aa;
	background: #7e65aa;
}

.containerLabelInput {
	display: grid;
	grid-template-columns: 30% 70%;
	padding-bottom: 5px;
}

.containerLabelInput input {
	width: 100%;
}

.myLabel {
	font-size: 16px;
	font-family: Lato;
	color: black;
}

.containerButtonRight {
	text-align: right;
}

.myButton {
	width: 100px;
	padding: 7px;
	font-family: Lato;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #7e65aa;
	background: white;
	border-color: #7e65aa;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.myButton:hover {
	color: white;
	border-color: #7e65aa;
	background: #7e65aa;
}

@media screen and (max-width: 500px) {
	.newEntryForm {
		width: 330px;
	}
}

/*****   11    -   C U S T O M E R   D E T A I L S   *****/
.customerDetailsContainer {
	display: flex;
	flex-flow: row wrap;
	padding-left: 20%;
	padding-right: 20%;
}

.customerDetailsTable {
	border: 1px solid #009e71;
	border-radius: 10px;
	margin: 1em auto;
	overflow: hidden;
}

.customerDetailsTable table {
	width: 400px;
	padding: 10px;
}


.customerDetailsHeaderTable {
	background-color: #009e71;
	color: white;
	font-size: 16px;
	padding: 1rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

/*****   12    -   D O G   T A B L E   *****/
.tableDogs {
	border: 1px solid #009e71;
	border-radius: 10px;
	max-width: 80%;
	margin: 1em auto;
	overflow: hidden;
	width: 1000px;
}

.tableDogs table {
	width: 100%;
}

.tableDogs th {
	padding: 20px 15px;
	text-transform: uppercase;
	background-color: #009e71;
	color: white;
} 

.tableDogs tr:nth-child(even) {
	background-color: #f2f2f2;
}

.tableDogs td {
  padding: 15px;
  border-bottom: 0px;
  text-align: center;
  color: black;
} 

.tableDogs img {
	border-radius: 50%;
	height: 60px;
	width: 60px;
}  

@media screen and (max-width: 900px) {  
	.tableDogs td:first-child {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100px;
		margin-left: 10px;
	} 

	.tableDogs td:not(:first-child) { 
		clear: both;
		margin-left: 100px;
		padding: 4px 20px 4px 90px;
		position: relative;
		text-align: left;
	}
		
	.tableDogs td:not(:first-child):before { 
		color: #009e71;
		content: '';
		display: block;
		left: 0;
		position: absolute;
		margin-left: 0px;
	}

	.tableDogs td:nth-child(2):before {
		content: 'Name:'; 
	}
	.tableDogs td:nth-child(3):before {
		content: 'Rasse:'; 
	} 
	.tableDogs td:nth-child(4):before {
		content: 'Besitzer:'; 
	} 
	.tableDogs td:nth-child(5):before {
		content: 'Aktionen:'; 
	} 
}  

@media screen and (max-width: 500px) {
	.tableDogs img {
		border: 3px solid;
		border-color: #009e71;
		height: 100px;
		margin: 0.5rem 0;
		width: 100px;
		margin-left: 60px;
	} 
   
	.tableDogs td:first-child {
		background-color: #009e71;
		border-radius: 10px 10px 0 0;
		position: relative;
		top: 0;
		transform: translateY(0);
		width: 87%;
		margin: 0;
	} 
   
	.tableDogs td:not(:first-child) { 
		margin: 0;
		padding: 5px 1em;
		width: 100%
	}	
	
	.tableDogs td:not(:first-child):before {
		font-size: 0.8em;
		padding-top: 0.3rem;
		position: relative;
	}
	
	.tableDogs { 
		border: none; 
		box-shadow: none;
		overflow: visible;
	}
}

/*****   13    -   D O G   D E T A I L S   *****/
.dogProfileContainer {
	display: flex;
	flex-flow: row wrap;
	padding-left: 20%;
	padding-right: 20%;
}

.dogDetailsTable {
	border: 1px solid #009e71;
	border-radius: 10px;
	margin: 1em auto;
	overflow: hidden;
}

.dogDetailsTable table {
	width: 400px;
	padding: 10px;
}

.dogDetailsTable img {
	max-width: 378px;
}

/*****   14    -   C A L E N D A R   *****/
.myCalendar {
	border: 1px solid black;
}

.myCalendar th {
	border: 1px solid black;
	padding: 5px;
}

.myCalendar td {
	border: 1px solid black;
	padding: 5px;
}

.calendarEntryContainer {
	display: flex;
	justify-content: space-around;
}

.calendarEditIcon {
	padding-top: 12px;
}

/*****   14    -   C A L E N D A R   *****/