#drop-area {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  color: #333;
  margin-bottom: 20px;

  &.highlight {
    border-color: #28a745;
  }

  & p {
    margin: 10px 0;
  }
}

/* #image-preview {
  display: none;
} */
.transition {
  transition: 1s ease-in-out;
}

.cus-wrap {
  width: 100vw;
  min-height: 50vh;
  & .bg-color {
    & li {
      position: relative;
      width: 9%;
      aspect-ratio: 1;
      /* margin: 5px; */
      border-radius: 50%;
      border: 1px;
      cursor: pointer;
    }
  }
  & .bg-images {
    & li {
      width: 75px;
      aspect-ratio: 1;
      border-radius: 10px;
      margin: 5px;
    }
  }

  & .displayImg {
    & #bg {
      margin: auto;
      width: 500px;
      height: 500px;
      background-size: cover;
      border-right-color: center;
      border: 1px solid var(--primary-color);
      overflow: hidden;
      border-radius: 10px;
      @media (max-width: 500px) {
        width: auto;
        height: auto;
        max-height: 450px;
      }
      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      /* max-width: 500px; */
      /* aspect-ratio: 1; */
    }
  }
}

.afterProcessed,
.processing {
  display: none;
}