.entity-attribute-images
  height: auto
  box-sizing: border-box
  line-height: 59px
  min-height: 120px
  ul
    float: left


  .image-list-ng
    position: relative
    .placeholder
      padding: 2px
      width: 50px
      height: 20px
      border: 1px solid #333
      background: #EEE

    span.deleteImage, span.move
      position: absolute
      height: 20px
      width: 20px
      cursor: pointer
      line-height: 10px
      text-align: center
    span.deleteImage
      bottom: -20px
      color: darkred
      right: 0
      font-size: 2em
      &:hover
        color: white
        background-color: darkred
    span.move
      position: absolute
      top: -20px
      width: 45%
      cursor: pointer
      &.move-left
        left: 0
      &.move-right
        left: auto
        right: 0
      &:hover
        color: white
        background-color: #3289ff


  .uploads
    display: none
  .new-image
    position: relative
    &.disabled:hover:after
      opacity: 0
    .disable-overlay
      height: 100%
      z-index: 100
      position: absolute
      background-color: rgba(grey, 0.5)
      width: 100%
    button
      cursor: pointer
      background: none
      border: none
      cursor: pointer
      height: 100%
      width: 100%
      &.disabled
        backound-color: grey


  .image-list

    margin-left: 230px
    box-sizing: border-box

    ul
      +clearfix
      margin: 0
      padding: 0
      padding-top: grid-row(.8)
      list-style: none
      line-height: 58px
      box-sizing: border-box
      &.sortableOptions
        padding-bottom: grid-row(.4)
        float: none
      li
        position: relative
        margin-right: grid-row(.5)
        margin-bottom: grid-row(1)
        box-sizing: border-box
        display: block
        float: left
        +size(60px 60px)
        position: relative

        &.image-thumb:nth-child(2)
          span.left.arrow
            display: none

        &.image-thumb:last-of-type
          span.right.arrow
            display: none

        &.just-uploaded:hover:after
          position: absolute
          opacity: .9
          top: 0
          left: 0
          width: 100%
          height: 100%
          content: ''
          background-color: #f2303f
          background-image: url(../img/structure/icon_trash.svg)
          background-repeat: no-repeat
          background-position: 50% 50%
          background-size: 16px 16px



        span.image-thumb-li, span.image-thumb-span
          +size(60px 60px)
          overflow: hidden
          border-radius: 5px
          cursor: pointer
          &:hover:after
            position: absolute
            opacity: .9
            top: 0
            left: 0
            width: 100%
            height: 100%
            content: ''
            background-color: #f2303f
            background-image: url(../img/structure/icon_trash.svg)
            background-repeat: no-repeat
            background-position: 50% 50%
            background-size: 16px 16px

        span.image-thumb-span
          position: absolute
          top: 0

        span.arrow
          position: absolute
          z-index: 9999
          top: -40px
          cursor: pointer
          &.left
            left: 0
          &.right
            right: 0

        a
          display: block
          +size(100% 100%)
          line-height: 60px
          text-align: center
          overflow: hidden


        img
          height: 100%
          width: 100%
          object-fit: cover
          overflow: hidden
          cursor: move


        &.new-image
          border: 2px solid $brand-primary
          background: url('../img/structure/icon_plus.svg')
          background-repeat: no-repeat
          background-position: center center
          border-radius: 0
          position: relative

          input
            position: absolute
            left: 0
            top: 0
            width: 100%
            height: 100%


          &:after
            content: ''
            background: url('../img/structure/icon_image.svg') lighten($brand-default, 15%)
            position: absolute
            width: 100%
            height: 100%
            top: 0
            left: 0
            pointer-events: none
            opacity: 0

            +transition(opacity 0.3s)

          &:hover
            border-color: lighten($brand-default, 15%)
            &:after
              opacity: 1


          input
            display: block
            height: 100%
            width: 100%
            opacity: 0
            cursor: pointer
  .thumb
    width: 24px
    height: 24px
    float: none
    position: relative
    top: 7px

  form
    .progress
      line-height: 15px
      display: inline-block
      width: 100px
      border: 3px groove #CCC
      div
        font-size: smaller
        background: orange
        width: 0
div.fileUploadError, div.fileUploadMessage
  display: block
  color: darkred
  clear: both
  &.fileUploadMessage
    color: #006CB0
  .errorTable
    border-spacing: 10px
    border-collapse: separate
    line-height: 1em
    th
      text-align: left