html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0;
    font-family: Arial,Helevetica;
    font-weight: 300;
}
body {
	min-width: 16em;
	max-width: 85em;

}

/* Hintergrundbild nur wenn nicht eingeloggt */
html.not-logged-in,
body.not-logged-in {
	background-image: url('../pics/rhizome.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	min-height: 100vh;
	height: 100%;
	margin: 0;
	padding: 0;
}
#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

header { 
	 /* background: #0B3B0B; */
	min-width: 85em;
	max-width: 85em;
	min-height: 10em;
 
    /* Hintergrundbild */
	background-image: url('../pics/regal.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top; /* Nur horizontal zentriert, vertikal oben */
    /* border-color: #0B3B0B; */
    border-color: #0B0B3B;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 0px;
    padding: 5px;
    border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px white, 0 0.2em   0.4em  white;
    /*visibility: hidden;*/
    position: fixed;
    /* Für Pseudo-Element */
    overflow: hidden;
    }
    
/* Durchscheinende Farbe über dem Hintergrundbild */
header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(11, 11, 59, 0.8); /* #0B0B3B mit 90% Deckkraft */
	border-radius: 0.5em 0.5em 0.5em;
	z-index: 0;
	pointer-events: none; /* Ermöglicht Klicks durch das Overlay */
}

/* Header-Inhalt über dem Overlay */
header > * {
	position: relative;
	z-index: 1;
}
header input[type = submit]{ 
	background: #FF8000;
	color: #0B0B3B;
	border: 1px solid;
	border-color: #FF8000;
	padding: 5px 5px 5px 5px;
	text-shadow: 2px 2px 3px #0B3B0B;
	border-radius: 0.5em 0.5em 0.5em;
	box-shadow: 1px 0px 1px #FF8000, 0 0.2em   0.4em  #FF8000;
}
header form { display: inline; }
header h1 {
	font-size: 16pt;
	color: #FF8000;
	text-shadow: 3px 3px 4px #FF8000 ;
}
header h2 {
	font-size: 14pt;
	color: #FF8000;
	text-shadow: 3px 3px 4px #FF8000 ;
}
header h3 {
	font-size: 12pt;
	color: #FF8000;
	text-shadow: 3px 3px 4px #FF8000 ;
}
header img {
	/* width: 150px; */
	margin-right: 50px;
	float: left;
}
/*VIEWPORT: SMART */
header ul {
  display: table;
  width: 500px;
}

header li {
  display: table-cell;
  table-layout: fixed;
  border-spacing: 5px;
  padding-left: 10px;
  padding-right: 10px;

}
subheader { 
	 /* background: #0B3B0B; */
	min-width: 85em;
	max-width: 85em;
 
    /* Hintergrundbild */
	/* background-image: url('../pics/Metropolenstreik.png');*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
    /* border-color: #0B3B0B; */
    border-color: #0B0B3B;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 90px;
    padding: 5px;
    border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px white, 0 0.2em   0.4em  white;
    /*visibility: hidden;*/
    position: fixed;
    /* Für Pseudo-Element */
    overflow: hidden;
    }
    
/* Durchscheinende Farbe über dem Hintergrundbild */
subheader::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(11, 11, 59, 0.05); /* #0B0B3B mit 90% Deckkraft */
	border-radius: 0.5em 0.5em 0.5em;
	z-index: 0;
	pointer-events: none; /* Ermöglicht Klicks durch das Overlay */
}

/* Subheader-Inhalt über dem Overlay */
subheader > * {
	position: relative;
	z-index: 1;
}
 subheader ul {
  display: table;
  width: 500px;
}

subheader li {
  display: table-cell;
  table-layout: fixed;
  border-spacing: 5px;
  padding-left: 10px;
  padding-right: 10px;

}

/*VIEWPORT: SMART */
legend { font-weight: bold;}
#mehrspaltig {
	 margin-left: 55px;
	 margin-top: 225px;
    flex: 1; 
    display: flex; 
    flex-direction: row; 
	 background-color: white;
	 border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em   0.4em  #0B3B0B; 
   
}
/* ELEMENT NAV */
nav { 
    flex: 1;
    background-color: white;
    margin: 10px;
    padding: 10px;
}
nav ul {
	padding: 0;
}

nav li {
	list-style: none;
	margin: 0;
	padding: 0.5em;
}

nav a {
	display: block;
	padding: 0.2em 10px;
	font-weight: bold;
	text-decoration: none;
	background-color: #F5D0A9;
	color: #333;
}

