/**
 * Created by yangry on 2017/7/15.
 */
.table-move {
    /*max-height: 100vh;*/
    overflow-y: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

/*遮罩层*/
.table-move .cover {
    height: 100%;
    width: 100%;
    z-index: 300;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252, 252, 252, .5);
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.table-move.active .ul {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*鼠标移动块-大块*/
.table-move #moveDiv {
    width: 100%;
    pointer-events: none;
    position: absolute;
    z-index: 300;
}

/*鼠标移动块-小块*/
.table-move #moveChildDiv {
    line-height: 30px;
    pointer-events: none;
    position: absolute;
    z-index: 300;
}

/*鼠标移动小块内部样式*/
.table-move #moveChildDiv .li-child {
    margin: 8px;
    width: auto;
}

/*外层样式*/
.table-move .ul {
    position: relative;
}

/*滚动条块样式*/
.table-move .ul .scroll {
    margin-left: -15px;
    margin-right: -15px;
    background: rgba(249, 249, 249, .5);
    z-index: 200;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 1px 1px 1px rgba(221, 221, 221, .9);
    border-radius: 2px;
    border: 1px solid rgba(221, 221, 221, .4);
}

/*大块样式*/
.table-move .ul .li {
    line-height: 30px;
    height: 48px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*内部宽度自适应*/
.table-move .ul .li.li-inline-flex {
    padding-left: 15px;
    padding-right: 15px;
    display: inline-flex;
    min-width: 100%;
}

.table-move.mouse-down .ul .li {
    cursor: move;
}

/*不可移动的大块样式*/
.table-move .ul .scroll.disabled {
    opacity: .5;
    filter: alpha(opacity=50);
}

.table-move .ul .scroll.disabled .li {
    cursor: not-allowed;
}

/*用于克隆的li*/
.table-move .ul .hidden-li {
    display: none;
}

/*开始移动后鼠标悬浮样式*/
.table-move.active .ul .scroll {
    cursor: move !important;
}

.table-move.active .ul .scroll .li {
    cursor: move !important;
}

/*点击时将其他块隐藏到下面去*/
.table-move .ul .li.no-point-events {
    z-index: 10;
}

/*隐藏点击的块*/
.table-move .ul .scroll.absolute {
    display: none;
}

.table-move .ul .scroll.absolute .li {
    pointer-events: none;
}

/*小块的基本样式*/
.table-move .ul .li .li-child, .table-move .li-child-list-line.border {
    white-space: nowrap;
    float: left;
    /*width: 25%;*/
    width: 330px;
    padding-left: 15px;
    padding-right: 15px;
}

/*隐藏小块最低高度*/
.table-move .li-child-list-line > .li-child-content, .table-move .new-line-pointer.creating .creating-list-line > .creating-li-child-content {
    min-height: 31px;
}

/*小块的基本样式*/
.table-move.middle .ul .li .li-child, .table-move.middle .li-child-list-line.border {
    white-space: nowrap;
    float: left;
    width: 33%;
    padding-left: 15px;
    padding-right: 15px;
}

/*隐藏点击的小块*/
.table-move .ul .li .li-child.absolute {
    pointer-events: none;
    display: none;
}

/*不可拖动的小块*/
.table-move .ul .li .li-child.disabled {
    cursor: not-allowed;
    opacity: .5;
    filter: alpha(opacity=50);
}

/*不可拖动的大块中的小块*/
.table-move .ul .li.disabled .li-child {
    cursor: not-allowed;
    opacity: 1;
    filter: alpha(opacity=100);
}

/*小块内部的基本样式*/
.table-move .ul .li .li-child > .li-child-content, .table-move .li-child-list-line.border > .li-child-content, .table-move .new-line-pointer.creating .creating-list-line > .creating-li-child-content {
    background: rgba(252, 252, 252, 1);
    margin: 8px;
    transition: border .1s ease-out, background .5s ease-out;
    -moz-transition: border .1s ease-out, background .5s ease-out; /* Firefox 4 */
    -webkit-transition: border .1s ease-out, background .5s ease-out; /* Safari 和 Chrome */
    -o-transition: border .1s ease-out, background .5s ease-out; /* Opera */
    border: 1px dotted rgba(221, 221, 221, 1);
}

/*小图标基本样式*/
.table-move .ul .li .li-child > .li-child-content > .glyphicon {
    transition: opacity .3s ease-out, color .3s ease-out;
    -moz-transition: opacity .3s ease-out, color .3s ease-out; /* Firefox 4 */
    -webkit-transition: opacity .3s ease-out, color .3s ease-out; /* Safari 和 Chrome */
    -o-transition: opacity .3s ease-out, color .3s ease-out; /* Opera */
    cursor: pointer;
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    font-size: 10px;
    top: 1px;
    right: 1px;
    padding-top: 1px;
    border: 1px solid rgb(211, 211, 211);
    background: rgba(252, 252, 252, 1);
    opacity: 0;
    filter: alpha(opacity=0);
}

/*小图标显示样式*/
.table-move .ul .li .li-child.hover > .li-child-content > .glyphicon {
    opacity: .5;
    filter: alpha(opacity=50);
}

/*小图标悬浮样式*/
.table-move .ul .li .li-child > .li-child-content.hover > .glyphicon {
    opacity: 1;
    filter: alpha(opacity=100);
    box-shadow: 1px 2px 2px rgba(201, 201, 201, 1);
    background-color: rgba(221, 221, 221, .6);
}

/*小块悬浮样式*/
.table-move .ul .li .li-child.hover > .li-child-content, .table-move .ul .scroll.hover, .table-move #moveDiv, .table-move #moveChildDiv > .li-child-content, .table-move .li-child-list-line.border > .li-child-content, .table-move .new-line-pointer.creating .creating-list-line > .creating-li-child-content {
    background-color: rgba(221, 221, 221, .6);
    box-shadow: 3px 3px 5px rgba(211, 211, 211, 1);
    border: 1px dashed rgba(211, 211, 211, 1);
}

