.entities
  +position(absolute, 0 null 0 0)
  +size(380px 100%)
  margin: 0 10px
  background-color: $white
  box-shadow: 0px 0px 10px 0px rgba($black, .15)

  .entities-header
    height: grid-row(6)
    +box-sizing(border-box)
    padding-top: 40px
    border-bottom: 1px solid $lightest-gray
    text-align: center
    h1
      font-weight: $font-weight-normal
      color: $brand-default
      &:first-child
        margin-top: 0px

  .entities-search
    height: grid-row(2)
    border-bottom: 1px solid $lightest-gray
    line-height: grid-row(2)
    cursor: text

    background-color: $dark-white
    background-image: url('../img/#{$resourceRoutePre}structure/icon_search.svg')
    background-repeat: no-repeat
    background-position: 7px center

    input
      width: 100%
      height: grid-row(2)
      padding: 0px
      margin: 0px
      border: 0px
      line-height: 25px
      text-indent: grid-row(3)
      background-color: transparent
      +attribute-focus

  .entities-list
    position: absolute
    width: 100%
    top: grid-row(8)+63
    bottom: grid-row(1.5)
    overflow-y: auto
    overflow-x: hidden

  .entities-order
    position: absolute
    width: 100%
    height: grid-row(1.5)
    line-height: grid-row(1.5)
    bottom: 0
    text-align: center
    border-top: solid 1px $lightest-gray
    +box-sizing(border-box)
    a
      display: block
      width: 100%
      height: 100%
      text-decoration: none
      color: $brand-default
      font-size: 15px
      +transition(all 0.3s)
      &.save
        background: $brand-default
        color: white
        &:before
          background-image: url('../img/#{$resourceRoutePre}structure/icon_save_order.svg')
          background-size: contain
          background-repeat: no-repeat

      &:before
        content: ''
        display: inline-block
        width: 19px
        height: 23px
        background-image: url('../img/#{$resourceRoutePre}structure/icon_reorder.svg')
        background-size: contain
        background-repeat: no-repeat
        vertical-align: middle
        margin-right: 10px


  // Hierarchical zebra pattern
  .entities-list-items > ul
    +background-image(linear-gradient($dark-white 50%, transparent 50%, transparent))
    background-size: grid-row(4) grid-row(4)
    margin: 0
    padding: 0
    ul
      margin: 0
      display: none
    .open > ul
      height: auto
      display: block

  .entities-list-item
    line-height: grid-row(.65)
    +box-sizing(border-box)
    transition: all .3s
    cursor: pointer
    margin: 0
    list-style: none
    display: table
    width: 100%
    height: grid-row(2)
    white-space: nowrap
    &.active > div
      background-color: lighten($brand-primary, 0.40)
      color: white


    &.entities-new
      & > a
        &:hover
          background-color: $brand-primary
          color: #fff
          .blue
            color: #fff
            font-weight: bold


    .list-entity-title
      display: block
      white-space: normal
      font-size: 17px
      margin-top: 2px
      margin-bottom: 3px
      font-weight: bold

    .list-entity-subtitle
      display: block
      font-size: 14px
      white-space: normal
      &.blue
        color: #3289ff

    .small
      font-size: 14px

    & > a
      position: relative
      display: table
      width: 100%
      text-decoration: none
      color: $text-color
      padding: grid-row(.5) 0
      .dropdown-icon
        position: absolute
        display: block
        width: 10px
        height: 5px
        top: 0
        right: grid-row(1)
        img
          position: relative
          top: 5px
          padding: 5px
      &:hover
        background: lighten($lightest-gray, 3%)
        border-color: $lighter-gray
        color: #438eb9
        .blue
          color: #438eb9
          font-weight: bold

    &.active > a
      color: $white
      background-color: $brand-primary
      border-bottom: 1px solid $brand-primary
      .blue
        color: #fff
        font-weight: bold



  // Uitklap menu
  li.entities-list-item
    display: block
    padding: 0
    height: auto
    & > a
      position: relative
      display: block
      +size(100% grid-row(2))
      line-height: grid-row(2)
      text-decoration: none
      color: $text-color
      padding: 0
      padding-left: 100%
      left: -100%
    .entities-item-pre
      position: relative
      top: grid-row(.5)
    .entities-item-text
      width: auto
      float: none
      display: inline

    &:nth-of-type(even)
      background-color: $dark-white


  div.entities-list-item:nth-child(odd)
    background-color: $dark-white

  div.entities-list-item.entities-new
    background-color: $white

  .entities-item-text
    display: inline-block
    width: 320px
    +clearfix()
    margin-top: 5px

  .entities-item-pre
    display: inline-block
    +size(grid-row(2) 100%)
    text-align: center
    vertical-align: top

    .entities-item-thumb, img
      display: block
      +size(grid-row(1) grid-row(1))
      border-radius: grid-row(1)
      margin: 0 auto
      background-color: $lighter-gray
      line-height: grid-row(1)
      font-size: $font-size-large
      font-weight: $font-weight-heavy
      color: $light-gray
      overflow: hidden

    .entities-item-plus
      display: block
      +size(grid-row(1) grid-row(1))
      border-radius: grid-row(1)
      border: 1px solid $brand-default
      margin: 0 auto
      background-color: $white
      background-image: url('../img/#{$resourceRoutePre}structure/icon_plus.svg')
      background-repeat: no-repeat

    img
      background-color: transparent

  div.entities-new
    height: grid-row(2)
    border-bottom: 1px solid $lightest-gray
    color: $brand-primary
    background-color: $white
    display: block
    img
      border: 1px solid $brand-primary

  .entities-content-container
    position: absolute
    width: 100%
    top: grid-row(6)
    bottom: 0
    overflow: auto

  .entities-content
    padding: grid-row(2) grid-row(1) grid-row(1) grid-row(1)
    font-size: $font-size-large
    p
      margin-bottom: grid-row(.5)

  .hidden
    display: none

  .angular-ui-tree-handle
    position: relative
    border-bottom: 1px solid #dae2ea
    font-weight: normal
    min-height: grid-row(1.5)
    line-height: grid-row(1.5)
    padding-left: 999px
    margin-left: -999px

    .btn
      position: absolute
      right: grid-row(.5)
      top: 0
      height: grid-row(1.5)
      padding: 0 5px
      background: none
      .icon
        display: block
        width: 10px
        height: 100%
        background-image: url('../img/#{$resourceRoutePre}structure/icon_triangle_down.svg')
        background-position: center center
        background-repeat: no-repeat

    .entities-item-thumb
      margin-top: -7px

  .angular-ui-tree-handle:hover
    color: #438eb9
    background: lighten($lightest-gray, 3%)
    border-color: $lighter-gray

  .angular-ui-tree-placeholder
    border: 1px dashed #bed2db
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
    margin: 0

