#container {
  max-width: 1024x;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.error {
  color: red;
}

#selected-group {
  display: none;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
#selected-group.visible {
  display: block;
}
#selected-group > div {
  display: grid;
  padding: 2px;
}
#selected-group > div.username {
  grid-template-columns: 250px 1fr;
}
#selected-username {
  font-family: monospace;
}
#selected-group > div.owner {
  grid-template-columns: 250px 1fr;
}
#selected-owner {
  font-family: monospace;
}
#selected-group > div.name {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-bottom: 2px;
}
#selected-group > div.name > input {
  margin: 0 4px;
}
#selected-group > div.name > button {
  margin-left: 4px;
  padding: 4px 8px;
  min-width: max-content;
  max-width: 60px;
}
#selected-group > div.member-list {
  grid-template-columns: 250px 1fr;
}
#selected-group > div.member-list .single-member {
  display: list-item;
  font-family: monospace;
}
#selected-group > div.member-list .single-member > button {
  margin-right: 4px;
  font-size: 0.8em;
  padding: 0;
}
#selected-group > div.member-list .member-chain {
  display: list-item;
  font-family: serif;
}
#selected-group > div.add-members {
  grid-template-columns: 70px 1fr 70px 1fr 60px;
}
#selected-group > div.add-members > span {
  text-align: center;
}
#selected-group > div.add-members > input {
  margin: 0 4px;
}
#selected-group-error {
  color: red;
}
#selected-group-error:empty {
  display: none;
}

#groups {
  padding: 8px;
}
#groups > div {
  padding: 4px;
}
#groups > .header {
  display: grid;
  grid-template-columns: 250px 150px 1fr;
  background-color: #4caf50;
  color: white;
}
#groups > .row {
  display: grid;
  grid-template-columns: 250px 150px 1fr 60px;
  border-bottom: 1px solid #ddd;
}
#groups > .row:hover {
  background-color: #f5f5f5;
}
#groups > .row > .username {
  font-family: monospace;
  cursor: pointer;
  text-decoration: underline;
  color: #007bff
}
#groups > .row > .owner {
  font-family: monospace;
}
#groups > .add {
  display: grid;
  grid-template-columns: 150px 150px 1fr 60px;
}