/* Ihre bestehenden Styles bleiben unverändert */

/* Überschrift */
h1 {
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    color: #102d3f;
}

/* Body */
body {
    /* display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh; /* Sorgt dafür, dass der Inhalt vertikal zentriert ist */
    /* margin: 0; */
    padding-left: 20px !important;
    padding-right: 20px !important;
    background-color: #f8f7f5; /* Optional: Hintergrundfarbe */
}

/* Diagramm */
#genderChart {
    width: 300px !important;
    height: 300px !important;
}

/* Begrüßungstext */
.welcome-text {
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    color: #102d3f;
}

/* Standardtext */
.def-text {
    font-family: 'Calibri', sans-serif;
    color: #102d3f;
}

/* Obere Abstandsfläche */
.top-spacing {
    height: 70px; /* Passen Sie diesen Wert an die Höhe Ihres Menüs an */
}

/* Inhaltscontainer */
.content-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
}

/* Neue Styles für die "Daten Export"-Ansicht */

/* Styles für das Export-Formular */
.export-form {
    margin-top: 20px;
}

.export-form label {
    display: block;
    margin-bottom: 10px;
}

/* Spezifischer Button für den Export */
.export-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff; /* Ihre gewünschte Farbe */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.export-button:hover {
    background-color: #0056b3; /* Ihre gewünschte Hover-Farbe */
}

/* Styles für die Tabelle */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

thead th {
    background-color: #f2f2f2;
    padding: 10px;
}

tbody td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
}

/* Styles für die Patienten- und CRF-Zeilen */
.patient-row td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.crf-row td {
    padding: 0;
    border: none;
}

.crf-row table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.crf-row table th,
.crf-row table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Style für den Toggle-Button */
.toggle-crfs {
    cursor: pointer;
    margin-right: 5px;
}

.badge {
    margin-left: 5px;
}

.badge-secondary {
    background-color: #6c757d;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.badge-success {
    background-color: #28a745;
}

.badge-info {
    background-color: #17a2b8;
}

.badge-danger {
    background-color: #dc3545;
}

.legend-color-axis-ii {
    background-color: rgb(224, 0, 1,0.4);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
}

.legend-color-axis-i {
    background-color: rgb(242, 188, 101,0.4);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
}

.legend-color-non-patient {
    background-color: rgb(146, 183, 128,0.4);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
}

.legend-color-undefined {
    background-color: rgb(128, 128, 128,0.4);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
}