/* Lightbox styles */
.lb-loader,.lightbox{text-align:center;line-height:0;position:fixed;left:0;top:0;width:100%;height:100%}
.lightbox{z-index:10000;font-weight:400;background:rgba(0,0,0,0.9)}
.lb-outerContainer{position:relative;background-color:transparent;width:250px;height:250px;margin:0 auto;border-radius:4px;display:flex;justify-content:center;align-items:center}
.lb-outerContainer::after{content:"";display:table;clear:both}
.lb-loader{position:absolute;top:43%;left:0;height:25%;width:100%;text-align:center;line-height:0;z-index:10001}
.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;border:2px solid #fff;border-radius:50%;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Navigation */
.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
.lb-container>.nav{left:0}

/* Previous button */
.lb-nav a.lb-prev{
    position:absolute;
    left:0;
    top:0;
    width:45%;
    height:100%;
    cursor:pointer;
    opacity:0.7;
    z-index:10;
    display:flex;
    align-items:center;
    padding-left:20px;
}
.lb-nav a.lb-prev:after{
    content:"<";
    color:white;
    font-size:24px;
    font-weight:bold;
}

/* Next button */
.lb-nav a.lb-next{
    position:absolute;
    right:0;
    top:0;
    width:45%;
    height:100%;
    cursor:pointer;
    opacity:0.7;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:20px;
}
.lb-nav a.lb-next:after{
    content:">";
    color:white;
    font-size:24px;
    font-weight:bold;
}

/* Additional Next/Prev buttons at the top */
.lb-nav:before, .lb-nav:after{
    content:">";
    position:absolute;
    top:20px;
    right:60px;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    color:white;
    opacity:0.7;
    cursor:pointer;
}

.lb-nav:before{
    content:"<";
    right:auto;
    left:60px;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover,
.lb-nav:before:hover,
.lb-nav:after:hover{
    opacity:1;
}

.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.lb-dataContainer::after{content:"";display:table;clear:both}
.lb-data{padding:0 4px;color:#ccc}
.lb-details{width:85%;float:left;text-align:left;line-height:1.1em}
.lb-caption{font-size:13px;font-weight:700;line-height:1em}
.lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}

/* Close button */
.lb-close{display:block;float:right;width:30px;height:30px;text-align:right;outline:0;opacity:.7;position:relative;cursor:pointer;background:none;border:none}
.lb-close::before,.lb-close::after{content:'';position:absolute;width:2px;height:30px;background-color:white;top:0;left:50%}
.lb-close::before{transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-close:hover{opacity:1}
.lb-closeContainer{position:fixed;top:20px;right:20px;z-index:10003}

#lightboxOverlay{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(0,0,0,0.9);opacity:1;display:none}
.lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;transition:opacity 0.3s ease-in-out}

/* Remove default button styles */
.lb-nav a:after,
.lb-nav a:before {
    content: none !important;
}

.lb-nav button,
.lb-nav input[type="button"] {
    display: none !important;
}