@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-light {
    color: #ffffff !important;
}

.font-dark1 {
    color: #1b5886 !important;
}

.font-dark2 {
    color: #003b5e !important;
}

.navbar {
    font-family: 'Roboto', sans-serif;
    background-color: #0591A0 !important;
}

.navbar-brand,
.navbar-nav .nav-link i.white{
    color: #ffffff !important;
    /* Weiße Schriftfarbe */
}


.navbar-brand,
.navbar-nav .nav-link{
    font-family: 'Roboto', sans-serif;
}

.navbar-nav .nav-link:hover i.white{
    color: #003b5e !important;
    /* Gelbe Schriftfarbe beim Hover */
}

.navbar-toggler {
    border-color: #ffffff;
    /* Weiße Umrandung für die Toggler-Schaltfläche */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* Weiße Toggler-Ikone */
}


.nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }
  
  /* Stellt sicher, dass das Dropdown-Menü bei Hover nicht verschwindet */
  .dropdown-menu {
    display: none; /* Standardmäßig ausgeblendet */
    position: absolute; /* Positioniere das Menü relativ zur Nav-Leiste */
    top: 100%; /* Positioniere es direkt unter dem Dropdown-Element */
    left: 0; /* Positioniere es links am Dropdown-Element */
    z-index: 1000; /* Stelle sicher, dass das Menü über anderen Elementen liegt */
  }




/* Beispiel für andere benutzerdefinierte Stile */
html,
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    height: 100%;
    margin: 0;
}

header {
    z-index: 1030;
    /* Stelle sicher, dass der Header über anderen Inhalten liegt */
}

footer {
    font-family: 'Roboto', sans-serif;
    font-size: small;
    text-align: center;
    color: #dfdfdf;
    /* Textfarbe des Footers */
    background-color: #0591A0;
    /* Hintergrundfarbe des Footers */
    /*margin-top: auto;*/
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1030;
    /* Stelle sicher, dass der Footer über anderen Inhalten liegt */
    /*
    padding: 10px;
    */
}

.container {
    margin-top: 20px;
}


.flash {
    padding: 20px;
    margin: 20px;
}

.flash.error {
    background-color: #ffa7ae;
    color: #a02a36;
}

.flash.info {
    background-color: #301bf0;
    color: #ffffff;
}

.flash.success {
    background-color: #96faad;
    color: #1c7530;
}


.btn.active {
    background-color: #02383e;
    color: white;
}

.btn.inactive {
    background-color: #08afc2;
    color: white;
}

.container-fluid {
    padding-left: 15px;
    /* Benutzerdefinierte Abstände */
    padding-right: 15px;
}


/* Optional: Abstand zwischen den Containern */
.container-gap {
    margin-bottom: 15px; /* Abstand unter jedem Container */
}

/* Benutzerdefinierte Stile für klickbare Zeilen */
.clickable-row {
    cursor: pointer;
    /* Zeigt an, dass die Zeile klickbar ist */
}

/* Verhindert das Hover-Ereignis auf den klickbaren Spalten */
.no-click {
    cursor: default;
    /* Ändert den Cursor in den Standard-Cursor für nicht klickbare Spalten */
}



/* Spaltenhighlight beim Überfahren mit der Maus */
.table-hover tbody tr:hover {
    background-color: #cff7cf;
    /* Hintergrundfarbe beim Überfahren der Zeile */
}

.table-hover tbody tr td,
.table-hover tbody tr th {
    position: relative;
}


thead th {
    white-space: nowrap; /* Verhindert das Umfließen von Kopfzeilen-Text */
}
tbody td {
    overflow: hidden; /* Verhindert das Überlaufen von Text */
    text-overflow: ellipsis; /* Zeigt "..." an, wenn der Text zu lang ist */
}



