:root{
    --col-width:120px ;
    --col-height:120px ;
    --grid-gap:15px ;
}
.dashboard-zone section {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: grid;
    grid-gap: var(--grid-gap);

    grid-template-columns: repeat(6, var(--col-width));
    grid-auto-rows: var(--col-height);
    grid-auto-flow: row dense;
    

    /* grid-template-rows: repeat(5, 200px); */
    grid-template-columns: repeat(auto-fit, minmax(var(--col-width), var(--col-height)));
    /* grid-template-rows: repeat(12, var(--col-width)); */
    height: auto;
    /* min-height: 100vh; */
}
.dashboard-zone .gc-1{ grid-column: span 1; }
.dashboard-zone .gc-2{ grid-column: span 2; }
.dashboard-zone .gc-3{ grid-column: span 3; }
.dashboard-zone .gc-4{ grid-column: span 4; }
.dashboard-zone .gc-5{ grid-column: span 5; }
.dashboard-zone .gc-6{ grid-column: span 6; }
.dashboard-zone .gc-7{ grid-column: span 7; }
.dashboard-zone .gc-8{ grid-column: span 8; }
.dashboard-zone .gc-9{ grid-column: span 9; }
.dashboard-zone .gc-10{ grid-column: span 10; }
.dashboard-zone .gc-11{ grid-column: span 11; }
.dashboard-zone .gc-12{ grid-column: span 12; }
.dashboard-zone .gr-1{ grid-row: span 1; }
.dashboard-zone .gr-2{ grid-row: span 2; }
.dashboard-zone .gr-3{ grid-row: span 3; }
.dashboard-zone .gr-4{ grid-row: span 4; }
.dashboard-zone .gr-5{ grid-row: span 5; }
.dashboard-zone .gr-6{ grid-row: span 6; }
.dashboard-zone .gr-7{ grid-row: span 7; }
.dashboard-zone .gr-8{ grid-row: span 8; }
.dashboard-zone .gr-9{ grid-row: span 9; }
.dashboard-zone .gr-10{ grid-row: span 10; }
.dashboard-zone .gr-11{ grid-row: span 11; }
.dashboard-zone .gr-12{ grid-row: span 12; }
@media only screen and (max-width: 1400px) { /*1200*/
    .dashboard-zone section {
    grid-template-columns: repeat(8, var(--col-width));
}
.dashboard-zone .gc-1{ grid-column: span 1; }
.dashboard-zone .gc-2{ grid-column: span 2; }
.dashboard-zone .gc-3{ grid-column: span 3; }
.dashboard-zone .gc-4{ grid-column: span 4; }
.dashboard-zone .gc-5{ grid-column: span 5; }
.dashboard-zone .gc-6{ grid-column: span 6; }
.dashboard-zone .gc-7{ grid-column: span 7; }
.dashboard-zone .gc-8{ grid-column: span 8; }
.dashboard-zone .gc-9{ grid-column: span 8; }
.dashboard-zone .gc-10{ grid-column: span 8; }
.dashboard-zone .gc-11{ grid-column: span 8; }
.dashboard-zone .gc-12{ grid-column: span 8; }
}
@media only screen and (max-width: 1000px) {
    .dashboard-zone section {
    grid-template-columns: repeat(6, var(--col-width));
}
.dashboard-zone .gc-1{ grid-column: span 1; }
.dashboard-zone .gc-2{ grid-column: span 2; }
.dashboard-zone .gc-3{ grid-column: span 3; }
.dashboard-zone .gc-4{ grid-column: span 4; }
.dashboard-zone .gc-5{ grid-column: span 5; }
.dashboard-zone .gc-6{ grid-column: span 6; }
.dashboard-zone .gc-7{ grid-column: span 6; }
.dashboard-zone .gc-8{ grid-column: span 6; }
.dashboard-zone .gc-9{ grid-column: span 6; }
.dashboard-zone .gc-10{ grid-column: span 6; }
.dashboard-zone .gc-11{ grid-column: span 6; }
.dashboard-zone .gc-12{ grid-column: span 6; }
}
@media only screen and (max-width: 800px) {
    .dashboard-zone section {
    grid-template-columns: repeat(4, var(--col-width));
}
.dashboard-zone .gc-1{ grid-column: span 1; }
.dashboard-zone .gc-2{ grid-column: span 2; }
.dashboard-zone .gc-3{ grid-column: span 3; }
.dashboard-zone .gc-4{ grid-column: span 4; }
.dashboard-zone .gc-5{ grid-column: span 4; }
.dashboard-zone .gc-6{ grid-column: span 4; }
.dashboard-zone .gc-7{ grid-column: span 4; }
.dashboard-zone .gc-8{ grid-column: span 4; }
.dashboard-zone .gc-9{ grid-column: span 4; }
.dashboard-zone .gc-10{ grid-column: span 4; }
.dashboard-zone .gc-11{ grid-column: span 4; }
.dashboard-zone .gc-12{ grid-column: span 4; }
}
@media only screen and (max-width: 600px) {
    .dashboard-zone section {
    grid-template-columns: repeat(2, var(--col-width));
}
.dashboard-zone .gc-1{ grid-column: span 1; }
.dashboard-zone .gc-2{ grid-column: span 2; }
.dashboard-zone .gc-3{ grid-column: span 2; }
.dashboard-zone .gc-4{ grid-column: span 2; }
.dashboard-zone .gc-5{ grid-column: span 2; }
.dashboard-zone .gc-6{ grid-column: span 2; }
.dashboard-zone .gc-7{ grid-column: span 2; }
.dashboard-zone .gc-8{ grid-column: span 2; }
.dashboard-zone .gc-9{ grid-column: span 2; }
.dashboard-zone .gc-10{ grid-column: span 2; }
.dashboard-zone .gc-11{ grid-column: span 2; }
.dashboard-zone .gc-12{ grid-column: span 2; }

}
.dashboard-zone .inside {
    background-color: #fff;
}

.dashboard-zone .divItem {
    cursor: move;
}
.dashboard-zone .divRec {
    cursor: move;
    padding: 35px 20px;
    font-size: 20px;
    background-color: #ff0000;
}

.dashboard-zone .divQuad {
    cursor: move;
    padding: 35px 20px;
    font-size: 20px;
    background-color: #fff333;
}

.dashboard-zone .divCard {
    cursor: move;
    padding: 35px 20px;
    font-size: 20px;
    background-color: #00ff00;
}

.dashboard-zone .ghost {
    border: 1px dashed #000;
    background-color: #fff;
}

.dashboard-zone .custom-drag-ghost {
/* The original cloned element must not take place up in the page and must not be visible */
position: absolute;
top: -99999px;
left: -99999px;
/* Just for appearance */
background-color: #edb458;
border: 1px solid #e8871e;
}

.dashboard-zone .hidden-drag-ghost {
    opacity: 0;
}

.dashboard-zone .transition {
    transition: all 2s ease-out .5s; 
    top: 0;
}

.widgetItem{
    cursor: move;
    border: solid 1px #888;
    /* border: dashed 1px #888; */
}