/*!
* \cond
* Copyright (c) 2012 Imagen Ltd.
*
* This software is protected by copyright and the information contained herein
* is confidential. The software may not be copied and information contained
* herein may not be used or disclosed except with the written permission of
* Imagen Ltd.
* \endcond
*
* \file
* \brief ImagenWeb CIS - Annotations css
*/

/*Fixes gap below video player when live streaming in IE11.*/
.mediaAnnotations-media > .iw_instance_container {
	display: block;
}

.mediaView {
	margin: 0 auto 1.5rem auto;
}

.annotations-results {
	position: relative;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	overflow: auto;
}

.annotations {
	height: 100%;
}

.annotations-controls,
.mediaTabbed-player {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.js-mediaImage + .mediaAnnotations-annotations {
	min-height: 423px;
}

/* Image Colour Tag --- */
.imageColourTag {
	width:20px;
	height:20px;
	float:left;
	margin: 0 .75rem;
	border-radius: 50%;
}

.annotations-head {
	position: relative;
	background-color: #f3f3f3;
	height: 50px;
}

.annotations-trackPlayer {
	position: absolute;
	right: .75rem;
	left: .75rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.annotations-trackPlayer input {
	position: absolute;
	top: -17px;
	right: 0;
	opacity: 0;
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	height: 50px;
	width: 50px;
	z-index: 3;
	cursor: pointer;
}

.annotations-trackPlayer input + label {
	cursor: pointer;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: flex;
	line-height: 1;
	padding-right: 42px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 1.1rem;
}

.annotations-trackPlayer input + label::before {
	position: absolute;
	content: '';
	-webkit-transition: -webkit-transform .15s ease-out;
	transition: -webkit-transform .15s ease-out;
	transition: transform .15s ease-out;
	top: -2px;
	z-index: 2;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 32px;
	box-shadow: 0 0 1px 2px rgba(0,0,0,0.05);
	right: 14px;
}

.annotations-trackPlayer input:checked + label::before {
	-webkit-transform: translateX(16px);
	transform: translateX(16px);
}

.annotations-trackPlayer input + label::after {
	position: absolute;
	content: '';
	-webkit-transition: background .2s ease-out;
	transition: background .2s ease-out;
	top: 0;
	z-index: 1;
	width: 32px;
	height: 16px;
	border-radius: 32px;
	box-shadow: inset 0 0 1px 2px rgba(0, 0, 0, 0.05);
	right: 0;
}

.annotations-trackPlayer input:checked + label::after {
	background-color: #666;
}

.annotations-resultsListWrap {
	position: relative;
}

.annotations-list {
	position:absolute;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width:100%;
}

/* Result Rows*/
.annotations-listItem {
	padding: .375rem .375rem 0 .375rem;
	height: 55px;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

.js-imageAnnotations .annotations-listItem {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0;
}

.js-imageAnnotations .annotations-listItem .contextMenu {
	order: 3;
	padding-right: .375rem;
}

.js-imageAnnotations .annotation_field_Description {
	width: 100%;
}

.annotations-listItem.current {
	min-height: 55px;
	height: auto;
	background-color: #fbfbfb;
}

#annotationsResultList .duration,
#annotationsResultList .time_code {
	font-family: Fixed, monospace;
	font-size: .9rem;
}

#annotationsResultList .time_divide,
#annotationsResultList .duration,
#annotationsResultList .time_code {
	text-decoration: none;
}

#annotationWidget .time_adjuster,
#annotationWidget .time_adjuster,
#annotationWidget .time_code,
#annotationWidget .duration {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

#annotationWidget .time_code,
#annotationWidget.time_code_mode .duration {
	display:none;
}

#annotationWidget .duration,
#annotationWidget.time_code_mode .time_code {
	display:inline;
}

.annotationsTrackPlayer input {
	vertical-align: middle;
}

/*search */

.annotations-searchNumHitsTxt {
	margin: 0;
	font-style: italic;
}