.angular-ui-tree-drag
  .btn, .entities-item-thumb
    display: none


.entities .angular-ui-tree-handle
  cursor: pointer

.entities .sorting .angular-ui-tree-handle
  cursor: move

.entities .sorting li.entities-list-item
  +animation(shake1 1.5s infinite alternate)

.entities .sorting li.entities-list-item:nth-child(odd)
  +animation(shake2 1.5s infinite alternate)


+keyframes(shake1)
  0%
    +transform(translate(.5px, .25px))
  10%
    +transform(translate(-.25px, -.5px))
  20%
    +transform(translate(-.75px, 0px))
  30%
    +transform(translate(0px, .5px))
  40%
    +transform(translate(.25px, -.25px))
  50%
    +transform(translate(-.25px, .5px))
  60%
    +transform(translate(-.75px, .25px))
  70%
    +transform(translate(.5px, .25px))
  80%
    +transform(translate(-.25px, -.25px))
  90%
    +transform(translate(.5px, .5px))
  100%
    +transform(translate(.25px, -.5px))

+keyframes(shake2)
  0%
    +transform(translate(.25px, -.5px))
  10%
    +transform(translate(.5px, .5px))
  20%
    +transform(translate(-.25px, -.25px))
  30%
    +transform(translate(.5px, .25px))
  40%
    +transform(translate(-.75px, .25px))
  50%
    +transform(translate(-.25px, .5px))
  60%
    +transform(translate(.25px, -.25px))
  70%
    +transform(translate(0px, .5px))
  80%
    +transform(translate(-.75px, 0px))
  90%
    +transform(translate(-.25px, -.5px))
  100%
    +transform(translate(.5px, .25px))