/***************************** Required styles *****************************/

/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.advancedDemo ul[dnd-list],
.advancedDemo ul[dnd-list] > li {
    position: relative;
}

/***************************** Dropzone Styling *****************************/

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.advancedDemo .dnd-dropzone ul[dnd-list] {
    min-height: 42px;
    margin: 0px;
    padding-left: 0px;
    white-space: nowrap;
    overflow: auto;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.advancedDemo .dnd-dropzone li {
    display: block;
}

/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
.advancedDemo .dnd-dropzone .dndDragging {
    opacity: 0.7;
}

/**
 * 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. Note that the source element has also .dndDragging class.
 */
.advancedDemo .dnd-dropzone .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be added as child of the dnd-list
 * while the user is dragging over it.
 */
.advancedDemo .dnd-dropzone .dndPlaceholder {
    background-color: #ddd !important;
    min-height: 50px;
    display: block;
    position: relative;
}

/***************************** Element type specific styles *****************************/

.kanban-heading{
    position: absolute;
    height: 10%;
    margin: 0;
    padding-left: 5px;
    cursor: pointer;
}

.advancedDemo .dnd-dropzone .containerlist > li {
/*    float: left;*/
    text-align: center;
    width: 170px;
    height: 500px;
    background-color: #fff;
    margin-right: 10px;
    margin-top: 10px;
    border-top: 5px solid #ff9000;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    position: relative;
    white-space: nowrap;
    display: inline-block;
    border-radius:3px;
}

.advancedDemo .dnd-dropzone .itemlist {
    position: absolute;
    height: 90%;
    top: 10%;
    margin: 0;
    width: 100%;
    overflow-y: auto;
}

.advancedDemo .dnd-dropzone .itemlist > li {
    color: #606060;
    font-weight: 700;
    text-align: left;
    border-style: solid;
    border-color:  #ddd;
    border-width: 1px 1px 1px 3px;
    padding: 5px;
    margin: 5px;
}

.advancedDemo .dnd-dropzone .itemlist > li:hover{
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.container-element{
    height: 100%;
}

.advancedDemo ul[dnd-list] .dndDragging {
    transform:translateZ(0);
    z-index: 1;
}