.alert-with-icon.alert div,
.alert-with-icon.alert span {
    padding-left: 5px;
    display: table-cell;
}

/* Wird für die Labels mehr / weniger anzeigen benoetigt */
[aria-expanded="true"] > .lbl-to-hide,
[aria-expanded="false"] > .lbl-to-expand {
    display: none;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px !important; /* Mach erstmal alles kleiner. Sollte sich auch auf rem auswirken. */
}

body {
    /*margin-bottom: 40px; !* Margin bottom by footer height *!*/
}

/* Sticky footer styles */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #f5f5f3;
}

.footer div.container {
    padding-top: 10px;
}

.footerspacer {
    margin-bottom: 50px; /* Spacing nach unten, damit nicht alles direkt auf der Footer Kante sitzt*/
}

/* Sticky footer styles end */

.navigation {
    /* Intentionally blank */
}

.navigation .radio-inline label {
    font-weight: normal;
}

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}
/* Variablen */
:root {
    --iqtig-rot: var(--bs-danger);
}

/*
btn-light wird u.a. im Bootstrap-Select verwendet und ist dafür zu hell.
Mit folgenden CSS wird ".btn-light" im Dark-Theme auf die Werte von ".btn-dark" geändert:
*/
[data-bs-theme=dark] .btn-light {
    /* im Dark-Mode ist btn-light analog zu btn-dark */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-gray-dark);
    --bs-btn-border-color: var(--bs-gray-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #52585d;
    --bs-btn-hover-border-color: #484e53;
    --bs-btn-focus-shadow-rgb: 82, 88, 93;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5d6166;
    --bs-btn-active-border-color: #484e53;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-gray-dark);
    --bs-btn-disabled-border-color: var(--bs-gray-dark);
}

/* im Dark-Mode ist "btn-secondary" analog zu "btn-primary", da es dafür keine spezifische Dark-Definition gibt und somit zu hell wäre */
[data-bs-theme=dark] .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #005255;
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-focus-shadow-rgb: 38, 120, 123;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: #00484b;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    color: #fff;
}

/* dropdown in einer Tabelle nutzt btn-outline-secondary, dieser wird im dark-Theme ähnlich btn-dark gesetzt (siehe auch Anmerkung zu btn-secondary) */
[data-bs-theme=dark] .dropdown-toggle.btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #52585d;
    --bs-btn-hover-border-color: #484e53;
    --bs-btn-focus-shadow-rgb: 82, 88, 93;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5d6166;
    --bs-btn-active-border-color: #484e53;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-gray-dark);
    --bs-btn-disabled-border-color: var(--bs-gray-dark);
    color: #fff;
}

[data-bs-theme=dark] .text-bg-light {
    background-color: var(--bs-gray-300) !important;
}

[data-bs-theme=dark] .text-bg-light .table-light {
    --bs-table-bg: var(--bs-gray-300);
}

[data-bs-theme=dark] .text-bg-light a {
    color: #000;
}

[data-bs-theme=dark] .file-caption-disabled {
    /* disabled file upload ist sonst weiß */
    background-color: var(--bs-gray-dark);
}

[data-bs-theme=dark] .btn-group-vertical .btn-outline-primary {
    color: var(--bs-link-color);
}

/* Harter Override der font-family */
body {
    font-family: Barlow, sans-serif;
    font-feature-settings: "tnum" on;
}

.breadcrumb-container {
    background-color: var(--bs-primary-bg-subtle);
    padding: 1rem;
}

.breadcrumb-container ol {
    margin-bottom: 0;
}

.navbar-td .navbar-brand {
    padding-top: 10px;
}

.navbar-brand img {
    height: 30px;
}

.list-double-line-spaceing {
    line-height: 2;
}

a.a-sm {
    padding: 0;
}

label.visible-for-extern {
    color: #317eac;
}

/*----------------------------- CSS-Utilities ------------------- */

.w-80 {
    width: 80%;
}

/*-------------------------------*/

.h-100-px {
    height: 100px;
}

.h-150-px {
    height: 150px;
}

