.error {
    color: red;
    font-weight: bold;
}

.success {
    color: green;
    font-weight: bold;
}

.note {
    color: gray;
    font-style: italic;
}

.clickable {
    cursor: pointer;
}

.thumbnail {
    height: 200px;
    object-fit: contain;

}

.profile-picture-sm {
    width: 40px;
    height: 40px;
    border-radius: 35%;
}

.scrollable-feed {
    height: 400px; /* Adjust the height as needed */
    overflow-y: auto;
}

.carousel-item {
    height: 200px; /* Set the height you want */
    object-fit: contain; /* Optional: for <img> inside carousel-item to cover the area */
}

div.view-product-carousel div.carousel-item {
    height: 100%;
    max-height:600px;
    object-fit: contain;
}

div.booth-carousel{
    height: 300px;
    object-fit: contain;
}

div.booth-carousel div.carousel-item img {
    height:300px;
}

.cart-thumbnail {
    max-height: 200px;
    object-fit: contain;
}

.cart-thumbnail img {
    max-height: 200px;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

div.add-product-carousel div.carousel-inner div.carousel-item img {
    max-height:200px;
    height:100%;
    width:100%;
    object-fit: contain;
}
  
/* If you're using <img> elements inside the carousel item, this ensures they cover the entire area */
div.view-product-carousel .carousel-item img {
    width: 100%;
    max-height:600px;
    object-fit:contain; /* This makes the image cover the area, similar to background-size: cover; */
}

.carousel-control-prev, .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
}

/* Optionally, you might want to ensure that the entire button area is clickable and has the background, not just the icon: */
.carousel-control-prev span, .carousel-control-next span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

#booth_image img {
    max-height: 300px;
    object-fit: contain;
}