@charset "utf-8";

html, body                      { font-family: arial; }

.dropzone                       {background-color: #f7f7f7;text-align: center;position: relative;border: 1px solid #dddddd;display: inline-block;}
.dropzone:after                 {content: 'Déposez votre image ici ou cliquez pour en ajouter une!';font-size: 20px;color: #383838;padding-left: 20%;padding-right: 20%;position: absolute;bottom: 44%;left: 0;width: 100%;text-align: center;z-index:0;}
.dropzone: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;}

.dropzone.loading:after         { content: 'Please wait, image is loading'; }
.dropzone.loading:before        { content: ''; }

.dropzone.done:after            { content: '';}
.dropzone.done:before           { content: '';}

/* not an image */
.dropzone.notAnImage            { background-color: #f2dede; border-color: #ebccd1; }
.dropzone.notAnImage:after      { content: 'The selected file is not an image!'; color: #a94442; }
.dropzone.notAnImage:before     { content: ''; color: #ebccd1; }

.dropzone.alert-danger          { background-color: #f2dede; }
.dropzone.alert-danger:after    { content: ''; }

.dropzone.smalltext:after       { font-size: 20px; }

.dropzone > span                { font-size: 30px; color: #bbbbbb; position: absolute; top: 35%; left: 0; width: 100%; text-align: center; z-index:0;}
.dropzone > span.loader         { display: none; }
.dropzone > input[type=file]    { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 0; cursor: pointer; z-index:2; height: 100% /* IE HACK*/ }
.dropzone > input[type=text]    { display: none; }

.dropzone .progress             { bottom: 10px; left: 10px; right: 10px; display: none;  }

.dropzone .cropWrapper          { overflow: hidden; position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: #eeeeee; text-align: left;}
/*.dropzone canvas.final            { background-color: #eeeeee;}*/

.dropzone img                   { z-index: 5; position: relative; }
.dropzone img.ghost             { opacity: .2; z-index: auto; float:left /* HACK for not scrolling*/; }
.dropzone img.main              { cursor: move; }
.dropzone .final img.main       { cursor: auto; }
.dropzone img.preview           { width: 100%; }

.dropzone .tools                { position: absolute; top: 10px; right: 10px; z-index: 999; display: inline-block; }
.dropzone .tools > *            { margin: 0 0 0 5px; }

.dropzone.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: 'Déposez votre image ici ou cliquez pour en ajouter une!'; 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; height: 100% /* IE HACK*/ }
.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: .2; z-index: auto; float:left /* HACK for not scrolling*/; }
.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; }

.cross-btn {
  background: rgb(255 255 255 / 80%);
  border: rgb(255 255 255 / 80%);
  color: #292929;
}

.cross-btn i {
  font-size: 14px;
  position: initial;
  right: initial;
  top: initial;
  color: #292929;
  width: 15px;
  height: 15px;
  display: block;
  font-weight: 100 !important;
}

.cross-btn.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #FFF !important;
}

.cross-btn.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.cross-btn.btn-danger i, .cross-btn.btn-success i {
  color: #e2e2e2;
}