.annotations-searchInputWrap,
.annotations-search,
.annotations-query {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.annotations-searchInputWrap {
	position: relative;
	width: 100%;
}

.annotations-search {
	position: relative;
	background-color: #f3f3f3;
}

.annotations-buttons {
	padding: .75rem 0 .75rem .75rem;
}

#iw-annotation-pane .edit-time-block-lbl + div,
.annotations-query {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.annotations-query .u-inputTxt {
	padding: 0 .75rem;
	font-size: 16px;
}

.annotations-searchResetLink {
	color: #fff;
}

.annotations-searchNumHits,
.annotations-searchReset,
.annotations-searchResetLink {
	display: none;
}

.searched .annotations-searchResetLink {
	display: block;
	text-decoration: none;
}

.searched .annotations-searchNumHits,
.searched .annotations-searchReset,
.annotations-search-action {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.searched .annotations-searchNumHits {
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	padding: 0 0 0 .75rem;
	border-radius: 14px 0 0 14px;
	z-index: 1;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.searched .annotations-searchReset {
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	padding: 0 .75rem;
	border-radius: 0 14px 14px 0;
	position: relative;
	left: -1px;
}

/*extra specifier needed to overwrite themes*/
.btn.btn--annots,
.btn.iwMenu_createAnnotationOptions {
	font-size: 0;
	margin-right: .375rem;
	padding: .375rem 0;
    width: 30px;
	line-height: 1;
	height: auto;
	letter-spacing: normal;
	box-shadow: none;
}

.btn.iwMenu_createAnnotationOptions i span:first-child {
    font-size: 0;
}

.iwMenu_createAnnotationOptions.IWmenu_link--more span.iw-icon-down,
.btn--annots .iw-icon {
	font-size: 1rem;
	padding: 0;
}

.btn.btn--annotsLang {
	font-size: 1rem;
	padding: .375rem;
	width: auto;
}

.btn--annotsLang .iw-icon {
	padding-right: .375rem;
}

.btn--annotsLang .language-text {
	padding-left: .375rem;
}

.btn--annotsLang .language-text-rtl {
	padding-right: .375rem;
}

.annotations-search-action {
	position: relative;
	width: 50px;
	height: 45px;
}

.annotations-search-action::before {
	content: '\e94b';
	font-family: 'Imagenweb';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	font-size: 1.3rem;
	pointer-events: none;
	color: #666;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.is-disabled.annotations-search-action::before {
	opacity: .5;
}

.annotations_query.u-input {
	border: 0;
	background-color: transparent;
}

/*Don't allow the native clear button to appear in IE*/
.annotations_query::-ms-clear {
	display: none;
}

.btn.btn--annotsSearch {
	background-color: transparent;
	padding: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	box-shadow: none;
	border: 0;
}

.btn.btn--annotsSearch:hover,
.btn.btn--annotsSearch:active {
	background: transparent;
	box-shadow: none;
	border: 0;
}

/* --- Annotation Content --*/
.annotation_field_Timestamp_Separator {
	display: inline;
	padding: 0 0.375rem;
}

.annotation_field_Description {
	display:block;
	font-size: .85rem;
	text-overflow: ellipsis;
	width: 90%;
	white-space: nowrap;
	overflow: hidden;
}
.current .annotation_field_Description {
	white-space: normal;
}

/* Annotation Pop Up Window --- */
#annotationViewWindow {
	z-index: 300;
	top: 0;
	left: 0;
	display: none;
	position:absolute;
	border: 20px solid rgba(0, 0, 0, 0.7);
	box-sizing: initial;
}

#time_bar {
	background-color: #777;
	float:left;
}

.editing .time_code,
.editing .duration {
	cursor:col-resize;
}

.imagen-bootstrap .btn-group-shapes {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

#annotationWidget .time_adjuster,
#annotationWidget .time_adjuster {
	margin:1px;
	width:18px;
	height:10px;
	font-weight: bold;
	font-size:10px;
	text-align: center;
	cursor:pointer;
}

#iw-annotation-pane-con .modal-label {
	font-weight: normal;
}

#annotation_blanker {
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	height:100%;
	background-color:rgba(10,10,10,0.3);
}

#annotationWidget.disable #annotationControls {
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	filter: url(images/blur.svg#blur);
}

.annotations-empty {
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
	padding-top: 1.5rem;
}

#iw-annotation-pane-block {
	position: absolute;
	top: 0;
	left:0;
	height: 100%;
	width: 100%;
	background: rgba(34, 34, 34, 0.22);
}

#iw-annotation-pane {
	position: absolute;
	background: #fbfbfb;
	font-size: 14px;
	top: 20%;
	left: 50%;
	width: 5px;
	height: 6px;
	overflow: hidden;
}

#iw-annotation-pane .checkbox {
	margin-top: -5px;
	padding-left: 0;
}

#iw-annotation-pane .u-label-checkbox {
	color: inherit;
}

