.croppie-container { width: 100%; height: 100% }

.croppie-container .cr-image { z-index: -1; position: absolute; top: 0; left: 0; transform-origin: 0 0; max-height: none; max-width: none }

.croppie-container .cr-boundary { position: relative; overflow: hidden; margin: 0 auto; z-index: 1; width: 100%; height: 100% }

.croppie-container .cr-resizer, .croppie-container .cr-viewport { position: absolute; border: 2px solid #ffffff; margin: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, .5); z-index: 0 }

.croppie-container .cr-resizer { z-index: 2; box-shadow: none; pointer-events: none }

.croppie-container .cr-resizer-horisontal, .croppie-container .cr-resizer-vertical { position: absolute; pointer-events: all }

.croppie-container .cr-resizer-horisontal::after, .croppie-container .cr-resizer-vertical::after { display: block; position: absolute; box-sizing: border-box; border: 1px solid #000000; background: #ffffff; width: 10px; height: 10px; content: '' }

.croppie-container .cr-resizer-vertical { bottom: -5px; cursor: row-resize; width: 100%; height: 10px }

.croppie-container .cr-resizer-vertical::after { left: 50%; margin-left: -5px }

.croppie-container .cr-resizer-horisontal { right: -5px; cursor: col-resize; width: 10px; height: 100% }

.croppie-container .cr-resizer-horisontal::after { top: 50%; margin-top: -5px }

.croppie-container .cr-original-image { display: none }

.croppie-container .cr-vp-circle { border-radius: 50% }

.croppie-container .cr-overlay { z-index: 1; position: absolute; cursor: move; touch-action: none }

.croppie-container .cr-slider-wrap { width: 75%; margin: 15px auto; text-align: center }

.croppie-result { position: relative; overflow: hidden }

.croppie-result img { position: absolute }

.croppie-container .cr-image, .croppie-container .cr-overlay, .croppie-container .cr-viewport { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) }

/*.cr-slider::-webkit-slider-runnable-track { width: 100%; height: 3px; background: rgba(0, 0, 0, .5); border: 0; border-radius: 3px }*/

/*.cr-slider::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #dddddd; margin-top: -6px }*/

/*.cr-slider:focus { outline: 0 }*/

/*.cr-slider::-moz-range-track { width: 100%; height: 3px; background: rgba(0, 0, 0, .5); border: 0; border-radius: 3px }*/

/*.cr-slider::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #dddddd; margin-top: -6px }*/

/*.cr-slider:-moz-focusring { outline: 1px solid #ffffff; outline-offset: -1px }*/

/*.cr-slider::-ms-track { width: 100%; height: 5px; background: 0 0; border-color: transparent; border-width: 6px 0; color: transparent }*/

/*.cr-slider::-ms-fill-lower { background: rgba(0, 0, 0, .5); border-radius: 10px }*/

/*.cr-slider::-ms-fill-upper { background: rgba(0, 0, 0, .5); border-radius: 10px }*/

/*.cr-slider::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #dddddd; margin-top: 1px }*/

/*.cr-slider:focus::-ms-fill-lower { background: rgba(0, 0, 0, .5) }*/

/*.cr-slider:focus::-ms-fill-upper { background: rgba(0, 0, 0, .5) }*/

.cr-rotate-controls { position: absolute; bottom: 5px; left: 5px; z-index: 1 }

.cr-rotate-controls button { border: 0; background: 0 0 }

.cr-rotate-controls i:before { display: inline-block; font-style: normal; font-weight: 900; font-size: 22px }

.cr-rotate-l i:before { content: '↺' }

.cr-rotate-r i:before { content: '↻' }