.indent {
	padding-left: 20px; /* Du kannst den Wert anpassen */
}	
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center; /* Horizontale Zentrierung */
	align-items: center;     /* Vertikale Zentrierung */
}
body {
	font-family: 'Arial', sans-serif;
	background-color: #f4f4f9;
	color: #333;
	padding: 20px;
	overflow: hidden; /* Deaktiviert Scrollbars */
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center; /* Horizontale Zentrierung */
	align-items: center;     /* Vertikale Zentrierung */
}
body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Damit der Footer immer am Ende bleibt */
	background-color: #848484; /* Heller Hintergrund #f4f4f4;*/
	color: #333; /* Dunkle Schriftfarbe */
}
main {
	flex: 1; /* Damit der Hauptinhalt den verfügbaren Platz einnimmt */
	padding: 120px 0px; /* Platz für die feste Navigation */
	transition: padding 0.3s; /* Sanfter Übergang bei der Änderung der Padding */
	overflow-y: auto; /* Vertikal scrollen, wenn nötig */
	scrollbar-width: thin; /* Für Firefox: dünne Scrollleiste */
	scrollbar-color: #3498db #f0f0f0; /* Für Firefox: Farbe der Scrollleiste und Hintergrund */
	height: 90%;/*calc(100% - 20px);/*90%;*/
	width: 90%;
	margin: 0;
	/*display: flex;*/
	justify-content: center; /* Horizontale Zentrierung */
	align-items: center;     /* Vertikale Zentrierung */
	}
#container {
	/*display: flex;*/
	flex-wrap: wrap;
	justify-content: space-between;
	overflow-y: auto;
	height: 90%;
	overflow-y: auto; /* Vertikal scrollen, wenn nötig */
	scrollbar-width: thin; /* Für Firefox: dünne Scrollleiste */
	scrollbar-color: #3498db #f0f0f0; /* Für Firefox: Farbe der Scrollleiste und Hintergrund */
	scrollbar-width: thin; /* Für Firefox: dünne Scrollleiste */
	scrollbar-color: #3498db #f0f0f0; /* Für Firefox: Farbe der Scrollleiste und Hintergrund */
	overflow-y: auto;
}	
/* Scrollbar-Breite und Hintergrundfarbe */
::-webkit-scrollbar {
	width: 12px;  /* Breite der Scrollbar */
	background-color: #000; /* Hintergrundfarbe der Scrollbar (schwarz) */
}

#container::-webkit-scrollbar {
	width: 8px; /* Breite der Scrollleiste */
	background-color: #000; /* Hintergrundfarbe der Scrollbar (schwarz) */
}

#container::-webkit-scrollbar-track {
	background: #f0f0f0; /* Hintergrund der Scrollbar-Spur */
	border-radius: 10px; /* Runde Ecken für den Hintergrund */
}

#container::-webkit-scrollbar-thumb {
	background-color: #3498db; /* Farbe der Scrollbar */
	border-radius: 10px; /* Runde Ecken für den Scrollbalken */
	border: 2px solid #f0f0f0; /* Abstand zwischen Scrollbar und Spur */
}

#container::-webkit-scrollbar-thumb:hover {
	background-color: #2980b9; /* Dunklere Farbe beim Hover */
}	
#left {
	flex: 1;
	padding: 20px;
	margin: 10px;
	height: auto;
}
#right {
	flex: 1;
	padding: 20px;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin: 10px;
	border-radius: 10px;
	height: auto;
	display: none;
	flex-direction: column;
}
		.minimizableDiv {
	background-color: #f0f0f0;
	padding: 20px;
	margin-top: 10px;
	border: 1px solid #ccc;
	transition: height 0.3s ease, opacity 0.3s ease; /* Animation für Höhe und Transparenz */
	overflow: hidden;
	height: auto; /* Standardhöhe, wenn das div eingeblendet ist */
	flex: 1;
	padding: 20px;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	/*margin: 10px;*/
	border-radius: 10px;
	height: auto;
}

.minimizableDiv.minimized {
	height: 0;       /* Minimiert das Div komplett */
	opacity: 0;      /* Macht das Div unsichtbar */
	padding: 0;      /* Entfernt Padding im minimierten Zustand */
	border: none;    /* Entfernt den Rahmen, wenn minimiert */
}

.toggleButton {
	background-color: #1950A3;
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
	font-size: 18px;
	border-radius: 5px;
	transition: transform 0.3s ease; /* Animation für Pfeil-Rotation */
}

.toggleButton.rotated {
	font-size: 10px;
	transform: rotate(-90deg); /* Dreht den Pfeil um 180 Grad */
}	