/*大块过度效果*/
.table-move .ul .li .li-child > .li-child-content, .table-move .ul .scroll {
    transition: border .1s ease-out, box-shadow .3s ease-out, background-color .3s ease-out;
    -moz-transition: border .1s ease-out, box-shadow .3s ease-out, background-color .3s ease-out; /* Firefox 4 */
    -webkit-transition: border .1s ease-out, box-shadow .3s ease-out, background-color .3s ease-out; /* Safari 和 Chrome */
    -o-transition: border .1s ease-out, box-shadow .3s ease-out, background-color .3s ease-out; /* Opera */
}

/*伸缩块基本样式*/
.table-move .list-line {
    cursor: auto;
    z-index: 100;
    height: 20px;
    display: none;
    pointer-events: none;
}

/*用于复制的list-line*/
.table-move .list-line.hidden-list-line {
    display: none !important;
}

/*首个伸缩块向上走*/
.table-move .list-line > div:first-child {
    padding: 0;
}

/*有动画的伸缩块样式*/
.table-move .list-line.transition {
    transition: height .3s;
    -moz-transition: height .3s; /* Firefox 4 */
    -webkit-transition: height .3s; /* Safari 和 Chrome */
    -o-transition: height .3s; /* Opera */
}

/*伸缩块普通状态下的样式*/
.table-move .list-line.point-events {
    display: block;
    pointer-events: none;
}

/*伸缩块伸展的高度*/
.table-move .list-line.point-events.higher {
    height: 90px;
}

/*伸缩块活跃下的样式*/
.table-move.active .list-line.point-events {
    cursor: move !important;
    pointer-events: auto;
}

/*小块伸缩块基本样式*/
.table-move .li-child-list-line {
    float: left;
    width: 0;
    margin: 0;
    padding: 0;
    display: none;
    pointer-events: none;
}

/*小块伸缩块内部基本样式*/
.table-move .li-child-list-line.border > .col-lg-12 {
    margin: 8px;
}

/*小块伸缩块普通状态基本样式*/
.table-move .li-child-list-line.point-events {
    display: block;
    pointer-events: auto;
}

/*小块伸缩块过度效果*/
.table-move .li-child-list-line.transition {
    transition: border .1s ease-out, width .5s;
    -moz-transition: border .1s ease-out, width .5s; /* Firefox 4 */
    -webkit-transition: border .1s ease-out, width .5s; /* Safari 和 Chrome */
    -o-transition: border .1s ease-out, width .5s; /* Opera */
}

/*新增一列动画*/
/*提示块和创建块基本样式*/
.table-move .new-line-pointer {
    margin-left: 0;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-left: 0;
    transition: width .3s ease-out, color .3s ease-out, box-shadow .3s ease-out, margin .3s ease-out, opacity .3s ease-out;
    -moz-transition: border .3s ease-out, color .3s ease-out, box-shadow .3s ease-out, margin .3s ease-out, opacity .3s ease-out; /* Firefox 4 */
    -webkit-transition: border .3s ease-out, color .3s ease-out, box-shadow .3s ease-out, margin .3s ease-out, opacity .3s ease-out; /* Safari 和 Chrome */
    -o-transition: border .3s ease-out, color .3s ease-out, box-shadow .3s ease-out, margin .3s ease-out, opacity .3s ease-out; /* Opera */
}

