@keyframes marching-ants { 
  0% { background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px; }
  100% { background-position: 20px 0px, -20px 100%, 0px -20px, 100% 20px; }
}
:root { --rc-drag-handle-size: 12px; --rc-drag-handle-mobile-size: 24px; --rc-drag-handle-bg-colour: rgba(0,0,0,.2); --rc-drag-bar-size: 6px; --rc-border-color: rgba(255,255,255,.7); --rc-focus-color: #0088ff; }
.ReactCrop { position: relative; display: inline-block; cursor: crosshair; max-width: 100%; }
.ReactCrop *, .ReactCrop ::after, .ReactCrop ::before { box-sizing: border-box; }
.ReactCrop--disabled, .ReactCrop--locked { cursor: inherit; }
.ReactCrop__child-wrapper { overflow: hidden; max-height: inherit; }
.ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video { display: block; max-width: 100%; max-height: inherit; }
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection { touch-action: none; }
.ReactCrop__crop-mask { position: absolute; inset: 0px; pointer-events: none; width: calc(100% + 0.5px); height: calc(100% + 0.5px); }
.ReactCrop__crop-selection { position: absolute; top: 0px; left: 0px; transform: translateZ(0px); cursor: move; }
.ReactCrop--disabled .ReactCrop__crop-selection { cursor: inherit; }
.ReactCrop--circular-crop .ReactCrop__crop-selection { border-radius: 50%; }
.ReactCrop--circular-crop .ReactCrop__crop-selection::after { pointer-events: none; content: ""; position: absolute; inset: -1px; border: 1px solid var(--rc-border-color); opacity: 0.3; }
.ReactCrop--no-animate .ReactCrop__crop-selection { outline: white dashed 1px; }
.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) { animation: 1s linear 0s infinite normal none running marching-ants; background-image: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgb(68, 68, 68) 0px), linear-gradient(90deg, rgb(255, 255, 255) 50%, rgb(68, 68, 68) 0px), linear-gradient(rgb(255, 255, 255) 50%, rgb(68, 68, 68) 0px), linear-gradient(rgb(255, 255, 255) 50%, rgb(68, 68, 68) 0px); background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px; background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; color: rgb(255, 255, 255); }
.ReactCrop__crop-selection:focus { outline: 2px solid var(--rc-focus-color); outline-offset: -1px; }
.ReactCrop--invisible-crop .ReactCrop__crop-mask, .ReactCrop--invisible-crop .ReactCrop__crop-selection { display: none; }
.ReactCrop__rule-of-thirds-hz::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-vt::before { content: ""; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.4); }
.ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-vt::before { width: 1px; height: 100%; }
.ReactCrop__rule-of-thirds-vt::before { left: 33.3333%; }
.ReactCrop__rule-of-thirds-vt::after { left: 66.6667%; }
.ReactCrop__rule-of-thirds-hz::after, .ReactCrop__rule-of-thirds-hz::before { width: 100%; height: 1px; }
.ReactCrop__rule-of-thirds-hz::before { top: 33.3333%; }
.ReactCrop__rule-of-thirds-hz::after { top: 66.6667%; }
.ReactCrop__drag-handle { position: absolute; width: var(--rc-drag-handle-size); height: var(--rc-drag-handle-size); background-color: var(--rc-drag-handle-bg-colour); border: 1px solid var(--rc-border-color); }
.ReactCrop__drag-handle:focus { background: var(--rc-focus-color); }
.ReactCrop .ord-nw { top: 0px; left: 0px; transform: translate(-50%, -50%); cursor: nw-resize; }
.ReactCrop .ord-n { top: 0px; left: 50%; transform: translate(-50%, -50%); cursor: n-resize; }
.ReactCrop .ord-ne { top: 0px; cursor: ne-resize; }
.ReactCrop .ord-e, .ReactCrop .ord-ne { right: 0px; transform: translate(50%, -50%); }
.ReactCrop .ord-e { top: 50%; cursor: e-resize; }
.ReactCrop .ord-se { bottom: 0px; right: 0px; transform: translate(50%, 50%); cursor: se-resize; }
.ReactCrop .ord-s { left: 50%; cursor: s-resize; }
.ReactCrop .ord-s, .ReactCrop .ord-sw { bottom: 0px; transform: translate(-50%, 50%); }
.ReactCrop .ord-sw { left: 0px; cursor: sw-resize; }
.ReactCrop .ord-w { top: 50%; left: 0px; transform: translate(-50%, -50%); cursor: w-resize; }
.ReactCrop__disabled .ReactCrop__drag-handle { cursor: inherit; }
.ReactCrop__drag-bar { position: absolute; }
.ReactCrop__drag-bar.ord-n { top: 0px; left: 0px; width: 100%; height: var(--rc-drag-bar-size); transform: translateY(-50%); }
.ReactCrop__drag-bar.ord-e { right: 0px; top: 0px; width: var(--rc-drag-bar-size); height: 100%; transform: translate(50%); }
.ReactCrop__drag-bar.ord-s { bottom: 0px; left: 0px; width: 100%; height: var(--rc-drag-bar-size); transform: translateY(50%); }
.ReactCrop__drag-bar.ord-w { top: 0px; left: 0px; width: var(--rc-drag-bar-size); height: 100%; transform: translate(-50%); }
.ReactCrop--fixed-aspect .ReactCrop__drag-bar, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w, .ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle { display: none; }
@media (pointer: coarse) {
  .ReactCrop .ord-e, .ReactCrop .ord-n, .ReactCrop .ord-s, .ReactCrop .ord-w { display: none; }
  .ReactCrop__drag-handle { width: var(--rc-drag-handle-mobile-size); height: var(--rc-drag-handle-mobile-size); }
}