@font-face {
	font-family: 'RobotoCondensed500';
	font-style: normal;
	font-weight: 500;
	src: url('/lib/styles/roboto/roboto_condensed_500.woff2?zr6657rh') format('woff2');
}
@font-face {
	font-family: 'RobotoCondensed300';
	font-style: normal;
	font-weight: 300;
	src: url('/lib/styles/roboto/roboto_condensed_300.woff2?zr6657rh') format('woff2');
}
@font-face {
	font-family: 'RobotoLight300';
	font-style: normal;
	font-weight: 300;
	src: url('/lib/styles/roboto/roboto_light_300.woff2?zr6657rh') format('woff2');
}
/*v20250304 modified some colors to meet WCAG 2.0 AA contrast requirements*/
:root {
	--text-color: #333;
	--main-color: #333;
	--hover-color: #ffaf5e;
	--hilite-color: #fe0000;
	--hover-link-color: #df3602;
	--active-color: #0072ec;
	--link-color: #3877c4;
	--disabled-color: #aaa;
	--bg-color: #133968;
	--bg-color-light: #e5effb;
	--bg-color-mark: #fff194;
	--bg-color-warning: #9c0000;
	--font-family-body: 'RobotoCondensed300', sans-serif;
	--font-family-head: 'RobotoCondensed500', sans-serif;
	--font-family-footer: 'RobotoCondensed300', sans-serif;
	--font-size: 13px;
	--font-size-h1: 22px;
	--font-size-h2: 18px;
	--font-size-h3: 16px;
	--font-size-h4: 14px;
	--font-size-h1-statpage: 30px;
	--font-size-h2-statpage: 24px;
	--font-size-p-statpage: 16px;
	--font-size-footer: var(--font-size);
	--line-height-p-statpage: 26px;
	--max-width-content: 1225px;
	--height-header: 80px;
	--height-header-sticky: 40px;
	--height-footer: 40px;
}
html {
	box-sizing: border-box;
}
html * {
	max-height: 1000000px;	/*avoid font boosting in Chrome http://wisercoder.com/disabling-font-zooming-chrome-android/*/
	font-family: var(--font-family-body);
	font-size: var(--font-size);
	line-height: 1.3;
	color: var(--text-color);
	/*-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;*/
	/*-webkit-font-smoothing: none;*/

	/*v20241017 following both are important for correct font display in iOS*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	image-rendering: -webkit-optimize-contrast;
}
*, *:before, *:after {
	/*box-sizing: inherit;*/
	box-sizing: border-box;
}
* {
/*	font-family: var(--font-family-body);*/
	margin: 0;
	padding: 0;
}
html, 
body {
	padding: 0;
	margin: 0;
	border: 0;
}
body {
	height: 100vh;
}
h1,
h1 * { /*for spans*/
	color: var(--main-color);
	font-family: var(--font-family-head);
	font-size: var(--font-size-h1);
	font-weight: 300;
	margin: 8px 0 0 0;
}
h2 {
	color: var(--main-color);
	font-family: var(--font-family-head);
	font-size: var(--font-size-h2);
	font-weight: 300;
	margin: 10px 0;
}
h3 {
	font-family: var(--font-family-head);
	font-size: var(--font-size-h3);
	font-weight: 300;
	margin: 7px 0 3px 0;
}
h4 {
	font-family: var(--font-family-head);
	font-size: var(--font-size-h4);
	font-weight: 300;
	margin: 5px 0 3px 0;
}
	h3:first-of-type,
	h4:first-of-type {
		margin-top: 0;
	}
