.draggableControl {
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
    cursor: move;
    list-style: none;
    /*    border: solid 1px #dfe4e6;*/
    box-shadow: 0 0 1px rgba(0, 0, 0, .1);
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .draggableControl:focus,
    .draggableControl:hover {
        box-shadow: 0 0 1px rgba(0, 0, 0, .5);
        z-index: 10;
    }

    .draggableControl pre {
        margin: 0;
        padding: 4px;
        border: none 0;
        font-size: .9em;
    }

    .draggableControl a {
        display: none;
    }

    .draggableControl:hover a,
    .draggableControl:focus a {
        display: block;
    }

    .draggableControl a.icon-open-settings {
        /*    display: block;*/
        position: absolute;
        margin: 0;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        background-position: center center;
        background-size: 100% 100%;
        background-image: url(images/ic_settings_black_24dp_1x.png);
    }

    .draggableControl a.icon-remove-control {
        /*    display: block;*/
        position: absolute;
        margin: 0;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        background-position: center center;
        background-size: 100% 100%;
        background-image: url(images/delete.png);
    }

.droppableContainer {
    margin: 0;
    padding: 0;
    min-height: 40px;
    min-width: 40px;
}

    .droppableContainer.ui-state-hover {
        background: #005587 !important;
        border: none 0;
    }

table.grid {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
    width: 0;
    background: #fff;
}

    table.grid > caption {
        padding: 10px;
        color: #aaa;
    }

    table.grid > tbody > tr > td {
        padding: 0;
        border: none 0;
        min-width: 40px;
        min-height: 40px;
    }

    table.grid > tbody > tr > th {
        background: #fff;
    }

    table.grid th {
        font-weight: normal;
        padding: 0;
        color: #bbb;
        border: none 0;
    }

    table.grid tbody tr .design-menu {
        margin: 0 3px;
        min-width: 30px;
        height: 40px;
        user-select: none;
    }

    table.grid thead tr:nth-child(1) .design-menu {
        margin: 3px 0;
        min-width: 40px;
        height: 30px;
        user-select: none;
    }

#toArea.design table.grid {
    background: rgba(0, 0, 0, .02);
}

    #toArea.design table.grid th {
        background: #fff;
    }

    #toArea.design table.grid > tbody > tr > td:nth-child(even) {
        background: rgba(0, 0, 0, .02);
    }

    #toArea.design table.grid > tbody > tr:nth-child(odd) {
        background: rgba(0, 0, 0, .02);
    }

.front.button:disabled {
    border-color: #344044;
    color: #344044;
}