<commit_before>@import "./client/Framework/themes/default/kdfn"
@import "./client/stylus/appfn"
@import "nib"
@import "nib/gradients"
@import "nib/vendor"


.grouptabhandle.dirty .new
  background-color            #0a92ba
  color                       white
  font-weight                 bold
  font-size                   11px
  line-height                 1
  padding                     1px 4px
  rounded                     3px


.group-admin-modal

  &.admin-kdmodal
    .kdselectbox
      margin-right              22px

  .kdview.formline.type.group-type
    padding                     0
    border-bottom               none
  .group-type
    margin                      11px 0
    .kd-radio-holder
      height                    60px
      line-height               60px
      padding                   0 20px
      rel()
      // &.checked
      //   bg                      color, rgba(0, 0, 0, .05)
      label
        display                 block
        margin-left             90px
        font-size               14px
      input
        top                     22px
        left                    90px
        margin                  0
        abs()
      &.active
        bg                      color, rgba(0, 0, 0, .05)
      &:hover
        bg                      color, rgba(0, 0, 0, .05)
        &:before
          bg                    position, -460px -620px
          opacity               .9
      &:before
        content                 ""
        size                    60px, 60px
        bg                      color, pink
        bg                      position, -400px -620px
        top                     5px
        opacity                 .4
        sprite()
        abs()
      &.company:before
        bg                      position, -400px -680px
      &.project:before
        bg                      position, -400px -740px
      &.custom:before
        bg                      position, -400px -800px
      &.company:hover:before
        bg                      position, -460px -680px
      &.project:hover:before
        bg                      position, -460px -740px
      &.custom:hover:before
        bg                      position, -460px -800px

  div.general-settings  > .kdformview
    margin-top                5px
    > .formline
      width                   100%
      overflow                auto
      border-bottom           1px solid rgba(0, 0, 0, .1)
      padding                 5px 0px 7px 18px
      borderBox()
      &.button-field
        padding-right         20px
        padding-top           10px
      .input-wrapper
        overflow              visible

  > .kdformview
    max-width                 800px
    margin                    20px auto
    border                    1px solid #e8e8e8
    rounded(5px)

    > .formline
      width                   100%
      borderBox()
      overflow                auto

      .kdinput.text
        width                 100%

      textarea.kdinput.text
        min-height            100px

      &.button-field
        bg color,             transparent
        rounded               0
        border                none
        padding               0
        margin-left           0
        margin-top            0
        padding               20px
  .kdselectbox
    fr()
  .kdinput.on-off
    margin-right              25px
    fr()
    > span
      hidden()

.groups-invitation-request-view
.groups-member-permissions-view

  .kdview.kdloader
    display                   block
    margin                    10px auto

  .kdview.kdlistitemview.kdlistitemview-invitation-request
  .kdview.kdlistitemview.kdlistitemview-member-item
    line-height               24px

    .kdselectbox
      display                 inline-block
      float                   right

    .profile
      font-size               13px

    .role
      color                   #999

    span.icon
      &.edit
        bg                    position, -120px -400px
      &.delete
        bg                    position, -80px -520px
      &.save
        bg                    position, -80px -500px

    .kd-checkbox-holder
      line-height             30px
      margin-right            10px
      display                 inline-block

      input[type=checkbox]
        vertical-align        middle
        display               inline
        width                 auto
        margin                0 10px 0 3px

      label
        float                 none
        display               inline


  .edit-container
    padding                   5px 10px
    border                    1px solid #ccc
    rounded                   4px
    bg                        color, #f5f5f5
    borderBox()

    .buttons
      margin                  10px 0 5px 0
      padding                 10px
      bg                      color, #e2e2e2
      rounded                 3px
      border                  1px solid #ccc
      .kdbutton
        width                 auto
        margin-right          10px

.invitation-request
  .username
    font-weight               bold
    color                     #ff9200
  &.invitation-sent
    background-color          #eee

.group-header
  margin-top                  20px
  padding                     20px 20px 0
  borderBox()
  .avatar
    margin-right              20px
    fl()
    span
      display                 block
      border                  1px solid #eee
      padding                 1px
      size                    60px, 60px
  section
    height                    auto
    rel()
    h2
      font-size               36px
      font-weight             normal
      line-height             64px
      height                  64px
      border-bottom           none
      padding                 0
      overflow                ellipsis
      margin-right            180px
    .buttons
      top                     0
      right                   0
      size                    auto, 100%
      padding                 18px 5px
      borderBox()
      abs()
      .custom-link-view.enter-group
        margin-right          5px
  .navbar
    bg                        color, #f5f5f5
    height                    60px
    margin                    20px 0 0
    borderBox()
    .custom-link-view
      margin                  20px 20px 0
      span.title
        color                 #aaa
        // noTextDeco()
      &.enter-group
        margin-left           20px
      .icon
        &.enter-group
          bg                  position, -180px -518px
          opacity             .2
        &.admin
          bg                  position, -180px -439px
          opacity             .5

