/*#f8fcff; */
.data-list {
  width: 100%;
  margin: 30px 5px 5px 5px;
  /* add custome property styles which will be scoped to .data-list */
}
.data-list .list-of-items-heading {
  font-size: 140%;
  font-weight: 500;
  display: flex;
}
.data-list .list-of-items-heading-insert {
  margin-left: 15px;
  font-size: 86%;
  line-height: 159%;
}
.data-list .section-header-fancy {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 130%;
  font-weight: 500;
  color: #000000;
  background-color: #f3f3f3;
  background-repeat: repeat;
  border-bottom: 1px;
  border-bottom-style: solid;
  padding-top: 1px;
}
.data-list .list-of-items div {
  display: flex;
}
.data-list .list-of-items-list {
  max-height: 270px;
  overflow-y: scroll;
}
@media screen and (max-width: 603px) {
  .data-list .list-of-items-list {
    height: auto;
    max-height: none;
    overflow-y: unset;
  }
}
.data-list .list-of-items-line {
  display: flex;
  line-height: 27px;
  border-bottom: thin solid lightgrey;
}
.data-list .list-of-items-line:hover {
  background-color: #f3f3f3;
}
.data-list .list-of-items-line div {
  flex: 1 1 0;
  min-width: 0;
}
.data-list.list-of-members div.member-counter {
  max-width: 20px;
}
.data-list.list-of-members div.member-user-id {
  overflow-x: hidden;
}
.data-list.list-of-members div.member-type {
  max-width: 80px;
  margin-left: 10px;
}
.data-list.list-of-members div.member-name {
  max-width: 150px;
}
@media screen and (max-width: 603px) {
  .data-list.list-of-members div.member-name {
    display: none;
  }
}
.data-list.list-of-members div.member-email {
  overflow-x: hidden;
  margin-right: 10px;
}
.data-list.list-of-members div.member-remove {
  max-width: 30px;
}
.data-list.list-of-unanswered-invites div.member-counter {
  max-width: 20px;
}
.data-list.list-of-unanswered-invites div.member-user-id {
  max-width: 180px;
}
.data-list.list-of-unanswered-invites div.member-email {
  overflow-x: hidden;
}
.data-list.list-of-unanswered-invites div.member-group {
  margin-left: 10px;
}
.data-list.list-of-unanswered-invites div.member-resend {
  max-width: 30px;
}
.data-list.list-of-unanswered-invites div.member-remove {
  max-width: 30px;
}
.data-list.list-of-unactivated-joins div.member-counter {
  max-width: 20px;
}
.data-list.list-of-unactivated-joins div.member-user-id {
  max-width: 100px;
}
.data-list.list-of-unactivated-joins div.member-name {
  max-width: 150px;
}
.data-list.list-of-unactivated-joins div.member-email {
  overflow-x: hidden;
}
.data-list.list-of-unactivated-joins div.member-group {
  max-width: 180px;
  margin-left: 10px;
}
.data-list.list-of-unactivated-joins div.member-accept {
  max-width: 30px;
}
.data-list.list-of-unactivated-joins div.member-remove {
  max-width: 30px;
}