:root {
	--main-layer: 0;
	--annotation-layer: 4;
	--controls-layer: 5;
	--overlay-layer: 6 ;
	--alert-layer: 1200 ;

	--nav-height:58px;

	--icon-width:50px;
	--icon-height:50px;
	--vIcon-width:34px;


	--side-menu-full-width:240px;
	--side-menu-min-offset:-50px;

	--thumbnail-width:170px; /* Must match value in JS Filmstrip object  */
	--thumbnail-height:96px;

	--scrollbar-height:24px;

	--thumbnail-window-height:120px;


	--se-empty-color: rgba(50,50,50,1) ;
	--se-background-color: rgba(50,50,50,0.70) ;
	--se-control-panel-color: rgba(60,60,60,0.70) ;
	--se-control-panel-border-color: rgba(80,80,80,1) ;
	--se-info-panel-color: rgba(176,196,222,0.70) ;
	--se-control-color: rgb(0,177,196) ;
	--se-control-color-hover: rgb(194,230,235) ;
	--se-control-text-color: white ;
	--se-disabled-text-color: rgba(176,196,222,0.70) ;
	
	--se-border-color: rgba(0,177,196,0.5) ;
	--se-border: 1px solid rgba(0,177,196,0.5) ;

	color: white ;
	
}

@font-face {
	font-family: SiteEye;
	src: url("../fonts/SiteEyeSymbols1.otf") format("opentype");
}

.toggleExplorePane {
	font-family: SiteEye;
	color: white;
	font-size: 16pt;
	line-height: 1.0;
}
.toggleExplorePaneSelected {
	font-family: SiteEye;
	color: rgb(0,177,196) !important;
	font-size: 16pt;
	line-height: 1.0;
	background-color: rgba(0,75,80,1) !important;
}
div {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.vShadow {
	box-shadow: 0px 5px 5px rgba(50,50,50,0.70);
}

.vhShadow {
	box-shadow: 5px 5px 5px rgba(50,50,50,0.70);
}

.dialogList {
	background-color:white;
	color:black;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

#login_logo {
	position: fixed;
	left: 0px;
	width:240px;
	min-height: var(--nav-height);
	background-color: rgba(50,50,50,0.70);
	z-index:6;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

#login_logo img {
	max-width: 100%;
	height: auto;
}

#LangIcon {
	font-size: 26pt;
}

#Settings {
	font-size: 18pt;
	color:rgba(255,255,255,0.5);
}

#Settings:hover {
	color:rgba(255,255,255,1.0);
}

/* ************************************************************************ */
/* ************************* BOOTSTRAP OVERRIDES ************************** */
/* ************************************************************************ */

.navbar {
	position:fixed;
	visibility: hidden;
	width:100%;
	left:0px;
	border-color: rgba(50,50,50,0.70);
	background-color: rgba(50,50,50,0.70);
	z-index:6 ;
}

.navbar-inverse {
	border-color: rgba(50,50,50,0.70);
	background-color: rgba(50,50,50,0.70);
}

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-menu {
	background-color: rgba(50,50,50,0.70);  
	border: 1px solid rgb(0,177,196);
}

/* Dropdown menu font color*/ 

.navbar-nav > li > .dropdown-menu a{
	 color: white;
}
.navbar-nav > li > .dropdown-menu a:hover{
	background-color:rgba(50,50,50,1.0);  
	color: rgb(0,177,196);
}

.dropdown-toggle {
	color: rgba(255,255,255,0.5);
}

.dropdown-toggle:hover {
	color: rgba(255,255,255,1.0);
}

.dropdown-toggle a {
	text-decoration: none;
}

.dropdown-menu.show {
	margin-left: -140px;
}

#navsettings {
	margin-left: 10px;
}

.list-group-item:hover {
	background-color:rgba(50,50,50,1.0) !important;  
	color: rgb(0,177,196);
}

.active {
	/*background-color: rgba(50,50,50,0.7) !important ;*/
	color:rgb(0,177,196) !important;
	/* font-weight: bold;*/
}

.disabled {
	color:rgba(176,196,222,0.70) !important;
	background-color: rgb(0,177,196) !important;
	pointer-events:none ;
}

.modal {
	border-radius: 5px;
}
.modal-content {
	background-color: rgb(0,177,196) ;
	color: white ;
}

.nav-tabs {
	border-bottom: 1px solid rgba(80,80,80,1);
}

.nav-tabs>li>a {
	color:rgb(0,177,196);
}

.nav-tabs>li.active>a {
	background-color: rgb(0,177,196);
	color:white ;
}

.nav-pills {
	padding-left:5px;
}

.nav-pills>li>a {
	color:rgb(0,177,196);
}

.activePill {
	color:rgb(0,177,196) !important;
}

.nav-pills>li.active>a {
	background-color: rgb(0,177,196);
	color:white ;
}

/* -------------- MESSAGES AND ALERTS ------------- */

#Messages {
	position:absolute;
	top:100px;
	width:75%;
	height: 70%;
	margin:auto;
	z-index: 1200 ;
	/*pointer-events:none;*/
}

#InfoMessage {
	width: 100%;
	height:100%;
}

#Info {
	position: absolute;
	top: 100px;
	left: 240px;
	width: 600px;
	height: 100px;
	background-color: lightblue;
	border-radius: 15px;
	visibility: hidden;
	z-index: 1200 ;
	padding: 10px;
	color:#295360;
	font-size: small;
}

#InfoMap {
	position: absolute;
	top: 100px;
	left: 240px;
	width: 600px;
	height: 500px;
	background-color: lightblue;
	border-radius: 15px;
	visibility: hidden;
	z-index: 1200 ;
	padding: 10px;
	color:#295360;
	font-size: small;
}

