.wev-drawing-win{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width:100%;
	background-color:#fff;
	z-index: 100000;
	display: none;
}
.slideup-out {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideouttobottom;
	-webkit-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideouttobottom;
	animation-duration: 250ms;
}
.slideup-in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	-webkit-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideinfrombottom;
	animation-duration: 250ms;
}
@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@keyframes slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
@keyframes tipFadeInOut {
    0% { opacity: 0; z-index: 1;}
    10% { opacity: 1; z-index: 1;}
    90% {opacity: 1; z-index: 1;}
    100% {opacity: 0; z-index: 0;}
}
.wev-drawing-tip {
    position: absolute;
    top: 5px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #eaf8fe;
    border: 1px solid #d5f1fd;
    box-shadow: 1px 1px 5px #bacfd8;
    color: #666;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.9em;
    opacity: 0;
}
.wev-drawing-tip span {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}
.wev-drawing-tip span:before, 
.wev-drawing-tip span:after {
    position: absolute;
    top: -1px;
    left: 10px;
    content: ' ';
    height: 1em;
    width: 1.5px;
    background-color: #666;
}
.wev-drawing-tip span:before {
  transform: rotate(45deg);
}
.wev-drawing-tip span:after {
  transform: rotate(-45deg);
}
.wev-drawing-tip.show {
    animation: tipFadeInOut 5s ease-in-out;
    animation-fill-mode: both;
}
.wev-drawing-header, .wev-drawing-footer {
	position: absolute;
    text-align: center;
    left: 0px;
    right: 0px;
    color: #fff;
    font-size: 16px;
}
.wev-drawing-header{
	top: 0px;
    background-color: var(--themeColor, #0161c9);
    height: 26px;
    padding: 5px 0;
}

.wev-drawing-header .title{
	line-height: 36px;
	text-align: center;
}
.wev-drawing-header a{
	cursor: pointer;
    float:right;
    height: 26px;
    font-size: 14px;
   	width:26px;
   	margin-right: 3px;
   	background-repeat: no-repeat;
   	background-position: center;
   	margin:0 5px;
}
.wev-drawing-header a.selected{
	background-color: #3385ff;
    border-radius: 5px;
}
.wev-drawing-header a.close-btn{
	float: left;
    background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/1.png");
    background-size: 32px;
}
.wev-drawing-header a.refresh-btn{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/2.png");
	background-size: 22px;
}
.wev-drawing-header a.pen-btn{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/3.png");
	background-size: 18px 18px;
}
.wev-drawing-header a.undo-btn{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/undo.png");
	background-size: 18px 18px;
}
.wev-drawing-header a.eraser-btn{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/eraser.png");
	background-size: 18px 18px;
}
.wev-drawing-header a.save-btn{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/4.gif");
	background-size: 16px 16px;
}

.wev-drawing-footer{
	background-color: transparent;
	bottom: calc(25% - 18px);
    transform: translateY(50%);
    height:100px;
}

.wev-drawing-footer a.save-btn{
	background-image: url('/mobilemode/mobile/images/plugin/imgdrawing/4.gif');
	background-size: 45px 45px;
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--themeColor, #017afd);
    border-radius: 100px;
}

.wev-drawing-footer a.save-btn:active{
	background-color: #0161c9;
}

.wev-drawing-win.imgdrawing .wev-drawing-footer,
.wev-drawing-win.handwriting .wev-drawing-header a.save-btn{
	display:none;
}

.wev-drawing-content{
	position: absolute;
    top: 36px;
    padding-top: 34px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color:rgba(0,0,0,0.1);
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.wev-drawing-win.imgdrawing .wev-drawing-content{
	background-color:#000;
}
.wev-drawing-win.handwriting .wev-drawing-content canvas{
	border: 1px dashed #ddd;
    left: 2px;
    border-radius:5px;
    top: 36px;
    position: absolute;
}

.wev-drawing-content._loading:after {
    content: 'loading...';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
    color: #999;
    font-size: 14px;
}
.wev-drawing-content canvas{
	cursor: crosshair;
    background-color: #fff;
}
.wev-drawing-config, .wev-eraser-config {
    position: absolute;
    top: 36px;
    padding: 4px 10px;
    background-color: #eaeef4;
    left: 0px;
    right: 0px;
    overflow: hidden;
    display: none;
}
.wev-drawing-config:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 24px;
    background: #c0c0c0;
    top: 6px;
    left: 173px;
}

.wev-drawing-config:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 24px;
    background: #c0c0c0;
    top: 6px;
    left: 87px;
}

