/*-custom-*/
.nomargin {
	margin: 0 !important
}
.btn-info {
	color: #ffffff !important;
	background-color: #3d78d8;
	border-color: #3d78d8;
}
.widget-box .widget-title a {
	/*color: #555555;*/
	color: #333;
}
.help-block, .help-inline{
	display:inline;
	margin-left: 10px;
}
.modal code {
	color: #345CDB;
	white-space: normal;
}
.btn-xs {
	font-size: 10.5px;
	padding: 3px 8px;
}
.panel i {
	padding-right: 10px;
	font-size: inherit;
}
/*-------*/
#grid{
	min-width: 600px;
	min-height: 400px;
	overflow-y: auto;
}
#grid.fullScreen{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right: 0;
	z-index: 100
}
#grid.fullScreen a.megafon{
	position: absolute;
	top: 5px;
	left: 50%;
	padding: 5px 12px;
	z-index: 101;
	font-size: 20px;
	background: #fafafa;
	opacity: 0;
	border-radius: 50px;
	cursor: pointer;
	color: #00b956;
	box-shadow: 0px 0px 0px 2px #731982;
}
#grid.fullScreen:hover a.megafon{
	opacity: 0.9;
}
#grid.fullScreen a.megafon:hover {
	background: #00b956;
	color: #fafafa;
}
#grid.fullScreen a.full-toggle-close{
	position: absolute;
	top: 5px;
	left: 50%;
	padding: 5px 12px;
	z-index: 101;
	font-size: 20px;
	background: #fafafa;
	opacity: 0;
	border-radius: 50px;
	cursor: pointer;
	color: #2ecc71;
	box-shadow: 0px 0px 0px 2px #26ab5f;
}
#grid.fullScreen:hover a.full-toggle-close{
	opacity: 0.9;
}
#grid.fullScreen a.full-toggle-close:hover {
	background: #2ecc71;
	color: #fafafa;
}
/******************/
#grid.remove-header .grid-cell .name-header{
	 top:-30px;

	 -webkit-transition: all .3s ease-out;
     -moz-transition: all .3s ease-out;
     -o-transition: all .3s ease-out;
     -ms-transition: all .3s ease-out;
     transition: all .3s ease-out;
}
#grid.remove-header .grid-cell .player{
	margin-top: 0px;
	height: calc(100% - 30px);
}
#grid.remove-footer .grid-cell .control{
	 bottom:-30px;

	 -webkit-transition: all .3s ease-out;
	 -moz-transition: all .3s ease-out;
	 -o-transition: all .3s ease-out;
	 -ms-transition: all .3s ease-out;
	 transition: all .3s ease-out;
}
#grid.remove-footer .grid-cell .player{
	margin-top: 30px;
	height: calc(100% - 30px);
}
#grid.remove-footer.remove-header .grid-cell .player{
	margin-top: 0px;
	height:100%;
}


#grid.remove-footer.remove-header .grid-cell:hover .name-header{
	top: 0;
}
#grid.remove-footer.remove-header .grid-cell:hover .player{
	margin-top: 30px;
	height:calc(100% - 60px);
}
#grid.remove-footer.remove-header .grid-cell:hover .control{
	bottom: 0;
}

#grid.remove-footer .grid-cell:hover .name-header{
	top: 0;
}
#grid.remove-footer .grid-cell:hover .player{
	margin-top: 30px;
	height:calc(100% - 60px);
}
#grid.remove-footer .grid-cell:hover .control{
	bottom: 0;
}

#grid.remove-header .grid-cell:hover .name-header{
	top: 0;
}
#grid.remove-header .grid-cell:hover .player{
	margin-top: 30px;
	height:calc(100% - 60px);
}
#grid.remove-header .grid-cell:hover .control{
	bottom: 0;
}

