#jao {
    padding: 10px;
}

ul.jaofiletree {
    font-size: 16px;
    line-height: 20px !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
}

ul.jaofiletree li {
    list-style: none;
    padding: 0 !important;
    padding-left: 15px !important;
    margin: 10px 0 !important;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
    position: relative;
}

ul.jaofiletree li.expanded .icon-open-close:before {
    margin-left: -1px;
}

ul.jaofiletree li.collapsed .icon-open-close:before {
    margin-left: 1px;
}
ul.jaofiletree .zmdi-folder,
ul.jaofiletree .zmdi-folder-open {
    margin-right: 10px;
}

ul.jaofiletree a {
    font-family: arial;
    color: #666;
    text-decoration: none;
    box-shadow: none;
    display: inline-block;
    padding: 0 2px;
    font-size: 16px;
    text-transform: none;
    line-height: 22px;
    vertical-align: top;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
}

ul.jaofiletree a:hover {
    font-weight: bold;
}

ul.jaofiletree li.drive > a,
ul.jaofiletree li.selected > a {
    font-weight: bold;
}

.jaofiletree li.directory .icon-open-close:before {
    position: relative;
    top: 0px;
    display: inline-block;
    font-family: Material-Design-Iconic-Font;
    font-size: 17px;
}

.icon-open-close {
    width: 16px;
    height: 22px;
    display: inline-block;
    margin-right: 0;
    position: absolute;
    text-align: center;
    top: 10px;
}

.wpfd-content .wpfd-container .wpfd-foldertree ul.jaofiletree li svg {
    margin-left: 18px;
    flex-shrink: 0;
}
.icon-open-close:hover {
    cursor: pointer;
}

.jaofiletree li.zmdi-perm-media {
    font-size: 14px
}

.jaofiletree .zmdi-folder,
.jaofiletree .zmdi-folder-open {
    font-size: 22px;
    color: #888888;
    font-weight: bold;
    margin-right: 5px;
}

/*. jaofiletree li.drive { background: url(../images/jao/drive.png) left top no-repeat; } */

.jaofiletree li.file {
    background: url(../images/jao/file.png) left top no-repeat;
}

.jaofiletree li.wait {
    background: url(../images/jao/spinner.gif) left top no-repeat;
}

.jaofiletree li.directory .icon-open-close:before {
    position: relative;
    top: 0px;
    display: inline-block;
    font-family: Material-Design-Iconic-Font;
    font-size: 17px;
}

.jaofiletree li.directory.expanded .icon-open-close:before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="9.379" height="5.346" viewBox="0 0 9.379 5.346"%3E%3Cg id="arrow-down-sign-to-navigate_9_" data-name="arrow-down-sign-to-navigate (9)" transform="translate(-0.001 -97.141)"%3E%3Cpath id="Path_29" data-name="Path 29" d="M4.69,102.487a.655.655,0,0,1-.464-.192L.193,98.262a.657.657,0,1,1,.929-.929L4.69,100.9l3.568-3.568a.657.657,0,1,1,.929.929l-4.033,4.033A.655.655,0,0,1,4.69,102.487Z" transform="translate(9.381 199.627) rotate(180)"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
    display: inline-block; /* Ensure it behaves like an inline element */
    width: 20px; /* Adjust dimensions as needed */
    height: 20px;
    margin-right: 5px; /* Adjust spacing between icon and text */
   margin-right: 4px;
    vertical-align: middle;
    top: -11px;
    margin-left: -5px;
    vertical-align: middle; /* Align icon vertically with text */
}

.jaofiletree li.directory.collapsed .icon-open-close:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9.379" height="5.347" viewBox="0 0 9.379 5.347"><path d="M4.689,0a.655.655,0,0,0-.464.192L.192,4.225a.657.657,0,0,0,.929.929L4.689,1.586,8.258,5.154a.657.657,0,1,0,.929-.929L5.154.192A.655.655,0,0,0,4.689,0Z" transform="translate(9.379 5.347) rotate(180)"/></svg>');
    display: inline-block; /* Ensure it behaves like an inline element */
    width: 20px; /* Adjust dimensions as needed */
    height: 20px;
    margin-right: 5px; /* Adjust spacing between icon and text */
   margin-right: 4px;
    vertical-align: middle;
    top: -11px;
    margin-left: -5px;
    vertical-align: middle; /* Align icon vertically with text */
    color: #888;

}
ul#back span.divider {
    display: none;
}
ul#back span:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.396" height="14.9" viewBox="0 0 17.396 14.9"><path id="arrow-small-left" d="M22.153,12.213H9.728l4.088-4.088a1.243,1.243,0,0,0-1.752-1.764L6.733,11.7A2.485,2.485,0,0,0,6,13.455H6a2.485,2.485,0,0,0,.733,1.74l5.33,5.343a1.243,1.243,0,0,0,1.752-1.764L9.728,14.7H22.153a1.243,1.243,0,1,0,0-2.485Z" transform="translate(-6 -5.999)"/></svg>');
    display: inline-block;
    width: 17.396px; /* Set width according to the SVG width */
    height: 14.9px; /* Set height according to the SVG height */
    margin-right: 20px;
}
.jaofiletree li.directory.selected {
    color: #888888;
}

.jaofiletree li.directory.selected > a {
    color: darkgray ;
    font-weight: bold;
}

.jaofiletree li.directory.selected > .zmdi-folder {
    color: darkgray;
}
.jaofiletree li.directory.selected > .zmdi-folder:before {
    color: darkgray;
}

.jaofiletree li.directory.selected > .icon-open-close:before {
    color: darkgray;
}

.jaofiletree li.directory.collapsed .icon-open-close:hover:before {
    content: '\f2f6';
    color: #555;
    font-size: 22px;
}

.jaofiletree .scrolly {
    overflow: auto;
}