@font-face {
    font-family: 'monospacetypewriterregular';
    src: url('zebra-fonts/monospacetypewriter-webfont.eot');
    src: url('zebra-fonts/monospacetypewriter-webfont.eot?#iefix') format('embedded-opentype'),
         url('zebra-fonts/monospacetypewriter-webfont.woff2') format('woff2'),
         url('zebra-fonts/monospacetypewriter-webfont.woff') format('woff'),
         url('zebra-fonts/monospacetypewriter-webfont.ttf') format('truetype'),
         url('zebra-fonts/monospacetypewriter-webfont.svg#monospacetypewriterregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.zebra-designer-root {font-family: 'monospacetypewriterregular';}

.zebra-designer-root {
    width:100%;height:100%;
    display:table;
    border:1px solid black;
}
.zebra-designer-left-col {
    border-left:1px solid black;
    display:table-cell;vertical-align:top;
    width:230px;min-width:230px;max-width:230px;
}
.zebra-designer-middle-col {
    display:table-cell;vertical-align:top;
    background:#EEE;
}
.zebra-design-paper-wrapper {/*position: absolute;/*transform: scale(0.6);transform-origin: 0 0 0;*/
    overflow: auto;position: relative;
    padding:20px;
/*    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;*/
}
.zebra-design-paper-outer {
    position: absolute;
    top:20px;left:20px;
}
.zebra-design-paper {
    background:white;display:inline-block;min-width:100px;min-height:50px;border:1px solid black;
    transform-origin: 0 0 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.zebra-design-paper .display-element.visible {position:absolute;border:1px dashed #CCC;display:inline-block;}
.zebra-design-paper .display-element.deleted{display:none;}
.zebra-design-paper .display-element .element-inner {
    line-height:1;
    white-space:nowrap;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    cursor:pointer;
}
.zebra-design-paper .display-element .element-inner .barcode-text {text-align:center;}
.zebra-design-paper .display-element .element-inner .barcode-fix {width:100%;height:100%;top:0;left:0;position:absolute;}
.zebra-design-paper .display-element-options {
    position:absolute;top:-25px;left:-1px;display:inline-block;border:1px solid #347cac;border-bottom:none;line-height: 0;font-size: 0;white-space:nowrap;
    z-index: 1000;background-color:#eeeeee;
}
.zebra-design-paper .display-element .element-drag {
    display:none;
    width:24px;height:24px;
    background:url(images/zebra-designer/drag-icon.png) no-repeat center center;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;cursor:move;
}
.zebra-design-paper .display-element .element-edit {
    display:none;
    width:24px;height:24px;
    background:url(images/zebra-designer/edit-icon.png) no-repeat center center;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;cursor:pointer;
}
.zebra-design-paper .display-element .element-resize {
    display:none;
    width:24px;height:24px;
    bottom:-8px;right:-8px;
    position:absolute;z-index: 1000;
    background:url(images/zebra-designer/resize-icon.png) no-repeat center center;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;cursor: nw-resize;
}
.zebra-design-paper .display-element .element-delete {
    display:none;
    width:24px;height:24px;
    background:url(images/zebra-designer/delete-icon.png) no-repeat center center;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;cursor:pointer;
}
.zebra-design-paper .display-element .element-edit:hover,
.zebra-design-paper .display-element.editing .element-edit,
.zebra-design-paper.editing .display-element.visible.editing .element-edit {background-color:#347cac;background-image:url(images/zebra-designer/edit-icon-white.png);}

.zebra-design-paper .display-element .element-resize:hover,
.zebra-design-paper .display-element.resizing .element-resize,
.zebra-design-paper.resizing .display-element.visible.resizing .element-resize {background-color:#347cac;background-image:url(images/zebra-designer/resize-icon-white.png);}


.zebra-design-paper .display-element .element-delete:hover{background-color:#347cac;background-image:url(images/zebra-designer/delete-icon-white.png);}


.zebra-design-paper .display-element .element-drag:hover,
.zebra-design-paper .display-element.moving .element-drag,
.zebra-design-paper.dragging .display-element.visible.dragging .element-drag {background-color:#347cac;background-image:url(images/zebra-designer/drag-icon-white.png);}

.zebra-design-paper:not(.dragging):not(.editing) .display-element.visible:hover .element-inner {z-index:2000;position:relative;}

.zebra-design-paper:not(.dragging):not(.editing):not(.resizing) .display-element.visible:hover .element-edit,
.zebra-design-paper:not(.dragging):not(.editing):not(.resizing) .display-element.visible:hover .element-delete,
.zebra-design-paper:not(.dragging):not(.resizing) .display-element.visible:hover .element-drag{display:inline-block;}

.zebra-design-paper:not(.dragging):not(.editing):not(.resizing) .display-element.visible:hover .element-resize{display:inline-block;}

.zebra-design-paper.editing .display-element.visible.editing,
.zebra-design-paper:not(.editing):not(.dragging) .display-element.visible:hover {
    border:1px solid #347cac;
    background-color:#eeeeee;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.zebra-design-paper.editing .display-element.visible.editing .element-edit,
.zebra-design-paper.dragging .display-element.visible.dragging .element-drag,
.zebra-design-paper.editing .display-element.visible.editing .element-drag,
.zebra-design-paper.editing .display-element.visible.editing .element-delete,
.zebra-design-paper.resizing .display-element.visible.resizing .element-resize {display:inline-block;}
.zebra-designer-right-col {
    border-right:1px solid black;
    display:table-cell;vertical-align:top;
    width:150px;min-width:150px;max-width:150px;
}
.zebra-designer-form {padding:20px;}

.zebra-designer-form .zebra-designer-buttons {
    text-align: center;
}
.zebra-designer-form .form-element-body{position:relative;padding:10px 0;}

.zebra-designer-form .form-element-table-wrapper {display:table;width:100%;}
.zebra-designer-form .form-element-table-wrapper .form-element-table-body {display:table-cell;width:20px;max-width:20px;min-width:20px;vertical-align:middle;}
.zebra-designer-form .form-element-table-wrapper .form-element-table-label {display:table;vertical-align:middle;}
.zebra-designer-form input {
    width:100%;
    border:none;background:none;
    border-bottom:1px solid #cacacc;
    float:none!important;
}
.zebra-designer-form select {width:100%;float:none!important;}
.zebra-designer-form input + .placeholder-text {
    position: absolute;
    top: 15px!important;
    transition: all 0.2s ease-in-out 0s;
}
.zebra-designer-form input.placeholder-up + .placeholder-text {
    top:0!important;
}
.zebra-designer-form .zebra-designer-cancel {
/*    background: #fff;
    border-radius: 3px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding: 6px 16px;
    text-align: center;
    text-transform: uppercase;*/
    background: #347cac;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    margin-right: 5px;
    padding: 6px 16px;
    text-transform: uppercase;

    display: inline-block;
}
.zebra-designer-form .zebra-designer-submit {
    display:none;
    background: #347cac;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    margin-right: 5px;
    padding: 6px 16px;
    text-transform: uppercase;
}



.zebra-toolbar {}
.zebra-toolbar .zebra-toolbar-icon{display:inline-block;width:30px;height:30px;cursor:pointer;background-position:center center;background-repeat:no-repeat;}
.zebra-toolbar .zebra-toolbar-icon:not(.grayed):hover{display:inline-block;width:30px;height:30px;background-color:#347cac;}
.zebra-toolbar .zebra-toolbar-icon.export {background-image: url(images/zebra-designer/export-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.export:hover {background-image: url(images/zebra-designer/export-icon-white.png);}
.zebra-toolbar .zebra-toolbar-icon.import {background-image: url(images/zebra-designer/import-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.import:hover {background-image: url(images/zebra-designer/import-icon-white.png);}
.zebra-toolbar .zebra-toolbar-icon.undo {background-image: url(images/zebra-designer/undo-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.undo:not(.grayed):hover {background-image: url(images/zebra-designer/undo-icon-white.png);}
.zebra-toolbar .zebra-toolbar-icon.undo.grayed {background-image: url(images/zebra-designer/undo-icon-gray.png);}
.zebra-toolbar .zebra-toolbar-icon.redo {background-image: url(images/zebra-designer/redo-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.redo:not(.grayed):hover {background-image: url(images/zebra-designer/redo-icon-white.png);}
.zebra-toolbar .zebra-toolbar-icon.redo.grayed {background-image: url(images/zebra-designer/redo-icon-gray.png);}

.zebra-toolbar .zebra-toolbar-icon.pageresize {background-image: url(images/zebra-designer/pageresize-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.pageresize:hover {background-image: url(images/zebra-designer/pageresize-icon-white.png);}

.zebra-toolbar .zebra-toolbar-icon.plus {background-image: url(images/zebra-designer/plus-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.plus:hover {background-image: url(images/zebra-designer/plus-icon-white.png);}


.zebra-toolbar .zebra-toolbar-icon.minus {background-image: url(images/zebra-designer/minus-icon.png);}
.zebra-toolbar .zebra-toolbar-icon.minus:hover {background-image: url(images/zebra-designer/minus-icon-white.png);}


.zebra-designer-right-col {padding:0 10px 0 10px;}
.zebra-designer-right-col textarea {
    width:100%;height:200px;margin-top:20px;float:none!important;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.zebra-designer-right-col .create-elements {padding:10px 0;}
.zebra-designer-right-col .create-element {padding:0 5px 0 20px;background:url(images/zebra-designer/drag-icon.png) no-repeat left center;line-height:30px;cursor:move;}