body {
    font-family: Arial, sans-serif;
    margin: 20px;
    color: #333;
}

table.file_folder {
    width: 95%;
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
    border: 0;
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 0.9em;
    font-weight: light;
}

table.file_folder th, table.file_folder td {
    padding: 8px 0px;
    vertical-align: top;
}

table.file_folder th:nth-child(1) { min-width: 325px; width: 40%; text-align: left; }
table.file_folder th:nth-child(2) { width: auto; }
table.file_folder th:nth-child(3) { min-width: 525px; width: 40%; }
table.file_folder th:nth-child(4) { width: auto; }
table.file_folder th:nth-child(5) { min-width: 225px; width: 20%; text-align: right; }

table.list {
    width: 95%;
    border-collapse: collapse;
    margin-left: auto; 
    margin-right: auto;
}

table.list th, table.list td {
    padding: 4px 0px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    font-size: 0.9em;
}

table.list th a {
    color: #333;
    text-decoration: none;
}

table.list a {
    color: #0066cc;
    text-decoration: none;
}

table.list a:hover {
    color: #0066cc;
    text-decoration: underline;
}

table.list th a:hover {
    text-decoration: underline;
}

table.list tr:hover {
    background-color: #f2f2f2;
}

img.icon {
    width: 20px;
}

table.list th:nth-child(1) { text-align: left; background-color: #e8e8e8; font-size: 1em; }
table.list th:nth-child(2) { text-align: left; background-color: #e8e8e8; font-size: 1em; }
table.list th:nth-child(3) { text-align: left; background-color: #e8e8e8; font-size: 1em; }
table.list th:nth-child(4) { text-align: right; background-color: #e8e8e8; font-size: 1em; }
table.list th:nth-child(5) { text-align: right; background-color: #e8e8e8; font-size: 1em; }
table.list th:nth-child(6) { text-align: right; background-color: #e8e8e8; font-size: 1em; padding: 8px 20px; }

table.list td:nth-child(1) { width: 25px; text-align: left; }
table.list td:nth-child(2) { width: auto; text-align: left; overflow-x: clip; }
table.list table.list td:nth-child(3) { width: 75px; text-align: left; }
table.list td:nth-child(4) { width: 100px; text-align: right; }
table.list td:nth-child(5) { width: 150px; text-align: right; white-space: nowrap; }
table.list td:nth-child(6) { width: 350px; text-align: right; }

.in-info {
    color: #777;
    font-style: italic;
    font-size: 0.85em;
    margin-left: 5px;
}

.in-info i {
    color: #555;
}

form {
    margin-bottom: 10px;
}

form input[type="text"],
form input[type="password"],
form input[type="file"] {
    padding: 5px;
    margin-right: 5px;
}

form button {
    padding: 5px 5px;
}

.file-label {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f0f0f0;
    color: 000;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-right: 10px;
    user-select: none;
}

.file-label:hover {
    background-color: #e0e0e0;
}

.file-name {
    font-style: italic;
    font-size: 0.9em;
    margin-right: 10px;
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

button {
    padding: 5px 10px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #e0e0e0;
}

.flash {
    margin: auto;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: bold;
    transition: opacity 1.5s ease, max-height 1s ease, margin 1.5s ease, padding 1.5s ease;
    max-height: 200px; /* genug für mehrere Zeilen */
    max-width: 93%;
    overflow: hidden;
    }

.flash.success {
    background-color: #e0ffe0;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.flash.error {
    background-color: #ffe0e0;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.flash.hide {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.breadcrumb {
    margin: 10px 0;
    font-size: 1em;
}

.breadcrumb a {
    text-decoration: none;
    color: #007acc;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

input.pw {
    width: 80px;
}

input.small-input {
    width: 80px;
}