.wev-drawing-config > div, .wev-eraser-config > div {
    float: left;
    height: 24px;
    width: 24px;
    box-sizing: border-box;
    position: relative;
    margin-top:2px;
}
.wev-drawing-config > div.selected, .wev-eraser-config > .wev-eraser-point.selected {
    border: 1px solid #808080;
}
.wev-drawing-config > div:after, .wev-eraser-config > .wev-eraser-point:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.wev-drawing-point, .wev-eraser-point{
	margin-right: 2px;
}
.wev-drawing-point:after, .wev-eraser-point:after{
	background-color: #2f8ddd;
    border-radius: 2.25em;
}
.wev-drawing-graph:nth-child(1):after{
	width: 14px;
    height: 12px;
    border: 1px solid #2690e3;
}
.wev-drawing-graph:nth-child(2):after{
	width: 14px;
    height: 12px;
    border: 1px solid #2690e3;
    border-radius: 14px;
}

.wev-drawing-graph:nth-child(3):after{
	background-image: url("/mobilemode/mobile/images/plugin/imgdrawing/edit.png");
	background-size: 14px 14px; 
}

.wev-drawing-point:nth-child(4){
	margin-left: 10px;
}

.wev-drawing-point:nth-child(4):after{
	width: 2px;
   	height: 2px;
}
.wev-drawing-point:nth-child(5):after{
	width: 4px;
   	height: 4px;
}
.wev-drawing-point:nth-child(6):after{
	width: 6px;
   	height: 6px;
}

.wev-eraser-config > div.wev-eraser-point:nth-child(1):after{
	width: 8px;
   	height: 8px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(2):after{
	width: 10px;
   	height: 10px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(3):after{
	width: 12px;
   	height: 12px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(4):after{
	width: 14px;
   	height: 14px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(5):after{
	width: 16px;
   	height: 16px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(6):after{
	width: 18px;
   	height: 18px;
}
.wev-eraser-config > div.wev-eraser-point:nth-child(7):after{
	width: 20px;
   	height: 20px;
}

.wev-eraser-config>a.wev-eraser-clean{
	width: 30px;
    margin-left: 10px;
    font-size: 14px;
    height: 18px;
    line-height: 24px;
    color: #999;
    background: url("/mobilemode/mobile/images/plugin/imgdrawing/del-2.png") no-repeat 12px center;
    background-size: 18px 18px;
    margin-top: 5px;
    border-left: 1px solid #aaa;
    position: absolute;
}

.wev-drawing-color{
	margin-right: 6px;
}
.wev-drawing-color:nth-child(7){
	margin-left: 10px;
}
.wev-drawing-color:nth-child(7):after{
	background-color: #000;
}
.wev-drawing-color:nth-child(8):after{
	background-color: red;
}
.wev-drawing-color:nth-child(9):after{
	background-color: #fff;
}
.wev-drawing-color:nth-child(10):after{
	background-color: green;
}
.wev-drawing-color:nth-child(11):after{
	background-color: #ffff00;
}
.wev-drawing-color:nth-child(12):after{
	background-color: #f31bf3;
}
.wev-drawing-color:after{
	border: 1px solid #808080;
}
.wev-drawing-color.selected:after{
	width: 18px;
	height: 18px;
	border: none;
}