#InfoContainer {
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
	background-color: lightblue;
	margin: 5px;
}
#InfoProjCam {
	width:300px;
	height:82px;
}
#InfoEXIFParams {
	width:175px;
	height:82px;
	background-color: white;
	padding-left:6px;
}
#infoCloseDiv {
	width: 15px;
	font-size: large;
}
#infoCloseDiv:hover {
	color: lightgray;
}
/*
#ErrorMessage, #InfoMessage {
	pointer-events:none;
}

#ErrorMessage, #InfoMessage .close {
	pointer-events:all;
}
*/

#map_and_exif_container {
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 20px;
}

#exif_data {
	display: inline-block;
	width: 48%;
	background-color: white;
	padding: 5px;
	font-size: small;
}

#map_data {
	display: inline-block;
	width: 570px;
	background-color: white;
	min-height: 200px;
	height: 370px;
	vertical-align: top;
	text-align: center;
	background-color: lightgray;
	color:black;
	font-size: smaller;
	margin: 5px;
	margin-top: 10px;
}

/* -------------- ICONS ------------- */

.seIcon {
	display:inline-block;
	width: 50px;
	height: 50px;
	margin:0px;
	background-color: rgb(0,177,196);
	color:white ;
	z-index: 5;
	vertical-align: middle;
	text-align:center;
	padding-top:14px;
	pointer-events:all;
}

.seThumbLeftIcon {
	position: absolute;
	display:inline-block;
	width: 20px;
	height: 96px;
	left: 0px;
	margin:0px;
	background-color: rgb(0,177,196);
	color:white ;
	z-index: 10;
	vertical-align: middle;
	text-align:center;
	padding-top:30px;
	pointer-events:all;
}

.seThumbRightIcon {
	position: absolute;
	display:inline-block;
	width: 20px;
	height: 96px;
	right: 0px;
	margin:0px;
	margin-top: -98px;
	background-color: rgb(0,177,196);
	color:white ;
	z-index: 10;
	vertical-align: middle;
	text-align:center;
	padding-top:30px;
	pointer-events:all;
}

.seThumbLeftIcon:hover {
	background-color: rgb(194,230,235);
}

.seThumbRightIcon:hover {
	background-color: rgb(194,230,235);
}

.hIcon {
	width: 50px;
	height: 30px;
	padding-top:4px;
}

.vIcon {
	width: 34px;
	height: 50px;
}

.seIcon:hover {
	background-color: rgb(194,230,235);
}

.seIcon span {
	top:16px;
}


.tlr-icon {
	border-radius: 15px 15px 0px 0px !important;
}

.tl-icon {
	border-radius: 15px 0px 0px 0px !important;
}

.tr-icon {
	border-radius: 0px 15px 0px 0px !important;
}

.bl-icon {
	border-radius: 0px 0px 0px 15px !important;
}

/* ************************************************************************ */
/* ***************************** IMAGE ROTATION *************************** */
/* ************************************************************************ */

.rotate90 {
    -webkit-transform: rotate(90deg) scale(0.66);
    -moz-transform: rotate(90deg) scale(0.66);
    -o-transform: rotate(90deg) scale(0.66);
    -ms-transform: rotate(90deg) scale(0.66);
    transform: rotate(90deg) scale(0.66);
}

.rotate90neg {
    -webkit-transform: rotate(270deg) scale(0.66);
    -moz-transform: rotate(270deg) scale(0.66);
    -o-transform: rotate(270deg) scale(0.66);
    -ms-transform: rotate(270deg) scale(0.66);
    transform: rotate(270deg) scale(0.66);
}

/* ************************************************************************ */
/* ***************************** TOOLBARS ********************************* */
/* ************************************************************************ */

.toolGroup {
	top:50%;
	display:inline-block;
	z-index: calc(5-1);
	background-color: rgb(0,177,196);
	margin:auto auto ;
}


#EastToolbar {
	position: fixed;
	top:0px;
	bottom:96px;
	right:0px;
	width: 34px;
	pointer-events:none;
	touch-action:none;
}

#EastToolsWrapper {
	background-color: rgb(0,177,196);
	z-index:6 ;
	border-radius: 15px 0px 0px 15px !important;
}

.eastTools {
	position:absolute;
	top:50%;
	transform:translate(0%,-50%); 
	display:inline-block;
	z-index: calc(5-1);
	margin:auto auto ;
	pointer-events:none;
}

.westPanel {
	position: fixed;
	top: var(--nav-height);
	left: 0px;
	width: 240px;
	bottom: 0px;
	z-index: 5;
}

/* ************************************************************************ */
/* ***************************** DATE PICKERS ***************************** */
/* ************************************************************************ */

/* Make JQuery datepicker background transparent */
.ui-datepicker, .ui-datepicker .ui-state-default, .ui-datepicker .ui-widget-header {
    background-color:rgba(0,0,0,0) !important ;
}

.datepicker .active {
    background-color:rgba(0,0,0,0) !important ;
}


.seDatePicker {
	font-size:10pt;
}

.seDatePicker .rangeType {
	border-bottom: 1px solid white;
	margin-bottom:10px;
}

.seDatePicker .dateLegend {
	display:inline-block;
}

.seDatePicker .thumbnail {
    width:128px;
    height:96px;
	margin-top:26px ;
    border: 1px solid white;
    background-color: gray;
}

#DateRangeModal .thumbnail {
	margin-left:20px ;
}

#CreateVideoModal .thumbnail {
	margin-left:20px ;
}


#CreateVideoContainer .thumbnail {
	margin-left:20px ;
}

.thumbnail-small {
    width:64px !important;
    height:48px !important;
}

#DateRangeModal .modal-content {
	min-width:640px !important ;
}

#CreateVideoModal .modal-content {
	min-width:640px !important ;
}


