// Place all the styles related to the operations controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

/////////////////////////////// operations perfomance //////////////////////////////
#oper_perf_summ_container{
	width:100%;
	height:30px;
	top:0px;
	left:0px;
	position:absolute
}
.oper_perf_info_block{
	width:70px;
	height:30px;
	float:left;
	position:relative;
}
.oper_perf_summ_image{
	position:absolute;
	left:10px;
	top:5px;
	width:20px;
	height:20px;
}
.oper_perf_summ_text{
	position:absolute;
	left:40px;
	line-height:30px;
	font-size:14px;
	color:$color_db;
}
.oper_perf_search_field{
	width:calc(100% - 640px);
	height:30px;
	max-width:300px;
	position:relative;
	top:0px;
	float:right;
	z-index:10;
}


/////////////////////////////// operations activity //////////////////////////////

#oper_act_table_container{
	transition:0.3s;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background: $color_gray;
	opacity:0.4
}
#oper_activity_table{
	transition:1s;
	width:calc(30% - 2px);
	height:calc(100%);
	position:absolute;
	top:0px;
	left:-30%;
	background:$color_white
}
#oper_act_table_head_text{
	position:absolute;
	left:0px;
	line-height:30px;
	width:100%;
	text-align:center;
}
#oper_act_table_divide{
	width:1px;
	top:70px;
	height:calc(100% - 70px);
	right:15px;
	position:absolute;
	background:$color_gray;
	z-index:2
}
#oper_act_table_body_container{
	width:100%;
	top:70px;
	height:calc(100% - 70px);
	left:0px;
	overflow:scroll;
	overflow-x:hidden;
	position:absolute
}
#oper_active_main_graph_container{
	transition:1s;
	width:calc(70%);
	height:calc(100%);
	position:absolute;
	top:0px;
	left:calc(15% - 1px);
	background:$color_white;
	border-left:1px solid $color_gray;
	border-right:1px solid $color_gray
}

#oper_act_graph_params_container{
	width:100%;
	height:50px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
	border-bottom:1px solid $color_gray
}
#oper_act_graph_search_container{
	width:350px;
	height:30px;
	position:absolute;
	top:10px;
	right:10px
}
#oper_activity_oper_hider{
	transition:1s;
	width:360px;
	height:50px;
	position:absolute;
	top:0px;
	left:calc(100% - 360px);
	border-right:1px solid $color_gray;
	background:$color_white
}
#oper_active_main_graph{
	width:calc(100% - 40px);
	height:calc(100% - 70px);
	position:absolute;
	top:50px;
	left:calc(0% + 20px);
}


/////////////////////////////// operations prediction //////////////////////////////

#oper_pred_filter_container{
	width:350px;
	height:100%;
	top:0px;
	left:0px;
	position:absolute;
	border-right:1px solid $color_gray
}

#oper_pred_filter_header{
	width:350px;
	height:50px;
	position:absolute;
	top:0px;
	left:0px;
	background:$color_red;
	color:$color_white
}

#oper_pred_filter_header_text_block{
	width:230px;
	height:30px;
	left:60px;
	top:10px;
	position:absolute;
}

#oper_pred_filter_header_text{
	width:205px;
	float:left;
	height:30px;
	line-height:30px;
	position:relative
}

.oper_pred_search_fields{
	width:350px;
	height:50px;
	position:absolute;
	left:0px;
	z-index:5
}

#oper_pred_background{
	width:calc(100% - 351px);
	height:100%;
	top:0px;
	left:351px;
	position:absolute;
	background:$color_gray;
	opacity:0.5
}

#oper_pred_block_container{
	width:calc(100% - 351px);
	height:100%;
	top:0px;
	left:351px;
	position:absolute;
	overflow:scroll;
	overflow-x:hidden
}

.oper_pred_outer_blocks{
	width:100%;
	height:300px;
	position:relative;
	transition:0.5s
}

.oper_pred_inner_blocks{
	width:calc(100% - 30px);
	height:calc(100% - 10px);
	position:absolute;
	top:4px;
	left:14px;
	background:$color_white;
	border:1px solid $color_gray;
	overflow:hidden
}

.oper_pred_block_graphs{
	width:calc(100% - 20px);
	height:240px;
	position:absolute;
	top:40px;
	left:10px
}