/**
 * Frontend Style For Crop/Edit Image.
 *
 * @package  custom-image-upload-addon-for-wp-configurator-pro/assets/css/
 * @since  1.0.0
 * @version  1.0.5
 */
.cropper-popup-content .wpc-carousel-stage,
.cropper-popup-content .wpc-carousel-item.active {
    transform: translateX(-50%) !important;
    left: 50%;
}
.cropper-popup-content .configurator-view .subset {
    display:none;
}

.cropper-popup-content .configurator-view .subset.active {
    display:block;
}

.wpc-mask-upload.image-loading {
    position: relative;
}
.wpc-mask-upload.image-loading:before {
    content: '';
    border-radius: 50%;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(150, 150, 150, 0.2);
    border-top-color: #c1c1c1;
    animation: trspin 1s infinite linear;
    color: black;
    right: 0px;
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.wpc-popup.wpc-cropper-popup {
    padding: 0 !important;
}

.wpc-popup.wpc-cropper-popup .wpc-popup-inner {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}

.wpc-popup.wpc-cropper-popup .cropper-popup-content {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
}

.wpc-popup.wpc-cropper-popup .wpc-image-preview {
    position: relative;
    width: 50%;
    padding: 5%;
}

.wpc-popup.wpc-cropper-popup .wpc-image-preview .wpc-preview-inner.wpc-front {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpc-popup.wpc-cropper-popup .wpc-cropper-container {
    width: 50%;
    padding: 150px 0px;
    height: 100vh;
}

.wpc-popup.wpc-cropper-popup .wpc-cropper-container .wpc-ciua-cropper-container {
    display: block;
    width: 100%;
    height: 100%;
}


.wpc-control-lists-inner .wpc-control-item.wpc-layer-type-upload .wpc-image-preview img {
   width: 100%;
}

a.wpc-close-btn.wpc-ciua-cropper-rotate-right {
    right: 100px;
}

a.wpc-close-btn.wpc-ciua-cropper-rotate-left {
    right: 170px;
}

a.wpc-close-btn.wpc-ciua-cropper-zoom-out {
    right: 240px;
}

a.wpc-close-btn.wpc-ciua-cropper-zoom-in {
    right: 310px;
}

a.wpc-close-btn.wpc-ciua-cropper-trash {
    right: 380px;
}

a.wpc-close-btn svg {
    fill: #fff;
    height: 17px;
    width: 17px;
}

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

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

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}


@media only screen and (max-width:768px) {
    .wpc-popup-wrap .wpc-popup.wpc-cropper-popup .cropper-popup-content {
        flex-direction: column;
    }
    .wpc-popup-wrap .wpc-popup.wpc-cropper-popup .wpc-image-preview{
        width: 100%;
        height: 50vh;
    }
    .wpc-popup-wrap .wpc-popup.wpc-cropper-popup .wpc-cropper-container{
        width: 100%;
        height: 50vh;
        padding:  0;
    }
    .wpc-config-element .wpc-close-btn {
        width: 40px;
        height: 40px;
        line-height: 45px;
        font-size: 17px;
    }
    .wpc-popup-wrap  a.wpc-close-btn.wpc-ciua-cropper-rotate-right {
        right: 55px;
    }
    .wpc-popup-wrap  a.wpc-close-btn.wpc-ciua-cropper-rotate-left {
        right: 100px;
    }
    .wpc-popup-wrap a.wpc-close-btn.wpc-ciua-cropper-zoom-out {
        right: 145px;
    }
    .wpc-popup-wrap a.wpc-close-btn.wpc-ciua-cropper-zoom-in {
        right: 190px;
    }
    .wpc-popup-wrap span.wpc-close {
        font-size: 14px;
        line-height: 39px !important;
        display: inline-block;
        vertical-align: super;
    }
    .wpc-popup-wrap a.wpc-close-btn.wpc-ciua-cropper-trash {
        right: 235px;
    }
}