@font-face {
	  font-family: 'iconfont';
	  src: url('/Content/iconfont.ttf') format('truetype');		
	  font-weight: normal;
	  font-style: normal;
	}

	.cropit-preview {
		background-color: #f8f8f8;
		background-size: cover;
		border: 5px solid #ccc;
		border-radius: 3px;
		margin: 50px;
	}

	.cropit-preview-image-container {
		cursor: move;
	}

	.cropit-preview-background {
		opacity: .2;
		cursor: auto;
	}

	.image-size-label {
		margin-top: 10px;
	}

	input.export {
		/* Use relative position to prevent from being covered by image background */
		position: relative;
		z-index: 10;
		display: block;
	}

	button {
	margin-top: 10px;
	}

	.rotate-ccw {
	content: "\f0e2";
	}
  
	.controls-wrapper {    
		margin-top: 20px;
		text-align: center;
		color: #555;
		font-size: 16px;
	}
  
	.icon-rotate-left::before {
		content: "\f0e2";
	}

	.icon-rotate-right::before {
		content: "\f01e";
	}
	
	.icon-image::before {
		content: "\e900";
	}
	
	.large-image {
		font-size: 24px;
	}
	
	.small-image {
		font-size: 16px;
	}
	
	.iconFont {
		font-family: 'iconfont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
        float: left;
        margin: 0 15px;
	}

.rotation-btns {
    width: 100px;
    float: left;
}

.slider-wrapper {
    width: calc(100% - 100px);
    float: left;
}

.cropit-image-zoom-input {
    float: left;
    width: 50% !important;
}

.imageCropperPreview {
    display: none;
}