body {
    height: 100%;
    position: relative;
}

#showcase {
    position: fixed !important;
    inset: 2% !important; /* Leaves a small space on all sides */
    background: #f1f1f1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    padding: 40px !important;
    display: none;
    z-index: 99999 !important; /* Ensures it appears above other elements */
    overflow: auto !important; /* Enables scrolling within the popup */
    max-height: 95vh !important; /* Prevents overflow outside the screen */
}

@media screen and (min-width: 1500px) {
    #showcase {
        inset: 15% !important;
    }
}


#showcase * {
    color: #000;
}


#showcase .close:hover {
    cursor: pointer;
}

#showcase .close {
    background-image: url("images/close-dark.svg");
    background-position: 75% 25%;
    background-repeat: no-repeat;
    background-size: 2em 2em;
    border: 0;
    content: '';
    display: block;
    height: 4em;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: 4em;
    top: 0;
    width: 4em;
}


#showcase .content {
    width: 100%;
    margin-top: 40px;
    padding-bottom: 40px;
}


#showcase .content img.content-image {
    margin: 0 auto;
    width: 85%;
    display: block;
    height: auto;
    padding: 2em 0;
}


.showcase-data {
    display: none !important;
}


.my-slider-bar-wrapper {
    padding: 2em 0;
}



/* Image grid */

.img-g-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.img-g-column {
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;
}

.img-g-column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .img-g-column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .img-g-column {
        flex: 100%;
        max-width: 100%;
    }
}


.img-g-column img {
    cursor: pointer;
}

.img-g-column img:hover {
    cursor: pointer;
}