.entity-attribute-dynamic
  background: url("#{$baseImagePath}/background.jpg")
  line-height: 1.2
  padding-top: 40px

  .disable-interaction
    .btn-trash,
    .position-button
      display: none


  .inner
    width: 85%
    margin: auto

  block
    position: relative
    display: block

    &.locked
      .start .buttons, .end, .dynamic-block-status
        display: none

  full-image-block
    .max-images
      .entity-attribute-images
        border-bottom: none


  label
    position: relative
    margin: 0 0 20px
    padding-left: 20px
    //margin: 0 7.5% 20px
    width: 200px

  >label
    margin-left: 7.5%

  .row
    border-bottom: 1px solid #e0e6ec
    margin: 0

    &.no-margin-bottom
      margin-bottom: 0

    &:last-of-type
      border-bottom: none
      margin-bottom: 0

    &.hidden
      display: none

    label
      position: absolute
      &.text-label
        line-height: 60px

    input:not([type=radio])
      height: 100%
      width: calc(100% + 60px)
      position: relative
      left: -30px
      min-height: grid-row(2)
      background-color: transparent
      text-indent: 230px
      border: 0
      z-index: 99999
      display: block
      +box-sizing(border-box)
      +attribute-focus
      font-size: 0.7rem

    .radio-wrapper
      display: block
      margin-left: 200px
      padding-bottom: 20px

      label
        position: relative
        width: initial
        text-align: center
      .radio
        float: none
        display: inline-flex
        text-align: center
        margin-right: 5px
        img
          width: 50px
          margin: 0 auto 8px

        input
          margin: 0
          min-height: 0 !important
          width: auto
          height: auto

        label
          padding-left: 5px
          margin-bottom: 10px

    .text-editor-wrapper
      margin-top: 30px
      margin-left: 191px
      .mce-toolbar-grp
        margin-top: -25px
    .clear
      clear: both

  .header
    padding-left: 30px
    height: 60px
    line-height: 30px
    border: 1px solid #B3B1B3
    background: $dark-gray
    +flex(space-between, center)

    .btn
      margin: 10px 25px

    .block-title
      color: $white
      font-weight: 600
      text-transform: uppercase
      display: inline-block
      font-size: 0.8rem


    input
      display: inline-block
      min-width: 90px
      margin-right: 5px
      font-size: 13px
      cursor: pointer

      &.remove
        padding: 0
        margin-left: 20px

        height: 16px
        width: 16px
        min-width: 0
        line-height: 10px

        background: #FF5F56
        border-radius: 50%
        border: 1px solid #E0463F

        color: #981005
        font-size: 12px
        font-weight: 700
        text-align: center

  .tab-titles
    height: grid-row(1)
    height: 50px
    margin-left: -30px
    margin-bottom: 30px
    padding-right: 60px
    width: 100%
    border: 1px solid #b3b1b3
    .tab-title
      background-color: $dark-white
      -webkit-box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
      -moz-box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
      box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
      display: inline-block
      padding: 16px 30px
      border-left: 1px solid #b3b1b3
      border-right: 1px solid #b3b1b3
      margin-left: -1px
      cursor: pointer
      color: #d3d3d3
      position: relative
      min-width: 50px
      .move
        position: absolute
        top: -20px
        width: 15px
        &.tab-left
          padding-left: 10px
          left: 0
        &.tab-right
          right: 0
          padding-right: 10px
      &.add-tab
        +background(linear-gradient(to bottom,  #59db81 12%, #59db81 50%, #5bd282 51%, #5bd282 100%))
        color: white
        border: none
        font-weight: bolder
      &.active
        background-color: #dfdfdf
        color: black
  .btn
    float: right
    width: 20px
    height: 30px

    &.btn-trash
      width: 35px
      height: 35px
      background-color: #FF323C
      background-image: url("#{$baseImagePath}/icons/icon_trash.svg")
      background-repeat: no-repeat
      background-position: 50% 50%
      background-size: 16px 16px
      cursor: pointer
      border-radius: 5px

  .start, .end
    +flex(center, center)

  .buttons
    +flex(space-between, center)
    width: 50px
    margin-left: 20px

    .position-button
      height: 18px
      width: 18px
      cursor: pointer

      &.up
        background: url("#{$baseImagePath}/icons/icon_up.svg")
        background-repeat: no-repeat
      &.down
        background: url("#{$baseImagePath}/icons/icon_down.svg")
        background-repeat: no-repeat


  .add-new-block-row
    padding: 30px 0 100px 0
    width: 85%
    margin: auto
    height: auto
    background: url("#{$baseImagePath}/background.jpg")

    select
      margin-right: 10px
      min-width: 300px

    input
      cursor: pointer

  // Angular directive
  content-block, page-link-block, image-slider-block, video-block, file-block, two-column-block , multiple-images-block, full-image-block, full-text-block, view-block
    display: block
    padding: 30px

    background: #fff
    border-bottom: 1px solid #E0E6EC

    margin-bottom: 30px
    & .toggle + label.toggle-label
      left: 0px
    .entity-attribute-on-off
      line-height: 1

    .radio-wrapper
      display: inline-block
      clear: both
      .radio
        display: block
        float: left
        width: 70px
        input
          margin-left: 10px

  content-block .video, content-block .status
    margin-top: 30px

  file-block
    span
      display: block
      height: 50px
      width: 50px
      margin-left: 5px
      &.pdf-icon
        background: rgba(0, 0, 0, 0) url("#{$baseImagePath}/pdf-icon.png") repeat scroll 0 0 / 50px 50px
      &.file-icon
        background: rgba(0, 0, 0, 0) url("#{$baseImagePath}/file-icon.png") repeat scroll 0 0 / 50px 50px
      &.file-icon:hover, &.pdf-icon:hover
        background: #f2303f url("#{$baseImagePath}/icons/icon_trash.svg") no-repeat 50% 50% / 25px 25px

    input
      min-width: 300px
      border: 1px solid #E0E6EC
      margin: 0 0 24px 0

    .text-editor-wrapper
      border: 1px solid #E0E6EC
      margin: 0 0 24px 0

  .entity-attribute-images
    label
      position: absolute
      line-height: 21px
      padding-top: 15px

    .image-list
      margin-left: 200px

  .entity-attribute-on-off
    position: absolute
    top: 22px
    right: 120px
    min-height: initial
    border-bottom: none
    +flex(space-between, center)
    &:first-child
      margin-right: 10px
    label
      width: 100px
    .toggle+label.toggle-label
      top: 0

  .two-blocks
    +flex(flex-start, flex-start)
    .block-wrapper
      padding-left: 50px
      border-left: 1px solid #E0E6EC
      &:first-child
        border-left: none
        padding-left: 0

  video-block
    .video
      color: $light-gray
      height: 200px
      +flex(flex-start, center)
      .info
        display: inline-block
        width: 440px
        label
          margin-bottom: 0

        label.youtube-link
          display: inline-block
          width: auto
          padding-left: 0
          text-transform: none
          font-size: 0.7rem
          margin: 0 0 0 20px
          color: $dark-gray

      input[type='text']
        display: inline-block
        width: auto
        height: auto
        min-height: 35px
        text-indent: 5px
        border: 1px solid $lightest-gray
        +attribute-focus

      .auto-play
        margin-top: 20px
        margin-bottom: 8px

      input[type='checkbox']
        margin-left: 20px
        display: block
        height: 15px

      .preview-image
        display: inline-block
        width: 205px
        img
          width: 100%