/* Stil für den Hintergrund */
body {
  background-image: url('../img/bg1.svg');
  background-size: cover;
}

.pdfl {
  float:right;
  
}

/* Stil für die Navigationsleiste */
.nav-style {
  background-image: url('../img/bg.svg');
  background-size: cover;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);
  padding-top: 70px!important;
  /* Fügen Sie hier die gewünschten Stile für das Menü hinzu */
   width: 250px; /* Breite des Menüs anpassen */
   background-color: #333; /* Hintergrundfarbe des Menüs anpassen */
   flex-shrink: 0; /* Verhindern Sie, dass das Menü kleiner als seine Breite wird */
   height: 100vh; /* Füllen Sie die gesamte vertikale Höhe des Bildschirms aus */
   display: flex;
   flex-direction: column;
}

/* Hinzufügen des Hover-Effekts für das Menü */
.nav-style ul li:hover {
  color: #f9cf14; /* Textfarbe im Hover-Zustand */
}

/* Stil für das Menü in mobiler Ansicht */
.md\:hidden {
  display: block !important;
}

/* Stil für aktive Elemente */
.active {
  color: #f9cf14 !important;
  font-weight: bold;
}

.active-opt {
  font-weight: bold;
  color: #f9cf14 !important;
}

.company_logo {
  width: 200px;
  padding-bottom: 20px;
}

/* Stil für das Logo */
.logo {
  position: absolute;
  top: 0.125rem;
  left: 1rem;
  width: 193px;
  height: 46px;
  margin-bottom: 1rem;
}

/* Media Query für größere Bildschirme (Tablet und Desktop) */
@media (min-width: 768px) {
  .monly {
    display: none;
  }
}

/* Stil für moderne Schaltflächen */
.modern-button {
  background-color: #c62368;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.modern-button:hover {
  background-color: #cbaf1b;
}

.modern-delete:hover {
  background-color: #cbaf1b;
}

.modern-delete {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.modern-copy:hover {
  background-color: #cbaf1b;
}

.modern-copy {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}


/* Stil für die Topbar */
.topbar {
           background-color: #001220; /* Hintergrundfarbe der TopBar */
           color: #fff; /* Textfarbe der TopBar */
           position: fixed; /* Position fixieren */
           top: 0; /* Oben ausrichten */
           left: 0;
           width: 100%;
           z-index: 1000; /* Z-Index erhöhen, um über andere Inhalte zu liegen */
           padding: 10px 0; /* Innenabstand oben/unten und links/rechts */
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
       }

/* Container für den Inhalt der Topbar */
.topbar-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* Stil für den Logout-Link */
.logout a {
  color: #fff;
  text-decoration: none;
}

/* Stil für den eingeloggten Benutzer */
.logged-in-user {
  font-weight: bold;
}

.logo {
    height: auto;
}

/* Stil für das Details-Logo */
.details-logo {
  width: 200px !important;
}
.qr-code-container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
}
.qr-code-container .qr-code {
  margin-right: 20px; /* Add some spacing between QR code and bar chart */
}

/* CSS-Stile für den Footer */
footer {
    position: sticky;
    bottom: 0;
    background-color: #333; /* Hintergrundfarbe anpassen */
    color: white; /* Textfarbe anpassen */
    padding: 10px 0;
    text-align: center;
    z-index: 100;
}

/* Zusätzliche Stile, um den Footer ansprechend zu gestalten */
footer h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

footer p {
    margin: 0;
}


/* Aktive Opt-Stile für Menüelemente */
.active-opt {
    /* Hier können Sie die Stile für aktive Menüpunkte anpassen */
    font-weight: bold;
    color: #ff9900; /* Aktive Farbe anpassen */
}