body {
  background-color: #F5F5F5; /* Hintergrundfarbe außerhalb der max-width */
  margin: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

.content {
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #E4D6F1; /* Hintergrundfarbe innerhalb der max-width */
  width: 118rem;
  padding: 0.5rem;
  border-radius: 1rem;
  margin: 1rem auto;
  height: 57rem;
}

.submit-btn-class {
  width: auto;
  box-sizing: border-box;
  padding: 10px;  
  border: 0.1rem solid black;
  border-radius: 10px;
  background-color: lightgoldenrodyellow;
  color: black;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.submit-btn-class:hover {
  background-color: palegoldenrod;
}

.icon-button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 1.3rem; /* Button-Breite */
  height: 1.3rem; /* Button-Höhe */
  display: flex; /* Flexbox für die zentrierte Platzierung des Icons */
  align-items: center; /* Vertikale Ausrichtung des Icons */
  justify-content: center; /* Horizontale Ausrichtung des Icons */
  position: relative; /* Position relativ für das Verschieben des Icons */
}

.icon-button-large {
  border: 1px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 2.5rem; /* Button-Breite */
  height: 2.5rem; /* Button-Höhe */
  display: flex; /* Flexbox für die zentrierte Platzierung des Icons */
  align-items: center; /* Vertikale Ausrichtung des Icons */
  justify-content: center; /* Horizontale Ausrichtung des Icons */
  position: relative; /* Position relativ für das Verschieben des Icons */
}


.icon-button svg {  
  width: 100%; /* Icon-Breite auf 100% des Buttons setzen */
  height: 100%; /* Icon-Höhe auf 100% des Buttons setzen */
  position: absolute; /* Absolute Positionierung des Icons innerhalb des Buttons */
}

.icon-button-delete svg {
  fill: red; /* Standardfarbe: Rot */
  transition: 0.2s ease; /* Übergangseffekt für die Farbänderung */
}

.icon-button-confirmdelete svg,
.icon-button-savedata svg  {
  fill: green; /* Standardfarbe:*/
  transition: 0.2s ease; /* Übergangseffekt für die Farbänderung */
}

.icon-button-edit svg {
  fill: grey; /* Standardfarbe: dunkelgrau */
  transition: 0.2s ease; /* Übergangseffekt für die Farbänderung */
}

.icon-button-emptyform svg {
  fill: grey; /* Standardfarbe: dunkelgrau */
  transition: 0.2s ease; /* Übergangseffekt für die Farbänderung */
}

.icon-button-save svg {  
  transition: 0.2s ease; /* Übergangseffekt für die Farbänderung */
}

.icon-button-export svg,
.icon-button-download svg,
.icon-button-upload svg{
  fill: grey;
  transition: 0.2s easy;
}

.icon-button:hover svg,
.icon-button-large:hover svg {
  transform: scale(1.1667); /* Icon beim Hover um 30% vergrößern */
  filter: saturate(100%);
}

.icon-btn-deactivated {
  filter: saturate(30%);
}

.icon-btn-activated {
  opacity: 100%;
  filter: saturate(100%);
}

#seperator-line {
  width: 100%;  
  height: 0.5rem;
}

#login {
  width: 300px;
  padding: 10px;
  border-radius: 20px;
  margin: 2px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: lightgoldenrodyellow; /* Hintergrundfarbe innerhalb der max-width */
  
}

#login form {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login input[type="text"],
#login input[type="password"]{
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 0.1rem solid black;
  border-radius: 10px;
  background-color: #F5F5F5;
  color: #333;
}

#login select {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 0.1rem solid black;
  border-radius: 10px;
  background-color: #F5F5F5;
  color: #333;
}

#logon-form button[type="submit"] {
  width: 100%;
  box-sizing: border-box;  
  font-size: larger;
  font-weight: bold;
  border: 0.1rem solid black;
}

#logon-form button[type="submit"]:hover {
  background-color: palegoldenrod;
}

#headline {
  width: 128rem;
}

.enabledTab {
  color: #333;
  pointer-events: auto;
}

.disabledTab {
  color: #ccc;
  pointer-events: none;
}


#content-line {
  width: 128rem;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 0;  /* vermeidet Abstand zwiscehn den untergeordneten divs*/
  white-space: nowrap; /*Verhindert unerwünschten Zeilenumbruch*/
}


.tab-content {
  display: none;
}

.active {
  display: block;
}

/* Add styles for the navigation and main-content divs */
#navigation,
#sidebar,
#main-content {
  display: inline-block;
  vertical-align: top;  
  font-size: 1rem;
  background-color: lightgoldenrodyellow;
}

#sidebar {
  width: 12rem;  
  height: 42rem;
  border-right: 0.1rem solid lightgray;
  padding: 1rem;
  border-radius: 0 0 0 1rem;
}

