@import "grid.less";
@import "default-color-theme.less";
@import "pro-color-theme.less";
@import "typeahead.less";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

@import "video-js.css";

html, body {
	height:100%;
	/* Adjust font size */
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	/* Font varient */
	font-variant-ligatures: none;
	-webkit-font-variant-ligatures: none;
	/* Smoothing */
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

body {
	overflow-y: scroll;
}

a:focus {
	outline:none;
}

.video-js *:focus {
	outline:none;
}

.video-js .vjs-big-play-button {
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}

.suborganisationProfileInfoView {
	section article a {
		font-weight:bold;
		color:@blue;
		font-size:110%;
	}
}

.dropzone {
  height: 200px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 1;
  border:5px dashed #e5e5e5;

  &.in {
    height: 150px;
    line-height: 150px;
    font-size: larger;
  }

  &.hover {
  background: #a5a5a5;
  }
}

.fileimport {
	.queue {
		position:relative;
		margin-top:30px;

		.file {
			position:relative;
			color:white;
			background-color:#a5a5a5;
			margin:1px 0;

			padding:10px;
		}
	}
	.objectselection {
		background-color:#e5e5e5;
		height:300px;
		overflow: auto;
		overflow-x:hidden;
		padding:0;

		.list {
			margin:15px;
		}

		input {
			width:100%;
			color:white;
			margin:0;
		}
	}

	.preview {
		.object {
			border-radius:140px;
			border-color:white;
			border-style:solid;
			border-width:5px;
			background-color:#C5C5C5;
			position:relative;
			height:130px;
			width:80%;

			.picture, .description {
				display:block;
				position:absolute;
			}

			.picture {
				left:-5px;
				top:-5px;
				bottom:-5px;
			}

			.description {
				left: 150px;
				right:30px;
				top:15px;
				bottom:15px;

				.title {
					font-size:120%;
					color:black;
				}
			}
		}
	}
}

.templateeditor {

		section {
			text-align:right;
		}
	[data-field], .descriptor {
		font-size:1.1em;
		margin:2px 0;
		border-bottom:1px solid #e5e5e5;
		padding:0.5em 0;
		clear:both;

		&.descriptor {
			border-bottom:none;
		}

		.clearfix();

		.controls {
			user-select: none;
	      -moz-user-select: none;
	      -khtml-user-select: none;
	      -webkit-user-select: none;
	      -o-user-select: none;
	    display:inline-block;
		}

		.label {
			font-size:1em;
			float:left;
			padding:0.20em;
		}
	}

	.controls::after {
		content: " ";
		clear:both;
	}

	h2[data-field] {
		font-size:1.5em;
		clear:both;
	}

}

.round-toggler {
	background-color:#e5e5e5;
	color:#666;
	border-radius:1000px;
	display:inline-block;
	margin:0 0.2em;
	width:1.4em;
	height:1.4em;
	text-align:center;
	cursor:pointer;
	font-size:1em;
	padding:0.20em;

	&.checked {
		color:white;
		background-color:#6a9860;
	}
}

html.exportpage,
.exportpage body {
	height:auto;
	font-size:80%;
}

.exportpage {
	header {
	  margin:0;
	  padding:0;
	  border-bottom: 2px solid @blue;
	  float:none;
	  margin-bottom:15px;

	  h1 {
	  	margin-top:0;
	  	margin-bottom:0;
	  }

	  .search {
	  	display:inline-block;

	  	.label {
	  		font-weight:bold;
	  		margin-right:5px;

	  		&:after {
	  			content: ":"
	  		}
	  	}

	  	.value {
	  		margin-right: 5px;
	  	}
	  }
	}

	.collectrinput {
		border:none;
		background-color:transparent;
		color:black;
	}

	.sortfieldselector {
		right:0!important;
	}

	.objectTableView {
		margin:0;

		td .value {
			padding:2px;
			font-size:90%;
			position:static;
		}
	}
}

.dialog {
	position:fixed;
	z-index: 1000000;

	.button {
		padding:5px 10px;
		background-color:@objectCollectionChooserButtonActiveBackgroundColor;
		cursor:pointer;
		display:inline-block;
		color:white;
		font-weight:bolder;

	}

	.overlay {
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		background-color:rgba(255, 255, 255, 0.8);
		opacity:0;
		transition:opacity 0.2s ease;
	}

	&.show {
		.overlay {
			opacity:1;
		}
		.content {
			opacity:1;
		}
	}

	.content {
		border:1px solid #ddd;
		opacity:0;
		position:fixed;
		padding:15px;
		transition:opacity 0.2s ease;
		top:50%;
		left:50%;
		transform:translateX(-50%) translateY(-50%);
		width:50%;
		max-width:500px;
		background-color:white;
		color:black;

		.footer {
			text-align:right;
		}

		.cancel {
			cursor:pointer;
		}

		h1, h2 {
			margin-top:0;
		}
	}
}

.progressbarcontainer {
	margin:15px 0;
	padding:10px;
	position:relative;
	color:white;
	background-color:transparent;
}

.progressbar {
	position:absolute;
	top:0;
	left:0;
	width: 0;
	bottom: 0;
	background-color:@objectCollectionChooserButtonActiveBackgroundColor;
	transition:width 0.1s ease;
	overflow:hidden;
	color:white;

	.shadowclone {
		position:relative;
		min-height:1em;
		z-index:1000;
		padding:10px;
		white-space:nowrap;
	}
}

.progressitem {
	position:relative;
	min-height:1em;
	z-index:1000;

	&.colorcloned {
		color: @objectCollectionChooserButtonActiveBackgroundColor;
		z-index: auto;
	}
}

.spinner {
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 9px;
  height: 9px;
  background-color: white;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.page {
	hgroup {
		h1 {
			font-size:2em;
			color:@smartbarBackgroundColor;
			border-bottom:1px solid @smartbarBackgroundColor;
		}
	}
}

.files {
	margin-bottom:30px;
}

.files .file {
	opacity:0.8;
	color:@blue;
	font-weight:bold;
	margin-top:30px;

	span {
		padding-left:70px;
		padding-top:10px;
		font-size:150%;
		background-image:url("../assets/img/download-big.png");

		background-repeat:no-repeat;
		background-position:left center;

		display:block;
		height:50px;
		text-align:left;
	}

	&.export {
		span {
			background-image:url("../assets/img/export.png");
		}
	}

	&:hover {
		opacity:1;
	}
}

select.collectrinput {
	-webkit-appearance:none;
	padding-top:0;
	padding-bottom:0;
}

input[type=text],
input[type=password],
textarea,
.collectrinput {
	background-color:@inputFieldBackground;
	border:1px solid #848484;
	padding:5px;
	color:@greyTextColor;
	font-size:1em;
	outline:none;
	border-radius:0;

	&:focus {
		border-color:@blue;
	}
}

input[type=submit] {
	text-align:center;
	padding:5px 0px;
}

input, label {
	margin:5px 0;
}

label {
	font-size:1em;
	color:@profileMenuColor;
}

.social {
  a {
    background-position: center center;
    background-repeat: no-repeat;
    display:block;
    width:25px;
    height:25px;
    overflow:hidden;
    white-space:nowrap;
    text-indent: 50px;
  }
  .twitter {
    background-image: url("../assets/img/social/tw.png");
    &:hover {
      background-image: url("../assets/img/social/tw-hover.png");
    }
  }
  .facebook {
    background-image: url("../assets/img/social/fb.png");
    &:hover {
      background-image: url("../assets/img/social/fb-hover.png");
    }
  }
}

.app {
	box-sizing:border-box;
	padding-top:44px;
	min-height: 100%;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size:12px;

	.contentView {
		padding:0.5em 0;
		text-align:center;

		p {
			font-size:14px;
		}

		a {
			color:@smartbarBackgroundColor;
			font-weight:bold;
		}

		h1, h2 {
			color:@blue;
			margin:2em 0 0em 0;
		}
	}
}

a {
	text-decoration:none;
	color:inherit;
}

.app.substartView {
	padding-top:0;
	background-image:url("../assets/img/content-light.png");
	background-repeat:repeat;
	font-family: 'Titillium Web', sans-serif;
	font-size:18px;
	font-weight: 400;
	line-height:1.5em;
	-webkit-font-smoothing: antialiased;

	.langswitcher {
		right:5px;
		top:10px;
		position:absolute;
		font-size:90%;

		a {
			opacity: 0.9;

			&:hover {
				opacity:1;
			}
		}

		.active a {
			text-decoration:underline;
		}

		ul, li {
			list-style-type:none;
			padding:0;
			margin:0;
			text-indent:0;
		}

		li {
			display:inline-block;
			margin-left:2px;

			&::before {
				content: "|";
				margin-right:4px;
			}
		}

		li:first-child {
			&::before {
				content: "";
			}
		}
	}

	.headerimg {
		overflow:hidden;
		margin-top:160px;
		margin-bottom:45px;
	}

	.button {
		text-transform:uppercase;
		font-size:16px;
		line-height:14px;
		padding:7px 10px;
		border-radius:0;
		font-weight:600;

		&.orange {
			color:white!important;
			text-shadow: 1px 1px 1px rgba(70, 70, 70, 0.5);
			border:1px solid #db7c00;
			background: #ffb22d; /* Old browsers */
			background: -moz-linear-gradient(top, #ffb22d 0%, #f08f1b 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb22d), color-stop(100%,#f08f1b)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #ffb22d 0%,#f08f1b 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #ffb22d 0%,#f08f1b 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #ffb22d 0%,#f08f1b 100%); /* IE10+ */
			background: linear-gradient(to bottom, #ffb22d 0%,#f08f1b 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb22d', endColorstr='#f08f1b',GradientType=0 ); /* IE6-9 */

			&:hover {
			  background: #ffa145; /* Old browsers */
			  background: -moz-linear-gradient(top, #ffa145 0%, #f0812a 100%); /* FF3.6+ */
			  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa145), color-stop(100%,#f0812a)); /* Chrome,Safari4+ */
			  background: -webkit-linear-gradient(top, #ffa145 0%,#f0812a 100%); /* Chrome10+,Safari5.1+ */
			  background: -o-linear-gradient(top, #ffa145 0%,#f0812a 100%); /* Opera 11.10+ */
			  background: -ms-linear-gradient(top, #ffa145 0%,#f0812a 100%); /* IE10+ */
			  background: linear-gradient(to bottom, #ffa145 0%,#f0812a 100%); /* W3C */
			  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa145', endColorstr='#f0812a',GradientType=0 ); /* IE6-9 */
			}
		}
	}

	.livechat {
		cursor:pointer;
	}

	.smartbar {
		display:none;
	}

	.support {
		h2 {
			font-size: 30px;
			font-weight: 600;
		}

		a {
			font-weight:600;
		}

		overflow:hidden;
		width:320px;
		float:right;
	}

	.ribbon {
		background-image: url("../assets/img/ribbon-blue.png");
		background-repeat: repeat-x;
		background-size:auto 100%;
		color:white;
		overflow:hidden;
		padding:36px 0;
	}

	.registerlink {
		font-weight:600;
	}
	
	.forgotlink {
		font-weight:600;
	}

	.headerregister {
		font-weight:700;
		position:absolute;
		right:5px;
		top:60px;
	}

	.col1 {
		padding:36px 0;
		width:600px;
		margin:0 10px;
		float:left;
		position:relative;

		border-right:1px solid rgba(255, 255, 255, 0.57);
	}

	.loginView, .registration, .forgot, .restorePassView {
		hgroup {
			display:none;
		}

		p {
			margin-top:0;
			margin-bottom:6px;
		}

		label {
			text-transform:uppercase;
			font-weight: 600;
			width:150px;
			display:inline-block;
			font-size:16px;
			color:white;
			position:relative;
			top:-2px;
		}

		input {
			background-color:white;
			border-radius:0;
			border-width:0px;
			color:#5f5f5f;
			padding:6px 6px;

			&[type='text'], &[type='password'] {
				width:400px;
				opacity:0.86;

				&:hover, &:focus {
					opacity:1;
				}
			}
		}

		.submit {
			.button;
			.orange;
			margin-left:150px;
			padding:8px 14px;
			font-weight:700!important;
			font-family: 'Titillium Web', sans-serif;
		}

		.failure {
			color: white;
		}
	}

	.registration {
		position:absolute;
		top:16px;
		left:-9999px;
		-webkit-transition:-webkit-transform 0.3s ease;
		-moz-transition:-moz-transform 0.3s ease;
		transition:transform 0.3s ease;
		-webkit-transform:translateY(-500px);
		-moz-transform:translateY(-500px);
		transform:translateY(-500px);
	}
	
	.forgot {
			position:absolute;
			top:16px;
			left:-9999px;
			-webkit-transition:-webkit-transform 0.3s ease;
			-moz-transition:-moz-transform 0.3s ease;
			transition:transform 0.3s ease;
			-webkit-transform:translateY(-500px);
			-moz-transform:translateY(-500px);
			transform:translateY(-500px);
		}
	
	.restorePass {
		-webkit-transition:-webkit-transform 0.3s ease;
		-moz-transition:-moz-transform 0.3s ease;
		transition:transform 0.3s ease;
	}
		
	.login {
		-webkit-transition:-webkit-transform 0.3s ease;
		-moz-transition:-moz-transform 0.3s ease;
		transition:transform 0.3s ease;
	}

	.register {
		.registration {
			left:0;
			-webkit-transform:translateY(0);
			-moz-transform:translateY(0);
			transform:translateY(0);
		}

		.forgot {
			-webkit-transform:translateY(500px);
			-moz-transform:translateY(500px);
			transform:translateY(500px);
		}
		
		.login {
			-webkit-transform:translateY(500px);
			-moz-transform:translateY(500px);
			transform:translateY(500px);
		}
	}
	
	.forgotPass {
		.forgot {
			left:0;
			-webkit-transform:translateY(0);
			-moz-transform:translateY(0);
			transform:translateY(0);
		}

		.registration {
			-webkit-transform:translateY(500px);
			-moz-transform:translateY(500px);
			transform:translateY(500px);
		}

		.login {
			-webkit-transform:translateY(500px);
			-moz-transform:translateY(500px);
			transform:translateY(500px);
		}
	}

	.footersignature {
		position:absolute;
		bottom:0;
	 	padding: 15px 0 10px;
	 	color: #4f4f4f;
	    font-weight: 600;
	    text-transform:uppercase;
	    font-size:9px;
	    line-height:16px;

	    a {
	      font-size:11px;
	    }

	    .sub {
	      font-size:9px;
	      text-transform:none;
	      font-style: italic;
	      margin:0;
	    }

		.logo a {
			background-image:url("../assets/img/logo-sm.png");
		}

	    .logo {
	    	display:inline-block;
	    	top:0px;
	    	left:0;
	    	position:absolute;
	    	a {
	    		display: block;
	    		width: 114px;
	    		height: 14px;
	    	}
	    }

	    .content {
	    	margin-left: 140px;
	    }

	    .social {
	    	float:right;
	    	margin-top:0;
	    	a {
	    		display:inline-block;
	    	}
	    }
	}
}

.public {
		text-align:right;
		font-size:110%;

		.control {
			font-weight:bold;
			cursor:pointer;
			color:white;
			user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -o-user-select: none;
		}

	.button {
		padding:5px 10px 5px 30px;
		color: @blue;
		font-weight:bold;
		cursor:pointer;
		display: inline-block;
		width:auto;
		margin:auto;
		background-position:8px center;
		background-repeat:no-repeat;
		background-size:auto 1.3em;

		user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -o-user-select: none;

		&:hover {
			background-color:@blue;
			color: white;

			&.setting-public {
				background-image:url(/assets/img/globe-grey.png);
				color:white;
			}
			&.setting-private {
				background-image:url(/assets/img/lock-grey.png);
				color:white;
			}
		}

		&.setting-public {
			background-image:url(/assets/img/globe-orange.png);
			color:#db7c00;
		}
		&.setting-private {
			background-image:url(/assets/img/lock-purple.png);
		}
	}

	.settings {
		min-width:250px;
		text-align:left;
		display:none;
		position:absolute;
		right:0;
		background-color:@blue;
		padding:15px;
		color: white;
		z-index:2000000;

		label {
			color:white;
		}
		input {
			background-color:white;
			color:#555;
			width:400px;
		}
	}

	&.menuopen {
		.settings {
			display:block;
		}

		.button {
			background-color:@blue;
			color:white;


			&.setting-public {
				background-image:url(/assets/img/globe-grey.png);
			}
			&.setting-private {
				background-image:url(/assets/img/lock-grey.png);
			}
		}
	}
}

.profileblock {
	box-sizing:border-box;
	padding:10px;
	background-color:white;
	margin:10px 0;
}

.app.subprofileView,
.app.suborganisationProfileView {
	background-color:#efefef;
}

.public-app {
	padding-top:60px;

	.downloader.option {
		display:none!important;
	}

	.languageswitcher {
		position:absolute;
		right:50%;
		z-index:1000000;
		margin-right:-470px;

		a {
			opacity: 0.9;

			&:hover {
				opacity:1;
			}
		}

		.active a {
			text-decoration:underline;
		}

		ul, li {
			list-style-type:none;
			padding:0;
			margin:0;
			text-indent:0;
		}

		li {
			display:inline-block;
			margin-left:2px;

			&::before {
				content: "|";
				margin-right:4px;
			}
		}

		li:first-child {
			&::before {
				content: "";
			}
		}
	}

	.smartbar {
		height:60px;

		.inner {
			height:100%;
		}

		.profileButton:hover {
			background-color:transparent;
		}

		.profileButton .username {
			margin-left:52px;
			height:100%;
			line-height:100%;
			vertical-align:middle;
			font-size:20px;
			margin-top:0.9em;
		}

		.spinner {
			position:static;
		}
	}
}

.notinviewport {
	visibility:hidden;
}

.smartbar {
	position: fixed;
	width: 100%;
	z-index: 1000000;
	top: 0;
	background-color: @blue;
	color: @smartBarTextColor;
	font-size:1.25em;
	text-transform:uppercase;
	font-weight:700;

	input[type=text],
	input[type=password],
	textarea {
		border-radius:0;
		border-width:0;
	}

	.spinner {
		opacity:0;
		-moz-transition: opacity 0.5s ease 1s;
		-o-transition: opacity 0.5s ease 1s;
		-webkit-transition: opacity 0.5s ease 1s;
		transition: opacity 0.5s ease 1s;
	}

	.activity & .spinner {
		opacity:1;
	}

	.inner {
		width:100%;
		display: flex;
		height:44px;
		line-height:44px;
		vertical-align:middle;
	}

	.widget, .submenu {
		z-index:1000000;
		position:relative;
	}

	.smartbarFillerView {
		flex:1;
	}

	.filter {
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		height:100%;
		z-index:1000001;

		.submenu {
			min-width:240px;
			left:50%;
			transform:translateX(-50%);
		}

		.button {
			display:flex;
			align-items:center;
			flex-direction:row-reverse;

			.toggler {
				margin-left:10px;
			}
		}
	}

	.toggler {
		background-repeat:no-repeat;
		background-position: center center;
		background-size:60% auto;
		background-image:url(/assets/img/menu-toggler.png);
		width:22px;
		height:22px;
		cursor:pointer;

		&:hover {
			background-color:transparent;
		}
	}

	.filterwidget {
		margin-left:0px;
		margin-right:0px;

		.button {
			padding-left:10px;
			padding-right:10px;
		}

		.searchbar {
			width:100%;
			box-sizing:border-box;
		}
	}

	.menu, .profileButton {
		margin-left:0;
		margin-right:0;
		padding-left:10px;
		padding-right:10px;
	}

	.menu,
	.profileButton,
	.button {
		cursor:pointer;

		&, .buttontext {
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			height:100%;
		}

		.buttontext {
			padding-left:1px;
		}

		&:hover, &.active {
			background-color:@smartbarActiveBackgroundColor;
		}
	}

	.submenu {
		position:absolute;
		display:none;
		background-color:@smartbarBackgroundColor;
		line-height:1em;
		font-size: 0.8em;
		min-width:160px;

		.search {
			display:flex;

			input {
				flex:1;
				margin:0 1px;
				padding:10px;
			}
		}

		ul {
			list-style-type:none;
			padding:0;
			margin:0;
		}

		li, .listitem, .default {
			padding:10px;
			display:block;
			cursor:pointer;
			text-overflow:ellipsis;
			line-height:1.5em;
			overflow:hidden;

			&:hover {
				background-color:@smartbarActiveBackgroundColor;
			}
		}
	}

	.menuopen {
		.button {
			background-color:@smartbarMenuOpenButtonBackgroundColor;
			color:@white;
		}

		.submenu {
			display:block;
		}
	}

	.creatorview, .right-widget {
		height:100%;
		float:right;
	}

	.creatorview {

		.submenu {
			right:0;
			min-width:150px;
		}

		.button {
			height:100%;

			.creatoricon {
				background-image:url(/assets/img/creator.png);
				background-position:center 12px;
				background-repeat:no-repeat;
				height:100%;
				width:22px;
				background-size:contain;
				float:right;
				margin-right:10px;
				margin-left:8px;
			}


			&:hover {
				color:@white;
			}
		}
	}

	.profileButton {
		height:100%;

		&:hover {
			color:@white;
		}

		.picture {
			background-image:url(/assets/img/userprofile-default.png);
			background-position:center center;
			background-repeat:no-repeat;
			position:absolute;
			top:50%;
			margin-top:-11px;
			height:20px;
			width:20px;
			border-radius:20px;
			border:2px solid white;
			background-size:cover;
			float:left;
			margin-right:10px;
		}
	}
}

.app.subobjectView {
	background-color:#efefef;
}

.app.subcollectionView {
	background-color:@objectPageBackgroundColor;
}

.hide-back-button .back {
	display: none!important;
}

.public-app .media-template [data-field] {
	display:none!important;
}

.page {
	padding-top:20px;
	padding-bottom:60px;

	.back {
		padding-top:30px;

		.button {
			height:50px;
			background-image:url(/assets/img/back.png);
			background-repeat:no-repeat;
			background-position:2px center;
			cursor:pointer;
		}
	}
}
.page.collection {
	header {
		margin-bottom:45px;

		h1.title {
			font-size:7.2em;
			color:@collectionTitleColor;
			font-weight:normal;
			margin-bottom:0;
			margin-top:5px;
			line-height:1em;
		}
	}

	.utils {
		margin-bottom:35px;
	}
}
.page.object {
	padding-left:15px;
	padding-right:15px;
	background-color:#fff;

	.button {
		cursor:pointer;
	}

	section {
		visibility:hidden;
		margin-bottom:1.5em;
	}

	input[type=text],
	input[type=password],
	textarea {
		border-radius:0;
		border-width:0;
	}

	.back {
		position:fixed;
		left:15px;
		padding-top:0;

		.button {
			font-size:1.1em;
			height:auto;
			padding-left:20px;
			background-size:auto 16px;
		}
	}

	.menu {
		.widget {
			border-top: 1px solid #ccc;
			margin-top: 1em;

			h4 {
				font-weight:normal;
				text-transform:uppercase;
				font-size:120%;
			}
		}
	}

	.references {
		.button.addreference {
			background-color:#ccc;
			background-image:url(/assets/img/creator-black.png);
			background-repeat:no-repeat;
			background-position: 10px center;
			background-size:10px;
			padding:5px 10px 5px 30px;
			text-transform:uppercase;
			cursor:pointer;
			color:black;
			display: block;
		}

		.closesearch {
			position:absolute;
			top:15px;
			right:15px;
			cursor:pointer;
			transform:rotateZ(45deg) scale(0.8);
			opacity:0.8;
		}

		.messagelinked {
			display:none;
		}

		&.object-list-shown {
			.messagelinked {
				display:block;
			}
			.addreference {
				background-image:url(/assets/img/minus-black.png);
			}

			.objectsearch {
				display:block;
			}
		}

		.objectsearch {
			position: relative;
			display:none;
			padding:15px;
			margin:0 -15px 35px -15px;
			background-color:#ccc;

			.search {
				margin-bottom:1em;
			}
			.results {
				max-height:50vh;
				min-height:256px;
				overflow:auto;
			}
		}
	}

	.qr-dialog {
		display:none;

		input {
			width:100%;
			box-sizing:border-box;
		}
		
		.public-object-status {
			font-weight:bold;
			background-position:left center;
			background-repeat:no-repeat;
			background-size: 16px;
			padding-left: 20px;

			&.public-object-ok {
				background-image:url(/assets/img/globe-orange.png);
				display:none;
			}
			&.public-object-error {
				background-image:url(/assets/img/globe-white.png);
			}
		}

		&.public-object .public-object-ok {
			display:block;
		}

		&.public-object .public-object-error {
			display:none;
		}

		.public-object-error {
			text-decoration:underline;
		}

		.code img {
			max-width:100%;
		}

		&.menuopen {
			display: block;
		}

		a {
			color:white;

		  &:hover {
				color:#eee;
			}
		}

		.controls {
			margin-top:0.5em;
			padding:0;
			list-style-type:none;
			text-indent:0;

			li {
				margin-top:0.5em;
				list-style-type:none;
				padding:0;
			}
		}

		a[download] {
			background-image:url(/assets/img/download-attachment.png);
			background-position:left center;
			background-size:14px;
			background-repeat:no-repeat;
			padding-left:18px;
		}

		.close {
			position: absolute;
			top:0;
			font-size:3em;
			right:10px;
			cursor:pointer;
		}
	}

	.collectionchooser {
		&.public-object .button:hover .public-indicator {
			background-image:url(/assets/img/globe-orange.png);
		}

		.button.addcollection {
			cursor:pointer;
			position:relative;
			opacity:0.75;
		}

		.button:hover,
		&.menuopen .button.addcollection {
			opacity:1;
		}

		.button.addcollection::after {
			content: " ";
			position:absolute;
			right:0;
			top:2px;
			height:1em;
			width:1em;
			background-image:url(/assets/img/collection-opener.png);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:contain;
			display:block;
			transition:all 0.3s ease;
		}

		&.menuopen .button.addcollection::after {
			transform:rotateZ(180deg);
		}

		.collectionlist {
			display:none;
		}

		&.menuopen .collectionlist {
			background-color:#ccc;
			padding:1em;
			display:block;
			margin:0.2em -2em 0 -1em;
			max-height:20em;
			overflow:auto;
		}

		.collectionmenu {
			font-size:1em;
			width:100%;
			z-index:999999;

			.collection {
				background-size:auto;
			}

			.activelist .collection {
				background-image:url(/assets/img/delete-grey.png);
				font-weight:bold;
				opacity:1.0;
			}

			.collectionlist .collection {
				background-image:url(/assets/img/clone.png);
				opacity:0.75;
			}

			.public-collection {
				padding-right:45px;
				position:relative;

				.public-indicator {
					width:15px;
					height:15px;
					vertical-align:text-top;
					display:inline-block;
					background-image:url(/assets/img/globe-orange.png);
				}
			}

			.collection {
				padding:5px 10px;
				margin:-10px 0px 10px -10px;
				padding-right:30px;
				overflow:hidden;
				text-overflow:ellipsis;
				line-height:1.5em;
				display:block;
				cursor:pointer;
				background-repeat:no-repeat;
				background-position:right center;

				&:hover {
					opacity:1.0;
				}
			}
		}
	}

	.media {
		overflow:hidden;
		position:relative;
		background-color:#e2e2e2;
		margin:2em -15px;
		height:664px;
		clear:both;
		color:black;
		user-select:none;
		display:flex;
		flex-direction:column;

		&:hover {
			.controls {
				opacity:1;
			}
		}

		.currentselection {
			visibility:hidden;
			margin:10px 35px;
			padding:10px;
			position:relative;
			color:white;
			background-color:@objectCollectionChooserMenuActiveBackgroundColor;

			&.show {
				visibility: visible;
			}

			.description {
				overflow: hidden;
				text-overflow:ellipsis;
				text-align:left;
			}

			.button {
				float:right;
				cursor:pointer;
			}

			.viewfile, .processing {
				display:none;
			}

			&.uploading {
				.startupload, .viewfile {
					display:none;
				}
				.processing {
					display:block;
				}
			}

			&.complete {
				&:hover {
					.progressbar {
						background-color:@objectCollectionChooserButtonActiveBackgroundColor;
					}
				}

				.viewfile {
					display:block;
				}

				.startupload, .processing {
					display:none;
				}

				.progressbar {
					background-color:@objectCollectionChooserMenuBackgroundColor;

				}
			}
		}

		.controls {
			opacity:1;
			z-index:10000;
			width:50px;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-direction:column;
			color:white;
			text-align: center;
			transition:opacity 0.2s ease;
			background-color:rgba(0, 0, 0, 0.6);

			.options {
				> div {
					display: flex;
					flex-direction:column;
				}

				.option {
					cursor:pointer;
					display: block;
					margin:0 0 5px 0;

					background-repeat:no-repeat;
					background-position:center center;
					background-image:contain;

					white-space: nowrap;

					width:100%;
					height:50px;
					overflow:hidden;
					text-indent:50px;

					&.add {
						background-image:url(/assets/img/creator.png);
						background-size:16px auto;
					}

					&.downloader {
						background-image:url(/assets/img/download-attachment.png);
					}

					&.rotator {
						background-image:url(/assets/img/rotate.png);
					}

					&.metadata {
						background-image:url(/assets/img/metadata.png);
						background-size:16px 16px;

						.mediametadata {
							position: absolute;
							top: 0;
							background-color: rgba(0, 0, 0, 0.6);
							left: 51px;
							bottom: 0;
							width: 640px;
							min-height:300px;
							text-align:left;
							text-indent:0;
							padding:2em;

							label {
								color:white;
								text-align:left;
							}
						}
					}

					&.highlighter,
					&.highlighter.off,
					&.highlighter.on:hover {
						background-image:url(/assets/img/previewpic-off.png);
					}

					&.highlighter.on,
					&.highlighter:hover, 
					&.highlighter.off:hover {
						background-image:url(/assets/img/previewpic-on.png);
					}

					&.delete-attachment {
						background-image:url(/assets/img/remove-attachment.png);
					}
				}
			}
		}

		.navigator {
			position: absolute;
			bottom:0;
			left:0;
			right:0;
			// background-color:rgba(203, 203, 203, 0.20);
			// background-color:#464646;
			background-color:rgba(0, 0, 0, 0.6);
		}

		.previews {
			z-index:10000;
			height:70px;
			width:100%;
			padding:1px 1px 5px 1px;
			text-align: center;
			user-select:none;
			display: flex;
			align-items:center;
		}

		.attachmentelements {
			display: flex;
			flex: 1;
		}

		.back, .forward {
			position:static;
			visibility:hidden;
			display:inline-block;
			width:40px;
			transform:scale(0.8);
			height:100%;
			padding:0;
			cursor:pointer;
			background-position:center center;
			background-repeat:no-repeat;
			background-color:transparent;
			background-size:25px auto;
			background-image:url(/assets/img/white-prev.png);

			&.show {
				visibility:visible;
			}

			&.forward {
				transform:scale(0.8) rotateZ(180deg);
			}
		}

		.mediagroups {
			/* position: absolute;
			bottom: 50px;
			left: 0;
			right:0;*/
			text-align: center;
			padding: 8px 8px 8px 8px;
			color: #b0b0b0;
			z-index:10;
			font-size:100%;

			.group {
				font-weight:bold;
				padding: 2px 8px;
				border-radius: 10px;
				text-transform:uppercase;
				cursor:pointer;

				.count {
					padding-left:0.2em;

					&::before {
						content: "(";
					}
					&::after {
						content: ")";
					}
				}

				&.active {
					background-color: #404040;
					color:white;
				}
			}
		}

		.jumper-window {
			flex:1;
			height:100%;
			overflow:hidden;
			position: relative;

			.jumpers {
				height:100%;
				display: flex;
				position:absolute;
				left:0;
				transition:transform 0.2s ease;
			}

			.jumper {
				display: inline-block;
				margin:2px 2px;
				border:4px solid transparent;
				border-width:0 0 5px 0;
				padding:5px 0;
				width:64px;
				height:100%;
				box-sizing:border-box;
				cursor: pointer;
				opacity:0.9;
				transition:opacity 0.1s ease;
				border-radius:4px;

				&:hover {
					opacity:0.9;
				}

				&.active {
					opacity:1;
					border:4px solid #d8d8d8;
					border-width:0 0 5px 0;
				}

				.content {
					height:100%;
					width:100%;
					background-repeat:no-repeat;
					background-position:center center;
					background-size:contain;
					position:relative;

					.preview {
						display:block;
						position:absolute;
						top: 0;
						left: 0;
						right:0;
						bottom:0;
						background-repeat:no-repeat;
						background-position:center center;
						background-size:contain;
					}
				}
			}
		}

		.element {
			display:none;
			flex:1;
			/*top:0px;
			left:0;
			right:0;
			bottom:0;
			position:absolute;*/
			text-align:center;

			&.loading {
				background-image:url(/assets/img/loader.gif);
				background-size:12%;
				background-repeat:no-repeat;
				background-position:center center;
			}

			&.show {
				display:block;
			}

			.zoomcontrols {
				position:absolute;
				top:20%;
				right:0;
				width:20%;
				margin:4px 0;
				padding:0 2px;
				opacity:0;
				text-align: center;
				transition:opacity 0.2s ease;
				background-color:rgba(0, 0, 0, 0.6);
				display: flex;
				color:white;
				align-items:center;

				.currentzoom {
					flex:1;
					margin:0;
				}

				input[type=range] {
					-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
					width: 100%; /* Specific width is required for Firefox. */
					background: transparent; /* Otherwise white in Chrome */
					border:none;
				}
				
				input[type=range]::-webkit-slider-thumb {
					-webkit-appearance: none;
					border:none;
				}
				
				input[type=range]:focus {
					outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
				}
				
				input[type=range]::-ms-track {
					width: 100%;
					cursor: pointer;
				
					/* Hides the slider so custom styles can be added */
					background: transparent; 
					border-color: transparent;
					color: transparent;
					border:none;
				}

				input[type=range]::-webkit-slider-thumb {
					-webkit-appearance: none;
					height: 2.1em;
					width: 1em;
					background: #efefef;
					cursor: pointer;

					&:hover {
						background: white;
					}
				}

				input[type=range]::-moz-range-thumb {
					-webkit-appearance: none;
					height: 2.1em;
					width: 1em;
					background: #efefef;
					cursor: pointer;

					&:hover {
						background: white;
					}
				}

				input[type=range]::-ms-thumb {
					-webkit-appearance: none;
					height: 2.1em;
					width: 1em;
					background: #efefef;
					cursor: pointer;

					&:hover {
						background: white;
					}
				}

				> * {
					transition:background-color 0.2s ease;
					cursor:pointer;
				}

				> *:hover {
					background-color:white;
					color:black;
				}

				.zoomin, .zoomout {
					font-size:150%;
					display: block;
					font-weight:700;
					padding:0 5px;
					white-space: nowrap;
					border: none;
					height: 100%;
					margin: 0 -2px 0 -2px;
					width: 0.5em;
					text-align: center;
					margin-top: -1px;
					padding-bottom: 1px;
				}
			}

			&:hover {
				.zoomcontrols {
					opacity:1;
				}
			}

			.content {
				margin:auto;
				margin-top:80px;

				.downloader {
					display:inline-block;
					cursor:pointer;
					background-repeat:no-repeat;
					background-position:left center;
					background-image:url(/assets/img/download-attachment-dark.png);
					padding:5px 0;
					padding-left:22px;
					margin-top:20px;
				}
			}

			&.video, &.embed {
				bottom: 108px;
				width:990px;
				height:556px;
			}

			&.embed embed {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}

			.content .preview {
				display:none;
			}
			&.image {
				.content {
					width:100%;
					height:100%;
					margin:0;
					padding:0;
					position:relative;
					background-repeat:no-repeat;
					background-position:center center;
					background-size:contain;

					.preview {
						display:block;
						position:absolute;
						top: 0;
						left: 0;
						right:0;
						bottom:0;
						background-repeat:no-repeat;
						background-position:center center;
						background-size:contain;
					}
				}

				.openseadragon-canvas {
					outline:none;
				}

				.openseadragon-message {
					display: none!important;
				}
			}
		}
	}

	.ownerselection {
		right:100%;
		top:0;
		position:absolute;
		margin:auto;
		z-index:10;
		background-color:#ebebeb;
		background-color:@objectSidemenuBackgroundColor;
		width:120%;
		overflow:auto;
		height:100%;
		
		.organisation {
			display:inline-block;
			margin:5px 10px;
			position:relative;

			&:hover {
				cursor:pointer;
			}

			.confirm {
				background-image:url(/assets/img/confirm.png);
			}
		}
	}

	.ownerinformation {
		padding:5px;
		margin-bottom:5px;
		text-align:center;

		.ownerselection {
			display:none;
		}

		&.showSelection {
			.ownerselection {
				display:block;
			}

			.edit {
				background-image:url(/assets/img/cancel.png);
			}
		}

		.username {
			font-size:1.25em;
			margin:5px 0;
			padding:5px;
			overflow:hidden;
			text-overflow:ellipsis;
		}

		.picture {
			background-position:center center;
			background-repeat:no-repeat;
			height:90px;
			width:90px;
			border-radius:140px;
			margin:auto;
			margin-top:10px;
			margin-bottom:5px;
			border:5px solid #ccc;
			background-size:cover;
			position:relative;
			background-image:url(/assets/img/userprofile-default.png);

			.hint {
				position:absolute;
				top:0px;
				opacity:0;
				width:100%;
				height:100%;
				border-radius:140px;
				text-align:center;
				background-color:#f5f4f4;
				background-color:rgba(245, 245, 245, 0.8);
				background-repeat:no-repeat;
				background-position:center center;
				cursor:pointer;
			}
		}

		.edit {
			background-image:url(/assets/img/edit-owner.png);
		}

		.picture {
			&:hover {
				.hint {
					opacity:1;
				}
			}
		}
	}

	.menu {
		ul {
			padding:0;
			margin:0;

			li {
				list-style-type:none;
				box-sizing: border-box;
				width:100%;
				color:black;
				padding:10px;
				padding-left:40px;
				background-repeat:no-repeat;
				background-position:10px center;
				cursor:pointer;
				position:relative;

				&:hover {
					color:@objectSidemenuActiveBackgroundColor;
				}

				&.delete {
					background-image:url(/assets/img/delete.png);
				}
				&.clone {
					background-image:url(/assets/img/clone.png);
				}

				&.pdf {
					background-image:url(/assets/img/default-attachment-grey-small.png);
				}

				&.qr {
					background-image:url(/assets/img/qr-grey-small.png);
					background-size:16px auto;
				}

				a {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					outline:none;
					text-decoration:none;
					border-width:0;
				}
			}
		}
	}

	h1.title {
		font-size:3em;
		color:white;
		margin-top:0;
		border-bottom:2px solid @objectTitleSeparatorColor;
	}

	header {
		background-color:white;
		position:relative;
		float:left;
	}

	.bg1 {
		background-color:white;
	}

	.bg2 {
		background-color:white;
	}

	.bg3 {
		background-color:white;
	}

	.bg4 {
		background-color:white;
	}

	.bg5 {
		background-color:white;
	}

	.bg1, .bg2, .bg3, .bg4, .bg5 {
		.label, .value {
			color:black;
		}
	}

	.title, .label.title {
		font-size:1.8em;
		color:black;
		font-weight:normal;
		margin-bottom:0.5em;
		height:auto;
		margin-top:0;
		font-weight:300;
		text-transform:uppercase;
		text-align:left;
	}

	.title .label {
		color:black;
	}

	.dimensions {
		display:flex;
	}

	.dimensions .field {
		margin:10px;
	}

	.dimensions .label, .dimensions .value {
		text-align:center;
		width:100%;
		display:block;
	}

	.dimensions .value {
		font-size:1.8em;
	}

	.label, .value {
		line-height:1.5em;
	}

	.label {
		box-sizing:border-box;
		font-size:1em;
		color:black;
		padding-top:5px;
		padding-bottom:5px;
		margin-top:5px;
		height:19px;
		text-align:right;
	}

	.value {
		color:black;
		font-size:1em;
	}

	.field-multitext div.value {
		white-space:pre-line;
	}

	.preview {
		margin:5px 0;
		margin-left:0!important;
		display:block;
		padding:5px;
		font-family:sans-serif;
	}

	select.value {
		line-height:28px;
		height:28px;
		text-indent:5px;
		background-image:url(/assets/img/select-arrow.png);
		background-position:95% center;
		background-repeat:no-repeat;
		background-size:14px auto;
		margin-top:5px;
		margin-bottom:5px;

		&.grid_3 {
			background-position:200px center;
		}

		&.grid_2 {
			background-position:120px center;
		}
	}

	.id {
		.label {
			color:#555;
			text-align:right;
		}
		.value {
			background-color:transparent;
			color:#555;
			padding-top:7px;
			font-size:90%;
		}
	}

	textarea.value, div.value {
		margin-top:5px;
		margin-bottom:5px;
		resize:none;
	}

	div.value a {
		text-decoration:underline;
	}

	.grid_9.value {
		margin-left:-5px;
	}

	h1.title {
		.value {
			line-height:1.2em;
			padding-top:0.3em;
			padding-bottom:0.3em;
		}
		input.value {
			margin-left:-5px;
		}
		span.value {
			padding-left:0;
			padding-right:0;
		}
		.preview {
			background-color:white;
			line-height:1.2em;
			padding-top:0.3em;
			padding-bottom:0.3em;
		}
	}
}

.page.object,
.page.collection .utils header {

	.value {
		box-sizing:border-box;
		background-color:#efefef;
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border:0;
		border-radius:0;
	}

	.hidepreview {
		position:absolute;
		left:-9999px;
		top:0;
	}

	// autocomplete: the grid classes sit on typeahead's wrapper span, the
	// input just fills it
	[data-field] > .twitter-typeahead {
		> input.value.autocomplete {
			width:100%;
			margin-left:0;
			margin-right:0;
		}

		.tt-dropdown-menu {
			// match the field's column instead of typeahead's default 340px
			min-width:100%;
			width:100%;
			box-sizing:border-box;
			margin-top:0;
			max-height:16em;
			overflow-y:auto;

			// typeahead sets white-space:normal inline on the p, so keep the
			// value on one line in its own span instead
			.tt-suggestion > p {
				display:flex;
				align-items:baseline;
				padding-right:10px;
			}

			// typeahead.less sizes every `p span` in a dropdown for the search
			// bar (height:30px, font-size:16px); reset that here
			.tt-value,
			.tt-fieldcount {
				height:auto;
				margin-right:0;
				font-size:1em;
				line-height:1.5em;
			}

			.tt-value {
				flex:1;
				min-width:0;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}

			// grey badge, like the search bar's count (own class so the search
			// bar's own .tt-count sizing does not apply here)
			.tt-fieldcount {
				flex:none;
				margin-left:1em;
				background-color:#999;
				color:#ededed;
				font-size:0.8em;
				line-height:1.6em;
				min-width:1.6em;
				padding:0 0.5em;
				border-radius:1000px;
				text-align:center;
				box-sizing:border-box;
			}

			.tt-more {
				margin:0;
				padding:5px 10px;
				border-top:1px solid #e5e5e5;
				color:#999;
				font-size:0.85em;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
		}
	}

	.empty {
		.hidepreview {
			left:0px!important;
		}
		.preview {
			visibility: hidden;
			opacity:0.3;
		}

		div.value {
			min-height:3em;
		}
	}

	.value:focus, .value:hover {
		background-color:#e0e0e0;
		color:@objectHeaderBackgroundColor;
	}
}

.page.collection .utils header {

	h1.title {
		.value {
			line-height:1.2em;
			padding-top:0.3em;
			padding-bottom:0.3em;
			font-family:inherit;
			margin-top:-0.3em;
			margin-left:0;
		}
		input.value {
			margin-left:-5px;
		}
		span.value {
			padding-left:0;
			padding-right:0;
		}
		.preview {
			background-color:white;
			line-height:1.2em;
			padding-top:0.3em;
			padding-bottom:0.3em;
			margin-left:0;
		}
	}
}



.addmember, .addguest, .gridView {
	.add .button, .create .button, .delete .button {
		font-size:1em;
		background-color:@blue;
		border-radius:0;
		text-align:center;
		color:white;
		padding:7px 0;
		cursor:pointer;

		&:hover {
			background-color:@buttonActiveBackgroundColor;
		}
	}

	.create {
		display:none;
	}

	.searchbar {
		width:100%;
		box-sizing:border-box;
		font-size:1em;
		margin:0;
	}

	.results {
		margin-top:1em;
		.user {
			cursor:pointer;
			margin:0;
		}
	}
}

.addialog {
	position: fixed;
	z-index:10000;
	transform:translate(-50%, -50%);
	left: 50%;
	top:50%;
}

.memberAddDialog,
.guestAddDialog,
.qr-dialog {
	background-color:@buttonActiveBackgroundColor;
	color:white;
	padding:2em;
	cursor:default;

	.usernameview {
		margin:1em auto;
		text-align:center;
		font-size: 1.2em;
	}

	.controls .confirm, .controls .cancel {
		float:right;
	}
	.controls .button {
		font-size:1em;
		background-color:@buttonBackgroundColor;
		text-align:center;
		color:white;
		padding:7px 0;
		margin:0 2px;
		cursor:pointer;

		&:hover {
			background-color:@darkblue;
		}
	}
}

.searchstatusbar {
	margin:15px 0;

	.gridsort {
		display: flex;
		flex-direction:row;
		align-items:center;
		justify-content: center;

		.sortcontrol-outer {
			display: flex;
			flex-direction:row;
			align-items:center;
			justify-content: center;

			.sortdirection {
				margin:0;
			}
		}
		
		.sortlabel {
		}

		.sortfields {
			margin:0 10px;
		}

		select.sortfields {
			background-image: url(/assets/img/select-arrow.png);
			background-position: 95% center;
			background-repeat: no-repeat;
			text-transform:uppercase;
			background-size: 14px auto;
		}

		.sortdirection {
		}
	}
}

.sortfields {
	float:left;
	line-height:30px;
	height:30px;
	color: @baseTextColor;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #848484;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #848484;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #848484;
}
:-moz-placeholder { /* Firefox 18- */
  color: #848484;
}

.sortdirection {
	float:right;
	width:20px;
	height:20px;
	overflow:hidden;
	display:inline-block;
	background-repeat: no-repeat;
	background-color:transparent;
	border:none;
	padding:0;
	background-image: url(/assets/img/menu-toggler-sort.svg);
	background-size:40px;
	background-position:-21px -20px;

	&:hover {
		background-position:0 -20px;
	}

	&.sort-desc {
		background-position:0 -20px;
	}

	&.sort-asc {
		background-position:0 1px;
	}
}

.objectTableView {
	position:relative;
	margin:0 10px;
	margin-top:10px;


	.JCLRgrip .JColResizer {
		background-color:transparent;
		background-image:url(/assets/img/col-resize.svg);
		background-repeat:no-repeat;
		background-position:2px 12px;
		background-size: 70% auto;
		opacity:1;
		width:14px;
		left:-2px;

		&:hover {
			opacity:1;
			background-image:url(/assets/img/col-resize-hover.svg);
		}
	}

	.objectlist .selected {
		background-color:@blue;
		color:white;
	}	

	table {
		table-layout: fixed;
		width:100%;
	}

	.exportpage & {
		thead tr th:first-child,
		thead tr th:last-child,
		tbody tr td:first-child,
		tbody tr td:last-child {
			display:none;
		}

		td {
			word-break:break-all;
		}
	}

	select {
		width:100%;
	}

	th .columnadder,
	th .columnremover {
		display: inline-block;
		background-size:contain;
		width:20px;
		height:20px;
	}

	th select,
	th button {
		background-color:transparent;
		border-width:0;
		color:@buttonBackgroundColor;
		font-size:120%;
		font-weight:bolder;
	}

	th select {
		border:1px solid transparent;

		&:hover {
			border-color:inherit;
			background-color:white;
			background-image:url(/assets/img/blue-toggler.svg);
			background-repeat:no-repeat;
			background-position:99% center;
			background-size:auto 5px;
		}
	}

	th {
		border-top:1px solid;
		border-bottom:1px solid;
		border-left:1px solid;
		border-right:1px solid;
		border-color:#aaa;
	}

	.columnadder, .goto, .columnremover {
		width:20px;
		height:30px;
		overflow:hidden;
		text-indent:9999px;
		white-space:nowrap;
		background-image:url(/assets/img/creator-blue.png);
		background-position:center center;
		background-repeat:no-repeat;
		cursor:pointer;
	}

	.goto {
		background-image:url(/assets/img/goto.png);
	}

	.columnremover {
		background-image:url(/assets/img/destroyer-blue.png);
	}

	.sortcontrol-outer {
		position:relative;
		height:30px;

		.sortfieldselector {
			position:absolute;
			left:5px;
			right:30px;
		}

		.sortdirection {
			position:absolute;
			right:8px;
			top:5px;
		}
	}

	.fixedfirst + th {
		.sortfieldselector {
			left:0;
		}
	}

	td {
		.value {
			padding:6px;
			position:absolute;
			height:100%;
			box-sizing:border-box;
			overflow-y:auto!important;
		}
		vertical-align:top;
		border:1px solid #d8d8d8;
		border-width:1px;
		position:relative;
	}

	td[data-field="picture"] {
		padding:0;
		max-width:140px;
		cursor:pointer;

		.value {
			background-size:cover;
			background-position:center center;
			background-image:none;
			margin:0;
			padding:0;
			width:100%;
			padding-bottom:100%;
			overflow:hidden;
			position:relative;

			img {
				min-width:100%;
				min-height:100%;
				position:absolute;
				left:50%;
				top:50%;
				transform:translateX(-50%) translateY(-50%);
			}
		}
	}
}

.viewoptions {
	ul, li {
		list-style-type:none;
		display:inline-block;
		padding:0;
		margin:0;
		text-indent:0;
	}

	.viewswitcher {
		display:inline-block;
	}

	.switch {
		text-indent: 9999px;
		overflow:hidden;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:65% auto;
		width:28px;
		height:28px;
		display:block;
		cursor:pointer;

		&.active {
			transform:scale(1.1);
		}

		&[data-view="ObjectGridSortedView"] {
			background-image:url(/assets/img/gridview.png);
		}

		&[data-view="ObjectTableView"] {
			background-image:url(/assets/img/listview.png);
		}

		&.exportview {
			background-image:url(/assets/img/export-new.png);
		}
	}
}

.gridView {
	.loading {
		.loader {
			opacity:1;
			.spinner {
				visibility:visible;
			}

		}
	}

	.loader {
		opacity:0;
		transition:opacity 0.2s ease;
		display:block;
		float:none;
		clear:both;
		text-align:center;
		color:white;
		background-color:@blue;
		padding:15px 0;
		margin:auto;
		width:300px;
		margin-top:30px;
		margin-bottom:30px;
		padding-right:70px;

		.spinner {
			visibility:hidden;
			display:inline-block;
			position:static;
		}
	}
}

.public-indicator {
	background-image:url(/assets/img/globe-white.png);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
}

.collections {
	.collection {
		box-sizing:border-box;
		color:white;
		height:140px;
		display:inline-block;
		margin:0 10px 10px 10px;
		padding:10px;
		background-color:#C5C5C5;
		cursor:pointer;
		position:relative;
		font-size:1.3em;
			background-color:@objectActiveBackgroundColor;

		&.public-collection {
			background-color:#db7c00;
		}
		&.public-collection:hover {
			background-color:#ffb22d;
		}
		.public-indicator {
			position:absolute;
			top:10px;
			right:10px;
			width:2em;
			height:2em;
		}

		&:hover {
		background-color:@blue;

			.description {
				height:100%;
			}
		}
	}
}

@media screen and (max-width : 1750px)  {
	.page.object .objectpreview {
		bottom:15px;
		top:auto!important;
		.thumbobject {
			width:8vw!important;
			height:8vw!important;
		}
	}

}
@media screen and (max-width : 1400px) {
	.page.object .objectpreview {
		.thumbobject {
			width:0!important;
			height:0!important;
			visibility:hidden;
		}

		&::before {
			margin-left:0!important;
			margin-right:0!important;
		}
	}
}
@media screen and (max-width : 1100px) {
	.page.object .objectpreview {
		display:none;
	}
}

.page.object .objectpreview {
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
	cursor:pointer;

	.thumbobject {
		margin:auto;
		width:140px;
		height:140px;
		text-align:left;
	}

	&.prevobject {
		left:15px;
		padding-right:50px;

		&::before {
			content: " ";
			width:20px;
			position:absolute;
			left:50%;
			height:100%;
			margin-left:60px;
			display:block;
			background-image:url(/assets/img/back-flat.png);
			background-repeat:no-repeat;
			background-position:right center;
		}
	}

	&.nextobject {
		right:15px;
		padding-left:50px;

		&::before {
			content: " ";
			width:20px;
			position:absolute;
			right:50%;
			height:100%;
			margin-right:60px;
			display:block;
			background-image:url(/assets/img/back-flat.png);
			background-repeat:no-repeat;
			background-position:right center;
			transform:rotateZ(180deg);
		}
	}
}

.thumbobject, .objectGridView .grid .object {
	box-sizing:border-box;
	color:white;
	display:inline-block;
	margin:1px;
	font-size:1em;
	padding:10px;
	background-color:#C5C5C5;
	cursor:pointer;
	position:relative;
	overflow:hidden;

	&::after {
		content: " ";
		user-select:none;
		position:absolute;
		top:5px;
		left:5px;
		background-size:contain;
		background-repeat:no-repeat;
		z-index:1;
		opacity:1;
		width:25px;
		height:25px;
		pointer-events:none;
	}
	&.obj-tpl-defaultobjtemplate::after {
		background-image:url(/assets/img/object-icon.png);
	}
	&.obj-tpl-defaultmediatemplate::after {
		background-image:url(/assets/img/media-icon.png);
	}

	&:hover {
		background-color:@objectActiveBackgroundColor;

		.description {
			transform:translateY(100%);
		}
	}

	.picture {
		border-radius:0;
		border-width:0;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		background-size:cover;
		background-position:center center;
		background-image:none;
		margin:0;
		padding:0;
		width:auto;
		height:auto;
		z-index:1;
	}

	.description {
		position:absolute;
		bottom:0px;
		left:0px;
		right:0px;
		z-index:2;
		padding:0.5em;
		cursor:pointer;
		height:5.5em;
		line-height:1.4em;
		background-color:#000;
		background-color: rgba(0, 0, 0, 0.7);
		font-size:1em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		box-sizing:content-box;
		transition:transform 0.4s ease 0.1s;
		color: rgba(255, 255, 255, 0.95);
		font-weight:bold;

		.inventorynumber {
	    display: block;
	    overflow:hidden;
	    text-overflow:ellipsis;
		}

		.descriptiontitle {
			text-transform:uppercase;
			max-height:2.3em;
			font-size:1.1em;
			overflow:hidden;
			text-overflow:ellipsis;
			width:100%;
			display: inline-block;
		}
	}
}

.objectGridView {
	.grid {
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		grid-gap:2px;

		.object {
			height:0;
			padding-top:133%;
	    //height:160px;
		}
	}



	.loader .text {
		display:none;
	}

	&.select-objects .object::before {
		content: attr(data-selecthovertext);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color:rgba(0, 0, 0, 0.65);
		display:none;
		align-items: center;
		justify-content: center;
		z-index:10000;
	}
	&.select-objects .object:hover::before {
		display:flex;
	}

	&.select-objects .object.selected::before {
		content: attr(data-selectedhovertext);
		display: flex;
		background-color:rgba(255, 255, 255, 0.65);
		color:#333;

		&:hover {
			content: attr(data-unselecthovertext);
		}
	}
}

.subprofileMediaSectionView {
	.objectGridView {
		.grid {
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	
			.object {
				padding-top:56.25%;

				.description {
					height: 2.5em;
				}
			}
		}
	}
}

.profile {
	.profileheader {
		text-align:center;
		background-color:white;
		padding:30px 0 0 0;
		text-transform:uppercase;
		position:relative;

		hgroup {
			display: flex;
			align-items:center;
			justify-content: center;
			margin-bottom:10px;

			.username {
				color:@profileTitleColor;
				font-weight:inherit;
				margin-top:0;
				margin-bottom:0;
				font-size:2em;
				display: inline-block;
				margin:5px;
			}
		}

		.separator {
			height:9px;
			background-image:url(/assets/img/profileseparator.png);
			background-repeat:repeat-x;
			background-position:-30px 0;
			position: absolute;
			bottom: 1px;
			z-index: 110;
			width: 100%;
			transform: translateY(100%);
		}

		.picture {
			background-image:url(/assets/img/userprofile-default.png);
			background-position:center center;
			background-repeat:no-repeat;
			height:55px;
			width:55px;
			border-radius:140px;
			display: inline-block;
			background-size:cover;
			margin:5px;
		}

		.profilenav {
			color: @greyTextColor;
			font-size:1.1666em;
			font-weight:600;
			text-transform:uppercase;

			ul {
				position:relative;
				left:50%;
				margin:0;
				padding:0;
				float:left;

				li {
					margin-top:8px;
					float:left;
					display:block;
					position:relative;
					right:50%;
					padding:8px 0;
				}
			}
		}
	}

	.grid_8 {
		.gridView {
			margin-left:-10px;
			margin-right:-10px;
		}
	}

	.sections {
		overflow:hidden;
		text-align:left;

		.utils {
			margin-bottom:15px;
			position:relative;
			padding-top:15px;
			margin-top:0;

			.searchwrapper {
				width:50%;
				min-width:240px;
				max-width:560px;
				position:relative;
				margin:auto;
				display:flex;
				flex-direction:row;
			}

			.search {
				width:100%;
				display: inline-block;
			}

			.template-selection {
				padding:0 0.5em;
			}

			.resultscounter {
				margin-left:10px;
				display:flex;
				align-items:center;

				span {
					margin-right:0.25em;
				}
			}
		}

		.viewoptions {
			position:absolute;
			top:5px;
			right:5px;
		}

		header {
			position:relative;
			margin:20px 0 20px 0;

			h1 {
				margin-bottom:0;
			}
		}

		hgroup {
			margin-top:10px;

			h1 {
				color:@profileTitleColor;
				font-weight:300;
				text-transform:uppercase;
				line-height:1.1em;
			}
		}

		hgroup.hero {
			line-height:140px;
			margin-bottom:0;

			h1 {
				font-size:3em;
			}
		}

		.gridView {
			.organisations {
				.organisation {
					box-sizing:border-box;
					color:white;
					height:140px;
					font-size:1em;
					padding:10px;
					margin-top:10px;
					margin-bottom:10px;
					background-color:@objectBackgroundColor;
					cursor:pointer;
					position:relative;

					.picture {
						border-radius:0;
						border-width:0;
						background-color:transparent;
						background-image:none;
						position:absolute;
						top:0;
						left:0;
						bottom:0;
						right:0;
						z-index:1;
					}

					.username { 
						position:absolute;
						z-index:10;
						bottom:0px;
						left:0px;
						right:0px;
						padding:15px;
						cursor:pointer;
						height:2em;
						background-color:#000;
						background-color: rgba(0, 0, 0, 0.5);
						font-size:1em;
						overflow:hidden;
						text-overflow:ellipsis;
					}
				}
			}
		}

		section {
			margin-bottom:60px;
		}

		.picture {
			background-image:url(/assets/img/userprofile-default-big.png);
			background-position:right center;
			background-repeat:no-repeat;
			height:130px;
			width:130px;
			margin:auto;
			border-radius:140px;
			border:5px solid white;
			background-size:cover;
		}

		.user {
			text-transform:uppercase;
			font-size:110%;
			line-height:1.9em;
			font-weight:600;
			display: flex;
			text-align:left;
			flex-direction:row-reverse;
			justify-content: flex-end;


			&:hover {
				font-weight:700;
				
				.hint {
					opacity:1;
				}
			}

			.hint {
				opacity:0;
				width:1em;
				text-align:center;
				background-repeat:no-repeat;
				background-position:right center;
				background-size:contain;
				cursor:pointer;
				margin:0 5px;
				z-index:10;

				&.delete {
					background-image:url(/assets/img/delete-red.png);
				}
			}

			.usernameview {
			}
		}

		.profileinfomenu {
			font-size:1em;
			margin-top:15px;

			ul {
				list-style-type:none;
				margin:0;
				padding:0;
				width:100%;

				li {
					padding:6px 8px;
					color:@buttonTextColor;
					background-color:@buttonBackgroundColor;
					cursor:pointer;

					&:hover {
						background-color:@buttonActiveBackgroundColor;
						color:white;
					}
				}
			}
		}
	}
}