.cropper-container {

  position: relative;

  overflow: hidden;



  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;



  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

}



.cropper-container img {

  width: 100%;

  height: 100%;

  min-width: 0 !important;

  min-height: 0 !important;

  max-width: none !important;

  max-height: none !important;

}



.cropper-modal,

.cropper-canvas {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}



.cropper-canvas {

  background-color: #fff;

  opacity: 0;

  filter: alpha(opacity=0);

}



.cropper-modal {

  background-color: #000;

  opacity: .5;

  filter: alpha(opacity=50);

}



.cropper-dragger {

  position: absolute;

  top: 10%;

  left: 10%;

  width: 80%;

  height: 80%;

}



.cropper-viewer {

  display: block;

  width: 100%;

  height: 100%;

  overflow: hidden;

  outline-width: 1px;

  outline-style: solid;

  outline-color: #69f;

  outline-color: rgba(51, 102, 255, .75);

}



.cropper-dashed {

  position: absolute;

  display: block;

  border: 0 dashed #fff;

  opacity: .5;

  filter: alpha(opacity=50);

}



.cropper-dashed.dashed-h {

  top: 33.3%;

  left: 0;

  width: 100%;

  height: 33.3%;

  border-top-width: 1px;

  border-bottom-width: 1px;

}



.cropper-dashed.dashed-v {

  top: 0;

  left: 33.3%;

  width: 33.3%;

  height: 100%;

  border-right-width: 1px;

  border-left-width: 1px;

}



.cropper-face,

.cropper-line,

.cropper-point {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  opacity: .1;

  filter: alpha(opacity=10);

}



.cropper-face {

  top: 0;

  left: 0;

  cursor: move;

  background-color: #fff;

}



.cropper-line {

  background-color: #69f;

}



.cropper-line.line-e {

  top: 0;

  right: -3px;

  width: 5px;

  cursor: e-resize;

}



.cropper-line.line-n {

  top: -3px;

  left: 0;

  height: 5px;

  cursor: n-resize;

}



.cropper-line.line-w {

  top: 0;

  left: -3px;

  width: 5px;

  cursor: w-resize;

}



.cropper-line.line-s {

  bottom: -3px;

  left: 0;

  height: 5px;

  cursor: s-resize;

}



.cropper-point {

  width: 5px;

  height: 5px;

  background-color: #69f;

  opacity: .75;

  filter: alpha(opacity=75);

}



.cropper-point.point-e {

  top: 50%;

  right: -3px;

  margin-top: -3px;

  cursor: e-resize;

}



.cropper-point.point-n {

  top: -3px;

  left: 50%;

  margin-left: -3px;

  cursor: n-resize;

}



.cropper-point.point-w {

  top: 50%;

  left: -3px;

  margin-top: -3px;

  cursor: w-resize;

}



.cropper-point.point-s {

  bottom: -3px;

  left: 50%;

  margin-left: -3px;

  cursor: s-resize;

}



.cropper-point.point-ne {

  top: -3px;

  right: -3px;

  cursor: ne-resize;

}



.cropper-point.point-nw {

  top: -3px;

  left: -3px;

  cursor: nw-resize;

}



.cropper-point.point-sw {

  bottom: -3px;

  left: -3px;

  cursor: sw-resize;

}



.cropper-point.point-se {

  right: -3px;

  bottom: -3px;

  width: 20px;

  height: 20px;

  cursor: se-resize;

  opacity: 1;

  filter: alpha(opacity=100);

}



.cropper-point.point-se:before {

  position: absolute;

  right: -50%;

  bottom: -50%;

  display: block;

  width: 200%;

  height: 200%;

  content: " ";

  background-color: #69f;

  opacity: 0;

  filter: alpha(opacity=0);

}



@media (min-width: 768px) {

  .cropper-point.point-se {

    width: 15px;

    height: 15px;

  }

}



@media (min-width: 992px) {

  .cropper-point.point-se {

    width: 10px;

    height: 10px;

  }

}



@media (min-width: 1200px) {

  .cropper-point.point-se {

    width: 5px;

    height: 5px;

    opacity: .75;

    filter: alpha(opacity=75);

  }

}



/* Helper classes for JavaScript */



.cropper-hidden {

  display: none !important;

}



.cropper-invisible {

  position: fixed;

  top: 0;

  left: 0;

  z-index: -1;

  width: auto !important;

  max-width: none !important;

  height: auto !important;

  max-height: none !important;

  opacity: 0;

  filter: alpha(opacity=0);

}



.cropper-move {

  cursor: move;

}



.cropper-crop {

  cursor: crosshair;

}



.cropper-disabled .cropper-canvas,

.cropper-disabled .cropper-face,

.cropper-disabled .cropper-line,

.cropper-disabled .cropper-point {

  cursor: not-allowed;

}