#iw-annotation-pane.open {
	top: 0;
	left: 0;
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	z-index: 225;
	padding: 10px;
	margin: 10px;
	border-radius: 6px;
}

#iw-annotation-pane .checkbox label {
	display: inline-block;
}

#iw-annotation-pane-options {
	height: calc(100% - 80px);
	overflow-y:auto;
	padding: 10px 5px;
}

#iw-annotation-pane-header {
	border-bottom: 1px solid #e5e5e5;
	height: 30px;
}

#iw-annotation-pane-footer {
	height: 50px;
	border-top: 1px solid #e5e5e5;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	column-gap: .75rem;
}

#iw-annotation-pane .edit-time-block {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	line-height: 25px;
	padding: 0;
	width: auto;
}

/* max width is set otherwise we get overflow if translated string is too long */
#iw-annotation-pane .edit-time-block-lbl {
	text-align: center;
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-inline: .375rem;
	max-width: 185px;
	min-width: 30px;
}

/* set a diff max width when we have long timecode set */
.time_code_mode #iw-annotation-pane .edit-time-block-lbl {
	max-width: 138px;
}

#iw-annotation-pane .btn {
	margin: 5px 0 0 6px;
}

#iw-annotation-pane-con .colourInput::-webkit-color-swatch-wrapper {
	padding: 0;
}

#iw-annotation-pane-con .colourInput::-webkit-color-swatch {
	border-width: 0;
}

.annotationRowText {
	cursor:pointer;
}

.mediaAnnotations-annotations:empty {
	display: none;
}

/*loading*/
.noLoading div {
	animation: none;
}

#annotationsTrackPlayer {
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
#annotationsTrackPlayer.grow {
	animation-name: grow;
}

@keyframes grow {
	0%     { transform: scale(1);       }
	20%    { transform: scale(1.5);     }
	100%   { transform: scale(1);       }
}

.modal-form-group--rating {
	min-height: 40px;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.modal-form-group--rating .modal-label {
	width: 100%;
}

.rater,
label.rater_label {
	margin: 0;
	padding: 0;
}

.rater {
	border: none;
	float: left;
	position:relative;
}

.rater > input { display: none; }
.rater > label:before {
	font-size: 1.25em;
	font-family: 'Imagenweb';
	display: inline-block;
	content: "\e913";
}

.rater > .half:before {
	content: "\e967";
	position: absolute;
	width: 15px;
	overflow: hidden;
}

.rater > label {
	color: #ddd;
	float: right;
}
#star_0_label {
	opacity: 0;
	width: 9px;
	overflow: hidden;
}

.rater .rater_input:checked ~ label,
.rater:not(:checked) > .rater_label:hover,
.rater:not(:checked) > .rater_label:hover ~ label {
	color: #FFD700;
}

.rater .rater_input:checked + label:hover,
.rater .rater_input:checked ~ label:hover,
.rater .rater_label:hover ~ .rater_input:checked ~ label,
.rater .rater_input:checked ~ .rater_label:hover ~ label {
	color: #e8cb21;
}

.mediaAnnotations-annotations {
	display: none;
}

.imagen-bootstrap .modal-fake-input--tags {
	min-height: 34px;
	height: auto;
	padding: 0 .75rem .75rem;
	background-color: #fff;
}

.imagen-bootstrap .modal-input--inlineTags {
	background-color: transparent;
	border: 0;
	padding: 0;
	height: 21px;
	position: relative;
	top: 5px;
}

.js-mediaImage .imageContainer {
	align-items: center;
	display: flex;
	justify-content: center;
}

.annotations-wrap,
.mediaAnnotations,
.mediaView,
#iw-annotation-pane-footer,
.colourList,
.colour-choice,
.colour-block.selected,
.customColorWell {
	display: flex;
}

.mediaAnnotations,
.mediaAnnotations-annotations,
.annotations-wrap {
	flex-direction: column;
}

.mediaAnnotations {
	flex-grow: 1;
}

.mediaAnnotations-annotations {
	align-self: stretch;
	border-inline-start: 1px solid #ccc;
	min-width: 35%;
}

.annotations-wrap {
	flex-grow: 1;
	height: 100%;
	position: relative;
}

.js-mediaImage .mediaAnnotations-annotations {
	border: 0;
	border-inline-start: 1px solid #ccc;
}

.annotations-results {
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 0;
	overflow-x: hidden;
}

.mediaView {
	align-items: center;
	border: 1px solid #ccc;
	max-width: 1200px;
	width: 100%;
}