p {
	margin: 3px 0 0 0;
}
mark {
	background: var(--bg-color-mark);
}
.statpage h1 {
	font-size: var(--font-size-h1-statpage);
	margin: 24px 0;
	text-align: center;
}
.statpage h2 {
	font-size: var(--font-size-h2-statpage);
	margin: 18px 0 4px;
}
.statpage p,
.statpage p * {
	font-size: var(--font-size-p-statpage);
	line-height: var(--line-height-p-statpage);
	margin: 6px 0 0 0;
}
.statpage li {
	font-size: var(--font-size-p-statpage);
	line-height: var(--line-height-p-statpage);
	margin-left: 18px;
}
div.statpage {
	margin-bottom: 100px;
}
label {
	cursor: pointer;
}
input,
button,
select {
	font-family: var(--font-family-body);
	font-size: var(--font-size);
	display: inline;
	height: 30px;
	padding: 3px;
	border: 1px solid #ccc;
	margin: 0;
	line-height: 1;
	vertical-align: bottom;
	border-radius: 0;
}
input[type=button],
input[type=submit],
a.btn,
button {
	font-family: var(--font-family-body);
	cursor: pointer;
	background-color: var(--bg-color);
	background: linear-gradient(to bottom,var(--main-color) 0,var(--bg-color) 100%);
	color: #fff;
	padding: 8px;
	height: 30px;
}
a.btn {
	color: #fff !important;
}
button.secondary {
	color: var(--main-color) !important;
	background-color: var(--bg-color-light);
	background: linear-gradient(to bottom,var(--bg-color-light) 50%,#fff 100%);
}
button.animated {
	position: relative;
}
button.animated:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: rgba(153,255,153,0.6);
	transition: none;
}
button.animated.animation-active:after{
	width: 100%;
	transition: width 2s;
}
@media (max-width:768px) {
	button.animated.animation-active:after{
		transition: width 1s;
	}
}
input[type=button]:hover,
input[type=submit]:hover,
button:hover *,
button:hover {
	color: var(--hover-color);
}
input::placeholder,
textarea::placeholder { 
	color: #999;
	opacity: 1;
}
textarea {
	border: 1px solid #ccc;
	padding: 4px;
	font-family: var(--font-family-body);
}
select {
	background-color: #fff;
}
li {
	margin-left: 12px;
}
.unselectable {
	user-select: none;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: var(--link-color);
}
a:hover {
	text-decoration: none;
	color: var(--hover-link-color);
}
:focus {
	outline: 2px dotted var(--main-color);
}
input:focus {
	outline: none;
}
.small {
	font-size: 10px;
	line-height: 12px;
	font-weight: normal;
}
.hilite,
.warning {
	color: var(--hilite-color) !important;
}
.warningborder {
	color: #fff;
	background: #e88686;
	border: 1px solid var(--hilite-color);
	padding: 8px;
	margin: 8px 0;
}

input[type=radio], 
input[type=checkbox] { 
	display:none; /* hide the checkbox itself */ 
}
input[type=radio] + label, 
input[type=checkbox] + label {
	margin-right: 10px;
}
input[type=radio] + label:before, 
input[type=checkbox] + label:before {
	display: inline-block;
	font-family: 'icomoon';
	margin-right: 6px;
	font-size: 16px;
	line-height: 14px;
}
input[type=radio] + label:hover, 
input[type=checkbox] + label:hover,
input[type=radio] + label:hover:before, 
input[type=checkbox] + label:hover:before {
	color: var(--main-color);
	cursor: pointer;
}
	input[type=radio] + label:before {
		content: '\ea56';
	}
	input[type=radio]:checked + label:before {
		content: '\ea54';
	}
	input[type=checkbox] + label:before {
		content: '\ea53';
	}
	input[type=checkbox]:checked + label:before {
		content: '\ea52';
	}

.ml-10 {
	margin-left: 10px !important;
}
.ml-20 {
	margin-left: 20px !important;
}
.ml-40 {
	margin-left: 40px !important;
}
.mr-10 {
	margin-right: 10px !important;
}
.mr-20 {
	margin-right: 20px !important;
}
.mr-40 {
	margin-right: 40px !important;
}
.mt-0 {
	margin-top: 0 !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-20 {
	margin-top: 20px !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mb-20 {
	margin-bottom: 20px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.w-50 {
	width: 50px !important;
}
.w-100 {
	width: 100px !important;
}
.w-200 {
	width: 200px !important;
}
.w-300 {
	width: 300px !important;
}
.d-ib {
	display: inline-block;
}
.f-l {
	float: left;
}
.f-r {
	float: right;
}
.t-l {
	text-align: left;
}
.hidden {
	display: none !important;
}
.col {
	font-size: var(--font-size) !important;
}
#header {
	background-color: #fff;
	width: 100%;
	position: fixed;
	height: var(--height-header);
	top: 0;
	z-index: 1000;
	transition: all 0.7s ease-out;
}
.header-logo {
	position: relative;
	max-height: calc(var(--height-header) - 20px);
	max-width: 200px;
	margin: 0 10px 0 20px;
	transition: max-height 0.7s ease-out;
}
	#header.fixed:not(:hover) {
		height: var(--height-header-sticky);
		background-color: rgba(255, 255, 255, 0.85);
		box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2);
		overflow: hidden;
	}
	#header.fixed:not(:hover) .header-logo {
		max-height: calc(var(--height-header-sticky) - 20px);
		margin: 0 10px 0 20px;
	}

