section .modal-header {
  padding: 2rem 1.5rem;
}

.modal-body {
  background-color: #f0f1f2;
}

.modal-form {
  background-color: #f0f1f2;
  text-align: center;
  padding: 0.76rem;
  position: sticky;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
}

.users-list {
  padding: 1rem;
}

.user-list-item {
  background-color: #fff;
  padding: 1rem 1rem 1rem 2rem;
}

.user-list-item:hover {
  background-color: #1e6dff;
  color: #fff;
}

.view-members .main-section {
  background-color: #f0f1f2;
  padding: 1rem;
}

.view-members .list {
  background-color: #fff;
  border-radius: 3px;
}

.view-members .list-header {
  border-bottom: 1px solid #9b9da5;
}

.view-members .row {
  display: flex;
  padding: 1rem;
}

.view-members .name {
  width: 50%;
  padding-left: 0.25rem;
}

.add-members #add-member,
.edit-channel #edit-channel
.add-channel-flow #add-channel-flow {
  display: flex;
  border-bottom: 1px solid #f0f1f2;
}

.edit-channel #edit-channel {
  flex-direction: column;
}

.add-members .input,
.edit-channel .input,
.add-channel-flow .input {
  width: 100%;
  margin: 1rem 0;
}

.add-members .input input,
.edit-channel .input input,
.add-channel-flow .input input {
  width: inherit;
}

.add-members .users-result .add-channel-flow li:hover {
  background: #1e6dff;
  color: white;
}

.add-members .user {
  padding: 0.5rem;
}

.add-members .users-result {
  margin-bottom: 1rem;
}

.edit-channel .radio-buttons {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.edit-channel .radio-buttons span {
  padding: 0.5rem;
}

.view-details .container {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.view-details .row {
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}

.view-details .key {
  width: 30%;
}

.view-details .detail {
  color: #9b9da5;
  padding-left: 0.25rem;
}

.add-channel-flow .container {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.add-channel-flow .row {
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}

.add-channel-flow .key {
  width: 30%;
}

.add-channel-flow .detail {
  color: #9b9da5;
  padding-left: 0.25rem;
}

.edit-channel .radio-buttons span:nth-child(1)::after {
  content: ' (administrators and moderators can add members)';
  color: #9b9da5;
}

.edit-channel .radio-buttons span:nth-child(2)::after {
  content: ' (any member can add other members)';
  color: #9b9da5;
}
.ban-users-list {
  background-color: #fff;
  position: relative;
}

.ban-user-row {
  display: flex;
}

.ban-row {
  display: flex;
  padding: 1rem;
}

.ban-row-header {
  padding: 1rem;
  z-index: 2;
  background-color: #fff;
  position: sticky;
  top: 57.3125px;
  right: 0;
  left: 0;
  border-radius: 3px 3px 0 0;
  border-bottom: 0.5px solid #d4d5d8;
}

.subChannel-row-header {
  padding: 1rem;
  z-index: 2;
  background-color: #fff;
  position: sticky;
  top: 10px;
  right: 0;
  left: 0;
  border-radius: 3px 3px 0 0;
  border-bottom: 0.5px solid #d4d5d8;
}

.ban-row-name {
  width: 50%;
}

.ban-row-role {
  width: 30%;
}

.ban-row-check {
  display: auto;
}

.ban-input input {
  width: 100%;
  position: relative;
}

.ban-input button {
  left: 13.5rem;
  top: 1rem;
}

.ch-form-field-input .lbl {
  display: flex;
  padding: 1rem 0;
  flex-direction: column;
  margin: auto 0;
  min-width: 35%;
}

.ch-form-field-input .value {
  display: flex;
  width: 100%;
  margin: auto 0;
  padding: 1rem;
  flex-direction: column;
}
