body {
    min-width: 465px;
}
@media (max-width: 767px){
    body {
        min-width: 100%;
    }
}

body.embedded {
    background-color: #f6f6f6
}

.admin-toolbar .breadcrumb {
    padding-top: 6px;
    padding-bottom: 6px
}

#editor {
    height: 600px;
    width: 100%;
    position: relative
}

#editor:after {
    clear: both
}

.embedded #editor {
    height: 100%;
    width: 100%;
    position: relative
}

#room {
    height: 100%;
    /* background-color: #ddd; */
    position: absolute
}

#roomLoading {
    background: #ddd url("../images/ajax-loader-bar.gif") no-repeat scroll center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0
}

#roomLabel {
    text-align: center;
    color: #666
}

.admin-web #room,
.admin-web #palate {
    height: 600px
}

#room.hovered {
    background-color: #eee
}

#palate {
    position: absolute;
    scroll: auto;
    left: 0;
    top: 0;
    background-color: #f6f6f6
}

.embedded #palate {
    background-color: #f6f6f6
}

#controls {
    position: absolute;
    overflow: hidden;
    scroll: auto;
    z-index: 0;
    /* background-color: #f6f6f6 */
}

.embedded #controls {
    /* background-color: #f6f6f6 */
}

#controls .btn {
    padding-left: 8px;
    padding-right: 8px
}

.embedded #controls .btn {
    padding: 8px 12px
}

#controls .btn>i {
    opacity: .7;
    filter: alpha(opacity=70)
}

#controlsInner {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 8px;
    bottom: 12px
}

#tableNumber,
#tableSeats {
    width: 35px
}

#labelText {
    width: 100px
}

.control {
    float: left;
    padding-right: 10px;
    min-height: 45px
}

.control span {
    width: 42px;
    text-align: right;
    display: inline-block
}

.horizontal .control span {
    width: auto
}

.labelCell {
    white-space: nowrap; 
    width: auto; 
    overflow: hidden;
    text-overflow: ellipsis; 
    text-align: center;
}

.tableLabel {
    white-space: nowrap; 
    width: auto; 
    overflow: hidden;
    text-overflow: ellipsis; 
    text-align: center;
}

.diamond .tableLabel {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

#rotatable {
    position: relative;
    width: 63.7%;
    height: 63.7%;
    padding: .5em;
    border: 1px solid #333;
    left: 14.25%;
    top: 14.25%;
    background: #ec3
}

div.ui-resizable-handle {
    background: url('./images/table_admin/resize_handle.png') no-repeat center !important
}

div.ui-resizable-sw,
div.ui-resizable-se,
div.ui-resizable-nw,
div.ui-resizable-ne {
    width: 25px;
    height: 25px
}

div.ui-resizable-w,
div.ui-resizable-e {
    width: 25px
}

div.ui-resizable-n,
div.ui-resizable-s {
    height: 25px
}

div.ui-resizable-nw,
div.ui-resizable-ne,
div.ui-resizable-n {
    top: -13px
}

div.ui-resizable-sw,
div.ui-resizable-se,
div.ui-resizable-s {
    bottom: -13px
}

div.ui-resizable-ne,
div.ui-resizable-se,
div.ui-resizable-e {
    right: -13px
}

div.ui-resizable-nw,
div.ui-resizable-sw,
div.ui-resizable-w {
    left: -13px
}

div.ui-widget-content {
    border: 0;
    background: 0
}

.section {
    padding: 10px;
    float: left
}

.section .header {
    font-weight: bold;
    font-size: 16px;
    margin: 5px 0 10px 0;
    text-decoration: underline;
    color: #666
}

.shape {
    float: left;
    z-index: 0;
    font-size: 14px;
    cursor: move;
    box-sizing: content-box
}

.circle,
.square,
.diamond {
    width: 50px;
    height: 50px;
    margin: 5px
}

.rect {
    width: 35px;
    height: 50px;
    margin: 5px
}

.circle,
.square,
.rect,
.diamondInner {
    border: 2px solid #666;
    background-color: #fff
}

.circle[selected],
.square[selected],
.rect[selected],
.diamond[selected] .diamondInner {
    border: 3px solid #666
}

.circle[selected],
.square[selected],
.rect[selected],
.diamond[selected] {
    margin: 4px
}

.border[selected] {
    border-color: #999
}

.box[selected] {
    border: 4px solid #666;
    margin: 4px
}

.text[active],
.text[delete],
.text[selected] {
    border-width: 2px;
    margin: 4px
}

.text[selected] {
    border-color: #333
}

.circle[active],
.square[active],
.rect[active],
.diamond[active] .diamondInner,
.border[active],
.box[active],
.text[active] {
    border-color: #6c6
}

.circle[delete],
.square[delete],
.rect[delete],
.diamond[delete] .diamondInner,
.border[delete],
.box[delete],
.text[delete] {
    border-color: #d66
}

.border[selected],
.border[active],
.border[delete] {
    margin: 3px;
    padding: 2px
}

.diamond {
    padding: 2px
}

.diamondInner {
    position: relative;
    width: 80%;
    height: 80%;
    left: 6%;
    top: 6%;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-sizing: content-box
}

.circle {
    -moz-border-radius: 50%;
    border-radius: 50%
}

.square,
.rect {
    -moz-border-radius: 2px;
    border-radius: 2px
}

.border {
    width: 50px;
    height: 1px;
    margin: 5px;
    border: 2px solid #333;
    background-color: #333
}

.box {
    width: 50px;
    height: 35px;
    margin: 5px;
    border: 3px solid #333
}

.text {
    width: 60px;
    border: 1px dotted #666;
    height: none;
    margin: 5px
}