div.jquery-ajout-image
{
  border:0px solid black;
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

div.jquery-ajout-image > div:nth-child(1)
{
  flex:1;
  border:0px solid green;
  display: flex;
  flex-direction: row;
}

div.jquery-ajout-image div.cropper
{
  border:0px solid red;
  width: 600px;
  height: 400px;
  padding:0px;
  margin:10px;
  position: relative;
}

div.jquery-ajout-image div.cropper .cropper-container
{
  margin:auto;
}

div.jquery-ajout-image div.cropper img
{
  max-width: 100%;
}

div.jquery-ajout-image div.chargement
{
  display: none;
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  /*background:url(../images/bx_loader.gif) #fff center center no-repeat;*/
  background: #fff;
}

div.jquery-ajout-image div.chargement > div
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

div.jquery-ajout-image div.chargement > div > div
{
  min-width: 150px;
  width: 50%;
  height: 10px;
  border-radius: 5px;
  border:1px solid #555;
  box-shadow: 0px 0px 2px #555;
  position: relative;
  overflow: hidden;
  background: #eee;
}

div.jquery-ajout-image div.chargement > div > div > div
{
  position: absolute;
  height: 100%;
  width:30%;
  filter:blur(1px);
  top:0;
  left:0;
  background: linear-gradient(#ccc, #aaa);
}

div.jquery-ajout-image div.upload-image
{
  display: none;
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background: #eee;
  cursor: pointer;
  box-shadow: 0px 0px 2px #777;
}

div.jquery-ajout-image div.upload-image:hover
{
  background: #ddd;
}

div.jquery-ajout-image div.upload-image > div
{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.jquery-ajout-image div.upload-image > div > div
{
  border:0px solid black;
  text-align: center;
}

div.jquery-ajout-image div.upload-image span.bouton-upload-image
{
  border:0px solid black;
}

div.jquery-ajout-image div.upload-image span.bouton-upload-image
{
  font-size:50px;
}

div.jquery-ajout-image div.previsualisation
{
  width: 300px;
  border:0px solid yellow;
  padding:10px;
  border-left:2px outset #ddd;
}

div.jquery-ajout-image div.previsualisation .preview
{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin:auto;
  margin-top:-15px;
  margin-bottom: 20px;
  position: relative;
  background: url("../images/no-image.png") no-repeat center center;
  background-size: 100%;
}

div.jquery-ajout-image div.previsualisation .preview > div
{
  width: 100%;
  height: 100%;
}

div.jquery-ajout-image div.previsualisation .bouton
{
  width: 50%;
  margin:auto;
  border:1px solid #bbb;
  border-radius: 5px;
  padding:3px 7px;
  text-align: center;
  cursor:pointer;
  transition: all 0.3s;
  font-weight: bold;
  background: #ddd;
  color:#222;
  margin-bottom:10px;
  text-transform: uppercase;
  font-size:10px;
  letter-spacing: 0.9px;
}

div.jquery-ajout-image div.previsualisation .bouton.valider
{
  background: rgb(255, 79, 79);
  color:white;
}

div.jquery-ajout-image div.previsualisation .bouton:hover
{
  background: #ccc;
}

div.jquery-ajout-image div.previsualisation .bouton.valider:hover
{
  background: rgb(240, 64, 64);
}

div.jquery-ajout-image div.menu-edition-image
{
  border:0px solid blue;
  align-self: left;
  margin:10px;
}

div.jquery-ajout-image div.menu-edition-image i
{
  font-size: 16px;
  transition: all 0.3s;
  padding:10px;
  cursor: not-allowed;
  color:#ddd;
}

div.jquery-ajout-image div.menu-edition-image i.active
{
  cursor:pointer;
  color:#777;
}

div.jquery-ajout-image div.menu-edition-image i.active:hover
{
  color:blue;
}

div.jquery-ajout-image div.menu-edition-image div.separateur-horizontal
{
  display: inline-block;
  margin-left:20px;
}

/* Conteneur affichage externe */

div.conteneur-affichage-jquery-ajout-image
{
  border:0px solid black;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

div.conteneur-affichage-jquery-ajout-image div.ajout-image
{
  position: absolute;
  top:0;
  left:0;
  font-size:30px;
  width: 100%;
  height: 100%;
  border:1px dashed #ccc;
  z-index: 10;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer;
}

div.conteneur-affichage-jquery-ajout-image div.ajout-image:hover
{
  background: #eaeaea;
}

div.conteneur-affichage-jquery-ajout-image div.menu
{
  position: absolute;
  width: 100%;
  background: rgba(0,0,0,0.4);
  bottom: 0;
  left:0;
  display: none;
}

div.conteneur-affichage-jquery-ajout-image div.menu > div
{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content:space-around;
}

div.conteneur-affichage-jquery-ajout-image div.menu > div > div
{
  color:white;
  font-weight: bold;
  cursor:pointer;
  transition: all 0.3s;
  padding:5px 0px;
}

div.conteneur-affichage-jquery-ajout-image div.menu > div > div:hover
{
  background: rgba(0,0,0,0.4);
}

div.conteneur-affichage-jquery-ajout-image div.menu i
{
  font-size: 16px;
}

div.conteneur-affichage-jquery-ajout-image > div.chargement
{
  display: none;
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:url(../images/bx_loader.gif) #fff center center no-repeat;
  z-index: 11;
}