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

margin: 0;

background-image:
repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
background-size: 71px 71px;
}

.gridRow {
  border: 1px dashed gray;
  height: 25%;
}

.cell {
  border-right: 1% dashed gray;
  width: 48%;
  height: 100%;
  display: inline-block;
}

.rcrop-wrapper {
  position: relative;
  display: inline-block;
  max-width: inherit; }
  .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=70);
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .rcrop-wrapper .rcrop-outer {
    background: #000;
    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: 10%;
      left: 10%;
      top: 0;
      border-left: 1px dashed #b31010;
      border-right: 1px dashed #b31010; } */
  .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 .rcrop-handler-wrapper .rcrop-handler-top-extend-icon {
        position: absolute;
        width: 24px;
        height: 24px;
        color: #51aeff;
        top: -40px;
        left: 50%;
        margin-left: -14px;
        cursor: alias;
   }
      .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-right-extend-icon{
        position: absolute;
        width: 24px;
        height: 24px;
        color: #51aeff;
        right: -40px;
        top: 50%;
        margin-top: -14px; 
        cursor: alias;
      }

      .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-bottom-extend-icon {
        position: absolute;
        width: 24px;
        height: 24px;
        color: #51aeff;
        bottom: -40px;
        left: 50%;
        margin-left: -14px; 
        cursor: alias;
      }

      .rcrop-wrapper .rcrop-handler-wrapper .rcrop-handler-left-extend-icon{
        position: absolute;
        width: 24px;
        height: 24px;
        color: #51aeff;
        left: -40px;
        top: 50%;
        margin-top: -14px; 
        cursor: alias;
      }
  

      .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; }

/*# sourceMappingURL=rcrop.css.map */



#image-2-wrapper .rcrop-outer-wrapper {
  opacity: .75;
}

#image-2-wrapper .rcrop-outer {
  background: #000
}

#image-2-wrapper .rcrop-croparea-inner {
  border: 1px dashed #fff;
}

#image-2-wrapper .rcrop-handler-corner {
  width: 12px;
  height: 12px;
  background: none;
  border: 0 solid #51aeff;
}

#image-2-wrapper .rcrop-handler-top-left {
  border-top-width: 4px;
  border-left-width: 4px;
  top: -2px;
  left: -2px
}

#image-2-wrapper .rcrop-handler-top-right {
  border-top-width: 4px;
  border-right-width: 4px;
  top: -2px;
  right: -2px
}

#image-2-wrapper .rcrop-handler-bottom-right {
  border-bottom-width: 4px;
  border-right-width: 4px;
  bottom: -2px;
  right: -2px
}

#image-2-wrapper .rcrop-handler-bottom-left {
  border-bottom-width: 4px;
  border-left-width: 4px;
  bottom: -2px;
  left: -2px
}

#image-2-wrapper .rcrop-handler-border {
  display: none;
}

.input-preview-box {
/*  background: #3562AB;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  filter: alpha(opacity=40) progid:DXImageTransform.Microsoft.Alpha(opacity=40);*/
}

.input-palette-box {
  background: rgb(238, 255, 112);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  filter: alpha(opacity=40) progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

.output-preview-box {
  background: rgba(40, 167, 57, 0.4);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  filter: alpha(opacity=40) progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}