html {
	scroll-behavior: smooth;
}

#mycollections-index .results-view-options .btn--searchView {
	border: 0;
	box-shadow: none;
	width: auto;
	margin-right: 0;
	height: 100%;
	-webkit-transition: none;
	transition: none;
	background-image: none;
	border-radius: 0;
}

#mycollections-index .results-view-options .btn--searchView:hover {
	background-color: inherit;
}

.iPanel-info,
.iPanel__header {
	position: relative;
}

.iPanel__body {
	padding: 1.5rem;
}

.iPanel__header {
	box-shadow: 0 0 4px rgba(0, 0, 0,.16);
	padding-block-start: 0;
	position: relative;
}

/* hide top box shadow on iPanel__header */
.iPanel__header::before {
	content: '';
	position: absolute;
	inset-block-start: -3px;
	width: 100%;
	height: 4px;
	background-color: var(--cll-lightest-grey);
}

.iPanel__body {
	background-color: #fff;
	display: grid;
	gap: 1rem;
}

.results-view-options .btn--searchView {
    padding: 0;
	font-size: 0;
}

.results-view-options .iw-icon-search-list,
.results-view-options .iw-icon-search-grid {
	font-size: 1rem;
}

.results-view-options .btn--searchView:last-child,
.results-view-options .btn--searchView,
.results-view-options .btn--searchView:hover,
.results-view-options .btn--searchView.active {
    background-color: transparent;
	color: var(--cll-icon-color);
}

.results-view-options .btn--searchView.active {
	color: var(--cll-primary-accent-color);
}

.results-view-options .btn--searchView.active:hover {
	color: var(--cll-primary-accent-color);
	cursor: default;
}

.c-nav-control-btn,
.icon-btn {
    position: relative;
    background-color: transparent;
    border: 0;
    padding: 0;
}

.icon-btn {
    cursor: pointer;
    z-index: 1;
	color: var(--cll-icon-color);
	margin-inline-start: 1.5rem;
}

.iPanel-controls .icon-btn {
	margin-inline-start: 0;
}

.c-search-control {
	margin-inline-start: 0;
}

.icon-btn::before {
    font-size: 1.2rem;
}

.c-nav-control-btn {
    position: absolute;
    cursor: pointer;
	height: 45px;
	width: 45px;
	border-inline-end: 1px solid var(--cll-border-color);
}

.icon-css--chevrons {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
	height: 45px;
	width: 45px;
	display: inline-block;
}

.iPanel-controls .icon-css--chevrons {
	display: none;
}

.rtl .icon-css--chevrons {
	-webkit-transform: scale(1.2) rotate(180deg);
	transform: scale(1.2) rotate(180deg);
}

.icon-css--chevrons::after,
.icon-css--chevrons::before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--cll-icon-color);
    border-top: 2px solid var(--cll-icon-color);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 23px;
    top: 20px
}

.icon-css--chevrons::after {
    right: 17px;
}

.cNav-isActive .icon-css--chevrons::after,
.cNav-isActive .icon-css--chevrons::before {
    border-right: 0;
    border-top: 0;
    border-left: 2px solid var(--cll-icon-color);
    border-bottom: 2px solid var(--cll-icon-color);
}

/* min height needed so we can see all items on nav if there are no collections to show */
.c-collections {
    position: relative;
    overflow: hidden;
	min-height: 189px
}

/* allow scroll if nav is open for mobile */
.cNav-isActive.c-collections {
	overflow: auto;
}

.c-panel {
    display: grid;
}

.c-panel--error .c-header-cType::after {
	display: none;
}

.c-collections--overview .c-panel {
	grid-template-columns: 1fr min-content;
}

.c-collections--results .c-panel {
	grid-template-columns: 1fr min-content min-content;
}

/* left margin needed to allow space for absolutely positioned nav control */
.iPanel-controls {
	grid-area: 1 / 1 / 2 / 2;
	margin-inline-start: 45px;
	margin-block-end: 1rem;
	width: min-content;
	position: relative;
}

.iPanel-controls .icon-btn {
	border-inline-end: 1px solid var(--cll-border-color);
	width: 45px;
}

.c-collections--public .iPanel-controls {
	margin-inline-start: 0;
}

/* z-index to cover all other elements */
.c-nav {
    position: absolute;
    background-color: #fff;
    width: 100%;
    top: 45px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: -webkit-transform .3s ease-in;
    transition: transform .3s ease-in;
    height: calc(100% - 45px);
	z-index: 3;
}

