.picture-view{background-color:#fff;margin:0;overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.picture-view #picture{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;display:block}.picture-view .slider{bottom:30px;height:200px;left:30px;position:absolute;width:170px}.picture-view .auto-compare-rule{position:absolute;right:30px;top:20px}.picture-view .hover{left:0;pointer-events:none;position:absolute;top:0}.picture-view .move{pointer-events:all}.picture-view .move .top{top:0}.picture-view .move .bottom{bottom:0}.picture-view .move .left{left:0}.picture-view .move .right{right:0}.picture-view .move .top.left{cursor:nw-resize}.picture-view .move .top.right{cursor:ne-resize}.picture-view .move .bottom.left{cursor:sw-resize}.picture-view .move .bottom.right{cursor:se-resize}.picture-view .move .bottom,.picture-view .move .top{cursor:ns-resize;height:5px}.picture-view .move .left,.picture-view .move .right{cursor:ew-resize;width:5px}.picture-view .move .center{cursor:move}.demo-container{height:100vh;width:100vw}.demo-container .demo-picture{width:calc(100% - 50px)}.demo-container .demo-toolbar{background-color:#363636;font-size:40px;height:100%;width:50px}.demo-container .demo-toolbar .icon{cursor:pointer;margin:5px}.demo-container .demo-toolbar .icon svg{display:block}.demo-container .demo-toolbar .icon .bg{fill:#3a53b7}.demo-container .demo-toolbar .icon .line{stroke:#f5f5f5}.demo-container .demo-toolbar .icon .content{fill:#f5f5f5}.demo-container .demo-toolbar .icon.active .bg{fill:#869df8}.demo-container .demo-toolbar .icon.active .line{stroke:#f5f5f5}.demo-container .demo-toolbar .icon.active .content{fill:#f5f5f5}.demo-container .demo-toolbar .previewButton .previewIcon{display:block}.demo-container .demo-toolbar .previewButton .unPreviewIcon,.demo-container .demo-toolbar .previewButton.hidden .previewIcon{display:none}.demo-container .demo-toolbar .previewButton.hidden .unPreviewIcon{display:block}.demo-container .realPreviewImg-container{left:0;top:0;width:500px;z-index:2}.demo-container .realPreviewImg-container img{max-height:100%;max-width:100%}.picture-view .slider{pointer-events:none}.picture-view .slider .picture-button{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;height:30px;text-align:center;width:30px;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;cursor:pointer;font-size:25px;justify-content:center;pointer-events:auto}.picture-view .slider .vertical-slider{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0 4px;position:relative;-ms-touch-action:none;touch-action:none;width:12px}.picture-view .slider .vertical-slider .slider-rail{background-color:#f5f5f5;height:100%;pointer-events:auto}.picture-view .slider .vertical-slider .slider-rail,.picture-view .slider .vertical-slider .slider-track{border-radius:2px;position:absolute;-webkit-transition:background-color .3s;-o-transition:background-color .3s;transition:background-color .3s;width:4px}.picture-view .slider .vertical-slider .slider-track{background-color:#3a53b7;bottom:0;left:auto}.picture-view .slider .vertical-slider .slider-handle{background-color:#e33f3f;border:2px solid #c1b5f8;-webkit-box-shadow:0;box-shadow:0;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;height:6px;margin-left:-7px;pointer-events:auto;position:absolute;-webkit-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);-webkit-transition:border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18,.89,.32,1.28);transition:border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18,.89,.32,1.28);-o-transition:border-color .3s,box-shadow .6s,-o-transform .3s cubic-bezier(.18,.89,.32,1.28);transition:border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28);transition:border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28),-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18,.89,.32,1.28),-o-transform .3s cubic-bezier(.18,.89,.32,1.28);width:18px}.picture-view .slider .vertical-slider .slider-handle-tag{left:20px;position:absolute;-webkit-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%)}.picture-view .slider .vertical-slider .tag-content{background-color:#3a53b7;color:#fff;font-size:12px;pointer-events:auto;text-align:center;width:50px}.picture-view .slider .vertical-slider .slider-handle:focus{border-color:#454545;-webkit-box-shadow:0 0 0 5px #1890ff1f;box-shadow:0 0 0 5px #1890ff1f;outline:none}.picture-view .slider .vertical-slider .slider-tags-left{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:100%;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;right:20px}.picture-view .slider .vertical-slider:hover .slider-rail{background-color:#666}.picture-view .slider .vertical-slider:hover .slider-track{background-color:#3a53b7}.picture-view .slider .triangle-left{border-right:15px solid #3a53b7}.picture-view .slider .triangle-left,.picture-view .slider .triangle-right{border-bottom:7px solid transparent;border-top:7px solid transparent;height:0;width:0}.picture-view .slider .triangle-right{border-left:15px solid #3a53b7}.picture-view .preview{background-color:#333;bottom:0;height:300px;right:0;width:300px;z-index:2}.picture-view .preview .preview-canvas-parent-out{height:100%;padding:5px;pointer-events:none;width:100%}.picture-view .preview .preview-canvas-parent{height:100%;max-height:100%;max-width:100%;pointer-events:none}.picture-view .preview .preview-canvas{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;right:0;top:0}.picture-view .preview .preview-active{bottom:0;left:0;margin:auto;pointer-events:auto;right:0;top:0}.picture-view .preview .preview-move .line{background-color:#fff}.picture-view .preview .preview-move .top{top:0}.picture-view .preview .preview-move .bottom{bottom:0}.picture-view .preview .preview-move .left{left:0}.picture-view .preview .preview-move .right{right:0}.picture-view .preview .preview-move .top.left{cursor:nw-resize}.picture-view .preview .preview-move .top.right{cursor:ne-resize}.picture-view .preview .preview-move .bottom.left{cursor:sw-resize}.picture-view .preview .preview-move .bottom.right{cursor:se-resize}.picture-view .preview .preview-move .bottom,.picture-view .preview .preview-move .top{cursor:ns-resize;height:5px}.picture-view .preview .preview-move .left,.picture-view .preview .preview-move .right{cursor:ew-resize;width:5px}.picture-view .preview .preview-move .center{cursor:move}.unvisibility{visibility:hidden}