/* 
--------------------------------------------------------
Custom Lightbox CSS for Information Box Carousel Images
--------------------------------------------------------
Description: This CSS handles the styling for the custom lightbox that displays when users click on images in the Information Box Carousel. It includes styles for the overlay, image display, and the close (X) button with correct alignment.
Author: Ruslan Tkach
Date: 07/10/2024
--------------------------------------------------------
*/
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    color: white;
}

#lightbox-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80%; /* Leave space for title/content below */
    display: block;
    margin-bottom: 10px; /* Space between image and title/content */
}

#lightbox-info {
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Align text inline with the image */
}

#lightbox-title {
    font-size: 20px;
    font-weight: bold;
    color: white; /* Set the title color to white */
    margin-bottom: 5px; /* Smaller space between title and content */
}

#lightbox-text {
    font-size: 16px;
    margin-top: 0; /* Remove extra space between title and content */
}

#lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    line-height: 1;
    width: 30px;
    height: 30px;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}