.item {
  &.committee {
    >.bar .mid .info .logo {
      border: #F9B417 solid 1px;
      color: #F9B417;
      background-color: transparent;
    }
    &.main {
      >.bar .mid .info .logo {
        background: #3E3D40 none;
        border: none;
        color: #ffffff;
        font-weight: bold;
      }
    }
  }
  &.workgroup {
    >.bar .mid .info .logo {
      border: #86898E solid 1px;
      color: #86898E;
      background-color: transparent;
    }
  }

  .bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 0;
    border-bottom: #E0E0E0 solid 1px;
    .left {
      flex-shrink: 0;
      cursor: pointer;
      &:before {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: var(--white) url("~projects/app-root/src/assets/images/icons/arrow_drop_down_24dp.svg") no-repeat center;
        content: '';
        z-index: 0;
        bottom: -2px;
        position: absolute;
        right: -28px;
        transform: rotate(0deg);
        transition: transform .3s;
      }
    }
    .mid {
      flex-grow: 1;
      padding: 0 16px;
      .info {
        display: flex;
        flex-direction: row;
        align-items: center;
        .logo {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          margin-right: 16px;
          border-radius: 100px;
          background: #F9B417 url('~projects/app-root/src/assets/images/icons/architecture_24.svg') 50% 50% no-repeat;
          img {
            width: 100%;
            height: 100%;
            border-radius: 100px;
            object-fit: cover;
            background-color: #ffffff;
          }
          &.voter:before {
            position: absolute;
            right: -1px;
            bottom: -1px;
            width: 14px;
            height: 14px;
            border: #ffffff solid 1px;
            border-radius: 100px;
            //background: transparent url('~projects/app-root/src/assets/images/icons/star_sign.svg') 50% 50% no-repeat;
            content: '';
          }
        }
        .name {
          p {
            margin: 0;
            &.sub {
              color: #7f7f7f;
            }
          }
        }
      }
    }
    .right {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-shrink: 0;
      button {
        margin-left: 24px;
        // &.edit {
        //   background-image: url('~projects/app-root/src/assets/images/icons/edit_24dp.svg');
        // }
        // &.add-company {
        //   background-image: url('~projects/app-root/src/assets/images/icons/note_add_20.svg');
        // }
        // &.add-person {
        //   background-image: url('~projects/app-root/src/assets/images/icons/note_add_20.svg');
        // }
        // &.add-group {
        //   background-image: url('~projects/app-root/src/assets/images/icons/add_folder_24.svg');
        // }
        // &.add-child {
        //   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: 50px;
  }
  &.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) {
  .item {
    .bar {
      .mid {
        padding: 0 12px;
        .info .logo {
          display: none;
        }
      }
      .right {
        display: none;
      }
    }
    .items {
      padding-left: 16px;
    }
    &.company {
      .items {
        padding-left: 40px;
      }
    }
  }
}
