/* ----- by PK Start ----- */
[_nghost-pnc-c4] {
    display: flex;
    justify-content: center;
    /* height: 100%; */
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    position: relative;
}
.cropOverlay {
    position: absolute;
    pointer-events: none;
    touch-action: none;
    outline: white solid 100vw;
    top: 0;
    left: 0;
}
.cropper {
    position: absolute;
    display: flex;
    color: #53535c;
    background: transparent;
    outline: hsla(0, 100%, 0%, .7) solid 100vw;
    touch-action: none;
}
@media (orientation: portrait) {
    .cropper {
        outline-width: 100vh;
    }
}
.cropper .move {
    width: 100%;
    cursor: move;
    border: 3px dashed rgba(255, 0, 0, 0.7);
}
.cropper:hover .move, .cropper:focus .move {
    border: 2px dashed rgba(255, 0, 0, 1);
}
.cropper .resize {
    position: absolute;
    display: inline-block;
    line-height: 6px;
    padding: 8px;
    z-index: 1;
}
.cropper .resize .square {
    display: inline-block;
    background: red;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    box-sizing: content-box;
}
.cropper .resize.topleft {
    top: -12px;
    left: -12px;
    cursor: nwse-resize;
}
.cropper .resize.top {
    top: -12px;
    left: calc(50% - 12px);
    cursor: ns-resize;
}
.cropper .resize.topright {
    top: -12px;
    right: -12px;
    cursor: nesw-resize;
}
.cropper .resize.right {
    top: calc(50% - 12px);
    right: -12px;
    cursor: ew-resize;
}
.cropper .resize.bottomright {
    bottom: -12px;
    right: -12px;
    cursor: nwse-resize;
}
.cropper .resize.bottom {
    bottom: -12px;
    left: calc(50% - 12px);
    cursor: ns-resize;
}
.cropper .resize.bottomleft {
    bottom: -12px;
    left: -12px;
    cursor: nesw-resize;
}
.cropper .resize.left {
    top: calc(50% - 12px);
    left: -12px;
    cursor: ew-resize;
}
.cropper .resize-bar {
    position: absolute;
    z-index: 1;
}
.cropper .resize-bar.top {
    top: -11px;
    left: 11px;
    width: calc(100% - 22px);
    height: 22px;
    cursor: ns-resize;
}
.cropper .resize-bar.right {
    top: 11px;
    right: -11px;
    height: calc(100% - 22px);
    width: 22px;
    cursor: ew-resize;
}
.cropper .resize-bar.bottom {
    bottom: -11px;
    left: 11px;
    width: calc(100% - 22px);
    height: 22px;
    cursor: ns-resize;
}
.cropper .resize-bar.left {
    top: 11px;
    left: -11px;
    height: calc(100% - 22px);
    width: 22px;
    cursor: ew-resize;
}
.cropper.rounded {
    outline-color: transparent;
}
.cropper.rounded:after {
    border-radius: 100%;
    box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
}
/* --- for UI Start --- */
/* .xyz {
    overflow: visible !important;
    position: relative;
} */
.cropOverlay {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: auto !important;
}
.cropper {
    left: 0;
    top: 0;
    /* width: 100%;
    height: 100%; */
    width: 460px;
    height: 630px;
    margin-left: calc(50% - 230px);
}
.disabled .cropOverlay, .disabled .cropper, .disabled .cropper .resize, .disabled .cropper .resize-bar, .disabled .cropper .move {
    display: none;
}
/* --- for UI End --- */
/* ----- by PK End ----- */
/* ----- Angular CSS Start ----- */
:host {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 5px;
    text-align: center;
}
:host>div {
    /* width: 100%; */
    position: relative;
}
:host>div img.source-image {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center;
}
:host .cropOverlay {
    position: absolute;
    pointer-events: none;
    touch-action: none;
    outline: white solid 100vw;
    top: 0;
    left: 0;
}
:host .cropper {
    position: absolute;
    display: flex;
    color: #53535c;
    background: transparent;
    outline: hsla(0, 100%, 0%, .7) solid 100vw;
    touch-action: none;
}
@media (orientation: portrait) {
    :host .cropper {
        outline-width: 100vh;
    }
}
:host .cropper .move {
    width: 100%;
    cursor: move;
    border: 3px dashed rgba(255, 0, 0, 0.7);
}
:host .cropper:hover .move, :host .cropper:focus .move {
    border: 2px dashed rgba(255, 0, 0, 1);
}
:host .cropper .resize {
    position: absolute;
    display: inline-block;
    line-height: 6px;
    padding: 8px;
    z-index: 1;
}
:host .cropper .resize .square {
    display: inline-block;
    background: red;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    box-sizing: content-box;
}
:host .cropper .resize.topleft {
    top: -12px;
    left: -12px;
    cursor: nwse-resize;
}
:host .cropper .resize.top {
    top: -12px;
    left: calc(50% - 12px);
    cursor: ns-resize;
}
:host .cropper .resize.topright {
    top: -12px;
    right: -12px;
    cursor: nesw-resize;
}
:host .cropper .resize.right {
    top: calc(50% - 12px);
    right: -12px;
    cursor: ew-resize;
}
:host .cropper .resize.bottomright {
    bottom: -12px;
    right: -12px;
    cursor: nwse-resize;
}
:host .cropper .resize.bottom {
    bottom: -12px;
    left: calc(50% - 12px);
    cursor: ns-resize;
}
:host .cropper .resize.bottomleft {
    bottom: -12px;
    left: -12px;
    cursor: nesw-resize;
}
:host .cropper .resize.left {
    top: calc(50% - 12px);
    left: -12px;
    cursor: ew-resize;
}
:host .cropper .resize-bar {
    position: absolute;
    z-index: 1;
}
:host .cropper .resize-bar.top {
    top: -11px;
    left: 11px;
    width: calc(100% - 22px);
    height: 22px;
    cursor: ns-resize;
}
:host .cropper .resize-bar.right {
    top: 11px;
    right: -11px;
    height: calc(100% - 22px);
    width: 22px;
    cursor: ew-resize;
}
:host .cropper .resize-bar.bottom {
    bottom: -11px;
    left: 11px;
    width: calc(100% - 22px);
    height: 22px;
    cursor: ns-resize;
}
:host .cropper .resize-bar.left {
    top: 11px;
    left: -11px;
    height: calc(100% - 22px);
    width: 22px;
    cursor: ew-resize;
}
:host .cropper.rounded {
    outline-color: transparent;
}
:host .cropper.rounded:after {
    border-radius: 100%;
    box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
}
@media (orientation: portrait) {
    :host .cropper.rounded:after {
        box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
    }
}
:host .cropper.rounded .move {
    border-radius: 100%;
}
:host.disabled .cropOverlay, :host.disabled .cropper, :host.disabled .cropper .resize, :host.disabled .cropper .resize-bar, :host.disabled .cropper .move {
    display: none;
}
/* ----- Angular CSS End ----- */