#topmenu {
	top: 7px;
	position: relative;
}

#topnav a {
	margin: 0 10px;
}
	
#topmenu i.icon,
#topnav i.icon {
	font-size: 22px;
	color: var(--main-color);
}
	#topmenu i.icon:hover,
	#topnav i.icon:hover {
		color: var(--hover-link-color);
	}
	#topmenu i.icon.icon-user {
		width: 30px;
		height: 30px;
		display: inline-block;
		text-align: center;
		position: absolute;
		left: 0;
	}
	#topnav_basket_objcnt {
		position: relative;
		font-size: 10px;
		vertical-align: top;
		left: -2px;
		top: -7px;
		line-height: 1.8;
	}
.btn-topmenu {
	width: 100px;	/*consider label*/
	height: 40px;
}
	.btn-topmenu label {
		font-size: 12px;
		position: absolute;
		left: 35px;
		top: 10px;
	}
	.pane-topmenu {
		position: relative;
		display: none;
		top: -37px;
		left: -4px;
		width: 150px;
	}
	.pane-topmenu-inner {
		z-index: 999;
		position: relative;
		background: #fff;
		margin-top: 40px;
		padding: 2px 8px 16px;
		border: 1px solid #ccc;
		box-shadow: 0 0 5px #ddd;
		text-align: left;
	}
	.btn-topmenu:hover .pane-topmenu {
		display: block;
	}
	.pane-topmenu-inner a {
		display: block;
		margin-top: 4px;
	}
	.pane-topmenu-inner a i:before {
		font-size: initial;
		vertical-align: bottom;
	}
	.lbl-logininfo {
		font-size: 12px;
		line-height: 12px;
		margin-top: 8px;
		display: block;
		word-wrap: anywhere;
	}
	.pane-topmenu-inner:before {
		border: 1px solid #ccc;
		box-shadow: 0 0 5px #ddd;
		z-index: -1;
		content: '';
		display: block;
		position: absolute;
		top: -30px;
		left: -1px;
		height: 30px;
  		width: 38px;
	}
	.pane-topmenu-inner:after {	/*cover the bottom border of before element and top border of menu*/
		background: #fff;
		content: '';
		position: absolute;
		z-index: -1;
		top: -4px;
		left: 0px;
		height: 20px;
		width: 36px;
	}

/********** WARNING BANNER *********/
#warningbanner {
	background: var(--bg-color-warning);
	padding: 10px 20px;
	margin: var(--height-header) 0 0;
	text-align: center;
	position: relative;
}
#warningbanner * {
	color: #fff;
}
#warningbanner_close {
	position: absolute;
	right: 0;
	top: 10px;
	cursor: pointer;
	width: 30px;
	background: var(--bg-color-warning);	/*hide marquee text*/
}
/*@keyframes MUST NOT be inside the @media part cause otherwise the compressed css will miss a closing } and therefore the following rules are going to be ignored!*/
@keyframes marquee {
	0% {
		transform: translateX(100%)
	}
	100% {
		transform: translateX(-100%)
	}
}
@media (max-width: 768px) {
	.marquee {
		white-space: nowrap;
		overflow: hidden;
	}
	.marquee_text {
		display: inline-block;
		animation-name: marquee;
		animation-duration: 15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-direction: normal;
	}
}

#content {
	margin: var(--height-header) 0 0;
	padding-bottom: var(--height-footer);
}
div.nomaxwidth {
	max-width: unset !important;
}
header.centered-content,
main.centered-content,
footer.centered-content,
div.centered-content {
	max-width: var(--max-width-content);
	margin: 60px auto 0;
	width: calc(100% - 40px);
	position: relative;
	background-color: #fff;
}
	header.centered-content,
	div.centered-content:first-of-type {
		margin-top: 0;
	}
	@media (max-width: 768px) {
		div.centered-content {
			width: calc(100% - 20px);
		}
	}
div.fullwidth-content {
	width: 100%;
	margin-top: 60px;
	position: relative;
	overflow: hidden;
}
	div.fullwidth-content:first-child {
		margin-top: 0;
	}

footer,
#footer {
	position: fixed;
	height: var(--height-footer);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	padding: 8px 0;
	background-color: #fff;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
}

