.drag-area{
  border: 2px dashed #f2f2f2;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.drag-area.active{
  border: 2px solid #f2f2f2;
}
.drag-area .icon{
  font-size: 60px;
}
.drag-area header{
  text-align: center;
  font-weight: 500;
}
.drag-area span{
  font-weight: 500;
}
.drag-area button{
  margin-bottom:10px;
  padding: 5px 10px;
  font-weight: 500;
  border: none;
  outline: none;
  background: #f1f1f1;
  color: #000000;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}

.drag-area button:hover{
  background: rgb(228, 220, 220);
}

.drag-area img{
  height: 20vh;
  max-width: 100%;
  border-radius: 5px;
  object-fit: contain;
}

.divDragArea{
  margin-left : 10px;
}

.cardRecap{
  margin-left : 10px;
  max-width: 140px;
}

.cardHeight{
  min-height: 17vh;
}

/* retirer le margin-left pour tablette et mobile */
@media (max-width: 768px) {
  .divDragArea{
    margin-left : 0px;
    /* remove bg color */
    background-color: transparent !important;
    
  }

  .cardRecap{
    margin-left : 0px;
    /* remove le max width */
    max-width: 100%;
  }
}