nav ul a:hover,
nav ul a:active {
	color: #fffbf0;
	background-color: #dfac20;
	;
}
nav input[type = submit]{ 
	background: #F3E2A9;
	color: #0B3B0B;
	border: 1px solid;
	border-color: #0B3B0B;
	padding: 5px 5px 5px 5px;
	text-shadow: 3px 3px 4px #0B3B0B;
	border-radius: 0.5em 0.5em 0.5em;
}
/* ELEMENT NAV */
/* ELEMENT ARTICLE */
article { 
    flex: 5; 
    background-color: white;
    margin-left:0px;
    padding: 10px;
    border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em   0.4em  #0B3B0B;
  }
article input[type = search]{ 
background: #0B0B3B;
color: #ff8000;
border: 1px solid;
border-color: white;
box-shadow: inset 0 0 0.5em white;
border-radius: 0.5em 0.5em 0.5em;
padding: 3px 3px 3px 3px;
}
article input[type = text]{ 
/* background: #0B3B0B;*/
/* color: #ff8000; */
border: 1px solid;
border-color: black;
border-radius: 0.5em 0.5em 0.5em;
}
article textarea  { 
/* background: #0B3B0B;*/
background: #0B0B3B;
font-family: Helvetica;
color: #ff8000;
height: 10em;
width: 45em;
border: 1px solid;
border-color: black;
border-radius: 0.5em 0.5em 0.5em;
}
article textarea:focus { 
font-family: Helvetica;
font-style: italic;
background: #0B0B3B;
/* color: #ff8000; */
color: yellow;
}
article input[type = text]:focus { 
background: #0B0B3B;
color: #ff8000; 
}
article input[type = submit]{ 
/* background: #ff8000; */
color: #0B0B3B;
border: 1px solid;
border-color: #0B0B3B;
/* padding: 5px 5px 5px 5px;*/
display: inline-table; 
}
article label { 
font-style: italic;
vertical-align: top;
padding-left: 10px;
padding-right: 10px;
}
article fieldset {
	border: 1px solid;
	border-color: #0B3B0B;
	}
/*VIEWPORT: ALL */
article ul {
  display: table;
  /*width: 350px; */
  }
article li {
  display: table-cell;
  border-spacing: 5px;
  padding-left: 10px;
} 
/*VIEWPORT: ALL */
/* ELEMENT ARTICLE */
details {
	color:black;
	background-color: #F6E3CE;
}
summary {
	color:black;
	background-color: white;
	list-style-image: url('../pics/expand-orange-small.png');
}
fieldset {
margin-bottom: 10px;
}

tbody {
	font-weight: 100;
	font-family: Arial,Helevetica;
	text-align: left;
	}
tbody tr,th {
	padding: 5px;	

}

aside { 
	flex: 1;
	background-color: white;
	margin: 10px;
   padding: 10px;
   border-radius: 0.5em 0.5em 0.5em;
   box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em   0.4em  #0B3B0B; 
}

footer { 
	 /* background: #0B3B0B; */
	min-width: 85em;
	max-width: 85em;
	min-height: 10em;
 
    /* Hintergrundbild */
	background-image: url('../pics/regal.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom; /* Nur horizontal zentriert, vertikal oben */
    /* border-color: #0B3B0B; */
    border-color: #0B0B3B;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px white, 0 0.2em   0.4em  white;
    color: white;
    /* Für Pseudo-Element */
    position: relative;
    overflow: hidden;
    }
    
/* Durchscheinende Farbe über dem Hintergrundbild */
footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(11, 11, 59, 0.8); /* #0B0B3B mit 80% Deckkraft */
	border-radius: 0.5em 0.5em 0.5em;
	z-index: 0;
	pointer-events: none; /* Ermöglicht Klicks durch das Overlay */
}

/* Footer-Inhalt über dem Overlay */
footer > * {
	position: relative;
	z-index: 1;
}
#toolbox {
	flex: 1;
	display: flex;
	flex-direction: row; 
	margin: 27px 27px 0px 27px;
	background: limegreen;
	border-radius: 0.5em 0.5em 0.5em;
	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em   0.4em  limegreen; 
}
/*-> Klassen Suchformular*/
.searchform form {
	display: inline; 
	}
.lockBut input[type=submit] {
				width:30px;
				height: 30px;
				color: transparent;
				background-repeat: no-repeat;
				background-color: transparent;
				border: 0px;

			}
.lockBut input[type=submit]:hover {
				width:150px;
				height: 30px;
				background-repeat: no-repeat;
				background-color: white;
				color: black;
				border: 0px;
			}
/* <-Klassen Suchformular*/
/*-> Klassen Suchergebnis*/
/* .searchresult form { 	display: inline; 	}*/
 .searchresult ul { 
 /* display: list-item; */
 display: table;
 text-decoration: none; 
 list-style-type: none;
 }