iframe {
	width: 100%;
	height: 100%;
	border: none;
	/*border: 1px solid #ccc;*/
}
/* Das Modal wird standardmäßig ausgeblendet */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  text-align: center;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}	
element.style {
	width: 100%;
}

h1, h2 {
	margin-bottom: 20px;
}
h1 {
	font-size: 24px;
	color: #81F7E5;
}
h2 {
	font-size: 20px;
	color: #333;
}
p {
	line-height: 1.5;
}
a {
    color: #3498db; /* Standardfarbe des Links */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease; /* Sanfter Übergang bei Farbänderung */
    position: relative;
    padding-bottom: 5px;
}
a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3498db;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
a:hover {
    color: #2980b9; /* Dunklere Farbe bei Hover */
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Schatten bei Hover */
    transform: translateY(-2px); /* Leichter Schwebeneffekt */
}

label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}
.error {
	color: #FF0000;;
	font-weight: bold;
	margin-left: 5px;
}
input[type="text"], select, textarea, input[type="email"], input[type="password"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f9f9f9;
	font-size: 16px;
}
input[type="checkbox"] {
	margin-right: 10px;
}
.custom-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: middle; /* Das sorgt dafür, dass die Checkbox und der Text auf derselben Linie sind */
	position: relative; /* Für genauere Positionierung */
	top: -3px; /* Optional: Leicht nach unten verschieben, um die Ausrichtung zu verbessern */
}

.custom-label {
	display: inline-block;
	vertical-align: middle; /* Für eine bessere Ausrichtung mit der Checkbox */
	margin-right: 15px;
	line-height: 20px; /* Gleiche Höhe wie die Checkbox für vertikale Ausrichtung */
}

.checkbox-container {
	white-space: nowrap; /* Verhindert Zeilenumbruch */
}
input[type="date"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f9f9f9;
	font-size: 16px;
	transition: border-color 0.3s ease;
}
input[type="date"]:focus {
	border-color: #1950A3;
	outline: none;
}
input[type="date"]:hover {
	border-color: #1950A3;
}
input type='submit' {
    border-radius: 10px;
    padding: 10px 20px;
    background: #1950A3;
    outline: none;
    border: none;
    color: white;
    font-size: 16px;
}	

button {
    border-radius: 10px;
    padding: 10px 20px;
    background: #1950A3;
    outline: none;
    border: none;
    color: white;
    font-size: 16px;
}
button {
	padding: 10px 20px;
	background-color: #1950A3;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}
button:hover {
	background-color: #163f86;
}
/* Submit Button */
.submit-button {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit-button:hover {
    background-color: #2980b9;
}
.submit-button:active {
    background-color: #2471a3;
}
	
button.button_link {
    color: #3498db; /* Standardfarbe des Links */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease; /* Sanfter Übergang bei Farbänderung */
    position: relative;
    padding-bottom: 5px;
	background: none;
	cursor: pointer;
}
button.button_link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3498db;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
button.button_link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
button.button_link:hover {
    color: #2980b9; /* Dunklere Farbe bei Hover */
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Schatten bei Hover */
    transform: translateY(-2px); /* Leichter Schwebeneffekt */
}
select {
  width: 100%;
  padding: 14px 10px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}


.styled-list {
	list-style-type: disc; /* Standard Aufzählungszeichen (bullets) */
	padding-left: 20px; /* Abstand zum linken Rand für die Bullets */
	margin: 20px 0; /* Abstand oben und unten */
}
.info-icon {
  background-color: blue; /* Hintergrundfarbe des Kastens */
  color: white; /* Farbe des ? */
  border-radius: 50%; /* Runder Kasten */
  padding: 5px 10px; /* Abstände */
  text-decoration: none; /* Entfernt Unterstreichung bei Links */
  font-weight: bold; /* Fettschrift für das ? */
  font-size: 16px; /* Größe des ? */
  display: inline-block; /* Damit es neben dem Text bleibt */
  margin-left: 10px; /* Abstand zum Text */
}

.info-icon:hover {
  background-color: darkblue; /* Änderung der Farbe beim Hover-Effekt */
  cursor: pointer; /* Zeigt den Zeiger bei Hover an */
}		

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #F78181; /* Hintergrundfarbe der Navigation */
	padding: 15px 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten für die Navbar */
	transition: padding 0.3s; /* Sanfter Übergang bei der Änderung der Größe */
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
}
.navbar.shrink {
	padding: 15px 20px; /* Kleinere Padding bei Scroll zur Zeit deaktiviert*/
}

.logo {
	color: white;
	font-size: 24px;
	font-weight: bold; /* Fettere Schrift für das Logo */
	transition: font-size 0.3s; /* Sanfter Übergang für die Schriftgröße */
}

img {
  height: 30px; 
}	

/* Stil für das Eingabefeld */
input.Patient {
	width: 100%;
	padding: 0px;
	margin-bottom: 0px;
	border: none; /* Kein Rahmen */
	outline: none; /* Keine Umrandung beim Fokussieren */
	font-size: 24px; /* Gleiche Schriftgröße wie das Logo */
	color: #3498db; /* Gleiche Schriftfarbe wie das Logo */
	width: 50px; /* Passt sich dem Text an */
	padding: 0; /* Kein Innenabstand */
	margin: 0; /* Kein Außenabstand */
	text-align: left; /* Textausrichtung */
	display: flex;
	background: none;
	background-color: #F78181; /* Hintergrundfarbe der Navigation */
}
.nav-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center; /* Vertikale Ausrichtung der Menü-Punkte */
}