#navigation {
  width: 12rem;  
  height: 30rem;
  border-bottom: 0.1rem solid lightgray;  
}

#belegkreise {
  font-family: "Courier New", monospace;
}

#main-content {  
  width: 102rem;
  padding: 1rem;
  height: 42rem;
  border-radius: 0 0 1rem 0;
}

/* Style the tab buttons */
#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#navigation li {
  display: block;
}

.tab-link {
  background-color: lightgoldenrodyellow;
  border: 0px solid #ccc;
  color: #444;
  cursor: pointer;
  display: block;
  /*margin-bottom: -1px;*/
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
}

.tab-link:hover {
  background-color: palegoldenrod;
}

.tab-link.active {
  background-color: palegoldenrod;
  border-bottom: none;
}

#logon-line {  
  height: 5rem;  
  display: flex; 
}

#logon-line-benutzer {
  height: 1.5rem;
}

#logon-line-company {
  height: 1.5rem;
}

#logon-line-row1 {
  width: 15rem;
  border-right: 0.1rem solid lightgrey;
  padding: 1rem;
}

#logon-line-row2 {
  width: 15rem;
  padding: 1rem;
}

#logon-line button[name="logout"]  {
  width: 8rem;  
  font-weight: bold;
}

#logon-line button[name="logout"]:hover  {
  background-color: lightcoral;  
}

.info-line {
  background-color: #D4EDDA;
  width: 118rem;
}

.info-line select {
  display: inline-block;
  width: 16rem;  
}

#jahr-line {
  height: 3rem;  
  display:flex;  
}

#jahr-line-row1 {
  box-sizing: content-box;
  padding: 1rem;
  width: 15rem;
  border-right: 0.1rem solid lightgrey;
}

#jahr-line-row2 {
  box-sizing: content-box;
  padding: 1rem;
  width: 15rem;  
}

#dropdown-jahr {
  box-shadow: none;
  background-color: white;
  cursor: pointer;
}


#Kontenplan {
  max-height: auto;  
}

#Kontenplan-header {
  height: 1.5rem;
  background-color: lightgoldenrodyellow;
  font-size: 0.8rem;
}

#Kontenplan-content {
  max-height: 40rem;
  overflow-y: auto;
  background-color: white;
  width: 89rem;
  font-size: 0.8rem;
}

.KontenplanRow {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  border-bottom: 1px dotted;  
  width: 90rem;
}

.kprKontonummer {
  margin: 0em 1em 0em 1em;
  width: 4rem;
}

.kprBezeichnung {
  width: 30rem;
}

.kprZMK {
  width: 4rem;
  text-align: center;
}

.kprUStKonto {
  width: 5rem;
  text-align: center;
}

.kprUStCode {
  width: 7rem;
  text-align: center;
}

.kprSaldoStart {
  width: 7rem;
  text-align: right;
}

.kprSaldoAktuell {
  width: 7rem;  
  text-align: right;
}

.kprLetzteBuchung {
  width: 8rem;
  text-align: center;
}

.kprInputField {
  width: 7rem;  /* Gleiche Breite wie .kprSaldoAktuell */
  font-size: 0.8rem;  /* Gleiche Schriftgröße wie #Kontenplan-content */
  text-align: right;  /* Text rechtsbündig, wie bei .kprSaldoAktuell */
  border: 1px solid #ccc;  /* Optional: Grenze hinzufügen */
  padding: 0.2rem;  /* Etwas Innenabstand für bessere Lesbarkeit */
  box-sizing: border-box;  /* Stellt sicher, dass Padding und Border die Gesamtbreite nicht verändern */
  display: inline-block;  /* Damit es in derselben Zeile wie andere Elemente angezeigt wird */
}

.kprRefresh {
  width: 5rem;
  text-align: center;
}

input[name=kprZMK] {
  flex-basis: 5rem;
  width: 5rem;
  border: none;
  background: none;
  color: transparent;
}

.kprGiltAb {
  width: 3rem;
  text-align: center;
}

.kprGiltBis {
  width: 3rem;
  text-align: center;
}

#Buchungen {  
  width: auto;
}

#Buchungen-Kontoauswahl {
  display: flex;
  flex-direction: row;  
  height: 2rem;
  border-bottom: 1px dotted black;
}

#Buchungen-Kontoauswahl-selectionText {
  width: 25rem;
}

.Buchungen-Kontoauswahl-element {
  box-sizing: border-box;
  padding-right: 10px;  
}

#Buchungen-Kontoauswahl-select {
  cursor: pointer;
  background-color:white;
  border:none;
  width: 15rem;
}

#Buchungen-Saldoinformation {
  height: 4rem;
  border-bottom: 1px dotted black;
}

#Buchungen-Saldoinformation-TopLine {
  display: flex;
  flex-direction: row;
} 