.footer-links {
	margin: 5px auto;
	padding: 0 10px;
	max-width: var(--max-width-content);
}
.footer-links a {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-footer);
	color: var(--main-color);
	vertical-align: middle;
}
#btn_goto_top {
	background-color: var(--bg-color);
	width: 40px;
	height: 40px;
	bottom: -40px !important;
	left: 50vw;
	transition: 200ms ease-in all;
	opacity: 0.5;
	position: fixed;
	z-index: 999;
}
	#btn_goto_top:before {
		font-family: 'icomoon' !important;
		content: "\ea32";
		color: #fff;
		font-size: 29px;
		left: 6px;
		position: absolute;
		top: 1px;
	}
	#btn_goto_top:hover {
		opacity: 1;
	}
	#btn_goto_top.active {
		cursor: pointer;
		bottom: 0 !important;
	}
	#btn_goto_top i::before {
		color: #fff;
		font-size: 20px;
	}

.btn-searchcrit-delete {
	padding: 4px 20px 4px 4px;
	border: 1px solid #ccc;
	display: inline-block;
	margin: 4px 0 4px 4px;
	position: relative;
}
	.btn-searchcrit-delete:hover {
		text-decoration: line-through;
		cursor: pointer;
	}
	.btn-searchcrit-delete:after {
		font-family: icomoon;
		content: '\ea0d';
		position: absolute;
		top: 4px;
		right: 2px;
	}
	.btn-searchcrit-delete em {
		font-size: 80%;
		vertical-align: middle;
	}

#wrapper_pagenav_result {
	width: 300px;
	position: sticky;
	top: 60px;
}
#wrapper_pagenav_result h3 {
	margin-top: 20px;
}


#wrapper_container_result {
	margin-left: 20px;
	width: calc(100% - 320px);
}
#container_result {
	min-height: 800px;	/*this is important to be able to display object details when only one row of objects is visible*/
	margin-bottom: 600px; /*dto.*/
}
div.disabled {
	opacity: 0.25;
}
div.inprogress {
	position: relative;
}
	div.inprogress:after {
		content: url('/lib/img/loading_bar_99ccff_128x18.gif');
		position: absolute;
		top: 20px;
		left: calc(50% - 64px);
	}
	div.disabled.inprogress:after {
		opacity: 1;
	}

div#wrapper_resultctrls,
div#wrapper_quantity {
	visibility: hidden;
}
div#wrapper_resultctrls.active,
div#wrapper_quantity.active {
	visibility: visible;
}

div#wrapper_quantity,
div#wrapper_quantity * {
	font-size: 16px !important;
}
#lbl_resultcnt {
	font-family: var(--font-family-head);
}

#btn_Search {
	width: 80px;
}
#wrapper_pagenav_result #input_SearchFree {
	width: calc(100% - 84px);
}

