.treeview, .treeview ul { padding: 0; margin: 0; list-style: none; width : 100%; }
.treeview ul { margin-top: 4px; }
.treeview .hitarea { background: url(Images/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer; }
.hitarea { display: inline; float:none; }
.treeview li { margin: 0; padding: 3px 0pt 3px 16px; }
.treeview a.selected { font-weight: bold; }
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { cursor: pointer; }

/* Mobile Devices */
@media (max-width: 768px) {
    .treeview li { 
        background: none !important; 
    }
    .treeview .hitarea {
        background: none !important; 
    }
    .treeview ul { 
        margin-top: 0 !important; 
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1284px) {
    .treeview li { 
        background: none !important; 
    }
    .treeview .hitarea {
        background: none !important; 
    }
    .treeview ul { 
        margin-top: 0 !important; 
    }
}

/* PC Part */
@media (min-width: 1285px) {
    .treeview li { 
        background: url(Images/treeview-default-line.gif) 0 0 no-repeat; 
    }
    .treeview {height: 100%; overflow: auto;}
}

.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(Images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(Images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(Images/treeview-red.gif); } 
.treeview-black li { background-image: url(Images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(Images/treeview-black.gif); }  
.treeview-gray li { background-image: url(Images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(Images/treeview-gray.gif); } 
.treeview-famfamfam li { background-image: url(Images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(Images/treeview-famfamfam.gif); } 
.treeview .placeholder { background: url(Images/ajax-loader.gif) 0 0 no-repeat; height: 16px; width: 16px; display: block; }
.filetree li {padding: 3px 0 2px 16px;}

/* Mobile Devices */
@media (max-width: 768px) {
    .filetree span.folder, .filetree span.file {
        font-size : 13pt;
        padding: 1px 0 0 29px;
        height: 40px;
        line-height: 40px;
        background-position: left !important;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
    }
    .filetree span.folder {
        background-color: none !important;
    }
    .filetree span.file {
        background-color: none !important;
    }
    .filetree li {
        padding: 0 !important;
        padding-left: 16px !important;
    }
    li[subtype="shortcut"] {
        padding: 0 !important;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1284px) {
    .filetree span.folder, .filetree span.file {
        font-size : 13pt;
        height: 40px;
        line-height: 40px;
        background-position: left !important;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
    }
    .filetree span.folder {
        background-color: none !important;
    }
    .filetree span.file {
        background-color: none !important;
    }
    .filetree li { 
        padding: 0 !important;
        padding-left: 16px !important;
    }
    li[subtype="shortcut"] {
        padding: 0 !important;
        /* padding-left: 16px !important; */
    }
}

/* PC Part */
@media (min-width: 1285px) {
    .filetree span.folder, .filetree span.file {
        font-size : 10pt;
    }
}

.filetree span.folder, .filetree span.file { display: block; }
.filetree span.folder {background: url(Images/folder.png) 0 0 no-repeat;text-overflow: ellipsis;white-space: nowrap;text-transform: uppercase;color: #747474;font-size: 0.9vw;margin-top: 4px;margin-bottom: 4px;line-height: 28px;}
.filetree li.expandable span.folder {}
.filetree span.file {
    cursor: pointer;
    background-size: 19px 19px !important;
    background-position: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #747474;
    background: none !important;
    font-size: 0.6vw;
    height: 20px;
}

.filetree li span.folder i {
    color: #1e5090;
    font-size: 18px;
}