#ManageUsersContainer .modal-content {
	min-width:640px !important ;
}

#ManageUsersModal .modal-content {
	min-width:640px !important ;
}

#ManageUsersPane {
	background-color: white;
	color: black;
	border-radius: 5px;
	overflow-x: auto;
	font-size: smaller;
	height: 350px;
}

#AddEditUserContainer .modal-content {
	min-width:640px !important ;
}

#AddEditUserModal .modal-content {
	min-width:640px !important ;
}

#AddEditUserPane {
	border-radius: 5px;
	overflow: none;
	font-size: smaller;
	height: 350px;
}

#AddEditUserPart2Container .modal-content {
	min-width:640px !important ;
}

#AddEditUserPart2Modal .modal-content {
	min-width:640px !important ;
}

#AddEditUserPart2Modal checkbox {
	margin-bottom: 20px;
}

#AddEditUserPart2Pane {
	border-radius: 5px;
	overflow: none;
	font-size: smaller;
	height: 350px;
}

#AddEditUserPart3Container .modal-content {
	min-width:640px !important ;
}

#AddEditUserPart3Modal .modal-content {
	min-width:640px !important ;
}

#AddEditUserPart3Pane {
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: smaller;
	height: 350px;
}

#AddEditUserPart3Pane .list-group-item {
	background-color: white;
	color:black;
}

#AddEditUserPart3Pane .list-group-item:hover {
	color:white;
}
.-current- {
	border:none !important;
}

.-selected- {
	background-color: rgba(176,196,222,0.70) !important;
}

/* ********* CONTROL PANEL ************ */

.controlPanel {
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	background-color: rgba(50,50,50,0.70);
	/*background-color: rgba(50,50,50,1.0);*/
	color:white ;
	z-index: 6;
	border-right:rgba(80,80,80,1);
	border-top:rgba(80,80,80,1);
}

.controlPanel .toggleControlButton {
	display:block;
	position:absolute;
	right:0px;
	top:0px;
}

.controlPanel-minimise-button {
	border-radius: 0px 15px 15px 0px !important;
	width:30px !important;
	left: 240px !important;
}

.controlPanel-maximise-button {
	border-radius: 0px 15px 15px 0px !important;
	width:30px !important;
	left:0px !important;
}


.controlPanel .controls {
	position:absolute;
	width:100% ;
	top: 50px;
	padding-top:10px;
	color:white ;
	padding:10px;
}

.controlPanel .panel-heading, .panel-title {
	color:white ;
}

.controlPanel .panel-heading, .panel-default {
	border-color: rgb(0,177,196);
	background-color: rgb(0,177,196);
}

.controlPanel .panel-default {
	border-color:  rgba(60,60,60,0.70);
}


.controlPanel .panel-body, .list-group, .list-group-item {
	border-color:  rgba(60,60,60,0.70);
	background-color:  rgba(60,60,60,0.70);
}

.controlPanel h1 {
	font-size:14pt;
	color:white ;
	padding-left:5px;
}

/* ********* MODULE ************ */

.module {
	display:none;
	background-color:  rgba(60,60,60,0.70);
}



/* --------------- IMAGE INFO CONTAINERS -------------- */

.imageInfo {
	/* position:absolute; changes to make camera list scrollable */
	top:0px;
	left:0px;
	right:20px ;
	height:50px ;
}

.info-overlay {
	border-radius: 5px;
	z-index:6 ;
	/*background-color: rgba(50,50,50,0.7) ;*/
	/*border: 1px solid white;*/
	border: none;
	color: white ;
	font-size:10pt;
	line-height:12pt;
	margin-left:3px;
	margin-right:3px;
	margin-top: -10px;
	padding:3px;
}



/* ************************************************************************ */
/* ***************************** EXPLORE MODULE *************************** */
/* ************************************************************************ */

.projectNameLabel, .viewNameLabel, .imageDateTaken {
    overflow-x: hidden;
    white-space: nowrap;
}

.camselimage {
	margin-top: 1px;
}

.camselimage img {
	width: 120px;
	height: 80px;
	margin: auto;
}
/* ********* ANNOTATIONS ************ */

#ExploreSiteStreamPane {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 6;
	display:none;
}

#ExploreAnnotationPane {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 4;
}

.annotation {
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	height:100px;
	min-width:30px;
	min-height:20px;
	background-color: rgba(255,255,255,1);
	box-shadow: 3px 3px 3px;
	z-index: 4;
}

.fa-sticky-note {
	color: white;
}

.transparent-annotation {
	background-color: rgba(255,255,0,0.4) !important;
}

.annotationContent {
	position:absolute;
	top:15px;
	bottom:0px;
	left:0px;
	right:0px;
	font-size:10pt;
	text-align:left;
	z-index: var(--annotation-tool-layer);
}

.annotation textarea {
    resize:none;
    width:100%;
	font-size:10pt;
	text-align:left;
	background:transparent;
	border: 0 none;
}

.annotationClose {
	position:absolute;
	top:0px;
	right:0px;
	width:15px;
	height:15px;
	color:black;
	font-size:8pt;
	background-color:rgba(255,255,255,0.5) ;
	z-index: var(--annotation-tool-layer);
}

.annotationMenuIcon {
	position:absolute;
	top:0px;
	left:0px;
	width:15px;
	height:15px;
	color:black;
	font-size:8pt;
	background-color:rgba(255,255,255,0.5) ;
	z-index: var(--annotation-tool-layer);
}

.annotationMove {
	position:absolute;
	top:0px;
	left:15px;
	right:15px;
	height:15px;
	z-index: 4;
	background-color:rgba(255,255,255,0.5) ;
}