.h-200-px {
    height: 200px;
}

.mh-1-5rem {
    min-height: 1.5rem;
}

.mb-0125 {
    /* Ermöglicht ein Margin-Botton von 0.125rem. Das kann hilfreich sein, wenn neben einem Form Check ein zusätzliches Label angezeigt werden soll
       das auf der selben Zeilenhöhe stehen soll. Die Klasse .form-check führt für die Checkbox und ihr Label eben dieses margin ein.
     */
    margin-bottom: 0.125rem;
}

.container > .tdFeedbackPanel ul {
    list-style-type: none;
    padding: 0;
}

.td-form-group {
    margin-bottom: 1rem;
}

.td-form-group.required .form-label:after {
    content: "*";
    color: var(--iqtig-rot);
}

.td-form-group.has-error .form-text {
    display: block;
    color: var(--iqtig-rot);
}

.td-form-group .form-text {
    display: none;
}

.td-form-group.has-error .form-text > ul {
    list-style-type: none;
    padding: 0;
}

.tdFeedbackPanel ul {
    list-style-type: none;
    padding: 0;
}

.messageSendButtonFrameHidden {
    visibility: hidden;
}

.messageSendButtonFrameVisible {
    visibility: visible;
}

.tableElementTextOrientation {
    vertical-align: middle;
    padding: 8px 12px;
}

