.entity
  +position(absolute, 0 0 0 400px)
  background-color: $dark-gray

  .entity-header
    +size(100% grid-row(6))
    display: block
    background-color: $darker-gray
    box-shadow: inset 0px -20px 20px -20px rgba(0,0,0,.5)

    .entity-thumbnail
      position: relative
      +size(100px 100px)
      overflow: hidden
      float: left

      margin-left: grid-row(2)
      margin-top: 40px

      border: solid 1px $white
      border-radius: 10px

      background-color: #ccc
      line-height: 100px
      text-align: center
      font-size: 32px
      font-weight: bold
      color: #999

      img
        +size(100px 100px)

      &:after
        content: ""
        position: absolute
        display: block
        +size(grid-row(3) grid-row(3))
        top: 0
        z-index: 5
        +background(linear-gradient(135deg, rgba($white,0.20) 0%,rgba($white,0.20) 50%,rgba($white,0) 51%,rgba($white,0) 100%))

    .entity-title
      +position(absolute, null 250px null 190px)
      display: block
      +gridlover-heading(2)
      color: $white

    .entity-buttons
      +position(absolute, 0 0 null null)
      position: absolute
      width: 250px
      padding-top: 100px

  .entity-tabs, .sub-tabs
    width: 100%
    height: grid-row(2)
    background-color: $dark-gray
    box-shadow: inset 0px 20px 20px -20px rgba($white,.1)

    ul
      margin: 0px
      padding: 0px
      padding-left: 40px
      list-style: none

      li
        background-color: #999
        float: left
        margin: 20px 5px 0px 5px
        height: 40px
        line-height: 40px
        +border-top-radius(4px)


        a
          display: block
          +size(100% 100%)
          color: $white
          font-weight: $font-weight-bold
          font-size: $font-size-base
          line-height: 40px
          text-transform: uppercase
          text-decoration: none
          padding: 0 20px

      li.active
        background-color: $white
        a
          color: $brand-primary

      li.error a
        color: $brand-danger
  &.order
    left: 10px
    .half-half
      width: 50%
      float: left
    .clear
      clear: both
    .lock
      background-size: 100px auto
      width: 50px
      height: 50px
      margin-right: 10px
      margin-top: 9px
      float: right
      display: block
      cursor: pointer
      background:  rgba(0, 0, 0, 0) url("/images/kms/structure/open_gesloten.png") no-repeat scroll -50px 0px / 100px auto
      &.open
        background:  rgba(0, 0, 0, 0) url("/images/kms/structure/open_gesloten.png") no-repeat scroll -0px 0px / 100px auto
    .entity-attribute-button
      padding-left: 30px
    .download
      select
        margin-left: 30px
        margin-right: 30px
        width: 40%

  .sub-tabs
    background-color: $dark-white
    box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
    +box-sizing(border-box)

.entity-messages
  line-height: grid-row(2)
  +box-sizing(border-box)
  background-color: $brand-danger

  .label
    position: absolute
    display: block
    width: 175px
    margin-left: grid-row(1)
    font-size: $font-size-small
    color: $white
    text-transform: uppercase
    font-weight: $font-weight-bold

  .messages
    padding-left: 205px
    width: 100%
    ul
      list-style-type: none
      margin: 0
      padding: grid-row(.5) 0
      line-height: grid-row(1)
      li
        height: grid-row(1)
        font-size: $font-size-small
        background-image: url('/images/kms/structure/icon_cross.svg')
        background-size: 6px 6px
        background-repeat: no-repeat
        background-position: 0 center
        color: $white
        padding-left: 12px
        font-weight: $font-weight-bold

.tab-content, .sub-tab-content
  display: none
  &:first-child
    display: block

.tab-content
  padding-bottom: grid-row(5)

.fieldGroupCollection
  ul
    list-style: none
    margin: 0
    padding: 0
    li
      list-style: none
      position: relative
      padding-left: 25px
    &.fieldGroupItems

      li
        &:before
          content: ''
          display: inline-block
          height: 25px
          width: 35px
          background-image: url('/images/kms/structure/drag.png')
          background-size: contain
          background-repeat: no-repeat
          position: absolute
          left: 20px
          top: 17px