/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden}
#cboxWrapper {max-width:none}
#cboxOverlay{position:fixed; width:100%; height:100%}
#cboxMiddleLeft, #cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:auto}
#cboxTitle{margin:0}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box}

#cboxOverlay{background:#fff; opacity: 0.7; filter: alpha(opacity = 70)}

#cboxPrevious,
#cboxNext,
#cboxCurrent,
#cboxClose {
    position: absolute;
    font-weight: 500;
    text-shadow: 0 0 0.5rem #000, 0 0 0.25rem #000, 0 0 1px #000;
}

#cboxClose, #cboxNext {padding: 0 0.5rem 0 0}
#cboxPrevious {padding: 0 0 0 0.5rem}

#colorbox{outline:0}

#cboxTopLeft{width:25px; height:25px}
#cboxTopCenter{height:25px}
#cboxTopRight{width:25px; height:25px}
#cboxBottomLeft{width:25px; height:25px}
#cboxBottomCenter{height:25px}
#cboxBottomRight{width:25px; height:25px}
#cboxMiddleLeft{width:25px}
#cboxMiddleRight{width:25px}

#cboxContent{box-sizing: border-box;background-color:#fff; overflow:hidden; border: white solid 0.5rem; border-radius: 0.5rem; box-shadow: #000 0 0 1rem 0}
.cboxIframe{background:#fff}
#cboxError{padding:50px; border:1px solid #ccc}
/*#cboxLoadedContent{margin-bottom:20px}*/
#cboxTitle{position:absolute; bottom:0; left:0; text-align:center; width:100%; color:#999}
#cboxCurrent{bottom:0.5rem; left:50%; translate: -50% 0; color:#fff}
#cboxLoadingOverlay{background:#fff url(/assets/image/ajax-loader.gif) no-repeat 5px 5px}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border: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:0; right:42px; color:#444}
#cboxPrevious{inset: 0 50% 0 0; color:#444;text-align:start}
#cboxNext{inset: 0 0 0 50%; color:#444;text-align:end}
#cboxClose{top:0; right:0; display:block; color:#fff}

/*******************************************************************************
 * Customizations
 ******************************************************************************/
div#cboxCurrent {
	margin-left: 25px;
}

.cboxPhoto {
	display: block;
}

#cboxContent :focus {
    outline: none;
}

#cboxPrevious,
#cboxNext {
	color: transparent !important;
	text-shadow: none !important;
	user-select: none;
	display: flex;
	align-items: center;
	transition: padding-inline 0.2s, color 0.2s, border-radius 0.2s, background-color 0.2s;
	padding-inline: 0.75rem !important;


	&::before,
	&::after {
		font-size: 4rem;
		color: #fff;
		text-shadow: 0 0 1px black, 0 0 1rem black, 0 0 2rem black, 0 0 3rem black;
	}

	&:hover,
	&:active {
		padding-inline: 0.5rem !important;

		&::before, &::after {
			color: #8bf;
		}
	}

	&:focus-visible {
		border-radius: 0.5rem;
		box-shadow: inset 3.25rem 0 0 0 rgba(0, 0, 0, 0.35);
	}
}

#cboxPrevious::before {
	content: "\2770";
}

#cboxNext {
	justify-content: flex-end;

	&::after {
		content: "\2771";
	}

	&:focus-visible {
		box-shadow: inset -3.25rem 0 0 0 rgba(0, 0, 0, 0.35);
	}
}