::ng-deep mat-tree.qms-navigation-drawer-container {

  padding: 0.25rem!important;
  .mat-tree-node {
    min-width: 272px !important;
    height   : 48px !important;
  }

  .mat-tree-node {
    min-height: 34px;
    cursor: pointer !important;

    &.active {
      background-color: #F2F7FD;
      color           : #1954A9 !important;

      img {
        filter: opacity(0.5) drop-shadow(0 0 0 #1954A9);
      }

      &:hover {
        background-color: #E5EEFB !important;
      }
    }

    .tree-content {
      width      : 100%;
      position   : relative;
      align-items: center;
    }

    .arrow-icon {
      color: #00324e;
    }

    .collapse-expand-icon {
      color: #3e57b7;

      &:hover {
        background: rgba(0, 0, 0, 0.08);
      }
    }

    .add-icon {
      &:hover {
        background: rgba(0, 0, 0, 0.08);
      }
    }

    .left-icon {
      color: #919191;
    }

    &.expand-node {
      padding-left: 0px;
      position    : static;
      height      : 32px;
      left        : calc(50% - 216px/2);
      top         : 0px;
      font-family : Open Sans;
      font-style  : normal;
      font-weight : normal;
      font-size   : 14px;
      line-height : 19px;
      display     : flex;
      align-items : center;
      color       : #1954A9;
      flex        : none;
      order       : 0;
      align-self  : stretch;
      flex-grow   : 1;

      ::ng-deep mat-icon {
        color: #1954A9;
      }

      &:hover {
        background-color: #E5EEFB !important;
      }
    }

    &.collapse-node {
      position   : static;
      height     : 32px;
      left       : calc(50% - 176px/2);
      top        : 0px;
      font-family: Open Sans;
      font-style : normal;
      font-weight: normal;
      font-size  : 14px;
      line-height: 19px;
      display    : flex;
      align-items: center;
      color      : #323232;
      flex       : none;
      order      : 0;
      align-self : stretch;
      flex-grow  : 1;
    }

    .tree-content {
      display: flex;

      .button-icon {
        width        : 40px;
        height       : 40px;
        line-height  : 30px !important;
        border-radius: 50%;

        &:hover {
          border-radius: 50%;
        }
      }

      .img-icon {
        max-height: 25px;
        max-width : 25px;
      }

      .add-icon {
        position: absolute;
        right   : -34px;


        mat-icon {
          top          : 3px;
          right        : 3px;
          border-radius: 50%;
          color        : rgba(0, 0, 0, 0.6);
        }

      }

      .favorite {
        color: #b13514 !important;
      }

      .not-favorite {
        color: rgba(0, 0, 0, 0.6) !important;
      }

      .btn-favorite {
        right: 6px;
        color: unset;
      }

      .space-icon {
        position: absolute;
        top     : -5px;
        left    : 0px;
      }

      .span-text {
        position          : relative;
        overflow          : hidden;
        text-overflow     : ellipsis;
        padding-left      : 7px;
        max-width         : calc(100% - 56px);
        display           : -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        cursor     : pointer;
      }

      .span-text:after {
        content: "";
        display: block;
        clear  : both;
      }
    }

  }

  .mat-tree-node:first-child {
    margin: 0px;
  }

  .mat-tree-node.collapse-node:hover {
    background: #00000014;
  }

  .mat-tree-node.collapse-node:active {
    background: #0000001F;
  }

  .mat-tree-node.expand-node:active {
    background: #F2F7FD;
  }

  .mat-tree-node:hover {
      .span-text {
        max-width: calc(100% - 96px);
      }
  }

  .pr-34 {
    padding-right: 34px;
  }

}

.node-preview-item {
  display         : flex;
  background-color: #0000001F;
  min-width       : 272px !important;
  height          : 48px !important;
  margin          : 0 auto;
  align-items     : center;
  padding         : 0px 16px;
}