.media_item {
	width: 300px;
	position: relative;
}
.media_item.selected {
	background: var(--bg-color-light);
}
.media_item_inner {
	height: 410px;
	border: 1px solid #d9d9d9;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
	background: #fff;
	margin: 5px;
}
.media_item.mt10 .media_item_inner {	/*media collections have gray body*/
	background: linear-gradient(180deg, #fff,#ddd 350px);
}
div.delimiter-media {
	display: block;
	margin: 30px 4px 10px;
	height: 40px;
	padding: 8px 0;
	background-color: #fde1e1;
	color: #666;
	text-align: center;
	font-family: var(--font-family-head);
	font-size: 18px;
}
div.mediaheader {
	height: 32px;
}
	div.mediaheader-mediatype {
		padding: 4px 0 0 8px;
		font-size: 11px;
		color: #666;
	}
	div.mediaheader-mediatype-multipleversions {
		float: right;
		margin-right: 5px;
	}
	div.mediaheader-mediacollection {
		clear: both;
		margin-top: 4px;
		height: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	div.mediaheader-mediacollection i:before,
	div.mediaheader-mediacollection mark,
	div.mediaheader-mediacollection a {
		font-size: 11px;
	}
	div.mediaheader-mediacollection mark {
		background: none !important;
  		color: inherit;
	}

.media_item .mediathumb {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 195px;

	/*height: 200px;
	text-align: center;*/
	overflow: hidden;
	background-color: #fff;
	position: relative;
}
	.mediathumb img {
		transition: all .4s ease-in-out;
		max-width: calc(100% + 2px); /*compensate left and right border*/
		max-height: calc(100% + 1px); /*compensate upper border*/
		border: 1px solid #ddd;
	}
	.mediathumb img:hover {
		transform: scale(1.1);
	}
	.mediathumb.zoo-item img:hover {
		transform: none;
		opacity: 0.5;
	}
	div.mediathumb.isliveview a,
	div.mediathumb.isliveview a:hover {
		background: transparent url('/lib/img/overlay_zoom.png') no-repeat scroll 50% 50%;
		width: calc(100% - 4px);	/*link must not begin at 0;0 and have 100% width to make sure that the focus outline is visible*/
		height: calc(100% - 4px);
		position: absolute;
		top: 2px;
		left: 2px;
		z-index: 9;
		opacity: 0.5;
	}
		div.mediathumb.isliveview a:hover {
			opacity: 0;
			transition: all .5s ease-in-out;
			cursor: zoom-in;
		}
		.mediathumb a:hover + img {
			transform: scale(1.1);
		}
		.mediathumb.zoo-item a:hover + img {
			transform: none;
			opacity: 0.5;
		}
		div.media_item.mt10 div.mediathumb.isliveview a,
		div.media_item.mt10 div.mediathumb.isliveview a:hover {
			background: transparent url('/lib/img/overlay_link.png') no-repeat scroll 50% 50%;
		}
		div.media_item.mt302 div.mediathumb.isliveview a,
		div.media_item.mt302 div.mediathumb.isliveview a:hover {
			background: transparent url('/lib/img/overlay_play.png') no-repeat scroll 50% 50%;
		}

.media_item .mediadata {
	margin: 0 8px 0 8px;
	height: 130px;
	color: #4a4a4a;
}
h2.mediadata_title {
	margin: 10px 0 10px;
	height: 47px;
	padding-top: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	cursor: pointer;
	color: var(--main-color);
	word-break: break-word;
}
h2.mediadata_title,
h2.mediadata_title * {	/* for <mark> */
	font-size: 16px;
	font-weight: normal;
	font-family: var(--font-family-head);
}
.mediadata_details {
	color: #4a4a4a;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	height: 69px;
}
.media_item .mediadata_details a {
	font-weight: normal;
}
.media_item .mediadata_mclink a {
	font-weight: normal;
	font-style: italic;
}

.media_item .mediacontrols a {
	display: inline-block;
}

.mediadata_fulldetails {
	background: var(--bg-color-light);
	position: absolute;
	width: 100vw;
	max-width: 600px;
	max-height: 400px;
	overflow-y: auto;
	left: 0;
	z-index: 9999;
	padding: 4px 8px;
	box-shadow: 0px 10px 8px -10px rgba(0,0,0,0.5);
	border-bottom: 5px solid var(--bg-color-light);
}
@media (max-width: 768px) {
	#wrapper_pagenav_result {
		width: 100%;
		z-index: 9;	/*for filter*/
		margin-bottom: 80px;
		position: relative;
	}
	#wrapper_container_result {
		margin-left: 0;
		width: 100%;
	}
	.media_item {
		width: 230px;
	}
	.mediadata_fulldetails {
		max-width: calc(100vw - 240px);
	}
	.mediathumb img {
		max-width: 100%;
	}
}
@media (max-width: 500px) {
	.mediadata_fulldetails {
		width: calc(100% - 8px) !important;
		left: 4px;
	}
}
@media (max-width: 450px) {
	.media_item {
		width: 100%;
	}
}
.container_basketlink a:before {
	font-family: 'icomoon';
	content: '\e9c7';
	margin-right: 4px;
	color: var(--text-color);
}
#pane_DetailDataCtrls {
	position: relative;
	float: right;
	z-index: 9;
	top: -4px;
	right: -8px;
	background-color: rgba(255,255,255,0.75);
	width: 50px;
	text-align: center;
	padding: 5px 0;
	margin: 0 0 10px 10px;
}
	#pane_DetailDataCtrls a.btn_icon {
		margin-bottom: 8px;
	}
.metadata_label {
	font-family: var(--font-family-head);
	font-weight: 600;
	margin: 8px 0 4px;
}


.search_hilite {
	background-color: var(--bg-color-mark);
}

.ui-autocomplete {
	max-height: 300px;
	overflow-x: hidden;	/* prevent horizontal scrollbar */
	overflow-y: auto;
}



