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


//////////////////////////////////////// Logins Perfomance //////////////////////////////
#user_perf_summ_container{
	width:100%;
	height:30px;
	top:0px;
	left:0px;
	position:absolute
}
.user_perf_info_block{
	width:80px;
	height:30px;
	float:left;
	position:relative;
}
.user_perf_summ_image{
	position:absolute;
	left:10px;
	top:5px;
	width:20px;
	height:20px;
}
.user_perf_summ_text{
	position:absolute;
	left:40px;
	line-height:30px;
	font-size:14px;
	color:$color_db;
}
.user_perf_search_field{
	width:calc(100% - 670px);
	height:30px;
	max-width:300px;
	position:relative;
	top:0px;
	float:right;
	z-index:10;
}

//////////////////////////////////////// Logins Activity ///////////////////////////

#user_activity_table{
	transition:1s;
	width:calc(50% - 1px);
	height:calc(100%);
	position:absolute;
	top:0px;
	left:0%;
	background:$color_white;
	border-right:1px solid $color_gray
}

#user_activity_graph{
	transition:1s;
	width:0%;
	height:calc(100%);
	position:absolute;
	top:0px;
	left:calc(50% - 1px);
	background:$color_white;
	border-right:1px solid $color_gray;
	overflow:hidden
}

#user_activity_graph_text{
	left:10px;
	width:300px
}

#user_activity_graph_max_user{
	width:calc(100% - 10px);
	height:calc(100% - 50px);
	position:absolute;
	top:40px;
	left:10px
}

#user_activity_info{
	transition:1s;
	width:50%;
	height:calc(100%);
	position:absolute;
	top:0px;
	left:50%;
	background:$color_white;
	overflow:hidden
}

#user_activity_filter_container{
	width:100%;
	height:50px;
	top:30px;
	position:absolute;
	left:0%;
	border-bottom:1px solid $color_gray
}

#user_activity_filter_container_inside{
	width:700px;
	height:50px;
}

.logins_activ_search_filter{
	width:350px;
	height:50px;
	float:left;
	z-index:40;
	position:relative
}

#user_activity_top_container{
	position:absolute;
	width:100%;
	top:81px;
	left:0px;
	height:calc(100% - 81px);
	background:$color_white
}

.login_activ_top_graph_container{
	height:50%;
	width:100%;
	position:absolute;
	left:0px
}

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


//////////////////////////////////////// Logins Statistic ///////////////////////////


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

#login_stat_left_block_names_container{
	background:$color_white;
	width:100%;
	top:90px;
	height:calc(100% - 120px);
	left:0px;
	overflow:scroll;
	overflow-x:hidden;
	position:absolute;
	-webkit-user-select: none
}

.login_stat_left_block_names_row{
	background:$color_lg;
	height:30px;;
	border-bottom:1px solid $color_gray;
	border-top:1px solid $color_gray
}

.login_stat_left_block_names{
	width:100%;
	height:30px;
	position:relative
}

.login_stat_left_block_name_letters{
	width:40px;
	height:30px;
	position:absolute;
	left:0px;
	top:0px;
	line-height:30px;
	text-align:center;
}

.login_stat_left_block_name_hidden_container{
	transition:0.4s;
	width:0px;
	height:30px;
	position:absolute;
	left:0px;
	top:0px;
	overflow:hidden
}

.login_stat_left_block_name_hidden_letter{
	width:40px;
	height:30px;
	position:absolute;
	left:0px;
	top:0px;
	line-height:30px;
	background:$color_blue;
	color:$color_white;
	text-align:center;
}
.login_stat_left_block_name_hidden_count{
	width:40px;
	height:30px;
	position:absolute;
	left:40px;
	top:0px;
	line-height:30px;
	color:$color_blue;
	text-align:center;
}
.login_stat_left_block_name_arrow{
	height:16px;
	width:16px;
	cursor:pointer;
	position:relative;
	top:2px;
	left:7px
}
#users_compare_office_search{
	width:300px;
	height:50px;
	float:left;
	z-index:20;
	position:absolute;
	top:0px;
	left:0px
}
#login_stat_select_all{
	bottom:0px;
	left:0px;
	width:calc(285px / 2);
	background:$color_blue
}
#login_stat_deselect_all{
	bottom:0px;
	right:15px;
	width:calc(285px / 2);
	background:$color_red
}
#login_stat_left_block_divider{
	width:1px;
	height:calc(100% - 90px);
	position:absolute;
	top:90px;
	left:284px;
	background:$color_gray
}
#users_compare_container_for_graph{
	width:calc(100% - 360px);
	height:calc(50% - 60px);
	left:310px;
	top:50px;
	position:absolute
}
#users_compare_container_for_value_axis{
	width:120px;
	height:calc(100% - 60px);
	left:0px;
	top:0px;
	position:absolute;
	border-right:1px solid $color_gray
}
#users_compare_container_for_arg_axis{
	width:calc(100% - 120px);
	height:40px;
	left:120px;
	bottom:20px;
	position:absolute;
	border-top:1px solid $color_gray
}
#users_compare_container_for_main_graph{
	width:calc(100% - 120px);
	height:calc(100% - 60px);
	left:120px;
	top:0px;
	position:absolute
}
#users_compare_container_for_arg_selector_container{
	position:absolute;
	left:calc(50% - 170px);
	width:340px;
	bottom:0px;
	height:20px;
}
#users_compare_arg_selector{
	font-size:14px;
	position:absolute;
	left:0px;
	width:170px;
	bottom:0px;
	height:20px;
	background:transparent;
	text-align:right;
	border-bottom: 0px solid $color_gray;
}
#users_compare_arrow_for_argument{
	position:absolute;
	left:170px;
	top:0px;
	z-index:10
}
#users_compare_container_for_val_selector_container{
	position:absolute;
	left:-110px;
	width:240px;
	top:calc(50% - 50px);
	height:20px;
	-ms-transform:rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}
#users_compare_val_selector{
	font-size:14px;
	position:absolute;
	left:0px;
	width:170px;
	bottom:0px;
	height:20px;
	background:transparent;
	text-align:right;
	border-bottom: 0px solid $color_gray;
}

#users_compare_arrow_for_value{
	position:absolute;
	left:170px;
	top:0px;
	z-index:10
}
#users_compare_table_container{
	width:calc(100% - 301px);
	height:50%;
	top:50%;
	left:301px;
	position:absolute
}