/*!
* \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;
}

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

.annotations {
	height: 100%;
}

/*Fixes gap in IE11**/
.annotations-controls {
	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 .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: #8fd57c;
}

.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;
}

.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;
	line-height: 1;
	height: auto;
	letter-spacing: normal;
	box-shadow: none;
}

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

.btn.btn--annotsLang {
	font-size: 1rem;
}

.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;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.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;
}

#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 label {
	display: block;
	font-weight: 300;
}

#iw-annotation-pane .checkbox label,
#iw-annotation-pane .edit-time-block label,
#iw-annotation-pane .edit-time-block div {
	display: inline-block;
}

#iw-annotation-pane .time-container {
	width: 69%;
}

#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;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

#iw-annotation-pane .edit-time-block {
	margin-right:3px;
	display: inline-block;
}

#iw-annotation-pane .edit-time-block label {
	margin-right: 1px;
}

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

#iw-annotation-pane-con ul.colourList {
	display: inline-block;
	margin-bottom: 0;
	width: 165px;
	padding: 0 0 0 10px;
}

#iw-annotation-pane-con .colourInput,
#iw-annotation-pane-con ul.colourList li {
	width: 19px;
	height: 19px;
	margin: 3px;
	display: inline-block;
	border: 1px solid #c5c5c5;
	cursor: pointer;
}

#iw-annotation-pane-con .colourInput {
	width: 25px;
	height: 25px;
	vertical-align: top;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

#iw-annotation-pane-con .customColorWell {
	display: inline-block;
	border: 1px solid #cecece;
	vertical-align: top;
	padding: 0 3px;
	text-align: center;
}

#iw-annotation-pane-con .customColorWell label {
	font-weight: 100;
	width: auto;
	margin: 0;
}

#iw-annotation-pane-con .colourInput .selected,
#iw-annotation-pane-con .colourList .selected {
	outline: 2px solid #66afe9;
}

#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);       }
}
.form-group-min-height{
	min-height: 40px;
}

.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 {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

/* 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,
	.annotations-wrap,
	.mediaAnnotations,
	.mediaView {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}

	.mediaAnnotations-annotations {
		flex-direction: column;
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		-webkit-flex-basis: 0;
		flex-basis: 0px;
		align-self: stretch;
		border: 1px solid #ccc;
	}

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

	.js-mediaImage {
		border: 1px solid #ccc;
	}

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

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

	/*Setting height stops the 'new annotations modal' from increasing the height of the annotations container in IE11 */
	.mediaAnnotations {
		margin: 0 auto .75rem auto;
		align-items: center;
		width: 100%;
		max-width: 1200px;
		height: 100%;
	}

	.mediaAnnotations-media .imageContainer .thumbPopout {
		max-height: 700px;
		overflow: hidden;
	}

	.mediaView {
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
		margin: 0 auto;
		width: 100%;
	}

	.mediaAnnotations-media {
		-webkit-flex-grow: 2;
		flex-grow: 2;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		-webkit-flex-basis: 0;
		flex-basis: 0;
	}

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

/* custom 1.5 */
@media (min-width:92.25em) {
	body.mode-developer:after{content: "custom 1.5";}

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

	.mediaAnnotations {
		max-width: 1300px;
	}
}

/* hi-res laptops and desktops */
@media (min-width:100.25em) {
	body.mode-developer:after {
		content: "hi-res laptops and desktops";
	}

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

	.mediaAnnotations {
		max-width: 1400px;
	}
}