.rtl .c-nav {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

/* Stop nav from opening when resizing the page */
.c-noAnim .c-nav,
.c-noAnim .c-search-input {
	-webkit-transition: none;
	transition: none
}

.c-nav-item {
	padding: 1.5rem 0;
	border: 0;
	background: transparent;
	display: block;
	cursor: pointer;
	width: 100%;
	position: relative;
}

.c-nav-item.is-active {
	background-image: linear-gradient(91deg, rgba(235,235,235,1) 0%, rgba(5,107,228,.06) 100%);
	color: var(--cll-primary-accent-color);
}

.c-nav-item.is-active::after {
	content:'';
	position: absolute;
	height: 100%;
	width: 3px;
	background-image: linear-gradient(191deg, rgba(6, 214, 255, 1) 0%, rgba(3, 160, 253, 1) 100%);
	inset-inline-start: 0;
	top: 0;
}

.iwTBar--isClosed .c-nav-item.is-active::after {
	inset-inline-start: 5px;
}

.rtl .iwTBar--isClosed .c-nav-item.is-active::after {
	inset-inline-start: 0;
}

.c-nav-item::before {
	margin-inline-end: .375rem;
	color: var(--cll-icon-color);
}

.c-nav-item.is-active::before {
	color: var(--cll-primary-accent-color);
}

.cNav-isActive .c-nav {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.cNav-isActive .results-view-options,
.cNav-isActive .c-search-control,
.cNav-isActive .c-context-menu.IWmenu_link,
.cNav-isActive .iPanel-controls {
	pointer-events: none;
	visibility: hidden;
}

/*z-index to cover page items and context menus when active*/
.iPanel {
    position: absolute;
    background-color: var(--cll-lightest-grey);
    width: 100%;
	inset-inline-end: 0;
    top: 47px;
	z-index: 2;
}

.iPanel {
	-webkit-transition: -webkit-transform .3s ease-in-out;
	transition: -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.rtl .iPanel {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

/*Pixels used for padding to accommodate absolutely positioned search icon*/
.c-search-input {
    position: relative;
    width: 100%;
	padding: 0;
	padding-inline-start: 40px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    border: 0;
    border-bottom: 1px solid #e1e1e1;
    background-image: linear-gradient(251deg, rgba(235,235,235,1) 16%, rgba(255,255,255,1) 100%);
    line-height: 1;
	font-size: 16px;
}

/* need first selector to stop css style leak into search page */
.c-collections .results-view-options {
	position: relative;
	background-color:  var(--cll-light-grey);
	border-bottom: 1px solid var(--cll-border-color);
	border-top: 1px solid var(--cll-border-color);
	margin-block-end: 1rem;
	border-inline-start: 1px solid var(--cll-border-color);
	padding-inline: 1rem;
	gap: 1rem;
}

.rtl .c-collections .results-view-options {
	background-color:  var(--cll-lightest-grey);
}

.c-collections .cSearch-isActive .results-view-options,
.c-collections .results-view-options .btn--searchView:nth-child(3) {
	display: none;
}

.rtl .c-search-input {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.iPanel-active .iPanel,
.cSearch-isActive .c-search-input,
.iPanel-active .iPanel-controls {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.iPanel-active .iPanel {
	overflow: auto;
}

.iPanel-active .iPanel-content {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	height: auto;
	overflow: visible;
}

.iPanel-active .iPanel-content,
.preview-mInfoWrap {
	-webkit-animation: cFadeIn .35s ease-in;
	-moz-animation: cFadeIn .35s ease-in;
	animation: cFadeIn .35s ease-in;
}

.cSearch-isActive .c-search-input {
	border: 0;
}

.c-search-lbl {
	position: absolute;
	visibility: hidden;
}

/* magnify icon */
.cSearch-isActive .c-search-bar::before {
    content: '\e94b';
    position: absolute;
    font-family: 'Imagenweb';
    z-index: 1;
    width: 50px;
    pointer-events: none;
	inset-inline-start: .75rem;
    top: 7px;
    font-size: 1.3rem;
    -webkit-animation: fadeIn 1s ease-in;
    -moz-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}

/* stop CSS grid from wrapping contents at whitespace */
.c-search-bar {
    white-space: nowrap;
    min-height: 45px;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
    background-image: linear-gradient(188deg, rgba(235,235,235,1) 16%, rgba(235,235,235,0) 100%);
}

.c-collections--results .c-search-bar {
	grid-area: 1 / 1 / 2 / 3;
}

.c-collections--overview .c-search-bar {
	grid-area: 1 / 1 / 2 / 2;
	padding-inline-end: 1rem;
}

.c-actions,
.list-item-actions,
.preview-mediaWrap,
.c-search-bar,
.preview-actions {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.preview-type {
	-ms-flex-item-align: end;
	align-self: flex-end;
}

.c-clipDuration-compact::before,
.icon-btn::before,
.c-nav-item::before,
.c-header-cType::after,
.iPanel-title::before,
.c-empty-collection::before,
.is-shared::before,
.is-everyone::before,
.is-private::before {
    font-family: 'imagenWeb';
}

/* 1px margin to fix overflow cut off issue */
.iPanel-title::before {
	margin-inline-end: .375rem;
	margin-inline-start: 1px;
	color: var(--cll-primary-accent-color);
	display: inline-block;
}

.c-header {
    margin: 1rem 0;
	padding-inline: 1.5rem;
}

.c-collections--results .c-header {
	grid-area: 2 / 1 / 3 / 2;
	margin-block: .5rem 1.5rem;
}

.c-collections--results .c-actions {
	margin-block-start: .5rem
}

/*
  1.  If just the share links btn and context menu btn are displayed - sit the header under them (check for 2 children only)
  2.  If all three buttons are displayed - sit the header under them (checks for acl button to follow the share button)
  3.  Note: In both scenarios the context menu is available
*/
.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .c-header,
.c-collections--results:has(.c-share ~ .acl_button) .c-header {
	grid-area: 3 / 1 / 4 / 4;
	margin-block-start: .75rem;
}

.c-collections--overview .c-header {
	flex-wrap: wrap;
	gap: 1.5rem;
	grid-area: 3 / 1 / 4 / 3;
	justify-content: space-between;
}

.c-header-title {
	font-size: 1rem;
	margin: 0;
}

.c-header .u-formInput {
	align-items: center;
	display: flex;
	gap: .75rem;
}

.c-header .u-formInput-select {
	position: relative;
}

.c-header .u-formInput-select::after {
	align-items: center;
	background-color: #fff;
	content: '\e91f';
	display: flex;
	font-family: 'Imagenweb';
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	height: calc(100% - 6px);
	inset-block-start: 3px;
	inset-inline-end: 4px;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	speak: none;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	width: 30px;
}


.c-header .u-label {
	margin: 0;
}

.c-header .u-input {
	border-radius: 4px;
	padding-block: .375rem;
	padding-inline: .375rem 1.5rem;
}

.c-header-cName {
	word-break: break-word;
}

.c-header-cType,
.overview-tile-date--desc,
.overview-tile-img,
.results-tile-img,
.list-item-img,
.iPanel-initials {
	cursor: pointer;
}

.c-actions,
.overview-tile--desc .overview-tile-img,
.overview-tile--desc .owner-icon,
.overview-tile--desc .overview-tile-info {
	-webkit-transition: -webkit-transform .3s ease-in;
	transition: -webkit-transform .3s ease-in;
	transition: transform .3s ease-in;
}

.c-collections .multiSelect-menuItem--desktop.hide {
	display: none;
}

.overview-tile .overview__aclBtn {
	position: absolute;
}


@media (hover: hover) {

	.overview-tile--desc:hover .overview-tile-title {
		pointer-events: none;
	}

	.overview-tile--desc:hover .expand-icon {
		-webkit-transform: rotate(180deg) translateY(-50%);
		transform: rotate(180deg) translateY(-50%);
	}

	.overview-tile--desc:hover .overview-tile-date--desc {
		margin-bottom: 1.5rem;
	}

	/* the description is revealed on hover so no need to have click event as well */
	.overview-tile-date--desc {
		pointer-events: none;
	}

	.overview-tile-item {
		cursor: pointer;
	}

	.overview-tile--desc:hover .overview-tile-expand {
		margin-bottom: .375rem;
	}
}

.overview-tile-desc {
	display: -webkit-box;
	font-size: .85rem;
	line-height: 1.5;
	max-height: calc(1.5rem * 5);
	opacity: .65;
	overflow: hidden;
}

textarea.iPanel-desc {
	background-color: #fff;
	min-height: 250px;
	padding: .375rem;
	resize: vertical;
	width: 100%;
}

textarea.iPanel-desc,
textarea.iPanel-desc:focus-visible {
	border-color: #dedede;
	border-radius: 4px;
	outline: none;
}

textarea.iPanel-desc.edit-hide {
	min-height: inherit;
}

.overview-tile-desc:last-child {
	margin-bottom: 0;
}

/*.overview-tile-edit {*/
/*	font-size: .85rem;*/
/*}*/

.icon-btn.is-active::before {
	color: var(--cll-primary-accent-color);
}

/* close icon */
.cSearch-isActive .c-search-control::before,
.c-panel--empty .media-type--iPanel::after {
    content: '\e9ce';
    -webkit-animation: fadeIn 1s ease-in;
    -moz-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}

.c-panel--empty .media-type--iPanel::after {
	content: '\e925'
}

/* right chevron icon */
.c-header-cType::after {
    content: '\e920';
    line-height: 1;
    margin: 0 .375rem;
    font-size: .8rem;
    color: var(--cll-icon-color);
	display: inline-block;
}

.rtl .c-header-cType::after {
	content: '\e903';
}

.c-collections--overview .c-header-cType::after {
	display: none;
}

.c-context-menu.IWmenu_link::before {
	content: '\e9c1';
	font-size: 16px;
	font-family: 'ImagenWeb';
	color: #fff;
	position: relative;
}

/* magnify icon */
.c-search-control::before {
    content: '\e94b';
}

/* alert icon */
.c-panel--error .c-empty-collection::before {
	content: '\e9db';
	font-size: 102px;
	color: var(--cll-icon-color);
	background-color: #fff;
	border-width: 60px;
}

/* ghost icon */
.c-empty-collection::before {
	content: '\e91e';
	font-size: 40px;
	height: 100px;
	width: 100px;
	-webkit-font-smoothing: antialiased;
	margin: 0 0 .75rem 0;
	border-radius: 50%;
	border: 5px solid #fff;
	color: #fff;
	text-align: center;
	background-color: var(--cll-icon-color);
	box-shadow: 0 0 0 2px var(--cll-icon-color);
}

/* sad search icon */
.c-panel--noResults .c-empty-collection::before {
	content: '\e9da';
	background-color: transparent;
	box-shadow: none;
	color: var(--cll-icon-color);
	font-size: 80px;
	position: relative;
	top: 6px;
	border: 0;
}

/* info icon */
.icon-btn--iPanel::before {
    content: '\e9c3';
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	display: inline-block;
}

/* collection box icon */
.c-nav-item--all::before {
    content: '\e925';
}

.c-nav-item--smart::before {
	content: "\e913";
}

/* avatar icon */
.c-nav-item--mine::before {
    content: '\e992';
}

/* group of people icon*/
.c-nav-item--shared::before {
    content: '\e948';
	font-weight: normal;
}

/* sphere-globe icon*/
.c-nav-item--public::before {
	content: '\e97d';
	font-weight: normal;
}

.iPanel-img {
	background-image: linear-gradient(14deg, rgba(235, 235, 235, 1) 0%, rgba(235, 235, 235, 0) 60%), linear-gradient(192deg, rgba(235, 235, 235, 1) 0%, rgba(235, 235, 235, 0) 60%);
	max-height: 230px;
	object-fit: cover;
}

.c-collections--overview .collection-ctx,
.cSearch-isActive .icon-btn--iPanel,
.cSearch-isActive .c-context-menu.IWmenu_link,
.c-nav-control-title,
.icon-css--close,
.iPanel-active .c-context-menu.IWmenu_link,
.iPanel-active .c-search-control,
.iPanel-active .icon-css--close::after,
.c-panel--empty .c-search-control,
#mycollections-index #footer,
#mycollections-index footer,
.c-panel--error .c-search-control,
.c-panel--error .results-view-options,
.cNav-isActive .iPanel,
.c-collections--public .c-nav,
.c-collections--public .c-nav-control,
.c-collections--public .c-header-cName::before {
	display: none;
}

/* We need to get the height of c-header on page load but don't want to see it whilst loading */
#mycollections-index.init-load .c-header,
.init-load .c-search-control,
.iPanel-active .c-search-bar {
	visibility: hidden;
}

.c-collections--overview .iPanel-active .c-search-control {
	display: inline-block;
}

.iPanel-active .icon-btn--preview,
.iPanel-active .icon-css--close {
	display: block;
}

.list-item-actions,
.results-tile-actions {
	position: absolute;
	width: 100%;
	column-gap: .75rem;
}

.results-tile-actions {
	justify-content: flex-end;
}

.results-tile-actions .IWmenu_link:only-child {
	margin-inline-start: auto;
}

.list-item-actions {
	width: auto;
	position: relative;
	grid-area: 1 / 4 / 3 / 5;
}

.media-type--resultsList {
	grid-area: 1 / 1 / 2 / 2;
}

.list-item-title {
	grid-area: 1 / 2 / 2 / 4;
	margin-inline: .375rem .75rem;
}

.list-item-date {
	grid-area: 2 / 3 / 3 / 4;
	margin-block-start: .575rem;
	margin-inline-end: 1.5rem;
}

.list-item-date:empty {
	display: none;
}

.iPanel-active .icon-css--close,
.c-clipDuration-compact,
.list-item-date,
.u-tag-tile,
.results-tile-actions,
.list-item-actions,
.isClip .media-type,
.preview-mediaWrap,
.c-collections .results-view-options,
.c-context-menu.IWmenu_link,
.c-search-bar,
.iPanel-active .iPanel-controls,
.results-tile,
.overview-tile,
.results-tile-info,
.results-tile-sub-info,
.media-type--overviewGrid,
.iPanel-members,
.iPanel,
.c-collections--overview .iPanel-active .c-search-bar,
.c-empty-collection,
.c-empty-collection::before,
.overview-item-imgWrap,
.c-empty-collection::before,
.preview-creatorWrap,
.preview-actions,
.preview-contextMenu,
.preview-type,
.c-collections--results .acl_update  .btn--mini,
.iPanel-preview,
.preview-btn,
.preview-video,
.c-actions,
.iPanel-controls,
.c-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.iPanel-active .icon-css--close,
.iPanel-active .iPanel-controls,
.media-type--overviewGrid,
.media-type--overviewList,
.iPanel-members,
.c-empty-collection,
.c-empty-collection::before,
.overview-item-imgWrap,
.preview-btn,
.preview-creatorWrap {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.preview-mediaWrap,
.results-tile,
.overview-tile,
.results-tile-info,
.iPanel,
.iPanel-preview {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.results-tile-sub-info {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.results-tile-img,
.overview-tile-img,
.results-tile,
.overview-tile,
.c-empty-collection::before {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.iPanel-active .icon-css--close,
.list-item-actions,
.results-tile-sub-info,
.u-tag-tile,
.c-context-menu.IWmenu_link,
.media-type--overviewGrid,
.media-type--overviewList,
.c-empty-collection,
.c-empty-collection::before,
.c-empty-collection::before,
.preview-creatorWrap,
.preview-contextMenu,
.overview-item-dataWrap,
.c-collections--results .acl_update .btn--mini,
.preview-btn,
.c-header {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.preview-mediaWrap--audio .iwp-waveform .iwp-waveform--unplayed,
.preview-mediaWrap--audio .iwp-waveform .iwp-waveform--canvas,
.preview-mediaWrap--audio .iwp-waveform .iwp-waveform--played,
.preview-mediaWrap--audio .iwp-waveform .iwp-waveform--unplayed {
	height: 50px;
}

.c-actions {
	gap: .75rem;
	padding-inline-end: .75rem;
	grid-area: 2 / 2 / 3 / 4;
}

.c-actions:empty {
	display: none;
}

.preview-creator {
	color: #fbfbfb;
}

.iPanel-preview {
	height: 100%;
}

.c-collections--results .results-view-options {
	grid-area: 1 / 3 / 2 / 4;
}

.c-collections--overview .results-view-options {
	grid-area: 1 / 2 / 2 / 3;
}

.c-collections--results.cNav-isActive .c-search-bar {
	grid-area: 1 / 1 / 2 / 4;
}

.c-collections--overview.cNav-isActive .c-search-bar {
	grid-area: 1 / 1 / 2 / 3;
}

/* min height used to try and make text in buttons vertically aligned in all browsers (FF issue)*/
/* position static needed to overwrite some theme styles */
.c-collections--results .c-share-btn,
.c-collections--results .acl_update .btn--mini {
	border-radius: 4px;
	background-color: var(--cll-primary-accent-color);
	background-image: none;
	border: 0;
	color: #fff;
	padding: 0 .75rem;
	-webkit-transition: none;
	transition: none;
	font-size: .79rem;
	text-transform: inherit;
	min-height: 30px;
	gap: .375rem;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	white-space: nowrap;
	position: static;
}

.c-collections--results .acl_update .btn--mini .iw-icon-padlock {
	position: relative;
	font-size: 12px;
}

.c-collections--results .acl_update .btn--mini,
.c-context-menu.IWmenu_link {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.c-collections--results .c-share-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .1875rem;
	font-family: inherit;
	box-shadow: none;
	text-transform: inherit;
}

.c-share-btn-txt {
	line-height: 15px;
	margin-inline-start: .1875rem;
}

.acl_update_link_text {
	line-height: 15px;
}

.c-collections--results .c-share-btn:hover {
	box-shadow: none;
}

.c-collections--results .c-share-btn::after {
	content: '';
	display: inline-block;
	height: 16px;
	vertical-align: middle;
}

.c-share-btn::before {
	font-family: 'Imagenweb';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	position: relative;
}

/* z-index needed to show context over gradient overlay*/
.c-panel .iwMenu_infoCtx {
	position: absolute;
	top: .75rem;
	inset-inline-end: .75rem;
	color: #fff;
	z-index: 1;
}

.cSearch-isActive .c-search-bar {
	padding-inline-end: 40px;
}

.cSearch-isActive .c-search-control {
    position: absolute;
    top: 11px;
	inset-inline-end: 1rem;
}

.iPanel-active .iPanel-controls {
    grid-area: 1 / 1 / 2 / 4;
	background-color: #fff;
	box-shadow: var(--cll-default-box-shadow);
	border-top: 1px solid var(--cll-border-color);
	height: 45px;
	width: 100%;
	margin-inline-start: 0;
	justify-content: flex-start;
}

.iPanel-active .icon-css--close {
    order: -1;
	position: static;
	border-inline-end: 1px solid var(--cll-border-color);
	-webkit-transform: scale(1);
	transform: scale(1);
	height: auto;
	width: 45px;
	border: 0;
	cursor: pointer;
}

.iPanel-active .icon-css--close::before {
	content: '\e9ce';
	font-family: 'ImagenWeb';
	-webkit-transform: none;
	transform: none;
	font-size: .9rem;
	border: 0;
	height: 16px;
	width: auto;
	position: static;
}

.rtl .iPanel-active .icon-css--close::before {
	top: 11px;
}

.results-tile,
.overview-tile {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--cll-default-box-shadow);
	position: relative;
	background-color: #fff;
	height: 269px;
}

.results-tile {
	width: calc(100% - 1.5rem);
}

/*Fix for safari - borders do not show as rounded whilst running hover animation*/
.overview-tile {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	height: 340px;
}

.overview-tile .IWmenu_link--row,
.results-tile .IWmenu_link--row,
.overview-tile-item .IWmenu_link--row {
	position: absolute;
	top: .75rem;
	inset-inline-end: .75rem;
	color: #fff;
	background-color: transparent;
}

.results-tile .IWmenu_link--row {
	position: relative;
}

.u-tag-tile {
	position: relative;
	z-index: 1;
	font-size: .8rem;
	border-radius: 4px;
	padding: 0 .575rem;
	margin: 0;
	inset-block-start: .75rem;
	background-color: #201f1f;
	color: #fff;
	height: 24px;
	line-height: 24px;
}

.list-item-actions .u-tag-tile {
	inset-block-start: 0;
}

.overview-tile .IWmenu_link--row:hover,
.results-tile .IWmenu_link--row:hover,
.overview-tile-item .IWmenu_link--row:hover,
.overview-tile .IWmenu_link--row:focus,
.results-tile .IWmenu_link--row:focus,
.overview-tile-item .IWmenu_link--row:focus,
.overview-tile .IWmenu_link--row:active,
.results-tile .IWmenu_link--row:active,
.overview-tile-item .IWmenu_link--row:active {
	background-color: transparent;
	color: inherit;
}

.overview-tile-item .IWmenu_link--row {
	inset-block-start: 17px;
}

.list-item .IWmenu_link--row {
	position: relative;
}

.results-tile .IWmenu_link--row,
.overview-tile .IWmenu_link--row {
	z-index: 1;
}

/* context menu */
.results-tile .iw-icon-more::before,
.iwMenu_infoCtx .iw-icon-more::before,
.overview-tile .iw-icon-more::before,
.overview-tile-item .iw-icon-more::before {
	content: '\e9c1';
}

.results-tile-info {
	height: 100%;
    padding: .75rem;
}

/* Don't allow user select as it look broken when selecting via click and drag */
.results-tile-info,
.results-tile-imgWrap,
.list-item-imgWrap,
.list-item-title {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.results-view {
	padding-block-end: 1.5rem;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.c-collections--overview .results-view {
	grid-area: 4 / 1 / 5 / 3;
}

.c-collections--results .results-view {
	grid-area: 4 / 1 / 5 / 4;
}

.iPanel-active .results-view {
	visibility:  hidden;
}

.results-view--grid .results-items {
    gap: 1.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.c-collections--results .results-view--grid .results-items {
	padding-inline-end: 0;
}

.c-collections--overview .results-view--grid .results-items {
	grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
	grid-template-rows: max-content;
	display: grid;
}

.results-items {
	padding-block: 0 1.5rem;
	padding-inline: 1rem;
}

.c-panel--error .results-items {
	height: 100%;
}

.results-tile-img,
.overview-tile-img {
    max-width: 100%;
    width: 100%;
    height: 190px;
    object-fit: cover;
	position: relative;
	background-image: linear-gradient(14deg, rgba(235,235,235,1) 0%, rgba(235,235,235,0) 60%), linear-gradient(192deg, rgba(235,235,235,1) 0%, rgba(235,235,235,0) 60%);
}

.overview-tile-img {
	z-index: -2;
}

.overview-tile-img,
.owner-icon--overview,
.overview-tile-info {
	transition: all .3s ease-in-out;

}

.iPanel-img[src*="_thumb.svg"],
.results-tile-img[src*="_thumb.svg"] {
	object-fit: contain;
}

.results-tile::after,
.overview-tile::after {
	content: '';
	pointer-events: none;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-image: linear-gradient(
			rgba(10, 20, 20, .5),
			hsla(180, 33.3%, 5.8%, 0.473) 7.9%,
			hsla(180, 33.3%, 5.6%, 0.441) 15.3%,
			hsla(180, 33.3%, 5.5%, 0.408) 22.2%,
			hsla(180, 33.3%, 5.3%, 0.371) 28.7%,
			hsla(180, 33.3%, 5%, 0.333) 34.8%,
			hsla(180, 33.3%, 4.8%, 0.294) 40.6%,
			hsla(180, 33.3%, 4.5%, 0.255) 46.2%,
			hsla(180, 33.3%, 4.1%, 0.214) 51.7%,
			hsla(180, 33.3%, 3.6%, 0.174) 57.2%,
			hsla(180, 33.3%, 3.1%, 0.135) 62.8%,
			hsla(180, 33.3%, 2.5%, 0.097) 68.7%,
			hsla(180, 33.3%, 1.7%, 0.061) 75.2%,
			hsla(180, 33.3%, 0.9%, 0.029) 82.6%,
			hsla(180, 33.3%, 0.2%, 0.007) 91.2%,
			transparent
	)
}

.overview-tile-item .IWmenu_link--row {
	color: var(--cll-icon-color);
}

/* min height set so there is no jump when we come to edit*/
.iPanel-title {
	display: -webkit-box;
	font-size: 1rem;
	line-height: 1.5;
	margin-block: 0 .75rem;
	margin-inline: 0;
	min-height: 32px;
	overflow: hidden;
	padding-inline: 1.5rem;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

input.iPanel-title {
	height: 30px;
	margin-inline: .75rem;
	width: calc(100% - 1.5rem);
}

.iPanel-desc-lbl,
.iPanel-title-lbl,
.iPanel-desc.edit-hide,
.iPanel-title.edit-hide {
	height: auto;
	position: absolute;
	top: 0;
	visibility: hidden;
}

.results-tile-date,
.list-item-date {
    font-size: .9rem;
}

.iPanel--preview ~ .results-view {
	padding-top: 3px;
	scroll-padding-top: 3px;
	scroll-padding-bottom: 3px;
}

.results-tile-date::before,
.list-item-date::before {
	color: var(--cll-badge-color);
    content: '\e905';
	display: inline-block;
    font-family: 'Imagenweb';
	margin-inline-end: .375rem;
}

/* Couldn't use normal whitespace nowrap as CSS grid uses that as it's min content and causing overflow issues
   where tiles had long names and no spaces*/
.results-tile-title {
    margin-bottom: .75rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.owner-icon.owner-icon--overview {
	--size: 56px;

	background-color: #fff;
	border-radius: 10px;
	font-size: 1rem;
	height: var(--size);
	inset-block-start: calc(190px - 22px);
	inset-inline-end: .75rem;
	line-height: var(--size);
	margin-block: 0;
	margin-inline: auto 0;
	position: absolute;
	width: var(--size);
	z-index: 1;
}

.owner-icon.owner-icon--list {
	background-color: var(--cll-badge-color);
	display: none;
}

.owner-icon-txt {
	--icon-txt: 44px;

	background-color: var(--cll-badge-color);
	border-radius: 6px;
	color: #fff;
	display: inline-block;
	height: var(--icon-txt);
	line-height: var(--icon-txt);
	text-align: center;
	width: var(--icon-txt);
}

.overview-tile-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin-block: .1875rem;
	overflow: hidden;
	padding-inline-end: 2rem;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.expand-icon {
	font-size: 12px;
	inset-block-start: 50%;
	inset-inline-end: 0;
	position: absolute;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transform-origin: top;
	-webkit-transition: .3s ease-in;
	transition: .3s ease-in;
}

.is-expanded .expand-icon {
	-webkit-transform: rotate(180deg) translateY(-50%);
	transform: rotate(180deg) translateY(-50%);
}

.overview-tile-info {
	padding-block: 3rem .75rem;
	padding-inline: .75rem;
	position: relative;
	-webkit-tap-highlight-color: transparent;

	&:has(.overview-tile-expand) {
		cursor: pointer;
	}

	& > * {
		user-select: none;
	}
}

.overview-tile-typeTitle {
	align-items: center;
	column-gap: .375rem;
	display: flex;
}

.overview-tile-expand {
	transform: scaleY(0);
	transform-origin: bottom;
	transition: all .3s ease-in;
	width: 100%;
}

.overview-tile-datesWrap {
	align-items: center;
	display: flex;
	margin-block: .75rem;
	opacity: .75;
}

.overview-tile-dateWrap {
	align-items: center;
	display: flex;
	flex-grow: 1;
	flex-shrink: 0;
	font-size: .85rem;
	gap: .375rem;
}

.overview-tile-dateLabel,
.overview-date-label {
	font-weight: 700;
}

.overview-tile-dateWrap--edited {
	 justify-content: end;
 }

.overview-item-dataWrap--details,
.overview-tile-detailsWrap {
	align-items: center;
	display: flex;
	gap: .75rem;
	justify-content: space-between;
	opacity: .75;

	span {
		font-weight: 700;
	}
}

.results-view--list .overview-item-dataWrap--details {
	opacity: .75;
}

.overview-detail-wrap {
	align-items: center;
	column-gap: .375rem;
	display: flex;
	font-size: .9rem;
	white-space: nowrap;
}

.overview-tile-fileSizeWrap {
	text-align: end;
}

/* close icon */
.media-type--overviewGrid.is-empty::after,
.media-type--overviewList.is-empty::after {
	content: '\e925';
}

/* image icon */
.icon-btn--preview::before {
    content: '\e932';
}

.icon-btn--preview::before {
	position: relative;
	top: 1px;
}

.media-type--overviewList {
	height: 25px;
	width: 25px;
	margin-left: 0;
	border-radius: 50%;
	border: 1px solid var(--cll-dark-grey);
	display: inline-flex;
}

.media-type--overviewList::after {
	font-size: .8rem;
	line-height: 1;
}

.iPanel-content {
	flex-grow: 1;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.iPanel-content--preview {
	padding: 0;
}

.iPanel-members span,
.owner-icon--preview {
	background-color: var(--cll-icon-color);
	border-color: var(--cll-icon-color);
	top: 0;
	margin: 0;
	border: 0;
	width: 28px;
	height: 28px;
}

.owner-icon.owner-icon--preview {
	border-color: #201f1f;
}

.owner-icon--list.is-empty::before {
	line-height: 30px;
}

.owner-icon--list {
	border: 0;
	position: static;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	margin-block: 0 .5rem;
	margin-inline: 0 auto;
	width: 28px;
	height: 28px;
	font-size: .75rem;
}

.iPanel-members {
	margin-bottom: 1.5rem;
	gap: 1rem;
}

.c-empty-collection {
	flex-direction: column;
	grid-column: 1 / -1;
	position: relative;
	width: 100%;
}

.c-panel--noResults .results-view {
	width: 100%;
}

.c-empty-title {
	margin-bottom: 0;
	font-size: 1rem;
}

.c-panel--empty .results-view,
.c-panel--error .results-view {
	display: block;
	margin: auto;
	padding: .375rem 0 0 0;
}

.c-panel--empty .results-view-options .btn--searchView,
.c-panel--empty .c-search-control {
	opacity: .5;
	pointer-events: none;
}

.c-panel--empty .c-search-bar::before {
	opacity: .5;
}

.c-panel--noResults .c-search-bar::before {
	opacity: 1;
}

.c-panel--empty .c-search-input {
	pointer-events: none;
}

.c-panel--noResults .c-search-input {
	pointer-events: all;
}

.c-panel--noResults .c-search-control {
	display: block;
	opacity: 1;
	pointer-events: all;
}

.c-empty-content {
	text-align: center;
}

.overview-item-imgWrap {
	display: none;
}

.list-item-imgWrap {
	display: none;
}

.overview-item-img,
.list-item-img {
	object-fit: contain;
	max-width: 100%;
}

.overview-tile-item,
.list-item {
	background-color: var(--cll-medium-grey);
	margin-bottom: 1.5rem;
	padding: 1rem;
	border-radius: 4px;
}

.overview-tile-item {
	display: grid;
	row-gap: .375rem;
	grid-template-columns: 1fr .75rem max-content 32px;
	grid-template-rows: repeat(2, 1fr);
}

.overview-item-info {
	display: contents;
}

.overview-tile-item,
.overview-tile-item--desc {
	position: relative;
}

.list-item {
	display: grid;
	cursor: pointer;
	/* column order: media icon (min-content) | duration (min-content min-content) | title (auto) | actions (min-content) */
	grid-template-columns: min-content min-content auto min-content;
	grid-template-rows: min-content min-content;
	position: relative;
}

.overview-item-dataWrap--numItems .overview-item-data--lbl {
	white-space: nowrap;
}

.overview-item-dataWrap--numItems .overview-item-data--lbl::after {
	content: '';
}

.overview-item-data--lbl::after {
	content: ':';
	position: absolute;
	inset-inline-end: -5px;
}

.overview-item-dataWrap {
	overflow: hidden;
}

.overview-item-dataWrap--date {
	display: flex;
	gap: 1.5rem;
	grid-area: 2 / 1 / -1 / 4;

	.overview-detail-wrap:last-child {
		display: none;
	}
}

.results-view--list .overview-item-dataWrap--date {
	opacity: .75;
}

.overview-item-dataWrap--details {
	display: none;
}

.overview-item-dataWrap:last-child {
	margin-bottom: 0;
}

.overview-item-data,
.overview-item-title {
	margin-bottom: 0;
	display: inline;
}

.overview-item-title {
	font-size: 1.1rem;
	font-weight: 700;
}

.overview-item-title,
.overview-item-data--desc {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.overview-item-data {
	overflow: hidden;
	text-overflow: ellipsis;
}

.overview-item-data--date {
	font-size: .9rem;
	font-weight: 700;
}

.overview-item-data--desc {
	display: none;
}

.overview-item-data--lbl {
	margin-inline-end: .75rem;
	font-weight: bold;
	position: relative;
	overflow: visible;
}

.overview-item-dataWrap--desc {
	max-height: 60px;
	overflow: hidden;
	position: relative;
}

.preview-creatorWrap {
	padding: .75rem .75rem 0 .75rem;
}

.preview-video,
.iPanel--preview {
    background-image: linear-gradient(180deg, rgba(28,28,28,1) 0%, rgba(13,13,13,1) 100%);
}

.preview-imgWrap {
    top: 0;
    position: relative;
    height: 260px;
}

.preview-mediaWrap {
	background-color: #201f1f;
}

.preview-mediaWrap,
.preview-video .iwp-display-pane,
.preview-video .iwp-controls {
	-webkit-animation: cFadeInFrom0 1s ease-in;
	-moz-animation: cFadeInFrom0 1s ease-in;
	animation: cFadeInFrom0 1s ease-in;
}

.preview-video:empty {
	height: 258px;
}

.preview-video {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.preview-video .iwp-video-player {
	max-height: 300px;
}

.iwp-fullscreen-mode .iwp-waveform--album-art {
	height: 100%;
	width: 100%;
	text-align: center;
}

.preview-actions {
    z-index: 1;
    width: 100%;
    position: absolute;
	top: .375rem;
	padding-right: .5rem;
}

.media-type--resultsGrid,
.media-type--resultsList {
	font-size: 0;
}

.isClip .media-type--resultsGrid.media-type {
	column-gap: .1875rem;
}

.preview-btn {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fbfbfb;
    border-radius: 50%;
	border: 1px solid #ddd;
    margin: .5rem;
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    font-size: .8rem;
	cursor: pointer;
	text-decoration: none;
}

.preview-actions .icon-view,
.preview-actions .icon-view::after {
	height: 32px;
	width: 32px;
}

.preview-actions .icon-view {
	background-color: rgba(0, 0, 0, 0.7);
	font-size: 10px;
}

.preview-actions .icon-view::after {
	box-shadow: none;
}

.preview-btn.is-disabled {
	opacity: .5;
}

.preview-btn.is-disabled:hover {
	color: #fbfbfb;
	border: 1px solid #ddd;
}

.preview-btn:hover {
	color: #fff;
	border: 1px solid #fff;
}

.preview-summaryWrap {
    padding: .5rem 1rem 1.5rem;
    color: #fbfbfb;
    overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.preview-summaryField {
	padding: .75rem 0;
	border-bottom: 1px solid #454545;
}

.preview-summaryTitle {
	font-size: .9rem;
	margin: 0 0 .375rem;
}

.preview-summaryValue {
	margin: 0 0 1rem 0;
	padding: 0 0 .75rem;
	border-bottom: 1px solid #454545;
}

.preview-creator {
	margin-inline-start: .75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.preview-fieldContents {
    margin-bottom: 1rem;
}

.preview-contextMenu {
    color: #fff;
    margin: .5rem;
    cursor: pointer;
}

.isClip .media-type.preview-type::before,
.media-type.preview-type::after {
	color: #fff;
	font-size: 1rem;
}

.results-tile.no-date .results-tile-date::before,
.list-item.no-date .list-item-date::before {
	display: none;
}

.multiSelect-isOpen .cNav-isActive .results-view {
	opacity: 0;
	-webkit-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
}

.multiSelect-isOpen .cNav-isClosed .results-view {
	opacity: 1;
	-webkit-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
}

.overview__aclBtn {
	inset-block-start: .375rem;
	inset-inline-start: .75rem;
	margin: 0 auto;

	i {
		margin-inline-end: .375rem;
	}

	i,
	span {
		pointer-events: none;
	}

	.acl_update_link {
		background-color: var(--cll-badge-color);
		border: 0;
		border-radius: 4px;
		color: #fff;
		padding: .375rem .75rem;
	}

	&.is-disabled {
		align-items: center;
		border: 0;
		border-radius: 4px;
		padding: .375rem .75rem;
	}
}

.c-collections--results .acl_update .btn--mini {
	font-family: inherit;
}

.c-share-btn-txt::before,
.c-actions .acl_update_link_text::after {
	content: "";
	display: inline-block;
	height: 13px;
	vertical-align: middle;
}

.results-view--list .overview__aclBtn--list {
	grid-area: 1 / 3 / 2 / 4;
	inset-block-start: 0;
	inset-inline: 0;
	justify-self: end;
	margin: 0;
	position: relative;
	white-space: nowrap;
}

.searchHit-item-handle {
	display: none;
}

.results-tile-imgWrap,
.list-item-imgWrap {
	position: relative;
}

.c-clipDuration {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: .85rem;
	color: #fff;
	margin: 0;
}

.list-item-imgWrap .c-clipDuration--list {
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	border-radius: 0 0 4px 4px;
}

.c-clipDuration--grid {
	left: .5rem;
	bottom: .85em;
	padding: .25rem;
}

.c-clipDuration-compact {
	position: static;
	background-color: transparent;
	color: inherit;
	grid-area: 2 / 1 / 3 / 3;
	margin: 0;
	margin-block-start: .575rem;
	margin-inline-end: 1rem;
	font-size: .85rem;
}

.c-clipDuration-compact::before {
	content: '\e99f';
	margin-inline-end: .1875rem;
	color: var(--cll-icon-color);
}

.iPanel-active .results-view .list-item.is-active::before,
.iPanel-active .results-view .results-tile.is-active::before {
	color: var(--cll-primary-accent-color);
	-webkit-transition: box-shadow .3s ease-in, background-color, .3s ease-in;
	transition: box-shadow, .3s ease-in, background-color, .3s ease-in;
	background-color: rgba(0, 0 , 0, .7);
}

.c-context-menu.IWmenu_link {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: var(--cll-primary-accent-color);
	border-color: var(--cll-primary-accent-color);
	color: #fff;
	border: 0;
	position: relative;
	order: 1;
}

/* Need to remove this when Sylvia fixes this to not show on collection overview after navigation */
.c-actions > .acl_update:first-child,
.c-actions .acl_button:empty {
	display: none;
}

.c-collections--overview .c-actions {
	display: none;
}

/* Positioned to vertically align with context menu */
.c-collections--results .acl_update,
.c-share {
	inset-block-start: 0;
	position: relative;
}

/* hack to kick start animation again*/
@-webkit-keyframes cFadeIn {

	0% {
		opacity: .2;
	}

	100% {
		opacity: 1;
	}
}

@keyframes cFadeIn {

	0% {
		opacity: .2;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes cFadeInFrom0 {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes cFadeInFrom0 {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* TEMPORARY: Hide non-day 1 features */
.c-collections--results .c-search-control {
	display: none;
}

/* landscape smartphones, iPhone480px */
@media all and (min-width:30em) {

	.c-empty-txt {
		font-size: 1.2rem;
	}

	.c-empty-title {
		font-size: 1.8rem;
	}

	.c-collections--overview .c-header {
        grid-area: 2 / 1 / 3 / 3;
		margin-block-start: 0;
    }

	.overview-tile-item {
		row-gap: .75rem;
	}

	.overview-item-dataWrap--details {
		display: flex;
		grid-area: 2 / 1 / -1 / -1;
		justify-content: end;
		justify-self: end;
		width: 85%;
	}

	.overview-item-dataWrap--title {
		grid-area: 1 / 1 / 2 / 2;
	}
}

/* portrait e-readers (Nook/Kindle), smaller tablets 600px or 640px wide. */
@media all and (min-width:36.063em) {

	.c-search-input {
		font-size: 1rem;
	}
}

/* Galaxy S5 */
@media all and (min-width:37.5em) {

	/* should be enough space for nav items without scroll now */
	.cNav-isActive.c-collections {
		overflow: hidden;
	}

	.overview-item-dataWrap,
	.media-type--overviewList {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.overview-item-dataWrap--numItems {
		margin-inline-end: 0;
	}
	
	.overview-item-dataWrap--title {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.overview-tile-item {
		padding-bottom: 1rem;
	}

	.overview-item-dataWrap--desc {
		width: 100%;
		margin: 0;
		display: block;
	}

	.overview-item-dataWrap--desc:last-child {
		margin-bottom: 0;
	}

	.results-tile {
		width: calc(50% - 1.5rem);
	}
}

/*landscape e-readers, landscape 800x480 or 854x480 phones */
@media all and (min-width:44.063em) {

	.overview-tile-item .IWmenu_link--row {
		inset-block-start: 22px;
	}

	.overview-item-dataWrap {
		margin-block-end: 0;
		margin-inline-end: 0;
	}

	.list-item-imgWrap {
		margin-bottom: 0;
	}

	.list-item {
		display: grid;
		grid-template-columns: 35px calc(85px + 1.5rem) auto 40px min-content;
		grid-template-rows: 1fr min-content;
		margin-bottom: 1rem;
	}

	.list-item-date {
		grid-area: 2 / 3 / -1 / 4;
		margin: 0;
	}

	.media-type--resultsList {
		grid-area: 1 / 4 / -1 / 5;
		margin: auto;
		position: relative;
	}

	.isClip .media-type--resultsList::before {
		position: absolute;
		inset-inline-end: 21px;
	}

	.list-item-title {
		grid-area: 1 / 3 / 2 / 4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: auto 0;
	}

	.iPanel-active .list-item-title {
		grid-area: 1 / 1 / 2 / 2;
	}

	.iPanel-active .list-item-date {
		grid-area: 2 / 1 / -1 / 4;
		margin-block-start: .375rem;
	}

	.iPanel-active .media-type--resultsList {
		grid-area: 1 / 2 / -1 / 3;
	}

	.iPanel-active .list-item-actions {
		grid-area: 1 / 3 / -1 / 4;
	}

	/* extra space for absolutely positioned scissors */
	.isClip .list-item-title {
		padding-inline-end: 30px;
	}

	.list-item-actions {
		position: static;
		grid-area: 1 / 5 / -1 / 6;
		column-gap: .375rem;
	}

	.list-item-actions .u-tag-tile,
	.list-item .IWmenu_link--row {
		position: static;
	}

	.owner-icon--list {
		grid-area: 1 / 2 / 2 / -1;
	}

	.overview-item-dataWrap--numItems {
		grid-area: 4 / 2 / 5 / 3;
	}

	.overview-item-info {
		display: contents;
	}

	.searchHit-item-handle {
		align-self: center;
		cursor: grab;
		display: block;
		grid-area: 1 / 1 / -1 / 2;
	}

	.list-item-imgWrap {
		grid-area: 1 / 2 / -1 / 3;
		max-width: 85px;
		width: 100%;
		height: 50px;
		min-height: inherit;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.list-item-img {
		object-fit: cover;
		width: 85px;
		border-radius: 4px;
	}

	.overview-item-dataWrap--desc {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.overview-tile-item {
		padding-bottom: 1rem;
	}

	.owner-icon--list {
		margin: 0;
	}

	.iPanel-active .results-tile {
		width: calc(100% - 1.5rem);
	}

	.c-clipDuration-compact {
		display: none;
	}

	.cNav-isActive .c-search-input,
	.cNav-isActive .results-view-options,
	.cNav-isActive .c-search-bar::before {
		visibility: hidden;
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .c-header,
	.c-collections--results:has(.c-share ~ .acl_button) .c-header {
		grid-area: 2 / 1 / 3 / 2;
		margin-block-start: .5rem;
	}

	.c-collections--results .c-header {
		margin: .5rem 0 1.5rem 0;
	}

	.c-actions {
		margin-block-start: .5rem;
	}

	.overview-tile-item .IWmenu_link--row {
		inset-block-start: 17px;
	}
}

/*  portrait iPad 768px */
@media all and (min-width:48em) {

	#mycollections-index {
		overflow: hidden;
	}

	#mycollections-index .results-view-options .btn--searchView {
		top: 1px;
		position: relative;
		cursor: pointer;
	}

	#mycollections-index .results-view-options .btn--searchView.active {
		cursor: default;
	}

	.c-panel--error .results-view {
		padding: 0;
	}

	.iPanel-active .results-view {
		visibility: visible;
	}

	.c-empty-collection::before {
		font-size: 50px;
		height: 120px;
		width: 120px;
	}

	.c-panel--noResults .c-empty-collection::before {
		font-size: 120px;
	}

	.c-empty-txt {
		font-size: 1.5rem;
	}

	.c-empty-title {
		font-size: 2rem;
	}

	.c-empty-content {
		text-align: left;
	}

	.iPanel-active .c-empty-content {
		text-align: center;
	}

    .c-search-control,
	.c-collections--overview .iPanel-active .c-search-control,
	.c-collections--overview .iPanel-active::after,
	.c-panel--noResults .c-search-control {
        display: none;
    }

    .c-search-input {
		-webkit-transform: none;
		transform: none;
        margin-inline-start: 50px;
        background: transparent;
        border: 0;
    }

	.c-collections--results .c-search-input {
		width: calc(100% - 67px);
		left: -20px;
		margin-left: 0;
		/* Temporary until we can search in collection results */
		pointer-events: none;
		visibility: hidden;
	}

    .c-collections--overview .c-search-input {
        margin-inline-end: 76px;
    }

    .cSearch-isActive .c-search-bar::before,
    .c-search-bar::before {
        content: '\e94b';
        position: absolute;
        font-family: 'imagenweb';
        pointer-events: none;
        inset-inline-start: 60px;
        top: 8px;
        font-size: 1.3rem;
    }

	/* Temporary until we can search in collection results */
	.c-collections--results .c-search-bar::before {
		opacity: .5;
		pointer-events: none;
		visibility: hidden;
	}

	.c-header,
	.iPanel-active .c-context-menu.IWmenu_link,
	.c-collections--results .acl_update {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.c-header {
		align-items: center;
	}

	.c-collections--results .acl_update {
		align-items: flex-start;
	}

	.iPanel-active .results-view-options {
		border: 0;
		box-shadow: var(--cll-default-box-shadow);
		grid-area: 1 / 1 / 2 / 3;
		background-color: var(--cll-lightest-grey);
	}

	#mycollections-index .iPanel-active .results-view-options .btn:nth-child(2) {
		border-inline-end: 1px solid var(--cll-border-color);
		padding-inline-end: 1rem;
	}

	.c-collections--results .c-search-bar {
		grid-area: 1 / 1 / 2 / 4;
	}

	.c-collections--results .iPanel-active .c-search-bar {
		grid-area: 1 / 1 / 2 / 3;
	}

	.c-collections--results.cNav-isActive .c-search-bar {
		grid-area: 1 / 1 / 2 / 5;
		padding: 0;
	}

	.init-load  .c-search-bar {
		grid-area: 1 / 1 / 2 / 5;
	}

	.init-load .c-header {
		grid-area: 2 / 1 / 3 / 5;
	}

    .c-header {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
    }

	.c-collections--results .c-header {
		grid-area: 2 / 1 / 3 / 2;
	}

	.iPanel-active .c-header {
		width: 100%;
		padding-inline-end: 0;
		grid-area: 3 / 1 / 4 / 2;
	}

	/* If we only have a context menu, align it with the header.  Add padding so the title doesn't overlap the icon */
	.c-collections--results:has(.iwMenu_collectionCtx:only-child) .iPanel-active .c-header {
		grid-area: 2 / 1 / 4 / 2;
		padding-inline-end: 50px;
	}

	.c-collections--overview .c-header {
		grid-area: 2 / 1 / 3 / 3;
		padding-right: 1rem;
		margin-bottom: .75rem;
	}

	.c-actions {
		grid-area: 2 / 2 / 3 / 4;
		margin-block-end: 1.5rem;
	}

	.iPanel-active 	.c-actions {
		-webkit-animation: cFadeIn .5s ease-in;
		-moz-animation: cFadeIn .5s ease-in;
		animation: cFadeIn .5s ease-in;
		grid-area: 2 / 1 / 3 / 2;
	}

	.iPanel-active .results-view {
		grid-area: 4 / 1 / 5 / 2;
	}

	.c-share {
		align-items: flex-start;
		display: flex;
	}

    .icon-btn {
        margin-bottom: 1.5rem;
		margin-inline-start: 0;
    }

	.iPanel-controls .icon-btn {
		padding-inline: 0;
		border-inline-end: 0;
	}

	/* setting non standard box shadow as I need to remove left side of box shadow in this particular view*/
    .iPanel-active .iPanel-controls {
		background-color: var(--cll-lightest-grey);
		border: 0;
		box-shadow: 2px 3px 4px rgba(0, 0, 0,.16);
		flex-direction: row;
		gap: 0;
		grid-area: 1 / 3 / 2 / 4;
		height: 45px;
		justify-content: flex-end;
		padding-block-start: 0;
    }

	.rtl .iPanel-active .iPanel-controls {
		box-shadow: none;
	}

	.iPanel-active .icon-css--close {
		border: 0;
		border-inline-start: 1px solid var(--cll-border-color);
		order: inherit;
		height: 100%;
	}

	.iPanel-active .icon-css--close::before {
		top: 11px;
	}

	.iPanel-active .icon-btn {
		margin-bottom: 0;
		-webkit-animation: cFadeInFrom0 1s ease-in;
		-moz-animation: cFadeInFrom0 1s ease-in;
		animation: cFadeInFrom0 1s ease-in;
		visibility: visible;
		height: 100%;
		padding-inline: 1rem;
		border-inline-start: 1px solid var(--cll-border-color);
	}

	.iPanel-active {
		border-top: 1px solid var(--cll-border-color);
	}

	.c-collections--overview .iPanel-active {
		border-top: 0;
	}

    .results-view--list {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
    }

	.iPanel-active .icon-btn--preview,
	.icon-btn--preview,
    .iPanel-active .icon-css--close::before,
    .cSearch-isActive .icon-btn--iPanel,
    .cSearch-isActive .c-context-menu.IWmenu_link {
        display: block;
    }

	.results-view-options .btn--searchView,
	.list-item .IWmenu_link--row {
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
    }

    .c-collections--overview .c-search-bar {
        padding-inline-end: 0;
    }

	.c-collections {
		display: grid;
		grid-template-columns: min-content auto;
	}

	.c-collections--public {
		display: block;
	}

	/* 1fr =  title | min-content = results view buttons | min-content = actions | 50px = iPanel controls */
	.c-collections--results .c-panel {
		grid-template-columns: 1fr min-content min-content 50px;
		grid-template-rows: min-content min-content min-content auto;
	}

	.c-collections--results .c-panel.iPanel-active {
		grid-template-columns: auto min-content min-content;
		grid-template-rows: min-content min-content min-content auto;
	}

	.c-collections--results .c-panel--error {
		grid-template-columns: auto 76px min-content 0;
	}

	.c-collections--results .results-view-options,
	.iPanel,
	.iPanel-active .iPanel {
		-webkit-transition: -webkit-transform .3s ease-in;
		transition: -webkit-transform .3s ease-in;
		transition: transform .3s ease-in;
	}

	.iPanel {
		-webkit-transform: translateX(435px);
		transform: translateX(435px);
		/*background-color: #fff;*/
		width: 435px;
		box-shadow: var(--cll-default-box-shadow);
		top: 47px;
	}

	.iPanel-active .iPanel {
		grid-area: 1 / 2 / 6 / 4;
		position: relative;
	}

	.rtl .iPanel {
		-webkit-transform: translateX(-435px);
		transform: translateX(-435px);
	}

	.rtl .iPanel-active .iPanel {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	/* hide bottom box shadow */
	.iPanel::before {
		content: '';
		position: absolute;
		bottom: -6px;
		left: 0;
		right: 0;
		height: 6px;
		background-color: #fff;
	}

	.init-load .results-view-options,
	.iPanel--preview::before {
		display: none;
	}

	.iPanel-controls {
		grid-area: 1 / 4 / 6 / 5;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: .575rem 0 0 0;
		z-index: 2;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: column;
		border-inline-start: 1px solid var(--cll-border-color);
		border-top: 1px solid var(--cll-border-color);
		background-color: #fff;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		position: static;
		margin: 0;
		width: 50px;
		margin-block-end: 0;
	}

	.rtl .iPanel-controls {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.cNav-isActive .iPanel-controls {
		visibility: hidden;
	}

	.c-collections--results .c-panel--error .results-view,
	.c-collections--results .iPanel-active .results-view,
	.c-collections--results.cNav-isActive .c-panel--error .results-view {
		width: 100%;
	}

	.rtl .c-search-input {
		-webkit-transform: none;
		transform: none;
	}

	.iwTBar--isClosed .c-nav-item.is-active::after {
		inset-inline-start: 0;
	}

	.iPanel-active .results-view--list .list-item {
		grid-template-columns: auto 40px min-content;
	}

	.iPanel-active .list-item-imgWrap,
	.iPanel-active .searchHit-item-handle {
		display: none;
	}

	.c-collections--results:has(.c-share ~ .acl_button) .iPanel-active .c-header {
		grid-area: 3 / 1 / 4 / 2;
		padding-inline-end: 1.5rem;
		margin-block-start: 0;
	}

	.c-collections--results:has(.c-share ~ .acl_button) .iPanel-active .c-actions {
		margin-block-end: .75rem;
		padding-inline-end: 1.5rem;
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .iPanel-active .c-header {
		grid-area: 3 / 1 / 4 / 2;
		padding-inline-end: 1.5rem;
		margin-block-start: .75rem;
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .iPanel-active .c-actions {
		margin-block-end: 0;
	}

	.overview-tile-item {
		grid-template-columns: 85px 1.5rem 1fr .75rem max-content 32px;
	}

	.results-view--list .overview__aclBtn--list {
		grid-area: 1 / 5 / 2 / 6;
	}

	.overview-item-imgWrap {
		border-radius: 4px;
		display:  block;
		grid-area: 1 / 1 / -1 / 2;
		margin-bottom: 0;
		aspect-ratio: 16 / 9;
		height: 100%;
		width: 85px;
	}

	.overview-item-dataWrap--title {
		grid-area: 1 / 3 / 2 / 4;
	}

	.overview-item-img {
		border-radius: 4px;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.overview-item-dataWrap--date {
		grid-area: 2 / 3 / -1 / 4;

		.overview-detail-wrap:last-child {
			display: flex;
		}
	}

	.overview-item-dataWrap--details {
		grid-area: 2 / 3 / -1 / -1;
	}
}

/* tablet, landscape iPad, lo-res laptops and desktops */
@media (min-width:56.25em) {

	.iPanel {
		-webkit-transform: translateX(500px);
		transform: translateX(500px);
		width: 500px;
	}

	.rtl .iPanel {
		-webkit-transform: translateX(-500px);
		transform: translateX(-500px);
	}

	.results-tile {
		width: calc(33.333% - 1.5rem);
	}

	.iPanel-active .results-tile {
		width: calc(100% - 1.5rem);
	}
}

/* big landscape tablets, laptops, and desktops */
@media (min-width:68.75em) {

	#mycollections-index .iPanel-active .results-view-options .btn:nth-child(2) {
		border-inline-end: 0;
	}

	.icon-btn--preview::before {
		position: static;
	}

	.iPanel-active .icon-css--close::before {
		position: absolute;
	}

	.iPanel-active .icon-btn {
		border-inline-start: 0;
	}

	.iPanel-active .iPanel-controls .icon-btn {
		height: auto;
	}

	.c-panel--empty .results-view {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.iPanel-active .iPanel {
		grid-area: 1 / 3 / 6 / 4;
	}

	.iPanel-active .c-actions {
		grid-area: 2 / 2 / 3 / 3;
	}

	.iPanel-active .c-header {
		grid-area: 2 / 1 / 3 / 2;
	}

	.iPanel-active .results-view {
		grid-area: 4 / 1 / 5 / 3;
	}

	.c-collections--results.cNav-isActive .c-search-bar {
		grid-area: 1 / 1 / 2 / 3;
	}

	.c-collections--results.cNav-isActive .iPanel-active .c-search-bar {
		grid-area: 1 / 1 / 2 / 3;
	}

	.c-actions {
		height: 29px;
		margin-block-end: 0;
	}

	.iPanel-active .c-actions {
		margin-block: 0 1rem;
	}

	.c-collections--results .c-panel.iPanel-active {
		grid-template-columns: 1fr min-content min-content 50px;
	}

	.iPanel-active .iPanel {
		overflow: inherit;
	}

	.iPanel-active .iPanel-content {
		overflow: auto;
		min-height: inherit;
		height: 100%;
		position: relative;
	}

	.c-nav-item:first-child {
		margin-top: 1rem;
	}

	.cNav-isClosed .c-nav-control-title,
	.cNav-isClosed .c-nav-item span {
		position: absolute;
	}

	#mycollections-index .results-view-options .btn--searchView {
		top: 0;
	}

	.c-collections {
		background-image: linear-gradient(192deg, rgba(235,235,235,1) 0%, rgba(235,235,235,0) 60%);
	}

	.overview-item-imgWrap,
	.list-item-imgWrap {
		background-color: transparent;
	}

	.overview-item-data--lbl {
		font-size: .9rem;
	}

	.media-type--overviewList {
		margin: auto;
	}

	.iPanel-active .c-header {
		margin-top: 0;
	}

	.c-empty-content {
		margin-inline-start: 1.5rem;
	}

	.overview-item-dataWrap {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		margin-bottom: 0;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
	}

	.overview-item-imgWrap {
		max-width: 85px;
		width: 100%;
		height: 50px;
		min-height: inherit;
		padding: 0;
	}

	.overview-item-img {
		object-fit: cover;
		width: 85px;
		border-radius: 4px;
	}

	.overview-tile-item {
		column-gap: .75rem;
		grid-template-columns: 85px 2fr max-content minmax(240px, min-content) minmax(85px, min-content) 25px;
		grid-template-rows: 1fr;
	}

	.overview-item-dataWrap--title {
		grid-area: 1 / 2 / 2 / 3;
	}

	.overview-tile-item .IWmenu_link--row {
		grid-area: 1 / 6 / -1 / -1;
		position: static;
		margin: auto;
	}

	.overview-item-data--desc {
		display: -webkit-box;
		font-size: 12px;
	}

	.overview-item-dataWrap--date {
		grid-area: 1 / 3 / 2 / 4;

		.overview-detail-wrap:last-child {
			display: none;
		}
	}

	.overview-item-dataWrap--date,
	.overview-item-dataWrap--details {
		width: 100%;
	}

	.overview-item-dataWrap--details {
		grid-area: 1 / 4 / -1 / 5;
		justify-content: start;
	}

	.overview-item-dataWrap--numItems {
		grid-area: 1 / 4 / -1 / 5;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.owner-icon--list {
		grid-area: 1 / 6 / 1 / 7;
		margin: auto 0;
		-ms-grid-column-align: center;
		justify-self: center
	}

	.overview-item-data--lbl {
		margin-inline-end: 0;
	}

	.c-empty-collection {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		/* height minus the ghost icon to make properly align vertically */
		height: calc(100% - 120px);
	}

	.c-panel--empty .results-view,
	.overview-item-dataWrap:not(.overview-item-dataWrap--details),
	.iPanel-active .c-empty-collection {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.iPanel-active .c-empty-title {
		font-size: 1.5rem;
	}

	.iPanel-active .c-empty-txt {
		font-size: 1.2rem;
	}

	.iPanel-active .c-empty-content {
		text-align: center;
	}

    .cNav-isActive .c-search-bar::before,
	.cNav-isActive .icon-btn {
        visibility: visible;
    }

	/* Temporary until we can search in collection results */
	.c-collections--results.cNav-isActive .c-search-bar::before {
		visibility: hidden;
	}

    /*.cNav-isActive .results-view-options .btn--searchView,*/
    .cNav-isActive .c-context-menu.IWmenu_link,
	.cNav-isActive .iPanel-controls,
	.cNav-isActive .results-view-options,
	.cNav-isActive .c-context-menu.IWmenu_link {
        pointer-events: all;
        visibility: visible;
    }

	.init-load .cNav-isActive .results-view-options {
		visibility: hidden;
	}

	.c-panel--empty .results-view,
	.iPanel-active .c-context-menu.IWmenu_link,
	.c-nav-control,
	.c-nav-item,
	.iPanel-active .c-search-bar {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

    .iPanel-active .icon-css--close::after {
        display: block;
    }

    .iPanel-active .icon-css--close::before {
        content: '';
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
    }

	.c-collections--results .results-view-options {
		grid-area: 1 / 3 / 2 / 4;
		margin-inline-start: auto;
	}

	.c-collections .results-view-options {
		background-color: var(--cll-lightest-grey);
	}

	.iPanel-active .results-view-options {
		-webkit-transform: translateX(-500px);
		transform: translateX(-500px);
		box-shadow: none;
		border-bottom: 1px solid var(--cll-border-color);
		border-top: 1px solid var(--cll-border-color);
		border-inline-start: 1px solid var(--cll-border-color);
		padding-inline-end: 0;
	}

	.rtl .iPanel-active .results-view-options {
		-webkit-transform: translateX(500px);
		transform: translateX(500px);
	}

	.cNav-isActive .icon-css--chevrons::after,
	.cNav-isActive .icon-css--chevrons::before {
        border-right: 0;
        border-top: 0;
        border-left: 2px solid var(--cll-icon-color);
        border-bottom: 2px solid var(--cll-icon-color);
		right: 4px;
    }

	.rtl .icon-css--chevrons::after,
	.rtl .icon-css--chevrons::before {
		top: 8px;
		right: 6px;
	}

	.rtl .icon-css--chevrons::before {
		right: 11px;
	}

	.icon-css--chevrons::after,
	.icon-css--chevrons::before {
        border-left: 0;
        border-bottom: 0;
        border-right: 2px solid var(--cll-icon-color);
        border-top: 2px solid var(--cll-icon-color);
		top: 8px;
    }

	.cNav-isActive .icon-css--chevrons::after {
		right: 9px;
	}

	.rtl .cNav-isActive .icon-css--chevrons::after {
		right: 4px;
	}

	.rtl .cNav-isActive .icon-css--chevrons {
		-webkit-transform: scale(1.2) rotate(0);
		transform: scale(1.2) rotate(0);
	}

	.rtl .cNav-isActive .icon-css--chevrons::before {
		right: 9px;
	}

	.icon-css--chevrons::before {
        right: 6px;
    }

	.icon-css--chevrons::after {
        right: 11px;
    }

    .c-search-bar {
        padding-inline-end: 0;
        position: relative;
        grid-area: 1 / 1 / 2 / 2;
        height: 45px;
        background:  var(--cll-lightest-grey);
        border-top: 1px solid var(--cll-border-color);
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		margin-bottom: 1rem;
    }

	.c-collections--results .c-search-bar {
		padding-inline-end: 0;
	}

	.iPanel-active .c-search-bar {
		visibility: visible;
	}

	/* width is applied when nav and infoPanel are closed */
	.c-collections--results  .c-search-bar {
		grid-area: 1 / 1 / 2 / 3;
	}

	/* when nav is closed and infoPanel is active -  width should be 100%+106px but we need to extend that by 500px
	to stop a gap from appearing when we transition the infoPanel (nav transition doesn't cause a gap in this state) */
	.c-collections--results .iPanel-active .c-search-bar {
		width: calc(100% + 606px);
	}

	/* we don't want the search input to extend as long as the search bar */
	.c-collections--results .iPanel-active .c-search-input {
		width: calc(100% - 500px);
	}

	/* when nav and infoPanel are active -  width should be 100% but we need to extend that by 500px (infoPanel width)
	to stop a gap from appearing when we open the infoPanel (nav transition doesn't cause a gap in this state)*/
	.c-collections--results.cNav-isActive .iPanel-active  .c-search-bar {
		width: calc(100% + 500px);
	}

	/* when nav and infoPanel are active -  width should be 100% so reduce input width by the amount the search bar was extended */
	.c-collections--results.cNav-isActive .iPanel-active  .c-search-input,
	.c-collections--results.cNav-isActive .c-panel--error .c-search-bar {
		width: calc(100% + 500px);
	}

	/* we have extended the search bar to solve gaps appearing on nav open transition but we don't want the search input
		to extend too*/
	.c-collections--results.cNav-isActive .c-search-input {
		width: calc(100% - 250px);
	}

	.c-collections--results .c-search-input {
		left: 0;
		width: 100%;
	}

    .cSearch-isActive .c-search-bar::before,
    .c-search-bar::before {
        inset-inline-start: 11px;
    }

	/* padding in px due to */
    .c-nav-control {
        position: relative;
        grid-area: 1 / 1 / 2 / 2;
        height: 60px;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		z-index: 1;
		padding: 0 14px;
    }

    .c-collections--overview  .c-panel {
        grid-template-columns: auto 76px;
		grid-template-rows: min-content min-content auto
    }

	.c-collections--overview .results-view-options {
		grid-area: 1 / 2 / 2 / 3;
	}

	.c-collections--overview .results-view {
		grid-area: 3 / 1 / 4 / 3;
	}

	.iPanel-active {
		border-top: 0;
	}

	/* z-index needed to make transition look better */
    .iPanel {
		top: 0;
		z-index: 1;
    }

	.iPanel-active .results-view,
	.iPanel-active .c-header,
	.c-collections--overview .results-view,
	.c-collections--overview .c-header {
		width: 100%;
	}

    .cNav-isActive .c-search-input {
		visibility: visible;
    }

	/*Temporary until we can search in collection results */
	.c-collections--results.cNav-isActive .c-search-input {
		visibility: hidden;
	}

	/* when nav and ipanel are closed */
	.c-collections .c-search-bar {
		width: calc(100% + 176px);
	}

	/* we have extended the search bar to avoid showing gaps on transition but we need to stop the search input from
	   also extending that 100% width */
	.c-collections--overview.cNav-isActive .c-search-input {
		width: calc(100% - 251px);
	}

	.c-collections--overview .c-search-input {
		margin-block: 0 0;
		margin-inline: 0 0;
	}

	/*when nav is closed*/
	.cNav-isClosed.c-collections--results .results-view,
	.c-collections--results .iPanel-active .results-view,
	.iPanel-active .c-header,
	.iPanel-active .results-view {
		width: calc(100% + 106px);
	}

	/* collections header width when nav and info panel are open*/
	.c-collections--results.cNav-isActive .iPanel-active .c-header {
		width: 100%;
		padding-inline-end: 1rem;
	}

	.c-collections--results.cNav-isActive .iPanel-active .c-actions {
		padding-inline-end: 1rem;
	}

	.c-collections--results.cNav-isActive .c-panel--error .c-header {
		width: calc(100% + 500px);
	}

	.cNav-isActive .iPanel-active .results-view {
		width: 100%;
	}

	/* when nav is closed */
	.c-collections--overview .c-header,
	.c-collections--overview .results-view {
		width: calc(100% + 106px);
	}

	.c-collections--overview.cNav-isActive .c-header,
	.c-collections--overview.cNav-isActive .results-view {
		width: 100%;
	}

	.c-collections--overview .results-view-options {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.cNav-isActive .c-nav-control,
	.cNav-isActive .c-search-bar,
	.cNav-isActive .c-header,
	.cNav-isActive .results-view {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-transition: -webkit-transform .3s ease-in;
		transition: -webkit-transform .3s ease-in;
		transition: transform .3s ease-in;
	}

	.c-search-bar,
	.c-header,
	.results-view {
		-webkit-transform: translateX(-106px);
		transform: translateX(-106px);
		-webkit-transition: -webkit-transform .3s ease-in;
		transition: -webkit-transform .3s ease-in;
		transition: transform .3s ease-in
	}

	.rtl .c-nav-control,
	.rtl .c-search-bar,
	.rtl .c-header,
	.rtl .results-view {
		-webkit-transform: translateX(106px);
		transform: translateX(106px);
	}

	.rtl .cNav-isActive .c-nav-item::before,
	.rtl .cNav-isActive .c-nav-control,
	.rtl .cNav-isActive .c-search-bar,
	.rtl .cNav-isActive .c-header,
	.rtl .cNav-isActive .results-view {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.cNav-isActive .c-nav-item::before {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.cNav-isActive .c-nav-control-btn {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.rtl .cNav-isActive .c-nav-control-btn {
		-webkit-transform: translateX(0)  rotate(180deg);
		transform: translateX(0)  rotate(180deg);
	}

	.c-nav-item::before {
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
		cursor: pointer;
	}

	.c-nav-control-btn {
		-webkit-transform: translateX(109px);
		transform: translateX(109px);
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		border: 1px solid var(--cll-icon-color);
		border-radius: 40px;
		height: 26px;
		width: 26px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.icon-css--chevrons {
		height: 22px;
		width: 22px;
	}

	.rtl .c-nav-item::before {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}

	.rtl .c-nav-control-btn {
		-webkit-transform: translateX(-107px);
		transform: translateX(-107px);
	}

	.c-nav-item.is-active::after {
		-webkit-transition: -webkit-transform .3s ease-in;
		transition: -webkit-transform .3s ease-in;
		transition: transform .3s ease-in;
		-webkit-animation: cFadeInFrom0 2s ease-in;
		-moz-animation: cFadeInFrom0 2s ease-in;
		animation: cFadeInFrom0 2s ease-in;
	}

	.c-nav-control-title {
		margin: 0;
		display: block;
		font-size: 1.3rem;
	}

	.cNav-isActive .c-nav-control-title {
		opacity: 1;
		-webkit-transition: opacity .1s ease-in;
		transition: opacity .1s ease-in;
	}

	.c-search-input {
		margin-inline-start: 0;
		padding-inline-start: 40px;
	}

	.c-nav-item {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 1rem 0;
		margin: 0 0 .75rem 0;
	}

	.cNav-isActive	.c-nav-item {
		padding-inline-end: 1rem;
	}

	.c-nav-item::before {
		margin: 0 .75rem;
		font-size: 1.2rem;
		display: inline-block;
	}

	.c-nav-item--smart::before {
		margin: 0 .375rem;
	}

	.cNav-isActive .c-nav-item span {
		white-space: nowrap;
	}

	/* top padding in px rather than rem as need exact measurements so the padding covers c-nav-control height */
	/* z-index needed to show all box shadow */
	.c-nav {
		width: auto;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		grid-area: 1 / 1 / 2 / 2;
		position: relative;
		top: 0;
		padding-top: 45px;
		padding-inline-start: 1rem;
		box-shadow: var(--cll-default-box-shadow);
		border-top: 1px solid var(--cll-border-color);
		z-index: 1;
		height: 100%;
	}

	.c-nav-control,
	.c-nav {
		-webkit-transform: translateX(calc(-100% + 56px));
		transform: translateX(calc(-100% + 56px));
		-webkit-transition: -webkit-transform .3s ease-in;
		transition: -webkit-transform .3s ease-in;
		transition: transform .3s ease-in
	}

	.cNav-isClosed .c-nav-item {
		min-width: 150px;
	}

	.rtl .c-nav {
		-webkit-transform: translateX(106px);
		transform: translateX(106px);
	}

	.rtl .cNav-isActive .c-nav {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.cNav-isActive .c-nav {
		padding-inline-start: 0;
	}

	.c-nav-item span,
	.c-nav-control-title {
		opacity: 0;
		-webkit-transition: opacity .1s ease-in;
		transition: opacity .1s ease-in;
	}

	.cNav-isActive .c-nav-control-title,
	.cNav-isActive .c-nav-item span {
		opacity: 1;
		-webkit-transition: opacity .1s ease-in;
		transition: opacity .1s ease-in;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cNav-isActive .c-nav-control-title {
		max-width: 184px;
		padding-inline-end: 1rem;
	}

	.cNav-isActive .c-nav-item.is-active::after,
	.cNav-isActive .iPanel-active .results-view {
		-webkit-animation: fadeIn 1s ease-in;
		-moz-animation: fadeIn 1s ease-in;
		animation: fadeIn 1s ease-in;
	}

	.iwTBar--isClosed .c-nav-item.is-active::after,
	.c-nav-item.is-active::after {
		-webkit-transform: translateX(94px);
		transform: translateX(94px)
	}

	.rtl .iwTBar--isClosed .c-nav-item.is-active::after,
	.rtl .c-nav-item.is-active::after {
		-webkit-transform: translateX(-91px);
		transform: translateX(-91px)
	}

	.cNav-isActive .c-nav-item.is-active::after,
	.iwTBar--isClosed .cNav-isActive .c-nav-item.is-active::after {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.rtl .cNav-isActive .c-nav-item.is-active::after,
	.rtl .iwTBar--isClosed .cNav-isActive .c-nav-item.is-active::after {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.iPanel-active .results-view,
	.cNav-isActive .results-view {
		-webkit-animation: cFadeIn .5s ease-in;
		-moz-animation: cFadeIn .5s ease-in;
		animation: cFadeIn .5s ease-in;
	}

	.results-view {
		-webkit-animation: fadeIn .5s ease-in;
		-moz-animation: fadeIn .5s ease-in;
		animation: fadeIn .5s ease-in;
	}

	.cNav-isActive .iPanel-active .c-header {
		-webkit-animation: cFadeIn 1s ease-in;
		-moz-animation: cFadeIn 1s ease-in;
		animation: cFadeIn 1s ease-in;
	}

	.icon-btn--iPanel::before {
		font-size: 1.5rem;
	}

	.c-nav-item.is-active {
		background-image: linear-gradient(91deg, rgba(235,235,235,1) 71%, rgba(251, 251, 251, 1) 100%);
	}

	.rtl .c-nav-item.is-active {
		background-image: linear-gradient(-91deg, rgba(235,235,235,1) 71%, rgba(251, 251, 251, 1) 100%);
	}

	.icon-css--close,
	.iPanel-active .icon-css--close {
		-webkit-transition: opacity .3s ease-in;
		transition: opacity .3s ease-in;
	}

	.icon-css--close {
		height: 20px;
		width: 20px;
		display: inline-block;
		opacity: 1;
	}

	.icon-css--close.icon-css--chevrons::after,
	.icon-css--close.icon-css--chevrons::before {
		top: 6px;
		right: 4px;
		border-left: 0;
		border-bottom: 0;
		border-right: 2px solid var(--cll-icon-color);
		border-top: 2px solid var(--cll-icon-color);
		width: 6px;
		height: 6px;
	}

	.rtl .iPanel-active .icon-css--close::before {
		top: 6px;
	}

	.rtl .icon-css--close{
		inset-inline-start: 0;
	}

	.icon-css--close.icon-css--chevrons::after {
		right: 9px;
	}

	.icon-css--close {
		pointer-events: none;
		opacity: 0;
		left: 0;
		top: 0;
		border-radius: 50%;
		padding: 0;
		height: 24px;
		width: 24px;
		border: 1px solid;
	}

	.iPanel-controls .icon-btn {
		width: auto;
	}

	.iPanel-active .icon-css--close {
		pointer-events: all;
		opacity: 1;
		border: 1px solid var(--cll-icon-color);
		cursor: pointer;
		width: 24px;
		height: 24px;
		background-color: transparent;
		order: inherit;
		padding: 0;
	}

	.iPanel-controls .icon-css--chevrons {
		display: inline-block;
		-webkit-transform: scale(1.2) rotate(180deg);
		transform: scale(1.2) rotate(180deg);
	}

	/* lower z-index as nav no longer needs to cover other elements */
    .cNav-isActive .c-nav {
        z-index: 1;
    }

	.iPanel-active .iPanel-controls {
		border-top: 1px solid var(--cll-border-color);
		border-inline-start: 1px solid var(--cll-border-color);
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		box-shadow: none;
		background-color: #fff;
		height: auto;
		background-image: none;
		grid-area: 1 / 4 / 6 / 5;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: .575rem 0 0 0;
    }

	.iPanel-active .icon-btn {
		margin-bottom: 1.5rem;
		-webkit-animation: none;
		-moz-animation: none;
		animation: none;
	}

	.iPanel-active .icon-btn--preview::before {
		top: 0;
	}

	.iPanel-active::after,
	.overview-item-data--lbl::after,
	.overview-tile-item--desc::after {
		display: none;
	}

	.overview-item-dataWrap--desc {
		display: none;
	}

	/* we can show iPanel when nav is active for desktop - we had to hide for mobile due to horizontal scroll bars */
	.cNav-isActive .iPanel {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.multiSelect-isOpen .cNav-isActive .results-view {
		opacity: 1;
		-webkit-transition: none;
		transition: none;
	}

	.results-view--list .overview__aclBtn--list {
		align-self: center;
		grid-area: 1 / 5 / -1 / 6;
		inset-block-start: 0;
		inset-inline: initial;
		margin: 0 auto;
		position: relative;
	}

	.cNav-isClosed .iPanel-active .results-tile {
		width: calc(50% - 1.5rem);
	}

	.cNav-isClosed .results-tile {
		width: calc(25% - 1.5rem);
	}

	/* alert icon */
	.c-panel--error .c-empty-collection::before {
		font-size: 109px;
	}

	.c-collections--results:has(.c-share ~ .acl_button) .iPanel-active .c-header {
		grid-area: 3 / 1 / 4 / 3;
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .iPanel-active .c-header {
		grid-area: 3 / 1 / 4 / 3;
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .iPanel-active .c-actions {
		margin-block-start: .5rem;
	}
}

/* custom 1 */
@media (min-width:80.25em) {

	.overview-item-dataWrap--desc {
		display: block;
	}

	.iPanel-active .results-tile {
		width: calc(50% - 1.5rem);
	}

	.c-collections--results:has(.c-share:first-child:nth-last-child(2)) .iPanel-active .c-header {
		grid-area: 2 / 1 / 3 / 2;
	}
}

/* custom 1.5 */
@media (min-width:92.25em) {

	.results-tile {
		width: calc(25% - 1.5rem);
	}

	.cNav-isClosed .results-tile {
		width: calc(20% - 1.5rem);
	}

	.cNav-isClosed .iPanel-active .results-tile,
	.iPanel-active .results-tile {
		width: calc(33.333% - 1.5rem);
	}

	.iPanel-active .results-view--list .list-item {
		grid-template-columns: 35px calc(85px + 1.5rem) auto 40px min-content;
	}

	.iPanel-active .list-item-imgWrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.iPanel-active .searchHit-item-handle {
		display: block;
	}

	.iPanel-active .list-item-date {
		grid-area: 2 / 3 / -1 / 4;
	}

	.iPanel-active .media-type--resultsList {
		grid-area: 1 / 4 / -1 / 5;
	}

	.iPanel-active .list-item-title {
		grid-area: 1 / 3 / 2 / 4;
	}

	.iPanel-active .list-item-actions {
		grid-area: 1 / 5 / -1 / 6;
	}

	.c-collections--results:has(.c-share ~ .acl_button) .iPanel-active .c-header {
		grid-area: 2 / 1 / 3 / 2
	}

	.overview-tile-item {
		grid-template-columns: 85px auto max-content minmax(220px, min-content) minmax(85px, min-content) 40px 25px;
	}

	.owner-icon.owner-icon--list {
		border: 0;
		border-radius: 4px;
		display: flex;
		grid-area: 1 / 6 / -1 / 7;
		inset-block-start: 0;
		margin: auto;
		text-align: center;
	}

	.overview-tile-item .IWmenu_link--row {
		grid-area: 1 / 7 / -1 / -1;
	}
}

/* hi-res laptops and desktops */
@media (min-width:100.25em) {}

/* largest */
@media (min-width:117em) {

	.results-tile {
		width: calc(20% - 1.5rem);
	}

	.cNav-isClosed .results-tile {
		width: calc(16.666% - 1.5rem);
	}

	.cNav-isClosed .iPanel-active .results-tile,
	.iPanel-active .results-tile {
		width: calc(25% - 1.5rem);
	}
}