body > #photos {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	width: 99.9vw;
	height: 99.9vh;
	box-sizing: border-box;
	display : none ;
	background-color : #000000d6 ;
}

body > #photos header h2 {
	background: #404040;
	border-top-right-radius: 0.5em ;
	border-top-left-radius: 0.5em ;
	color : white ;
	font-weight : 900;
	padding: 0.5em 1em;
	display: inline-block;
	margin: 0;
	font-size: 1rem;
	padding-left: 5px;
	padding-right: 0;
}

body > #photos nav {
	width: 9em;
	box-sizing: border-box;
	background: #404040;
	height : 99.9vh;
	position:absolute ;
	padding-top:3em;
}
body > #photos nav h2 {
	background: #404040;
	border-top-right-radius: 0.5em ;
	border-top-left-radius: 0.5em ;
	color : white ;
	font-weight : 900;
	padding: 0.5em 1em;
	display: inline-block;
	margin: 0;
	font-size: 1rem;
}
body > #photos nav #vignettes {
	width: 100%;
	box-sizing: border-box;
	height : calc(100% - 8em);
	overflow-x:hidden;
	overflow-y:auto;
	border: 2px solid #404040;
	text-align:center ;
}
body > #photos nav h3 {
	color: white;
	font-size: 80%;
	border-top: 0.5px solid white;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	padding-left: 1em;
}
body > #photos[mode="planche"] nav {
	width: 96vw;
}
body > #photos[mode="planche"] nav .vignettes {
	display : flex ;
	align-content: space-between;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
body > #photos[mode="planche"] nav h3 {
	display : none ;
}

body > #photos .vignette {
	margin : 0.3em;
	max-width : 7em;
	max-height : 5em ;
}

body > #photos #centralPic {
	position: absolute;
	max-width: 70vw;
	max-height: 70vh;
	top: 18vh;
	left: 30vw;
	z-index: 9999;
	text-align: center;
	box-shadow: 10px 10px 5px 0px rgba(30,30,30,0.7);
}

#photos[picVisible="-1"] #centralPic, #photos[picVisible="-1"] .marker, #photos[picVisible="-1"] #picLabel {
	display : none ;
}

body > #photos #picLabel {
	color : white;
	max-width: 54vw;
	font-size : 80%;
	position : absolute ;
	top : 8.5vh;
	left : 12vw ;
	z-index: 15000;
}

#photos #picLabel a {
    color: white;
}

#photos #picLabel ul {
	text-align : justify;
}

#photos #picLabel .openInNewTab {
	position: absolute;
	bottom: 5;
	right: 5;
}

#photos .actionIcon {
	height: 1em;
}

#picsToolbar {
	position: absolute;
	top: 8.5vh;
	right: 2em;
}

#picsToolbar div.actions {
	display: inline-block;
	text-align: center;
	padding: 0.1em;
	border-radius: 0.3em;
	border: 0.5px solid #0090C0;
	margin-top: 0.2em;
	line-height: 1.1em;
}

#picsToolbar div.actions .actionIcon {
	transition: all .2s ease-in-out;
	height: 1.1em;
	width: auto !important;
	cursor: pointer;
	position: relative;
	top: 0 !important;
	background-size: 100% 100%;
	border: 0px solid transparent;
	padding: 0;
	background-color: transparent;
	margin: 0 !important;
}

#photos .marker {
	background-color: #076a1bf0;
	padding: 0 0.2em;
	font-family: sans-serif;
	position: absolute;
	z-index : 2000 ;
	user-select: none ;
}

#photos[markersMode="hidden"] .marker {
	display : none ;
}

#photos #loadVignettes {
	position: fixed;
	top: 50vh;
	left: 50vw;
	transform: translate(-50%, -50%);
	width: 30em;
	height: 2em;
}

#picLabel .comment {
	max-width: 17em;
	border-top: 1px solid lightgray;
	padding-top: 0.2em;
}

h2 .tags {
	display: none;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.1em;
}

h2 .picTag {
	display: inline-block;
	border: 1px solid gray;
	font-weight: 400;
	padding: 0.2em 0.2em 0 0.2em;
	border-radius: 0.2em;
	font-size: 80%;
	background-color: #b0b0b0;
	color: #3c3434;
	cursor : pointer ;
	user-select: none ;
}

h2 .picTag[active="1"] {
    background-color: #35a835;
}