.permissioncheckboxset,
.permissioncheckboxsetfield_readonly {

  h5 {
    margin-top: $spacer;
  }

  label {
    margin: 0;
  }

  .cms-content.cms-edit-form & {
    &.form-group--no-label > .form__field-holder--no-label {
      @include make-col(12);
      margin-left: 0;
    }
  }

  .optionset {
    padding-left: 0;
    list-style-type: none;
  }

  .font-icon-check-mark-circle,
  .font-icon-cancel-circled,
  .font-icon-disable-circled,
  .font-icon-plus-circled {
    font-size: 18px;
    position: relative;
    top: 2px;
  }

  .font-icon-check-mark-circle, .font-icon-plus-circled {
    color: $brand-success;
  }

  .font-icon-cancel-circled {
    color: $brand-danger;
  }

  .font-icon-disable-circle {
    color: $gray-600;
  }

  li {
    margin-bottom: 4px;

    &.help {
      padding: 0;
      margin-bottom: 1rem;
    }
  }
}

/* For user permissions the readonly checkboxes are set as display none and are replaced with a <span> that has a
green tick icon as a background this is created using gulp-sprity generated classes and hardcoded in the php */

.permissioncheckboxsetfield_readonly .optionset li {
  width: 100%;

  input {
    display:none;
  }


  label {
    cursor: default;
    position:relative; // needs to be set to position the span element correctly
    span { // background set using gulp-sprity generated classes (background is green tick icon)
      margin-right: 6px;
      font-size: 16px;
    }
  }
}

.cms .cms-content .SecurityAdmin { //datagrid overflow on Security Admin
  .cms-content-fields {
    overflow-y:auto;
    .aligned-right-label { //align the label with the parent group field in add new group
      margin-left: calc(map_get($spacers, 2) * 23);
      padding: map_get($spacers, 2) 0;
    }
  }
}

.cms .cms-content.SecurityAdmin {
  // Remove extra space between the permanent alert message and search field
  .alert + .grid-field .grid-field__search-holder {
    margin-top: -$spacer-xs;
  }
}