.Buchungen-Saldoinformation-element {
  box-sizing: border-box;
  padding-top: 10px;
}

#Buchungen-Saldoinformation-label {
  width: 17rem;
  padding-left:0.5rem;
}

#Buchungen-Saldoinformation-value {
  width: 9rem;
  text-align: right;
}

#Buchungen-Saldoinformation-2ndLine {
  display: flex;
  flex-direction: row;
}

#Buchungen-SaldoinformationAktuell-label {
  width: 17rem;
  padding: 0.5rem;
}

#Buchungen-SaldoinformationAktuell-value {
  width: 9rem;
  text-align: right;
}

#Buchungen-Uebersicht {
  height: 36rem;
  background-color: white;
}

#Buchungen-Saldo {
  height: 42rem;
  background-color: white;
}

#Buchungen-Uebersicht-Headline,
#Buchungen-Saldo-Headline {
  height: 1.5rem;
  background-color: rgb(65, 65, 65); 
  color: white;
  display: flex;
  flex-direction: row; 
  column-gap: 10px;   
  align-items: center;
}

#Buchungen-Uebersicht-Headline-Datum,
#Buchungen-Saldo-Headline-Datum {
  width: 5rem;
  text-align: center;
}

#Buchungen-Uebersicht-Headline-Beleg,
#Buchungen-Saldo-Headline-Beleg {
  width: 5rem;
  text-align: left;
}

#Buchungen-Uebersicht-Headline-KontoSoll,
#Buchungen-Uebersicht-Headline-KontoHaben {
  width: 20rem;
  text-align: left;
}

#Buchungen-Uebersicht-Headline-UStCode,
#Buchungen-Uebersicht-Headline-igE,
#Buchungen-Uebersicht-Headline-RC {
  width: 2rem;
  text-align: center;
}

#Buchungen-Uebersicht-Headline-BetragSoll,
#Buchungen-Uebersicht-Headline-BetragHaben,
#Buchungen-Uebersicht-Headline-Zwischensaldo  {
  width: 4rem;
  text-align: right;
}

#Buchungen-Saldo-Headline-BetragSoll,
#Buchungen-Saldo-Headline-BetragHaben,
#Buchungen-Saldo-Headline-SummeSoll,
#Buchungen-Saldo-Headline-SummeHaben,
#Buchungen-Saldo-Headline-Saldo {
  width: 7rem;
  text-align: right;
}

#Buchungen-Uebersicht-Headline-Text {
  width: 22rem;
  text-align: left;
}


#Buchungen-Uebersicht-Liste {
  height: 25rem;
  overflow-y: auto;
  border-bottom: 1px solid black;
  position: sticky;
  bottom: 0;
}
                         
.Buchungen-Uebersicht-Row,
.Buchungen-Saldo-Row {
  height: 1.2rem;
  display: flex;
  flex-direction: row;
  column-gap: 10px;   
  align-items: center;   
  font-size: 0.8rem;
}

.Buchungen-Uebersicht-Row-NeueKlasse {
  height: 1.8rem;
  display: flex;
  flex-direction: row;
  column-gap: 10px;   
  align-items: center;   
  font-size: 1.0rem;
  font-weight:bold;
  font-style: italic;
}

.Buchungen-Uebersicht-Row-NeuesKonto {
  height: 1.2rem;
  display: flex;
  flex-direction: row;
  column-gap: 10px;   
  align-items: center;   
  font-size: 0.9rem;
  font-weight:bold;
  font-style: italic;
}

.BUR-bottomborder-class {
  border-bottom: 1px dotted black;
  height: 1rem;
  padding-bottom: 0.5rem;
}

.BUR-topborder-class {
  height: 1rem;
  padding-top: 0.5rem;
}

.BUR-topborder-class-withLine {
  height: 1rem;
  padding-top: 0.5rem;
  border-top: 2px solid black;
}

.BUR-Datum {
  width: 5rem;
  text-align: center;
  background-color: #f0f0f0;
}

.BUR-Beleg {
  width: 5rem;
  text-align: left;
  background-color: #f0f0f0;
}

.BUR-KontoSoll,
.BUR-KontoHaben {
  width: 20rem;
  text-align: left;
  background-color: #f0f0f0;
}

.BUR-UStCode {
  width: 2rem;
  text-align: center;
  background-color: #f0f0f0;
}

.BUR-UStCode-missingAccount {
  background-color: lightcoral;
}

.BUR-UStCode-validAccount {
  background-color: #f0f0f0;
}

.BUR-BetragSoll,
.BUR-BetragHaben,
.BUR-Zwischensaldo,
.BUR-BetragSaldo
 {
  width: 4rem;
  text-align: right;
  background-color: #f0f0f0;
}

.BUR-igE,
.BUR-RC
 {
  width: 2rem;  
}

.BUR-Text {
  width: 22rem;
  text-align: left;
  background-color: #f0f0f0;
}

