:root .grid-stack-item > .ui-resizable-handle
{
    -webkit-filter: none;
            filter: none;
}

.grid-stack
{
    position: relative;
}
.grid-stack .grid-stack-placeholder > .placeholder-content
{
    position: absolute;
    z-index: 0 !important; 
    top: 0;
    right: 10px;
    bottom: 0;
    left: 10px;

    width: auto;
    margin: 0;

    border: 1px dashed lightgray;
}
.grid-stack > .grid-stack-item
{
    position: absolute;

    min-width: 8.333333%;
    padding: 0;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content
{
    position: absolute;
    z-index: 0 !important;
    top: 0;
    right: 10px;
    bottom: 0;
    left: 10px;

    overflow-x: hidden;
    overflow-y: auto; 

    width: auto;
    margin: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-handle
{
    font-size: .1px;

    position: absolute;

    display: block;

    -ms-touch-action: none;
        touch-action: none;
}
.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle
{
    display: none;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging,
.grid-stack > .grid-stack-item.ui-resizable-resizing
{
    z-index: 100;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content
{
    opacity: .8; 
    -webkit-box-shadow: 1px 4px 6px rgba(0, 0, 0, .2);
            box-shadow: 1px 4px 6px rgba(0, 0, 0, .2);
}
.grid-stack > .grid-stack-item > .ui-resizable-se,
.grid-stack > .grid-stack-item > .ui-resizable-sw
{
    font: normal normal normal 10px/1 FontAwesome;
    font-size: inherit;

    margin: 0;
    padding: 2px 3px 0 0;

    text-align: right;

    color: gray;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.grid-stack > .grid-stack-item > .ui-resizable-se::before,
.grid-stack > .grid-stack-item > .ui-resizable-sw::before
{
    content: '\f065';
}
.grid-stack > .grid-stack-item > .ui-resizable-se
{
    display: inline-block;

    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg); 

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.grid-stack > .grid-stack-item > .ui-resizable-nw
{
    top: 0; 
    left: 10px;

    width: 20px;
    height: 20px;

    cursor: nw-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-n
{
    top: 0;
    right: 25px; 
    left: 25px;

    height: 10px;

    cursor: n-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-ne
{
    top: 0; 
    right: 10px;

    width: 20px;
    height: 20px;

    cursor: ne-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-e
{
    top: 15px;
    right: 10px;
    bottom: 15px; 

    width: 10px;

    cursor: e-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-se
{
    right: 10px;
    bottom: 0; 

    width: 20px;
    height: 20px;

    cursor: se-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-s
{
    right: 25px; 
    bottom: 0;
    left: 25px;

    height: 10px;

    cursor: s-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-sw
{
    bottom: 0; 
    left: 10px;

    width: 20px;
    height: 20px;

    cursor: sw-resize;
}
.grid-stack > .grid-stack-item > .ui-resizable-w
{
    top: 15px;
    bottom: 15px; 
    left: 10px;

    width: 10px;

    cursor: w-resize;
}
.grid-stack > .grid-stack-item[data-gs-width='1']
{
    width: 8.333333%;
}
.grid-stack > .grid-stack-item[data-gs-x='1']
{
    left: 8.333333%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='1']
{
    min-width: 8.333333%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='1']
{
    max-width: 8.333333%;
}
.grid-stack > .grid-stack-item[data-gs-width='2']
{
    width: 16.666667%;
}
.grid-stack > .grid-stack-item[data-gs-x='2']
{
    left: 16.666667%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='2']
{
    min-width: 16.666667%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='2']
{
    max-width: 16.666667%;
}
.grid-stack > .grid-stack-item[data-gs-width='3']
{
    width: 25%;
}
.grid-stack > .grid-stack-item[data-gs-x='3']
{
    left: 25%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='3']
{
    min-width: 25%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='3']
{
    max-width: 25%;
}
.grid-stack > .grid-stack-item[data-gs-width='4']
{
    width: 33.333333%;
}
.grid-stack > .grid-stack-item[data-gs-x='4']
{
    left: 33.333333%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='4']
{
    min-width: 33.333333%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='4']
{
    max-width: 33.333333%;
}
.grid-stack > .grid-stack-item[data-gs-width='5']
{
    width: 41.666667%;
}
.grid-stack > .grid-stack-item[data-gs-x='5']
{
    left: 41.666667%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='5']
{
    min-width: 41.666667%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='5']
{
    max-width: 41.666667%;
}
.grid-stack > .grid-stack-item[data-gs-width='6']
{
    width: 50%;
}
.grid-stack > .grid-stack-item[data-gs-x='6']
{
    left: 50%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='6']
{
    min-width: 50%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='6']
{
    max-width: 50%;
}
.grid-stack > .grid-stack-item[data-gs-width='7']
{
    width: 58.333333%;
}
.grid-stack > .grid-stack-item[data-gs-x='7']
{
    left: 58.333333%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='7']
{
    min-width: 58.333333%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='7']
{
    max-width: 58.333333%;
}
.grid-stack > .grid-stack-item[data-gs-width='8']
{
    width: 66.666667%;
}
.grid-stack > .grid-stack-item[data-gs-x='8']
{
    left: 66.666667%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='8']
{
    min-width: 66.666667%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='8']
{
    max-width: 66.666667%;
}
.grid-stack > .grid-stack-item[data-gs-width='9']
{
    width: 75%;
}
.grid-stack > .grid-stack-item[data-gs-x='9']
{
    left: 75%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='9']
{
    min-width: 75%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='9']
{
    max-width: 75%;
}
.grid-stack > .grid-stack-item[data-gs-width='10']
{
    width: 83.333333%;
}
.grid-stack > .grid-stack-item[data-gs-x='10']
{
    left: 83.333333%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='10']
{
    min-width: 83.333333%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='10']
{
    max-width: 83.333333%;
}
.grid-stack > .grid-stack-item[data-gs-width='11']
{
    width: 91.666667%;
}
.grid-stack > .grid-stack-item[data-gs-x='11']
{
    left: 91.666667%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='11']
{
    min-width: 91.666667%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='11']
{
    max-width: 91.666667%;
}
.grid-stack > .grid-stack-item[data-gs-width='12']
{
    width: 100%;
}
.grid-stack > .grid-stack-item[data-gs-x='12']
{
    left: 100%;
}
.grid-stack > .grid-stack-item[data-gs-min-width='12']
{
    min-width: 100%;
}
.grid-stack > .grid-stack-item[data-gs-max-width='12']
{
    max-width: 100%;
}
.grid-stack.grid-stack-animate,
.grid-stack.grid-stack-animate .grid-stack-item
{
    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
         -o-transition: left .3s, top .3s, height .3s, width .3s;
            transition: left .3s, top .3s, height .3s, width .3s;
}
.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder
{
    -webkit-transition: left 0s, top 0s, height 0s, width 0s;
         -o-transition: left 0s, top 0s, height 0s, width 0s;
            transition: left 0s, top 0s, height 0s, width 0s;
}

/** Uncomment this to show bottom-left resize handle **/
/*
.grid-stack > .grid-stack-item > .ui-resizable-sw {
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    @include vendor(transform, rotate(180deg));
}
*/
@media (max-width: 767px)
{
    .grid-stack-item
    {
        position: relative !important;
        top: auto !important;
        left: 0 !important;

        width: auto !important;
        margin-bottom: 20px;
    }
    .grid-stack-item .ui-resizable-handle
    {
        display: none;
    }
    .grid-stack
    {
        height: auto !important;
    }
}