/*-------------- Admin Panel - Management Layout -------------- */
ul {
  &.mod-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    li { float: left; margin: 0.25rem 0; }
    li div {
      @include border-radius(2px);
      margin: 0 0.25rem;
      color: #fff;
      padding: 0.4rem 1rem;
      background: #2299DD;
      font-size: 1rem;
      font-weight: bold;
      a, a:hover, a:active, a:visited { color: #fff; }
    }
  }
  &.indent { margin-left: 2rem; margin-bottom: 1rem; }
}

.role-header { display: inline-block; }
.roles.user-search, .roles.add-role { @include span-columns(12); @include clearfix; }
.add-users { float: right;  line-height: 1.5rem; }

.header-spacer {
  @include span-columns(2);
  @include media($mobile) { display: none; }
}

.management-users.radio-button {
  @include span-columns(2);
  @include media($mobile) { @include span-columns(4); @include omega(2n); }
}

.autocomplete-wrap {
  @include span-columns(6);
  @include media($mobile) { @include span-columns(8); @include omega; }
}

table.ban-addresses {
  tr td {
    select.type { margin-bottom: 0; }
    input.address, input.weight { margin: 0; outline: none; }
    input.decay { margin: 0 auto; display: block; }
  }
}
.centered-checkbox { margin: 0 auto; display: block; }

.medium.roles-modal .ng-modal-dialog { top: 5vh; max-height: 90vh; }
.permissions-modal {
  @include row;
  margin: 1rem 0;
  h4 { margin-bottom: 0.75rem; }
  input[type="checkbox"], input[type="radio"] { margin-bottom: 0.5rem; }
  label { @include no-select; clear: both; }
  .indent { padding-left: 1rem; }
  ul {
    list-style-type: none;
    li { display: block }
    li a { display: block; padding: 0.5rem 0; padding-left: 0.5rem; }
    li a:hover { background-color: $sub-header-color; }
    li a.active { background-color: $color-primary; color: #fff; }
    &.roles {
      @include set-columns(2);
      @include pad(0.5rem 1rem 0.25rem 1rem);
      background-color: $sub-header-color;
      border: 1px solid $border-color;
    }
  }
  .left-column { @include span-columns(2); border-right: 1px solid $border-color; }
  .right-column { @include span-columns(10); @include omega; }
  .permission {
    margin-bottom: 0.625rem;
    .permission-title { font-size: 0.875rem; font-weight: bold; }
    .bypass { line-height: 1.8rem; }
    .bypass-header {
      width: 50%;
      display: inline-block;
      label { margin-left: 2rem; }
      .bypass-description { font-size: 0.875rem; }
      .bypass-description.disabled { color: $secondary-font-color-light; }
    }
    .bypass-control {
      width: 50%;
      float: right;
      display: inline-block;
      label { display: inline; font-weight: normal; margin-left: 2rem; }
      label.disabled { color: $secondary-font-color-light; }
    }
  }
  @include media($mobile) {
    .left-column { @include span-columns(3); }
    .right-column { @include span-columns(5); @include omega; }
    ul.roles { @include set-columns(1); }
    .permission .bypass-header { width: 100%; }
    .permission .bypass-control { width: 100%; }
  }
}

@include media($mobile) {
  .email-column { @include truncate-ellipsis; max-width: 7rem; word-wrap: none; }
  tr.show-mobile { display: table-row; }
}