.stateInProgress {
    font-weight: bold;
    color: #333;
    background-color: #ffd351;
    border-color: #ffd351;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

.stateAccepted {
    font-weight: bold;
    color: #fff;
    background-color: #14892c;
    border-color: #14892c;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

.stateSubmitted {
    color: #fff;
    background-color: #8eb021;
    border-color: #8eb021;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

.stateInsufficient {
    font-weight: bold;
    color: #fff;
    background-color: crimson;
    border-color: crimson;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

.stateExpired {
    font-weight: bold;
    color: #fff;
    background-color: #4a6785;
    border-color: #4a6785;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

.stateDefault {
    font-weight: bold;
    color: #333;
    background-color: lightgrey;
    border-color: lightgrey;
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 99%;
}

/*----------------------------- PdfDownloadPanel /DocumentDownloadPanel ---------------- */
span.downloadTitle {
    display: block;
    line-height: initial;
    font-size: smaller;
    font-weight: bold;
    cursor: pointer;
}

span.downloadSubTitle {
    font-size: x-small;
    font-weight: normal;
    margin-top: 0.3rem;
}

span.downloadSubTitle ~ span.downloadSubTitle {
    margin-top: 0.1rem;
}

/*----------------------------- FILE download Icons ---------------- */

div.csvDownloadIcon::before {
    content: 'csv';
    background: #3B7826;
}

div.jpgDownloadIcon::before {
    content: 'jpg';
    background: #9d9d9d;
}

div.pngDownloadIcon::before {
    content: 'png';
    background: #9d9d9d;
}

div.gifDownloadIcon::before {
    content: 'gif';
    background: #9d9d9d;
}

div.pdfDownloadIcon::before {
    content: 'pdf';
    background: var(--bs-red);
}

div.wordDownloadIcon::before {
    content: 'doc';
    background: #1E5799;
}

div.wordxDownloadIcon::before {
    content: 'docx';
    background: #1E5799;
}

div.xlsxDownloadIcon::before {
    content: 'xlsx';
    background: #3B7826;
}

div.zipDownloadIcon::before {
    content: 'zip';
    background: #262C2B;
}

div.xmlDownloadIcon::before {
    content: 'xml';
    background: #3D1255;
}

div.xsdDownloadIcon::before {
    content: 'xsd';
    background: #3D1255;
}

div.downloadLinkFileInfoIcon {
    padding-right: 0.5rem;
    float: left
}

div.downloadLinkFileInfoIcon::before {
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    text-align: center;
    padding-top: 0.6rem;
    height: 3rem;
    width: 3rem;
    font-size: 1.3rem;
    line-height: 1.3;
    cursor: pointer;
}

/* ---------------- Info-panels based on dl/dd------------------------*/

/*dl-horizontal removeMarginBottom*/
/*wider-description dl-horizontal removeMarginBottom*/
/* ---------- Basis-Panel der Marginal-Seite ---------- */
div.panel-marginal dl {
    margin-bottom: 0px;
}

div.panel-marginal dl.dl-vertical dd {
    margin-bottom: 5px;
}

div.panel-marginal ul {
    list-style-type: none;
    padding-left: unset;
    margin-bottom: 0px;
}

div.panel-state-deadline dl {
    margin-bottom: 0px;
}

div.panel-state-deadline dl > dt {
    text-align: left;
}

div.panel-state-deadline dt {
    width: 100px;
}

.dl-horizontal-small dt {
    float: left;
    width: 110px;
}

.dl-horizontal-medium dt {
    float: left;
    width: 130px;
}

/* ---------- Substate  ---------- */
div.panel-substate dl {
    margin-bottom: 0px;
}

div.panel-substate dl > dt {
    text-align: left;
}

div.panel-substate dl > dd {
    overflow-x: hidden;
}

/* ---------- Hospital ---------- */
div.panel-hospitalinformation dl {
    margin-bottom: 0px;
}

div.panel-hospitalinformation dl > dd {
    display: grid;
    overflow-wrap: anywhere;
    min-width: 80px;
}

div.panel-hospitalinformation dl > dt {
    width: 200px;
    text-align: left;
}

/* ---------- Conversation Context ---------- */
div.panel-conversation-context dl {
    margin-bottom: 0px;
}

div.panel-conversation-context dl > dd {
    display: grid;
    overflow-wrap: anywhere;
    min-width: 80px;
}

div.panel-conversation-context dl > dt {
    width: 200px;
    text-align: left;
}

/* ---------- User Registration ---------- */
div.panel-pin-registration-context dl {
    margin-bottom: 0px;
}

div.panel-pin-registration-context dl > dt {
    text-align: left;
    font-weight: normal;
}

div.panel-pin-registration-context dl > dd {
    font-weight: bold;
}

/*----------------------------- (Attachment) File Upload-Download-Panel ---------------- */

div.fileUploadDownloadPanelRow {
    margin-bottom: 0.8rem;
}

div.fileUploadDownloadPanelRow:last-child {
    margin-bottom: 0;
}

/*----------------------------- instruction-notes ---------------- */

dl.instruction-notes {
    display: table;
}

dl.instruction-notes > div {
    display: table-row;
}

dl.instruction-notes > div > dt, dl > div > dd {
    display: table-cell;
    border-bottom: 2px solid #b94a48;
    padding: 0.25em;
}

dl.instruction-notes > div > dt {
    font-weight: bold;
    width: 20%;
}

.table-bordered-no-cell-bottom-border td {
    border-bottom: none !important;
}

.details-table-striped > tbody > tr:nth-of-type(4n+3), .details-table-striped > tbody > tr:nth-of-type(4n+4) {
    background-color: #f9f9f9;
}

/* --- sidebar -- */
div.sidebar-left > div {
    margin-top: 20px;
}

/*------------Tabreiter ------------*/

.tab-content {
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

/*--------- Std Tabellen Styling ----------------*/
.column-align-right {
    text-align: right;
}

.column-align-center {
    text-align: center;
}

.column-align-left {
    text-align: left;
}

.mdbBasisauswertungTable {
    width: 100%;
}

.basisauswertungHtmlChunkOutput {
    max-width: 1100px;
}

.datengrundlageHtmlChunkOutput {
    max-width: 1100px;
}

.antwortverteilungHtmlChunkOutput {
    max-width: 1100px;
}

.table-minimum-col-width td {
    min-width: 90px;
}

/* Layout-Ergänzungen */

.min_width_350 {
    min-width: 350px;
}

.min_width_full {
    min-width: 100%;
}

/** Spacing zwischen Elementen außer beim letzten Element **/
.spacing-bottom-3 {
    margin-bottom: 1rem
}

.spacing-bottom-3:last-child {
    margin-bottom: 0;
}

/* ----------------------------- IQTIG Farben ------------------- */

.iqtig_rot {
    color: var(--iqtig-rot);
}

.iqtig_bg_yellow {
    background-color: yellow;
}

/* Class Selector der nur auf Textareas angewendet wird */
textarea.resize-vertical {
    resize: vertical;
}

textarea.resize-none {
    resize: none;
}

.no-p-margin-bottom p:last-child {
    margin-bottom: 0;
}

/* TD-Label START */
.tdlabel {
    display: inline-block;
    padding: .3em .6em .3em .6em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.tdlabel-default {
    background-color: var(--bs-gray);
}

.tdlabel-primary {
    background-color: var(--bs-primary);
}

.tdlabel-success {
    background-color: var(--bs-success);
}

.tdlabel-info {
    background-color: var(--bs-info);
}

.tdlabel-warning {
    background-color: var(--bs-warning);
}

.tdlabel-danger {
    background-color: var(--bs-danger);
}

.tdlabel:empty {
    display: none;
}

/* TD-Label ENDE */


.toggle-container {
    display: flex;
    flex-direction: column;
    /* optional */
    align-items: flex-start;
}

.toggle-container > * {
    width: 100%; /* notwendig um Flexbox korrekt anzuordnen*/
}

.toggle-container .first_div {
    order: 2;
}

.toggle-container .second_div {
    order: 3;
}

.toggle-link {
    order: 1;
}

.toggle-link > a {
    text-decoration: none;
}

.td-text-newline-wrap {
    white-space: pre;
}

.td-copy-link {
    cursor: grab;
}

.download-panel-left-margin {
    margin-left: 15px;
}

/* QV */

.qv-verarbeitungsprotokoll-pre {
    height: 12em;
    overflow-y: auto;
    white-space: pre-line;
    margin: 0;
    border: 0;
}

.form-check-input {
    border: 1px solid #444;
    cursor: pointer;
}

textarea.form-control {
    border: 1px solid #444;
}

.dropdown-menu {
    --bs-dropdown-link-color: var(--bs-body-color); /* ggf. im Theme auslagern */
}

.fit-content {
    /* Funktioniert nur bei Table Layout auto. Quelle: https://stackoverflow.com/questions/11413365/how-to-make-table-cell-shrink-according-to-the-content */
    width: 0.1%;
    white-space: nowrap;
}

.td-collapsable {
    color: var(--bs-primary);
    cursor: pointer;
}

.td-info-icon {
    font-size: 20px;
    color: var(--bs-info);
}
.navbar {
    margin-bottom: 0;
}

.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 0;
}

.navbar-td {
    background-image: linear-gradient(#006064, #006064 60%, #006064);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005051', endColorstr='#ff005051', GradientType=0);
    background-repeat: no-repeat;
    -webkit-filter: none;
    background-color: #006064;
    border-color: #015D6A;
    border-bottom: 0 solid #016A83;
}

.navbar-td .badge {
    background-color: #fff;
    color: #006064;
}

.navbar-td .navbar-brand {
    color: #ffffff;
}

.navbar-td .navbar-brand:hover,
.navbar-td .navbar-brand:focus {
    color: #ffffff;
    background-color: unset;
}

.navbar-td .navbar-text {
    color: #ffffff;
}

.navbar-td .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-td .navbar-nav > li > a:hover,
.navbar-td .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #015D6A;
}

.navbar-td .navbar-nav > .active > a,
.navbar-td .navbar-nav > .active > a:hover,
.navbar-td .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #015D6A;
}

.navbar-td .navbar-nav > .disabled > a,
.navbar-td .navbar-nav > .disabled > a:hover,
.navbar-td .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
}

.navbar-td .navbar-nav > .open > a,
.navbar-td .navbar-nav > .open > a:hover,
.navbar-td .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #015D6A;
}

@media (max-width: 767px) {
    .navbar-td .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #015D6A;
    }

    .navbar-td .navbar-nav .open .dropdown-menu .divider {
        background-color: #015D6A;
    }

    .navbar-td .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }

    .navbar-td .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-td .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: #015D6A;
    }

    .navbar-td .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-td .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-td .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #015D6A;
    }

    .navbar-td .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-td .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-td .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #cccccc;
        background-color: transparent;
    }
}