/******************/
.grid-cell{
	border: 2px solid black;
	position: relative;
	padding: 0px;
	overflow: hidden;
}
.grid-cell .name-header{
	position: absolute;
	top: 0;
	left: 0;

	height: 30px;
	width:100%;
	/*background: linear-gradient(to right, #2ecc71 60%, #34495e 115%);*/
	background: #555;
	color: white;
	text-shadow: 1px 1px 1px black;
	float: left;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.grid-cell .name-header:hover {
	background: #414141;
}
.grid-cell .player{
	margin-top: 30px;
	height: calc(100% - 60px);
	width:100%;
	background:#121212;
	float: left;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.grid-cell .player video{
	width: 100%;
	height:100%;
	object-fit: fill;
	/* background-image: url(/ipeye_service/img/load.svg); */
    background-repeat: no-repeat;
    background-size: 15% 30%;
    background-position: center;
}
.grid-cell .control{

	position: absolute;
	bottom: 0;
	left: 0;
	height: 30px;
	width:100%;
	background: linear-gradient(to right, #3c3c3c, #847d7d , #3c3c3c);
	color: white;
	padding: 0px 15px;
	text-shadow: 1px 1px 1px black;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
	/* float: left; */
}

.view-4 .grid-cell{
	width:50%;
	height: 50%;

}
.view-6 .grid-cell{
	width:33.33%;
	height: 50%;
}
.view-9 .grid-cell{
	width:33.33%;
	height: 33.33%;

}
.view-12 .grid-cell{
	width:25%;
	height: 33.33%;
}
.view-15 .grid-cell{
	width:20%;
	height: 33.33%;
}
.view-16 .grid-cell{
	width:25%;
	height: 25%;
}
.view-20 .grid-cell{
	width:20%;
	height: 25%;
}
.view-24 .grid-cell{
	width:16.66%;
	height: 25%;
}
.view-30 .grid-cell{
	width:20%;
	height: 33.33%;
}
#grid.view-30 .grid-cell{
	width:20%;
	height: 250px;
}
.border-name{
	margin: 10px 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.select2-container--default .select2-selection--single {
     background-color: transparent;
     border: none;
     border-radius: 0px;
     color: white;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	color:white;
}
.megafon_btn{
	margin: 0px -2px;
	padding: 10px 15px;
	font-size: 20px;
	display: inline-block;
    text-decoration: none;
    text-align: center;
    position: relative;
    cursor: pointer;
	color:#00b956;
    vertical-align: top;
    background: #fafafa;
    -webkit-transition: background .3s ease-out;
    -moz-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    -ms-transition: background .3s ease-out;
    transition: background .3s ease-out;
}
.noborder-radius {
	border-radius: 0;
}
#board-header .widget-title a {
	padding: 7px 12px;
}
.megafon_btn:hover{
	color:#fafafa;
	background: #00b956;
	-webkit-transition: background .3s ease-out;
    -moz-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    -ms-transition: background .3s ease-out;
    transition: background .3s ease-out;
}
#board-header .widget-title a:hover{
	color:#fafafa;
	background: #337ab7;
	-webkit-transition: background .3s ease-out;
    -moz-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    -ms-transition: background .3s ease-out;
    transition: background .3s ease-out;
}
.toggle-control:hover{
	color:#fafafa;
	background: #337ab7;
	-webkit-transition: background .3s ease-out;
    -moz-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    -ms-transition: background .3s ease-out;
    transition: background .3s ease-out;
}
.megafon_btn i.topshadow {
	 box-shadow: 0px -3px 0px 0px #00b956;
}
.toggle-control i.topshadow {
	 box-shadow: 0px -3px 0px 0px #333;
}
.megafon_btn i.bottomshadow {
	 box-shadow: 0px 3px 0px 0px #00b956;
}
.toggle-control i.bottomshadow {
	 box-shadow: 0px 3px 0px 0px #333;
}
.megafon_btn:hover i.topshadow,
.toggle-control:hover i.topshadow {
	 box-shadow: 0px -3px 0px 0px #fafafa;
}
.megafon_btn:hover i.bottomshadow,
.toggle-control:hover i.bottomshadow {
	 box-shadow: 0px 3px 0px 0px #fafafa;
}
.megafon_btn.active {
	color:#fafafa;
	background: #00b956;
}
.toggle-control.active {
	color:#fafafa;
	background: #337ab7;
}
.megafon_btn.active:hover {
	color:#fafafa;
	background: #731982;
}
#board-header .widget-title .toggle-control.active:hover {
	color:#fafafa;
	background: #253544;
}
.toggle-control.active i {
	color: #fafafa;
}
.megafon_btn.active i.topshadow,
.toggle-control.active i.topshadow {
	 box-shadow: 0px -3px 0px 0px #fafafa;
}
.megafon_btn.active i.bottomshadow,
.toggle-control.active i.bottomshadow {
	 box-shadow: 0px 3px 0px 0px #fafafa;
}
.right-border{
	border-right: 1px solid #cdcdcd;
}
.control-btn{
	color: #2ecc71;
    font-size: 20px;
    /* padding: 0px 0 0px 15px; */
	cursor: pointer;
	margin-right: 10px;
}
.control-btn:hover{
	color: #26ab5f;
	-webkit-transition: color .3s ease-out;
    -moz-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    -ms-transition: color .3s ease-out;
    transition: color .3s ease-out;

}
/************************************************************/
#fixed_row{
	position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    padding: 10px 10px;
	    z-index: 120;
	    background: rgba(60, 60, 60, 0.9);
}
#fixed_row .v100,#fixed_row .widget-box{
	height: 100%;
}
#fixed_row .widget-box .widget-content{
	height: calc(100% - 36px);
}
#big_player{
	height: 100%;
    width: 100%;
	background-image: url(/ipeye_service/img/load.svg);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
}
.mini-grid{
	height: 250px;
	overflow: auto;
	width: 100%;
	cursor: pointer;
}
.mini-grid .grid-cell{

	border: 2px solid #34495e;
	/*background-image: url('/ipeye_service/img/fav.png');*/
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: center;
}
.grid-img{
	width:100%;
	height:100%;
}
.widget-title .icon > .btn {
	padding: 0;
	background: none;
	margin: 0;
	line-height: 1;
}
.name_input{
	width: calc(100% - 45px);
	padding: 0px 5px;
	margin-top: 6px;
	box-shadow: none;
}
.panel-body{
	padding:15px 0px;
}
.panel-group{
	margin-bottom: 15px;
}
.panel-default>.panel-heading{
	/*background: linear-gradient(to right, #2ecc71 60%, #34495e 115%);
	background: #999;*/
	color: white;
}
/*.panel-default>.panel-heading:hover{
	background: #3d78d8;
}*/
.panel-title > a {
	width:100%;
	padding: 12px 35px 12px 15px;
  color: #ffffff;
  font-weight: normal;
  background-color: #3d78d8;
  /* width: calc(100% - 126px); */
  display: inline-block;
  position: relative;
	cursor: pointer;
}
.panel-title > a.collapsed {
	background-color: #999;
}
.panel-title > a:hover {
	background-color: #3d78d8;
}
.player .play-btn{
    width: 100%;
    height: 100%;
   background: red;
   opacity: 0.5;
}
.head-span{
    background: #34495e;
    padding: 12px 25px;
    /*margin: -10px -15px 0 0;*/
		margin: 0;
    cursor: pointer;
}
.head-span:hover {
    background: #253544;
}
.player>img{
    width: 100%;
    height: 100%;
}
.playerFillButton{
    position: absolute;
margin: 0 auto;
width: 100%;
top: calc(50% - 37px);
/*opacity: .45;*/
text-align: center;
}

