.drop-zone {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #f8f9fa; 
  border: 2px dashed #6c757d; 
  border-radius: 0.5rem; 
  padding: 1.5rem;
}

.drop-zone:hover {
  background-color: #e9ecef;
  border-color: #0d6efd; 
}


.drop-zone.dragover {
  border-color: #0d6efd;
  background-color: #e7f1ff;
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

/*    .drop-zone {
      border: 2px dashed #5bc0de;
      padding: 20px;
      margin-top: 10px;
      color: #888;
      background: #fff;
      cursor: pointer;
    }*/

    .thumbnail {
      position: relative;
      margin: 0px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      text-align: center;
    }

    .thumbnail img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
	  text-align: center;
    }

    .dimension-label {
      margin-top: 8px;
      font-size: 13px;
      font-weight: bold;
      color: #333;
    }

.remove-btn {
  margin-top: 8px;
  width: 100%;
  background-color: #d9534f;
  color: white;
  border: none;
  padding: 6px 0;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

    #preview .col-xs-6,
    #preview .col-sm-4,
    #preview .col-md-3 {
      padding-left: 5px;
      padding-right: 5px;
    }

    #statusMessage {
      margin-top: 20px;
	  margin-bottom:20px;
      font-weight: bold;
    }