.navbar-td .navbar-toggle {
    border-color: #015D6A;
}

.navbar-td .navbar-toggle:hover,
.navbar-td .navbar-toggle:focus {
    background-color: #015D6A;
}

.navbar-td .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-td .navbar-collapse,
.navbar-td .navbar-form {
    border-color: #016274;
}

.navbar-td .navbar-link {
    color: #ffffff;
}

.navbar-td .navbar-link:hover {
    color: #ffffff;
}

.navbar-td .btn-link {
    color: #ffffff;
}

.navbar-td .btn-link:hover,
.navbar-td .btn-link:focus {
    color: #ffffff;
}

.navbar-td .btn-link[disabled]:hover,
fieldset[disabled] .navbar-td .btn-link:hover,
.navbar-td .btn-link[disabled]:focus,
fieldset[disabled] .navbar-td .btn-link:focus {
    color: #cccccc;
}
/*
Utility-Klassen für das Finetuning von Wicket-Tabellen (DataTable / FeDataTable).
Insbesondere um das (Scroll-)Verhalten der ersten Spalte zu steuern

Hilfreiche Links, die für die Entwicklung des "Sticky"-Verhaltens genutzt wurden:
- https://www.w3docs.com/snippets/html/how-to-create-a-table-with-a-fixed-header-and-scrollable-body.html
- https://css-tricks.com/position-sticky-and-table-headers
- https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column
- https://codepen.io/capnhairdo/pen/qBaGRBV
 */

