.img-container {
    text-align: center;
}

.img-container #img-crop {
    max-height: 300px;
    max-width: 100%;
}


.cropper-canvas,
.cropper-wrap-box {
    background-color: white;
}

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box {
    box-shadow: 0 0 0 2px var(--icon-color);
    outline: 0;
}

.cropper-face {
    background-color: inherit !important;
}

.cropper-modal {
    background-color: white;
    opacity: .5;
}

.cropper-dashed,
.cropper-point.point-se,
.cropper-point.point-sw,
.cropper-point.point-nw,
.cropper-point.point-ne,
.cropper-line {
    display: none !important;
}

.cropper-point {
    height: 10px;
    width: 10px;
    background-color: var(--icon-color);
    border-radius: 50%;
}

.cropper-point.point-n {
    top: -6px;
    margin-left: -4px;
}

.cropper-point.point-s {
    cursor: row-resize;
    bottom: -6px;
    margin-left: -4px;
}

.cropper-point.point-e {
    margin-top: -4px;
    right: -6px;
}

.cropper-point.point-w {
    left: -6px;
    margin-top: -4px;
}

.cropper-view-box {
    outline: inherit !important;
}

.canvas {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.zoom-area {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#range-zoom {
    background: linear-gradient(to right, var(--icon-color) 0%, var(--icon-color)E 0%, #DFDFDF 0%, #DFDFDF 100%);
    height: 2px;
    width: calc(100% - 40px);
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
}

#range-zoom::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFFFFF;
    border: 1px solid var(--icon-color);
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

#range-zoom::-moz-range-thumb {
    -webkit-appearance: none !important;
    background: #FFFFFF;
    border: 1px solid var(--icon-color);
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

#range-zoom::-moz-focus-outer {
    border: 0;
}

#range-zoom::-ms-thumb {
    -webkit-appearance: none !important;
    background: #FFFFFF;
    border: 1px solid var(--icon-color);
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

#range-zoom-in, #range-zoom-out {
    user-select: none;
}

#range-zoom-in:hover, #range-zoom-out:hover {
    cursor: pointer;
}


.flex-separator {
    flex-grow: 1;
}