.nav-list li {
	margin: 0 20px; /* Mehr Platz zwischen den Menü-Punkten */
}

.nav-list a {
	color: white;
	text-decoration: none;
	padding: 10px 15px; /* Padding für besseren Hover-Effekt */
	border-radius: 5px; /* Abgerundete Ecken für die Links */
	transition: background-color 0.3s, transform 0.3s; /* Sanfte Übergänge */
}

.nav-list a:hover {
	background-color: #848484; /* Hintergrundfarbe beim Hover */
	transform: translateY(-2px); /* Leichte Anhebung beim Hover */
}
.nav-list a:hover::after {
	transform: scaleX(0); /* Keine Veränderung */
}

.menu-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
	margin-right: 40px; /* Abstand vom linken Rand */
}

.bar {
	height: 3px;
	width: 25px;
	background-color: white;
	margin: 4px 0;
	transition: background-color 0.3s; /* Sanfter Übergang für die Balken */
}
/* Responsive adjustments */
@media (max-width: 768px) {
	#container {
		flex-direction: column;
	}
	.nav-list {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 60px;
		left: 0;
		background-color: #F78181; /* Hintergrundfarbe für mobiles Menü */
		border-top: 1px solid rgba(255, 255, 255, 0.3); /* Leichter oberer Rand */
	}

	.nav-list.active {
		display: flex;
	}

	.menu-toggle {
		display: flex;
	}

	.nav-list li {
		margin: 15px 0; /* Vertikaler Abstand in der mobilen Ansicht */
		text-align: center; /* Zentrierte Texte für mobile Ansicht */
	}
}

/* Footer-Styling */
.footer {
	background-color: #F78181; /* Hintergrundfarbe des Footers */
	color: white;
	text-align: center;
	padding: 20px 0;
	position: fixed; /* Footer bleibt immer sichtbar */
	bottom: 0; /* Am unteren Rand des Viewports */
	width: 100%; /* Vollständige Breite */
	z-index: 100; /* Sicherstellen, dass der Footer über dem Inhalt bleibt */
}
.Patienten {
    border: 1px solid #ddd;
    max-height: 150px;
    max-width: 50%;
	overflow-y: auto;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1000;
	top: 100%
	scrollbar-width: thin; /* Für Firefox: dünne Scrollleiste */
	scrollbar-color: #3498db #f0f0f0; /* Für Firefox: Farbe der Scrollleiste und Hintergrund */
	scrollbar-width: thin; /* Für Firefox: dünne Scrollleiste */
	scrollbar-color: #3498db #f0f0f0; /* Für Firefox: Farbe der Scrollleiste und Hintergrund */

}

.suggestions {
    border: 1px solid #ddd;
    max-height: 150px;
    overflow-y: auto;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1000;
	width: 50%;
}
.suggestion-item {
    padding: 10px;
    cursor: pointer;
}
.suggestion-item:hover,
.suggestion-item.active {
    background-color: #f0f0f0;
}
.selected-item {
    display: inline-block;
    margin: 3px;
    cursor: move;
	padding: 10px;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f0f0f0;
	font-size: 16px;
}
.remove-item {
    color: red;
    cursor: pointer;
    margin-left: 5px;
}
#search {
	width: 100%;
	padding: 10px;
	/*border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f9f9f9;*/
	font-size: 16px;
}

#selectedItems {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    min-height: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
	background-color: #f9f9f9;
	font-size: 16px;
	margin-bottom: 20px;
}
/* OTP */

/* Stil für das OTP-Formular */
.otp-form {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    max-width: 300px;
    background-color: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.otp-input-container {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

/* Stil für die einzelnen OTP-Input-Felder */
.otp-input {
    width: 40px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.otp-input:focus {
    border-color: #3498db;
    box-shadow: 0px 0px 5px rgba(52, 152, 219, 0.5);
    outline: none;
}
/* OTP Ende*/