.tree {
        font-family: Arial, sans-serif;
        background-color: #FFFFFF;
      }

      .tree ul {
        list-style-type: none;
        padding-left: 20px;
      }

      .tree ul ul {
        margin-top: 5px;
        display: none;
      }

      .tree li {
        margin: 0;
        padding: 0 0px;
        line-height: 20px;
        color: #333;
        margin-top: 15px;
      }

      .tree li i {
        margin-right: 5px;
      }

      .tree li:last-child {
        padding-bottom: 5px;
      }

      .tree .caret {
        cursor: pointer;
      }

      .tree .caret::before {
        content: "";
        background-image: url(folder.gif);
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 2px;
        margin-left: -20px;
        vertical-align: middle;
      }

      .tree .caret-down::before {
        background-image: url(folder_open.gif);
      }

      .tree .nested {
        display: none;
      }
      .nested li {
        text-align: left;
      }
      .tree .active {
        display: block;
      }