/* =========================================================
   Apache Directory Listing
   Modern / kompakt
   ========================================================= */

html {
    background: #f3f5f7;
}

body {
    margin: 0;
    padding: 0 0 25px 0;

    background: #f3f5f7;
    color: #263238;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 14px;
}

/* =========================================================
   Eigener Kopfbereich
   ========================================================= */

.directory-header {
    margin: 0;
    padding: 17px 22px 15px 22px;

    background: #263238;
    color: white;

    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.directory-title {
    font-size: 21px;
    font-weight: 500;
}

.directory-path {
    margin-top: 7px;

    font-size: 13px;
    color: #b0bec5;
}

.directory-path a {
    color: #cfd8dc;
    text-decoration: none;
}

.directory-path a:hover {
    color: white;
    text-decoration: underline;
}

.directory-path span {
    padding: 0 7px;
    color: #78909c;
}

.directory-path strong {
    color: white;
    font-weight: 500;
}

/* =========================================================
   Apache-Standardüberschrift ausblenden
   ========================================================= */

h1 {
    display: none;
}

/* =========================================================
   Tabelle
   ========================================================= */

#indexlist {
    width: calc(100% - 30px);

    margin: 15px;

    border-collapse: collapse;

    background: white;

    border-radius: 7px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}

/* =========================================================
   Tabellenkopf
   ========================================================= */

#indexlist tr.indexhead th {
    padding: 8px 10px;

    background: #e8ecef;

    color: #455a64;

    font-size: 12px;
    font-weight: 600;

    border-bottom: 1px solid #d5dadd;
}

#indexlist tr.indexhead a {
    color: #455a64;
    text-decoration: none;
}

#indexlist tr.indexhead a:hover {
    color: #1565c0;
}

/* =========================================================
   Zeilen
   ========================================================= */

#indexlist tr:not(.indexhead) td {
    padding: 6px 10px;

    border-bottom: 1px solid #edf0f1;

    line-height: 1.25;
}

#indexlist tr:last-child td {
    border-bottom: none;
}

/* =========================================================
   Hover
   ========================================================= */

#indexlist tr:not(.indexhead):hover td {
    background: #f5f8fa;
}

/* =========================================================
   Apache-Icon-Spalte komplett entfernen
   ========================================================= */

#indexlist .indexcolicon {
    display: none;
}

/* =========================================================
   Dateiname
   ========================================================= */

#indexlist .indexcolname {
    width: auto;
    text-align: left;
}

#indexlist .indexcolname a {
    color: #1565c0;

    text-decoration: none;

    font-weight: 500;
}

#indexlist .indexcolname a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* =========================================================
   Eigenes Datei-Symbol
   ========================================================= */

#indexlist .indexcolname a::before {
    content: "📄";

    display: inline-block;

    width: 27px;

    margin-right: 2px;

    text-align: center;

    font-size: 15px;
}

/* =========================================================
   Parent Directory
   ========================================================= */

#indexlist .indexcolname a[href="../"]::before {
    content: "⬆️";
}

#indexlist .indexcolname a[href="../"] {
    font-weight: 600;
}

/* =========================================================
   Verzeichnisse
   ========================================================= */

#indexlist .indexcolname a[href$="/"]::before {
    content: "📁";
}

/* =========================================================
   Shell
   ========================================================= */

#indexlist .indexcolname a[href$=".sh"]::before {
    content: "⚙️";
}

/* =========================================================
   PDF
   ========================================================= */

#indexlist .indexcolname a[href$=".pdf"]::before,
#indexlist .indexcolname a[href$=".PDF"]::before {
    content: "📕";
}

/* =========================================================
   ZIP / Archive
   ========================================================= */

#indexlist .indexcolname a[href$=".zip"]::before,
#indexlist .indexcolname a[href$=".tar"]::before,
#indexlist .indexcolname a[href$=".gz"]::before,
#indexlist .indexcolname a[href$=".tgz"]::before,
#indexlist .indexcolname a[href$=".7z"]::before {
    content: "📦";
}

/* =========================================================
   SQL
   ========================================================= */

#indexlist .indexcolname a[href$=".sql"]::before {
    content: "🗄️";
}

/* =========================================================
   HTML
   ========================================================= */

#indexlist .indexcolname a[href$=".html"]::before,
#indexlist .indexcolname a[href$=".htm"]::before {
    content: "🌐";
}

/* =========================================================
   CSS
   ========================================================= */

#indexlist .indexcolname a[href$=".css"]::before {
    content: "🎨";
}

/* =========================================================
   JavaScript
   ========================================================= */

#indexlist .indexcolname a[href$=".js"]::before {
    content: "📜";
}

/* =========================================================
   PHP
   ========================================================= */

#indexlist .indexcolname a[href$=".php"]::before {
    content: "🐘";
}

/* =========================================================
   Bilder
   ========================================================= */

#indexlist .indexcolname a[href$=".jpg"]::before,
#indexlist .indexcolname a[href$=".jpeg"]::before,
#indexlist .indexcolname a[href$=".png"]::before,
#indexlist .indexcolname a[href$=".gif"]::before,
#indexlist .indexcolname a[href$=".webp"]::before,
#indexlist .indexcolname a[href$=".svg"]::before {
    content: "🖼️";
}

/* =========================================================
   Text
   ========================================================= */

#indexlist .indexcolname a[href$=".txt"]::before {
    content: "📝";
}

/* =========================================================
   Word
   ========================================================= */

#indexlist .indexcolname a[href$=".doc"]::before,
#indexlist .indexcolname a[href$=".docx"]::before {
    content: "📘";
}

/* =========================================================
   Excel
   ========================================================= */

#indexlist .indexcolname a[href$=".xls"]::before,
#indexlist .indexcolname a[href$=".xlsx"]::before {
    content: "📊";
}

/* =========================================================
   PowerPoint
   ========================================================= */

#indexlist .indexcolname a[href$=".ppt"]::before,
#indexlist .indexcolname a[href$=".pptx"]::before {
    content: "📽️";
}

/* =========================================================
   Datum
   ========================================================= */

#indexlist .indexcollastmod {
    width: 150px;

    white-space: nowrap;

    text-align: right;

    color: #607d8b;
}

/* =========================================================
   Dateigröße
   ========================================================= */

#indexlist .indexcolsize {
    width: 65px;

    white-space: nowrap;

    text-align: right;

    color: #607d8b;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 650px) {

    .directory-header {
        padding: 13px 15px;
    }

    .directory-title {
        font-size: 18px;
    }

    .directory-path {
        font-size: 12px;
    }

    #indexlist {
        width: calc(100% - 12px);
        margin: 6px;
    }

    #indexlist tr.indexhead th,
    #indexlist tr:not(.indexhead) td {
        padding: 6px 7px;
    }

    #indexlist .indexcollastmod {
        display: none;
    }

    #indexlist .indexcolsize {
        width: 55px;
    }
}