@charset "utf-8";

html, body { font-family: arial; }
.dropzone1 { background-color: #EEEEEE; text-align: center; position: relative; border: 1px solid #DDDDDD; display: inline-block; }
.dropzone1:after { content: ''; font-size: 30px; color: #BBBBBB; position: absolute; bottom: 60%; left: 0; width: 100%; text-align: center; z-index: 0; }
.dropzone1:before { content: ''; font-family: "Glyphicons Halflings"; font-size: 60px; color: #DBDBDB; position: absolute; top: 40%; left: 0; width: 100%; text-align: center; z-index: 0; }
.dropzone1.loading:after { content: 'Please wait, image is loading'; }
.dropzone1.loading:before { content: ''; }
.dropzone1.done:after { content: ''; }
.dropzone1.done:before { content: ''; }
/* not an image */
.dropzone1.notAnImage { background-color: #F2DEDE; border-color: #EBCCD1; }
.dropzone1.notAnImage:after { content: 'The selected file is not an image!'; color: #A94442; }
.dropzone1.notAnImage:before { content: ''; color: #EBCCD1; }
.dropzone1.alert-danger { background-color: #F2DEDE; }
.dropzone1.alert-danger:after { content: ''; }
.dropzone1.smalltext:after { font-size: 20px; }
.dropzone1 > span { font-size: 30px; color: #BBBBBB; position: absolute; top: 35%; left: 0; width: 100%; text-align: center; z-index: 0; }
.dropzone1 > span.loader { display: none; }
.dropzone1 > input[type=file] { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 0; cursor: pointer; z-index: 2; /* IE HACK*/ height: 100%; }
.dropzone1 > input[type=text] { display: none; }
.dropzone1 .progress { bottom: 10px; left: 10px; right: 10px; display: none; }
.dropzone1 .cropWrapper { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: #EEEEEE; }
/*.dropzone1 canvas.final			{ background-color: #eeeeee;}*/
.dropzone1 img { z-index: 5; position: relative; max-width: none; }
.dropzone1 img.ghost { opacity: 0.2; z-index: auto; /* HACK for not scrolling*/ float: left; }
.dropzone1 img.main { cursor: move; }
.dropzone1 .final img.main { cursor: auto; }
.dropzone1 img.preview { width: 100%; }
.dropzone1 .tools { position: absolute; top: 10px; right: 10px; z-index: 999; display: inline-block; }
.dropzone1 .tools > * { margin: 0 0 0 5px; }
.dropzone1.smalltools .tools .btn { padding: 1px 4px; font-size: 12px; }
.html5imageupload { background-color: #EEEEEE; text-align: center; position: relative; border: 1px solid #DDDDDD; display: inline-block; }
.html5imageupload:after { content: 'Drop your image here or click to add one!'; font-size: 30px; color: #BBBBBB; position: absolute; bottom: 60%; left: 0; width: 100%; text-align: center; z-index: 0; }
.html5imageupload:before { content: ''; font-family: "Glyphicons Halflings"; font-size: 60px; color: #DBDBDB; position: absolute; top: 40%; left: 0; width: 100%; text-align: center; z-index: 0; }
.html5imageupload.loading:after { content: 'Please wait, image is loading'; }
.html5imageupload.loading:before { content: ''; }
.html5imageupload.done:after { content: ''; }
.html5imageupload.done:before { content: ''; }
/* not an image */
.html5imageupload.notAnImage { background-color: #F2DEDE; border-color: #EBCCD1; }
.html5imageupload.notAnImage:after { content: 'The selected file is not an image!'; color: #A94442; }
.html5imageupload.notAnImage:before { content: ''; color: #EBCCD1; }
.html5imageupload.alert-danger { background-color: #F2DEDE; }
.html5imageupload.alert-danger:after { content: ''; }
.html5imageupload.smalltext:after { font-size: 20px; }
.html5imageupload > span { font-size: 30px; color: #BBBBBB; position: absolute; top: 35%; left: 0; width: 100%; text-align: center; z-index: 0; }
.html5imageupload > span.loader { display: none; }
.html5imageupload > input[type=file] { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 0; cursor: pointer; z-index: 2; /* IE HACK*/ height: 100%; }
.html5imageupload > input[type=text] { display: none; }
.html5imageupload .progress { bottom: 10px; left: 10px; right: 10px; display: none; }
.html5imageupload .cropWrapper { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: #EEEEEE; }
/*.html5imageupload canvas.final			{ background-color: #eeeeee;}*/
.html5imageupload img { z-index: 20; position: relative; }
.html5imageupload img.ghost { opacity: 0.2; z-index: auto; /* HACK for not scrolling*/ float: left; }
.html5imageupload img.main { cursor: move; }
.html5imageupload .final img.main { cursor: auto; }
.html5imageupload img.preview { width: 100%; }
.html5imageupload .tools { position: absolute; top: 10px; right: 10px; z-index: 999; display: inline-block; }
.html5imageupload .tools > * { margin: 0 0 0 5px; }
.html5imageupload.smalltools .tools .btn { padding: 1px 4px; font-size: 12px; }
.dropzone_popup select, .dropzone_popup textarea, .dropzone_popup input[type="text"] { height: auto; }
/*Logged Out*/
.dropzone_block:first-child { margin-left: 0; }
.dropzone_block:last-child { margin-right: 0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.dropzone1 { background-color: #EEEEEE; position: relative; border: 1px dashed #A7A7A7; display: inline-block; background-image: url(../../../../components/com_bis/assets/images/bannercrop.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media screen and (max-width: 770px) and (min-width: 550px) {
	.dropzone_block { float: left !important; text-align: center; width: 47% !important; max-width: 48% !important; }
	#preview_image { float: none !important; margin: 0 auto; }
	.container { padding-left: 8px; padding-right: 0px; }
}
@media screen and (max-width: 549px) {
	.dropzone_block { float: left !important; margin: 0 15px 0 0; text-align: center; width: 97% !important; max-width: 100% !important; }
	#preview_image { float: none !important; margin: 0 auto; }
	.container { padding-left: 8px; padding-right: 6px; }
}