@charset "utf-8";

#zwibbler{position: absolute;left: 0px;top: 0px;width:100%;height:100%;}

.snipping-slice{
    position:absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    border: 0px solid red;
    z-index:9999;

    display: flex;
    justify-content: center;
}

.wrap_box{ 
    background: #ffffff;
    /* position: fixed;
    top: 20%;
    left: 0;
    right: 0; */
    width: 680px;
    height: 57px;
    border-radius: 5px;
    z-index: 100;
}

@media screen and (max-width: 540px) {
    .wrap_box {
       width: 340px;
       height: 110px;
    }
}


/*笔刷*/
.brush_box{z-index:20;background:url(../assets/color-underlay.png);background-repeat:no-repeat; background-size:100% 100%;width: 270px;height: 65px;left: 42%;top: 60px;position:absolute;}
.brush_box .brush_width{width:100px;height:50px;border:0px solid red;margin-top:13px;}
.brush_box .brush_width i.current{background-color:#091d25} 
.brush_box .brush_width i{background-color: #cdcdcd;position: absolute;}
.brush_box .brush_width .brush_min{width: 6px;height: 6px;border-radius: 6px 6px;top: 38px;left: 12px;}
.brush_box .brush_width .brush_midd{width: 8px;height: 8px;border-radius: 8px 8px;top: 37px;left: 46px;}
.brush_box .brush_width .brush_max{width: 10px;height: 10px;border-radius: 10px 10px;top: 36px;left: 76px;}
.brush_box .brush_color{width:160px;height:50px;float:right;margin-top:-48px;}
.brush_box .brush_color .show_color{width: 50px;height: 50px;float: left;}
.brush_box .brush_color i{border-radius: 3px;}
.brush_box .brush_color .show_color i{width: 37px;height: 37px;float: left;margin-top: 6px;margin-left: 3px;border:1px solid #cdcdcd}
.brush_box .brush_color .select_color{width: 110px;height: 50px;float: left;}
.brush_box .brush_color .select_color i{width: 12px;height: 12px;float: left;margin-top: 5px;margin-right: 2px;border:1px solid #cdcdcd;padding:2px;cursor: pointer;}
.brush_box .brush_color .select_color i:hover{border:1px solid #cecece;}

/*文本*/
.text_box{z-index:20;background:url(../assets/color-underlay.png);background-repeat:no-repeat; background-size:100% 100%;width: 270px;height: 65px;left: 58%;top: 60px;position:absolute;}
.text_box .text_width{width:100px;height:50px;border:0px solid red;margin-top:13px;}
.text_box .text_width i{background-color: #cdcdcd;position: absolute;}
.text_box .text_width .text_min{background: url(../assets/小字.svg) no-repeat center;width: 16px;height: 20px;top: 31px;left: 20px;border:0px solid red;}
.text_box .text_width .text_min.current{background: url(../assets/small-chat-1.svg) no-repeat center}
.text_box .text_width .text_midd{background: url(../assets/cn-chat.svg) no-repeat center;width: 20px;height: 26px;top: 26.5px;left: 46px;border:0px solid red;}
.text_box .text_width .text_midd.current{background: url(../assets/cn-chat-1.svg) no-repeat center}
.text_box .text_width .text_max{background: url(../assets/big-chat.svg) no-repeat center;width: 24px;height: 32px;top: 22px;left: 76px;border:0px solid red;}
.text_box .text_width .text_max.current{background: url(../assets/big-chat-1.svg) no-repeat center}
.text_box .text_color{width:160px;height:50px;float:right;margin-top:-48px;}
.text_box .text_color .show_color{width: 50px;height: 50px;float: left;}
.text_box .text_color .show_color i{width: 37px;height: 37px;float: left;margin-top: 6px;margin-left: 3px;border:1px solid #cdcdcd}
.text_box .text_color .select_color{width: 110px;height: 50px;float: left;}
.text_box .text_color .select_color i{width: 12px;height: 12px;float: left;margin-top: 5px;margin-right: 2px;border:1px solid #cdcdcd;padding:2px;cursor: pointer;}
.text_box .text_color .select_color i:hover{border:1px solid #cecece;}

/*工具*/
.tools{height:57px;width:100%;}

.tools ul{width:auto;text-align: center;height: 50px;padding: 0;margin: 0;margin-top: 6px;}
.tools li{display:inline}
.tools li em{cursor:pointer;width: 48px;height: 45px;display: inline-block;}
.tools li em.line{background: url(../assets/arrow.svg) no-repeat center}
.tools li em.line.current{background: url(../assets/arrow-1.svg) no-repeat center}
.tools li em.graph{background: url(../assets/frame.svg) no-repeat center}
.tools li em.graph.current{background: url(../assets/frame-1.svg) no-repeat center}
.tools li em.brush{background: url(../assets/draw-line.svg) no-repeat center}
.tools li em.brush.current{background: url(../assets/draw-line-1.svg) no-repeat center}
.tools li em.text{background: url(../assets/text.svg) no-repeat center}
.tools li em.text.current{background: url(../assets/text-1.svg) no-repeat center}
.tools li em.pick{background: url(../assets/select.svg) no-repeat center}
.tools li em.pick.current{background: url(../assets/select-1.svg) no-repeat center}
.tools li em.fillcolor{background: url(../assets/color-style.svg) no-repeat center}
.tools li em.fillcolor.current{background: url(../assets/color-style-1.svg) no-repeat center}
.tools li em.textcolor{background: url(../assets/text-color.svg) no-repeat center}
.tools li em.textcolor.current{background: url(../assets/text-color-1.svg) no-repeat center}
.tools li em.undo{background: url(../assets/revoke.svg) no-repeat center}
.tools li em.undo.current{background: url(../assets/revoke-1.svg) no-repeat center}
.tools li em.redo{background: url(../assets/forward.svg) no-repeat center}
.tools li em.redo.current{background: url(../assets/forward-1.svg) no-repeat center}
.tools li em.save{background: url(../assets/save.svg) no-repeat center}
.tools li em.save.current{background: url(../assets/save.svg) no-repeat center}
.tools li em.cancel{background: url(../assets/del.svg) no-repeat center}
.tools li em.cancel.current{background: url(../assets/del.svg) no-repeat center}
.tools li em.graph1.current {background: url(../assets/circle-1.svg) no-repeat center;}
.tools li em.graph1 {background: url(../assets/circle.svg) no-repeat center;}