.rcrop-wrapper {
    position: relative;
    display: inline-block;
    max-width: inherit;
    border-radius: 3px;
}

    .rcrop-wrapper img {
        display: block;
    }

    .rcrop-wrapper .rcrop-croparea {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        /*
     .rcrop-handler{
         position: absolute;
         width: $handlerSize;
         height: $handlerSize;
         z-index:1001;
        
         &:after{
            content: "";
            background: rgba(0,0,0,.5);
            border : 1px solid rgba(255,255,255,.5);
            position:absolute;
            width: $handlerAfterSize;
            height : $handlerAfterSize;
            top: 50%;
            margin-top: -$handlerAfterSize/2;
            left: 50%;
            margin-left: -$handlerAfterSize/2;
            @include box-sizing(border-box);
         }
         
         &.rcrop-handler-top{
             top: -$handlerSize/2;
             left: 50%;
             margin-left: -$handlerSize/2;
             cursor : n-resize;
         }
         &.rcrop-handler-top-left{
             top: -$handlerSize/2;
             left: -$handlerSize/2;
             cursor : nw-resize;
         }
         &.rcrop-handler-top-right{
             top: -$handlerSize/2;
             right: -$handlerSize/2;
             cursor : ne-resize;
         }
         &.rcrop-handler-left{
             margin-top: -$handlerSize/2;
             top:50%;
             left: -$handlerSize/2;
             cursor : w-resize;
         }
         &.rcrop-handler-right{
             margin-top: -$handlerSize/2;
             top:50%;
             right: -$handlerSize/2;
             cursor : e-resize;
         }
         &.rcrop-handler-bottom{
             bottom: -$handlerSize/2;
             left: 50%;
             margin-left: -$handlerSize/2;
             cursor : s-resize;
         }
         &.rcrop-handler-bottom-left{
             bottom: -$handlerSize/2;
             left: -$handlerSize/2;
             cursor : sw-resize;
         }
         &.rcrop-handler-bottom-right{
             bottom: -$handlerSize/2;
             right: -$handlerSize/2;
             cursor : se-resize;
             &:after{
                 @media screen and (max-width: $break-small) {
                     height : $handlerAfterSize * 2;
                     width : $handlerAfterSize * 2;
                     margin-left: -$handlerAfterSize;
                     margin-top : -$handlerAfterSize;
                 }
             }
         }
     }
     */
    }

        .rcrop-wrapper .rcrop-croparea .rcrop-croparea-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid white;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    .rcrop-wrapper .rcrop-outer-wrapper {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .rcrop-wrapper .rcrop-outer {
        background: #fff;
        position: absolute;
    }

        .rcrop-wrapper .rcrop-outer.rcrop-outer-left {
            height: 100%;
            left: 0;
            top: 0;
        }

        .rcrop-wrapper .rcrop-outer.rcrop-outer-right {
            height: 100%;
            right: 0;
            top: 0;
        }

        .rcrop-wrapper .rcrop-outer.rcrop-outer-top {
            top: 0;
            width: 100%;
        }

        .rcrop-wrapper .rcrop-outer.rcrop-outer-bottom {
            bottom: 0;
            width: 100%;
        }

    .rcrop-wrapper .rcrop-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .rcrop-wrapper .rcrop-grid-line {
        position: absolute;
    }

        .rcrop-wrapper .rcrop-grid-line:nth-child(1) {
            width: 100%;
            height: 33%;
            top: 33%;
            left: 0;
            border-top: 1px dashed #fff;
            border-bottom: 1px dashed #fff;
        }

        .rcrop-wrapper .rcrop-grid-line:nth-child(2) {
            height: 100%;
            width: 33%;
            left: 33%;
            top: 0;
            border-left: 1px dashed #fff;
            border-right: 1px dashed #fff;
        }

    .rcrop-wrapper .rcrop-handler-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-corner {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #fff;
            border: 1px solid #000;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-top-left {
            top: -3px;
            left: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-top-right {
            top: -3px;
            right: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-bottom-left {
            bottom: -3px;
            left: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-bottom-right {
            bottom: -3px;
            right: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-border {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #fff;
            border: 1px solid #000;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-top {
            top: -3px;
            left: 50%;
            margin-left: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-right {
            right: -3px;
            top: 50%;
            margin-top: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-bottom {
            bottom: -3px;
            left: 50%;
            margin-left: -3px;
        }

        .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-left {
            left: -3px;
            top: 50%;
            margin-top: -3px;
        }

    .rcrop-wrapper .clayfy-touch-device .rcrop-handler-bottom-right {
        display: none;
        width: 18px;
        height: 18px;
        bottom: -5px;
        right: -5px;
    }

.clayfy-box:not(.clayfy-not-move) {
    cursor: move;
}

.clayfy-ghost {
    z-index: 1000;
}

.clayfy-ghost-opacity {
    opacity: .5;
}

.clayfy-handler {
    z-index: 1001;
}

    .clayfy-handler.clayfy-top {
        cursor: n-resize;
    }

        .clayfy-handler.clayfy-top.left {
            cursor: nw-resize;
            /*
      &:before{
          content: '';
          position: absolute;
          top:0; left:0;
          height: 100%; width: 100%;
          border-top: 1px solid #000;
          border-left: 1px solid #000;
      }
      */
        }

        .clayfy-handler.clayfy-top.right {
            cursor: ne-resize;
        }

    .clayfy-handler.clayfy-bottom {
        cursor: n-resize;
    }

        .clayfy-handler.clayfy-bottom.left {
            cursor: sw-resize;
        }

        .clayfy-handler.clayfy-bottom.right {
            cursor: se-resize;
        }

    .clayfy-handler.clayfy-left {
        cursor: w-resize;
    }

    .clayfy-handler.clayfy-right {
        cursor: w-resize;
    }

    .clayfy-handler.clayfy-touch-device {
        background: #fff;
        border: 1px solid #000;
        border-radius: 3px;
    }

.clayfy-sort-droparea {
    border: 2px solid #ccc;
}


.modal .rcrop-outer-wrapper {
    opacity: .75 !important;
}

.modal .rcrop-outer {
    background: #000 !important
}

.modal .rcrop-croparea-inner {
    border: 2px dashed rgba(255,255,255,1) !important;
}

.modal .rcrop-handler-corner {
    width: 12px !important;
    height: 12px !important;
    background: none !important;
    border: 0 solid #51aeff !important;
}

.modal .rcrop-handler-top-left {
    border-top-width: 6px !important;
    border-left-width: 6px !important;
    top: -3px !important;
    left: -3px !important
}

.modal .rcrop-handler-top-right {
    border-top-width: 6px !important;
    border-right-width: 6px !important;
    top: -3px !important;
    right: -3px !important
}

.modal .rcrop-handler-bottom-right {
    border-bottom-width: 6px !important;
    border-right-width: 6px !important;
    bottom: -3px !important;
    right: -3px !important
}

.modal .rcrop-handler-bottom-left {
    border-bottom-width: 6px !important;
    border-left-width: 6px !important;
    bottom: -3px !important;
    left: -3px !important
}

.modal .rcrop-handler-border {
    display: none !important;
}

.modal .clayfy-touch-device.clayfy-handler {
    background: none !important;
    border: 0 solid #51aeff !important;
    border-bottom-width: 6px !important;
    border-right-width: 6px !important;
}