/*-------------------------------------------
--Fullscreen image display
-------------------------------------------*/

main section#fullscreen {
	color: #333;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: sticky;
	background-color: black;
}
/*
main section#fullscreen.fullscreen
{
	display: inline-flex;
}
*/
main section#fullscreen.selected
{
	background-color: #a8c7fa;
}

main section#fullscreen div.media {
	z-index: -1;
}

main section#fullscreen div.media :Where(img, video) {
	
	z-index: -1;
	width: 100%;
	object-fit: contain;
}

main section#fullscreen div.media {
	
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

main section#fullscreen div#infocontent {
	
	display: none;
	width: 350px;
	height: 100%;
	box-sizing: border-box;
	background-color: #fafafa;
	/*border: 1px solid green;*/
	
}

main section#fullscreen div#infocontent.displayinfo {
	
	display: block !important;
}

main section#fullscreen div.ux {
	position: absolute;
    top: 10px;
	cursor: pointer;
	height: 24px;
	width: 24px;
	display: flex;
    align-items: center;
    justify-content: center;
	transition: opacity 0.3s ease;
}

main section#fullscreen div.menubackground {

    position: absolute;
    box-sizing: border-box;
    top: 20px;
    left: 20px;
    width: 105px;
    height: 43px;
    border-radius: 50px;
}

main section#fullscreen div.button-selection span { position: absolute }
main section#fullscreen div.button-selection.notselected span.hover { opacity: 0; }
main section#fullscreen div.button-selection.notselected span.caseselected { opacity: 0; }
main section#fullscreen div.button-selection.notselected:hover span.nothover { opacity: 0; }
main section#fullscreen div.button-selection.notselected:hover span.hover { opacity: 1; }
main section#fullscreen div.button-selection.selected span.nothover { opacity: 0; }
main section#fullscreen div.button-selection.selected span.hover { opacity: 0; }
main section#fullscreen div.button-selection.selected span.caseselected {
	opacity: 1;
	background-color: white;
	color: #0b57d0;
	border-radius: 25px;
	border: 0px;
}

main section#fullscreen div.button-selection
{
	left: 10px;
}

main section#fullscreen div.button-return
{
	left: 40px;
}

main section#fullscreen div.button-info
{
	left: 70px;
}

h3#file_hd_error
{
	color:red;
}

main section#fullscreen div.button-info.error
{
	color: red;
	animation: blink 1s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

main section#fullscreen div.button-leftarrow
{
	left: 10px;
	top: 50%;
}

main section#fullscreen div.button-rightarrow
{
	right: 10px;
	top: 50%;
}

main section#fullscreen div.button-rightarrow.displayinfo
{
	right: 410px; !important;
}

main section#fullscreen div.button-info:hover span {
	transform: rotate(360deg);
	transition: transform 0.75s ease;
}

main section#fullscreen div.button-return:hover span{
	
	font-size: 16px !important;
	transition: font-size 0.3s ease;
}

main section#fullscreen div.arrows {
    background-color: white;
    border-radius: 20px;
	padding: 3px;
}

main section#fullscreen div.arrows:hover{
    background-color: #333;
	color: white;
    border-radius: 20px;
}

main section#fullscreen div.ux span { font-size: 30px !important; }