.col-products {
  flex: 0 0 16.66%;
  max-width: 16.66%;
}




.faded-edges {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black, transparent);
  mask-image: linear-gradient(to bottom, transparent, black, transparent);
}


.resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

/* CSS */
#image-container {
  position: relative;
}

#selected-image {
  width: 100px;
  height: 100px;
}

#resize-handle {
  width: 5px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #000;
  cursor: ew-resize; /* Cursor style for horizontal resizing */
}


#clearmockup:hover {
  animation: bounce 1.0s linear infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}


#spin-icon:hover {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}












html:focus-within {
  scroll-behavior: smooth;
}
#slideshow {
  position: relative;
  height: 200px; /* adjust as needed */
}

#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1s;
}

#slideshow img.active {
  opacity: 1;
}


.flash-color {
  background-color: #212529 !important; /* Use !important if needed to override other styles */
  color: #ffffff; /* Set the text color to white if needed */
  transition: background-color 0.5s; /* Optional: Add a transition for a smooth color change */
}



.bordered {
  border: 5px outset black;
  border-radius: 12px;
}

.zoom-effect:hover {
  transform: scale(.7);
  transition: transform .2s;
}

#loading_icon {
  position: absolute;
  /* top: 50%; */
  left: 50%;
  transform: translate(-50%, -50%); /* centers the element */
  /* remove the blur effect from this element */
}













.image-container {
  position: relative; 
  background-color: #f3f3f3; 
  height: 100%; 
  width: 100%; 
  overflow: hidden;
}

/* Center the spinner in the image container */
.image-container .spinner-grow {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
}

.image-container img {
  opacity: 0; /* Set initial opacity of the image to 0 */
  transition: opacity 0.5s ease-in-out; 
  height: 100%; 
  width: 100%; 
  object-fit: cover; 
  display: block; /* Ensure the image takes up the full space of its parent */
}

/* When the image is loaded, it will have the .image-loaded class */
.image-container.image-loaded img {
  opacity: 1;
}

.image-container.image-loaded .spinner-grow {
  display: none; /* Hide the spinner */
}

.hover-image-container {
  position: relative;
  display: inline-block;
}











.card .hover-image-overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 59%;
  max-width: 90%;
  z-index: 100;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: midnightblue;
}


.hover-image-overlay .card-body {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  color: white;
}

.download-symbol {
  color: white; /* white download symbol */
}


.hover-image-container:hover {
  border: 5px solid #6e6e6e;
}

.selectedPic {
  border: 5px solid #000000;
}
.overlay-image {
max-height: 59%;
max-width: 90%;
}

.share-icon-container {
position: absolute;
bottom: 20px;
right: 3px;
display: none;
}

.hover-image-container:hover .share-icon-container {
display: block;
}

.share-icon {
font-size: 24px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
padding: 8px;
cursor: pointer;
}

.share-icon:hover {
background-color: rgba(0, 0, 0, 0.7);
}

#product_image, .selected-image {
  height: auto;
}

#product_image.parentElement {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.plus-symbol {
  margin: 0 10px;
}

.selected {
  background-color: #00ff00; 
}

#product_showcase img {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* if you want to align items horizontally */
  height: 100%; /* adjust based on your need */
  overflow: auto; /* add scrollbar if needed */
}

#product_showcase img.mockup-image {
  max-width: 100%;
  height: auto;
  min-height: 0;  /* added this line */
}


.custom-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px; /* adjust as needed */
}



#images_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#images_container img {
  width: 45%; /* Adjust this value as needed */
  height: auto;
}


#generated_mockup_span {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Spinning/loading icon */

.spinner {
  /* margin: 100px auto; */
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  animation-delay: -1.1s;
}

.spinner .rect3 {
  animation-delay: -1.0s;
}

.spinner .rect4 {
  animation-delay: -0.9s;
}

.spinner .rect5 {
  animation-delay: -0.8s;
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4) }  
  20% { transform: scaleY(1.0) }
}

.right-side {
  float: right;
}