.field-rolesetup {
  .wrapper-role {

    ul.list-role {
      display: grid;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      margin: 0;
      list-style: none;
      li {
        ul.role-detail {
          margin: 0 0 0 35px;
          list-style: none;
        }
      }
    }
    input[type="checkbox"] {
      margin: 0 15px 0 0;
      position: relative;
      width: 15px;
      height: 15px;
      color: #363839;
      border: 1px solid #bdc1c6;
      border-radius: 4px;
      appearance: none;
      outline: 0;
      cursor: pointer;
      transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
      &::before {
        position: absolute;
        content: '';
        display: block;
        top: -1px;
        left: 8px;
        width: 6px;
        height: 14px;
        border-style: solid;
        border-color: #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
      }
      &:checked {
        color: #fff;
        border-color: #1D72EA;
        background: #1D72EA;
        &::before {
          opacity: 1;
        }
        ~ label::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
      }
    }
  }
}