.key-manager
  max-width: 460px
  position: relative

  .key-section-head
    padding: 20px 0 20px 25px
    h4
      margin-bottom: 7px
      font-size: 14px
      font-family: $condensed-font
      color: hsl(0,0,50)
      font-weight: 200

    h2
      font-family: $condensed-font
      font-size: 22px
      font-weight: 300
      text-transform: uppercase
      color: hsl(0,0,40)
      margin-bottom: 15px

      strong
        font-weight: 400
        color: $dark-blue

    p
      font-size: 14px
      line-height: 150%
      color: hsl(0,0,35)

      a, a:visited
        color: $dark-blue
        text-decoration: none
        &:hover
          text-decoration: underline

  .key-section-content
    padding-left: 25px

  .association-row
    +clearfix
    border: none
    height: 69px
    background: hsl(0,0,94)
    padding: 20px

    > .bottom-row, > div:not(.key-generated) > .bottom-row
      padding: 0

    &:not(:first-of-type)
      margin-top: 44px

    > div:not(.key-generated)
      position: relative

    .name
      font-size: 13px
      color: rgba(#fff, 0.95)
      font-family: $condensed-font
      text-transform: uppercase
      background: hsl(0,0,75)
      display: inline-block
      padding: 5px 9px
      position: absolute
      top: -43px
      left: -20px

    &:not(.is-default)
      .name
        padding-left: 35px
      .remove
        top: -23px
        z-index: 2
        left: 0
        padding: 2.5px 5px
        width: 26px
        box-sizing: border-box
        cursor: pointer
        border-right: 1px solid rgba(#fff, 0.2)
        transition: background 0.15s
        img
          opacity: 0.4
          width: 16px
          position: relative
          top: 1px
          left: -0.75px

        .small-loader
          svg
            width: 16px
            height: 16px
          svg rect, svg path
            fill: rgba(#fff, 0.9)

        &:hover
          background: hsl(0,0,65)
          img
            transition: opacity 0.15s
            opacity: 0.5

  .server-keys-section, .development-keys-section
    .association-manager
      .single-item-col, .single-item-section
        .association-row
          &:first-of-type
            margin-top: 10px
          .name
            display: none
        .column-header
          margin-bottom: 25px

  .server-keys-section .association-manager
    .single-item-col, .single-item-section
      .association-row:first-of-type
        margin-top: 20px

  .development-keys-section
    .column-header
      display: none

    .single-item-col .association-row:first-of-type
      margin-top: 0

  .server-keys-section .section-title
    margin-top: 22px
    background: hsl(0,0,63)
    padding-top: 10px
    padding-bottom: 10px
    position: relative
    font-size: 14px
    font-family: $condensed-font

    .title
      padding-left: 25px
      font-weight: 500

      > img
        position: absolute
        left: 11px
        width: 14px
        top: 50%
        transform: translateY(-53%)
        opacity: 0.8

    .subtitle
      float: right
      font-weight: 400
      color: rgba(#000, 0.45)


  .server-keys-section
    .base-env
      .section-title
        display: none

    .sub-env
      .associations
        padding: 0 0 0 20px
        box-sizing: border-box

  .association-manager
    .column
      float: none
      width: 100%
      border: none
      height: auto
      margin-top: 10px
      margin-bottom: 20px

      .column-header
        +clearfix
        padding-top: 23px
        padding-bottom: 7px
        border-top: 1px solid hsl(0,0,90)
        border-bottom: 1px solid hsl(0,0,90)

      .column-body
        height: auto
        .sections
          height: auto
          width: 100%
          overflow: visible

        > .small-loader
          display: block
          margin-top: 15px

      .head
        height: auto
        float: left
        padding: 0

      .head .title
        font-weight: 300
        font-size: 16px
        color: hsl(0,0,60)
        em
          font-weight: 400
          color: hsl(0,0,50)

      .head .parent-name
        display: none

      .permissions
        background: none
        float: right
        display: inline-block
        height: auto
        padding: 0

        li
          color: hsl(0,0,55)
          font-size: 12px

        li::before
          content: ""

    .keyable-column .section:last-of-type
      border: none

  .add-button
    +clearfix
    display: block
    position: relative
    width: 100%
    border-radius: 0
    margin-top: 25px
    background: hsl(0,0,96)
    outline: none
    transition: background 0.1s

    > span
      font-family: $default-font
      float: left
      text-transform: none
      font-weight: 300
      font-size: 13px
      position: relative
      top: -1px
      color: hsl(0,0,60)

    .img
      display: block
      position: absolute
      right: 0
      top: 0
      height: calc(100% - 1px)
      width: 48px
      text-align: center
      background: rgba($dark-blue, 0.8)
      box-sizing: border-box
      transition: background 0.1s

      > img
        width: 18px
        position: relative
        top: 50%
        transform: translateY(-50%)

  .show-add-keyable .add-button, .add-button:hover
    background: $dark-blue

    > span
      color: #fff
      font-weight: 600
    .img
      background: $darker-blue

  .show-add-keyable .add-button
    padding-left: 0
    padding-right: 0
    > span
      display: block
      width: 100%
      text-align: left
      position: relative
      height: 100%
      box-sizing: border-box
      padding-left: 10px
      padding-right: 10px
      padding-top: 8px
      top: 2px

    .img
      top: -1px

    .img > span
      text-transform: uppercase
      display: inline-block
      position: relative
      top: 47.5%
      transform: translateY(-50%)

  .development-keys-section
    .association-row:first-of-type
      margin-top: 15px
    .head .title
      color: $light-orange

  .server-keys-section
    .association-manager .column
      margin-bottom: 40px
    .association-row:first-of-type
      margin-top: 40px

  .onboard-slider
    position: absolute
    left: 490px
    width: 325px
    top: 25px



