.dlg-file-edit {
  --canvas-width: 509px;
  --canvas-height: 339px;
}
.croppr-container {

  margin-top: 0.25rem;
  width: var(--canvas-width);
  height: var(--canvas-height);
  display: flex;
	min-height: 0;
	justify-content: center; 
  align-items: center;
  background-color: var(--slate3);
  border: 1px solid var(--slateA4) !important;
  background: #eee url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".05" >\
					 <rect x="200" width="200" height="200" />\
					 <rect y="200" width="200" height="200" />\
					 </svg>');
  background-size: 20px 20px;
  background-color: var(--slate1);
}

.croppr-container * {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.croppr {
  position: relative;
  
}

.croppr img, .crop-image {
  max-width: var(--canvas-width);
  max-height: var(--canvas-height);
  background-color: var(--slate2);
}

.croppr-overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: crosshair;
}

.croppr-region {
  border: 1px dashed rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 3;
  cursor: move;
  top: 0;
}

.croppr-imageClipped {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.croppr-handle {
  border: 1px solid black;
  background-color: white;
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 4;
  top: 0;
}