.promethee-edit__move
  width: 720px
  margin: 0 auto
  .promethee-edit__component
    font-size: 100%
    line-height: 100%
    &__inner
      min-height: 50px
      position: relative
      border: 1px solid #ccc
      p.text-empty
        line-height: 50px
        margin-bottom: 0
    &--selected
      > .promethee-edit__component__inner
        border-color: black
        > .header
          background: black
          color: white
    &__remove
      position: absolute
      top: 4px
      right: 4px
      padding: 1px 2px 1px 3px
      background: white
      font-size: 12px
      line-height: 12px
      z-index: 1

    &--faq_item
      margin-bottom: 10px

    &--slider
      .carousel
        display: flex
        justify-content: space-around
        align-items: stretch
        .col-xs-8, .col-xs-1
          padding: 0

        .col-xs-1
          display: flex
          justify-content: center
          align-items: center
      .dots
        text-align: center
        margin-top: 5px

        & > span
          display: inline-block
          width: 8px
          height: 8px
          margin: 0 2px
          background-color: #aaa
          border-radius: 50%
          color: transparent

          &.active
            background-color: #777
    &--slider_item
      .slider-item-caption
        margin: 10px 0 5px 0
  &__columns
    .row.grid
      user-select: none
      height: 100%
      min-height: 50px
      position: fixed
      top: 0
      bottom: 0
      width: 730px
      z-index: 0
      opacity: 0.03
      .col
        height: 100%
        .color
          height: 100%
          background: black
  &__page
    z-index: 1
    padding-bottom: 50px
    height: calc(100vh - 50px)
    overflow-x: hidden
    overflow-y: auto
  &__columns, &__page
    .row
      margin-left: -5px
      margin-right: -5px
    .col
      padding-left: 5px
      padding-right: 5px
  .header
    background: #ccc
    padding: 4px 5px 5px
    font-size: 8px
    color: white
    text-transform: uppercase
    margin-bottom: 5px
  &__component
    user-select: none

  &__droppable
    visibility: hidden
    opacity: .2
    margin: 2px 0
    position: relative
    background: white
    width: 100%
    height: 20px
    border: 1px dashed #253742
    box-sizing: border-box
    transition: width .2s, height .2s, opacity .2s
    &.ui-droppable-active
      visibility: visible
    &.ui-droppable-hover
      opacity: 1
      height: 100px

  .ui-draggable-dragging
    z-index: 1000
    opacity: 0.5
    // Nothing is droppable inside components being dragged
    .promethee-edit__move__droppable
      visibility: hidden !important

  .promethee-edit
    &__inspect, &__library
      min-width: 100px
      max-width: 400px
      background: white
      position: fixed
      top: 50px
      bottom: 0
      padding: 30px 40px 15px
      z-index: 1000
      width: calc(50vw - 380px)
      overflow-x: hidden
      overflow-y: auto
      &-header
        font-size: 18px
        font-weight: bold
        text-transform: uppercase
        margin-bottom: 20px

    &__inspect
      right: 0

      label.label-control
        font-weight: normal

      .list-unstyled
        li
          padding: 2px 0
          .label
            margin-left: 10px
            user-select: none
            &:hover
              cursor: pointer

    &__library
      left: 0
      &__item
        max-width: 300px
        z-index: 100000
        background-color: #253742
        padding-top: 10px
        margin-bottom: 30px
        height: 100px
        min-width: 100px
        text-align: center
        color: white
        &__icon
          display: block
          svg
            width: 60px
            height: auto
        &__name
          margin-top: -10px
          font-size: 11px
          font-weight: normal
          text-transform: uppercase