.ww-image-upload .ww-image-upload-box {
  background-color: #DBDEE0;
  padding: 5px;
}

.ww-image-upload .ww-image-upload-preview-box {
  background-color: #EFEFEF;
}

.ww-image-upload .ww-image-upload-preview-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #AFAFAF;
  background-image: url(../upload-woofwup/images/upload-hover.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.ww-image-upload .ww-image-upload-preview-box.show-loader::before {
  content: '';
  background: unset;
}

.ww-image-upload .ww-image-upload-preview-box .ww-image-upload-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ww-image-upload .ww-image-upload-box {
  display: flex;
  justify-content: space-between;
}

.ww-image-upload .ww-image-upload-box .ww-image-upload-delete-box,
.ww-image-upload .ww-image-upload-box .ww-image-upload-btn-box {
  align-self: center;
}

.btn-upload-image {
  color: #525252;
  background-color: hsl(0, 0%, 69%);
  border-color: hsl(0, 0%, 69%);
}

.btn-upload-image:hover {
  color: #525252;
  background-color: hsl(0, 0%, 62%);
  border-color: hsl(0, 0%, 59%);
}

.btn-upload-image:focus,
.btn-upload-image.focus {
  box-shadow: 0 0 0 0.2rem rgba(175, 175, 175, 0.5);
}

.btn-upload-image.disabled,
.btn-upload-image:disabled {
  color: #525252;
  background-color: hsl(0, 0%, 69%);
  border-color: hsl(0, 0%, 69%);
}

.btn-upload-image:not(:disabled):not(.disabled):active,
.btn-upload-image:not(:disabled):not(.disabled).active,
.show>.btn-upload-image.dropdown-toggle {
  color: #525252;
  background-color: hsl(0, 0%, 59%);
  border-color: hsl(0, 0%, 56%);
}

.btn-upload-image:not(:disabled):not(.disabled):active:focus,
.btn-upload-image:not(:disabled):not(.disabled).active:focus,
.show>.btn-upload-image.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(175, 175, 175, 0.5);
}

.ww-image-upload.has-cropped .ww-image-upload-preview-box .cropper-container {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ww-image-upload.has-cropped .ww-image-crop-rotate-box {
  align-self: center;
}

.ww-image-upload.has-cropped .ww-image-canvas-preview {
  position: relative;
  width: 100%;
  padding-top: 75%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.ww-image-upload.has-cropped .ww-image-canvas-preview canvas {
  height: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}