/** Minimum*/
body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.sortablelist li.placeholder {
    position: relative;
    height: 50px;
}

ol.sortablelist li:before {
    position: absolute;
}

/** Style */

ol.sortablelist li button
{
    background-color: inherit;
    border: none;
    color: inherit;    
    text-align: inherit;
    text-decoration: inherit;
    cursor: inherit;
    width:100%;
}


ol.sortablelist {
    
    display: block;
    min-height: 50px;
    border: 2px solid;
    border-color: lightgray;
    background-color: ghostwhite;
    margin: 10px 10px 10px 10px;
    list-style-type: none;
    padding: 10px;
    list-style: decimal;
    border-radius: 10px;
}

    ol.sortablelist li {
        display: block;
        margin: 5px;
        padding: 5px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        color: #0088cc;
        background: #eeeeee;
        cursor: pointer;
    }

.ScrollableList{
    height:500px;
    overflow:hidden;
    overflow-y:scroll;
}


.animate-top {
    position: relative;
    -webkit-animation: animatetop 0.5s;
    animation: animatetop 0.5s;
}

@keyframes animatetop {
    from {
        top: -100px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

.animate-left {
    position: relative;
    -webkit-animation: animateleft 0.5s;
    animation: animateleft 0.5s;
}


@keyframes animateleft {
    from {
        left: -100px;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 1;
    }
}