.group-content-display
  .sub-header
    gradient                  #fff, #f8f8f8
    width                     100%
    z-index                   100
    fix()
    &.shadow
      shadow                  0 0 15px rgba(0,0,0,.1)

  .loader
    fl()
    margin-top                10px
  .loader-text
    display                   block
    width                     auto
    height                    auto
    margin-top                8px
    padding-left              5px

  .readme
  .invitations
    .button-bar
      margin-top              10px
      margin-bottom           5px
      text-align              right
      width                   auto
      opacity                 0.95
      vendor transition,      opacity 0.2s linear
      &:hover
        opacity               1

  .readme
    borderBox()
    padding                   0px 20px
    width                     100%

    .data
      borderBox()
      border                  none
      padding                 10px 0 0 0

    .edit
      margin-top              10px
      borderBox()
      width                   100%
      min-height              200px
      max-height              400px
      .preview_content
        padding               10px
    .edit-cancel
      font-size               12px
      margin-top              4px
      margin-right            5px
      span
        noTextDeco()
        color                 #aaa
  .desc
    border-bottom             1px solid #f2f2f2
    padding                   20px 0

  .group-content
    borderBox()
    // height                    auto

    .kdtabhandlecontainer
      padding-top             0
      margin-top              28px
      // background            linear-gradient(top, #555 0%,#666 93.7%)
      height                  27px
      padding                 0px 10px 0px 10px
      // shadow                inset 0 2px 5px rgba(0,0,0,.1)
      bg color,               #f8f8f8
      borderBox()
      border-bottom           1px solid #e8e8e8
      .kdtabhandle
        border-width          0
        height                27px
        line-height           27px
        color                 #aaa
        font-size             13px
        padding               0 40px 0 10px
        width                 auto!important
        borderBox()
        rounded(0)
        b
          margin-right        0
          font-weight         normal
        &.active
          // border-color      #ccc
          border              none
          bg color,           transparent
          height              21px
          // background        linear-gradient(top, #ffaf43 0%,linkColor1 100%)
          color               #444
          // text-shadow       0 -1px 0 rgba(0,0,0,.05)
          // shadow            inset 0 2px 2px -2px rgba(0,0,0,0.40)
          b
            // text-decoration underline
            font-weight       600

    .invitations section.formline div.formline.kdlistitemview-invitation-request
    .members .kdlistitemview-member-item-inner
      min-width               350px
      display                 inline-block
      margin                  2px
      padding                 10px
      borderBox()
      vendor transition,      background-color 0.2s ease-in-out
      background-color        rgba(248,248,248,0.5)

    .invitations section.formline div.formline.kdlistitemview-invitation-request:hover
    .members .kdlistitemview-member-item-inner:hover
    .members .editing .kdlistitemview-member-item-inner
        background-color      rgba(248,248,248,1)

    .members
      .listview-wrapper
        borderBox()
        padding               20px
        overflow              hidden
        .kdlistview
          overflow            visible
        .kdlistitemview-member-item
          position            relative
          overflow            visible
          width               auto
          min-width           350px
          height              76px
          display             inline-block
          &.editing .kdlistitemview-member-item-inner
            z-index         50
          .kdlistitemview-member-item-inner
            border            2px solid #fff
            margin            0
            position          absolute
            top               0
            left              0
          section
            .profile
              borderBox()
              margin-left         60px
              padding             2px
              display             block
            .role
              borderBox()
              margin-left     60px
              padding         2px
              display         block
            .edit-link
            .save-link
            .cancel-link
              fr()
            .edit-link
              hidden()

          &:hover
            section .edit-link
              visible()

    .policy-view-wrapper
      padding-top             20px

    .invitations
    .membership-policy
    .approval-requests

      .button-bar
        margin-right          20px

      section.formline
        margin-left           100px
        margin-top            10px
        padding               10px

        h2
          padding-left        0
          padding-bottom      0px
          height              17px
          // font-weight 600
          font-size           14px
          // border none
        h3
          font-size           12px
          padding-bottom      10px

        p
          margin-top          0px
          margin-bottom       15px
          padding-left        0px

        > a
          margin-left         10px

        button
          height              24px
          line-height         8px

        .policylanguage-editor
          width               auto
          display             inline-block
          button
            margin            10px 10px 0 0
          textarea
            min-width         400px
            min-height        100px

        div.formline
          borderBox()
          margin              0
          padding             10px 0
          bg color,           transparent
          border              none

          > span
            margin-left       20px
            display           inline-block
            hidden()

      a.edit-link
      > div.kdview > div.on-off
        fl()
        margin-left           25px
        margin-top            20px
        display               inline-block
        width                 auto

      a.edit-link
        margin-top            16px
        padding-left          17px

    .invitations
    .approval-requests

      div.formline.button-field
        margin                0
        padding               0
        height                auto

      div.formline
        overflow              hidden
        width                 100%

      section.formline
        overflow              hidden
        min-width             200px
        width                 50%
        borderBox()
        margin                0
        padding               20px 20px 0
        fl()

        &.status-quo
          width               100%

    .approval-requests
      section.formline
        button
          margin-left         10px
          width               60px

    .permissions
      height: auto;
      margin-bottom: 50px;

    .form-generator
      min-width               600px
      overflow                hidden
      .wrapper
        width                 auto
        border                1px solid #e8e8e8
        rounded               4px
        bg color,             #f5f5f5

      .form-builder
        width                 100%
      .add-header
        bg color,             #fbfbfb
        border-bottom         1px solid #e8e8e8
        rounded               5px 5px 0 0
        div
          color               #444
          borderBox()
          padding             5px 8px 4px 8px
          margin              0
          width               150px
          font-weight         bold
          font-size           12px
          display             inline-block
          vertical-align      top
          &:first-child
            width             100px
      .add-inputs
        padding-top           10px
        // border-top 1px solid #f5f5f5
        bg color,             #fbfbfb
        // bg color, #f5f5f5
        width                 auto
        rounded               0 0 5px 5px
        .add-input
          width               150px
          borderBox()
          display             inline-block
          padding             4px 9px
          vertical-align      top
          &:first-child
            width             100px
            .kdselectbox
              width           80px

          &.button
            padding           0
            width             auto

          &.select
            display           block

          .kdinput
            width             140px

          .kdselectbox
            width             130px
        .select-fields
        .radio-fields
          margin-left         405px
          padding             5px
          width               250px
          borderBox()
          border              1px solid #e8e8e8
          bg color,           #f5f5f5
          rounded             4px
          > input.text
            display           inline-block
          h3
            // bg color, #f5f5f5
            // color #444
            padding           5px 5px 5px 0
          .form-builder-select
          .form-builder-radio
            margin-bottom     10px
            .default-item
              color           #aaa
            .kdlistitemview
              width           auto
              bg color,       white
              margin          3px
              padding         5px 5px 0px 5px
              span.value
                color         #aaa
              .title
                display       inline-block
                width         auto
              .remove-button
                display       inline-block
                width         auto
                margin-left   5px
                fr()
      .form-item
        borderBox()
        width                 auto
        border-bottom         1px solid #e8e8e8
        bg color,             white
        padding-top           2px
        &:hover
          bg color,           #f5f5f5
        > div
          borderBox()
          border-right        1px solid #f5f5f5
          overflow-x          hidden
          overflow-y          hidden
          text-overflow       ellipsis
          white-space         nowrap
          width               150px
          // min-width 200px
          display             inline-block
          padding             3px 9px
          margin              0
          border              none
          line-height         1.5
          vertical-align      middle
          &:first-child
            width             100px

          &.title
            font-weight       500
          // height 25px
          .kdselectbox
            margin-top        -4px
            height            18px
            width             130px
            span.title
              height          18px
              line-height     18px
              overflow        hidden
              text-overflow   ellipsis
            span.arrows
              top             0
          div.default
          fieldset
            &.textarea
              white-space     normal
            opacity           0.5
            vendor transition, opacity 0.15s ease-in-out
            &:hover
              opacity         1
            span
              color           #aaa
              &.title
                color         #444
          &:first-child
            border-left       none
          &:last-child
            border-right      1px solid #f5f5f5
        &:last-child //> div
          padding-bottom      4px
    span.add-button
      noTextDeco()
      cursor                  pointer
      margin                  0 0 0 5px
      span.title
        noTextDeco()
        color                 black
        line-height           2.5
        font-weight           600

    button.save-button
      margin-left             10px

    span.remove-button
      borderBox()
      noTextDeco()
      display                 inline-block
      margin                  0 0 0 5px
      cursor                  pointer
      span.title
        noTextDeco()

    .permissions-view
      padding                 0 20px

      .add-role-dialog
        z-index               100000

        .add-role-header
          padding-top         15px
          padding-bottom      15px
          font-size           14px
          font-weight         500

        .add-role-button
          margin-bottom       10px
        .add-role-cancel
          margin-top          8px

        label.label-role-name
          display             inline-block
        input.role-name
          display             inline-block
          width               289px

        label.label-copy-permissions
          margin-top          10px
          display             inline-block
        div.kdselectbox.copy-permissions
          margin-top          0px

      // .kdview.kdloader
      //   display           block
      //   margin            10px auto

      .permissions-header
        abs()
        top                   0
        left                  20px
        right                 0
        z-index               20000
        bg color,             white
        &.scrolling
           shadow             0 5px 15px -5px rgba(0,0,0,0.1)
        > .input-wrapper > .kdview
          borderBox()
          width               auto
          line-height         20px
          top                 0
          overflow-x          hidden
          display             block
          text-overflow       ellipsis
          white-space         nowrap
          font-weight         bold


      .permissions-form
        overflow-y            scroll
        overflow-x            hidden
        // max-height 300px
        margin-top            30px

        fraction(full,divisor)
          fraction = full/divisor

        for num in 2 3 4 5 6 7 8 9 10 11 12
          &.col-{num}
            .formline .input-wrapper
              width fraction(340,num)px

        .formline
          &.button-field
            borderBox()
            &.scrolling
              shadow          0 -5px 10px -3px rgba(0,0,0,0.1)
            fixed()
            left              0
            right             0
            // bottom 0
            height            50px
            padding           15px 20px 0 15px
            border-top        1px solid #e5e5e5

            button.add-role
              fl()

          &:nth-last-child(2)
            margin-bottom       49px
            border-bottom-color transparent

          &:nth-child(2n+1):not(.permissions-module):not(.permissions-header)
            bg color,         rgba(0,0,0,0.025)

          borderBox()
          padding             7px 10px
          // border-bottom       1px solid #f5f5f5
          // border-left         1px solid #f5f5f5
          // border-right        1px solid #f5f5f5
          border            none

          .input-wrapper:first-child
            border-left       none
            width             160px
            > .kdview
              borderBox()
              min-height      15px
              line-height     15px
              padding         3px
              padding-left    7px
              display         inline-block
              width           160px
              overflow        hidden
              text-overflow   ellipsis
              white-space     nowrap
              text-align      left

          input.kdinput.permission-checkbox
            display           inline
            margin-right      2px
            width             auto
            margin-top        5px
            vertical-align    middle
          .input-wrapper
            // border-left       1px solid #f5f5f5
            borderBox()
            display           inline-block
            width             100%
            height            20px
            vertical-align    top
            text-align        center
            > .input-wrapper
              vertical-align  middle

        .permissions-module
          // background          linear-gradient(top, #555 0%,#666 93.7%)
          color               #444
          font-weight         bold
          padding-top         25px

          &:nth-child(2) // Header is first, first subgroup is 2
            padding-top       0

          .input-wrapper
            text-align        left

    .vocabulary > .kdview
      padding                 0 20px

