.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 20px;
	justify-items: center;
	align-items: flex-start;
	align-content: flex-start;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%; /* Set a maximum width for the container */
	padding: 0 15px; /* Add horizontal padding to create space from left and right sides */
}

/* Material box styles */
.material-box {
	flex: 1 0 380px;
	min-width: 380px;
	/*max-width: 400px;*/
	position: relative;
	background-color: #fafafa;
	padding: 16px;
	border-radius: 4px;
	font-family: 'Roboto', sans-serif;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

.material-box.wider {
grid-column: span 2; /* Adjust the width as per your requirement */
width:100%;
}

.material-box.window {
 margin: 0 auto;
 width:100%;
 overflow-y: auto;
      max-height: 600px;
}


.material-box h2 {
	font-size: 20px;
	color: #333;
	margin-top: 0;
}

.material-box img {
	vertical-align: middle;
}
/* Event list table styles */
.event-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.event-table th, .event-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.event-table th {
  background-color: #f2f2f2;
}

/* Animation for fading in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Apply the animation to the newly added row */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}


.box-footer {
	position: absolute;
	bottom: 8px;
	right: 8px;
	color: #999;
}

.material-box p {
	color: #666;
}

.tab-container
{
	width: 95%;
	margin-left: auto;
margin-right: auto;
	 padding: 0 20px;
	 
}


 /* Style the tab */
.tab {
  overflow: hidden;
	background-color: #f6f6f6;
	padding: 16px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	display: flex;
	/*width:100%;*/
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #e6e6e6;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
 /*display: none;*/
  padding: 16px;
  /*border: 1px solid #ccc;*/
  border-top: none;
  /*background-color: #fafafa;*/
  font-family: 'Roboto', sans-serif;
  /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);*/
  /*width: 100%;*/
  /*margin-top: 16px;
	*/

} 

.tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
	z-index:1;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

		/* Base styles for the switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

/* Styles for the switch input */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mapview
{
	height: 600px;
	width: 100%;
	
}

/* Styles for the switch slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 22px;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
tap-highlight-color: transparent; /* Disable tap highlight */
vertical-align: middle;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Styles for the switch slider when checked */
input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(16px);
}

.loader-container {
  display: inline-flex;
  align-items: center;
  gap:5px;
}
.loader {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #2196F3; /* Change this to your desired color */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin
}

@keyframes spin {
  0% {
	transform: rotate(0);
  }
  100% {
	transform: rotate(360deg);
  }
}

.material-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #f5f5f5; /* Change this to your desired color */
  color: #2f71c2;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
  transition: background-color 0.1s, box-shadow 0.1s;
}

.material-button:hover {
  background-color: #f1f1f1; /* Change this to your desired hover color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.17);
}

.material-button:focus {
  outline: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.17), 0 0 0 2px #2196F3;
}

.material-button:active {
  background-color: #1565C0; /* Change this to your desired active color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17);
  color: #f1f1f1;
}


input[type="email"]{
	padding: 2px 2px;
	font-size: 14px;
	font-weight: lighter;
	#border-radius: 5px;
	#border: 2px solid-black;
}
input[type="password"]{
	padding: 2px 2px;
	font-size: 14px;
	font-weight: lighter;
	#border-radius: 5px;
	#border: 2px solid-black;
}

input[type="submit"]{
	padding: 2px 2px;
	font-size: 18px;
	font-weight: lighter;
	background-color: #04AA6D;
  color: white;
	
}

input[type="text"] {
  /* font-size: 22px; */
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  border-radius: 4px;
  border: none;
  border: 2px solid #2196F3;
  outline: none;
  font-size: 16px;
  color: #333;
  transition: border-color 0.3s;
}


input[type="button"]{
	background-color: F0F8F;
	color: 69696;
	font-size: 18px;
	font-weight: lighter;
	border-radius: 5px;
}


/* Äußere Box des Datumsfeldes */
input[type="date"] {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: sans-serif;
}

/* Hover- und Focus-Stil des Datumsfeldes */
input[type="date"]:hover,
input[type="date"]:focus {
  border-color: #999;
}

/* Deaktivierter Zustand des Datumsfeldes */
input[type="date"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
   border-radius: 10px;
  border: 2px solid black;
  max-width:96%;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15)
}

a:link {
  color: #2f71c2;

  text-decoration: none;
}

/* visited link */
a:visited {
  color: #2660a6;
  text-decoration: none;
}

/* mouse over link */
a:hover {
	  color: #a8a8a8;
}

/* selected link */
a:active {
  color: #a8a8a8;
}

.gps {
  overflow: hidden;
 # background-color: #333;
  position: relative;
  # border-radius: 10px;
  #border: 2px solid black;
  font-size : 20px;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

#myLinks a {
  font-size: 24px;
}


/* Style navigation menu links */
.topnav a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 85px;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}


/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  padding: 10px 35px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}
body
{
	margin:0;
}

/* Apply basic styles to the header */
.header {
 background-color: #dfdfdf; /* Replace with your desired background color */
  color: #151515; /* Replace with your desired text color */
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Create a container to hold the content cells */
.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 100px; /* Adjust as needed */
}

/* Style each content cell */
.content-cell {
  flex-grow: 1;
  padding: 8px; /* Adjust as needed */
  align-items: center;
}
.logotext
{
	font-family: 'Roboto Mono', monospace;
	font-size:28px;
}
.content-cell img
{
  margin-right: 8px; /* Adjust as needed */
  vertical-align: middle;
}
.header-text {
	color: #202020;
  font-size: 20px; /* Adjust as needed */
  vertical-align: middle;
}

.webcontent
{
	margin:8px;
}



@media (max-width: 767px) {
.logotext
{
	font-size:24px;
}
.logo
{
	align-self:center;
}
.topnav
{
	max-width:98%;
	
}
.topnav a {
  
  padding: 10px 35px;
  font-size: 26px;

}
.material-box.window {
 margin: 0 auto;
 width:100%;
 overflow-y: auto;
      max-height: 75%;
}

.mapview
{
	height: 400px;
	width: 100%;
	
}

#myLinks a {
  font-size: 20px;
}

  .header-container {
    flex-direction: column;
	padding: 12px 8px;
	align-items: flex-start;
  }
  
  .content-cell img
{
	max-width: 32px;
	max-height:32px;
}

  .content-cell {
    margin-bottom: 16px; /* Adjust as needed */
  }
  
	.header-text {
		color: #202020;
		font-size: 16px; /* Adjust as needed */
		vertical-align: middle;
	}
  
  .grid-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: auto;
		margin-right: auto;
		/*padding: 0 calc((100% - 380px) / 2);*/ /* Adjust the padding calculation */
		padding: 0 10px;
		max-width: 100%;
	}

	.tab-container {
		width: 100%;
		max-width: 380px; /* Adjust the maximum width as needed */
		margin: 0 auto; /* Center the container horizontally */
		padding: 0;
		box-sizing: border-box; /* Include padding in width calculation */
	}
	.tabcontent
	{
		padding:2px;
	}
	.tab {
		justify-content: flex-start; /* Adjust alignment of tab buttons */
	}
	.material-box {
		min-width:0;
		width: 100%;
		max-width: 100%;
	}
	 .material-box.wider {
        flex: 1 0 calc(100% - 10px); /* Subtract single padding from the available width */
      }

}