a.btn_icon {
	width: 27px;	/*avoid display of basket text*/
	height: 30px;
	cursor: pointer;
	display: inline-block;	/*avoid display of basket text*/
}
a.btn_icon.label {
	width: unset;
	color: var(--text-color);
}
a.btn_icon.label:hover,
a.btn_icon.label:hover * {
	color: var(--hover-link-color);
}

	div.media_item a.btn_icon {
		opacity: 0.2;
	}
	div.media_item.selected a.btn_icon,
	div.media_item:hover a.btn_icon,
	div.order_item:hover a.btn_icon {
		opacity: 1;
		transition: all 0.35s;
		transition-delay: 0.35s;
	}
	a.btn_icon:before {
		font-family: 'icomoon';
		font-size: 24px;
		text-transform: none;
		color: var(--main-color);
	}
	a.btn_icon.label:before {
		font-size: 14px;
	}
	a.btn_icon.active {
		color: var(--active-color);
	}
	a.btn_icon.disabled:before {
		color: var(--disabled-color);
	}
	div.pagenav-ctrls a.btn_icon {
		width: auto;
		height: 40px;
		display: block;
		padding-left: 5px;
	}
	div.pagenav-ctrls a.btn_icon:before {
		left: -5px;
		top: 7px;
		position: relative;
	}
	div.pagenav-ctrls a.btn_icon.disabled {
		display: none;
	}

	@media (hover: hover) {	/*support hover only on devices having real hover, against sticky hover after removing objects from basket causing icon to stay colored on tablets*/
		a.btn_icon:hover:before {
			color: var(--hover-link-color);
		}
	}
a.btn_icon.active,
a.btn_icon.active:before {
	opacity: 1 !important;
	color: var(--active-color);
}
	a.btn_icon.detail:before {
		content: '\ea0c';
	}
	.media_item.selected a.btn_icon.detail:before {
		content: '\ea0d';
	}
	a.btn_icon.bookmark:before {
		content: '\e9d9';
	}
	/*in bookmark view use trash icon*/
	/*#container_result.bookmark a.btn_icon.bookmark:before {
		content: '\e9ad';
	}*/
	a.btn_icon.download:before {
		content: '\e9c7';
	}
	a.btn_icon.basket:before {
		content: '\e906';
	}
	#container_result.basket a.btn_icon.basket:before {	/*in basket view use trash icon*/
		content: '\e9ad';
	}
	a.btn_icon.play:before {
		content: '\e803';
	}
	a.btn_icon.sharelink:before {
		content: '\ea82';
	}
	a.btn_icon.sharemedia:before {
		content: '\ea7d';
	}
	a.btn_icon.delete:before {
		content: '\e9ad';
	}
	a.btn_icon.edit:before {
		content: '\e905';
	}
	a.btn_icon.return:before {
		content: '\e96a';
	}
	a.btn_icon.map:before {
		content: '\e947';
	}
	a.btn_icon.plus:before {
		content: '\ea0a';
	}
	a.btn_icon.arrow-left:before {
		content: '\ea38';
	}
	a.btn_icon.clear:before {
		content: '\ea0f';
	}


/** popups **/
div#popup_modal_overlay {
	position: fixed;
	display: none;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 9999;
}
div#popup_modal_overlay.active {
	display: block;
	background: rgba(0, 0, 0, 0.75);
}