.btn-link{
	color: #2ecc71;
}
.playerFillButton:hover .btn-link{
	color: #26ab5f;
}
.big_player_wrapper{
	position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
	padding: 20px;
background: #5f5e5eb8;
}

.big_player_wrapper .widget-content{
	padding: 0;
	height: calc(100% - 36px);
}
.mini-grid-container.active{
box-shadow: 0 0 10px 5px #34495e;
}
.v100{
	height: 100%;
}
.panel-heading h4 small{
	display: inline;
	    color: #dedddd;
}
#big_player{
	height: calc(100% - 100px);
    width: 100%;
	background-image: url(/ipeye_service/img/load.svg);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
}
#archive_player{
    height: calc(100% - 100px);
    width: 100%;
	background-image: url(/ipeye_service/img/load.svg);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
}
.timelines-wrap{
    height: 100px;
    width: 100%;
    background: linear-gradient(to right, #3c3c3c, #847d7d , #3c3c3c);
    margin-top: -5px;
}
.vis-time-axis .vis-text {
    color: #fff;
}
.vis-item{
    background: #2ecc71;
    border-color: #2ecc71;
}
.big_player_control{
    text-align: center;
}
.vis-item.vis-range{
    border: none;

}
.vis-item.vis-selected{
    background: #2ecc71;
    border-color: #2ecc71;
}
.timlines{
    width:100%;
    float: left;
}
.big_player_control{
    width:100%;
    float: left;
    color: white;
	padding: 0 15px;
}
.vis-custom-time {
  background-color: #357ebd;
  width: 3px;
  cursor: move;
  z-index: 3;
}
.live-btn.active{
    color:#2ecc71;
    text-decoration: none;
}
.live-btn{
    cursor: pointer;
    text-decoration: line-through;

}
.datepicker{
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: underline;
    cursor:pointer;
}
@media (max-width: 797px) {
	.head-span{
		padding: 20px 25px 21px;
	}
}
@media (min-width: 755px) and (max-width: 767px) {
	.head-span{
		padding: 12px 25px;
	}
}
@media (max-width: 517px) {
	.head-span{
		padding: 29px 25px;
	}
}
@media (max-width: 444px) {
	.head-span{
		padding: 37px 25px 38px;
	}
}
/*#00b956 - зеленый      box-shadow: 0px -3px 0px 0px green;
	#731982 - другой
	#00aeef */

/*style*/
.big_player_control span{
	padding-left: 10px;
	cursor: pointer;
}
#archive_playback-btn{
	position: relative;
}
#archive_playback-btn ul{

	position: absolute;
	bottom: 15px;
	z-index: 1200;
	background: black;
	list-style: none;
	padding: 10px 0;
	border-radius: 10px;
	left: -9px;
	border: 1px solid #2ecc71;
	color: white;

}
#archive_playback-btn ul li{
	padding: 0 10px;
}
#archive_playback-btn ul li:hover{
	color:#26ab5f;
}
#archive_playback-btn ul li.active{
	background: #2ecc71;
}
.big_archive_btn{
	color:#2ecc71;
}
.big_archive_btn:hover{
	color:#26ab5f;
}
#screenshots{
	color:#2ecc71;
}
#screenshots:hover{
	color:#26ab5f;
}
#m_noise{
	color:#2ecc71;
}
#m_noise:hover{
	color:#26ab5f;
}
#gritter-notice-wrapper{
	z-index: 2000;
}
.gritter-image {
	width: 100%;
	height: auto;
	float: none;
}
.gritter-with-image {
	width: 100%;
	float: none;
}
#big_player{
	margin-bottom: 5px;
}
.vis-item.vis-range {
	border-radius: 0px!important;
	top: 0px!important;
	height: 100px!important;
}
.gritter-title{
	font-size: 10px;
}
.gritter-with-image p{
	font-size: 12px;
}
.gritter-with-image p a{
	font-size: 10px;
}
.share-wall{
	cursor: pointer;
}

.widget-title.auto-height{
	min-height: 36px;
	height: auto;
}
/*--*/