.annotationResize {
	position:absolute;
	bottom:0px;
	right:0px;
	width:15px;
	height:15px;
	font-size:8pt;
	z-index: var(--annotation-tool-layer);
}

.foundAnnotation {
	border-bottom:0px solid white;
}

.foundAnnotation img {
	margin-right:10px;
	padding-top:5px;
}

#AnnotationSeachControls {
	margin: 5px;
}

#AnnotationSearchString {
	border-radius: 3px;
	width: 50%;
	height: 30px;
	border: 1px solid white;
}

#AnnotationSearchClear {
	height: 30px;
	margin-left: 8px;
	margin-top: -5px;
	line-height: 15px;
	
}


/* ********************************** */

#ExploreSelectProject {
	background-color:rgba(50,50,50,1) ;
	color:white;
	font-size:10pt;
	margin-top: 10px;
}

/* ------------- CHOOSE CAMERA MODAL ------------- */

#OfferCameraContainer {
	position:relative;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	height:150px;
}

#OfferCameraInfoContainer {
	position:absolute;
	left:0px;
	width:50%;
	top:0px;
	bottom:0px;
	margin:10px;
}

#OfferCameraInfoContainer h1 {
	font-size: 14pt;
}

#OfferCameraInfoContainer h2 {
	font-size: 12pt;
}

#OfferCameraInfoContainer p {
	font-size: 10pt;
}

#OfferCameraThumbnailContainer {
	position:absolute;
	width:170px ;
	right:0px;
	top:0px;
	bottom:0px;
	margin:10px;
}

#OfferCameraThumbnail {
	margin:0px auto;
}

#SingleDownloadContainer {
	left:0px;
	width:50%;
	top:0px;
	bottom:0px;
	margin:10px;
}

/* ************************************************************************* */
/* **************************** DASHBOARD MODULE *************************** */
/* ************************************************************************* */

#DashboardContent {
	position: fixed;
	top: 0;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding:5px;
	background-color: rgba(50,50,50,1);
	color: white ;
}

.dashboard-selection-pane {
	width:100%;
	min-height:100px;
}

#DashboardContentWrapper {
	position:absolute;
	left:0px;
	top: var(--nav-height);
	right:0px;
	bottom:0px;
	padding-left:30px;
	padding-right:25px;
	overflow-y:auto;
	overflow-x:hidden;
}

#UpgradeContentWrapper {
	width: 75%;
	margin: auto;
}

.dashboard-item {
	position:relative;
	margin:5px;
	text-shadow: 1px 1px black;
}


.dashboard-view {
	position:absolute;
	top:0px;
	left:0px;
	right:10px;
	margin:5px;
	pointer-events:none;
}

.dashboard-project {
	font-size:10px;
	pointer-events:none;
	z-index:6;
}

.dashboard-camera {
	font-size:12px;
	pointer-events:none;
	z-index:6;
}

.dashboard-date {
	position:absolute;
	bottom:20px;
	right:0px;
	margin:5px;
	font-size:10pt;
	z-index:6;
	pointer-events:none;
}

.dashboard-indicator {
	position:relative;
	text-align:right;
	right: 5px;
	pointer-events:none;
	z-index:6;
}

.dashboard-image {
	position:relative;
	top:-20px;
	border:1px solid rgba(80,80,80,1);
}

.dashboard-image-hover {
	box-shadow: 0px 0px 5px rgb(0,177,196) !important;
}


.updating {
	border:2px solid white !important ;
}


/* ************************************************************************* */
/* **************************** EXPLORE MODULE ***************************** */
/* ************************************************************************* */

/* ***** CONTROL PANELS ***** */

#ExploreFullControls {
	/*bottom:0px; changes to make projects/cameras scroll*/
	margin-top: -50px;
	height: 90%;
	/*background-color: rgba(32, 31, 31,1.0);*/

	/*overflow-y: scroll;*/
	/*max-height: 80%;*/
}

#ExploreCameraListContainer {
	/*position:absolute;*/
	left:10px;
	top:0px;
	right:10px;
	/*bottom:110px;   changes to make projects/cameras scroll*/
	/*padding-bottom:5px; changes to make projects/cameras scroll*/
	margin-top:10px;
	margin-bottom:5px;
}

#ExploreCameraListPane {
	max-height: 80%;
	overflow-y: auto;
}

#ExploreCameraList {
	border: 1px solid rgba(80,80,80,1) ;
	border-radius: 5px;
	font-size:10pt;
}

#ExploreAnnotationPanel {
	/*position:absolute; changes to make projects/cameras scroll*/  
	/*bottom:0px; changes to make projects/cameras scroll*/
	height:95px;
	/*border: 1px solid  rgba(80,80,80,1) ;*/
	border: none;
	/*border-radius: 5px;*/
	margin-top: 5px;
	font-size:10pt;
	padding-left: 20px;
}

#ExploreShowVideoPanel {
	/*border: 1px solid  rgba(80,80,80,1) ;*/
	border: none;
	/*border-radius: 5px;*/
	margin-top: 10px;
	font-size:10pt;
	padding-left: 20px;
	margin-bottom: 15px;

}

/* ***** CONTENT ***** */

#ExploreContent {
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
    width: 100%;
    margin: auto;
    background-color: rgb(32, 31, 31);
}

#ExploreImageContainer {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}

#ExploreSlide {
	position:relative;
    display: block;
    width:100%;
    margin:auto;
    height:100%;
    transition: transform .3s;
}

#ExploreImage {
	position: relative;
    left:0px;
    margin: auto;
    top:0px;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

.GreyScale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.controlPanel .toggleThumbnails {
	display:block;
	position:absolute;
	/* right:0px; */
	bottom:33px;
	border-left:1px solid rgba(0,177,196,0.5);
	border-top:1px solid rgba(0,177,196,0.5);
	border-bottom:1px solid rgba(0,177,196,0.5);
}

#ExploreNavTools {
	position:relative;
	left:300px ;
}

#ThumbnailParent {
	position: fixed;
	left: 0px;
	text-align:center;
	right: 0px;
	bottom: 0px;
	height:calc(98px+30px);
	z-index: 5;
	pointer-events:none;
}

#ThumbnailPanel {
	display: inline-block;
	overflow-x:hidden;
	overflow-y:hidden;
	background-color: rgba(50,50,50,0.70);
	pointer-events:all;
}

.thumb_video_icon {
	font-size: 20pt;
}

.thumbnail-control-open {
	border-radius: 15px 0px 0px 15px !important;
	bottom:62px;
	left:5px;
	width:30px !important;
}

.thumbnail-control-closed {
	border-radius: 15px 15px 0px 0px !important;
	bottom:62px  !important;
	height:30px !important;
	padding-top:5px !important;;
}

.thumbnail-control-topopen {
	border-radius: 15px 15px 0px 0px !important;
	left:5px;
	bottom:110px  !important;
	height:30px !important;
	padding: 0px !important;
}

.thumbnail-control-topclosed {
	border-radius: 15px 15px 0px 0px !important;
	left:5px;
	bottom:0px  !important;
	height:30px !important;
	padding: 0px !important;
}

#Filmstrip {
	position:relative;
	overflow: hidden;
	white-space: nowrap;
	height: 98px ;
	border: 2px solid rgba(0,177,196,0.5) ;
	left:0px;
	width: calc(100% - 20px);
	background-color: #000000A0;
/*	left:-60px; */
}

#portalwelcomemess {
	position: absolute;
	display: block;
	width: 100%;
	top: 400px;
	color: white;
	background-color: rgba(50,50,50,0.0);
	overflow: hidden;
	border:none;
	margin:auto;
	margin-top: 20px;
	z-index: 7;
}

#WelcomeContent {
	text-align: center;
	background-color: rgba(50,50,50,0.3);
	color: white;
	font-size:smallest;	
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 5px; 
	padding: 5px;
}

/* used to shift images below themenu if they have embedded info (eg siteStream portal) */
.belowMenuBar {
	padding-top:60px;
}

.thumbdiv {
	display:inline-block;
	position: relative;
	background-color:rgba(50,50,50,1);
	pointer-events:all;
}

.thumbnailImage {
	display:inline-block;
	width:144px;
	height:96px;
	border:1px solid rgba(0,177,196,0.5);
	background-color:rgba(50,50,50,1);
	pointer-events:all;
}

.thumbnailImage:hover {
	cursor: pointer;
	border: 1px solid yellow !important;
}

.thumbnailImage.empty {
	border:none;
	background-color:rgba(50,50,50,1);
	pointer-events:none;
	visibility:hidden;
}

.thumbtext {
    display: none;
    background-color: rgba(60,60,60,0.70);
	color:white ;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    font-weight: bold;
    border-radius: 3px;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
	margin-left: 3px;
	left:3px;
	top:6px;
	z-index: 9;
}

#WeatherDataContainer {
	position:absolute;
	bottom:0px ;
	right:0px;
	width:180px;
	margin-right:20px;
	margin-bottom:20px;
	font-size:8pt;
}

#AnnotationSearchList {
    position:absolute;
    margin:0px;
    padding-top:0px;
    padding-left:10px;
    padding-right:10px;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:auto;
    overflow-x:hidden;
}

#AnnotationSearchList > li {
    list-style-type:none;
    margin-left:0px;
    padding-left:5px;
    padding-bottom:5px;
    border-bottom: 1px solid grey ;
    width:100%;
}

#AnnotationSearchContainer {
	height:300px;
}

#WeatherTempText {
	display:inline;
	position:relative;
	top:-18px;
}

#WeatherTempIcon {
	width:45px;
	height:45px;
	display:inline-block;
}

#WeatherWindText {
	display:inline;
	position:relative;
	top:14px;
}

#WindArrow {
	width:20px;
	height:20px;
	display:inline-block;
	margin:10px;
}


#MinimalExploreInfoControl {
	position:absolute;
	left:0px;
	top:70px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}

/*
#MinimalAddNoteControl {
	position:absolute;
	left:0px;
	top:125px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}
*/

#MinimalToggleSiteStreamPortalControl {
	position:absolute;
	left:0px;
	top:125px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}

#MinimalSetFavouriteControl {
	position:absolute;
	left:0px;
	top:205px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}

#SiteStreamPortalVideoContainer {
	padding-top:0px;
	margin:auto;
}

/*
#SiteStreamPortalVideoContainer {
	width:780px;
	padding-top:100px;
	margin:auto;
}
*/

#SiteStreamPortalVideoWrapper {
	margin-top:65px;
	margin-left: 32px;
	/* border:4px solid white !important; */
	background-color: rgba(60,60,60,0.0) ;
}

/* ************************************************************************* */
/* **************************** COMPARE MODULE ***************************** */
/* ************************************************************************* */


#CompareWindowPane {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 4;
	display:none;
}

#CompareWindowFrame {
	position:absolute;
	width:200px;
	height:100px;
	min-width:30px;
	min-height:20px;
	background-color: rgba(0,0,0,0);
	border: 2px solid white;
	z-index: 4;
}


#CompareWindowFrameMove {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	z-index: 4;
	background-color: rgba(60,60,60,0.70) ;
	color:white;
	font-size:8pt;
	padding-left:5px;
	padding-top:2px;
	padding-bottom:2px;
	cursor:move;
}

#CompareWindowFrameResize {
	position:absolute;
	bottom:0px;
	right:0px;
	width:20px;
	height:20px;
	font-size:8pt;
	z-index: var(--annotation-tool-layer);
	cursor:se-resize;
}