/*创建块基本样式*/
.table-move .new-line-pointer.creating {
    margin-left: 0;
    width: 100%;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px dashed rgba(51, 51, 255, .8);
    box-shadow: 0 0 5px rgba(51, 51, 255, .8);
}

/*提示块隐藏状态下内部高度样式*/
.table-move .new-line-pointer .col-lg-12 {
    height: 0;
}

/*创建块内部高度高度样式*/
.table-move .new-line-pointer.creating .col-lg-12 {
    height: auto;
}

/*创建块内部样式*/
.table-move .new-line-pointer.creating .creating-list-line {
    line-height: 30px;
    white-space: nowrap;
    float: left;
    /*width: 25%;*/
    width: 330px;
    padding-left: 15px;
    padding-right: 15px;
}

/*提示块和创建块显现样式*/
.table-move .new-line-pointer.new-line-pointer-animation, .table-move .new-line-pointer.new-line-pointer-animation-shadow {
    z-index: 1000;
    opacity: 1;
    filter: alpha(opacity=100);
}

/*创建块边框动画*/
.table-move .new-line-pointer.new-line-pointer-animation-shadow {
    animation: new-line-pointer-animation-shadow ease-out 1.5s infinite alternate;
    /* Firefox: */
    -moz-animation: new-line-pointer-animation-shadow ease-out 1.5s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: new-line-pointer-animation-shadow ease-out 1.5s infinite alternate;
    /* Opera: */
    -o-animation: new-line-pointer-animation-shadow ease-out 1.5s infinite alternate;
}

/*提示块动画*/
.table-move .new-line-pointer.new-line-pointer-animation {
    animation: new-line-pointer-animation ease-out 4s infinite alternate;
    /* Firefox: */
    -moz-animation: new-line-pointer-animation ease-out 4s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: new-line-pointer-animation ease-out 4s infinite alternate;
    /* Opera: */
    -o-animation: new-line-pointer-animation ease-out 4s infinite alternate;
}

/*长度和阴影动画*/
@keyframes new-line-pointer-animation {
    0% {
        box-shadow: 20px 0 40px rgba(51, 51, 255, 0);
        width: 30px;
    }
    33% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0.7);
        width: 40px;
    }
    66% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0);
        width: 35px;
    }
    100% {
        box-shadow: 8px 0 10px rgba(51, 51, 255, .9);
        width: 40px;
    }
}

@-moz-keyframes new-line-pointer-animation /* Firefox */
{
    0% {
        box-shadow: 20px 0 40px rgba(51, 51, 255, 0);
        width: 30px;
    }
    33% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0.7);
        width: 40px;
    }
    66% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0);
        width: 35px;
    }
    100% {
        box-shadow: 8px 0 10px rgba(51, 51, 255, .9);
        width: 40px;
    }
}

@-webkit-keyframes new-line-pointer-animation /* Safari 和 Chrome */
{
    0% {
        box-shadow: 20px 0 40px rgba(51, 51, 255, 0);
        width: 30px;
    }
    33% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0.7);
        width: 40px;
    }
    66% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0);
        width: 35px;
    }
    100% {
        box-shadow: 8px 0 10px rgba(51, 51, 255, .9);
        width: 40px;
    }
}

@-o-keyframes new-line-pointer-animation /* Opera */
{
    0% {
        box-shadow: 20px 0 40px rgba(51, 51, 255, 0);
        width: 30px;
    }
    33% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0.7);
        width: 40px;
    }
    66% {
        box-shadow: 20px 0 25px rgba(51, 51, 255, 0);
        width: 35px;
    }
    100% {
        box-shadow: 8px 0 10px rgba(51, 51, 255, .9);
        width: 40px;
    }
}

/*阴影动画*/
@keyframes new-line-pointer-animation-shadow {
    0% {
        box-shadow: 0 0 30px rgba(51, 51, 255, 0);
    }
    100% {
        box-shadow: 0 0 10px rgba(51, 51, 255, .9);
    }
}

@-moz-keyframes new-line-pointer-animation-shadow /* Firefox */
{
    0% {
        box-shadow: 0 0 30px rgba(51, 51, 255, 0);
    }
    100% {
        box-shadow: 0 0 10px rgba(51, 51, 255, .9);
    }
}

@-webkit-keyframes new-line-pointer-animation-shadow /* Safari 和 Chrome */
{
    0% {
        box-shadow: 0 0 30px rgba(51, 51, 255, 0);
    }
    100% {
        box-shadow: 0 0 10px rgba(51, 51, 255, .9);
    }
}

@-o-keyframes new-line-pointer-animation-shadow /* Opera */
{
    0% {
        box-shadow: 0 0 30px rgba(51, 51, 255, 0);
    }
    100% {
        box-shadow: 0 0 10px rgba(51, 51, 255, .9);
    }
}