.tree {
   .row {
      margin: 0;
   }

   .col-md-4 {
      padding: 0;
      position: static;
   }

   ul {
      padding-left: 15px;

      .first-branch > ul > li:first-child::before {
         top: 20px;
      }
   }

   li {
      list-style-type: none;
      margin: 0;
      padding: 5px 5px 0 5px;
      position: relative;

      &.collapsed > ul {
         display: none;
      }

      .glyphicon {
         left: -16px;
         top: 10px;
         position: absolute;
         z-index: 98;
         border-radius: 50%;
         text-align: center;
         line-height: 15px;
         height: 15px;
         width: 15px;
         font-size: 8px;
         cursor: pointer;
      }

      label {
         font-size: 11px;
         font-weight: normal;
         margin: 0;
      }

      &::before,
      &::after {
         content: "";
         left: -10px;
         position: absolute;
         right: auto;
      }

      &::before {
         border-left: 1px solid #999;
         height: 100%;
         top: 0;
         width: 1px;
      }

      &::after {
         border-top: 1px solid #999;
         height: 20px;
         top: 18px;
         width: 16px;
      }

      span.btn {
         font-size: 11px;
         text-align: left;
         min-width: 0;
         padding: 4px 7px 2px;
         display: flex;
         align-items: center;

         &:hover {
            text-decoration: none;
         }

         a {
            color: $white;
         }

         &.btn-link {
            color: #424a55;
         }

         input {
            margin: 0 0 0 8px;
         }

         .section-virtual {
            position: static;
            width: 14px;
            height: 14px;
            line-height: 10px;
            font-size: 10px;
            text-align: center;
            margin-left: 6px;
         }

         .section-hidden {
            position: static;
            color: #aab2bd;
            font-size: 13px;
            margin-left: 6px;
            line-height: 10px;
         }
      }

      &.parent_li > span {
         cursor: pointer;
      }
   }

   .has-child {
      display: flex;
      align-items: center;
   }
}

.tree > ul > li::before, .tree > ul > li::after {
   border: 0;
}

.tree li:last-child::before {
   height: 18px;
}

.tree-param {
   font-size: 11px;
   max-width: 460px;

   li {
      padding-right: 0;

      &:hover > span > .name,
      &:hover > span > .has-child > .name {
         text-decoration: underline;
      }
   }

   li > span {
      display: flex;
      padding: 5px 7px 0;
   }

   label {
      cursor: pointer;
      width: 75px;

      input {
         margin: 0;
         position: relative;
         top: -2px;
         vertical-align: middle;
      }
   }

   .name {
      overflow: hidden;
      padding-right: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 150px);
   }

   .has-child {
      display: flex;
      width: 100%;
   }
}


.tree-highlight li:hover {
   background: rgba(0, 0, 0, .03);
}