html, body {
	margin: 0;
	height: 100%;
	font-family: sans-serif;
}

.mwe-imageeditor-editor {
	background: #262626;
	height: 100%;
}

.mwe-imageeditor-canvas-container {
	position: relative;
	height: 100%;
}

.mwe-imageeditor-canvas-container img,
.mwe-imageeditor-canvas-container canvas {
	max-width: 70%;
	max-height: 70%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mwe-imageeditor-interactivepanel {
	margin-top: 0 !important;
	border-top: none;
	border-radius: 0;
	background: #fff;
}

.mwe-imageeditor-interactivepanel .oo-ui-textInputWidget {
	width: auto;
}

/* Icons */
.oo-ui-icon-rotate-clockwise {
	/* @embed */
	background-image: url( icons/rotate-clockwise.svg );
}

.oo-ui-icon-rotate-counter-clockwise {
	/* @embed */
	background-image: url( icons/rotate-counter-clockwise.svg );
}

.oo-ui-icon-flip-vertical {
	/* @embed */
	background-image: url( icons/flip-vertical.svg );
}

.oo-ui-icon-flip-horizontal {
	/* @embed */
	background-image: url( icons/flip-horizontal.svg );
}

.oo-ui-icon-crop {
	/* @embed */
	background-image: url( icons/crop.svg );
}


/** Crop UI **/
.crop-cover {
	position: absolute;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 201;
}

.crop-cover canvas {
	height: 100%;
	width: 100%;
	position: absolute;
}

.crop-rect {
	box-sizing: border-box;
	border: 2px dashed gray;
	position: relative;
	width: 100px;
	height: 100px;
	background-color: rgba( 0, 0, 0, 0 );
}