.tableSticky {
    width: 100%;
    overflow-x: auto;
}

/* Alle Elemente mit Klasse "tableSticky" sollen Sticky-Position haben, damit kann man fixe Positionen definieren (hier left/top) */
.tableSticky th, .tableSticky .filter-td, .tableSticky td:first-child {
    position: sticky;
}

/* Erste Spalte LINKS fixieren (erster Spalten-Header / Filter-Header  / Spalten-Inhalt) */
.tableSticky > .table-bordered th:first-child, .tableSticky > .table-bordered td:first-child, .tableSticky > .table-bordered .filter-td:first-child {
    left: 0; /* Pos. links festhalten, greift im Verbund mit position:sticky */
    border-left-width: 0; /* damit sich nicht Elemente links 'vorbei' schieben können beim X-Scrollen */
    /* Würde man die width auf 1 setzen hätte man eine Border, die aber beim horizontalen Scrollen mit nach links verschoben wird, obwohl die Zelle
    sticky ist. Das hängt mit der globalen Einstellung border-collapse: collapse auf dem Table Element zusammen. Wenn man diese Einstellung auf separate
    setzt, dann hat man eine Border, dafür aber anderer Probleme in der Darstellung. */
}

/* Spalten-Header-Zeile GANZ OBEN fixieren */
.tableSticky th {
    top: 0; /* Pos. oben festhalten, greift im Verbund mit position:sticky */
}

/* Filter-Header-Zeile OBEN fixieren (mit genug Abstand zum Spalten-Header) */
.tableSticky .filter-td {
    top: 30px;
}

/* Überdeckung je nach Scroll-Richtung regeln: /*

/* "Fixpunkte" links oben (erster Spaltenheader / erster Filter-Header) müssen IMMER oben bleiben */
.tableSticky th:first-child, .tableSticky .filter-td:first-child {
    z-index: 2;
}

/* Inhalts-Zellen der ersten Spalte sollen weitere Spalten-Inhalts-Zellen überdecken */
.tableSticky td:first-child:not(.filter-td:first-child) { /* Filter-TD-Elemente ausschließen, sind ja auch TD-Elemente */
    z-index: 1;
}

/* Filter-Header und Spalten-Header (bis auf den ersten) oben überdeckend lassen */
.tableSticky .td-filter:not(.td-filter:first-child), .tableSticky th:not(th:first-child) {
    z-index: 1;
}