.searchresult li {
	display: table-cell;
	width: 100 px;
	list-style-type: none;
	}
/* <-Klassen Suchergebnis*/
/*Buttons */
#butDetail { 
background: transparent;
background-image: url('../pics/id-card-orange.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
color: transparent;
border: 0;
padding: 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
cursor: pointer;
}
#butLink { 
background: transparent;
background-image:url('../pics/book-content-orange.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:24px;
height: 24px;
color: transparent;
border: 0;
padding: 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
cursor: pointer;
}
#butActivity { 
background: transparent;
background-image:url('../pics/A.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:20px;
height: 20px;
color: transparent;
border: 0;
padding: 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
cursor: pointer;
}
#butHelp { 
background: #0B3B0B;
background-image:url('../pics/question-orange.png');
width:24px;
height: 24px;
color: #0B3B0B;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
}
#butUnset { 
background: white;
background-image:url('../pics/unset-orange.png');
width:20px;
height: 20px;
color: white;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
}
#butSet { 
background: white;
background-image:url('../pics/set-orange.png');
width:20px;
height: 20px;
color: white;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
float:right;
display:inline;
}
/*Ende Button*/
#asidegreen {
	font-size: 11pt;
background: green;
color: white;
border: 0;
border-color: green;
padding: 5px 5px 5px 5px;
text-shadow: none;
box-shadow: none;
float:clean;
display:block;
}
#asidered { 
font-size: 11pt;
background: red;
color: white;
border: 0;
border-color: red;
padding: 5px 5px 5px 5px;
text-shadow: none;
box-shadow: none;
float:clean;
display: block;
}
#mailfilter { 
background: white;
background-image:url('../pics/envelope-orange.png');
width:20px;
height: 20px;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
}
#mailpreview { 
background: white;
background-image:url('../pics/envelope-orange.png');
width:20px;
height: 20px;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
}
#telfilter { 
background: white;
background-image:url('../pics/phone-orange.png');
width:20px;
height: 20px;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
}
#strfilter { 
background: white;
background-image:url('../pics/home-orange.png');
width:20px;
height: 20px;
border: 0;
border-color: white;
padding: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
}
#logout {
	background-image:url('../pics/rhizome.png');
	background-repeat: no-repeat;
	/* background-position: 100px 200px;*/
	background-size: cover;
}
#logout a:hover,a:visited,a:link {
	text-decoration: none;
	color: #FF8000;
}
#logout h1 {
	color: #0B3B0B;
}
details {
	color:black;
	background-color: #F6E3CE;

}
summary {
	color:black;
	background-color: white;
	list-style-image: url('../pics/expand-orange-small.png');
}
#login {
	background-image:url('../pics/regal.jpg');
	background-repeat: no-repeat;
	background-position: 100px 200px;
}
#login a:hover,a:visited,a:link {
	text-decoration: none;
	color: #FF8000;
}
#login h1 {
	color: #0B3B0B;
}

/* Änderungen 14.06.2021 */
toolboxleft fieldset {    
		/*flex: 3; */
    	/* background-color: white; */
    	margin: 10px;
    	padding: 10px;
    	border-radius: 0.5em 0.5em 0.5em;
    	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em   0.4em  limegreen;

}
toolboxleft input[type = submit],[type = file]{ 
background: #FF8000;
color: #0B3B0B;
border: 1px solid;
border-color: #FF8000;
padding: 5px 5px 5px 5px;
text-shadow: 2px 2px 3px #0B3B0B;
border-radius: 0.5em 0.5em 0.5em;
box-shadow: 1px 0px 1px #FF8000, 0 0.2em   0.4em  #FF8000;
}

toolboxright {    
		flex: 3; 
    	background-color: limegreen;
    	margin: 10px;
    	padding: 10px;

}
#actNav {
	background-color: #0B3B0B;

}
fieldset {
margin-bottom: 10px;
}
details {
	color:black;
	background-color: #F6E3CE;
}
summary {
	color:black;
	background-color: white;
	list-style-image: url('../pics/expand-orange-small.png');
	}
/* Tabellengestaltung*/
.tdsub {
	vertical-align: top;
}
/* */
.filterimg{
	width: 15px;
	height: 15px;
}
.colVis{
	visibility: hidden;
}
/* */

