#editorMenu {border-radius: 4px; margin-bottom: 10px;}

#editorPages {margin-bottom: 10px; white-space: nowrap; overflow-x: auto;}
#editorPages .btn-gray {background-color: #eee; color: #454f59}
#editorPages .btn-gray:hover,
#editorPages .btn-gray:focus {border-color: #aaa;}
#editorPages .btn + .btn {margin-left: 5px;}

#editor > .column + .column {padding-left: 10px;}
@-moz-document url-prefix() {#editor > .column:last-child {width: 280px!important;}}
#editor > .column > .cell {overflow: visible; border-radius: 4px;}
#editor .cell-header {position: absolute; left: 0; top: 0; right: 0; height: 24px; line-height: 24px; background-color: #787BFF; color: #fff; padding: 0 10px; text-align: center;}
#editor > .side-col > .cell > .cell-header {background-color: #9395ff;}
#editor > .column:first-child > .cell > .cell-header {border-top-left-radius: 4px;}
#editor > .column:last-child > .cell > .cell-header {border-top-right-radius: 4px;}
#editor > .column + .column > .cell > .cell-header {left: -10px;}
#editor > .column + .column > .cell > .cell-header > span:before {content: ' '; display: block; position: absolute; left: 5px; top: 0; width: 6px; height: 24px; background-color: #eee; z-index: 1; left: 0;}
#editor > .column + .column > .cell > .cell-header:before,
#editor > .column + .column > .cell > .cell-header:after {content: ' '; display: block; position: absolute; left: 5px; top: 0; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #eee; z-index: 2;}
#editor > .column + .column > .cell > .cell-header:after {content: ' '; display: block; position: absolute; left: 0; border-color: transparent transparent transparent #9395ff; z-index: 3;}
#editor > .column:last-child > .cell > .cell-header:after {border-color: transparent transparent transparent #787BFF;}
#editor .cell-body {position: absolute; left: 0; top: 24px; right: 0; bottom: 0; overflow-y: auto;}

#editorControlsNav {position: absolute; top: 0; left: 0; right: 0; padding: 0; text-align: center; padding: 10px 5px 10px 5px; margin: 0;}
#editorControlsNav > li {display: inline-block;}
#editorControlsNav > li + li {margin-left: 5px;}
#editorControlsNav > li > .btn {min-width: 80px; border-radius: 14px;}
#editorControlsNav > li.active > .btn {color: #1ca5ff; border-color: #1ca5ff;}
#editorControlsNav + .tab-content {position: absolute; top: 48px; left: 0; right: 0; bottom: 0; overflow-y: auto;}
#editorControlsList, #editorShowedFields {padding: 10px 20px;}
#editorControlsList .btn,
#editorShowedFields .btn {display: block; width: 90%; margin: 0 auto; cursor: move;}
#editorControlsList .btn + .btn,
#editorShowedFields .btn + .btn {margin-top: 8px;}
.btn-field-control.drag-shadow {position: relative; z-index: 1000;}
.btn-field-control.drag-shadow:before {content: '\e989'; font-family: zdooicon; position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; line-height: 16px; display: block; text-align: center; border-radius: 50%; background-color: #FFBE39; color: #fff}

#uiPreviewWrapper {padding: 0 20px 10px; max-width: 580px; margin: 0 auto; margin-top: 15px;}
.form-control-static {min-height: 28px;}
.field-item {padding: 8px 0; position: relative; min-height: 30px; border-radius: 4px; border: transparent solid 1px;}
.field-item:hover {background-color: #f1f1f1;}
.field-item.active {background-color: #DAF0FF; border-color: #1CA5FF;}
.field-item-row {display: table;}
#uiPreview {min-height: 300px;padding-bottom: 15px;}
#uiPreview.drop-to,
.field-item.drop-to {margin-top: 10px;}
#uiPreview.drop-to:after,
.field-item.drop-to:before {content: ' '; display: block; position: absolute; top: -8px; left: 0; right: 0; height: 5px; border: dashed #FFBE39 1px; border-radius: 3px; background-color: #FFF3E0;}
#uiPreview.drop-to:after {position: static; margin-top: 5px;}
.field-label, .field-buttons, .field-control {display: table-cell; vertical-align: top;}
.field-label {min-width: 130px; width: 130px; text-align: right; color: #505b63; font-weight: bold; line-height: 28px; padding-right: 10px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.field-control {width: 300px; position: relative;}
.field-buttons {width: 145px; padding-left: 20px;}
.field-buttons > .btn {width: 26px; height: 26px; padding: 0; line-height: 26px;}
.field-buttons > .btn > .icon {font-size: 16px;}
.field-required .field-control:before {content: '*'; color: #FF4268; font-size: 22px; line-height: 22px; position: absolute; top: 6px; right: -15px;}
.field-control .checkbox-list,
.field-control .radio-list {margin-top: 3px;}
.field-control .checkbox-inline > span,
.field-control .radio-inline > span {display: inline-block;}
.field-control .checkbox-inline,
.field-control .radio-inline {margin-left: 0; margin-right: 10px;}
.field-control .checkbox-inline:last-child,
.field-control .radio-inline:last-child {margin-right: 0;}
.field-control .example-text-holder {position: relative; top: -2px}
.field-sort-handler {cursor: move;}
.field-item[data-field="file"] .field-copy-btn {display: none;}

#filedEditForm {display: none; padding: 10px 15px 10px 10px;}
#filedEditForm .input-group-addon {padding: 5px 4px;}
#filedEditForm .form-group.required::after {top: 24px; right: -12px;}
#filedEditForm.is-file .hide-in-buildin,
#filedEditForm.is-file #fieldEditField,
#filedEditForm.is-file #fieldIsValue,
#filedEditForm.is-buildin .hide-in-buildin {display: none;}
#filedEditForm.is-status #fieldEditOptionType {display: block;}
#filedEditForm[data-control="file"] > .form-group {display: none!important;}
#filedEditForm[data-control="file"] > .form-group.show-for-file {display: block!important;}
.field-error-btn {display: none;}
.field-item.has-error .field-error-btn {display: inline-block;}
#filedEditTip {padding: 80px 5px; text-align: center;}
#fieldEditOptionsList .field-option-item {position: relative; z-index: 0;}
#fieldEditOptionsList .field-option-item + .field-option-item {margin-top: -1px;}
#fieldEditOptionsList .field-option-item.active {z-index: 1;}
#fieldEditOptionsList .field-option-item .form-control {padding: 5px 4px;}
#fieldEditOptionsList .field-option-item .input-group-addon .icon {width: 18px; height: 18px; display: inline-block; line-height: 18px;cursor: pointer;}
#fieldEditOptionsList .field-option-item .input-group-addon .icon:hover {color: #2272EB; }
#fieldEditOptionsList .field-option-item .input-group-addon .icon-move {cursor: move;}
#fieldEditOptionsList .input-group-addon {border-radius: 0;}
#fieldEditOptionsList > .field-option-item:first-child > .input-group-addon:first-child {border-top-left-radius: 4px;}
#fieldEditOptionsList > .field-option-item:first-child > .input-group-addon:last-child {border-top-right-radius: 4px;}
#fieldEditOptionsList > .field-option-item:last-child > .input-group-addon:first-child {border-bottom-left-radius: 4px;}
#fieldEditOptionsList > .field-option-item:last-child > .input-group-addon:last-child {border-bottom-right-radius: 4px;}
#fieldEditOptions {margin-top: 5px;}
#addFieldOptionBtn {margin-top: 3px;}
.help-block.text-danger {color: #ff4268}
#fieldEditType.hide-type-length:after,
#fieldEditType.hide-type-length > .input-group > .input-group-addon,
#fieldEditType.hide-type-length #fieldLength {display: none!important}
#fieldEditType.hide-type-length > .input-group {display: block;}
#fieldEditType.hide-type-length #fieldType {border-radius: 4px; display: block; width: 100%; float: none;}
#fieldEditControl #fieldControl option[value=label] {display: none;}
#decimalDigitsGroup {margin-top: 5px}

#uiListPreview {padding: 10px 15px;}
#uiListPreview > header {position: relative; margin-bottom: 10px;}
#uiListPreview > header .nav > li.active > a:before {position: absolute; right: 12px; bottom: 3px; left: 12px; display: block; height: 2px; content: ' '; background: #1ca5ff}
#uiListPreview > header .actions {position: absolute; right: 0; top: 3px;}
#uiListTable {border: 1px solid #d6dae3;}
#uiListHeader {min-height: 40px; overflow-x: auto; white-space: nowrap; padding: 2px 5px;}
#uiListFooter {padding: 12px; position: relative; height: 40px;}
#uiListFooter .pager {position: absolute; right: 4px; top: 5px; margin: 0;}
#uiListFooter .pager > li > a {line-height: 23px; border: none; padding: 4px; border-radius: 4px;}
#uiListFooter .actions {position: absolute; top: 6px; left: 80px;}
#uiListBody {min-height: 150px; border-top: 1px solid #d6dae3; border-bottom: 1px solid #d6dae3;}
.field-col-item {display: inline-block; border: 1px solid transparent; padding: 4px 2px 4px 0; position: relative; z-index: 0; background-color: #fff; min-width: 90px;}
.field-col-item > .icon {line-height: 28px; display: inline-block; vertical-align: middle; opacity: 0;}
.field-col-item > .icon-sort {opacity: 0.7;}
.field-col-item > .btn {opacity: 0; position: absolute; top: 4px; right: 0;}
.field-col-item > .btn.field-error-btn {right: 0;}
.field-col-item.has-error {padding-right: 30px;}
.field-col-item.has-error > .btn.field-error-btn {display: inline-block; opacity: 1;}
.field-col-item.has-error > .btn.field-delete-btn {right: 26px;}
.field-col-item:hover {border-color: #d6dae3; z-index: 3;}
.field-col-item:hover > .icon,
.field-col-item:hover > .btn,
.field-col-item.active > .icon {opacity: 1;}
.field-col-item:hover .field-col-item-label {opacity: 0.8;}
.field-col-item:hover > .btn {background-color: #DAF0FF;}
.field-col-item > .btn:hover {background-color: #eeeeee;}
.field-sort-handler {cursor: move;}
.field-col-item-label {display: inline-block; color: #505b63; font-weight: bold; line-height: 28px; vertical-align: middle; min-width: 30px;}
.field-col-item.active {background-color: #DAF0FF; border-color: #1CA5FF; z-index: 2;}
.field-col-item.drop-to {margin-left: 10px;}
#uiListHeader:after {content: ''; display: inline-block; height: 38px; vertical-align: middle; font-weight: bold; padding: 0 4px; color: #505b63; opacity: .8; cursor: not-allowed;}
#uiListHeader.drop-to:after {margin-left: 2px; padding-left: 8px; border: dashed #FFBE39 1px; border-radius: 3px; background-color: #FFF3E0; white-space: nowrap; overflow: visible; width: 5px; padding: 0; margin-right: 50px; text-indent: 10px;}
.field-col-item.drop-to:before {content: ' '; display: block; position: absolute; top: 0; left: -8px; bottom: 0; width: 5px; border: dashed #FFBE39 1px; border-radius: 3px; background-color: #FFF3E0;}
.field-col-item[data-field="actions"] {cursor: not-allowed;}
.field-col-item[data-field="actions"] .field-sort-handler.icon,
.field-col-item[data-field="actions"] .icon-sort,
.field-col-item[data-field="actions"] .field-delete-btn {display: none;}

#uiListBody {overflow: hidden; padding: 5px;}
#uiListPreviewItems {padding-right: 8px;}
[data-mode="batchForm"] #uiListPreviewItems {display: flex; flex-direction: row; align-items: stretch;}
.field-col-preview {float: left;}
[data-mode="batchForm"] .field-col-preview {display: flex; flex-direction: column; align-items: stretch;}
.field-col-preview > .field-col-preview-view {padding: 8px 10px; height: 35px; overflow: hidden;}
.field-col-preview > .field-col-preview-view:nth-child(odd) {background-color: #f3f3f3;}
.field-col-preview > .field-col-preview-form {padding: 3px; margin-top: 1px; flex: 1; display: flex; align-items: center; justify-content: center;}
.field-col-preview > .field-col-preview-form .radio-inline {display: block; margin: 0;}
.field-col-preview textarea {height: 28px; overflow: hidden;}
.field-col-preview .example-text-holder {top: -2px; white-space: nowrap; overflow: hidden;}

#uiListHeader,
#uiPreviewWrapper,
.view-panel {outline: 6px solid transparent; outline-offset: 3px; position: relative; transition: outline .2s;}
#uiListTable {position: relative; top: 5px}
.editor-dragging #uiListHeader,
.editor-dragging #uiPreviewWrapper,
.editor-dragging .view-panel {outline: 6px solid #FFF3E0;}
.editor-dragging [data-drop-tip]:before {content: attr(data-drop-tip); position: absolute; top: -15px; left: 50%; text-align: center; margin-left: -100px; width: 200px; line-height: 20px; background-color: #FFE0B2; color: #EF6C00; border-radius: 10px; z-index: 10;}
.editor-dragging #uiListTable.drop-hover #uiListHeader,
.editor-dragging #uiPreviewWrapper.drop-hover,
.editor-dragging .view-panel.drop-hover {outline: 3px solid #FFB74D; outline-offset: 2px; position: relative;}
.editor-dragging .drop-hover[data-drop-tip]:before,
.editor-dragging .drop-hover [data-drop-tip]:before {background-color: #EF6C00; color: #fff;}

#uiViewWrapper {max-width: 1000px; margin: 0 auto; padding: 10px;}
#uiViewWrapper .col {padding: 10px;}
#uiViewWrapper .view-dropbox {min-height: 200px;}
#uiViewWrapper .view-panel {border: 1px solid #e5e5e5}
#uiViewWrapper .field-item-row {width: 100%;}
#uiViewWrapper .field-item-row:hover {background-color: #f1f1f1;}
#uiViewWrapper .field-view-item {border: 1px solid transparent; border-radius: 4px; position: relative;}
#uiViewWrapper .field-view-item.active {background-color: #DAF0FF; border-color: #1ca5ff;}
#uiViewWrapper .field-label {vertical-align: middle;}
#uiViewWrapper .field-label:after {content: ':'}
#uiViewWrapper .field-value {display: table-cell; vertical-align: middle; }
#uiViewWrapper .field-buttons {width: 115px; min-width: 115px; padding-left: 5px;}
#uiViewWrapper .view-panel-basic .field-label {font-weight: normal; max-width: 70px; min-width: 70px; width: 70px; color: #8e939a}
#uiViewWrapper .view-panel-basic .field-label::after {display: none;}
#uiViewWrapper .view-panel-basic .example-text-holder:after {display: none;}
#uiViewWrapper .field-view-item.drop-to {margin-top: 5px;}
#uiViewWrapper .view-dropbox.drop-to:after,
#uiViewWrapper .field-view-item.drop-to:before {content: ' '; display: block; position: absolute; top: -8px; left: 0; right: 0; height: 5px; border: dashed #FFBE39 1px; border-radius: 3px; background-color: #FFF3E0;}
#uiViewWrapper .view-dropbox.drop-to:after {position: static;}
#uiViewWrapper .field-view-item.has-error .field-error-btn {display: inline-block;}
.editor-sorting #uiViewWrapper .field-view-item.drop-to:before,
.editor-sorting #uiViewWrapper .view-dropbox.drop-to:after {display: none;}

.highlight-errors .field-item.has-error,
.highlight-errors .field-col-item.has-error,
.highlight-errors .field-view-item.has-error {background-color: #FFEBEE!important;}
.highlight-errors .field-item.has-error .field-label {color: #FF4268!important;}
.highlight-errors .field-col-item.has-error {border-color: #FF4268!important;}