.formatEditor .drsElement {
    position: absolute;
    border: 1px solid #989191;
}

.formatEditor .drsElement span {
    position: absolute;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

.formatEditor .image span {
    padding-top: 5%;
    text-align: center !important;
}


/*
The main mouse handle that moves the whole element.
You can apply to the same tag as drsElement if you want.
*/
.formatEditor .drsMoveHandle {
    height: 100%;
    width: 100%;
    position: absolute;
    cursor: move;
    background-color: transparent;
}

/*
The DragResize object name is automatically applied to all generated
corner resize handles, as well as one of the individual classes below.
*/
.formatEditor .dragresize {
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 1px;
    background: #FFFFFF;
    border: 1px solid #989191;
}

/*
Individual corner classes - required for resize support.
These are based on the object name plus the handle ID.
*/
.formatEditor .dragresize-tl {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}
.formatEditor .dragresize-tm {
    top: -5px;
    left: 50%;
    margin-left: -4px;
    cursor: n-resize;
}
.formatEditor .dragresize-tr {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.formatEditor .dragresize-ml {
    top: 50%;
    margin-top: -4px;
    left: -5px;
    cursor: w-resize;
}
.formatEditor .dragresize-mr {
    top: 50%;
    margin-top: -4px;
    right: -5px;
    cursor: e-resize;
}

.formatEditor .dragresize-bl {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.formatEditor .dragresize-bm {
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
    cursor: s-resize;
}
.formatEditor .dragresize-br {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.formatEditor .dragresize-close {
    top: -15px;
    right: 10px;
    cursor: pointer;
    border: 1px solid red;
    border-radius: 50%;
}

.formatEditor .container-page {
    height : 100%;
}

.formatEditor .drsElement:focus {
    background-color: red;
}

.formatEditor .drsRemoveElement {
    top: -20px;
    right: 10px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
}

.formatEditor #wrapper-page{
    border: 1px solid #496EA2; 
    height: 804px;
    width: 634px;
    margin: auto;
    position: relative;
}

.rul_cornerTL,.rul_cornerTR{border-bottom:1px solid gray}.rul_cornerBL,.rul_cornerTL{border-right:1px solid gray}.rul_cornerBR,.rul_cornerTR{right:1px;border-left:1px solid gray}.rul_cornerBL,.rul_cornerBR{bottom:1px;border-top:1px solid gray}.rul_wrapper{position:absolute;height:100%;width:100%;overflow:hidden;pointer-events:none}.rul_corner,.rul_line,.rul_ruler{position:absolute;pointer-events:all}.rul_wrapper *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.rul_ruler{display:block;border:1px solid gray;filter:blur(0);-webkit-filter:blur(0)}.rul_corner{background-color:#fff;z-index:10;cursor:pointer}.rul_corner:hover{background-color:#d3d3d3}.rul_cornerTL{top:0;left:0}.rul_cornerTR{top:1px}.rul_cornerBL{left:1px}.rul_ruler_Vertical{cursor:ew-resize;border-left:none}.rul_ruler_Horizontal{cursor:ns-resize;border-top:none}.rul_line{background-color:#56aff4;z-index:100000}.rul_line:hover{background-color:#458CC3}.rul_lineVer{top:0;bottom:0;width:1px}.rul_lineVer:hover{cursor:ew-resize}.rul_lineHor{right:0;left:0;height:1px}.rul_lineHor:hover{cursor:ns-resize}.rul_tooltip:after{background:#A0A0A0;border-radius:2px;color:#fff;font-size:10px;content:attr(data-tip);top:50%;left:50%;margin-top:1px;margin-left:1px;padding:2px 5px;position:absolute;z-index:10000;min-width:30px}.rul_tracker{height:1px;width:1px;background:#000;pointer-events:none}


.formatEditor #container {
    position: absolute;
    margin-left: 20px;
    margin-top: 20px;   
}

.formatEditor .image {
    background-image: url('../images/format_image.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 50%;
    background-position-y: 50%;
}


    #dropzone {
        position: relative;
        border: 2px dotted #e9e9e9;
        border-radius: 2px;
        color: white;
        font: bold 24px/200px arial;
        margin: 5px auto;
        text-align: center;
        width: 200px;
    }

    #dropzone.hover {
        border: 10px solid #0aa89e;
        color: #0aa89e;
    }

    #dropzone.dropped { 
        min-height: 200px;
        background:#ffffff;
        border: 0px solid #d4d4d4;
    }

    #dropzone div {
        height: 200px;
        position: absolute;
        top: 8;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #dropzone img {
        border-radius: 1px;
        vertical-align: center;
        max-width: 100%;
        max-height: 100%;
    }

    #dropzone [type="file"] {
        cursor: pointer;
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }