/** @import timeline.css **/
.timeline {
    background-color: inherit;
    vertical-align: top;
}

.timeline .viewlayout {
    border-top: 1px solid #6A6A6A;
    height: 100%;
    width: 100%;
    z-index: 99998;
    position: relative;
}

.timeline.mobile .viewlayout {
	width: auto;
	margin: 0 50px;
}

.timeline .move {
	cursor: pointer;
}

.sensitivity .ui-slider-handle,
.timeline .cursor {
    height: 20px;
    width: 20px;
	margin-top: -10px;
    position: absolute;

    background-color: #fff;
    top: 100%;
    cursor: pointer;
    display: block;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    background: #e2e2e2;
    z-index: 506;
}

.sensitivity {
	width: 99.7%;
}

.sensitivity .ui-slider-handle {
	margin-top: -12px;
}

.sensitivity .ui-slider-horizontal {
	margin-top: 15px;
	height: 0px;
	border-radius: 0;
}

.timeline .cursor > div {
	width: 6px;
	height: 6px;
	background-color: #ccc ;
	margin: 7px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.timeline .cursor:hover > div {
	background-color: #969799;
}

.timeline .timescale {
    background-color: inherit;
	height: 100%;
	width: 100%;
}

.timeline .timescale .scale {
    overflow: hidden;
	height: 50px;
	width: 100%;
	position: relative;
	border-bottom: 1px solid #878787;
}

.timeline .timescale .bottom {
	position: absolute;
	top: 0;
	height: 20px;
	overflow: hidden;
	width: 100%;
}

.timeline .timescale .line.hideline{
	top:-27px;
}


.timeline .timescale .hidetime {
    background-color: #000000;
    height: 100px;
    opacity: 0.5;
    position: absolute;
    top: -1px;
    width: 150%;
    z-index: 505;
}

.timeline .timescale .rescue {
	background-color: #878787;
	bottom: 0;
	position: absolute;
	width: 1px;
}

.timeline .timescale .size-2 {
	height: 2px;
}
.timeline .timescale .size-3 {
	height: 3px;
}
.timeline .timescale .size-4 {
	height: 4px;
}
.timeline .timescale .size-5 {
	height: 5px;
}
.timeline .timescale .size-6 {
	height: 6px;
}
.timeline .timescale .size-7 {
	height: 7px;
}
.timeline .timescale .size-8 {
	height: 8px;
}
.timeline .timescale .size-9 {
	height: 9px;
}
.timeline .timescale .size-10 {
	height: 10px;
}
.timeline .timescale .size-11 {
	height: 11px;
}
.timeline .timescale .size-12 {
	height: 12px;
}
.timeline .timescale .size-13 {
	height: 13px;
}
.timeline .timescale .size-14 {
	height: 14px;
}
.timeline .timescale .size-15 {
	height: 15px;
}
.timeline .timescale .day.size-15 {
	top: 0;
}

.timeline .timescale .rescue span {
	color: #878787;
    font-size: 10px;
    left: -45px;
    position: absolute;
    text-align: center;
    top: -15px;
    white-space: nowrap;
    width: 90px;
}

.timeline .timescale .now {
	/*opacity: 0.4;*/
	background-color: #000;
}

.today {
    bottom: 0;
    color: #878787;
    font-size: 10px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.timeline .timescale .rescue.day span {
	width: 80px;
}
.timeline .timescale .rescue span.left{
	left: -85px;
    top: 2px;
}

.timeline .timescale .rescue span.right{
	left: 5px;
    top: 2px;
}

.timeline div.button {
	background-color: #969799;
	border: none;
	cursor: pointer;
}

.scalebutton {

}

.scalebutton div.button {
	height: 12px;
	text-align: center;
	line-height: 12px;
	padding: 0px;
	color: #000;
	width: 35px;
	background-color: inherit;
	border: 1px solid #000;
	font-size: 10px;
}

.scalebutton > i {
	cursor: pointer;
	opacity: 0.5;
	margin-top: -2px;
}

.scalebutton .buttons{
	position: absolute;
	top: -40px;
	display: none;
	background-color: #000;
	font-size: 12px
}

.scalebutton .buttons > div.button > div {
	color: silver;
}


.scalebutton div.button.active {
	background-color: #333;
	border: 1px solid #000;
}

.scalebutton div.button.active div {
	color: #ccc;
}

.timeline .body .buttons {
    height: 38px;
    position: absolute;
    vertical-align: bottom;
	z-index: 9;
	padding-top: 1px;
	padding-right: 5px;
}

.timeline .body .buttons div.button {
	float: left;
	height: 40px;
	bottom: 0;
	text-align: center;
	vertical-align: baseline;
}

.timeline .controllayout {
	margin-left: 10px;
	text-align: left;
	height: 25px;
	font-size: 12px;
}

.timeline .controllayout > div:not(.tooltip) {
	display: inline-block;
	margin-right: 10px;
	height: 25px;
	line-height: 25px;
}

.timeline .controllayout i {
	opacity: 0.5;
	cursor: pointer;
	font-size: 14px;
}

.controllayout div.button.play > i {
	margin-top: 1px;
}

.timeline .currentday , .timeline .currenttime{
	color: #878787;
}
/*
.scalebutton {
	position: relative;
    top: 4px;
float: left;
}
*/
.scalebutton div.button.plus div, .scalebutton div.button.minus div {
	margin-left: -4px;
    margin-top: -3px;
    position: absolute;
    text-align: center;
	font-weight: bold;
}

.scalebutton div.button.minus div {
	margin-left: -3px;
    margin-top: -3px;
}

.timeline .tooltip {
	position: fixed!important;
	z-index: 600;
	background-color: #fff;
	padding: 2px 5px;
	color: #3B3833;
	opacity: 1;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.timeline .tooltip .text {
	position: relative;
}

.timeline .tooltip .corner {
	background: #fff;
	border: none;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	margin-left: -3px;
	display: inline-block;
	position: absolute;
	z-index: -5;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 50%;
}

.calendar > i {
	opacity: 0.5;
	margin-top: -1px;
	cursor: pointer;
}

.calendar > i,
.scalebutton > i {
	font-size: 16px !important;
}

.prevEventButton > i {
	opacity: 0.5;
	margin-top: -1px;
	cursor: pointer;
	margin-right: -5px;
}

.nextEventButton > i {
	opacity: 0.5;
	margin-top: -1px;
	cursor: pointer;
	margin-left: -5px;
}

.currentEventButton > div {
	color: #878787;
	height: 16px;
	line-height: 16px;
	padding: 2px;
	text-decoration: underline;
	cursor: pointer;
}

.currentEventButton > div:hover {
	color: #fff;
}

.selectEventDialog {
	display: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	overflow: auto!important;
}

.selectEventDialog select {
	max-width: 200px;
}

.selectEventDialog tr:hover {
	cursor: pointer;
}

.ui-datepicker-current {
	display: none
}

.timeline .btn-right, .timeline .btn-left {
	width: 50px;
	background-color: inherit;
	height: 94px;
	display: inline-block;
	position: relative;
	z-index: 510;
	border-top: 1px solid #6A6A6A;
	cursor: pointer;
	margin-top: -46px;
}

.timeline .triangle-left:hover {
	border-left-color: #e2e2e2;
}
.timeline .triangle-right:hover {
	border-right-color: #e2e2e2;
}

.big .timeline .btn-right, .big .timeline .btn-left {
	height: 94px;
}

.timeline .btn-left {
	float: left;
}

.timeline .btn-right {
	float: right;
}

.big .triangle-left {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-right: 40px solid #ccc;
	border-bottom: 30px solid transparent;
	margin: 20px 0 0 4px;
}

.big .triangle-right {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 40px solid #ccc;
    border-bottom: 30px solid transparent;
	margin: 20px 0 0 4px;
}


.triangle-left{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 30px solid #ccc;
	border-bottom: 20px solid transparent;
	margin: 13px 0 0 10px;
}


.triangle-right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 30px solid #ccc;
    border-bottom: 20px solid transparent;
	margin: 13px 0 0 10px;
}

table.motion-image-buttons {
	width: 100%;
	margin-top: 5px;
}

table.motion-image-buttons td {
	width: 33%;
}

.motion-image-buttons a.btn {
	width: 80px;
	margin-right: 5px;
}

.motion-image-buttons span.time {
	margin-right: 5px;
}

table.motion-image-buttons td table {
	width: 100%;
}

div.online {
	color: #fff;
	cursor: pointer;
	background: #878787;
	padding: 2px 5px;
	box-sizing: border-box;
	border-radius: 2px;
	height: 18px !important;
	line-height: 14px !important;
}

div.online > i {
	font-size: 13px !important;
	opacity: 1 !important;
}

div.timescale-nav-button {
	width: 20px;
	height: 20px;
	position: absolute !important;
	z-index: 500;
	padding-top: 2px;
	display: inline-block;
}

div.timescale-nav-button i {
	color: #9c9d9f;
}

div.timescale-nav-button:hover {
	cursor: pointer;
}

div.timescale-nav-button:hover i {
	color: #fff;
}


.control {
    box-shadow: 0 0 5px rgba(0,0,0,1);
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #282828;
    min-height: 25px;
    max-height: 131px;

	background: #45484d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */

	z-index: 100;
}

.controlpanel {
	z-index: 100;
}

.controlpanel td.buttons {
	vertical-align: top;
	padding-top: 21px;
}
.controlpanel div.button.play {
	background-color: inherit ;
	cursor: pointer;
	width: 14px;
	text-align: center;
}

.controlpanel td.buttons div.button {
	display: inline-block;
	border-right: 1px solid;
}

.controlpanel td.buttons div.button:last-child {
	border-right: none;
}

.controlpanel .hideButton {
	width: 50px;
	height: 15px;
	background-color: inherit;
	position: absolute;
	top: 6px;
	left: 50%;
	margin-left: -25px;
	text-align: center;
	cursor: pointer;
}

@media (max-width: 400px){
	.controlpanel .hideButton {
		left: 80%;
	}
}

.controlpanel .hideButton i {
	opacity: 0.5;
	display: block;
	width: 0px;
	border-style: solid;
	margin: 3px auto;
}

.controlpanel .hideButton i:hover {
	opacity: 1;
	border-color: #fff;
}

.controlpanel .hideButton i.down {
	border-width: 10px 20px 0 20px;
	border-color: #ffffff transparent transparent transparent;
}

.controlpanel .hideButton i.up {
	border-width: 0 20px 8px 20px;
	border-color: transparent transparent #ffffff transparent;
}

.controllayout i:hover, .controlpanel div.button.play > i:hover  {
	opacity: 1;
}

.controlpanel .icon-th,
.controlpanel [class^="icon-"],
.controlpanel .icon-resize-full
{
	opacity: .5;
	cursor: pointer;
	position: relative;
}

.controlpanel .buffer,
.controlpanel .stream,
.controlpanel .gried,
.controlpanel .ratio
{
	position: relative;
}

.controlpanel .buffer .select,
.controlpanel .stream .select,
.controlpanel .ratio .select,
.controlpanel .gried .select
{
	position: absolute;
	background-color: #000;
	padding: 5px 0;
	color: #ccc;
	font-style: normal;
	bottom: 20px;
	font-size: 10px;
}

.controlpanel .select > div {
	white-space: nowrap;
	cursor: pointer;
	padding: 0 5px;
	line-height: normal;
}

.controlpanel .select > div.active {
	background-color: #333;
	border: 1px solid #000;
}

.controlpanel .select > div:hover {
	background-color: #282828;
}

.controlpanel .speed-div div.speed-text {
	display: inline-block;
	margin: 0 5px;
	color: #878787;
	min-width: 28px;
	max-width: 36px;
	text-align: center;
	white-space: nowrap;
}

.controlpanel .speed-div .tooltip,
.controllayout .tooltip
{
	background: none;
	box-shadow: none;
}

.controlpanel .speed-div i:hover {
	opacity: 1;
}
.controlpanel .speed-div i {
	opacity: .5;
	cursor: pointer;
}

.controlpanel .ratio {
	color: #878787;
	cursor: pointer;
	text-align: center;
}

.timeline .controllayout .buffer .tooltip,
.timeline .controllayout .stream .tooltip {
	background-color: inherit;
	box-shadow: none;
	width: auto;
}


/** @import events.css **/
.events {
	z-index: 105;
	position: relative;
	overflow: hidden;
	margin-top: 1px;
	min-height: 13px;
}
.events:not(:empty) {
	height: 35px;
}

.events .layout {
}

.events .layout .event {
	/*height: 50%;*/
	height: 10px;
	width: 1px;
	position: absolute;
	float: left;
	z-index: 106;
	background-color: #878787;
	/* border-radius: 0 0 5px 5px; */
}

.events .layout .event.bottom-left-radius {
	border-radius: 0 0 0 5px;
}

.events .layout .event.bottom-right-radius {
	border-radius: 0 0 5px 0;
}

.events .layout .event.bottom-right-radius.bottom-left-radius {
	border-radius: 0 0 5px 5px;
}

.events .layout .event .block {
	background-repeat: no-repeat;
	background-position: 49% 49%;
	height: 25px;
	width: 25px;
	position: absolute;
	bottom: 0;
	background-color: #878787;

	border-radius: 3px;
	margin-left: -13px;
	z-index: 155;
}

.events .layout .event .event_move, .event_move {
}

.events .layout .event.odd.corner .event_notavailable, .events .layout .event.corner .event_available {
	background-color: #ac2020;
}

.events .layout .event.event_move,
.events .layout .event.event_zone_activity_start,
.events .layout .event.event_crossing_line,
.events .layout .event.event_sabotage,
.events .layout .event.event_fire,
.events .layout .event.event_smoke,
.events .layout .event.event_loud_sound,
.events .layout .event.event_face,
.events .layout .event.event_abandoned_objects,
.events .layout .event.schedule_in {
	/*background-color: #008000;*/

	background: rgb(0,165,80); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,165,80,1) 0%, rgba(0,128,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,165,80,1)), color-stop(100%,rgba(0,128,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,165,80,1) 0%,rgba(0,128,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,165,80,1) 0%,rgba(0,128,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,165,80,1) 0%,rgba(0,128,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,165,80,1) 0%,rgba(0,128,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a550', endColorstr='#008000',GradientType=0 ); /* IE6-9 */
}

.events .layout .event.event_notavailable,
.events .layout .event.schedule_out {
	/*background-color: #CE503A;*/

	background: rgb(206,112,57); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(206,112,57,1) 0%, rgba(206,80,58,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,112,57,1)), color-stop(100%,rgba(206,80,58,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(206,112,57,1) 0%,rgba(206,80,58,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(206,112,57,1) 0%,rgba(206,80,58,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(206,112,57,1) 0%,rgba(206,80,58,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(206,112,57,1) 0%,rgba(206,80,58,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce7039', endColorstr='#ce503a',GradientType=0 ); /* IE6-9 */
}

.events .layout .event .hideline {
	position: absolute;
	bottom: 0;
	height: 25px;
	width: 2px;
	background-color: #878787;
	margin-left: -1px;
	z-index: 150;
}



.events .layout .event .cursor {
	cursor: pointer;
}

.events .layout .event .corner {
	border: none;
	width: 24px;
	height: 24px;
	margin-top: 20px;
	margin-left: -13px;
	position: relative;
	z-index: -5;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 32%;
}

.events .layout .event.odd .corner  {
	background-color: #777777;
}

.events .layout .event.up  {
	z-index: 110;
}

.events .layout .event.up .corner  {
	background-color: #24748c;
}

.event_pr {
	font-size: 14px;
	width: 90px !important;
	text-align: center;
	line-height: 20px !important;
	margin-top: 13px !important;
	color: #000;
	border: 1px solid #878787;
	height: 20px !important;

	background: rgb(246,248,249); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}

.event_pr:hover {
	
	z-index: 108 !important;
}