/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{
    background-color:#333333;
    opacity: 0.9;
    filter: alpha(opacity = 90);
}
#colorbox{
    outline:0;
}

#cboxTopLeft{
    width:11px;
    height:11px;
    background-color:#333333;
}
#cboxTopRight{
    width:11px;
    height:11px;
    background-color:#333333;
}
#cboxBottomLeft{
    width:11px;
    height:11px;
    background-color:#333333;
}
#cboxBottomRight{
    width:11px;
    height:11px;
    background-color:#333333;
}
#cboxMiddleLeft{
    width:11px;
    background-color:#333333;
}
#cboxMiddleRight{
    width:11px;
    background-color:#333333;
}
#cboxTopCenter{
    height:11px;
    background-color:#333333;
}
#cboxBottomCenter{
    height:11px;
    background-color:#333333;
}
#cboxContent{
    background:#ffffff; overflow:hidden;
}
.cboxIframe{
    background:#ffffff;
}
#cboxError{
    padding:50px;
    border:1px solid #cccccc;
}
#cboxLoadedContent{
    margin-bottom:0;
}
#cboxTitle{
    position:absolute;
    bottom:3rem;
    left:0;
    width:100%;
    text-align:center;
    padding: 0.2rem 1.85rem;
    color: var(--bs-body-color);
    background-color:rgba(var(--bs-body-bg-rgb), 0.8);
}
#cboxCurrent{
    position:absolute;
    bottom:0.5rem;
    left:0;;
    padding: 0.2rem 0.7rem 0.2rem 1.85rem;
    background-color:rgba(var(--bs-body-bg-rgb), 0.8);
}
#cboxLoadingOverlay{
    background-color:var(--bs-body-color);
}
#cboxLoadingGraphic{
    background:url([[DOCROOT]]/s/spinner.svg) no-repeat center center;
    background-size: 3em;
    animation-name: cboxSpinner;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes cboxSpinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose, #cboxTitleClose, #cboxTitleOpen {
    border:0;
    padding:0;
    margin:0;
    overflow:visible;
    width:auto;
    background:none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
    outline:0;
}

#cboxSlideshow{
    position:absolute;
    bottom:4px;
    right:30px;
    color:rgba(255, 255, 255, 0.5);
}

#cboxPrevious{
    position:absolute;
    width:50%;
    height:100%;
    text-align:left;
    bottom:0;
    left:0;
    display:none;
    color:rgba(255, 255, 255, 0);
}
#cboxPrevious::before {
    display: inline-block;
    color:rgba(255, 255, 255, 0);
    content: "<";
    background-image:url([[DOCROOT]]/s/caret-left.svg);
    background-repeat: no-repeat;
    width:16px;
    height:32px;
}

#cboxPrevious:hover{
}
#cboxNext{
    position:absolute;
    bottom:0;
    left:50%;
    width: 50%;
    height:100%;
    text-align:right;
    display:none;
    color:rgba(255, 255, 255, 0);
}
#cboxNext:after{
    display: inline-block;
    content: ">";
    color:rgba(255, 255, 255, 0);
    background-image:url([[DOCROOT]]/s/caret-right.svg);
    background-repeat: no-repeat;
    width:16px;
    height:32px;
}

#cboxNext:hover{
}
#cboxClose, #cboxTitleClose, #cboxTitleOpen {
    position:absolute;
    top:0.5em;
    right:0.5em;
    width:16px;
    height:32px;
    display:inline-block;
    color:rgba(255, 255, 255, 0.0);
}
#cboxClose:before{
    display: inline-block;
    color:rgba(255, 255, 255, 0.0);
    content: "X";
    background-image:url([[DOCROOT]]/s/times.svg);
    background-repeat: no-repeat;
    width:16px;
    height:32px;
}

#cboxClose:hover{
    background-position:-25px -25px;
}

#cboxTitleClose {
    top: unset;
    bottom: 2.125em;
}
#cboxTitleClose:before {
    content: "X";
    width:16px;
    height:24px;
    display:inline-block;
    background-image:url([[DOCROOT]]/s/times.svg);
    background-repeat: no-repeat;
}
#cboxTitleOpen {
    right: unset;
    left: 0.5em;
}
#cboxTitleOpen:before {
    content: "i";
    width:16px;
    height:32px;
    display:inline-block;
    background-image:url([[DOCROOT]]/s/info.svg);
    background-repeat: no-repeat;
}