.department {
  .bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
    border-bottom: #E8E8E8 solid 1px;
    cursor: pointer;
    .left {
      flex-shrink: 0;
      &:before {
        display: block;
        width: 40px;
        height: 24px;
        background: transparent url("~projects/app-root/src/assets/images/icons/circle_plus_24.svg") 50% 50% no-repeat;
        content: "";
      }
    }
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      margin-left: 16px;
      border-radius: 200px;
      background-color: #F9B417;
      color: #ffffff;
      font-weight: 700;
    }
    .mid {
      flex-grow: 1;
      padding: 0 16px;
      .name {
      }
    }
    .right {
      flex-shrink: 0;
      button {
        margin-left: 20px;
        &.edit {
          background-image: url('~projects/app-root/src/assets/images/icons/edit_24dp.svg');
        }
        &.add-member {
          background-image: url('~projects/app-root/src/assets/images/icons/add_person_24.svg');
        }
        &.add-department {
          background-image: url('~projects/app-root/src/assets/images/icons/add_library_dark_24.svg');
        }
        &.delete {
          background-image: url('~projects/app-root/src/assets/images/icons/close_24dp.svg');
        }
      }
    }
  }
  .items {
    display: none;
    padding-left: 56px;
  }
  &.active {
    >.bar {
      .left {
        &:before {
          background-image: url("~projects/app-root/src/assets/images/icons/circle_minus_24.svg");
        }
      }
    }
    >.items {
      display: block;
    }
  }
}


@media screen and (max-width: 767px) {
  .department {
    .bar {
      .logo {
        display: none;
      }
      //.right {display: none;}
    }
    .items {
      padding-left: 16px;
    }
  }
}