.keyable-column
  float: left
  display: block
  box-sizing: border-box
  width: 33.33%
  height: 100%
  position: relative
  height: 100%
  border-right: 1px solid rgba(#000, 0.1)

  &:last-of-type
    border-right: none

  .column-header
    position: relative
    .head
      height: $app-tab-height
      box-sizing: border-box
      padding: 0 15px
      background: #fff
      position: relative

    .parent-name
      font-size: 14px
      font-family: $condensed-font
      color: hsl(0,0,60)
      position: absolute
      top: 12px

    .title, button, .small-loader
      position: relative
      top: 50%
      transform: translateY(-50%)

    .title
      font-family: $condensed-font
      text-transform: uppercase
      color: hsl(0,0,40)
      font-size: 20px
      font-weight: 200
      position: relative
      float: left
      top: calc(50% + 5px)

      em
        font-weight: 400

    button
      float: right
      box-sizing: border-box
      width: 40px
      font-size: 25px
      font-weight: 100
      border: 1px dashed rgba($dark-blue, 0.5)
      background: #fff
      color:  rgba($dark-blue, 0.9)
      transition: background 0.15s ease-out, color 0.15s ease-out
      outline: none

      > span
        position: relative
        top: 1px

      &:hover
        background: rgba($dark-blue, 0.05)

    .small-loader
      float: right

  .column-body
    height: calc(100% - #{$app-tab-height * 2 + 1px})

    .empty-state
      width: 100%
      text-align: center
      padding: 20px 0
      p
        font-size: 13px
        color: hsl(0,0,75)
        line-height: 150%
        margin: 0 10px

        strong
          font-weight: 400

        .title, .subtitle
          text-transform: lowercase


  &.admin .column-header .title em
    color: $orange

  &.production .column-header .title em
    color: $light-blue

  &.development .column-header .title em
    color: $darker-blue

  &.show-add-keyable
    .column-header .head > button
      background: $darker-blue
      color: #fff
      font-size: 13px
      span
        top: 1px

    .object-form.invite-new-user
      position: relative
      z-index: 2
      background: #fff

  .permissions
    height: $app-tab-height
    background: hsl(0,0,97)
    box-sizing: border-box
    padding: 0 15px

    ul
      display: block
      position: relative
      top: 50%
      transform: translateY(-50%)

    li
      font-size: 12px
      color: hsl(0,0,45)
      line-height: 140%

      &::before
        content: "-"
        display: inline
        margin-right: 5px

      span > strong
        font-weight: 600

  .sections
    height: 100%
    overflow-y: auto

  .section
    width: 100%

    &:last-of-type
      border-bottom: 1px solid rgba(#000, 0.05)

  .section-title
    background: $darker-blue
    color: #fff
    text-transform: uppercase
    font-size: 11px
    font-weight: 600
    padding: 5px 10px

.association-manager.app-server
  .keyable-column
    &.production .column-header .head .title em
      color: $light-blue

    &.staging .column-header .head .title em
      color: $darker-blue

    &.development .column-header .head .title em
      color: $dark-text

