.single-image-input{
  position: relative;
  display: block;
}

.single-image-input .single-image-input-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

.single-image-input-image{
  position: relative;
  width: 100%;
  height: 100%;
}

.single-image-input-image>img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.single-image-input-image-mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: opacity .4s ease;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.single-image-input-container:hover .single-image-input-image-mask{
  opacity: .5;
}

.single-image-input .single-image-input-container .uploading-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 992px){
  .single-image-input-image-mask{
    opacity: 0.5;
  }
}