div.popup_container {
	position: relative;
	width: 600px;
	height: 0;	/*make sure dialogs don't influence each other*/
	overflow: hidden;
	top: -700px;
	margin: 0 auto;
	border: 1px solid #fff;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 1) 3px 3px 3px;
	transition: 300ms top;
}
div.popup_container.active {
	top: 100px;
	height: auto;
	max-height: 100vh;
	overflow: auto;
}
@media screen and (max-height: 700px) {
	div.popup_container.active {
		top: 0px;
	}
}
@media screen and (max-width: 600px) {
	div.popup_container {
		max-width: 98%;
	}
}
div.popup_container>div {
	margin: 20px;
}
div.popup_container p {
	margin: 8px 0;
}
div.popup_container h3 {
	margin: 10px 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
div.popup_container textarea {
	width: 90%;
	height: 50px;
	resize: none;
}
div.popup_container div.ctrls {
	border-top: 1px solid #ddd;
	padding-top: 8px;
	margin-top: 40px;
	text-align: right;
}

/** filter **/
div.filter-checkboxes {
	padding-top: 5px;
	border-top: 1px dotted #ccc;
}
div.filter-select {
	border: 1px solid #ccc;
	padding: 5px;
	z-index: 999;
	position: sticky;
}

h4.filter-settings-toggler {
	font-family: var(--font-family-body);
	font-weight: normal;
    width: 100%;
    text-align: left;	/*in case element is inside an xl-center div*/
    position: relative;
    white-space: nowrap;
    padding-right: 30px;
	margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
h4.filter-settings-toggler:hover {
	color: var(--hover-link-color);
	cursor: pointer;
}
div.filter-checkboxes h4.filter-settings-toggler:before {
	font-family: 'icomoon';
	content: '\ea43';
	margin: 0 6px 0 1px;
}
div.filter-select h4.filter-settings-toggler:after {
	font-family: 'icomoon';
	content: '\ea43';
	position: absolute;
	right: 1px;
	top: 1px;
}


div.filter-select.active h4.filter-settings-toggler,
div.filter-checkboxes.active h4.filter-settings-toggler {
	color: var(--active-color);	/*--hover-link-color has not enough contrast*/
}
div.filter-select.active h4.filter-settings-toggler:after,
div.filter-checkboxes.active h4.filter-settings-toggler:before {
	content: '\ea41';
	color: var(--active-color);
}
div.filter-settings-wrapper {
	margin-top: 5px;
	height: 0;
	overflow: hidden;
}
	div.filter-select.active div.filter-settings-wrapper,
	div.filter-checkboxes.active div.filter-settings-wrapper {
		height: auto;
		max-height: 200px;
		overflow: auto;
		scrollbar-width: thin;
		position: relative;
		/*margin-bottom: 15px;*/
		background: #fff; /*for mobile view*/
	}
	div.filter-select.active div.filter-settings-wrapper {
		width: calc(100% + 12px);
		border: 1px solid #ccc;
		border-top: none;
		border-bottom: none;
		padding: 0 5px;
		left: -6px;
		max-height: 400px;
	}
	@media (max-width: 768px) {
		div.filter-checkboxes {
			width: 48%;
			margin: 2px 1px;
			display: inline-block;
			position: relative;
		}
		div.filter-checkboxes.active {
			top: -10px;
		}
		div.filter-checkboxes.active div.filter-settings-wrapper {
			position: absolute;
			width: 95%;
			z-index: 99;
			border-bottom: 10px solid #fff;
			box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.5);
		}
	}
div.filter-select div.filter-list,
div.filter-checkboxes div.filter-list {
	height: 0;
}
div.filter-select.active div.filter-list,
div.filter-checkboxes.active div.filter-list {
	height: auto;
	min-height: 20px;	/*make loading anim visible*/
	position: relative;
	overflow: auto;
	scrollbar-width: thin;
}
div.filter-checkboxes.active div.filter-list.hierarchic {
	overflow: hidden;
}
	div.filter-list {
		text-align: left;
	}
	div.filter-list.loading {
		height: 35px;
	}
	div.filter-list label {
		width: 90%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
	.home-search div.filter-list label {
		font-size: 14px;
	}
	div.filter-list label:hover,
	div.filter-list label:hover:before {
		color: var(--hover-link-color)
	}
	div.filter-list input[type="checkbox"] + label::before {
		font-size: var(--font-size);
		margin-left: 1px;
	}

.filterlist_filter {
	display: none;
	margin: 5px 0 10px;
}
.filterlist_filter.active {
	display: block;
}
.filterlist_filter input[type=text] {
	height: 25px;
	width: 100%;
	padding-right: 35px;
}
.filterlist_filter i {
	width: 25px;
	height: 25px;
	position: absolute;
	right: 0px;
	cursor: pointer;
}
.filterlist_filter i:before {
	position: relative;
	top: 5px;
}

ul.fancytree-container {
	border: none !important;
}

/** registry, login, pw reset **/
.inputField {
	position: relative;
	margin: 10px 0;
}
.inputField label::before {
	content: attr(title);
	position: absolute;
	line-height: 20px;
	font-size: 12px;
	top: -10px;
	background: #fff;
	padding: 0 6px;
	left: 9px;
	line-height: 20px;
	color: #777;
}
.inputField input:required + label::before {
	content: attr(title) ' *';
}
.inputField input {
	height: 40px;
	width: 100%;
	line-height: 40px;
	padding: 0 15px;
	box-sizing: border-box;
	font-size: 14px;
	color: var(--main-color);
	border: 1px solid #ccc;
}    
.inputField select {
	font-size: 14px;
	color: var(--main-color);
	width: 300px;
}
.inputField input:focus {
	outline: 0;
	border-width: 2px;
}
.inputField input:valid + label::before {
	content: attr(data-title);
}

/** shadow box browser function**/
#sb-overlay {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#sb-nav-prev,
#sb-nav-next {
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	background-image: none !important;	
}
#sb-nav-prev {
	left: -25px;
}
#sb-nav-next {
	right: -25px;
}
#sb-nav-prev i,
#sb-nav-next i {
	font-size: 24px;
	color: #fff;
	cursor: pointer;
}
#sb-nav-prev i:before,
#sb-nav-next i:before {
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
#sb-nav-prev i.icon-prev:before {
	content: '\ea40';
}
#sb-nav-next i.icon-next:before {
	content: '\ea3c';
}
#sb-nav-close {
	background-image: none !important;	/*override default shadowbox css*/
}
#sb-nav-close:before {
	font-family: 'icomoon' !important;
	content: '\ea0f';
	color: #fff;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
	font-size: 18px;
}