.group-content .invitations
.group-content .approval-requests
.invitations-request-modal
  .request-list
    .formline.kdlistitemview-invitation-request
      .buttons
        fr()
        button
          line-height         normal
          .icon
            width             20px
            &.approve
              bg              position, -77px -502px
            &.decline
              bg              position, -77px -482px
      .status
        font-size             11px
        fr()
        &.sent
          color               #ff9101
          .icon
            bg                position, -100px -580px
        &.accepted
        &.approved
          color               #40af00
          .icon
            bg                position, -80px -500px
        &.ignored
        &.declined
          color               #be2a26
          .icon
            bg                position, -80px -480px
        &.pending
          color               #acacac
          .icon
            bg                position, -320px -140px
        span
          display             inline-block
          &.icon
            size              20px, 20px
            sprite()
          &.title
            vertical-align top
            line-height       20px
      .details
        margin-left           50px
        .requested-at
          color               #999
          font-size           10px
          line-height         10px

      a
        noTextDeco()

      span.avatar
        border                1px solid #E3E3E3
        padding               1px
        margin-right          10px
        size(40px,40px)
        bg(color,#fff)
        fl()

        a
          display               block
          background-position   center
          background-image      url('../images/defaultavatar/default.avatar.40.png')
          bg(size,cover)
          bg(repeat,no-repeat)
          size(30px,30px)

.invitations-request-modal .request-list
  .formline.kdlistitemview-invitation-request
    padding                   10px
    border-bottom             1px solid #eee
    width                     auto
    button
      height                  24px
      line-height             8px
    .details .requested-at
      margin-top              5px

.kdmodal.invite-by-username
  .kdautocompletewrapper
    width             250px
    display           inline-block
    vertical-align    bottom
    borderBox()
    input.text
      width           100%
      borderBox()
  .completed-items
    width             250px
    max-height        300px
    margin-left       95px
    padding           5px 0 0 0
    overflow          auto

  .kdview.kdautocompletedlistitem
    margin            5px 5px 0 0
    padding-left      0
    span.avatar
      abs()
      top             1px
      left            1px
      padding         1px
      bg(color,white)
      size(16px,16px)
    .avatarview
      cite
        hidden()

    span.profile
      margin-left     21px
      display         block
      overflow        hidden

@media screen and (max-width:1000px)

  .group-content-display .group-content
    .kdtabhandlecontainer
      .kdtabhandle
        padding-right         20px

.group-new-count
  border-radius               3px
  background-color            #ff9200
  padding                     2px 3px
  line-height                 12px
  font-size                   11px
  vertical-align              top
  box-sizing                  border-box
  display                     inline-block
  margin-top                  3px
  color                       white

.policy-language-image-wrapper
  fr()
  width                       auto
  border                      1px solid #e8e8e8
  rounded                     5px
  bg                          color, #fbfbfb
  img
    width                     auto
    height                    auto
    margin                    10px
  span
    border-top                1px solid #e8e8e8
    display                   block
    padding                   10px
    font-size                 11px
    bg                        color, white<commit_msg>policy language style adjustments and image screenification<commit_after>@import "./client/Framework/themes/default/kdfn"
@import "./client/stylus/appfn"
@import "nib"
@import "nib/gradients"
@import "nib/vendor"


.grouptabhandle.dirty .new
  background-color            #0a92ba
  color                       white
  font-weight                 bold
  font-size                   11px
  line-height                 1
  padding                     1px 4px
  rounded                     3px


.group-admin-modal

  &.admin-kdmodal
    .kdselectbox
      margin-right              22px

  .kdview.formline.type.group-type
    padding                     0
    border-bottom               none
  .group-type
    margin                      11px 0
    .kd-radio-holder
      height                    60px
      line-height               60px
      padding                   0 20px
      rel()
      // &.checked
      //   bg                      color, rgba(0, 0, 0, .05)
      label
        display                 block
        margin-left             90px
        font-size               14px
      input
        top                     22px
        left                    90px
        margin                  0
        abs()
      &.active
        bg                      color, rgba(0, 0, 0, .05)
      &:hover
        bg                      color, rgba(0, 0, 0, .05)
        &:before
          bg                    position, -460px -620px
          opacity               .9
      &:before
        content                 ""
        size                    60px, 60px
        bg                      color, pink
        bg                      position, -400px -620px
        top                     5px
        opacity                 .4
        sprite()
        abs()
      &.company:before
        bg                      position, -400px -680px
      &.project:before
        bg                      position, -400px -740px
      &.custom:before
        bg                      position, -400px -800px
      &.company:hover:before
        bg                      position, -460px -680px
      &.project:hover:before
        bg                      position, -460px -740px
      &.custom:hover:before
        bg                      position, -460px -800px

  div.general-settings  > .kdformview
    margin-top                5px
    > .formline
      width                   100%
      overflow                auto
      border-bottom           1px solid rgba(0, 0, 0, .1)
      padding                 5px 0px 7px 18px
      borderBox()
      &.button-field
        padding-right         20px
        padding-top           10px
      .input-wrapper
        overflow              visible

  > .kdformview
    max-width                 800px
    margin                    20px auto
    border                    1px solid #e8e8e8
    rounded(5px)

    > .formline
      width                   100%
      borderBox()
      overflow                auto

      .kdinput.text
        width                 100%

      textarea.kdinput.text
        min-height            100px

      &.button-field
        bg color,             transparent
        rounded               0
        border                none
        padding               0
        margin-left           0
        margin-top            0
        padding               20px
  .kdselectbox
    fr()
  .kdinput.on-off
    margin-right              25px
    fr()
    > span
      hidden()

.groups-invitation-request-view
.groups-member-permissions-view

  .kdview.kdloader
    display                   block
    margin                    10px auto

  .kdview.kdlistitemview.kdlistitemview-invitation-request
  .kdview.kdlistitemview.kdlistitemview-member-item
    line-height               24px

    .kdselectbox
      display                 inline-block
      float                   right

    .profile
      font-size               13px

    .role
      color                   #999

    span.icon
      &.edit
        bg                    position, -120px -400px
      &.delete
        bg                    position, -80px -520px
      &.save
        bg                    position, -80px -500px

    .kd-checkbox-holder
      line-height             30px
      margin-right            10px
      display                 inline-block

      input[type=checkbox]
        vertical-align        middle
        display               inline
        width                 auto
        margin                0 10px 0 3px

      label
        float                 none
        display               inline


  .edit-container
    padding                   5px 10px
    border                    1px solid #ccc
    rounded                   4px
    bg                        color, #f5f5f5
    borderBox()

    .buttons
      margin                  10px 0 5px 0
      padding                 10px
      bg                      color, #e2e2e2
      rounded                 3px
      border                  1px solid #ccc
      .kdbutton
        width                 auto
        margin-right          10px

.invitation-request
  .username
    font-weight               bold
    color                     #ff9200
  &.invitation-sent
    background-color          #eee

.group-header
  margin-top                  20px
  padding                     20px 20px 0
  borderBox()
  .avatar
    margin-right              20px
    fl()
    span
      display                 block
      border                  1px solid #eee
      padding                 1px
      size                    60px, 60px
  section
    height                    auto
    rel()
    h2
      font-size               36px
      font-weight             normal
      line-height             64px
      height                  64px
      border-bottom           none
      padding                 0
      overflow                ellipsis
      margin-right            180px
    .buttons
      top                     0
      right                   0
      size                    auto, 100%
      padding                 18px 5px
      borderBox()
      abs()
      .custom-link-view.enter-group
        margin-right          5px
  .navbar
    bg                        color, #f5f5f5
    height                    60px
    margin                    20px 0 0
    borderBox()
    .custom-link-view
      margin                  20px 20px 0
      span.title
        color                 #aaa
        // noTextDeco()
      &.enter-group
        margin-left           20px
      .icon
        &.enter-group
          bg                  position, -180px -518px
          opacity             .2
        &.admin
          bg                  position, -180px -439px
          opacity             .5

.group-content-display
  .sub-header
    gradient                  #fff, #f8f8f8
    width                     100%
    z-index                   100
    fix()
    &.shadow
      shadow                  0 0 15px rgba(0,0,0,.1)

  .loader
    fl()
    margin-top                10px
  .loader-text
    display                   block
    width                     auto
    height                    auto
    margin-top                8px
    padding-left              5px

  .readme
  .invitations
    .button-bar
      margin-top              10px
      margin-bottom           5px
      text-align              right
      width                   auto
      opacity                 0.95
      vendor transition,      opacity 0.2s linear
      &:hover
        opacity               1

  .readme
    borderBox()
    padding                   0px 20px
    width                     100%

    .data
      borderBox()
      border                  none
      padding                 10px 0 0 0

    .edit
      margin-top              10px
      borderBox()
      width                   100%
      min-height              200px
      max-height              400px
      .preview_content
        padding               10px
    .edit-cancel
      font-size               12px
      margin-top              4px
      margin-right            5px
      span
        noTextDeco()
        color                 #aaa
  .desc
    border-bottom             1px solid #f2f2f2
    padding                   20px 0

  .group-content
    borderBox()
    // height                    auto

    .kdtabhandlecontainer
      padding-top             0
      margin-top              28px
      // background            linear-gradient(top, #555 0%,#666 93.7%)
      height                  27px
      padding                 0px 10px 0px 10px
      // shadow                inset 0 2px 5px rgba(0,0,0,.1)
      bg color,               #f8f8f8
      borderBox()
      border-bottom           1px solid #e8e8e8
      .kdtabhandle
        border-width          0
        height                27px
        line-height           27px
        color                 #aaa
        font-size             13px
        padding               0 40px 0 10px
        width                 auto!important
        borderBox()
        rounded(0)
        b
          margin-right        0
          font-weight         normal
        &.active
          // border-color      #ccc
          border              none
          bg color,           transparent
          height              21px
          // background        linear-gradient(top, #ffaf43 0%,linkColor1 100%)
          color               #444
          // text-shadow       0 -1px 0 rgba(0,0,0,.05)
          // shadow            inset 0 2px 2px -2px rgba(0,0,0,0.40)
          b
            // text-decoration underline
            font-weight       600

    .invitations section.formline div.formline.kdlistitemview-invitation-request
    .members .kdlistitemview-member-item-inner
      min-width               350px
      display                 inline-block
      margin                  2px
      padding                 10px
      borderBox()
      vendor transition,      background-color 0.2s ease-in-out
      background-color        rgba(248,248,248,0.5)

    .invitations section.formline div.formline.kdlistitemview-invitation-request:hover
    .members .kdlistitemview-member-item-inner:hover
    .members .editing .kdlistitemview-member-item-inner
        background-color      rgba(248,248,248,1)

    .members
      .listview-wrapper
        borderBox()
        padding               20px
        overflow              hidden
        .kdlistview
          overflow            visible
        .kdlistitemview-member-item
          position            relative
          overflow            visible
          width               auto
          min-width           350px
          height              76px
          display             inline-block
          &.editing .kdlistitemview-member-item-inner
            z-index         50
          .kdlistitemview-member-item-inner
            border            2px solid #fff
            margin            0
            position          absolute
            top               0
            left              0
          section
            .profile
              borderBox()
              margin-left         60px
              padding             2px
              display             block
            .role
              borderBox()
              margin-left     60px
              padding         2px
              display         block
            .edit-link
            .save-link
            .cancel-link
              fr()
            .edit-link
              hidden()

          &:hover
            section .edit-link
              visible()

    .policy-view-wrapper
      padding-top             20px

    .invitations
    .membership-policy
    .approval-requests

      .button-bar
        margin-right          20px

      section.formline
        margin-left           100px
        margin-top            10px
        padding               10px

        h2
          padding-left        0
          padding-bottom      0px
          height              17px
          // font-weight 600
          font-size           14px
          // border none
        h3
          font-size           12px
          padding-bottom      10px

        p
          margin-top          0px
          margin-bottom       15px
          padding-left        0px

        > a
          margin-left         10px

        button
          height              24px
          line-height         8px

        .policylanguage-editor
          width               auto
          display             inline-block
          button
            margin            10px 10px 0 0
          textarea
            min-width         400px
            min-height        100px

        div.formline
          borderBox()
          margin              0
          padding             10px 0
          bg color,           transparent
          border              none

          > span
            margin-left       20px
            display           inline-block
            hidden()

      a.edit-link
      > div.kdview > div.on-off
        fl()
        margin-left           25px
        margin-top            20px
        display               inline-block
        width                 auto

      a.edit-link
        margin-top            16px
        padding-left          17px

    .invitations
    .approval-requests

      div.formline.button-field
        margin                0
        padding               0
        height                auto

      div.formline
        overflow              hidden
        width                 100%

      section.formline
        overflow              hidden
        min-width             200px
        width                 50%
        borderBox()
        margin                0
        padding               20px 20px 0
        fl()

        &.status-quo
          width               100%

    .approval-requests
      section.formline
        button
          margin-left         10px
          width               60px

    .permissions
      height: auto;
      margin-bottom: 50px;

    .form-generator
      min-width               600px
      overflow                hidden
      .wrapper
        width                 auto
        border                1px solid #e8e8e8
        rounded               4px
        bg color,             #f5f5f5

      .form-builder
        width                 100%
      .add-header
        bg color,             #fbfbfb
        border-bottom         1px solid #e8e8e8
        rounded               5px 5px 0 0
        div
          color               #444
          borderBox()
          padding             5px 8px 4px 8px
          margin              0
          width               150px
          font-weight         bold
          font-size           12px
          display             inline-block
          vertical-align      top
          &:first-child
            width             100px
      .add-inputs
        padding-top           10px
        // border-top 1px solid #f5f5f5
        bg color,             #fbfbfb
        // bg color, #f5f5f5
        width                 auto
        rounded               0 0 5px 5px
        .add-input
          width               150px
          borderBox()
          display             inline-block
          padding             4px 9px
          vertical-align      top
          &:first-child
            width             100px
            .kdselectbox
              width           80px

          &.button
            padding           0
            width             auto

          &.select
            display           block

          .kdinput
            width             140px

          .kdselectbox
            width             130px
        .select-fields
        .radio-fields
          margin-left         405px
          padding             5px
          width               250px
          borderBox()
          border              1px solid #e8e8e8
          bg color,           #f5f5f5
          rounded             4px
          > input.text
            display           inline-block
          h3
            // bg color, #f5f5f5
            // color #444
            padding           5px 5px 5px 0
          .form-builder-select
          .form-builder-radio
            margin-bottom     10px
            .default-item
              color           #aaa
            .kdlistitemview
              width           auto
              bg color,       white
              margin          3px
              padding         5px 5px 0px 5px
              span.value
                color         #aaa
              .title
                display       inline-block
                width         auto
              .remove-button
                display       inline-block
                width         auto
                margin-left   5px
                fr()
      .form-item
        borderBox()
        width                 auto
        border-bottom         1px solid #e8e8e8
        bg color,             white
        padding-top           2px
        &:hover
          bg color,           #f5f5f5
        > div
          borderBox()
          border-right        1px solid #f5f5f5
          overflow-x          hidden
          overflow-y          hidden
          text-overflow       ellipsis
          white-space         nowrap
          width               150px
          // min-width 200px
          display             inline-block
          padding             3px 9px
          margin              0
          border              none
          line-height         1.5
          vertical-align      middle
          &:first-child
            width             100px

          &.title
            font-weight       500
          // height 25px
          .kdselectbox
            margin-top        -4px
            height            18px
            width             130px
            span.title
              height          18px
              line-height     18px
              overflow        hidden
              text-overflow   ellipsis
            span.arrows
              top             0
          div.default
          fieldset
            &.textarea
              white-space     normal
            opacity           0.5
            vendor transition, opacity 0.15s ease-in-out
            &:hover
              opacity         1
            span
              color           #aaa
              &.title
                color         #444
          &:first-child
            border-left       none
          &:last-child
            border-right      1px solid #f5f5f5
        &:last-child //> div
          padding-bottom      4px
    span.add-button
      noTextDeco()
      cursor                  pointer
      margin                  0 0 0 5px
      span.title
        noTextDeco()
        color                 black
        line-height           2.5
        font-weight           600

    button.save-button
      margin-left             10px

    span.remove-button
      borderBox()
      noTextDeco()
      display                 inline-block
      margin                  0 0 0 5px
      cursor                  pointer
      span.title
        noTextDeco()

    .permissions-view
      padding                 0 20px

      .add-role-dialog
        z-index               100000

        .add-role-header
          padding-top         15px
          padding-bottom      15px
          font-size           14px
          font-weight         500

        .add-role-button
          margin-bottom       10px
        .add-role-cancel
          margin-top          8px

        label.label-role-name
          display             inline-block
        input.role-name
          display             inline-block
          width               289px

        label.label-copy-permissions
          margin-top          10px
          display             inline-block
        div.kdselectbox.copy-permissions
          margin-top          0px

      // .kdview.kdloader
      //   display           block
      //   margin            10px auto

      .permissions-header
        abs()
        top                   0
        left                  20px
        right                 0
        z-index               20000
        bg color,             white
        &.scrolling
           shadow             0 5px 15px -5px rgba(0,0,0,0.1)
        > .input-wrapper > .kdview
          borderBox()
          width               auto
          line-height         20px
          top                 0
          overflow-x          hidden
          display             block
          text-overflow       ellipsis
          white-space         nowrap
          font-weight         bold


      .permissions-form
        overflow-y            scroll
        overflow-x            hidden
        // max-height 300px
        margin-top            30px

        fraction(full,divisor)
          fraction = full/divisor

        for num in 2 3 4 5 6 7 8 9 10 11 12
          &.col-{num}
            .formline .input-wrapper
              width fraction(340,num)px

        .formline
          &.button-field
            borderBox()
            &.scrolling
              shadow          0 -5px 10px -3px rgba(0,0,0,0.1)
            fixed()
            left              0
            right             0
            // bottom 0
            height            50px
            padding           15px 20px 0 15px
            border-top        1px solid #e5e5e5

            button.add-role
              fl()

          &:nth-last-child(2)
            margin-bottom       49px
            border-bottom-color transparent

          &:nth-child(2n+1):not(.permissions-module):not(.permissions-header)
            bg color,         rgba(0,0,0,0.025)

          borderBox()
          padding             7px 10px
          // border-bottom       1px solid #f5f5f5
          // border-left         1px solid #f5f5f5
          // border-right        1px solid #f5f5f5
          border            none

          .input-wrapper:first-child
            border-left       none
            width             160px
            > .kdview
              borderBox()
              min-height      15px
              line-height     15px
              padding         3px
              padding-left    7px
              display         inline-block
              width           160px
              overflow        hidden
              text-overflow   ellipsis
              white-space     nowrap
              text-align      left

          input.kdinput.permission-checkbox
            display           inline
            margin-right      2px
            width             auto
            margin-top        5px
            vertical-align    middle
          .input-wrapper
            // border-left       1px solid #f5f5f5
            borderBox()
            display           inline-block
            width             100%
            height            20px
            vertical-align    top
            text-align        center
            > .input-wrapper
              vertical-align  middle

        .permissions-module
          // background          linear-gradient(top, #555 0%,#666 93.7%)
          color               #444
          font-weight         bold
          padding-top         25px

          &:nth-child(2) // Header is first, first subgroup is 2
            padding-top       0

          .input-wrapper
            text-align        left

    .vocabulary > .kdview
      padding                 0 20px

.group-content .invitations
.group-content .approval-requests
.invitations-request-modal
  .request-list
    .formline.kdlistitemview-invitation-request
      .buttons
        fr()
        button
          line-height         normal
          .icon
            width             20px
            &.approve
              bg              position, -77px -502px
            &.decline
              bg              position, -77px -482px
      .status
        font-size             11px
        fr()
        &.sent
          color               #ff9101
          .icon
            bg                position, -100px -580px
        &.accepted
        &.approved
          color               #40af00
          .icon
            bg                position, -80px -500px
        &.ignored
        &.declined
          color               #be2a26
          .icon
            bg                position, -80px -480px
        &.pending
          color               #acacac
          .icon
            bg                position, -320px -140px
        span
          display             inline-block
          &.icon
            size              20px, 20px
            sprite()
          &.title
            vertical-align top
            line-height       20px
      .details
        margin-left           50px
        .requested-at
          color               #999
          font-size           10px
          line-height         10px

      a
        noTextDeco()

      span.avatar
        border                1px solid #E3E3E3
        padding               1px
        margin-right          10px
        size(40px,40px)
        bg(color,#fff)
        fl()

        a
          display               block
          background-position   center
          background-image      url('../images/defaultavatar/default.avatar.40.png')
          bg(size,cover)
          bg(repeat,no-repeat)
          size(30px,30px)

.invitations-request-modal .request-list
  .formline.kdlistitemview-invitation-request
    padding                   10px
    border-bottom             1px solid #eee
    width                     auto
    button
      height                  24px
      line-height             8px
    .details .requested-at
      margin-top              5px

.kdmodal.invite-by-username
  .kdautocompletewrapper
    width             250px
    display           inline-block
    vertical-align    bottom
    borderBox()
    input.text
      width           100%
      borderBox()
  .completed-items
    width             250px
    max-height        300px
    margin-left       95px
    padding           5px 0 0 0
    overflow          auto

  .kdview.kdautocompletedlistitem
    margin            5px 5px 0 0
    padding-left      0
    span.avatar
      abs()
      top             1px
      left            1px
      padding         1px
      bg(color,white)
      size(16px,16px)
    .avatarview
      cite
        hidden()

    span.profile
      margin-left     21px
      display         block
      overflow        hidden

@media screen and (max-width:1000px)

  .group-content-display .group-content
    .kdtabhandlecontainer
      .kdtabhandle
        padding-right         20px

.group-new-count
  border-radius               3px
  background-color            #ff9200
  padding                     2px 3px
  line-height                 12px
  font-size                   11px
  vertical-align              top
  box-sizing                  border-box
  display                     inline-block
  margin-top                  3px
  color                       white

.policy-language-image-wrapper
  fr()
  width                       auto
  border                      1px solid #e8e8e8
  rounded                     5px
  bg                          color, #fbfbfb
  margin-left                 10px
  img
    width                     auto
    height                    auto
    margin                    3px 3px 0
  span
    border-top                1px solid #e8e8e8
    display                   block
    padding                   10px
    font-size                 11px
    bg                        color, white
{'fraction_non_alphanumeric': 0.04859172798782035, 'fraction_numerical': 0.03800703229782144, 'mean_word_length': 0.7535914060513603, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '362153', 'n_tokens_mistral': 14839, 'n_tokens_neox': 13170, 'n_words': 3385}