@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular-webfont.eot');
	src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Regular-webfont.woff') format('woff'),
		url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Italic-webfont.eot');
	src: url('fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Italic-webfont.woff') format('woff'),
		url('fonts/Roboto-Italic-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Bold-webfont.eot');
	src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Bold-webfont.woff') format('woff'),
		url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-BoldItalic-webfont.eot');
	src: url('fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
		url('fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
		url('fonts/Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Thin-webfont.eot');
	src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Thin-webfont.woff') format('woff'),
		url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Thin-webfont.svg#RobotoThin') format('svg');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-ThinItalic-webfont.eot');
	src: url('fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
		url('fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
		url('fonts/Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Light-webfont.eot');
	src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Light-webfont.woff') format('woff'),
		url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-LightItalic-webfont.eot');
	src: url('fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-LightItalic-webfont.woff') format('woff'),
		url('fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
		url('fonts/Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Medium-webfont.eot');
	src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-Medium-webfont.woff') format('woff'),
		url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
		url('fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-MediumItalic-webfont.eot');
	src: url('fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
		url('fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
		url('fonts/Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
	font-weight: 300;
	font-style: italic;
}

@viewport
{
	zoom: 1.0;
	min-zoom: 1.0;
	max-zoom: 1.0;
	width: device-width;
	min-width: device-width;
	max-width: device-width;
}

body
{
	color:					#212121;
	font-family:			Roboto,Arial,Helvetica,sans-serif;
	background-color:		white;
	-webkit-font-smoothing:	antialiased;

	position:				fixed;
	width:					100%;
	height:					100%;
}

th
{
	text-decoration:		underline;
}

.errorMessage
{
	color:					red;
}

.tip
{
	z-index:				99999;
	font-size:				12px;
	line-height:			16px;
}

.unselectable
{
	-webkit-touch-callout:	none;
	-webkit-user-select:	none;
	-khtml-user-select:		none;
	-moz-user-select:		none;
	-ms-user-select:		none;
	user-select:			none;
}

.clickable
{
	cursor:					pointer;
}

#maincontainer
{
	position:			fixed;
	top:				0;
	right:				0;
	bottom:				0;
	left:				0;
/*
	display:			flex;
	flex-direction:		column;
	position:			fixed;
	width:				100%;
	height:				100%;
	overflow:			hidden;
	align-items:		stretch;
*/
}

#topmenu
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	background-color:		white;
	box-shadow:				rgba(0, 0, 0, 0.137255) 0px 4px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;

	z-index:				10;
}
#topmenu .userprofile .connectbutton
{
	background-color:		dodgerblue;
	color:					white;
	border-radius:			4px;
	font-size:				13px;
	cursor:					pointer;
	display:				inline-block;
	padding:				8px 10px;
	line-height:			18px;
	font-family:			Arial;
}

#topmenu .userprofile .uploadProgressContainer
{
	width:					100px;
	display:				inline-block;
	margin:					0px 48px;
	position:				relative;
}
#topmenu .userprofile .uploadProgressContainer .progressbar .progress
{
	font-size:				12px;
	line-height:			12px;
	text-align:				center;
}
#topmenu .userprofile .uploadProgressContainer .overProgress
{
	position:				absolute;
	left:					-150px;
	width:					400px;
	margin-top:				10px;
	padding:				8px;
	background-color:		white;
	font-size:				14px;
	line-height:			24px;
	box-shadow:				rgba(0, 0, 0, 0.137255) 4px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 2px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;
}
#topmenu .userprofile .uploadProgressContainer .detailedProgress
{
	position:				fixed;
	right:					0px;
	width:					500px;
	margin-top:				10px;
	padding:				8px;
	background-color:		white;
	font-size:				14px;
	line-height:			24px;
	box-shadow:				rgba(0, 0, 0, 0.137255) 0px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;
	max-height:				700px;
	overflow-y:				auto;
	text-align:				left;
}

#topmenu .userprofile .username
{
	cursor:					pointer;
}
#topmenu .userprofile .username:before
{
	content:				'▼';
	padding-right:			10px;
	font-size:				14px;
	margin:					auto;
}

#topmenu .userprofile .menu
{
	position:				fixed;
	right:					8px;
	top:					48px;
	background-color:		white;
	padding:				0px 0px 12px 0px;
	visibility:				hidden;
	font-size:				14px;
	min-width:				250px;
	padding:				5px 24px;
	line-height:			32px;
	box-shadow:				rgba(0, 0, 0, 0.137255) 4px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 2px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;
	transition:				all 0.3s ease;
}

#topmenu .userprofile .menu.active
{
	visibility:				visible;
}

.pagemenu
{
	height:					0px;
}
.filterlist
{
	font-size:				14px;
	color:					grey;
	padding:				0px 84px 8px 84px;
}
.userselectionmenu
{
	background-color:		dodgerblue;
	color:					white;
	font-weight:			bold;
	padding:				12px 84px;
	fill:					white;
	line-height:			26px;
	position:				relative;
}
.userselectionmenu .closeButton
{
	float:					left;
	margin-right:			24px;
	cursor:					pointer;
}
.userselectionmenu .actions
{
	display:				inline-block;
	position:				absolute;
	right:					84px;
	top:					12px;
	height:					26px;
}
.userselectionmenu .actions .button
{
	display:				inline-block;
	cursor:					pointer;
	margin:					0px 8px;
}
.userselectionmenu .actions .button > svg
{
	transition:				all 0.3s ease;
}
.userselectionmenu .actions .button.deletepictures:hover > svg
{
	fill:					tomato;
}
.userselectionmenu .actions .button.downloadpictures:hover > svg
{
	fill:					palegreen;
}

.pagemenu.active
{
	height:					inherit;
}

.multiselectormenu
{
	margin-right:			48px;
	cursor:					pointer;
	transition:				all 0.3s ease;
}

.multiselectormenu:hover
{
	color:					black;
}

.multiselector
{
	cursor:				default;
	background-color:	white;
	padding:			4px 0px 8px 0px;
	margin-left:		-16px;
	font-size:			14px;
	min-width:			150px;
	line-height:		24px;
	z-index:			10;

	box-shadow:			rgba(0, 0, 0, 0.137255) 4px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 2px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;

	transition:			all 0.3s ease;
}

.multiselector div
{
	margin:				0px 8px;
}
.multiselector div.selected
{
	color:				#4285f4;
}

.multiselector .values
{
	margin:				0;
	max-height:			450px;
	overflow-y:			auto;
}

.multiselector div.buttons
{
	padding-top:		5px;
	text-align:			center;
	display:			flex;
	justify-content:	space-around;
}

.multiselector div.buttons input
{
	background-color:	white;
	border:				none;
	color:				grey;
	cursor:				pointer;
}

.multiselector div.buttons input:hover
{
	color:				black;
}

.mainbarcontainer
{
	height:					48px;
	font-size:				20px;
	color:					#212121;
	display:				-webkit-flex;
	display:				flex;
	-webkit-flex-direction:	row;
	flex-direction:			row;
	align-items:			stretch;
	justify-content:		space-between;
	line-height:			46px;
}

.mainbarcontainer > div.withoutOverflow
{
	margin:					auto;
	overflow:				hidden;
	text-overflow:			ellipsis;
	white-space:			nowrap;
}

.mainbarcontainer .menulink
{
	margin-left:		12px;
	text-align:			left;
	flex:				1;
}

.mainbarcontainer .menulink .menubutton--container
{
	float:				left;
	width:				48px;
	height:				48px;
	margin-right:		24px;
	cursor:				pointer;
}

.mainbarcontainer .menulink .menubutton--container svg
{
	height:				24px;
	width:				24px;
	padding:			12px;
	opacity:			0.54;
}

.mainbarcontainer .pagename.withsubmenu
{
	cursor:				pointer;
}
.mainbarcontainer .pagename.withsubmenu:after
{
	content:			'▼';
	padding-left:		10px;
	font-size:			14px;
	margin:				auto;
}
.mainbarcontainer .pagename.clickable
{
	cursor:				pointer;
}
.mainbarcontainer .previous
{
	cursor:				pointer;
	font-size:			16px;
	padding:			10px;
}

.mainbarcontainer .submenu
{
	position:			fixed;
	left:				60px;
	top:				48px;
	background-color:	white;
	padding:			0px 0px 12px 0px;
	visibility:			hidden;
	font-size:			14px;
	min-width:			150px;
	line-height:		32px;

	display:			flex;
	flex-direction:		column;

	box-shadow:			rgba(0, 0, 0, 0.137255) 4px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 2px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;

	transition:			all 0.3s ease;
}

.mainbarcontainer .submenu.onscreen
{
	visibility:			visible;
}

.mainbarcontainer .submenu a
{
	cursor:				pointer;
	padding:			0px 24px;
	text-decoration:	none;
	color:				inherit;
}
.mainbarcontainer .submenu a.current
{
	color:				#4285f4;
	background-color:	#F7F7F7;
}
.mainbarcontainer .submenu a:hover
{
	background-color: #F0F0F0;
}

.mainbarcontainer .middlebar
{
	flex:				2;
	text-align:			center;
}
.mainbarcontainer .middlebar .details
{
	font-size:			14px;
	color:				grey;
	margin-left:		36px;
}

.mainbarcontainer .userprofile
{
	margin-right:		24px;
	text-align:			right;
	flex:				1;
}

#leftmenu
{
	position:			fixed;
	left:					-280px;
	top:					0px;
	width:				280px;
	height:				100%;
	padding-top:		100px;
	background-color:	white;
	font-size:			14px;
	line-height:		24px;
	font-weight:		bold;
	color:				#616161;

	background-color:	white;
	box-shadow:			rgba(0, 0, 0, 0.137255) 0px 16px 24px 2px, rgba(0, 0, 0, 0.117647) 0px 6px 30px 5px, rgba(0, 0, 0, 0.2) 0px 8px 10px -5px;

	transition:			all 0.3s ease;

	z-index:			11;

}

#leftmenu.onscreen
{
	left:					0px;
}

#leftmenu .group
{
	cursor:				pointer;
	padding:			20px 0px;
}

#leftmenu .group a
{
	line-height:		46px;
	text-decoration:	none;
	color:				inherit;
	padding-left:		24px;
}

#leftmenu .group div:hover
{
	background-color:	#F0F0F0;
}

#leftmenu .group div.current
{
	color:				#4285f4;
	background-color:	#F7F7F7;
}

#centralcontainer
{
	position:			absolute;
	top:				48px;
	right:				0;
	bottom:				0;
	left:				0;
/*
	flex:				1;
	position:			relative;
*/
}

#contextualleftmenu
{
	position:			absolute;
	top:				0px;
	left:				0px;
	bottom:				0px;
	width:				48px;
	overflow-x:			hidden;
	overflow-y:			auto;
	transition:			all 0.6s ease;
	box-shadow:			rgba(0, 0, 0, 0.137255) 0px 4px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
	display:			none;
	z-index:			9;
}
#contextualleftmenu .showmenubar
{
	position:			absolute;
	top:				0;
	left:				0;
	bottom:				0;
	right:				0;
	color:				lightgrey;
	font-size:			24px;
	transition:			all 0.4s ease;
	z-index:			2;
	display:			block;
	cursor:				pointer;
}
#contextualleftmenu .hidemenubar
{
	position:			absolute;
	top:				0;
	right:				0;
	bottom:				0;
	width:				24px;
	color:				lightgrey;
	transition:			all 0.4s ease;
	z-index:			2;
	display:			none;
	cursor:				pointer;
}
#contextualleftmenu .showmenubar span, #contextualleftmenu .hidemenubar span
{
	position:			absolute;
	top:				50%;
	width:				100%;
	margin-top:			-12px;
	text-align:			center;
}

#contextualleftmenu .showmenubar:hover, #contextualleftmenu .hidemenubar:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f7f7f7+100&0+0,1+100 */
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(247,247,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(247,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f7f7f7',GradientType=1 ); /* IE6-9 */
	color:				grey;
}
#contextualleftmenu .container
{
	position:			absolute;
	left:				0px;
	top:				0px;
	bottom:				0px;
	width:				280px;
	padding-top:		48px;
	opacity:			0;
	transition:			opacity 0.6s ease;
	z-index:			1;
}



#contextualrightmenu
{
	position:			absolute;
	top:				0px;
	right:				0px;
	bottom:				0px;
	width:				48px;
	overflow-x:			hidden;
	overflow-y:			auto;
	transition:			all 0.6s ease;
	box-shadow:			rgba(0, 0, 0, 0.137255) 0px 4px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
	display:			none;
	z-index:			9;
}
#contextualrightmenu .showmenubar
{
	position:			absolute;
	top:				0;
	left:				0;
	bottom:				0;
	right:				0;
	color:				lightgrey;
	font-size:			24px;
	transition:			all 0.4s ease;
	z-index:			2;
	display:			block;
	cursor:				pointer;
}
#contextualrightmenu .hidemenubar
{
	position:			absolute;
	top:				0;
	left:				0;
	bottom:				0;
	width:				24px;
	color:				lightgrey;
	transition:			all 0.4s ease;
	z-index:			2;
	display:			none;
	cursor:				pointer;
}
#contextualrightmenu .showmenubar span, #contextualrightmenu .hidemenubar span
{
	position:			absolute;
	top:				50%;
	width:				100%;
	margin-top:			-12px;
	text-align:			center;
}

#contextualrightmenu .showmenubar:hover, #contextualrightmenu .hidemenubar:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+100&1+0,0+100 */
	background: -moz-linear-gradient(left, rgba(247,247,247,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(247,247,247,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(247,247,247,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	color:				grey;
}
#contextualrightmenu .container
{
	position:			absolute;
	right:				0px;
	top:				0px;
	bottom:				0px;
	width:				460px;
	padding-top:		48px;
	opacity:			0;
	transition:			opacity 0.6s ease;
	z-index:			1;
}


#contextualleftmenu .link
{
	font-size:			14px;
	text-decoration:	none;
	line-height:		46px;
	padding-left:		16px;
	cursor:				pointer;
}
#contextualleftmenu .link.current
{
	color:				#4285f4;
	background-color:	#F7F7F7;
}

#contextualleftmenu .link:hover
{
	background-color:	#F0F0F0;
}


#centralcontainer.withleftmenu > #contextualleftmenu
{
	display:			block;
}
#centralcontainer.withleftmenu.leftmenuactive > #contextualleftmenu
{
	width:				280px;
}
#centralcontainer.withleftmenu.leftmenuactive > #contextualleftmenu .showmenubar
{
	display:			none;
}
#centralcontainer.withleftmenu.leftmenuactive > #contextualleftmenu .hidemenubar
{
	display:			block;
}
#centralcontainer.withleftmenu.leftmenuactive > #contextualleftmenu .container
{
	opacity:			1;
}
#centralcontainer.withleftmenu > #contentcontainer
{
	margin-left:		48px;
	transition:			all 0.6s ease;
}
#centralcontainer.withleftmenu.leftmenuactive > #contentcontainer
{
	margin-left:		280px;
}



#centralcontainer.withrightmenu > #contextualrightmenu
{
	display:			block;
}
#centralcontainer.withrightmenu.rightmenuactive > #contextualrightmenu
{
	width:				460px;
}
#centralcontainer.withrightmenu.rightmenuactive > #contextualrightmenu .showmenubar
{
	display:			none;
}
#centralcontainer.withrightmenu.rightmenuactive > #contextualrightmenu .hidemenubar
{
	display:			block;
}
#centralcontainer.withrightmenu.rightmenuactive > #contextualrightmenu .container
{
	opacity:			1;
}
#centralcontainer.withrightmenu > #contentcontainer
{
	margin-right:		48px;
	transition:			all 0.6s ease;
}
#centralcontainer.withrightmenu.rightmenuactive > #contentcontainer
{
	margin-right:		460px;
}


#contentcontainer
{
	padding:			48px 48px 150px 48px;
	overflow-y:			scroll;
	-webkit-overflow-scrolling:	touch;
	position:			absolute;
	top:				0;
	left:				0;
	right:				0;
	bottom:				0;
}

#contentcontainer.error
{
	background-color:	#F4F4F4;
}

.albumseparator
{
	font-size:			24px;
	margin-top:			24px;
}

.albumlist
{
	position:			relative;
}

.albumlist .album
{
	display:			inline-block;
	padding:			24px 24px 0px 24px;
	text-align:			center;
	overflow:			hidden;
}

.albumlist .album .cover
{
	cursor:					pointer;
	height:					180px;
	width:					220px;
	box-shadow:				2px 2px 8px grey;
	margin:					auto;
	background-size:		cover;
	background-position:	center;
	position:				relative;
	overflow:				hidden;
}

.albumlist .album .title
{
	position:			absolute;
	bottom:				0px;
	color:				white;
	font-size:			16px;
	font-weight:		bold;
	text-align:			left;
	text-shadow:		0px 0px 8px black, 0px 0px 16px grey;
	margin:				4px 6px;
}

.albumlist .album .details
{
	font-size:			12px;
	padding:			6px 3px 16px 3px;
	opacity:			0;
	transition:			all 0.3s ease;
	position:			relative;
	z-index:			1;
	color:				white;
	text-shadow:		0px 0px 6px black, 0px 0px 10px black, 0px 0px 14px grey;
}
.albumlist .album .details .bg
{
	position:			absolute;
	width:				220px;
	height:				180px;
	top:				-47px;
	left:				0px;
	z-index:			-1;
	background-position:	center;
	background-size:	cover;
	filter:				blur(2px);
	transform:			scaleY(-0.5);
}

.albumlist .album .details .picturedetails
{
	text-align:			left;
}

.albumlist .album .details .picturecount
{
	float:				right;
	text-align:			right;
}

.albumlist .album:hover > .details
{
	opacity:			1;
}

.albumtitle
{
	font-size:			36px;
	margin-top:			48px;
}

.albumdetails
{
	padding:			10px 24px;
	margin-bottom:		24px;
	color:				grey;
	line-height:		24px;
}

.albumdetails .albumselector
{
	display:			inline-block;
}

.albumdetails .albumselector svg
{
	float:				left;
	margin-right:		8px;
	cursor:				pointer;
	fill:				grey;
	fill-opacity:		0.6;
	width:				22px;
	height:				22px;
	transition:			all 0.3s ease;
}
.albumdetails .albumselector:hover > svg
{
	fill-opacity:		1;
}
.albumdetails .albumselector.checked > svg
{
	fill:				dodgerblue;
	fill-opacity:		1;
}

.albumdetails .albumselector.selectpictures:hover > svg, .albumdetails .albumselector.addpictures:hover > svg, .albumdetails .albumselector.sharealbum:hover > svg
{
	fill:				dodgerblue;
}

.albumdetails .albumselector.downloadpictures:hover > svg
{
	fill:				green;
}

.pictureslist
{
	overflow:			hidden;
	transition:			all 1.5s ease;
}

.pictureslist .picture
{
	background-color:	white;
	position:			absolute;
	left:				0;
	top:				0;
}
.pictureslist.animated .picture
{
	transition:			width 0.3s ease-in, transform 1.5s ease;
	transition-delay:	0s, 0.3s;
}

.pictureslist .picture .wrapper
{
	position:				absolute;
	left:					6px;
	top:					6px;
	right:					6px;
	bottom:					6px;
	transition:				all 0.2s linear;
}

.pictureslist .picture .geolocalized_icon
{
	background-image:	url(https://static.xx.fbcdn.net/rsrc.php/v2/y0/r/bqSH_fp-8J4.png);
	width:				37px;
	height:				37px;
	display:			block;
	position:			absolute;
	right:				0;
	top:				0;
	opacity:			0.5;
	filter:				drop-shadow(0px 0px 4px #222);
	-webkit-filter:		drop-shadow(0px 0px 4px #222);
	transition:			opacity 0.3s ease;
}
.pictureslist .picture .favorite_icon
{
	width:				24px;
	height:				24px;
	background-image:	url(../img/star_white_24.png);
	background-size:	cover;
	background-position:	center;
	display:			none;
	position:			absolute;
	right:				32px;
	top:				4px;
	opacity:			0.7;
	cursor:				pointer;
	z-index:			1;
}
.pictureslist .picture.favorited .wrapper .favorite_icon
{
	background-image:	url(../img/star_gold_24.png);
	opacity:			1;
}
.pictureslist .picture:hover > .wrapper .favorite_icon
{
	display:			block;
}
.pictureslist .picture .wrapper .favorite_icon:hover
{
	opacity:			1;
}

.pictureslist .picture .imageselector
{
	cursor:				pointer;
	position:			absolute;
	margin:				8px;
	left:				0;
	top:				0;
	fill:				white;
	fill-opacity:		0.6;
	width:				22px;
	height:				22px;
	border-radius:		18px;
	background-color:	rgba(0,0,0,0.15);
	z-index:			2;

	display:			none;
}
.pictureslist .picture .imageselector:hover
{
	fill-opacity:		1;
}
.pictureslist .picture .imageselector svg
{
	margin:				-1px;
}
.pictureslist .picture.selected
{
	background-color:	dodgerblue;
}
.pictureslist .picture.selected .imageselector
{
	fill:				dodgerblue;
	fill-opacity:		1;
	background-color:	white;
	display:			block;
}
.pictureslist .picture.pending
{
	background-color:	darkgrey;
}
.pictureslist .picture.pending.notSelected
{
	filter:				grayscale(100%);
}

.pictureslist .picture.pending.approve
{
	background-color:	green;
}
.pictureslist .picture.pending.approve .imageselector
{
	fill:				green;
}
.pictureslist .picture.pending.reject
{
	background-color:	red;
}
.pictureslist .picture.pending.reject .imageselector
{
	fill:				red;
}
.pictureslist .picture .contextualmenubutton, .album .cover .contextualmenubutton
{
	cursor:				pointer;
	position:			absolute;
	top:				0;
	right:				0;
	width:				18px;
	height:				20px;
	color:				white;
	font-size:			12px;
	text-align:			center;
	margin:				8px;
	background-color:	rgba(255,255,255,0.3);
	border-radius:		4px;
	line-height:		18px;
	text-shadow:		0px 0px 4px rgba(0,0,0,0.8);
	box-shadow:			0px 0px 2px rgba(50,50,50,0.2);
	display:			none;
	z-index:			2;
}
.pictureslist .picture .contextualmenubutton:hover, .album .cover .contextualmenubutton:hover
{
	background-color:	rgba(255,255,255,0.8);
	text-shadow:		0px 0px 4px rgba(255,255,255,0.8);
	box-shadow:			0px 0px 2px rgba(50,50,50,0.4);
	color:				#333;
}
.pictureslist .picture .contextualmenubutton.active, .album .cover .contextualmenubutton.active
{
	background-color:	rgba(255,255,255,1);
	text-shadow:		0px 0px 4px rgba(255,255,255,0.8);
	box-shadow:			0px 0px 2px rgba(50,50,50,0.4);
	color:				dodgerblue;
	display:			block;
}

.pictureslist .picture .cover
{
	position:				absolute;
	left:					0px;
	top:					0px;
	right:					0px;
	bottom:					0px;
	background-size:		cover;
	background-position:	center;
	box-sizing:				border-box;
/* 	border:					4px solid white; */
	transition:				all 1s ease;
	z-index:				1;
}

@keyframes rotateSpericalPreview
{
	from	{background-position-x: 50%;}
	to		{background-position-x: 200%;}
}

.pictureslist .picture.spherical .cover
{
	background-size:		300%;
	background-position-x:	center;
	background-repeat-x:	repeat;
}
.pictureslist .picture.spherical:hover .cover
{
	animation-name:				rotateSpericalPreview;
	animation-duration:			10s;
	animation-delay:			0.5s;
	animation-iteration-count:	infinite;
	animation-timing-function:	linear;
}

.pictureslist .picture:hover > .wrapper
{
	left:					0px;
	top:					0px;
	right:					0px;
	bottom:					0px;
}

.pictureslist .picture .details
{
	opacity:				0;
	transition:				all 0.3s ease;
	position:				absolute;
	bottom:					0px;
	left:					0px;
	right:					0px;
	padding:				10px 6px 6px 6px;
	color:					white;
	font-size:				12px;
	background-color:		rgba(0,0,0,0.4);
	z-index:				2;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.4+25,0.4+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 25%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 25%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
.pictureslist .picture:hover > .wrapper .details
{
	opacity:				1;
}
.pictureslist .picture:hover > .wrapper .geolocalized_icon
{
	opacity:				1;
}
.pictureslist .picture:hover > .wrapper .imageselector, .pictureslist.selecting > .picture .wrapper .imageselector
{
	display:				block;
}
.pictureslist .picture:hover > .wrapper .contextualmenubutton, .album:hover > .cover .contextualmenubutton
{
	display:				block;
}

.pictureslist .picture.selected > .cover
{
	/* transform:				translateZ(0px) scale3d(0.9, 0.9, 1);
	border-color:			dodgerblue; */
}
.pictureslist .picture.selected > .contextualmenubutton/* , .pictureslist .picture.selected > .details */
{
	display:				none;
}

.pictureslist .picture.pending > .wrapper .favorite_icon, .pictureslist .picture.pending > .wrapper .contextualmenubutton
{
	display:			none;
}

.pictureseparator
{
	margin:					48px 0px 24px 0px;
}

.gmapwrapper
{
	position:			absolute;
	left:				0;
	right:				0;
	top:				0;
	bottom:				0;
}

.gmapwrapper .gmapcontainer
{
	width:				100%;
	height:				100%;
}

.imageIW
{
	left:				5px !important;
	top:				5px !important;
}

.imageCountIW
{
	position:			absolute;
	top:				0px;
	right:				0px;
	color:				white;
	font-weight:		bold;
	background-color:	dodgerblue;
	border-radius:		8px;
	padding:			4px;
	box-shadow:			0px 0px 10px white;
	min-width:			10px;
	text-align:			center;
}

.timeline--container
{
	position:			absolute;
	top:				0;
	left:				0;
	right:				0;
	bottom:				0;
	overflow:			hidden;
}

.timeline--wrapper
{
	position:			absolute;
	top:				0;
	left:				0;
	min-height:			100%;
}

.timeline
{
	position:			absolute;
	top:				0px;
	left:				0px;
	right:				0px;
	height:				90px;
	z-index:			1;
}

.timeline .unit
{
	position:			absolute;
	top:				0px;
	width:				1px;
	margin-left:		-1px;
	background-color:	lightgrey;
	height:				14px;
}
.timeline .unit.withLegend
{
	height:				18px;
	background-color:	grey;
}

.timeline .legend
{
	position:			absolute;
	top:				25px;
	font-size:			11px;
	color:				grey;
	width:				60px;
	margin-left:		-31px;
	text-align:			center;
	z-index:			3;
}

.timeline .unit.withLegend.bigBar
{
	background-color:	black;
	width:				2px;
	margin-left:		-1px;
}

.timeline .legend.blackText
{
	top:				24px;
	font-size:			12px;
	color:				black;
}
.timeline .legend.boldBlackText
{
	top:				24px;
	font-size:			12px;
	color:				black;
	font-weight:		bold;
}
.timeline .legend.boldBlackTextBottom
{
	top:				30px;
	font-size:			12px;
	color:				black;
	font-weight:		bold;
}

.timeline .unit.moving, .timeline .legend.moving
{
	transition:			all 0.5s ease;
}

.timeline.dual
{
	top:				50%;
	margin-top:			-70px;
	height:				140px
}
.timeline.dual .unit
{
	height:				44px;
//	margin-top:			4px;
	margin-top:			33px;
}
.timeline.dual .unit.withLegend
{
//	margin-top:			0px;
	margin-top:			29px;
	height:				52px;
}
.timeline.dual .legend
{
//	top:				59px;
	top:				88px;
}
.timeline.dual .legend.blackText, .timeline.dual .legend.coldBlackText
{
//	top:				58px;
	top:				87px;
}

.timeline--wrapper .picturepreview
{
	position:				absolute;
	width:					48px;
	height:					48px;
	margin-left:			-24px;
	border-radius:			24px;
	background-size:		cover;
	background-position:	center;
	box-shadow:				0px 0px 4px grey;
	border:					0px solid grey;
	cursor:					pointer;
	z-index:				1;
}

.picturepreview.moving
{
	transition:				all 2s ease;
}

.timeline--wrapper .picturepreview:hover
{
	transition:				all 0.3s ease;

	border-radius:			2px;
	width:					96px;
	height:					96px;
	margin-left:			-48px;
	margin-top:				-24px;
	border:					2px solid white;

	z-index:				10;
}

.timeline--wrapper .currenttimebar
{
	position:				absolute;
	top:					0;
	bottom:					0;
	width:					1px;
	background-color:		#F0F0F0;
	z-index:				0;
}
.timeline--wrapper .picturetimebar
{
	position:				absolute;
	top:					0;
	height:					0px;
	width:					0px;
	border-left:			2px dotted lightgrey;
	margin-left:			-1px;
	z-index:				0;
}

.timeline .currentdatecontainer
{
	position:				relative;
	top:					50px;
	height:					12px;
	padding:				10px 0px;
	margin-top:				-10px;
	z-index:				2;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.66+20,0.8+50,0.66+80,0+100 */
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.66) 20%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.66) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.66) 20%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.66) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.66) 20%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.66) 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.timeline.dual .currentdatecontainer
{
	top:					55px;
	padding:				5px 0px;
	background-color:		white;
}
.timeline .currentdate
{
	font-size:				12px;
	color:					grey;
	position:				absolute;
}


.menu .option
{
	font-size:				14px;
	padding:				10px 10px 10px 24px;
}
.menu .option .name
{
	cursor:					default;
	line-height:			20px;
}
.menu .option .description
{
	font-size:				13px;
	color:					#909090;
	margin-top:				5px;
}
.menu .option input[type="checkbox"]
{
	margin:					3px 5px 0px 0px;
	float:					left;
}
.menu .option.selected .name
{
	color:					#4285f4;
}

.timeline--container .topcamera
{
	position:				absolute;
	top:					0px;
	left:					0px;
	padding:				24px;
	background-color:		white;
	border-radius:			0px 0px 24px 0px;
	box-shadow:				0px 0px 2px grey;
	z-index:				2;
}
.timeline--container .bottomcamera
{
	position:				absolute;
	bottom:					0px;
	left:					0px;
	padding:				24px;
	background-color:		white;
	border-radius:			0px 24px 0px 0px;
	box-shadow:				0px 0px 2px grey;
	z-index:				2;
}

input.search
{
	width:					500px;
	padding:				5px 16px 3px 16px;
	font-size:				16px;
}


.pictureViewerContainer
{
	position:				fixed;
	top:					0;
	left:					0;
	right:					0;
	bottom:					0;
	background-color:		black;
	z-index:				99;
}

.pictureViewerContainer .topMenu
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	height:					48px;
	line-height:			48px;
	padding:				2px 12px;
	opacity:				0.5;
	z-index:				2;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.15+1,0.15+50,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	transition:				all 0.2s ease;
}
.pictureViewerContainer .topMenu:hover
{
	opacity:				0.8;
}
.pictureViewerContainer .topMenu .closeButton
{
	display:				inline-block;
	float:					right;
	width:					36px;
	height:					36px;
	text-align:				center;
	fill:					white;
	cursor:					pointer;
}

.pictureViewerContainer .topMenu .currentPictureIndicator
{
	position:				absolute;
	top:					-3px;
	left:					100px;
	color:					white;
	text-shadow:			0px 0px 10px black;
}

.pictureViewerContainer .topMenu .toolButton
{
	display:				inline-block;
	width:					36px;
	height:					36px;
	text-align:				center;
	fill:					white;
	cursor:					pointer;
}

.pictureViewerContainer .rightMenu
{
	position:				absolute;
	top:					0;
	right:					-460px;
	bottom:					0;
	margin-bottom:			360px;
	width:					460px;
	background-color:		white;
	z-index:				2;
	color:					#484848;

	display:				flex;
	flex-direction:			column;
	align-items:			stretch;

	transition:				all 0.2s ease;
}
.pictureViewerContainer .rightMenu .container
{
	width:					460px;
}
.pictureViewerContainer .leftMenu
{
	position:				absolute;
	top:						0;
	left:						-460px;
	bottom:					0;
	margin-bottom:			360px;
	width:					460px;
	background-color:		white;
	z-index:					2;
	color:					#484848;

	display:					flex;
	flex-direction:		column;
	align-items:			stretch;

	transition:				all 0.2s ease;
}
.pictureViewerContainer .leftMenu .container
{
	width:					460px;
}

.pictureViewerContainer .picture--wrapper
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
	z-index:				1;

	transition:				all 0.2s ease;
}

.pictureViewerContainer.rightMenuOpen > .topMenu, .pictureViewerContainer.rightMenuOpen > .picture--wrapper
{
	margin-right:			460px;
}
.pictureViewerContainer.rightMenuOpen > .rightMenu
{
	right:					0px;
}
.pictureViewerContainer.leftMenuOpen > .topMenu, .pictureViewerContainer.leftMenuOpen > .picture--wrapper
{
	margin-left:			460px;
}
.pictureViewerContainer.leftMenuOpen > .leftMenu
{
	left:						0px;
}

.pictureViewerContainer .picture--wrapper .previousPicture
{
	position:				absolute;
	top:					0;
	left:					0;
	bottom:					0;
	width:					25%;
	cursor:					pointer;
	z-index:				10;
}

.previousPicture .button
{
	position:				absolute;
	top:					50%;
	left:					36px;
	width:					56px;
	height:					56px;
	margin-top:				-28px;
	background-color:		rgba(127, 127, 127, 0.3);
	border-radius:			28px;
	fill:					white;
	visibility:				hidden;
}
.previousPicture .button svg
{
	margin:					10px;
}

.pictureViewerContainer .picture--wrapper .nextPicture
{
	position:				absolute;
	top:					0;
	right:					0;
	bottom:					0;
	width:					25%;
	cursor:					pointer;
	z-index:				10;
}

.nextPicture .button
{
	position:				absolute;
	top:					50%;
	right:					36px;
	width:					56px;
	height:					56px;
	margin-top:				-28px;
	background-color:		rgba(127, 127, 127, 0.3);
	border-radius:			28px;
	fill:					white;
	visibility:				hidden;
}
.nextPicture .button svg
{
	margin:					10px;
}

.previousPicture:hover > .button, .nextPicture:hover > .button
{
	visibility:				visible;
}

.pictureViewerContainer .picture--wrapper img.loader
{
	position:				absolute;
	left:					50%;
	top:					50%;
	margin-left:			-108px;
	margin-top:				-108px;
	z-index:				8;
}

.pictureViewerContainer .picture--wrapper img.bigPicture
{
	position:				absolute;
	z-index:				1;
	transition:				all 0.2s ease;
}

.face
{
	position:				absolute;
	border:					3px solid transparent;
	margin:					-3px 0px 0px -3px;
	z-index:				15;
	transition:				all 0.2s ease;
}
.face:hover, .face.hover
{
	z-index:				16;
}
.face .removeButton
{
	position:				absolute;
	right:					0;
	top:					0;
	background-color:		#202020;
	border:					2px solid white;
	width:					12px;
	height:					12px;
	border-radius:			10px;
	color:					white;
	font-weight:			bold;
	margin-top:				-6px;
	margin-right:			-6px;
	opacity:				0;
	text-align:				center;
	line-height:			10px;
	font-size:				16px;
	transform:				rotate(45deg);
	-webkit-transform:		rotate(45deg);
	-ms-transform:			rotate(45deg);
	cursor:					pointer;
	display:				none;
}
.face.unknown, .face.editing
{
	cursor:					move;
}
.face.unknown .removeButton, .face.editing .removeButton
{
	opacity:				0.6;
	display:				block;
}
.face.unknown .removeButton:hover, .face.editing .removeButton
{
	opacity:				0.8;
}
.face .faceBorder
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
	border:					3px solid white;
	box-shadow:				0px 0px 12px black;
	opacity:				0;
}
.face.unknown .faceBorder
{
	opacity:				0.2;
}
.face.unknown:hover > .faceBorder, .face.editing > .faceBorder
{
	opacity:				0.4;
}
.face .name--wrapper
{
	position:				absolute;
	top:					100%;
	width:					200px;
	left:					50%;
	margin-left:			-100px;
	visibility:				hidden;
}
.face .name--wrapper .nameContainer
{
	text-align:				center;
	font-size:				12px;
	margin-top:				13px;
}
.face.unknown .name--wrapper .nameContainer, .face .name--wrapper .nameContainer.editing
{
	border:					3px solid white;
	box-shadow:				0px 0px 12px black;
	position:				relative;
	background-color:		white;
	margin-top:				10px;
}
.face .name--wrapper .nameContainer span.name
{
	background-color:		rgba(255,255,255,0.8);
	padding:				2px 6px;
	box-shadow:				0px 0px 12px black;
	border:					1px solid black;
	margin-top:				3px;
	max-width:				200px;
	text-overflow:			ellipsis;
	white-space:			nowrap;
	overflow:				hidden;
}
.face:hover > .name--wrapper, .face.hover > .name--wrapper, .face.highlight > .name--wrapper
{
	visibility:				visible;
}
.face .name--wrapper .arrow
{
	position:				absolute;
	top:					0;
	left:					50%;
	border-width:			5px;
	border-color:			transparent transparent white transparent;
	border-style:			solid;
	width:					0px;
	height:					0px;
	display:				block;
	margin-left:			-5px;
}
.face .name--wrapper .nameContainer input.name
{
	width:					calc(100% - 6px);
}
.face.unknown.highlight > .faceBorder
{
	opacity:				1;
}
.face.unknown.highlight > .name--wrapper
{
	visibility:				hidden;
}

.face.placing
{
	transition:				none;
}
.face.placing .faceBorder
{
	opacity:				0.6;
}
.face.placing .name--wrapper
{
	visibility:				hidden;
}


.pictureViewerContainer .rightMenu .titleLine, .pictureViewerContainer .leftMenu .titleLine
{
	font-size:				18px;
	font-weight:			bold;
	padding:				16px 24px;
}
.pictureViewerContainer .rightMenu .titleLine .closeButton, .pictureViewerContainer .leftMenu .titleLine .closeButton
{
	float:					right;
	cursor:					pointer;
	fill:					rgb(33,33,33);
}
.pictureViewerContainer .rightMenu .descLine, .pictureViewerContainer .leftMenu .descLine
{
	margin:					0px 24px;
}
.pictureViewerContainer .rightMenu .descLine textarea, .pictureViewerContainer .leftMenu .descLine textarea
{
	width:					100%;
	height:					25px;
	border:					0;
	outline:				none;
	resize:					none;
	font-family:			inherit;
	font-size:				inherit;
	border-bottom:			1px solid white;
	transition:				all 0.1s ease;
}

.pictureViewerContainer .rightMenu .descLine textarea:hover, .pictureViewerContainer .leftMenu .descLine textarea:hover
{
	border-color:			lightgrey;
}

.pictureViewerContainer .rightMenu .descLine textarea:focus, .pictureViewerContainer .leftMenu .descLine textarea:focus
{
	border-color:			dodgerblue;
}

.pictureViewerContainer .rightMenu .separator, .pictureViewerContainer .leftMenu .separator
{
	width:					100%;
	height:					1px;
	background-color:		lightgrey;
	margin:					10px 0px;
}

.pictureViewerContainer .rightMenu .detailsContainer, .pictureViewerContainer .leftMenu .detailsContainer
{
	width:					100%;
	overflow-y:				auto;
	overflow-x:				hidden;
	flex:					1;
}

.pictureViewerContainer .rightMenu .mapContainer, .pictureViewerContainer .leftMenu .mapContainer
{
	position:				absolute;
	left:					0;
	right:					0;
	bottom:					0;
	margin-bottom:			-360px;
	height:					360px;
	background-color:		white;
}

.pictureViewerContainer .rightMenu .info, .pictureViewerContainer .leftMenu .info
{
	padding:				10px 24px;
	font-size:				16px;
}
.pictureViewerContainer .rightMenu .info.twolines, .pictureViewerContainer .leftMenu .info.twolines
{
	font-size:				14px;
}
.pictureViewerContainer .rightMenu .info.twolines .secondline, .pictureViewerContainer .leftMenu .info.twolines .secondline
{
	font-size:				12px;
	color:					grey;
	padding-top:			5px;
}


.connectFacebookButton
{
	background:				#4c69ba;
	background:				linear-gradient(#4c69ba, #3b55a0);
	border-color:			#4c69ba;
	border-radius:			2px;
	color:					white;
	font-family:			helvetica, arial, sans-serif;
	-webkit-font-smoothing:	antialiased;
	text-shadow:			0 -1px 0 #354c8c;
	padding:				4px;
	display:				inline-block;
	line-height:			22px;
	width:					246px;
	margin-bottom:			40px;
	text-align:				center;
}
.connectFacebookButton svg
{
	width:					22px;
	height:					22px;
	float:					left;
	margin-right:			10px;
}

.connectGoogleButton
{
	border:					1px solid #4285f4;
	background-color:		#4285f4;
	color:					white;
	font-family:			Roboto,arial,sans-serif;
	line-height:			24px;
	width:					250px;
	display:				inline-block;
	line-height:			24px;
	padding:				1px;
	margin-bottom:			40px;
	text-align:				center;
}
.connectGoogleButton svg
{
	width:					18px;
	height:					18px;
	float:					left;
	background-color:		white;
	padding:				4px;
	margin-right:			10px;
}

.inlineeditorvalue
{
	min-width:				150px;
	box-sizing:				border-box;
	border-bottom:			1px solid white;
}
.inlineeditorvalue .editButton
{
	display:				inline-block;
	margin-left:			8px;
	width:					18px;
	height:					18px;
	cursor:					pointer;
}
.inlineeditorvalue .editButton svg
{
	fill:					lightgrey;
	transition:				fill 1s ease;
}
.inlineeditorvalue:hover > .editButton svg, .inlineeditorvalue .editButton:hover
{
	fill:					grey;
}

form.inlineeditor input[type=text], form.inlineeditor select
{
	border-width:			0px 0px 1px 0px;
	border-color:			lightgrey;
	border-style:			solid;
}

table.myaccount td
{
	padding:				24px;
}

div.accountuserline, div.accountuserline span, div.accountperson, div.accountperson span
{
	margin:					24px;
}

.fileUpload-directory .directoryname
{
	font-weight:			bold;
}

.fileUpload-directory .filelist, .fileUpload-directory .directorylist
{
	margin:					8px 0px 8px 24px;
}

.fileUpload-file
{
	margin:					8px 24px 8px 0;
	font-size:				14px;
	color:					#333333;
}
.fileUpload-file .filename
{
	overflow:				hidden;
	text-overflow:			ellipsis;
	white-space:			nowrap;
}
.fileUpload-file .cancelButton, .fileUpload-directory .directoryname .cancelButton
{
	fill:					lightgrey;
	float:					left;
	width:					18px;
	height:					18px;
	padding:				3px;
	margin-right:			6px;
	margin-left:			-30px;
	opacity:				0;
	transition:				all 0.3s ease;
	cursor:					pointer;
}
.fileUpload-file:hover > .cancelButton, .fileUpload-directory .directoryname:hover > .cancelButton, .fileUpload-file .cancelButton.highlighted, .fileUpload-directory .directoryname .cancelButton.highlighted
{
	margin-left:			0px;
	opacity:				1;
}
.fileUpload-file .cancelButton:hover, .fileUpload-directory .directoryname .cancelButton:hover, .fileUpload-file .cancelButton.highlighted, .fileUpload-directory .directoryname .cancelButton.highlighted
{
	fill:					red;
}

.fileUpload-directory .progressbar
{
	margin:					4px 0px;
	text-align:				center;
	width:					100%;
	font-size:				14px;
	color:					grey;
}

.fileUpload-file .progressbar
{
	margin:					4px 0px;
	text-align:				center;
	width:					100%;
	font-size:				14px;
	color:					grey;
}


.progressbar
{
	height:					20px;
	position:				relative;
	border:					1px solid lightgrey;
	border-radius:			20px;
	box-sizing:				border-box;
	overflow:				hidden;
}

.progressbar .bar
{
	display:					block;
	height:						100%;
	border-top-right-radius:	8px;
	border-bottom-right-radius:	8px;
	border-top-left-radius:		20px;
	border-bottom-left-radius:	20px;
	background-color:			rgb(43,194,83);
	background-image:			linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
	box-shadow:					inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
	position:					relative;
	overflow:					hidden;
	transition:					all 0.6s ease;
}

.progressbar.orange > .bar
{
	background-color:			#f1a165;
	background-image:			linear-gradient(to bottom, #f1a165, #f36d0a);
}

.progressbar.red > .bar
{
	background-color:			#f0a3a3;
	background-image:			linear-gradient(to bottom, #f0a3a3, #f42323);
}

.progressbar > .bar:after, .progressbar.animate > .bar > span
{
	content:					"";
	position:					absolute;
	top:						0;
	left:						0;
	bottom:						0;
	right:						0;
	background-image:			linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
	z-index:					1;
	background-size:			50px 50px;
	animation:					move 2s linear infinite;
	border-top-right-radius:	8px;
	border-bottom-right-radius:	8px;
	border-top-left-radius:		20px;
	border-bottom-left-radius:	20px;
	overflow:					hidden;
}

.progressbar.completed
{
	border:						none;
}
.progressbar.completed > .bar
{
	border-top-right-radius:	20px;
	border-bottom-right-radius:	20px;
	background-color:			dodgerblue;
	background-image:			linear-gradient(to bottom, dodgerblue, #2196F3);
}
.progressbar.error > .bar
{
	border-top-right-radius:	20px;
	border-bottom-right-radius:	20px;
	background-color:			red;
	background-image:			linear-gradient(to bottom, red, darkred);
}
.progressbar.completed > .bar:after, .progressbar.completed.animate > .bar > span, .progressbar.error > .bar:after, .progressbar.error.animate > .bar > span
{
	border-top-right-radius:	20px;
	border-bottom-right-radius:	20px;
	animation:					none;
}
.progressbar.animate > .bar:after
{
	display:					none;
}

@keyframes move {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 50px 50px;
	}
}

.progressbar > .bar:after, .progressbar.animate > .bar > span
{
	animation: move 4s linear infinite;
}

.progressbar .progress
{
	position:					absolute;
	left:						0;
	top:						0;
	right:						0;
	bottom:						0;
	color:						black;
	text-shadow:				0px 0px 10px white, 0px 0px 4px rgba(255,255,255,0.5);
	margin:						2px;
}
.progressbar.completed > .progress, .progressbar.treating > .progress, .progressbar.error > .progress
{
	color:						white;
	text-shadow:				0px 0px 1px black;
}

.progressbar.pending > .progress
{
	color:						grey;
}

.imagedropzone > .fileUpload-directory .filelist
{
	display:					flex;
	flex-wrap:					wrap;
}

.fileUpload-file.imagepreview
{
	width:						220px;
	margin:						8px;
}

.fileUpload-file.imagepreview > div.progressbar
{
	width:						100%;
	font-size:					12px;
}

.fileUpload-file.imagepreview div.preview
{
	width:						220px;
	height:						180px;
	background-size:			cover;
	background-position:		center;
	box-shadow:					2px 2px 8px grey;
	position:					relative;
}
.fileUpload-file.imagepreview div.preview.pending
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
	background: rgb(242,246,248); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.fileUpload-file.imagepreview div.preview .filename
{
	font-size:					12px;
	position:					absolute;
	bottom:						0;
	margin:						4px;
}

.fileUpload-file.imagepreview div.preview.onscreen .filename
{
	color:						white;
	font-weight:				bold;
	text-shadow:				0px 0px 8px black, 0px 0px 16px grey;
}

.contextualmenu
{
	color:						#333333;
	padding:					8px 0px;
	line-height:				24px;
	font-size:					13px;
	display:					block;
	background-color:			white;
	border:						1px solid rgba(0,0,0,0.2);
	border-radius:				2px;
	box-shadow:					rgba(0, 0, 0, 0.137255) 0px 8px 10px 1px, rgba(0, 0, 0, 0.117647) 0px 3px 14px 2px, rgba(0, 0, 0, 0.2) 0px 5px 5px -3px;
	box-sizing:					border-box;

}
.contextualmenu div
{
	padding:					0px 18px;
}
.contextualmenu div.clickable:hover
{
	cursor:						pointer;
	background-color:			#F0F0F0;
}

.dropZone.draggingFiles
{
	background-color:			rgba(30,144,255,0.3);
}

.informationPage
{
	display:					block;
	width:						1000px;
	margin:						auto;
}

.informationPage h1
{
	font-size:					28px;
	line-height:				36px;
	color:						dodgerblue;
	margin-bottom:				36px;
}
h2
{
	font-size:					28px;
	line-height:				36px;
	margin-bottom:				36px;
}

.informationPage .block
{
	border-top:					1px solid lightgrey;
	padding:					48px 0px;
}

.informationPage table
{
	border-top:					1px solid #F0F0F0;
	border-left:				1px solid #F0F0F0;
	border-right:				1px solid #F0F0F0;
	min-width:					500px;
	margin-left:				48px;
}
.informationPage tr
{
	border-bottom:				1px solid #F0F0F0;
}

.informationPage th
{
	font-weight:				bold;
}
.informationPage td, .informationPage th
{
	padding:					8px 16px;
}
.informationPage .searchfriends
{
	padding:					0px 24px;
}
.informationPage .searchfriends input[type=text]
{
	width:						400px;
}
[type=text].searchFriends
{
	width:						300px;
}

.comboboxContainer.persons
{
	border:						1px solid lightgrey;
	box-sizing:					border-box;
	text-align:					left;
}
.comboboxContainer.persons .listRenderPaginator
{
	text-align:					center;
	font-size:					13px;
	line-height:				20px;
	color:						grey;
	padding:					4px 8px;
}
.comboboxContainer.persons .listRenderPaginator input
{
	background-color:			white;
	border:						none;
	font-size:					15px;
	line-height:				20px;
	color:						grey;
	cursor:						pointer;
}
.comboboxContainer.persons .listRenderPaginator input:hover
{
	font-weight:				bold;
	color:						dodgerblue;
}
.comboboxContainer.persons .listRenderPaginator input[disabled]
{
	color:						white;
}
.comboboxContainer.persons .listRenderElement
{
	height:						54px;
	padding:					2px 8px;
	position:					relative;
}
.comboboxContainer.persons .listRenderElement:hover
{
	background-color:			#F8F8F8;
}
.person
{
	min-width:					350px;
	position:					relative;
	height:						54px;
}
.person .cover
{
	float:						left;
	width:						50px;
	height:						52px;
	margin-right:				12px;
	margin-top:					2px;
	background-position:		center;
	background-size:			cover;
	background-color:			lightgrey;
}
.person .infos
{
	margin:						2px;
	line-height:				20px;
	font-size:					14px;
	overflow:					hidden;
	text-overflow:				ellipsis;
}
.person .infos .name
{
	text-decoration:			none;
	color:						dodgerblue;
	cursor:						pointer;
	white-space:				nowrap;
}
.person .infos .name:hover
{
	text-decoration:			underline;
}
.person .infos .age
{
	color:						grey;
	font-size:					12px;
}

.person.big
{
	position:					relative;
	min-width:					300px;
	width:						300px;
	height:						100px;
	display:					inline-block;
	margin:						5px;
	border:						1px solid lightgrey;
}
.person.big .cover
{
	position:					absolute;
	left:						0;
	top:						0;
	width:						100px;
	height:						100px;
	margin:						0;
}

.person.big .infos
{
	position:					absolute;
	left:						110px;
	top:						16px;
	width:						182px;
	overflow:					hidden;
	text-overflow:				ellipsis;
}
.person.big .acceptReject
{
	position:					absolute;
	right:						10px;
	left:						110px;
	bottom:						10px;
}
.person.big .acceptReject .rejectButton, .person.big .acceptReject .acceptButton
{
	width:						50%;
	font-size:					12px;
}
.acceptReject .rejectButton, .acceptReject .acceptButton
{
	display:					inline-block;
	text-align:					center;
	/* border:						1px solid lightgrey; */
	box-sizing:					border-box;
	cursor:						pointer;
	padding:					4px 8px;
	color:						grey;
	transition:					all 0.3s ease;
}
.acceptReject .rejectButton .rejectIcon, .acceptReject .acceptButton .acceptIcon
{
	margin-right:				4px;
}
.acceptReject .rejectButton .rejectIcon
{
	color:						red;
}
.acceptReject .acceptButton .acceptIcon
{
	color:						green;
}
.acceptReject .rejectButton.disabled > .rejectIcon, .acceptReject .acceptButton.disabled > .acceptIcon
{
	color:						grey;
}
.acceptReject .rejectButton.selected, .acceptReject .rejectButton:hover, .acceptReject .rejectButton:hover > .rejectIcon
{
	/* border-color:				red; */
	color:						red;
}
.acceptReject .acceptButton.selected, .acceptReject .acceptButton:hover, .acceptReject .acceptButton:hover > .acceptIcon
{
	/* border-color:				green; */
	color:						green;
}


.person.big .friendButton
{
	position:					absolute;
	left:						100px;
	top:						50px;
	right:						inherit;
	bottom:						inherit;
	max-width:					160px;
	white-space:				nowrap;
	overflow:					hidden;
	text-overflow:				ellipsis;
}
.person.big.withAccountFunctions .accountElements
{
	position:					absolute;
	right:						0;
	top:						0;
	padding:					3px;
	text-align:					right;
}
.person.big.withAccountFunctions .accountElements span
{
	fill:						darkgrey;
	cursor:						pointer;
	transition:					fill 0.3s ease;
	margin-left:				3px;
}
.person.big.withAccountFunctions .accountElements span svg
{
	width:						20px;
	height:						20px;
}
.person.big.withAccountFunctions .accountElements span:hover
{
	fill:						dodgerblue;
}

.friendButton
{
	position:					relative;
	float:						right;
	display:					inline-block;
	cursor:						pointer;
	font-size:					13px;
	line-height:				18px;
	padding:					4px 8px;
	margin-top:					12px;
	margin-left:				12px;

	max-width:					100px;
	white-space:				nowrap;
	overflow:					hidden;
	text-overflow:				ellipsis;
}
.person .friendButton
{
	position:					absolute;
	right:						0;
	bottom:						0;
}
.friendButton.addAsFriend, .friendButton.invitationReceived
{
	background-color:			dodgerblue;
	color:						white;
	border-radius:				4px;
}
.friendButton.friends, .friendButton.invitationSent, .friendButton.ignoreInvitation
{
	border:						1px solid darkgrey;
	border-radius:				1px;
	background-color:			#FBFBFB;
}

.friendButtonMenu, div.sharginButtonMenu
{
	position:					absolute;
	font-size:					13px;
	font-weight:				normal;
	color:						#808080;
	line-height:				18px;
	border:						1px lightgrey solid;
	padding:					4px 0px;
	background-color:			white;
	box-shadow:					rgba(0, 0, 0, 0.137255) 4px 4px 4px 0px, rgba(0, 0, 0, 0.117647) 2px 3px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px -1px;
	z-index:					10;
}
.friendButtonMenu hr, .sharginButtonMenu hr
{
	margin:						4px 0px 2px 0px;
}
.friendButtonMenu div div, .sharginButtonMenu div div
{
	padding:					0px 8px;
	white-space:				nowrap;
	cursor:						pointer;
}
.friendButtonMenu div div.checkable:hover, .sharginButtonMenu div div.checkable:hover
{
	background-color:			#F0F0F0;
}
.friendButtonMenu div div.checkable, .sharginButtonMenu div div.checkable
{
	color:						#404040;
}
.friendButtonMenu div div.checkable:before, .sharginButtonMenu div div.checkable:before
{
	content:					'';
	display:					inline-block;
	width:						10px;
	margin-right:				8px;
}
.friendButtonMenu div div.checkable:hover:before, .sharginButtonMenu div div.checkable:hover:before
{
	content:					'✔';
	color:						darkgrey;
}
.friendButtonMenu div div.checkable.checked:before, .sharginButtonMenu div div.checkable.checked:before
{
	content:					'✔';
}
.friendButtonMenu div div.checkable.checked, .sharginButtonMenu div div.checkable.checked
{
	color:						dodgerblue;
}

.sharingmenu--customsmenucontainer
{
	position:					absolute;
	left:						0;
	top:						32px;
	right:						0;
	bottom:						0;
}
.sharingmenu--customsmenuchecked
{
	position:					absolute;
	left:						0;
	top:						0;
	min-width:					200px;
}
.sharingmenu--customsmenuitemlist
{
	position:					absolute;
	top:						0;
}



.sharingButton, .approvePendingPicturesButton, .switchToApprovalModeButton, .cancelApprovalModeButton, .hidePicturesButton
{
	display:					inline-block;
	cursor:						pointer;
	font-size:					13px;
	line-height:				18px;
	padding:					4px 8px;
	margin-top:					12px;
	margin-left:				12px;
	border:						1px solid darkgrey;
	border-radius:				1px;
	background-color:			#FBFBFB;
}
.switchToApprovalModeButton, .cancelApprovalModeButton
{
	margin-top:					0px;
}
.contextualmenu .sharingButton
{
	margin:						0px 12px;
	padding:					2px 8px;
}

.info.title, .info.faces .title
{
	font-weight:				500;
}
.info.faces .addFaceButton
{
	display:					inline-block;
	vertical-align:				middle;
	fill:						darkgrey;
	margin-left:				10px;
	cursor:						pointer;
	transition:					fill 0.3s ease;
}
.info.faces .addFaceButton:hover
{
	fill:						grey;
}
.info.faces .faceList, .info.faces .unknowFaces
{
	font-size:					14px;
	line-height:				18px;
	margin:						4px 0px;
}

.info.faces .faceList .personName
{
	color:						cornflowerblue;
	cursor:						pointer;
	text-decoration:			none;
}
.info.faces .faceList .comaSeparator
{
	color:						grey;
	margin-right:				8px;
}

.info.faces .unknowFaces
{
	color:						darkgrey;
}
.info.faces .unknowFaces .trashButton
{
	vertical-align:				sub;
	fill:						darkgrey;
	margin-left:				10px;
	cursor:						pointer;
	transition:					fill 0.3s ease;
}
.info.faces .unknowFaces .trashButton svg
{
	width:						18px;
	height:						18px;
}
.info.faces .unknowFaces .trashButton:hover
{
	fill:						grey;
}

.info.faces .faceList .personName:hover, .info.faces .unknowFaces:hover > .text
{
	text-decoration:			underline;
}


.tabSystem.tabList
{
	margin-top:					50px;
	height:						30px;
}
.tabSystem .tab
{
	float:						left;
	color:						darkgrey;
	line-height:				22px;
	background-color:			white;
	padding:					4px 16px;
	cursor:						pointer;
}
.tabSystem .tab:hover
{
	color:						dodgerblue;
}
.tabSystem .tab.active
{
	color:						dodgerblue;
	border-width:				1px;
	border-style:				solid;
	border-color:				lightgrey lightgrey white lightgrey;
}

.tabSystem.tabContent
{
	border-width:				1px;
	border-style:				solid;
	border-color:				lightgrey;
	padding:					20px;
}
.tabSystem.tabContent.noPadding
{
	padding:					1px 0px 100px 0px;
}
.tabSystem.tabContent .content
{
	overflow:					hidden;
	position:					relative;
	padding-bottom:				200px;
}

.tabSystem.tabContent .pictureListContainer
{
	padding:					20px;
}

.modal
{
	line-height:				22px;
}
.modal h1
{
	font-size:					28px;
	line-height:				36px;
	margin-bottom:				36px;
}

.profilePictureFaceCover
{
	width:						100px;
	height:						100px;
	background-size:			cover;
}

.tabSystem.tabContent .topMenu
{
	padding-top:				8px;

	background-color:			white;
	box-shadow:					rgba(0, 0, 0, 0.137255) 0px 4px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;

	z-index:					10;
}

.menuComponentOffsetInput
{
	width:						16px;
	margin-right:				2px;
}
.menuComponentOffsetOperatorSelect, .menuComponentOffsetLegend
{
	margin-right:				4px;
}
.menuComponentOffsetButtonsContainer
{
	text-align:					right;
}
.menuComponentOffsetButton
{
	margin-left:				12px;
}

.invitation .separator
{
	width:						24px;
	display:					inline-block;
}


.sharingmenu--customsmenuitemlist .tabSystem.tabList
{
	margin-top:					0px;
}
.sharingmenu--customsmenuitemlist .tabSystem.tabContent
{
	padding:					1px 0px 0px 0px;
}
.sharingmenu--customsmenuitemlist .tabSystem.tabContent .content
{
	padding:					4px 0px 4px 0px;
}

.sharingmenu--customsmenuitemlist .tabContent .content .searchBarContainer
{
	padding:					0;
	margin-top:					-4px;
}
.sharingmenu--customsmenuitemlist .tabContent .content .searchPersonButton
{
	width:						100%;
	border-style:				solid;
	border-width:				0px 0px 1px 0px;
	border-color:				darkgrey;
	padding:					2px 8px;
}
.sharingmenu--customsmenuitemlist .tabContent .content .friendList
{
	max-height:					400px;
	overflow-y:					auto;
	padding:					0px 2px;
}
.sharingmenu--customsmenuitemlist .tabContent .content .person
{
	height:						52px;
	padding:					0px 2px;
	min-width:					250px;
}
.sharingmenu--customsmenuitemlist .tabContent .content .person .cover
{
	padding:					0px;
}

.sharingmenu--customsmenuchecked .allowbutton, .sharingmenu--customsmenuchecked .denybutton
{
	line-height:				26px;
}
.sharingmenu--customsmenuchecked .allowbutton:before
{
	content:					'+';
	color:						green;
	display:					inline-block;
	width:						18px;
	text-align:					center;
	font-weight:				bold;
	font-size:					16px;
}
.sharingmenu--customsmenuchecked .allowbutton.checked, .sharingmenu--customsmenuchecked .allowbutton:hover
{
	color:						green;
}
.sharingmenu--customsmenuchecked .allowbutton.checked
{
	font-weight:				bold;
}

.sharingmenu--customsmenuchecked .denybutton:before
{
	content:					'-';
	color:						red;
	display:					inline-block;
	width:						18px;
	text-align:					center;
	font-weight:				bold;
	font-size:					16px;
}
.sharingmenu--customsmenuchecked .denybutton.checked, .sharingmenu--customsmenuchecked .denybutton:hover
{
	color:						red;
}
.sharingmenu--customsmenuchecked .denybutton.checked
{
	font-weight:				bold;
}

.sharingmenu--customsmenuchecked .allowed--list, .sharingmenu--customsmenuchecked .denied--list
{
	width:						250px;
	white-space:				normal;

}
.sharingmenu--customsmenuchecked .allowed--list div, .sharingmenu--customsmenuchecked .denied--list div
{
	display:					inline-block;
	font-size:					12px;
	padding:					0px 12px 0px 6px;
	background-color:			white;
	border:						1px solid lightgrey;
	color:						dodgerblue;
	border-radius:				6px;
	margin:						2px 2px 0px 0px;
	position:					relative;
}
.sharingmenu--customsmenuchecked span.removeButton
{
	position:					absolute;
	right:						0;
	top:						0;
	color:						lightgrey;
	font-size:					10px;
	width:						10px;
	height:						12px;
	text-align:					center;
	line-height:				10px;
	cursor:						pointer;
}
.sharingmenu--customsmenuchecked span.removeButton:hover
{
	background-color:			grey;
	color:						white;
}

.userselectionmenu .actions .sharingButton, .userselectionmenu .actions .approvePendingPicturesButton, .hidePicturesButton
{
	background-color:			transparent;
	color:						white;
	margin:						0px 12px;
	vertical-align:				top;
	border-color:				white;
}

.modal.downloadPreparationProgress .bar
{
	transition:					all 2.2s linear;
}

.albumtitle .favorited_button
{
	width:				36px;
	height:				36px;
	background-image:	url(../img/star_white_32.png);
	background-size:	cover;
	display:			inline-block;
	float:				left;
	margin-right:		20px;
	opacity:			0.7;
	cursor:				pointer;
}
.albumtitle .favorited_button.selected
{
	background-image:	url(../img/star_gold_32.png);
}

.personListContainer
{
	margin-top:			12px;
}

.pendingInfos
{
	margin-bottom:		24px;
}
.pendingInfos .title, .pendingInfos .persons
{
	padding:			10px 24px;
	line-height:		24px;
}
.pendingInfos .personContainer
{
	display:			inline-block;
	margin-right:		48px;
	margin-bottom:		12px;
}
.pendingInfos .personContainer .person
{
	display:			inline-block;
}
.pendingInfos .personContainer .pictureCount
{
	text-align:			center;
	font-size:			14px;
	color:				grey;
}
.pendingInfos .title .selectpictures svg
{
	float:				left;
	margin-right:		8px;
	cursor:				pointer;
	fill:				grey;
	fill-opacity:		0.6;
	width:				22px;
	height:				22px;
	transition:			all 0.3s ease;
}
.pendingInfos .title .selectpictures:hover > svg, .pendingInfos .personContainer .selector:hover > svg
{
	fill:				dodgerblue;
	fill-opacity:		1;
}
.pendingInfos .personContainer .selector
{
	margin-right:		12px;
}
.pendingInfos .personContainer .selector svg
{
	cursor:				pointer;
	fill:				grey;
	fill-opacity:		0.6;
	width:				22px;
	height:				22px;
	transition:			all 0.3s ease;
}
.pendingInfos .title .selectpictures.checked > svg, .pendingInfos .personContainer .selector.checked > svg
{
	fill:				dodgerblue;
	fill-opacity:		1;
}

.signupInvitation-description
{
	position:			absolute;
	left:				0;
	top:				0;
	bottom:				0;
	width:				50%;
	padding:			48px 48px 150px 48px;
}
.signupInvitation-signup
{
	position:			absolute;
	right:				0;
	top:				0;
	bottom:				0;
	width:				50%;
	padding:			48px 48px 150px 48px;
}

.modal.invitePersonsModal
{
	max-width:			960px;
}
.modal.selectPersonList .topMenu
{
	position:			relative;
}
.modal.selectPersonList .personListContainer
{
	max-height:			500px;
	width:				840px;
	overflow-y:			auto;
}
.modal.selectPersonList .personListContainer .person
{
	display:			inline-block;
	height:				52px;
	padding:			0px 2px;
	width:				200px;
	min-width:			200px;
	overflow:			hidden;
}

.modal.selectAlbum .albumList
{
	max-height:			500px;
	max-width:			1100px;
	overflow-y:			auto;
}
table.invitationList
{
	width:				100%;
}
table.invitationList th
{
	vertical-align:		middle;
	padding:			8px;
}
table.invitationList td
{
	vertical-align:		middle;
	padding:			4px 8px;
}
table.invitationList tr.even, .invitationDetails table .even
{
	background-color:	#F4F4F4;
}
table.invitationList tr:hover > td
{
	background-color:	#D3E9FF;
}
table.invitationList tr.noHover:hover > td
{
	background-color:	inherit;
}
.invitation .person, .invitationDetails .person
{
	width:				250px;
	min-width:			250px;
}
.invitationList .relationship
{
	position:			relative;
}
.invitationList .relationship .friendButton
{
	float:				inherit;
}
.invitationList .relationship .person .friendButton
{
	position:			absolute;
	right:				0;
	bottom:				0;
}

.album.preview .cover
{
	float:					left;
	width:					50px;
	height:					50px;
	margin-right:			12px;
	margin-top:				2px;
	background-position:	center;
	background-size:		cover;
	background-color:		lightgrey;
}
.album.preview .title
{
	margin:					2px;
	line-height:			50px;
	font-size:				14px;
	white-space:			nowrap;
	overflow:				hidden;
	text-overflow:			ellipsis;
}

.breadcrumb
{
	width:					100%;
	margin-bottom:			24px;
}
.breadcrumb td
{
	text-align:				center;
	position:				relative;
	border:					1px solid lightgrey;
	line-height:			32px;
	color:					darkgrey;
}
.breadcrumb tr td:after
{
	content:					'';
	position:				absolute;
	right:					-32px;
	top:						0;
	bottom:					0;
	width:					1em;
	border-top:				16px solid transparent;
	border-bottom:			16px solid transparent;
	border-left:			16px solid white;
	border-right:			none;
	z-index:					2;
}
.breadcrumb tr td:before
{
	content:					'';
	position:				absolute;
	left:						0;
	top:						0;
	bottom:					0;
	width:					1em;
	border-top:				16px solid transparent;
	border-bottom:			16px solid transparent;
	border-left:			16px solid lightgrey;
	border-right:			none;
	z-index:					1;
}
.breadcrumb td.active
{
	color:					white;
	background-color:		#5BADFF;
}
.breadcrumb td.active:before
{
	border-left-color:	white;
}
.breadcrumb td.active:after
{
	border-left-color:	#5BADFF;
}
.breadcrumb td.done
{
	color:					black;
	background-color:		#F0F0F0;
}
.breadcrumb td.done:before
{
	border-left-color:	darkgrey;
}
.breadcrumb td.done:after
{
	border-left-color:	#F0F0F0;
}
.breadcrumb tr td:first-child:before
{
	display:							none;
}
.breadcrumb tr td:last-child:after
{
	display:							none;
}
.breadcrumb td.clickable:hover
{
	color:					black;
	border-color:			darkgrey;
}
.breadcrumb td.clickable:hover:before
{
	border-left-color:	darkgrey;
}

.breadcrumb td.active.clickable:hover
{
	color:					white;
	background-color:		dodgerblue;
}
.breadcrumb td.active.clickable:hover:after
{
	border-left-color:	dodgerblue;
}

.signupPersonTransfer .personList
{
	margin:					24px 0px;
}
.signupPersonTransfer .onePerson.acceptReject .rejectButton, .signupPersonTransfer .onePerson.acceptReject .acceptButton
{
	margin:					0px 12px;
}
tr.invitationDetails td.invitationDetailsCell
{
	padding:				0 0 12px 0;
}
.invitationDetails table
{
	width:					100%;
	border-width:			1px 0px 1px 1px;
	border-style:			solid;
	border-color:			lightgrey;
	box-sizing:				border-box;
}

.modal
{
	border-radius:			0px;
	box-shadow:				0px 0px 10px #888888;
}
.modalOverlay
{
	opacity:					0.1;
}




.viewer
{
	position:				fixed;
	top:						0;
	right:					0;
	bottom:					0;
	left:						0;
	background-color:		black;
	z-index:					99;
}

.viewer .topMenu
{
	position:				absolute;
	left:						0;
	top:						0;
	right:					0;
	height:					48px;
	line-height:			48px;
	padding:					2px 12px;
	opacity:					0.5;
	z-index:					20;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.15+1,0.15+50,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	transition:				all 0.2s ease;
}
.viewer .topMenu:hover
{
	opacity:					0.8;
}
.viewer .topMenu .closeButton
{
	display:					inline-block;
	float:					right;
	width:					36px;
	height:					36px;
	text-align:				center;
	fill:						white;
	cursor:					pointer;
}

.viewer .topMenu .currentPictureIndicator
{
	position:				absolute;
	top:						-3px;
	left:						100px;
	color:					white;
	text-shadow:			0px 0px 10px black;
}

.viewer .topMenu .toolButton
{
	display:					inline-block;
	width:					36px;
	height:					36px;
	text-align:				center;
	fill:						white;
	cursor:					pointer;
}

.viewer .topMenu .presentationDetails
{
	position:				absolute;

	border:					2px solid #C0C0C0;
	border-radius:			3px;
	background-color:		#202020;

	line-height:			24px;
}
.viewer .topMenu .presentationDetails .clients
{
	color:					white;
	max-height:				400px;
	overflow-y:				auto;
}
.viewer .topMenu .presentationDetails .clients .client
{
	padding:					2px 4px;
}
.viewer .topMenu .presentationDetails .clients .client .status,
.viewer .topMenu .presentationDetails .clients .client .device,
.viewer .topMenu .presentationDetails .clients .client .acceptButton,
.viewer .topMenu .presentationDetails .clients .client .denyButton,
.viewer .topMenu .presentationDetails .clients .client .rejectButton
{
	display:					inline-block;
	width:					24px;
	height:					24px;
}
.viewer .topMenu .presentationDetails .clients .client .status.warning
{
	fill:						red;
}
.viewer .topMenu .presentationDetails .clients .client .acceptButton
{
	cursor:					pointer;
	fill:						green;
}
.viewer .topMenu .presentationDetails .clients .client .denyButton, .viewer .topMenu .presentationDetails .clients .client .rejectButton
{
	cursor:					pointer;
	fill:						red;
}
.viewer .topMenu .presentationDetails .stopButton
{
	fill:						red;
	cursor:					pointer;
}
.viewer .topMenu .presentationDetails .qrCodeButton
{
	fill:						white;
	cursor:					pointer;
}

.viewer .rendermode
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
}

.viewer .picture--wrapper, .viewer .map--wrapper .map, .viewer .controller--wrapper
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
	z-index:				1;

	transition:				all 0.2s ease;
}
.viewer .map--wrapper
{
	position:				absolute;
	left:					0;
	top:					40px;
	right:					0;
	bottom:					0;
	z-index:				1;
}

.viewer .picture--wrapper .previousButton
{
	position:				absolute;
	left:					0;
	top:					0;
	bottom:					0;
	width:					15%;
	cursor:					pointer;
	z-index:				10;
}
.viewer .picture--wrapper .previousButton .button
{
	position:				absolute;
	top:						50%;
	left:						36px;
	width:					56px;
	height:					56px;
	margin-top:				-28px;
	background-color:		rgba(127, 127, 127, 0.3);
	border-radius:			28px;
	fill:						white;
	visibility:				hidden;
}
.viewer .picture--wrapper .nextButton
{
	position:				absolute;
	right:					0;
	top:						0;
	bottom:					0;
	width:					15%;
	cursor:					pointer;
	z-index:					10;
}
.viewer .picture--wrapper .nextButton .button
{
	position:				absolute;
	top:					50%;
	right:					36px;
	width:					56px;
	height:					56px;
	margin-top:				-28px;
	background-color:		rgba(127, 127, 127, 0.3);
	border-radius:			28px;
	fill:					white;
	visibility:				hidden;
}
.viewer .picture--wrapper .previousButton .button svg, .viewer .picture--wrapper .nextButton .button svg
{
	margin:					10px;
}
.viewer .picture--wrapper .previousButton:hover > .button, .viewer .picture--wrapper .nextButton:hover > .button
{
	visibility:				visible;
}

.viewer .picture--wrapper .flatImage
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
	background-position:	center;
	background-repeat:		no-repeat;
	background-size:		contain;
	background-color:		black;
	transition:				all 0.2s ease, opacity 0.5s ease;
}
.viewer .picture--wrapper .flatImage.slowTransition
{
	transition:				opacity 3s linear 0.5s;
}
.viewer .picture--wrapper .sphericalImage
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
}

.viewer .controller--wrapper .clients
{
	position:				absolute;
	left:					0;
	top:					0;
	bottom:					50%;
	right:					55%;
	padding:				40px 10px 10px 10px;
	overflow-y:				auto;
}

.viewer .controller--wrapper .mapContainer
{
	position:				absolute;
	left:					0;
	top:					50%;
	bottom:					0;
	right:					55%;
	overflow:				hidden;
}
.viewer .controller--wrapper .mapContainer .map
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
}

.viewer .controller--wrapper .currentContent
{
	position:				absolute;
	left:					45%;
	top:					0;
	bottom:					50%;
	right:					0;
	overflow:				hidden;
}

.viewer .controller--wrapper .allContent
{
	position:				absolute;
	padding:				4px;
	left:					45%;
	top:					50%;
	bottom:					0;
	right:					0;
	overflow-x:				hidden;
	overflow-y:				auto;
	box-sizing:				border-box;
	border-top:				4px solid black;
	border-bottom:			4px solid black;
}

.viewer .controller--wrapper .allContent .picture
{
	background-position:	center;
	background-size:		cover;
	border:					2px solid black;
	opacity:				0.6;
	box-sizing:				border-box;
	filter:					grayscale(50%);
	transition:				opacity 0.8s ease;
}
.viewer .controller--wrapper .allContent .picture:hover, .viewer .controller--wrapper .allContent .picture.current
{
	opacity:				1;
	filter:					grayscale(0%);
	box-sizing:				content-box;
	margin-left:			-2px;
	margin-top:				-2px;
	z-index:				10;
}
.viewer .controller--wrapper .allContent .picture.current
{
	border-color:			white;
	z-index:				11;
}

@media (min-aspect-ratio: 16/10)
{
	.viewer .controller--wrapper .clients
	{
		left:					0;
		top:					60%;
		bottom:					0;
		right:					60%;
	}

	.viewer .controller--wrapper .currentContent
	{
		left:					40%;
		top:					0;
		bottom:					40%;
		right:					0;
	}

	.viewer .controller--wrapper .mapContainer
	{
		left:					0;
		top:					40px;
		right:					60%;
		bottom:					40%;
	}

	.viewer .controller--wrapper .allContent
	{
		left:					40%;
		top:					60%;
		bottom:					0;
		right:					0;
	}
}

.viewer .loadingScreen
{
	position:				absolute;
	left:					0;
	right:					0;
	top:					0;
	bottom:					0;
	z-index:				5;
	transition:				all 0.2s ease;
}
.viewer .loadingScreen .sk-cube-grid
{
	position:				absolute;
	left:					calc( 50% - 45px );
	top:					calc( 50% - 45px );
	width:					90px;
	height:					90px;
	opacity:				0.6;
}

.viewer .pictureInfos
{
	position:				absolute;
	top:						0;
	left:						-460px;
	bottom:					0;
	margin-bottom:			360px;
	width:					460px;
	background-color:		white;
	z-index:					21;
	color:					#484848;


	transition:				all 0.2s ease;
}

.viewer.infosOnScreen .pictureInfos
{
	left:						0px;
}
.viewer.infosOnScreen > .topMenu, .viewer.infosOnScreen > .rendermode .picture--wrapper .loadingScreen
{
	margin-left:			460px;
}
.viewer.infosOnScreen > .rendermode .picture--wrapper .previousButton
{
	left:						460px;
}



.viewer .pictureInfos .titleLine
{
	font-size:				18px;
	font-weight:			bold;
	padding:					16px 24px;
}
.viewer .pictureInfos .titleLine .closeButton
{
	float:					right;
	cursor:					pointer;
	fill:						rgb(33,33,33);
}
.viewer .pictureInfos .descLine
{
	margin:					0px 24px;
}
.viewer .pictureInfos .descLine textarea
{
	width:					100%;
	height:					25px;
	border:					0;
	outline:					none;
	resize:					none;
	font-family:			inherit;
	font-size:				inherit;
	border-bottom:			1px solid white;
	transition:				all 0.1s ease;
}

.viewer .pictureInfos .descLine textarea:hover
{
	border-color:			lightgrey;
}

.viewer .pictureInfos .descLine textarea:focus
{
	border-color:			dodgerblue;
}

.viewer .pictureInfos .separator
{
	width:					100%;
	height:					1px;
	background-color:		lightgrey;
	margin:					10px 0px;
}

.viewer .pictureInfos .detailsContainer
{
	width:					100%;
	overflow-y:				auto;
	overflow-x:				hidden;
	flex:						1;
}

.viewer .pictureInfos .mapContainer
{
	position:				absolute;
	left:					0;
	right:					0;
	bottom:					0;
	margin-bottom:			-360px;
	height:					360px;
	background-color:		white;
}
.viewer .pictureInfos .mapContainer .map
{
	position:				absolute;
	left:					0;
	top:					0;
	right:					0;
	bottom:					0;
}

.viewer .pictureInfos .info
{
	padding:					10px 24px;
	font-size:				16px;
}
.viewer .pictureInfos .info.twolines
{
	font-size:				14px;
}
.viewer .pictureInfos .info.twolines .secondline
{
	font-size:				12px;
	color:					grey;
	padding-top:			5px;
}

.pgm--fullscreen
{
	cursor:					pointer;
	width:					24px;
	height:					24px;
	margin:					10px 14px;
	position:				absolute;
	top:						0;
	right:					0;
	background-color:		white;
}
.pgm--fullscreen svg
{
	fill:						grey;
	transition:				fill 0.3s ease;
}
.pgm--fullscreen:hover > svg
{
	fill:						dodgerblue;
}




.sk-cube-grid .sk-cube
{
	width:				33%;
	height:				33%;
	background-color:	white;
	float:				left;
	-webkit-animation:	sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	animation:			sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1
{
	-webkit-animation-delay:	0.2s;
	animation-delay:			0.2s;
}
.sk-cube-grid .sk-cube2
{
	-webkit-animation-delay:	0.3s;
	animation-delay:			0.3s;
}
.sk-cube-grid .sk-cube3
{
	-webkit-animation-delay:	0.4s;
	animation-delay:			0.4s;
}
.sk-cube-grid .sk-cube4
{
	-webkit-animation-delay:	0.1s;
	animation-delay:			0.1s;
}
.sk-cube-grid .sk-cube5
{
	-webkit-animation-delay:	0.2s;
	animation-delay:			0.2s;
}
.sk-cube-grid .sk-cube6
{
	-webkit-animation-delay:	0.3s;
	animation-delay:			0.3s;
}
.sk-cube-grid .sk-cube7
{
	-webkit-animation-delay:	0s;
	animation-delay:			0s;
}
.sk-cube-grid .sk-cube8
{
	-webkit-animation-delay:	0.1s;
	animation-delay:			0.1s;
}
.sk-cube-grid .sk-cube9
{
	-webkit-animation-delay:	0.2s;
	animation-delay:			0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay
{
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
				transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
				transform: scale3D(0, 0, 1);
	}
}

@keyframes sk-cubeGridScaleDelay
{
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
				transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
				transform: scale3D(0, 0, 1);
	}
}



@supports (transform: translate(0))
{
	#leftmenu
	{
		left:					0;
		transform:			translateX(-280px);
	}
	#leftmenu.onscreen
	{
		transform:			translateX(0px);
	}

	.viewer .pictureInfos
	{
		left:					0;
		transform:			translateX(-460px);
	}
	.viewer.infosOnScreen .pictureInfos
	{
		transform:			translateX(0px);
	}

	.viewer.infosOnScreen > .rendermode .picture--wrapper .previousButton
	{
		left:					0;
		transform:			translateX(460px);
	}
}


@media screen and (max-width:1023px)
{
	#contextualleftmenu, #contextualrightmenu, #centralcontainer.withleftmenu > #contextualleftmenu, #centralcontainer.withrightmenu > #contextualrightmenu
	{
		display:				none;
	}

	#centralcontainer.withleftmenu > #contentcontainer, #centralcontainer.withrightmenu > #contentcontainer
	{
		margin-left:		0px;
		margin-right:		0px;
	}

	#contentcontainer
	{
		padding-left:		24px;
		padding-right:		24px;
	}
}

@media screen and (max-width:800px) and (orientation: portrait)
{
	#leftmenu, .viewer .pictureInfos
	{
		width:				100%;
		left:					-100%;
	}

	@media screen and (max-height:800px)
	{
		.viewer .pictureInfos
		{
			margin-bottom:		260px;
		}

		.viewer .pictureInfos .mapContainer
		{
			height:				260px;
			margin-bottom:		-260px;
		}
	}

	@supports (transform: translate(0))
	{
		#leftmenu, .viewer .pictureInfos
		{
			left:					0;
			transform:			translateX(-100%);
		}
	}
}

@media screen and (max-height:700px) and (orientation: landscape)
{
	.viewer .pictureInfos
	{
		margin-bottom:		0px;
	}

	.viewer .pictureInfos .mapContainer
	{
		display:				none;
	}

	@media screen and (max-width:767px)
	{
		.viewer .pictureInfos
		{
			width:				100%;
			left:					-100%;
		}

		@supports (transform: translate(0))
		{
			.viewer .pictureInfos
			{
				left:					0;
				transform:			translateX(-100%);
			}
		}
	}
}

.mapPicturePreview
{
	position:			absolute;
}
.mapPicturePreview .wrapper
{
	border-width:		4px 4px 1px 4px;
	border-style:		solid;
	border-color:		white;
	background-color:	white;
	position:			relative;
}
.mapPicturePreview .wrapper img
{
	max-width:			80px;
	max-height:			80px;
}
.mapPicturePreview .wrapper .count
{
	position:			absolute;
	top:					2px;
	right:				2px;
	background-color:	dodgerblue;
	border-radius:		8px;
	padding:				2px 4px;
	color:				white;
	font-weight:		bold;
	min-width:			10px;
	text-align:			center;
}
.mapPicturePreview .arrowWrapper
{
	text-align:			center;
}
.mapPicturePreview .arrowWrapper .arrow
{
	border-width:		20px 10px 0px 10px;
	border-color:		white transparent transparent transparent;
	border-style:		solid;
	position:			absolute;
	left:					calc( 50% - 10px );
}