.roles-tab-container .roles-tab-title {
  font-size: 16px;
  padding: 5px;
}

.roles-tab-container .permission-message-container {
  display: inline-block;
  padding: 3px;
}

.roles-tab-container .permission-message-container .permission-message {
  float: right;
  padding: 2px;
}

.roles-tab-container .permission-message-container .permission-warning-icon {
  float: left;
  padding: 2px;
}

.roles-tab-container .ms-CommandBar .ms-CommandBarItem :focus {
  border:  0.5px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.roles-tab-container .ms-CommandBar .ms-CommandBarItem .ms-CommandBarItem-link {
  line-height: 35px !important;
}

.roles-tab-container .grid-container {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  margin-left: 5px;
}

.roles-tab-container .grid-container.no-edit {
  top: 65px;
}

.roles-tab-container .grid-container .roles-grid {
  height: 100%;
}

.roles-tab-container .grid-container .roles-grid .ms-DetailsHeader-cellTitle:focus {
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row {
  margin: 1px 0px 1px 0px;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row .is-selected .role-remove-cell.role-remove-button {
  display: block;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row .ms-DetailsRow {
  max-height: 30px;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row :focus {
  border:  0.1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row :hover .role-remove-cell.role-remove-button {
  display: inline;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row.dirty .ms-DetailsRow {
  font-weight: bold;
  color: black;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row.dirty .ms-DetailsRow .role-menu-cell .ms-Dropdown {
  font-weight: bold;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row.removed {
  font-weight: bold;
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row.removed .ms-DetailsRow {
  background-color: rgba( 166, 166, 166 ,  1 );
  background-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.roles-tab-container .grid-container .roles-grid .roles-grid-row.removed .role-remove-button {
  cursor: default;
}

.roles-tab-container .grid-container .roles-grid .ms-DetailsRow-cell {
  padding: 6px 2px;
  min-width: 140px;
}

.roles-tab-container .grid-container .roles-grid .role-user-cell {
  padding: 1px;
  display: block;
}

.roles-tab-container .grid-container .roles-grid .role-user-cell .user-pic {
  float: left;
  height: 26px;
  width: 26px;
  margin-top: 4px;
}

.roles-tab-container .grid-container .roles-grid .role-user-cell .role-name-cell {
  padding-left: 5px;
  padding-top: 2px;
}

.roles-tab-container .grid-container .roles-grid .role-user-cell .role-name-cell.avatar {
  padding-top: 0px;
  padding-left: 35px;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown {
  padding: 1px 0px;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell {
  padding-top: 5px;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell .ms-Dropdown:focus {
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell .ms-Dropdown:hover {
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell span.ms-Dropdown-title {
  height: 28px;
  margin-top: -0.5px;
  border: none;
  background-color: inherit;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell.owner {
  padding: 2px 3px;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell.disabled {
  padding: 0px 15px;
}

.roles-tab-container .grid-container .roles-grid .roles-dropdown .role-menu-cell.disabled:hover {
  cursor: default;
}

@media screen and (-ms-high-contrast: active) {
  .roles-tab-container .grid-container .roles-grid .ms-DetailsRow.is-selected span.ms-Dropdown-title {
    background-color: highlight;
  }
}

.roles-tab-container .grid-container .roles-grid .role-access-cell {
  float: left;
}

.roles-tab-container .grid-container .roles-grid .role-remove-cell {
  margin-left: 40px;
  padding-top: 2px;
}

.roles-tab-container .grid-container .roles-grid .role-remove-cell.role-remove-button {
  display: none;
  height: 20px;
  width: 20px;
  float: left;
  margin-top: 8px;
  margin-right: 5px;
  cursor: pointer;
}

.roles-tab-container .grid-container .roles-grid .role-remove-cell.role-remove-button:focus {
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.add-user-dialog.ms-Dialog-main {
  width: 500px;
  max-width: 500px;
}

.add-user-dialog .identity-search-results {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  margin: 10px 0;
  padding-left: 5px;
  float: left;
  width: 100%;
}

.add-user-dialog .add-user-container td {
  padding: 3px;
  width: 350px;
}

.add-user-dialog .add-user-container td.label {
  width: 100px;
  vertical-align: top;
  padding-top: 10px;
}

.add-user-dialog .add-user-container .role-description-container {
  margin-top: .5em;
  padding: 3px;
  color: rgba( 102, 102, 102 ,  1 );
  color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  font-size: 14px;
  line-height: 18px;
}

.add-user-dialog .add-user-container .identity-picker-container {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  max-height: 300px;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.add-user-dialog .add-user-spinner {
  margin-top: 3px;
}