#MinimalCompareInfoControl {
	position:absolute;
	left:0px;
	top:70px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}


#MinimalSplitControl {
	position:absolute;
	left:0px;
	top:125px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}

#MinimalABControl {
	position:absolute;
	left:0px;
	top:225px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}


#MinimalWindowedControl {
	position:absolute;
	left:0px;
	top:175px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}

#MinimalDifferenceControl {
	position:absolute;
	left:0px;
	top:225px;
	width:30px;
	border-radius: 0px 15px 15px 0px !important;
}


#CompareImageInfo2 {
	position:absolute;
	right:0px;
	width:180px;
	top:125px;
	height:50px ;
}

#CompareContent {
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
    width: 100%;
    margin: auto;
    background-color: rgb(32, 31, 31);
}


#CompareImage {
	position: relative;
    left:0px;
    margin: auto;
    top:0px;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

#compImageSubContainer {
	position:absolute;
    background-color: rgba(50,50,50,1);
    margin: 0 auto;
    display: none;
	left: 0px;
	/*right: 0px;*/
	top: 0px;
	/*bottom: 0px;*/
	max-height: 100vh;
	border: none;
}


#compImageSubContainer img {
	position: absolute;
	margin: auto;
    max-height: 100vh;
    max-width: 100vw;
}

#CompareCanvas {
    position: absolute;
}

.ic-slider{
	position: absolute;
	width: 12px;
	cursor: pointer;
}
.ic-slider-bar{
	position: relative;
	width: 2px;
	height: 100%;
	background: rgb(240,240,240);
	left: 5px;
}
.ic-slider-handle{
	position: absolute;
	height: 30px;
	width: 30px;
	background: rgb(240, 240, 240);
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	border: 1px solid rgb(0,177,196);
	border-radius: 5px;
	box-shadow: 0px 5px 5px rgba(50,50,50,0.70);

}

.ic-led-on {
	height: 15px;
	width: 15px;
	background-color: rgb(0,240,0);
	border-radius: 50%;
}


#BatchDownloadContainer {
	height:300px;
}


#existingDownloadsList {
    position:absolute;
    margin:0px;
    padding-top:0px;
    padding-left:10px;
    padding-right:10px;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:auto;
	overflow-x:hidden;
	border-top:1px solid white;

}

#existingDownloadsList > li {
    list-style-type:none;
    margin-left:0px;
    padding-left:5px;
    padding-bottom:5px;
    border-bottom: 1px solid grey ;
    width:100%;
}

#existingDownloadsList > li h1 {
    font-size:12px;
    padding:3px;
    padding-bottom:0px;
    margin:3px;
}

#existingDownloadsList > li img {
    position:relative;
    width:64px;
    left:5px;
    top:-1px;
    border:1px solid black;
}

#existingDownloadsList > li .icon {
    width:24px !important;
    padding-right:5px;
    padding-bottom:10px;
    border:none !important;
}

#existingDownloadsList > li .info {
    position:absolute;
    font-size:10px;
    padding:3px;
    margin:3px;
    left:76px;
    right:0px;
    top:15px;
}

.existingDownload {
    position:relative;
    top:0px;
}

.existingDownloadOptions {
    position:absolute;
    right:5px;
    top:0px;
}

#bulkDownloadPane {
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}


#CreateBatchButton {
	margin:10px;
}

#NewBatchLegends {
	position:relative;
	top:-38px;
	left:114px;
	font-size:10pt;
}

#CompareNavParent {
	position: fixed;
	left: 0px;
	text-align:center;
	right: 0px;
	bottom: 0px;
	z-index: 5;
	pointer-events:none;
}

#CompareNavTools {
	left:240px ;
}

/* ************************************************************************* */
/* **************************** WATCH MODULE ******************************* */
/* ************************************************************************* */
#SiteStreamLiveAd {
	width:50%;
	border: 1px solid white;
	border-radius: 5px;
	margin: auto;
	padding: 20px;
	font-size: 10pt;
}

#NoVideoContent {
	width:60%;
	border: 1px solid white;
	border-radius: 5px;
	margin: auto;
	padding: 20px;
	font-size: 10pt;
	margin-top: 10px;
}

#WatchContent {
	position: fixed;
	top: 0;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding:5px;
	background-color: rgba(50,50,50,1);
	color: white ;
}

#WatchVideoSelect {
	background-color:white ;
	color:black;
	font-size:12pt;
	margin-left:10px;
	margin-right:10px;
}

#WatchControlsContainer {
	position:absolute;
	top: var(--nav-height);
	left:10px;
	right:10px;
	height:60px;
	border-bottom: 1px solid rgba(0,177,196,0.5)
}

#WatchControlButtons {
	float:right;	
}

.watch-tab-selection-pane {
	width:100%;
	min-height:100px;
}

#WatchTabsSelectionWrapper {
	position:absolute;
	left:0px;
	top: calc(var(--nav-height) + 60px);
	right:0px;
	bottom:0px;
	padding-left:10px;
	overflow-y:auto;
	overflow-x:hidden;
}

#fotorama_div {
	margin-top: calc(var(--nav-height) + 62px);
}

.fotorama__wrap {
    margin: 0 auto;
}

#GalleryContent {
	position: fixed;
	top: 0;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding:5px;
	background-color: rgba(50,50,50,1);
	color: white ;
}

#GallerySelect {
	background-color:white ;
	color:black;
	font-size:12pt;
	margin-left:10px;
	margin-right:10px;
}

#GalleryControlsContainer {
	position:absolute;
	top: var(--nav-height);
	left:10px;
	right:10px;
	height:60px;
	border-bottom: 1px solid rgba(0,177,196,0.5)
}

