html, body {height: auto;}
body {margin: 0px; font-family: Open Sans;}

.main {width: 100%; max-width: 775px; margin: 0 auto;}

.cropper-editor {width: 100%; max-width: 775px; float: left; border-radius: 6px; border: 1px solid #E5E5E5; position: relative; overflow: hidden;}
.cropper-title {width: calc(100% - 20px); height: 39px; float: left; line-height: 39px; padding: 0 10px; font-size: 14px; font-weight: 700; border-bottom: 2px solid #E5E5E5; background: #F2F2F2;}
.cropper-preview-content {width: calc(100% - 40px); float: left; margin: 20px;}
.cropper-preview {width: 100%; background-size: cover;}
#cropper-image {max-width: 100%;}
.cropper-preview-image-container {cursor: move;}
.cropper-preview-background {opacity: 0.2; cursor: auto;}

.cropper-tools {width: calc(100% - 20px); height: 24px; float: left; padding: 10px; border-top: 1px solid #DDDFE2;}
.cropper-manipulation {float: left; z-index: 9999;}

#cropper-bar-init {width: 150px; margin: 10px 14px;}

.cropper-range-bar-content {float: left;}
.cropper-range-small {width: 24px; height: 24px; background: url("../templates/img/zoom-pequeno.png") center center no-repeat; float: left;}
.cropper-range-bar {float: left;}
.cropper-range-big {width: 24px; height: 24px; background: url("../templates/img/zoom-grande.png") center center no-repeat; float: left;}

.cropper-rotate-content {height: 24px; float: left; margin: 0 0 0 14px;}
.cropper-rotate {width: 24px; height: 24px; outline: none; border: 0; cursor: pointer;}
.cropper-rotate-left {background: url("../templates/img/rotacionar-esquerda.png") center center no-repeat; opacity: 0.7;}
.cropper-rotate-left:hover {opacity: 1;}
.cropper-rotate-right {background: url("../templates/img/rotacionar-direita.png") center center no-repeat; opacity: 0.7;}
.cropper-rotate-right:hover {opacity: 1;}

.cropper-cancel-save {float: right;}
.cropper-button {height: 24px; border-radius: 4px; font-family: Open Sans; font-weight: 600; cursor: pointer;}
.cropper-button-position {float: left; margin: 0 0 0 10px;}
.cropper-cancel-save .cropper-button-cancel {background: #F2F2F2; color: #343434; border: 1px solid #D8D8D8;}
.cropper-cancel-save .cropper-button-cancel:hover {background: #D8D8D8; border: 1px solid #BEBEBE;}
.cropper-cancel-save .cropper-button-export {background: #00B7CE; color: #FFFFFF; border: 1px solid #00899C;}
.cropper-cancel-save .cropper-button-export:hover {background: #00899C; border: 1px solid #005D69;}

@media screen and (max-width: 460px) {
	.cropper-tools {height: 56px; text-align: center;}
	.cropper-manipulation {display: inline-block; float: none;}
	.cropper-cancel-save {float: left; text-align: center; width: 100%;}
	.cropper-button-position {float: none; display: inline-block; margin: 0;}
	.cropper-button-position:nth-child(1) {margin: 0 0 0 10px;}
}