.canvas{position:relative;}
/*
.canvas .mod-sidebar .select-colors{margin-top:12px;}
.canvas .mod-sidebar .select-colors li{display:inline-block;width:39px;height:39px;margin:6px;border-radius:50%;cursor:pointer;}
.canvas .mod-sidebar .select-colors li.active{position:relative;}
.canvas .mod-sidebar .select-colors li.active:before{content:'';position:absolute;top:5px;left:5px;width:25px;height:25px;border:2px solid #fff;border-radius:50%;}
.canvas .mod-sidebar .select-colors li.active:after{content:'';position:absolute;top:14px;left:15px;display:inline-block;border:solid #fff;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);}

.canvas .mod-sidebar .select-colors li:first-child{width:37px;height:37px;border:1px solid #dfdfdf;}
.canvas .mod-sidebar .select-colors li:first-child.active:before{width:23px;height:23px;border-color:#dfdfdf;}
.canvas .mod-sidebar .select-colors li:first-child.active:after{border-color:#dfdfdf;}
*/
.canvas .mod-sidebar .recent-color{display:inline-block;margin-left:10px;}
.canvas .mod-sidebar .recent-color li{display:inline-block;vertical-align:middle;width:18px;height:18px;margin-left:4px;border:1px solid #ccc;border-radius:50%;cursor:pointer;}

.canvas .layer_select_wrap .popover{padding:10px;}
.canvas .layer_select_wrap .box{position:relative;padding:15px;margin:5px 0;text-align:left;border:1px solid #dfdfdf;background:#fff;cursor:move;}
.canvas .layer_select_wrap .box .btn{position:absolute;top:8px;right:10px;}

.canvas .select-themes{width:calc(100% + 16px);margin-left:-8px;overflow:hidden;}
.canvas .select-themes .box{float:left;width:50%;}
.canvas .select-themes .box ul{margin:8px;border:1px solid #efefef;cursor:pointer;}
.canvas .select-themes .box ul li:nth-child(1){position:relative;padding-bottom:56.25%;}
.canvas .select-themes .box ul li:nth-child(1) img{position:absolute;top:0;left:0;width:100%;height:100%;}
.canvas .select-themes .box ul li:nth-child(2){padding:12px 2px;text-align:center;}

.canvas .canvas-section-outer{position:relative;z-index:1;min-height:50px;border:1px solid #dfdfdf;background:#fff;}
.canvas .canvas-section{position:relative;overflow:hidden;}
.canvas .canvas-contents .item{position:absolute;}
.canvas .canvas-contents .item .text{display:inline-block;vertical-align:top;line-height:1;color:#333;border-style:dotted;border-width:1px;box-sizing:border-box;outline:none;}
.canvas .canvas-contents .item .image{position:relative;display:inline-block;}
.canvas .canvas-contents .item .image:before{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #333;box-sizing:border-box;}
.canvas .canvas-contents .item .image img{max-width:none;}
.canvas .canvas-contents .item .item-btns{display:none;}
.canvas .canvas-contents .item .top-btns{position:absolute;z-index:1;top:-32px;left:50%;transform:translateX(-50%);padding:3px 6px;text-align:center;white-space:nowrap;background:#fff;border-radius:15px;}
.canvas .canvas-contents .item .top-btns span{display:inline-block;position:relative;vertical-align:top;width:18px;height:18px;margin:0 3px;cursor:pointer;}
.canvas .canvas-contents .item .top-btns span.remove:before{content:'';display:block;position:absolute;top:8px;left:2px;width:14px;height:2px;transform:rotate(45deg);background:#aaa;}
.canvas .canvas-contents .item .top-btns span.remove:after{content:'';display:block;position:absolute;top:8px;left:2px;width:14px;height:2px;transform:rotate(135deg);background:#aaa;}
.canvas .canvas-contents .item .top-btns span.move-forward:before{content:'';display:block;position:absolute;top:2px;left:2px;width:10px;height:10px;background:#007bff;box-shadow:4px 4px #aaa;}
.canvas .canvas-contents .item .top-btns span.move-backward:before{content:'';display:block;position:absolute;top:6px;left:6px;width:10px;height:10px;background:#aaa;box-shadow:-4px -4px #007bff;}
.canvas .canvas-contents .item .top-btns span.align-hcenter:before{content:'';display:block;position:absolute;top:2px;left:7px;width:3px;height:14px;background:#aaa;}
.canvas .canvas-contents .item .top-btns span.align-vcenter:before{content:'';display:block;position:absolute;top:8px;left:2px;width:14px;height:3px;background:#aaa;}
.canvas .canvas-contents .item .top-btns span.input-toggle{width:18px;height:6px;margin-top:6px;background:linear-gradient(90deg,#e7e7e7 30%,#007bff 0) 100%/6px 100% no-repeat,linear-gradient(90deg,#2b2026 6px,#fee7b3 7px 15px,#fecc2b 0);clip-path:polygon(0 50%,9px 0,100% 0,100% 100%,9px 100%);border-radius:0 5px 5px 0;transform:rotate(-45deg);}
.canvas .canvas-contents .item .top-btns span.input-toggle.non-editable{background:#aaa;}

.canvas .canvas-contents .item .resize-btns div{position:absolute;z-index:1;width:10px;height:10px;background:#999;border-radius:50%;cursor:pointer;}
.canvas .canvas-contents .item .resize-btns div:nth-child(1){top:-5px;left:-5px;}
.canvas .canvas-contents .item .resize-btns div:nth-child(2){top:-5px;right:-5px;}
.canvas .canvas-contents .item .resize-btns div:nth-child(3){bottom:-5px;left:-5px;}
.canvas .canvas-contents .item .resize-btns div:nth-child(4){bottom:-5px;right:-5px;}
.canvas .canvas-contents .item.selected .image:before{display:block;}
.canvas .canvas-contents .item.selected .item-btns{display:block;}
.canvas .canvas-contents .item.published .text{border-color:transparent !important;}
.canvas .canvas-section .angle-guide-line{position:absolute;z-index:1;top:50%;left:-100%;width:300%;height:1px;background-color:#007bff;transform:rotate(90deg);}
.canvas .canvas-section .draw-canvas-wrap{position:absolute;top:0;left:0;width:100%;height:100%;}

.canvas .canvas-section .background img{width:100%;}

.canvas .library-img .select-cat{padding:8px 0 6px 0;white-space:nowrap;overflow-x:auto;}
.canvas .library-img .select-cat .box{display:inline-block;width:65px;height:65px;cursor:pointer;}
.canvas .library-img .select-cat .box ul{margin:0 8px;}
.canvas .library-img .select-cat .box li:nth-child(1){height:46px;line-height:46px;}
.canvas .library-img .select-cat .box li:nth-child(1) img{max-width:100%;max-height:100%;}
.canvas .library-img .select-cat .box li:nth-child(2){padding-top:6px;text-align:center;overflow:hidden;width:auto;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;word-wrap:normal;}
.canvas .library-img .select-item{padding:8px 0 0 0;}
.canvas .library-img .select-item .box{cursor:pointer;}
.canvas .library-img .select-item .box ul{margin:8px;}
.canvas .library-img .select-item .box li:nth-child(1){height:46px;line-height:46px;text-align:center;}
.canvas .library-img .select-item .box li:nth-child(1) img{max-width:100%;max-height:100%;}

/*view*/
.canvas_image{border:1px solid #dfdfdf;}
.canvas_image img{width:100%;}

@media screen and (max-width:1740px) {
.canvas .select-themes .box{width:25%;}
}