li.list {
    padding: 10px 0;
}
ul.folder-contents {
    margin-left: 20px; /* Indent folder contents */
    list-style-type: none;
    padding: 0;
}
ul.subfolder-contents{
    display: none; /* Start folded (hidden) */
    list-style-type: none;
    padding: 0;
}
.file-size {
    float: right;
    padding: 0 15px;
    color: #b51621;
}
/* Common styles for all icons */
i {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    margin-right: 15px;
    margin-left: 5px;
}
/* Default fallback icon style */
.icon-default::before {
    content: "\f15b"; /* Unicode character code for the "file-alt" icon in Font Awesome */
    color: white;
}
/* Folder icon style */
.icon-folder-open::before {
    content: "\f07c";
    color: #b51621;
    cursor: pointer;
}
.icon-folder-closed::before {
    content: "\f07b";
    color: #b51621;
    cursor: pointer;
}
/* Generated CSS for file extension icons */
/* Documents */
.icon-pdf::before {
    content: "\f1c1"; /* PDF document */
    color: #FF5733; /* Reddish-Orange */
}

.icon-doc::before,
.icon-docx::before {
    content: "\f15c"; /* File Alt (for Word documents) */
    color: #3498db; /* Blue */
}

.icon-txt::before {
    content: "\f0f6"; /* File Alt (for Text documents) */
    color: #2ecc71; /* Green */
}

.icon-md::before {
    content: "\f15c"; /* File Alt (for Markdown documents) */
    color: #2ecc71; /* Green */
}

.icon-ppt::before,
.icon-pptx::before {
    content: "\f1c4"; /* PowerPoint presentation */
    color: #e74c3c; /* Red */
}

.icon-xls::before,
.icon-xlsx::before {
    content: "\f1c3"; /* Excel spreadsheet */
    color: #f1c40f; /* Yellow */
}

.icon-csv::before {
    content: "\f1c0"; /* CSV file */
    color: #f39c12; /* Orange */
}

.icon-rtf::before {
    content: "\f15c"; /* File Alt (for RTF documents) */
    color: #9b59b6; /* Purple */
}

/* Compressed Files */
.icon-zip::before {
    content: "\f1c6"; /* Archive */
    color: #1abc9c; /* Turquoise */
}

.icon-tar::before {
    content: "\f1c6"; /* Archive (similar to ZIP) */
    color: #1abc9c; /* Turquoise */
}

.icon-gz::before {
    content: "\f1c6"; /* Archive (similar to ZIP) */
    color: #1abc9c; /* Turquoise */
}

.icon-rar::before {
    content: "\f1c6"; /* Archive (similar to ZIP) */
    color: #1abc9c; /* Turquoise */
}

/* Executable/Scripts */
.icon-sh::before {
    content: "\f02e"; /* Terminal */
    color: #f39c12; /* Orange */
}

.icon-bat::before {
    content: "\f02e"; /* Terminal */
    color: #f39c12; /* Orange */
}

.icon-exe::before {
    content: "\f17b"; /* Cog */
    color: #f39c12; /* Orange */
}

.icon-ps1::before {
    content: "\f02e"; /* Terminal */
    color: #f39c12; /* Orange */
}

.icon-py::before {
    content: "\f02d"; /* Python */
    color: #3498db; /* Blue */
}

.icon-js::before {
    content: "\f023"; /* Code */
    color: #f39c12; /* Orange */
}

.icon-php::before {
    content: "\f069"; /* PHP */
    color: #f39c12; /* Orange */
}

.icon-java::before {
    content: "\f0b1"; /* Coffee */
    color: #f39c12; /* Orange */
}

.icon-cpp::before {
    content: "\f0b2"; /* Code Branch */
    color: #f39c12; /* Orange */
}

.icon-rb::before {
    content: "\f178"; /* Gem */
    color: #f39c12; /* Orange */
}

.icon-c::before {
    content: "\f1c3"; /* Cogs */
    color: #f39c12; /* Orange */
}

.icon-css::before {
    content: "\f219"; /* CSS3 */
    color: #e74c3c; /* Red */
}

.icon-jsx::before {
    content: "\f288"; /* React */
    color: #f39c12; /* Orange */
}

.icon-html::before {
    content: "\f13b"; /* Html5 */
    color: #e74c3c; /* Red */
}

/* Media Files */
.icon-avi::before,
.icon-wmv::before,
.icon-mov::before,
.icon-mp4::before,
.icon-flv::before,
.icon-webm::before {
    content: "\f008"; /* Film */
    color: #e74c3c; /* Red */
}

.icon-mp3::before,
.icon-ogg::before,
.icon-wav::before,
.icon-flac::before,
.icon-aac::before,
.icon-wma::before,
.icon-m4a::before,
.icon-ape::before {
    content: "\f28b"; /* Music */
    color: #2ecc71; /* Green */
}

.icon-jpg::before,
.icon-jpeg::before,
.icon-png::before,
.icon-gif::before,
.icon-bmp::before,
.icon-svg::before,
.icon-tiff::before,
.icon-webp::before {
    content: "\f03e"; /* Image */
    color: #e74c3c; /* Red */
}

.icon-psd::before,
.icon-ai::before,
.icon-eps::before,
.icon-indd::before,
.icon-raw::before,
.icon-tiff::before,
.icon-webp::before,
.icon-mkv::before,
.icon-ape::before {
    content: "\f03d"; /* Image */
    color: #e74c3c; /* Red */
}