.cropper {
    position: relative;
    width: 100%;
    height: 550px;
    box-sizing: border-box;
    direction: ltr;
    touch-action: none;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");

    .cropper-box, .cropper-drag-box, .cropper-box-canvas, .cropper-drag-box, .cropper-face {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        user-select: none;
    }

    .cropper-box {
        overflow: hidden;

        .cropper-box-canvas {
            transform-origin: 0 0;

            img {
                position: relative;
                text-align: left;
                user-select: none;
                transform: none;
                max-width: none;
            }
        }
    }

    .cropper-move {
        cursor: move;
    }

    .cropper-modal {
        background: rgba(0, 0, 0, .5);
    }


    .cropper-crop-box {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        user-select: none;

        .cropper-view-box{
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            outline: 1px solid #39f;
            user-select: none;

            img{
                user-select: none;
                text-align: left;
                max-width: none;
                max-height: none;
                transform-origin: 0 0;
            }
        }

        .cropper-face{
            top: 0;
            left: 0;
            background-color: #fff;
            opacity: .1;
        }

        .crop-info{
            position: absolute;
            top: -21px;
            left: 0;
            min-width: 65px;
            text-align: center;
            color: #fff;
            line-height: 20px;
            background-color: rgba(0,0,0,.8);
            font-size: 12px;
        }

        .crop-line{
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            opacity: .1;

            &.line-w{
                top: -3px;
                left: 0;
                height: 5px;
                cursor: n-resize;
            }

            &.line-a{
                top: 0;
                left: -3px;
                width: 5px;
                cursor: w-resize;
            }

            &.line-s{
                bottom: -3px;
                left: 0;
                height: 5px;
                cursor: s-resize;
            }

            &.line-d{
                top: 0;
                right: -3px;
                width: 5px;
                cursor: e-resize;
            }
        }

        .crop-point{
            position: absolute;
            width: 8px;
            height: 8px;
            opacity: .75;
            background-color: #39f;
            border-radius: 100%;

            &.point1{
                top: -4px;
                left: -4px;
                cursor: nw-resize;
            }

            &.point2{
                top: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: n-resize;
            }

            &.point3{
                top: -4px;
                right: -4px;
                cursor: ne-resize;
            }

            &.point4{
                top: 50%;
                left: -4px;
                margin-top: -3px;
                cursor: w-resize;
            }

            &.point5{
                top: 50%;
                right: -4px;
                margin-top: -3px;
                cursor: e-resize;
            }

            &.point6{
                bottom: -5px;
                left: -4px;
                cursor: sw-resize;
            }

            &.point7{
                bottom: -5px;
                left: 50%;
                margin-left: -3px;
                cursor: s-resize;
            }

            &.point8{
                bottom: -5px;
                right: -4px;
                cursor: se-resize;
            }
        }
    }


}