.editor .hidd{display:none !important;}
.editor a{cursor:pointer;}
.editor a.dis{cursor:default;}


.editor {width: 100%;height: calc(100vh - 30px);min-width: 320px;min-height: 400px;position:relative;border:1px solid #0F3A30;background: #fff;}

.editor .top{position:absolute;z-index:10;top:0;left:0;right:0;height:60px;padding:5px;}
.editor .tools{position:absolute;z-index:8;top:60px;right:0;bottom:80px;width:260px;padding:0 10px;overflow:auto;border-left: 1px solid #0F3A30;}
.editor .tools.max{bottom:0;}
.editor .send{position:absolute;z-index:8;right:0;bottom:0;width:260px;height:80px;padding:0 10px;overflow:auto;border-left: 1px solid #0F3A30;display:flex;justify-content: center;align-items: center;}
.editor .screen{position:absolute;z-index:5;top:60px;left:0;right:260px;bottom:0;background:#eee;overflow:auto;text-align:center;white-space:nowrap;}
.editor .screen:after{content:"";display: inline-block;width: 0px;height: 100%;vertical-align: middle;}
.editor .screen .cnvcont{overflow: hidden;display: inline-block;vertical-align: middle;}
.editor .screen .cnvs{position:relative;transform-origin: top left;cursor:crosshair;background: #fff;}
.editor .screen .cnvs canvas{position:absolute;top:0;left:0;right:0;bottom:0;}

/*main menu*/
.editor .top{background:#0F3A30; display:flex;justify-content: space-between;align-items: center;}


/*icons*/
.editor a.ico{display:inline-block;width:50px; height:50px;text-decoration:none;border:0;opacity:.7;margin:2px;background:url(../icons.png?3) no-repeat;}
.editor a.ico.sel{opacity:1;}
.editor a.ico:hover{opacity:1;}
.editor a.ico.dis,.editor a.ico.dis:hover{opacity:.3;}
.editor a.ico.new{background: url(../icons/new.svg) no-repeat;}
.editor a.ico.paint{background: url(../icons/paint.svg) no-repeat;}
.editor a.ico.geom{background: url(../icons/sticker.svg) no-repeat;}
.editor a.ico.undo{background: url(../icons/undo.svg) no-repeat;}
.editor a.ico.redo{background: url(../icons/redo.svg) no-repeat;}
.editor a.ico.zoomin{background: url(../icons/zoomin.svg) no-repeat;}
.editor a.ico.zoomout{background: url(../icons/zoomout.svg) no-repeat;}
.editor a.ico.save{background: url(../icons/save.svg) no-repeat;}

.editor a.ico.rotL{background-position:-52px -102px;}
.editor a.ico.rotR{background-position:-102px -102px;}
.editor a.ico.flipV{background-position:-152px -102px;}
.editor a.ico.flipH{background-position:-202px -102px;}
.editor a.ico.picker{background-position:-203px -53px;}

.editor a.ico.paint1{background-position:-4px -4px;}
.editor a.ico.paint2{background-position:-54px -4px;}
.editor a.ico.paint3{background-position:-104px -4px;}
.editor a.ico.paint4{background-position:-154px -4px;}
.editor a.ico.paint5{background-position:-204px -4px;}
.editor a.ico.paint6{background-position:-254px -4px;}
.editor a.ico.paint7{background-position:-354px -4px;}
.editor a.ico.paint8{background-position:-404px -4px;}

.editor a.ico.geom1{background-position:-3px -205px;}
.editor a.ico.geom2{background-position:-53px -205px;}
.editor a.ico.geom3{background-position:-103px -205px;}
.editor a.ico.geom4{background-position:-153px -205px;}


.editor .tools>div {margin:0 0 15px 0;}
.editor .tools .capt{font-size:1.1em;font-weight:bold;padding:5px 0;}
.editor .tools a.ico{border:2px solid transparent;}
.editor .tools a.ico.sel{border:2px solid #39b54a;}

.editor .tools .panel{position:relative;}
.editor .tools .params>div {display:inline-block;vertical-align:middle;}
.editor .tools .w2 {width:50%;}
.editor .tools .w1 {width:100%;}
.editor .tools input {width:100%;}
.editor .tools input.num{width:60px;text-align:right;}
.editor .tools .params a.color {display:inline-block;width:36px;height:36px;vertical-align:middle;border:1px solid #0F3A30;}

.editor .tools .colors {margin: auto 11px;}
.editor .tools .colors>a {display:inline-block;width:36px;height:36px;vertical-align:middle;border:0;}

.editor .tools .block{display:flex;flex-wrap: nowrap;align-items: center;width:100%;margin:0 0 10px;}
.editor .tools .colors a.big {display:block;width:auto;flex-grow:1;height:50px;}
.editor .tools .colors a.picker {display:block;margin-left:10px;}

.editor .tools .colors>a.add {border:1px solid #0F3A30;line-height:34px; text-align:center;font-size: 36px;text-decoration: none;font-weight: normal;}

.editor .tools a.transparent {border:1px solid #0F3A30;background:url(../icons.png) -159px -58px no-repeat;}
.editor .tools .simplecolors{display:none;position: absolute;top: 42px;right: 0;background: #fff;border: 1px solid;padding: 10px;z-index: 1;}
.editor .tools .simplecolors>a {display:inline-block;width:36px;height:36px;vertical-align:middle;}
.editor .tools .simplecolors>a.transparent {display:block;margin-bottom:4px;}
.editor .tools .simplecolors.sel{display:block;}

.editor .tools .micon {display:none;}

.editor .send .mob{display:none;}
.editor .send .dsk{display:inline;}


@media screen and (max-width: 640px), 
       screen and (max-height: 400px) {
.editor .screen {right:60px;}
.editor .send {width:60px;padding: 0;}
.editor .send .mob{display:inline;}
.editor .send .dsk{display:none;}
	
.editor .tools {width:60px;overflow:visible;padding: 0;}
.editor .tools .box{position:relative; width:60px; height:60px;margin:0; border-bottom:1px solid #ccc;display:flex;justify-content:center;align-items:center;}
.editor .tools .box:hover{}
.editor .tools .panel{display:none;position:absolute;z-index:5;top:0;right:65px;width:260px;padding:10px;background:#fff;border:1px solid #0F3A30;box-shadow: 1px 1px 3px #CCC;}
.editor .tools .box.msel .panel{display:block;}
.editor .tools .box.msel .simplecolors{display:block;position:static;top:0;right: 0; margin-top:10px; /*background: #fff;border: 1px solid;padding: 10px;*/}

.editor .tools a.micon{display:block;width:50px; height:50px;background:url(../icons.png?2) no-repeat;border:2px solid transparent;}
.editor .tools a.micon:hover{}
.editor .tools a.micon.color{border:1px solid #0F3A30;background: none;}
.editor .tools a.micon.transparent {background:url(../icons.png) -149px -54px no-repeat;}

.editor .tools a.micon.opacity{background-position:-4px -54px;}
.editor .tools a.micon.thickness{background-position:-54px -54px;}
.editor .tools a.micon.tolerance{background-position:-104px -54px;}
.editor .tools a.micon.settings{background-position:-4px -104px;}

.editor .tools a.micon.paint1{background-position:-4px -4px;}
.editor .tools a.micon.paint2{background-position:-54px -4px;}
.editor .tools a.micon.paint3{background-position:-104px -4px;}
.editor .tools a.micon.paint4{background-position:-154px -4px;}
.editor .tools a.micon.paint5{background-position:-204px -4px;}
.editor .tools a.micon.paint6{background-position:-254px -4px;}
.editor .tools a.micon.paint7{background-position:-354px -4px;}
.editor .tools a.micon.paint8{background-position:-404px -4px;}

.editor .tools a.micon.geom1{background-position:-3px -205px;}
.editor .tools a.micon.geom2{background-position:-53px -205px;}
.editor .tools a.micon.geom3{background-position:-103px -205px;}
.editor .tools a.micon.geom4{background-position:-153px -205px;}


}




.editor .send a.btn {text-align:center;border-radius: 32px;}
.editor .send a.btn b{font-size:1.3em;}


@media screen and (max-width: 640px), 
       screen and (max-height: 400px) {
.editor .top a.ico{transform: scale(.7);margin: -6px;}
}


/*colorDLG*/
.colordlg {display:flex;}
.colordlg .interactive{padding:15px;}
.colordlg .saturation{width:250px;height:200px; position: relative;border:1px solid #ccc;background-image: linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0));}
.colordlg .hue{width:250px;height:32px;position: relative;border:1px solid #ccc;background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);}
.colordlg .pointer{position: absolute;z-index: 1;width: 28px;height: 28px;transform: translate(-50%,-50%);background-color: #fff;border: 2px solid #fff;box-shadow: 0 2px 4px #00000020;pointer-events: none;}
.colordlg .colorprev{width:80px;height:80px;border:1px solid #ccc;margin:15px 0 8px;}
.colordlg .colorset{width:80px;margin-bottom:8px;}
.colordlg .colorset span{display:block;}
.colordlg .colorset input{width:100%;text-align:right;}

@media screen and (max-width: 640px){
.colordlg {display:block;}
.colordlg .colorprev{width:100%;height:60px;}
.colordlg .colorset{width:100%;}
.colordlg .colorset span{display:inline-block;width:80px;}
.colordlg .colorset input{width:80px;}
}

/*geom edit*/
.editor .geomicons {position:absolute;z-index:5;top:0;left:0;min-height:100%;min-width:100%;}
.editor .geomicons .bgr{position:absolute;z-index:5;top:30px;left:60px;width:300px;height:300px;cursor:move;
background: linear-gradient(90deg, black 50%, white 50%), 
						linear-gradient(90deg, black 50%, white 50%), 
						linear-gradient(0deg, black 50%, white 50%), 
						linear-gradient(0deg, black 50%, white 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
animation: dash 20s linear infinite;}

@keyframes dash {
 to {background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;}
}

.editor .geomicons .point{position:absolute;z-index:6;width:12px; height:12px; border:1px solid #0F3A30;background:#fff;box-shadow: 1px 1px 3px #CCC;}
.editor .geomicons .p1{left:0;top:0;transform: translate(-6px,-6px);cursor:nwse-resize;}
.editor .geomicons .p2{right:0;top:0;transform: translate(6px,-6px);cursor:nesw-resize;}
.editor .geomicons .p3{left:0;bottom:0;transform: translate(-6px,6px);cursor:nesw-resize;}
.editor .geomicons .p4{right:0;bottom:0;transform: translate(6px,6px);cursor:nwse-resize;}
.editor .geomicons a{position:absolute;z-index:7;width:40px; height:40px; border:1px solid #0F3A30;border-radius:20px;background:#fff url(../icons.png) no-repeat;box-shadow: 1px 1px 3px #CCC;}
.editor .geomicons a.ok{background-position: -6px -157px;top: 50%;right:-30px;transform: translate(20px,-20px);}
.editor .geomicons a.cancel{background-position:-58px -157px;top: 50%;left:-30px;transform: translate(-20px,-20px);}
.editor .geomicons a.inner.ok{right:30px;}
.editor .geomicons a.inner.cancel{left:30px;}