/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.resortable ul[dnd-list] {
  min-height: 33.6px;
  padding-left: 0;
  /**
    * The dndDraggingSource class will be applied to
    * the source element of a drag operation. It makes
    * sense to hide it to give the user the feeling
    * that he's actually moving it.
    */
  /**
    * An element with .dndPlaceholder class will be
    * added to the dnd-list while the user is dragging
    * over it.
    */
}
.resortable ul[dnd-list] .dndDraggingSource {
  display: none;
}
.resortable ul[dnd-list] .dndPlaceholder {
  display: block;
  background-color: #55AADA;
  min-height: 33.6px;
}
.resortable ul[dnd-list] li {
  border-radius: 0;
  display: block;
  /**
        * Show selected elements in green
        */
}
.resortable ul[dnd-list] li.selected {
  background-color: #DDEDDA;
}