.mediaAnnotations-media .imageContainer .thumbPopout {
	max-height: 75vh;
	overflow: hidden;
}

.js-no-annotations .mediaView {
	max-width: 900px;
}

.colourList,
.colour-choice {
	flex-wrap: wrap;
}

.colour-block,
#iw-annotation-pane-footer,
.annotations-search-action,
.colour-block.selected,
.colour-choice,
.customColorWell {
	align-items: center;
}

.mediaView,
.colour-block,
.annotations-search-action,
.colour-block.selected,
.customColorWell,
.colourList {
	justify-content: center;
}

.imagen-bootstrap .colourList {
	padding: 0;
	margin: 0 0 .75rem 0;
}

.colourInput {
	border: 0;
	box-shadow: 0 0 1px 2px #efefef;
	border-radius: 0;
	cursor: pointer;
	height: 30px;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.colourInput:focus {
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #ddd;
	outline: none;
}

.customColorWell {
	position: relative;
	width: 100%;
}

.customColorWell::after {
	background-color: rgba(0, 0, 0, .05);
	content: '';
	height: 30px;
	position: absolute;
	pointer-events: none;
	width: 100%;
	z-index: 0;
}

.colour-block {
	border-radius: 50%;
	box-shadow: 0 0 1px 2px #efefef;
	cursor: pointer;
	margin: .375rem .75rem;
	width: 24px;
	height: 24px;
}

.colour-block.selected {
	box-shadow: 0 0 0 2px #ddd;
	border: 2px solid #fff;
	position: relative;
}

.custom-color-lbl {
	color: #fff;
	font-size: 1.2rem;
	margin: 0;
	position: absolute;
	pointer-events: none;
	z-index: 1;
}

#iw-annotation-pane-options .edit-time-block .iwTimecode_editor {
	align-items: baseline;
	border-inline-start: 1px solid #ccc;
	justify-content: center;
	width: 100%;
}

#iw-annotation-pane-options .time-block-group {
	display: flex;
	gap: 1rem;
	min-width: 0;
	overflow: hidden;
}

#iw-annotation-pane-options .timeCodeEditor {
	height: 32px;
}

#iw-annotation-pane-options .time-container .u-link,
#iw-annotation-pane-options .time-container .u-link:hover {
	color: inherit;
}

#iw-annotation-pane-options .iwTimecode_editor.editing .time-container {
	width: auto;
}

.mediaAnnotations-media .mediaContainer {
	display: flex;
	flex-direction: column;
	max-height: 75vh;
}

.mediaAnnotations-media .iw_instance_container {
	min-height: 0;
}

#AnnotationImportModal .modal-sub-title {
	margin-inline-start: .375rem;
}

#AnnotationImportModal .dropZone-tagLine {
	font-size: 1.5rem;
	margin-block-end: 1rem;
}

.import-annotation-opt ~ .table-striped {
	margin-block-start: 1.5rem;
}

.evs-option strong {
	margin-inline-end: .375rem;
}

.evs-option.hide {
	display: none;
}

/* landscape smartphones, iPhone480px */
@media all and (min-width:30em) {
	.imagen-bootstrap .modal-input--inlineTags {
		margin: 0;
	}
}

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

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

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

/* custom4.6 */
@media (min-width:48em) {}

/* tablet, landscape iPad, lo-res laptops and desktops */
@media (min-width:56.25em) {
	.mediaAnnotations-annotations {
		display: flex;
	}
}

/* small desktops 1000px */
@media (min-width:62.5em) {}

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

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

	#iw-annotation-pane-options .time-block-group {
		flex-grow: 1;
	}
}

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

	.js-no-annotations .mediaView {
		max-width: 1000px;
	}

	.mediaView {
		max-width: 1300px;
	}

	.colour-choice {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	.customColorWell {
		width: auto;
	}

	.customColorWell::after {
		width: 65px;
		height: 65px;
		border-radius: 50%;
	}

	.colourInput {
		width: 65px;
		height: 65px;
		border-radius: 50%;
	}

	.imagen-bootstrap .colourList {
		margin: 0;
	}

	.custom-color-lbl {
		font-size: 1.5rem;
	}

	.colourList {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
}

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

	.js-no-annotations .mediaView {
		max-width: 1100px;
	}

	.mediaView {
		max-width: 1400px;
	}

	/*using px to position custom colour picker centered in the space between the end of the colour blocks and
	the modal right margin*/
	.customColorWell {
		padding-right: 32px;
	}
}

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