/* Stil für den Button */
.button-white {
    border: 2px solid #0591A0; /* türkise Randlinie */
    background-color: white; /* Weiße Hintergrundfarbe */
    color: #02383e; /* Textfarbe */
    padding: 6px 10px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 16px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-white:hover {
    color: white; /* Weiße Schriftfarbe bei Hover */
    background-color: #0591A0; /* türkiser Hintergrund bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-white:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-white:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

/* Stil für den Button */
.button-green {
    border: 2px solid #05a012; /* Graue Randlinie */
    background-color: rgb(219, 240, 217); /* Weiße Hintergrundfarbe */
    color: #02383e; /* Textfarbe */
    padding: 6px 10px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 16px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-green:hover {
    background-color: #32fa8c; /* grüner Hintergrund bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-green:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-green:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

.button-red {
    border: 2px solid #ff6f6f; /* Graue Randlinie */
    background-color: white; /* Weiße Hintergrundfarbe */
    color: black; /* Textfarbe */
    padding: 6px 10px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 16px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-red:hover {
    background-color: red; /* roter Hintergrund bei Hover */
    color: white; /* weisse Schrift bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-red:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-red:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

/* Stil für den Button */
.button-white-sm {
    border: 2px solid #0591A0; /* Graue Randlinie */
    background-color: white; /* Weiße Hintergrundfarbe */
    color: black; /* Textfarbe */
    padding: 2px 5px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 14px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-white-sm:hover {
    background-color: #78f7b1; /* grüner Hintergrund bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-white-sm:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-white-sm:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

/* Stil für den Button */
.button-green-sm {
    border: 2px solid #05a012; /* Graue Randlinie */
    background-color: rgb(230, 252, 230); /* Weiße Hintergrundfarbe */
    color: black; /* Textfarbe */
    padding: 2px 5px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 14px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-green-sm:hover {
    background-color: #32fa8c; /* grüner Hintergrund bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-green-sm:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-green-sm:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

.button-red-sm {
    border: 2px solid #ff6f6f; /* Graue Randlinie */
    background-color: white; /* Weiße Hintergrundfarbe */
    color: black; /* Textfarbe */
    padding: 2px 5px; /* Innenabstand (optional) */
    border-radius: 5px; /* Abgerundete Ecken (optional) */
    font-size: 14px; /* Schriftgröße (optional) */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (optional) */
}

/* Stil für den Button bei Hover (optional) */
.button-red-sm:hover {
    background-color: red; /* roter Hintergrund bei Hover */
    color: white; /* weisse Schrift bei Hover */
}

/* Stil für den Button bei Inaktivität */
.button-red-sm:disabled {
    background-color: #ededed; /* Hellgrauer Hintergrund */
    color: #02383e; /* Hellgraue Textfarbe */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
}

.button-red-sm:disabled:hover {
    background-color: #d3d3d3; /* Hellgrauer Hintergrund bleibt gleich */
    color: #02383e /* Hellgraue Textfarbe bleibt gleich */
}

i {
    color:#1b5886;
}


i.white-sm {
    color:#ffffff;
    font-size:0.7em;    
}

@media (max-width: 767.98px) {
    body {
        font-size: 75%;
      }
}

/* Sicherstellen, dass der Modal-Overlay sich korrekt positioniert */
.modal-backdrop.show {
    z-index: 1040; /* Standardwert von Bootstrap */
  }
  
  /* Sicherstellen, dass der Modal sich über die fixierte Kopfzeile und Fußzeile legt */
  .modal {
    z-index: 1050; /* Höher als die fixierte Kopf- und Fußzeile */
  }

  
  /* Optional: Falls nötig, die Höhe des Modals anpassen */
  .modal-dialog {
    margin-top: 5%; /* Abstand oben für das Modal */
    margin-bottom: 5%; /* Abstand unten für das Modal */
  }

/* Begrenze die Höhe des Modals und aktiviere das Scrollen */
.modal-body-scrollable {
    max-height: 70vh;  /* Höhe auf 70% der Ansichtshöhe begrenzen */
    overflow-y: auto;  /* Scrollen bei Bedarf ermöglichen */
}

/* Optional: Anpassung des Modal-Headers und -Footers */
.modal-header, .modal-footer {
    background-color: #f8f9fa; /* Heller Hintergrund für Kopf- und Fußzeile */
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
}


  .custom-highlight {
    border: 2px solid darkgreen;
    background-color: lightgreen;
    color: darkgreen;
    text-align: center;
    padding: 1rem; /* Equivalent to p-3 */
    margin: 1rem 0; /* Equivalent to my-3 */
    border-radius: 0.25rem; /* Equivalent to rounded */
}

    .custom-box {
        display: inline-block; /* Box wird nur so breit wie der Inhalt */
        padding: 1rem; /* Abstand innerhalb der Box */
        border: 2px solid #ffeb3b; /* Gelber Rahmen */
        color: #05a012; /* Grüne Schriftfarbe */
        background-color: #fff; /* Weißer Hintergrund */
        border-radius: 0.25rem; /* Eckenabrundung */
}