/**
 * Cropper Fix Styles
 * -----------------
 * Allows Cropper.js to render crop box properly.
 * Applied ONLY during cropping session.
 */

/* When cropping is active */
.mg-cropping .mg-avatar-preview {
    width: 320px;
    height: 320px;
    border-radius: 0;          /* disable circle */
    overflow: visible;         /* allow crop box */
    background: #000;
}

/* Cropper image must be visible */
.mg-cropping .mg-avatar-preview img {
    max-width: 100%;
    display: block;
}

/* Cropper container visibility */
.cropper-container {
    max-width: 100%;
}