.sketch-design{position:relative;margin:30px 0;border:solid 1px var(--form-border);height:100vh}.sketch-design.maximized{margin:0}.sketch-design-header,.sketch-design-footer{background-color:var(--basic-white);position:absolute;width:100%;padding:5px}.sketch-design-header .toolbar,.sketch-design-footer .toolbar{padding-right:4px;border-right:solid 1px var(--form-border)}.sketch-design-header .toolbar.right,.sketch-design-footer .toolbar.right{padding-left:4px;border:none;float:right}.sketch-design-header{height:42px;position:absolute;top:0;border-bottom:solid 1px var(--form-border);z-index:2}.sketch-design-footer{height:42px;position:absolute;bottom:0;z-index:2;background-color:var(--basic-white);border-top:solid 1px var(--form-border)}.sketch-design-left{background-color:var(--basic-white);border-right:solid 1px var(--form-border);padding:0;padding-top:50px;height:100%;width:41px;position:absolute}.sketch-design-left .toolbar{padding-bottom:4px;border-bottom:solid 1px var(--form-border)}.sketch-design-left .toolbar button{display:block;margin:0;width:40px;height:40px}.sketch-design-content{height:100%;padding-bottom:42px}.sketch-design-viewport{overflow:hidden;background-color:var(--light-grey);width:100%;height:100%;padding-top:42px;padding-left:42px}.sketch-design-ruler{overflow:hidden;position:relative;background-color:var(--basic-white)}.sketch-design-ruler.horizontal{width:100%;height:20px;z-index:1}.sketch-design-ruler.vertical{width:20px;height:100%;margin-top:-20px;float:left}.sketch-design-ruler canvas{position:absolute}.sketch-design-ruler .hover-point{position:absolute}.sketch-design-ruler .hover-point.x{width:0;height:100%;border-left:solid 1px red}.sketch-design-ruler .hover-point.y{width:100%;height:0;border-top:solid 1px red}.sketch-design-workspace{position:relative;width:calc(100% - 20px);height:calc(100% - 20px);float:left;overflow:scroll}.sketch-design-workspace canvas{background-color:var(--basic-white);box-shadow:2px 3px 5px 0 rgb(0 0 0 / .75)}.sketch-design #selectionArea:hover{cursor:url(/wp-content/plugins/online-designer/images/arrows-move.svg) 8 8,auto}.sketch-design #selectionArea .scale{position:absolute;width:12px;height:12px;background-color:#4169e1;border:solid 1px #333}.sketch-design #selectionArea .scale.lt{left:-6px;top:-6px}.sketch-design #selectionArea .scale.lt:hover{cursor:nw-resize}.sketch-design #selectionArea .scale.rt{right:-6px;top:-6px}.sketch-design #selectionArea .scale.rt:hover{cursor:ne-resize}.sketch-design #selectionArea .scale.rb{right:-6px;bottom:-6px}.sketch-design #selectionArea .scale.rb:hover{cursor:se-resize}.sketch-design #selectionArea .scale.lb{left:-6px;bottom:-6px}.sketch-design #selectionArea .scale.lb:hover{cursor:sw-resize}.sketch-design #selectionArea .scale.t{opacity:0;width:100%;top:-2px}.sketch-design #selectionArea .scale.t:hover{cursor:n-resize}.sketch-design #selectionArea .scale.r{opacity:0;height:100%;right:-2px}.sketch-design #selectionArea .scale.r:hover{cursor:e-resize}.sketch-design #selectionArea .scale.b{opacity:0;width:100%;bottom:-2px}.sketch-design #selectionArea .scale.b:hover{cursor:s-resize}.sketch-design #selectionArea .scale.l{opacity:0;height:100%;left:-2px}.sketch-design #selectionArea .scale.l:hover{cursor:w-resize}.sketch-design #selectionArea .scale.p-ne:hover{cursor:ne-resize}.sketch-design #selectionArea .scale.p-e:hover{cursor:e-resize}.sketch-design #selectionArea .scale.p-se:hover{cursor:se-resize}.sketch-design #selectionArea .scale.p-s:hover{cursor:s-resize}.sketch-design #selectionArea .scale.p-sw:hover{cursor:sw-resize}.sketch-design #selectionArea .scale.p-w:hover{cursor:w-resize}.sketch-design #selectionArea .scale.p-n:hover{cursor:n-resize}.sketch-design #selectionArea .scale.p-nw:hover{cursor:nw-resize}.sketch-design #selectionArea .rotate{position:absolute;left:calc(50% - 6px);top:-8px;width:14px;height:14px;background-color:#fdf900;border:solid 1px #333;border-radius:7px;z-index:2}.sketch-design #selectionArea .rotate:hover{cursor:url(/wp-content/plugins/online-designer/images/arrow-clockwise.svg) 8 8,auto}.sketch-design #selectionArea .guideline{position:absolute;left:50%;bottom:50%;width:0;height:75%;border-left:dashed 1px #4169e1;transform:translateX(-50%);z-index:1;display:none}.sketch-design #selectionArea .guideline.show{display:block}.sketch-design .toolbar{display:inline-block}.sketch-design .toolbar button{background:#fff0;padding:6px}.sketch-design .toolbar button i{color:var(--footer-text);font-size:18px}.sketch-design .toolbar button:hover{background-color:#eee}.sketch-design .toolbar button:hover i{color:var(--dark-grey)}.sketch-design .toolbar button:disabled{cursor:not-allowed}.sketch-design .toolbar button:disabled i{color:#eee}.sketch-design .toolbar button:disabled:hover{background:none}.sketch-design .toolbar button:disabled:hover i{color:#eee}.sketch-design .modal-body .nav-tabs{margin:0}.sketch-design .modal-body .nav-tabs .nav-item{margin-right:2px}.sketch-design .modal-body .nav-tabs button.nav-link{background-color:#ccc}.sketch-design .modal-body .nav-tabs button.nav-link.active{background-color:#fff}.sketch-design .modal-body .nav-tabs button.nav-link:focus{outline:none}.sketch-design .modal-body .tab-content{padding:15px;border:1px solid #dee2e6;border-top:none}.sketch-design .modal-body .tab-content .tab-pane{height:65vh;overflow:scroll}.sketch-design .modal-body .tab-content .tab-pane.active{position:relative}.sketch-design .modal-body .tab-content .tab-pane.active .btn-close{position:absolute;right:15px}.sketch-design .modal-body .uploadForm{position:relative;width:150px;height:150px}.sketch-design .modal-body .uploadForm .uploadImage{width:1px;height:1px}.sketch-design .modal-body .image-collection{display:flex;flex-wrap:wrap}.sketch-design .modal-body .image-collection .item{cursor:pointer;width:150px;height:150px;border:solid 1px #ccc;margin:5px;display:flex}.sketch-design .modal-body .image-collection .item img{max-width:95%;max-height:95%;margin:auto}.sketch-design .modal-body .image-collection .item.selected{border:solid 4px #aed224}.sketch-design .modal-body .image-collection .item.add-image img{position:absolute;max-width:50%;max-height:50%;left:50%;top:50%;transform:translate(-50%,-50%)}