/* Base styles for the tree view */
.tree-view {
    list-style-type: none; /* Remove bullet points */
    padding-left: 20px;
}


/* ... (other styles) ... */

.tree-item {
    cursor: pointer;
}

/* Styles for closed folders */
.tree-view.closed {
    display: none;
}

/* Common styles for directory toggles */
.directory-toggle::before {
    content: url('http://cert.tolue.net/wp-content/uploads/2023/08/open-folder.svg');
    color: #999;
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 4px; /* Add 4px of padding to the bottom */
    vertical-align: middle;
    transition: content 0.2s; /* Smooth transition when changing content */
}

/* Styles for open directory toggles */
.tree-view:not(.closed) .directory-toggle::before {
    content: url('http://cert.tolue.net/wp-content/uploads/2023/08/folder-icon.svg'); /* Use the open folder image */
    color: #999;
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 4px; /* Add 4px of padding to the bottom */
    vertical-align: middle;
}

/* Styles for file links */
.file-link {
    text-decoration: none;
    color: #333;
}

/* Hover effect for file links */
.file-link:hover {
    text-decoration: underline;
}
/* Adjust the size of the file icons */
.file-icon {
    width: 33px;
    height: 33px;
    vertical-align: middle;
    margin-right: 10px; /* Add some spacing between icon and link text */
}