#GalleryControlButtons {
	float:right;	
}

#GalleryContainer {
	align-items: center;
	text-align: center;
}

#GalleryInfoLabel {
	background-color: rgba(50,50,50,1);
	color: white ;
}

.gallery-tab-selection-pane {
	width:100%;
	min-height:100px;
}

#galleryTabsSelectionWrapper {
	position:absolute;
	left:0px;
	top: calc(var(--nav-height) + 60px);
	right:0px;
	bottom:0px;
	padding-left:10px;
	overflow-y:auto;
	overflow-x:hidden;
}

.video-iframe-container {
	padding:20px;
	padding-bottom:10px;
}

.selected-video-iframe {
	border: 3px solid white;
}

.pendingVideo {
	padding:20px;
}

.myPendingTextContainer {
	width:400px;
	height: 225px;
	text-align: center;
	border: 1px solid grey;
}

.myVideoClipContainer{
	margin-bottom: 15px;
	display: inline-block;
	overflow: hidden;
	white-space:nowrap;
	vertical-align: top; 
}

.myVideoClipContainer .myVideoTitleOverlay {
	position: absolute;
	font-size: 1.3rem;
	font-weight: 500;
	color: white;
	text-align: center;
	background-color: black;
	opacity: 0.5;
	z-index: 999;
	margin: 0 auto;
	margin-left: 15px;
	padding-left: 20px;
	left: 0;
	right: 0;
	text-align: left;
	top: 0%;
	width: 400px;	
}

.myVideoMessage {
	white-space:normal; 
	word-wrap: break-word;
	color:cyan;
}

/* styles for PTZ controls */
.slider-tilt {
	display: inline-block;
	position: relative;
	height: 240px;
	width: 20px;
	max-width: 20px;
	vertical-align: top;
	z-index: 10;
}

.slider-tilt img {
	display: block;
}

.HorizCtrls {
	position: relative;
    width: 400px;
    height: 38px;
    border-radius: 5px;
    border: 1px solid rgb(4, 215, 243);
	/*margin:auto;*/
	left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:x-small !important;
	color:rgb(255, 255, 255) !important;
	padding-left: 5px;
	margin-bottom: 13px;
	z-index: 10;
}

.HorizPosMarker {
	position: absolute;
	width: 5px;
	height: 12px;
	background-color: white;
	z-index: 10;
}

.VertPosMarker {
	position: absolute;
	width: 12px;
	height: 5px;
	background-color: white;
	z-index: 10;
}

.horizctrltable {
    font-family: Arial, Helvetica, sans-serif;
    font-size:x-small !important;
    color:rgb(4, 215, 243) !important;
}

.ptz_button:hover {
	cursor: pointer;
	box-shadow: 1px 1px rgba(255,255,255,1.0);
}

.ptz_vertslider:hover {
	cursor: pointer;
	box-shadow: 1px 1px rgba(255,255,255, 1.0);
}

.ptz_horizslider:hover {
	cursor: pointer;
	box-shadow: 1px 1px rgba(255,255,255, 1.0);
}

.ControlsFiller {
	display:block;
	height:51px;
	width:100%;
}

#PTZOverlay {
	position: absolute;
	display:none;
	background-color: rgba(0,177,196,0.9);
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	width:300px;
	border-radius: 5px;
	Padding:20px;
	font-size: large;
	font-weight: bold;
	color:white;
	z-index: 20;
}

#PTZSubProgress {
	font-size: small;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
}

/* End of styles for PTZ controls */


#CreateVideoContainer {

}

.spinnerdiv {
	position:absolute;
	z-index: 9;
	
}



.ExpandedVideoWindow {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 120px;
	z-index: 9;
	padding: 25px;
	padding-left: 28px;
	overflow: scroll;
	background-color: rgba(50,50,50,1);
}

.WatchProgressSpinner{
	display:none;
	margin-left: 15px;
}

#AskForUpgradeModal {
	z-index:1100;
}

#OfferUpgradeButton {
	position:absolute;
	left:10px;
}

#CreateGalleryButton {
	position:absolute;
	left:10px;
}

#AddImagesOverlay {
	display:none;
	position: absolute;    
	width:100%;
	height:100%;
	background-color: rgba(50,50,50,1);
	top: 0px;
	left: 0px;
	padding: 0px;
	z-index: 9;
	border: 1px solid rgb(4, 215, 243);
	border-radius: 3px;
}

/* ************************************************************************* */
/* **************************** CONFIGURE MODULE *************************** */
/* ************************************************************************* */

/* ************************************************************************* */
/* **************************** LOGIN MODULE ******************************* */
/* ************************************************************************* */

.loginContent {
	position: fixed;
	top: 0px;
	left:0px;
	right: 0px;
	bottom: 0px;
	padding:5px;
	background-color: rgba(50,50,50,0.7);
	overflow:hidden;
}

#LoginImage {
	display:inline-block;
	margin: 0 auto;
	vertical-align: middle;
	text-align:center;
	z-index: 0;
 	position: absolute;
	right:0px;
	bottom:0px;
}

#InvalidCredentialsLegend {
	color:#FF6666;
	font-size:10pt;
	display:none;
}

/* ************************************************************************* */
/* ******************* MEDIA TWEAKS FOR MOBILE DEVICES ********************* */
/* ************************************************************************* */

/* CSS specific to iOS devices. Not used at moment but leaving it in cos it's a useful hack and may come in handy later
@supports (-webkit-overflow-scrolling: touch) {
  	.thumbnail-control-open {
		border-radius: 15px 0px 0px 15px !important;
		bottom:45px !important;
		width:30px !important;
	}
}
*/