.BUR-Delete,
.BUR-ConfirmDelete,
.BUR-Edit {
  width: 1rem;  
}

.BUR-Kontoklasse-Headline {
  width: 7rem;
  text-align: left;
  background-color: #ffffff;
}

.BUR-Kontoklasse-Nr {
  width: 5rem;
  text-align: left;
  background-color: #ffffff;
}

.BUR-Kontoheadline-Nr {
  width: 2.6rem;
  text-align: left;
  background-color: #ffffff;
}

.BUR-Kontoheadline-Bezeichnung,
.BUR-Kontoheadline-Hinweistext {
  width: 25rem;
  text-align: left;
  background-color: #ffffff;
  font-weight: bold;
  font-style: italic;
}

.BUR-Kontoheadline-TextSaldo {
  width: 6rem;
  text-align: right;
  background-color: #ffffff;
}
 
#Buchungen-NeueBuchung-label {
  height: 1rem;
  vertical-align: bottom;  
  margin-top: 1rem;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  align-items: center;  
}

#Buchungen-NeueBuchung {
  height: 7rem;
  border: 1px solid black; 
  margin-left: 0.25rem;  
  margin-right: 0.25rem; 
  padding-left: 0.25rem;
  padding-right: 0.25rem; 
}

#Buchungen-NeueBuchung-Headline {
  height: 1.5rem;
  display: flex;
  flex-direction: row; 
  column-gap: 10px;   
  align-items: center;
}


#Buchungen-NeueBuchung-Headline-Beleg,
#Buchungen-NeueBuchung-Headline-UStCode,
#Buchungen-NeueBuchung-Headline-Datum {
  width: 5rem;
  text-align: center;
}

#Buchungen-NeueBuchung-Headline-igE,
#Buchungen-NeueBuchung-Headline-RC {
  width: 2rem;
  text-align: center;
}

#Buchungen-NeueBuchung-Headline-Gegenkonto {
  width: 18rem;
  text-align: center;
}

#Buchungen-NeueBuchung-Headline-Eingang,
#Buchungen-NeueBuchung-Headline-Ausgang  {
  width: 9rem;
  text-align: center;
}

#Buchungen-NeueBuchung-Headline-Text {
  width: 28rem;
  text-align: center;
}

#Buchungen-NeueBuchung-Headline-TxnId {
  width: 13rem;
  text-align: center;
}

#Buchungen-NeueBuchung-input {
  font-size: 0.8em;
  display: flex;
  flex-direction: row; 
  column-gap: 10px;   
  align-items: flex-start;
}

#BNB-Datum-input,
#BNB-Beleg-input,
#BNB-UStCode-input {
  width: 4.6rem;
}

#BNB-Gegenkonto-input {
  width: 17.6rem;
}
                
#BNB-Eingang-input,
#BNB-Ausgang-input {
  width: 8.6rem;
  text-align: right;
}

#BNB-Text-input {
  width: 27.6rem;
}

#BNB-igE-input,
#BNB-RC-input {
  width: 1.6rem;
  text-align: center;
}

#BNB-TxnId-readonly {
  width: 12.6rem;
  text-align: left;
  pointer-events: none;
  background-color: #f3f3f3; /* Grauer Hintergrund */
  color: #6c757d; /* Dunkelgrauer Text */
  font-size: 0.85em;
  height: auto;
  resize: none; /* Deaktiviert das manuelle Vergrößern/Verkleinern des Textfelds */
  overflow: hidden; /* Verhindert Scrollbalken */
}

.Buchungen-NeueBuchung-input-class {
  border: 0.1rem solid black;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}


.Buchungen-NeueBuchung-input-class:hover {
  background-color: #e4eee6;
}

.Buchungen-NeueBuchung-input-class:focus {
  background-color: #D4EDDA;
}


.Buchungen-NeueBuchung-input-class:focus:hover {
  background-color: #D4EDDA; 
}


#Buchungen-NeueBuchung-submitLine {
  height: 2.8rem;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: right;
}

#NeueBuchungSpeichern-button:hover {
  --background-color: palegoldenrod;
}

#exp-label,
#download-label,
#upload-label {
  height: 1rem;
  vertical-align: bottom;  
  margin-top: 2rem;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem; 
}

#exp-row,
#download-row,
#upload-row {
  height: 3rem;
  border: 1px solid black; 
  margin-left: 0.25rem;  
  margin-right: 0.25rem; 
  padding-left: 0.25rem;
  padding-right: 0.25rem;  
  display: flex;
  flex-direction: row; 
  column-gap: 10px;   
  align-items: center;
  align-content: flex-start;
}

.exp-datepicker {
  width: 8rem;
  font-size: 0.8em;
}

.div-inactive {
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}

.blank-form {
  margin: 0;
  padding: 0;  
}