/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.typesDemo ul[dnd-list],
.typesDemo ul[dnd-list] > li {
    position: relative;
}
/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.typesDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}
/**
 * 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.
 */
.typesDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}
/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.typesDemo ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    padding: 10px 15px;
    min-height: 42px;
}
/**
 * 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.
 */
.typesDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    margin-bottom: -1px;

    /* Disable text selection if item is not draggable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.typesDemo ul[dnd-list] li dnd-nodrag {
    display: block;
    padding: 10px 15px;
}
/**
 * Gender-specifc background
 */
.typesDemo ul[dnd-list] li.background-man {
    background-color: #CAE0FC;
}

.typesDemo ul[dnd-list] li.background-woman {
    background-color: #FFE2F5;
}

.typesDemo ul[dnd-list] input.background-man {
    background-color: #D8E9FF;
    color: #2F4D99;
}

.typesDemo ul[dnd-list] input.background-woman {
    background-color: #FFF0FA;
    color: #D84FA7;
}
/**
 * Handle positioning
 */
.typesDemo .handle {
    cursor: move;
    position: absolute;
    top: 14px;
}
.typesDemo .item {
    margin-left: 20px;
}
.typesDemo .dnd-list {
    min-height: 42px;
    padding-left: 0px;
    border: 1px solid #dddddd;
    border-radius: 3px;
}
.typesDemo ul[dnd-list]{
    margin-bottom: 5px;
}
.app-dnd-scroll{
    overflow: auto;
    max-width: 1200px;
}
.app-dnd{
    min-width: 1200px;
}
.app-dnd .app-dnd__cont-handle{
    display: inline-block !important;
    padding: 0px !important;
    width: 100%;
}
.app-dnd__li{
    margin-bottom: 3px !important;
    border-radius: 3px;
    padding: 5px 5px 0px;
}
.app-dnd .app-dnd__handle{
    padding: 10px;
    background-color: #ccc;
    border-radius: 3px;
    top: 5px;
}
.app-dnd__cont-items{
    float: left;
    padding-left: 30px;
}
.app-dnd .app-dnd__placeholder{
    border-radius: 3px;
    margin-bottom: 3px !important;
    padding: 5px 5px 0px;
}
.app-dnd .app-dnd__cont-ul{
    display: inline-block;
    width: 100%;
}
.app-dnd .app-dnd__cont-ul-head{
    background-color: #eeeeee;
    min-height: auto !important;
    margin-bottom: 5px;
}
.app-dnd .app-dnd__cont-items{
    width: 100%;
    display: flex;
}
.app-dnd .app-dnd__cont-items > div.item{
    float: left;
}
.app-dnd .app-dnd__cont-items > div.item.title{
    align-self: center;
}
.app-dnd .app-dnd__cont-items .item{
    margin-left: 5px;
}
.app-dnd .app-dnd__cont-head > div.item:nth-child(1){
    margin-left: 41px;
}
.app-dnd .app-dnd__cont-items > div.item:nth-child(1){
    width: 5%;
}
.app-dnd .app-dnd__cont-items > div.item:nth-child(2),
.app-dnd .app-dnd__cont-items > div.item:nth-child(3),
.app-dnd .app-dnd__cont-items > div.item:nth-child(4),
.app-dnd .app-dnd__cont-items > div.item:nth-child(5),
.app-dnd .app-dnd__cont-items > div.item:nth-child(6),
.app-dnd .app-dnd__cont-items > div.item:nth-child(7),
.app-dnd .app-dnd__cont-items > div.item:nth-child(8),
.app-dnd .app-dnd__cont-items > div.item:nth-child(9),
.app-dnd .app-dnd__cont-items > div.item:nth-child(10),
.app-dnd .app-dnd__cont-items > div.item:nth-child(11){
    width: 8.5%;
}
.app-dnd .app-dnd__cont-items > div.item:nth-child(6){
    width: 9%;
}
@media (min-width: 1170px) {
    .app-dnd-scroll{
        max-width: 100%;
    }
}
@media (min-width: 970px) {
    .app-dnd-scroll{
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .app-dnd-scroll{
        max-width: 100%;
    }
    .app-dnd{
        min-width: 100%;
    }
    .app-dnd .app-dnd__cont-items > div.item{
        margin-top: 5px;
        padding-right: 5px;
        width: 100% !important;
    }
    .app-dnd .app-dnd__handle{
        height: 98%;
    }
}