.painter{position:relative;}

.canvas_area{margin-left:65px;border:1px solid #dcdcdc;overflow: hidden;display:inline-block;    background-color: #fff;position:relative;}
.canvas_area_close{float:right;width:45px;height:45px;line-height:45px;text-align:center;color:#333;font-size:25px;cursor:pointer;}
.canvas_wrapper{position:relative;overflow: hidden;background:none no-repeat center top / 100% 100%;}
.top_area{height:45px;background-color:#f0f0f0;}
.painter .top_bar,.erase_bar{height:45px;text-align:center;background-color:#f3f3f3;}
.bold_bar{cursor:pointer;display: inline-block;margin: 10px auto;width:80px;background-color:transparent;height:20px;box-sizing: border-box;}
.bold_bar3{border-bottom:3px solid #929292;}
.bold_bar5{border-bottom:5px solid #929292;}
.bold_bar8{border-bottom:8px solid #929292;}
.bold_bar12{border-bottom:12px solid #929292;}
.bold_bar20{border-bottom:20px solid #929292;}
.bold_bar_selected{border-bottom-color:#00cc99;}
.icon_erase{position:absolute;border:1px solid #333;}

.erase_bar_item{background-color: #929292;margin: 0 10px;display: inline-block;vertical-align: middle;}
.bar_item12{width:12px;height:12px;}
.bar_item18{width:18px;height:18px;}
.bar_item24{width:24px;height:24px;}
.bar_item30{width:30px;height:30px;}
.bar_item36{width:36px;height:36px;}

.erase_bar .bold_bar_selected{background-color:#00cc99;}
.menu_bar{width:55px;position:absolute;left:0;background-color:#f2f2f2;}
.painter .bar_item{width:45px;height:45px;border-radius: 10px;margin:5px;cursor:pointer;background:none no-repeat center center ;}
.painter .bar_pencil{background-image:url(../images/input.png);}
.painter .bar_pencil_selected,.painter .bar_pencil:hover{background-image:url(../images/input_hover.png);background-color:#00cc99;}
.painter .bar_erase{background-image:url(../images/erase.png);}
.painter .bar_erase_selected,.painter .bar_erase:hover{background-image:url(../images/erase_hover.png);}

.painter .bar_itext{background-image:url(../images/itext.png);}
.painter .bar_itext_selected,.painter .bar_itext:hover{background-image:url(../images/itext_hover.png);}
.painter .bar_undo{background-image:url("../images/undo.png");}
.painter .bar_undo:hover{background-image:url("../images/undo_hover.png");}
.painter .bar_redo{background-image:url("../images/redo.png");}
.painter .bar_redo:hover{background-image:url("../images/redo_hover.png");}
.painter .bar_save{background-image:url(../images/save.png);margin-top:100px;}
.painter .bar_save:hover{background-image:url(../images/save_hover.png);}
.painter .bar_upload{background-image:url(/edu/course/images/upload_green.png);}

.drag_div{position:absolute;right:0;bottom:0;width:25px;height:25px;cursor:nw-resize;background:url(../images/drag.png) no-repeat center center / 100% 100%;}

.tool_bar{height:30px;padding-top: 8px!important;}
.btn-toolbar{margin-top:5px;margin-left:0;}
.jpainter_editor{position:absolute;overflow:hidden;display:none;}
.jpainter_editor .w-e-text{overflow: hidden;}
.ele_editor{display:none;}
/**itext**/
.itext_wrapper{position:absolute;}
.jpainter_mode_itext .itext_wrapper{border: 1px solid #dcdcdc;}
.draw-area__dots{
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:1px solid #dcdcdc;
}
.draw-area__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #FFF;
    border: 1px solid #333;

}

.draw-area__dot--tl {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: nw-resize;
}

.draw-area__dot--t {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: n-resize;
}

.draw-area__dot--tr {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    cursor: ne-resize;
}

.draw-area__dot--r {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    cursor: e-resize;
}

.draw-area__dot--br {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    cursor: se-resize;
}

.draw-area__dot--b {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    cursor: s-resize;
}

.draw-area__dot--bl {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    cursor: sw-resize;
}

.draw-area__dot--l {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: w-resize;
}
.draw-area__dot--rotate{top: -30px;left: 50%;transform: translate(-50%, -50%); cursor: n-resize;}
.draw-area__dot--rotate::after{content:" ";position:absolute;height:20px;width:1px;background-color:#dcdcdc;top:10px;left:3px;}
.draw-area__dot--drag{cursor:all-scroll;top:-15px;right:-15px;background-color:#333;}
.painter .itext_input{position:absolute;z-index:4;width:100%;height:100%;top:0;left:0;    word-break: break-all;padding:0 10px;overflow: hidden;cursor:pointer;}
.canvas_area_seq{display:none;position: absolute;font-size: 20px;top: 150px;right: 20px;width: 50px;height: 35px;line-height: 35px;text-align: center;}
.jpainter_upload_pic{display:none;position:absolute;top:0;left:0;cursor:pointer;width:100%;height:100%;text-align: center;background-color: #fff;}