.limitSpace {
	position: fixed; 
	top: 200px; 
	left: 150 px; 
	background-color: white; 
	border: 1px solid; 
	width:1024px; 
	height: 40px;	
    padding: 5px;
    border-radius: 0.5em 0.5em 0.5em;
    box-shadow: 1px 0px 1px black, 0 0.2em   0.4em  black;

}
/* EXAMPLE Fading*/
.example {
      cursor: pointer;
      /*height: 300px;*/
      position: relative;
      overflow: hidden;
      /* width: 400px;*/
      text-align:center;
      }
      .example .fadedbox {
      background-color: #666666;
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      /* width: 360px; */
      /* height: 100px;*/
      /*padding: 130px 20px;*/
      }
      .example:hover .fadedbox { opacity: 0.8; }
      .example .text {
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      }
      .example .title {
      font-size: 0.5em;
      /*text-transform: uppercase;*/
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 0.3s;
      }
      .example:hover .title,
      .example:focus .title {
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
     }
/* EXAMPLE Fading*/
/* POPUP */
/* Ungeöffnete Lightbox */
.lightbox {
  display: none;
}

/* Geöffnete lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox Inhalt */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: Lightgreen;
}

/* Button zum Schließen */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox Überlagerung (Overlay) */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}
/* */
/* Breadcrumb Navigation Styles */
.breadcrumb {
	margin: 20px 0;
	padding: 10px;
	font-size: 14px;
}

.breadcrumb a {
	text-decoration: none;
	color: #FF8000; /* Orange statt blau */
	font-weight: normal;
	transition: color 0.2s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
	color: #0B0B3B; /* Dunkelblau beim Hover */
	text-decoration: underline;
}

.breadcrumb strong {
	color: #FF8000; /* Orange für aktuellen Pfad */
	font-weight: bold;
}

.breadcrumb-separator {
	color: #0B0B3B; /* Dunkelblau für Trennzeichen */
	margin: 0 5px;
}

/* File Browser Button Styles */
.filebrowser-button {
	margin-bottom: 20px;
	padding: 8px 15px;
	cursor: pointer;
	background: #FF8000;
	color: #0B0B3B;
	border: 1px solid #FF8000;
	border-radius: 0.5em;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 1px 0px 1px #FF8000, 0 0.2em 0.4em #FF8000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.filebrowser-button:hover,
.filebrowser-button:focus {
	background: #0B0B3B;
	color: #FF8000;
	border-color: #0B0B3B;
}

.filebrowser-select-button {
	padding: 5px 10px;
	cursor: pointer;
	background: #FF8000;
	color: #0B0B3B;
	border: 1px solid #FF8000;
	border-radius: 0.5em;
	font-size: 12px;
	box-shadow: 1px 0px 1px #FF8000, 0 0.2em 0.4em #FF8000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.filebrowser-select-button:hover,
.filebrowser-select-button:focus {
	background: #0B0B3B;
	color: #FF8000;
	border-color: #0B0B3B;
}

/* File Browser Table Styles */
.filebrowser-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

.filebrowser-table th {
	padding: 10px;
	text-align: left;
	border: 1px solid #ddd;
	background-color: #0B0B3B;
	color: #FF8000;
	font-weight: bold;
}

.filebrowser-table th.text-right {
	text-align: right;
}

.filebrowser-table td {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

.filebrowser-table td.text-right {
	text-align: right;
}

.filebrowser-table tr {
	border-bottom: 1px solid #ddd;
}

.filebrowser-table tr:hover {
	background-color: rgba(255, 128, 0, 0.1);
}

.filebrowser-table a {
	text-decoration: none;
	color: #FF8000;
	font-weight: bold;
}

.filebrowser-table a:hover,
.filebrowser-table a:focus {
	color: #0B0B3B;
	text-decoration: underline;
}

.filebrowser-icon {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}

.filebrowser-table td.empty-message {
	padding: 20px;
	text-align: center;
	color: #0B0B3B;
}

/* File Upload Form Styles */
.upload-target-dir {
	margin: 10px 0;
	padding: 10px;
	background-color: rgba(255, 128, 0, 0.1); /* Hellorange Hintergrund */
	border-left: 4px solid #FF8000; /* Orange Border */
	border-radius: 0.3em;
	color: #0B0B3B;
}

.upload-target-dir strong {
	color: #FF8000;
}

.upload-target-dir-main {
	background-color: rgba(11, 11, 59, 0.1); /* Helldunkelblau Hintergrund */
	border-left: 4px solid #0B0B3B; /* Dunkelblau Border */
}

.upload-target-dir-main strong {
	color: #0B0B3B;
}

.upload-form-container {
	margin: 20px 0;
	padding: 15px;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em 0.4em #0B3B0B;
}

.upload-label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	color: #0B0B3B;
}

.upload-file-input {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 0.3em;
	margin-bottom: 15px;
	width: 100%;
	max-width: 500px;
	box-sizing: border-box;
}

.upload-text-input {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 0.3em;
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
}

.upload-text-input:focus {
	border-color: #FF8000;
	outline: none;
	box-shadow: 0 0 5px rgba(255, 128, 0, 0.3);
}

.upload-form-list {
	list-style: none;
	padding: 0;
	margin: 15px 0;
}

.upload-form-list li {
	margin: 10px 0;
}

.upload-form-list label {
	display: block;
	margin-bottom: 5px;
	color: #0B0B3B;
	font-weight: bold;
}

.upload-submit-button {
	padding: 10px 20px;
	cursor: pointer;
	background: #FF8000;
	color: #0B0B3B;
	border: 1px solid #FF8000;
	border-radius: 0.5em;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 1px 0px 1px #FF8000, 0 0.2em 0.4em #FF8000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.upload-submit-button:hover,
.upload-submit-button:focus {
	background: #0B0B3B;
	color: #FF8000;
	border-color: #0B0B3B;
}

/* Lending (Ausleihen) Styles */
.lending-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em 0.4em #0B3B0B;
	overflow: hidden;
}

.lending-table thead {
	background-color: #0B0B3B;
}

.lending-table th {
	padding: 12px;
	text-align: left;
	color: #FF8000;
	font-weight: bold;
	border-bottom: 2px solid #FF8000;
}

.lending-table td {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

.lending-table tbody tr:hover {
	background-color: rgba(255, 128, 0, 0.05);
}

.lending-table tr.lending-overdue {
	color: #d32f2f; /* Rot für überfällige Ausleihen */
	font-weight: bold;
}

.lending-table tr.lending-active {
	color: #2e7d32; /* Grün für aktive Ausleihen */
}

.lending-table tr.lending-returned {
	color: #2e7d32; /* Grün für zurückgegebene Ausleihen */
	opacity: 0.7;
}

.lending-table td.lending-empty {
	padding: 20px;
	text-align: center;
	color: #0B0B3B;
}

.error-message {
	color: #d32f2f;
	padding: 10px;
	background-color: rgba(211, 47, 47, 0.1);
	border-left: 4px solid #d32f2f;
	border-radius: 0.3em;
	margin: 10px 0;
}

.success-message {
	color: #2e7d32;
	padding: 10px;
	background-color: rgba(46, 125, 50, 0.1);
	border-left: 4px solid #2e7d32;
	border-radius: 0.3em;
	margin: 10px 0;
}

/* Lending Form Styles */
.lending-form {
	margin: 20px 0;
	padding: 20px;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em 0.4em #0B3B0B;
}

.form-group {
	margin: 15px 0;
}

.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: #0B0B3B;
}

.form-label .required {
	color: #d32f2f;
}

.form-input,
.form-select {
	width: 100%;
	max-width: 400px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 0.3em;
	box-sizing: border-box;
	font-size: 14px;
}

.form-input:focus,
.form-select:focus {
	border-color: #FF8000;
	outline: none;
	box-shadow: 0 0 5px rgba(255, 128, 0, 0.3);
}

.form-input-readonly {
	background-color: #f5f5f5;
	color: #666;
	cursor: not-allowed;
}

.form-checkbox {
	margin-left: 5px;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.form-group-submit {
	margin-top: 25px;
}

.form-submit-button {
	padding: 10px 20px;
	cursor: pointer;
	background: #FF8000;
	color: #0B0B3B;
	border: 1px solid #FF8000;
	border-radius: 0.5em;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 1px 0px 1px #FF8000, 0 0.2em 0.4em #FF8000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.form-submit-button:hover,
.form-submit-button:focus {
	background: #0B0B3B;
	color: #FF8000;
	border-color: #0B0B3B;
}

/* Authors Table Styles */
.authors-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 1px 0px 1px #0B3B0B, 0 0.2em 0.4em #0B3B0B;
	overflow: hidden;
}

.authors-table thead {
	background-color: #0B0B3B;
}

.authors-table th {
	padding: 12px;
	text-align: left;
	color: #FF8000;
	font-weight: bold;
	border-bottom: 2px solid #FF8000;
}

.authors-table td {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

.authors-table tbody tr:hover {
	background-color: rgba(255, 128, 0, 0.05);
}

.authors-table td.authors-empty {
	padding: 20px;
	text-align: center;
	color: #0B0B3B;
}

/* Author Detail Button */
#butAuthorDetail {
	background: transparent;
	background-image: url('../pics/author-orange.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 24px;
	height: 24px;
	color: transparent;
	border: 0;
	padding: 0px;
	text-shadow: none;
	box-shadow: none;
	float: right;
	display: inline;
	cursor: pointer;
}