/** Selectmenu Original **/
.ui-selectmenu { display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 5px; }
.ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; display: none; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-menu  ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; -webkit-overflow-scrolling: touch;} 
.ui-selectmenu-open { display: block; }
ul.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 2.1em .405em 1em; outline:none; text-decoration:none; }
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }

/* Selectmenu CUSTOM
----------------------------------*/
.ui-selectmenu {
	height: 24px !important;
	background: none #fff !important;
	border: 1px solid #949eaa !important;
	margin: 2px 0;
	border-radius: 0 !important;
}
.ui-selectmenu-icon {
	right: 2px;
}
.ui-selectmenu-menu li a,
.ui-selectmenu-status {
	line-height: 14px;
	font-weight: normal;
	padding: 4px 2.1em 0.2em 0.4em !important;
	background: none #fff !important;
	color: #3c372d;
}
.ui-selectmenu-status.small {
	font-size: 12px;
	line-height: 20px;
}


.ui-menu.ui-autocomplete {
	max-width: 500px;
	background: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	/*max-height: 60%; //no longer needed cause autocomplete is appended to #wrapper_pagenav_result*/
	cursor: pointer;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
	z-index: 100;
	border: 1px solid #ccc;
}
	.ui-menu.ui-autocomplete li.ui-menu-item {
		padding-left: 10px;
		margin: 1px 2px;
		white-space: nowrap;
		list-style: none;
	}
	@media (pointer: coarse) {
		.ui-menu.ui-autocomplete li.ui-menu-item {
			margin: 6px 2px;
		}
	}
		.ui-menu.ui-autocomplete li.ui-menu-item:hover {
			background-color: var(--hover-color);
		}
		.ui-menu.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper {
			padding: 0 !important;
		}
	.ui-menu.ui-autocomplete li.ui-menu-item.subhead {
		background-color: #ccc;
		padding: 2px 0 2px 6px;
		font-family: var(--font-family-head);
		cursor: default;
	}
	.ui-menu.ui-autocomplete li.ui-menu-item.subhead:not(:first-of-type) {
		margin-top: 4px;
	}
	.ui-menu.ui-autocomplete li.ui-menu-item:before {
		font-family: 'icomoon';
		margin-right: 4px;
	}
	.ui-menu.ui-autocomplete li.ui-menu-item.mc:before {
		content: '\e92e';
	}
	.ui-menu.ui-autocomplete li.ui-menu-item.keyword:before {
		content: '\f002';
	}
	.ui-menu.ui-autocomplete li.ui-menu-item.synonym {
		font-style: italic;
	}
	.ui-helper-hidden-accessible {
		display: none;
	}
	.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
		background: var(--hover-color) !important;
		border: none;
		color: var(--text-color);
	} 

a.btn.fileversion-selector,
button.fileversion-selector {
	padding: 3px 8px;
	height: 20px
}
a.btn.fileversion-selector.play:before,
button.fileversion-selector.play:before {
	font-family: 'icomoon';
	font-size: 10px;
	content: '\ea15';
	margin-right: 3px;
}
a.btn.fileversion-selector.download:before,
button.fileversion-selector.download:before {
	font-family: 'icomoon';
	font-size: 10px;
	content: '\e9c7';
	margin-right: 3px;
}


table#bookmarkeditor {
	border-collapse: collapse;
}
	#bookmarkeditor td {
		height: 40px;
		min-width: 250px;
		border-bottom: 1px solid #999;
		vertical-align: middle;
	}
	#bookmarkeditor a,
	#bookmarkeditor a.btn_icon::before {
		font-size: 16px;
		line-height: 30px;
	}
		#bookmarkeditor td.small {
			min-width: auto;
			font-size: 11px;
		}
	#bookmarkeditor td a {
		margin-left: 20px;
	}

.mejs__time {
	padding-top: 11px !important;
}
.mejs__time * {
	color: #fff !important;
}
.mejs__controls:not([style*="display: none"]) {
	background: linear-gradient(transparent,rgba(0,0,0,.65)) !important;
}
.mejs__time-float {
	height: 20px !important;
}



.screenreader-only {	/*this class is for hiding labels from visible surface but making visible for screen readers*/
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}