div.sp-shade {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
div.sp-popup {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 30%; /* Could be more or less, depending on screen size */
    min-width: 300px; /* Could be more or less, depending on screen size */
    text-align: left;
}
.sp-popup-buttons {
    text-align: right;
}
div.sp-popup.sp-confirm-popup {
    width: 50%; /* Could be more or less, depending on screen size */
    min-width: 600px; /* Could be more or less, depending on screen size */
    text-align: left;
}
div.sp-folder-picker-title {
    font-size: 1.4em;
}
div.sp-folder-picker {
    margin: 20px 0; /* 15% from the top and centered */
    border: 1px solid #888;
    max-height: 400px;
    overflow: auto;
}
div.sp-folder-results {
    min-width: 600px;
    width: 50%;
    margin: 0 auto;
    margin-top: 20px;
    border: 2px solid #c2d9dd;
}
.sp-folder-tree-title {
    padding: 15px 0 15px;
    font-size: 1.4em;
    font-weight: bold;
    background-color: #e2faff;
}
.sp-folder-tree-results {
    text-align:left;
    padding: 15px;
}
UL div.sp-file-status {
    display:flex;
    float:right;
    font-size: 0.8em;
}
.sp-eye-open:before {
    font: 400 17px/1 dashicons;
    content: "\f177";
}
.sp-options:before {
    font: 400 17px/1 dashicons;
    content: "\f111";
    color: #286b7d;
    font-size: 2.5em;
}
.sp-thumbs-up:before {
    font: 400 17px/1 dashicons;
    content: "\f529";
    color: #286b7d;
    font-size: 2.5em;
}

UL.jqueryFileTree LI.directory.selected {
    background-color: #209fd2;
}

UL.jqueryFileTree {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  line-height: 18px;
  padding: 0;
  margin: 0;
  display: none;
}
UL.jqueryFileTree LI {
  list-style: none;
  padding: 0;
  padding-left: 20px;
  margin: 0;
  white-space: nowrap;
  font-size: 1.4em;
  min-height: 22px;
}
UL.jqueryFileTree LI.directory {
  background: url(../img/file-tree/directory.png) left top no-repeat;
}
UL.jqueryFileTree LI.directory-locked {
  background: url(../img/file-tree/directory-lock.png) left top no-repeat;
}
UL.jqueryFileTree LI.expanded {
  background: url(../img/file-tree/folder_open.png) left top no-repeat;
}
UL.jqueryFileTree LI.file {
  background: url(../img/file-tree/file.png) left top no-repeat;
}
UL.jqueryFileTree LI.file-locked {
  background: url(../img/file-tree/file-lock.png) left top no-repeat !important;
}
UL.jqueryFileTree LI.wait {
  background: url(../img/file-tree/spinner.gif) left top no-repeat;
}
UL.jqueryFileTree LI.selected > a {
  font-weight: bold;
}
UL.jqueryFileTree LI.ext_3gp {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_afp {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_afpa {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_asp {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_aspx {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_avi {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_bat {
  background: url(../img/file-tree/application.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_bmp {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_c {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_cfm {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_cgi {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_com {
  background: url(../img/file-tree/application.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_cpp {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_css {
  background: url(../img/file-tree/css.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_doc {
  background: url(../img/file-tree/doc.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_exe {
  background: url(../img/file-tree/application.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_gif {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_fla {
  background: url(../img/file-tree/flash.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_h {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_htm {
  background: url(../img/file-tree/html.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_html {
  background: url(../img/file-tree/html.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_jar {
  background: url(../img/file-tree/java.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_jpg {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_jpeg {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_js {
  background: url(../img/file-tree/script.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_lasso {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_log {
  background: url(../img/file-tree/txt.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_m4p {
  background: url(../img/file-tree/music.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_mov {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_mp3 {
  background: url(../img/file-tree/music.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_mp4 {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_mpg {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_mpeg {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_ogg {
  background: url(../img/file-tree/music.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_ogv {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_pcx {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_pdf {
  background: url(../img/file-tree/pdf.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_php {
  background: url(../img/file-tree/php.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_png {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_ppt {
  background: url(../img/file-tree/ppt.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_psd {
  background: url(../img/file-tree/psd.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_pl {
  background: url(../img/file-tree/script.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_py {
  background: url(../img/file-tree/script.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_rb {
  background: url(../img/file-tree/ruby.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_rbx {
  background: url(../img/file-tree/ruby.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_rhtml {
  background: url(../img/file-tree/ruby.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_rpm {
  background: url(../img/file-tree/linux.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_ruby {
  background: url(../img/file-tree/ruby.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_sql {
  background: url(../img/file-tree/db.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_swf {
  background: url(../img/file-tree/flash.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_tif {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_tiff {
  background: url(../img/file-tree/picture.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_txt {
  background: url(../img/file-tree/txt.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_vb {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_wav {
  background: url(../img/file-tree/music.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_webm {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_wmv {
  background: url(../img/file-tree/film.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_xls {
  background: url(../img/file-tree/xls.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_xml {
  background: url(../img/file-tree/code.png) left top no-repeat;
}
UL.jqueryFileTree LI.ext_zip {
  background: url(../img/file-tree/zip.png) left top no-repeat;
}
UL.jqueryFileTree A {
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 0 2px;
  cursor: pointer;
  overflow:hidden;
  width: 100%;
}
.sp-folder-results UL.jqueryFileTree LI > A {
    position:relative;
}
.sp-folder-results UL.jqueryFileTree LI > A:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(80%, #ffffff), color-stop(100%, #ffffff));
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
    pointer-events: none;
}
.sp-folder-results UL.jqueryFileTree LI.directory.selected > A:after,
.sp-folder-results UL.jqueryFileTree LI.directory.selected LI > A:after {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(80%, #209fd2), color-stop(100%, #209fd2));
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #209fd2 80%, #209fd2 100%);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #209fd2 80%, #209fd2 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #209fd2 80%, #209fd2 100%);
    pointer-events: none;
}
.sp-folder-results UL.jqueryFileTree LI > A {
    width: calc(100% - 180px);
}
UL.jqueryFileTree A:hover {
  background: #BDF;
}