:host {
  display: block;
}

.add-role-row {
  display: flex;
  gap: 1em;
  align-items: center;
  flex-wrap: wrap;
}
.add-role-row label {
  margin-right: 0.5em;
}

.search-user {
  display: flex;
  gap: 1em;
  margin-top: 1em;
}
.search-user .search-control {
  position: relative;
}
.search-user .search-control dnn-collapsible {
  position: absolute;
  left: 0;
  top: calc(100% - 2px);
  width: 100%;
  box-shadow: 0px 4px 4px;
}
.search-user .search-control dnn-collapsible .dropdown {
  background-color: white;
  border: 1px solid lightgray;
  display: flex;
  flex-direction: column;
}
.search-user .search-control dnn-collapsible .dropdown button {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid lightgray;
  padding: 0.25em;
  margin: 0;
  text-align: left;
}

table {
  border: 1px solid lightgray;
  border-collapse: collapse;
  margin-top: 1em;
}
table thead {
  text-align: center;
}
table thead tr {
  border-bottom: 1px solid lightgray;
}
table thead th {
  background-color: lightgray;
  padding: 0.25em 0.5em;
}
table thead th:first-child {
  border-right: 1px solid lightgray;
}
table tbody tr {
  border-bottom: 1px dotted lightgray;
}
table tbody tr th {
  text-align: left;
  border-right: 1px solid lightgray;
  padding: 0 0.5em;
}
table tbody tr td {
  text-align: center;
}
table tbody tr td label .hidden {
  display: none;
}
table tbody tr td button {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  margin-right: 1em;
}