.desktop-cropper .cropper-container {
  width: 100%;
  height: 297px;
  position: relative;
  overflow: visible !important;
  direction: ltr !important;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -ms-touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 1050;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: none !important;
}  

.desktop-cropper .cropp-section {
  width: 100%;
  height: 297px;
  position: relative;
  overflow: hidden;
  background: none !important;
}

.desktop-cropper .cropper-hidden {
  display: none !important;
}

.desktop-cropper .cropper-bg, .desktop-cropper .cropper-modal, .desktop-cropper .cropper-dashed, .desktop-cropper .cropper-center {
  display: none !important;
}

.desktop-cropper .cropper-wrap-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: none !important;
}

.desktop-cropper .cropper-canvas {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: none !important;
}

.desktop-cropper .cropper-canvas img {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

.desktop-cropper .cropper-drag-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1052;
  background: none !important;
}

.desktop-cropper .cropper-crop-box {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 1053 !important;
  touch-action: none;
  user-select: none;
  box-shadow: 0 0 0 9999px rgba(18, 18, 35, 0.65);
  background: none !important;
}

.desktop-cropper .cropper-view-box {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: none !important;
}

.desktop-cropper .cropper-view-box img {
  display: block;
  image-rendering: pixelated;
  max-width: none !important;
  max-height: none !important;
}

.desktop-cropper .cropper-view-box::before,
.desktop-cropper .cropper-view-box::after,
.desktop-cropper .cropper-view-box .corner-bottom-left,
.desktop-cropper .cropper-view-box .corner-bottom-right {
  display: none !important;
}

.desktop-cropper .corner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1055;
  width: 100%;
  height: 100%;
}

.desktop-cropper .cropper-container .corner-left-top,
.desktop-cropper .cropper-container .corner-right-top,
.desktop-cropper .cropper-container .corner-left-bottom,
.desktop-cropper .cropper-container .corner-right-bottom {
  position: absolute;
  z-index: 1060;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.desktop-cropper .cropper-container [class^="corner-"]::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 3px;
  background: #9406FF;
  display: block !important;
}

.desktop-cropper .cropper-container [class^="corner-"]::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 24px;
  background: #9406FF;
  display: block !important;
}

.desktop-cropper .cropper-container .corner-left-top { top: 0; left: 0; }
.desktop-cropper .cropper-container .corner-right-top { top: 0; right: 0; transform: rotate(90deg); }
.desktop-cropper .cropper-container .corner-left-bottom { bottom: 0; left: 0; transform: rotate(-90deg); }
.desktop-cropper .cropper-container .corner-right-bottom { bottom: 0; right: 0; transform: rotate(180deg); }

.desktop-cropper .cropper-container::before,
.desktop-cropper .cropper-container::after,
.desktop-cropper .cropper-container .corner-bottom-left,
.desktop-cropper .cropper-container .corner-bottom-right {
  display: none;
}

.desktop-cropper .cropper-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  opacity: 0 !important;
}

.desktop-cropper .cropper-line {
  position: absolute !important;
  display: block !important;
  opacity: 1 !important;
  background-color: #9406FF !important;
  z-index: 1054 !important;
  pointer-events: auto !important;
}

.desktop-cropper .cropper-line.line-e {
  cursor: e-resize !important;
  right: 0 !important;
  top: 0 !important;
  width: 2px !important;
  height: 100% !important;
  display: block !important;
}

.desktop-cropper .cropper-line.line-n {
  cursor: n-resize !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  display: block !important;
}

.desktop-cropper .cropper-line.line-w {
  cursor: w-resize !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  height: 100% !important;
  display: block !important;
}

.desktop-cropper .cropper-line.line-s {
  cursor: s-resize !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  display: block !important;
}

.desktop-cropper .cropper-point {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  background-color: #9406FF !important;
  border: 1px solid #fff !important;
  border-radius: 50% !important;
  z-index: 1054 !important;
}

.desktop-cropper .cropper-point.point-e { top: 50%; right: -6px !important; margin-top: -6px !important; cursor: e-resize !important; }
.desktop-cropper .cropper-point.point-n { top: -6px !important; left: 50% !important; margin-left: -6px !important; cursor: n-resize !important; }
.desktop-cropper .cropper-point.point-w { top: 50%; left: -6px !important; margin-top: -6px !important; cursor: w-resize !important; }
.desktop-cropper .cropper-point.point-s { bottom: -6px !important; left: 50% !important; margin-left: -6px !important; cursor: s-resize !important; }
.desktop-cropper .cropper-point.point-ne { top: -6px !important; right: -6px !important; cursor: ne-resize !important; }
.desktop-cropper .cropper-point.point-nw { top: -6px !important; left: -6px !important; cursor: nw-resize !important; }
.desktop-cropper .cropper-point.point-sw { bottom: -6px !important; left: -6px !important; cursor: sw-resize !important; }
.desktop-cropper .cropper-point.point-se {
  right: -6px !important;
  bottom: -6px !important;
  cursor: se-resize !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
}

.desktop-cropper .cropper-point:active,
.desktop-cropper .cropper-point:hover {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .desktop-cropper .cropper-point {
    width: 16px !important;
    height: 16px !important;
  }

  .desktop-cropper .cropper-point.point-e { right: -8px !important; margin-top: -8px !important; }
  .desktop-cropper .cropper-point.point-n { top: -8px !important; margin-left: -8px !important; }
  .desktop-cropper .cropper-point.point-w { left: -8px !important; margin-top: -8px !important; }
  .desktop-cropper .cropper-point.point-s { bottom: -8px !important; margin-left: -8px !important; }
  .desktop-cropper .cropper-point.point-ne { top: -8px !important; right: -8px !important; }
  .desktop-cropper .cropper-point.point-nw { top: -8px !important; left: -8px !important; }
  .desktop-cropper .cropper-point.point-sw { bottom: -8px !important; left: -8px !important; }
  .desktop-cropper .cropper-point.point-se { right: -8px !important; bottom: -8px !important; }

  .desktop-cropper .cropper-line.line-e,
  .desktop-cropper .cropper-line.line-w { width: 2px !important; }
  .desktop-cropper .cropper-line.line-n,
  .desktop-cropper .cropper-line.line-s { height: 2px !important; }
}