/* Force Date range pickers to stack on small screens */
@media only screen and (max-width: 768px) {
	#DateRangeModal .modal-content {
		min-width:440px !important ;
		max-width:440px !important ;
	}
	.seDatePicker .thumbnail {
		margin-bottom:20px;
	}

}

/* Force Date range pickers to stack on small screens */
@media only screen and (max-width: 576px) {
	.seDatePicker .thumbnail {
		margin-left:20px ;
	}
}

/* CSS specific to mobile devices - used to get mobiles having small/inline horizontal scroll bars */ 
@media (hover: none) {
  	.thumbnail-control-open {
		border-radius: 15px 0px 0px 15px !important;
		width:30px !important;
	}
}

/* Put a border round the login controls if the background image doesn't cover the whole screen */
@media only screen and (min-width: 2170px) {
	#LoginControls {
		border-top:1px solid rgba(0,177,196,0.5);
		border-right:1px solid rgba(0,177,196,0.5);
	}
}

/* Keep message boxes in sensible proportions */
@media only screen and (min-width: 768px) and (max-width: 1000px) {
	#Messages {
		left:100px;
		right:100px;
	}
}

/* Make the navbar transparent for small screens */
@media only screen and (max-width: 768px) {
	.navbar {
		background-color:rgba(0,0,0,0) ;
		pointer-events:none;
	}

	#NavBarToggler {
		pointer-events:all;
	}

	#collapsibleNavbar {
		background-color:rgba(60,60,60,0.70) ;
		pointer-events:none;
	}

	.navbar-brand {
		pointer-events:all;
	}	

	#collapsibleNavbar li {
		padding-left:20px;
		pointer-events:all;
	}

	#Messages {
		visibility: hidden;
		left:40px;
		right:40px;
	}

	#WatchControlsContainer {
		position:absolute;
		top:10px;
		left:120px;
		right:80px;
		height:50px;
		font-size:10pt;
	}

}

/* Create some space for the bottom 'swipe' control that's appearing on fullscreen phones */
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
	.allowMobileSouthControl #NavFirst {
		border-radius: 15px 0px 0px 15px !important;
	}

	.allowMobileSouthControl #NavSearch {
		border-radius: 0px 15px 15px 0px !important;
	}

	.allowMobileSouthControl #ExploreNavTools {
		border-radius: 15px !important;
	}

	.allowMobileSouthControl {
		bottom:15px !important;
	}

	.allowMobileSouthControl #NavCompareDates {
		border-radius: 15px 0px 0px 15px !important;
	}

	.allowMobileSouthControl #NavCompareAll {
		border-radius: 0px 15px 15px 0px !important;
	}

	.allowMobileSouthControl #CompareNavTools {
		border-radius: 15px !important;
	}

}

.fa-pencil-alt:hover {
    color: rgba(0,177,196,1.0) !important;
}
.fa-trash-alt:hover {
    color: rgba(0,177,196,1.0) !important;
}

/* animated wait image for login and wait for main image */
@-webkit-keyframes dyinglight {
	15% {
	  -webkit-transform: scale(1.6);
			  transform: scale(1.6);
	}
	50% {
	  -webkit-transform: rotate(-89deg);
			  transform: rotate(-89deg);
	}
	100% {
	  -webkit-transform: rotate(-90deg);
			  transform: rotate(-90deg);
	}
  }
  
  @keyframes dyinglight {
	15% {
	  -webkit-transform: scale(1.6);
			  transform: scale(1.6);
	}
	50% {
	  -webkit-transform: rotate(-89deg);
			  transform: rotate(-89deg);
	}
	100% {
	  -webkit-transform: rotate(-90deg);
			  transform: rotate(-90deg);
	}
  }
  .dl {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	z-index: 99;
	display: none;
  }
  
  .dl__square {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid black;
	background: rgba(0,177,196,0.5);
  }
  
  .dl__container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	-webkit-transform-origin: 50% 50% 0;
			transform-origin: 50% 50% 0;
	-webkit-animation: dyinglight 1s ease infinite;
			animation: dyinglight 1s ease infinite;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
  }
  
  .dl__corner--top:before,
  .dl__corner--top:after,
  .dl__corner--bottom:before,
  .dl__corner--bottom:after {
	position: absolute;
	width: 17px;
	height: 17px;
	color: rgba(255,255,255,1.0);
	content: "";
  }
  
  .dl__corner--top:before {
	border-left: 2px solid;
	border-top: 2px solid;
	top: -6px;
	left: -6px;
  }
  .dl__corner--top:after {
	border-right: 2px solid;
	border-top: 2px solid;
	top: -6px;
	right: -6px;
  }
  
  .dl__corner--bottom:before {
	border-left: 2px solid;
	border-bottom: 2px solid;
	bottom: -6px;
	left: -6px;
  }
  .dl__corner--bottom:after {
	border-right: 2px solid;
	border-bottom: 2px solid;
	bottom: -6px;
	right: -6px;
  }

  /* animated wait image for thumbnails */
  .thn_spinner {
	position: absolute;
	left: 5px;
	top: 20px;
	width: 100%;
	height: 30px;
	text-align: center;
	z-index: 99;
  }
  
  .thn_spinner > div {
	margin: auto;
	background-color:rgba(0,177,196,1.0);
	height: 100%;
	width: 6px;
	margin-right: 2px;
	display: inline-block;
	
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  
  .thn_spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
  }
  
  .thn_spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
  }
  
  .thn_spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
  }
  
  .thn_spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
  }
  
  @-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
  }
  
  @keyframes sk-stretchdelay {
	0%, 40%, 100% { 
	  transform: scaleY(0.4);
	  -webkit-transform: scaleY(0.4);
	}  20% { 
	  transform: scaleY(1.0);
	  -webkit-transform: scaleY(1.0);
	}
  }