/*Simple style for an test widget*/
.GridLayout > .Row > .Column > .Widget.TestWidget {
    background: #eee;
    padding: 0.5em;
    cursor: move;
    border: 1px solid #ddd;
}
.GridLayout > .Row > .Column > .Widget.Section {
    padding: 0.75em;
    cursor: move;
    border: 1px solid #ccc;
}

/* some icons */
.WidgetType.Icon.MockupSection {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAI5JREFUSEu9kAsKgDAMQ3dJ7+c9diiPUJd90M2C61jzIDZCMMQgIu7Kj+O8xEufEjBzLUo8JcByZ5Ug/i44R0pJIr/FGH9lydXvEkvggBYeZclViEsoJXBAC4+y5CrEJZQSOEfsS2YFuiWUEjighVf1griEUgIHtPCqXhCXtJLddCXlvRTh7vI42TbjJwk3R4ax1aqxpqwAAAAASUVORK5CYII=");
}
.WidgetType.Icon.MockupButtons {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAA00lEQVRIS+2TRw6DMBQFCZw7vfdenBwLUi/j8O2H85EMAclRNjxphPFiZmVPSvlzzEEIIV2TiuDC+ZJQKuKp3+/forNGaC5DmRGX+28kuLxkcAYCnBjHpwwOjH3MjrF9wJQRMRIuIgkXxRLFBqzBCizvCpo9wkWJJEcULDT+HMzA9KZ89kgJiWESM2aMNDRrxCoiCRdB4g+vmgHog56GZo+UFPndSNMBbdCKlM8aoRWVELVm+KEB6iFMORGXy4xU76R6J9U7MUtFCLpwTeI2kd8hvTfp2zmKYaptLQAAAABJRU5ErkJggg==");
}
.WidgetType.Icon.MockupSimpleText {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAdElEQVRIS82QWwrAIAwEPb5X8LQpKV2pJWora5OBwceHg0kist26KaUI2yZyXdBBqImk8zhf32JGFGaoG2HiF9FRjAQ556HAL3Ln+fAKMSPWWHqCmJEVYkassfQEMSIMfCPW978KfCNM/o+oesEWb9fIPiUdxi3yCuzZ/YgAAAAASUVORK5CYII=");
}
/* mockup widget gallery */
.MockWidgetGallery {
    margin: 1em -18px;
    padding: 1em 18px;
    border: 1px solid #ccc;
    border-left: 0; border-right: 0;
    background: #eee;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.2);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0 );
    
}
.MockWidgetGallery .CreateWidget {
    display: inline-block;
    padding: 0.5em;
    background: white;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-right: 1em;
    cursor: move;
}
.MockWidgetGallery .CreateWidget > * {
    display: inline-block;
    vertical-align: middle;
}
.MockWidgetGallery .CreateWidget .WidgetType.Icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 0.5em;
}
/* mockup twocolumn layout */

.MockDashboardLayout {
    display: table;
    width: 100%;
}
.MockDashboardLayout > .Sidebar {
    display: table-cell;
    width: 250px;
    padding-right: 1.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.MockDashboardLayout > .Sidebar .GridLayoutPlaceholder {
    padding: 4em 2em 6em 2em !important;
    text-align: center;
}
.MockDashboardLayout > .Sidebar .GridLayout > .Row > .Column {
    padding: 0;
}
.MockDashboardLayout > .Main {
    display: table-cell;
}