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

#87868A --> rgba(135,134,138,1)
#1a1a1a --> rgba(26,26,26,1)

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



body {position: relative; margin:auto; height:500px;}
body *{outline: transparent !important; font-family:'Arial',sans-serif !important; color: #87868A; font-size:15px;}	
body *::-moz-focus-inner {border: 0 !important;}

/* CLASES GENERALES */
.cb{clear:both;}

span.color_p, span.txt_p{display:inline-block;height:15px;float:left;}
span.porc_p{display:inline-block;height:15px;float:right;}
span.color_p{width:6px; margin-right:5px;}
span.txt_p{margin-right:25px;}

span.color_p.color_p_big, span.txt_p.txt_p_big, span.porc_p.porc_p_big{height:28px; font-size:27px;}
span.txt_p.txt_p_big{margin-right:0px;}
span.color_p.color_p_big{margin-right:10px;}

#container{
	width:990px;
	margin:25px auto;
	height:500px;
	background-color:#ffffff;
	font-size:15px;
	color:#87868A;
	position:relative;
	opacity:0;
}

#container .fa{ font-family: FontAwesome !important; }

#pre{position:absolute; width:100%; top:150px; text-align:center;}

#dataviz{ float:left; width:720px; position:relative; }

#leyenda{
	margin:5px auto;
	text-align:center;
}

#leyenda .leyenda_elem{
	display:inline-block;
	margin-right:18px;
	line-height:22px;
}

#leyenda .leyenda_elem span{
	display:inline-block;
	margin-left:5px;
}

#leyenda .leyenda_elem span.nombre{
	font-size:14px; 
}

#leyenda .leyenda_elem span.color{ 
	width:8px;
	height:8px;
	border-radius:4px;
	background-color: #6B9BC3; 
}
#leyenda .leyenda_elem span.color.bubble_0{ background-color: #E5CF6C; }
#leyenda .leyenda_elem span.color.bubble_1{ background-color: #D4E5B5; }
#leyenda .leyenda_elem span.color.bubble_2{ background-color: #E68570; }
#leyenda .leyenda_elem span.color.bubble_3{ background-color: #B6CEE5; }
#leyenda .leyenda_elem span.color.bubble_4{ background-color: #E5B5C5; }
#leyenda .leyenda_elem span.color.bubble_5{ background-color: #B6E4D1; }

#leyenda #info_divisor{ font-size:12px; color: rgba(135,134,138,0.6); }


#d3_container{width:100%; }

#d3_container svg{}

#d3_container svg circle.bubble{ fill: #6B9BC3; stroke: transparent; stroke-width:5px; }
#dataviz.working #d3_container svg circle.bubble{ cursor:pointer; }
#d3_container svg circle.bubble.bubble_0{ fill: #E5CF6C; }
#d3_container svg circle.bubble.bubble_1{ fill: #D4E5B5; }
#d3_container svg circle.bubble.bubble_2{ fill: #E68570; }
#d3_container svg circle.bubble.bubble_3{ fill: #B6CEE5; }
#d3_container svg circle.bubble.bubble_4{ fill: #E5B5C5; }
#d3_container svg circle.bubble.bubble_5{ fill: #B6E4D1; }

#d3_container svg text.titulo_zona{ font-size:14px; fill:#87868A; }
#d3_container svg text.titulo_zona tspan{ font-size:14px; }
#d3_container svg text.titulo_zona.titulo_distrito{ font-size:12px; }
#d3_container svg text.titulo_zona.titulo_distrito tspan{ font-size:12px; }

#d3_container svg text.titulo_zona.viendo,
#d3_container svg text.titulo_zona.viendo tspan{ font-weight:bold; }


#d3_container #tooltip_d3 {
  position: absolute;
  min-height: 20px;
  min-width: 200px;
  display: none;
  z-index: 10000000;
  text-align: left;
  border: 1px solid #D3D3D3;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius:10px;
  padding:6px;
}

#d3_container #tooltip_d3 h2{
	text-align:Center;
	font-size:13px;
	font-weight:bold;
	padding:5px;
}


#d3_container #tooltip_d3 p {
  font-size: 12px;
  line-height: 15px;
  padding: 2px;
}

/*
#d3_container svg text.titulo_zona.titulo_zona_0{ fill: #E5CF6C; }
#d3_container svg text.titulo_zona.titulo_zona_1{ fill: #D4E5B5; }
#d3_container svg text.titulo_zona.titulo_zona_2{ fill: #B6E4D1; }
#d3_container svg text.titulo_zona.titulo_zona_3{ fill: #B6CEE5; }
#d3_container svg text.titulo_zona.titulo_zona_4{ fill: #E5B5C5; }
#d3_container svg text.titulo_zona.titulo_zona_5{ fill: #E68570; }
*/

#info_viz{ 
	position:Relative;
	float:right;
	width:260px; 
	top:0px;
	height:500px;
}

#info_viz #year_title{  
	height: 50px; 
	line-height:40px; 
	font-size:32px; 
	text-align:center; 
	position:relative;
}

#info_viz #year_title #go{
	padding:8px 12px;
	background-color:#fff;
	border: 1px solid #87868A;
	cursor:pointer;
}

#info_viz #year_title #go *{
	float:left; 
	display:inline-block;
}

#info_viz #year_title #go span{
	font-size:15px;
	line-height:15px;
	color:#87868A;
	margin-right:12px;
}

#info_viz #year_title #go i{
	font-size: 14px;
	line-height:16px;
}

#info_viz #year_title span.year_now{
	height: 50px; 
	line-height:50px; 
	font-size:28px; 
	text-align:center; 
}

#info_viz #year_title button.control_viz{
	position:absolute;
	top:6px;
	padding:6px 9px;
	background-color:#fff;
	border: 1px solid #87868A;
	cursor:pointer;
}

#year_title button#control_viz_main{ left:64%; }
#year_title button#prev_year{ left:23%; display:none; }
#year_title button#next_year{ left: 78%; display:none; }

#info_viz #year_title button.control_viz .fa{
	font-size:16px;
	line-height:20px;
}

#info_viz .infotext{
	position:absolute;
	width:80%;
	padding:6%;
	left:4%;
	border:1px dashed #87868a;
}

#info_viz .infotext.base{
	border:1px dashed rgba(135,134,138,0.6);
}
#info_viz .infotext.base p, #info_viz .infotext.base h2{
	color: rgba(135,134,138,0.6);
}

#info_viz #tip_year{ top:80px; }
#info_viz #tip_click{ top:340px; display:none; }

#info_viz div p{ font-size:14px; line-height:21px; }
#info_viz div h2{ font-size:14px; line-height:21px; font-weight:bold; }
#info_viz #tip_year p{ font-size:14px; }
#info_viz #tip_year p.not_first{ margin-top:10px; }

#info_viz #tip_click p{ margin-top:5px; font-size:13px; }

#info_viz #tip_click #close_tip_click {
	position:absolute;
	top:0px;
	right:0px;
	padding:8px;
	font-size:16px;
	line-height:16px;
	cursor:pointer;
}
#info_viz #tip_click.base #close_tip_click{ display:none; }

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

	DATATABLE

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

#tip_click table{ width:100%; }
#tip_click table.dataTable td, #tip_click table.dataTable th{
	font-size:12px;
	padding-top:7px;
    padding-bottom:7px;
	text-align:left;
	/*white-space: nowrap;*/
}

#tip_click table.dataTable tbody tr td, table.dataTable tbody tr{
	-webkit-transition: all 200ms linear; -moz-transition: all 200ms linear;
	-o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear;
}

#tip_click .dataTables_scrollHead table.dataTable thead{  }
#tip_click .dataTables_scrollHead .dataTables_scrollHeadInner{ width:100% !important; }
#tip_click .dataTables_scrollHead .dataTables_scrollHeadInner .dataTable.no-footer{ width:100% !important; }
#tip_click .dataTables_scrollHead table.dataTable thead th{
	position:relative;
	padding-bottom:10px;
	cursor:pointer;
	font-weight:bold;
	font-size:11px;
}

#tip_click table.dataTable th.dt_zona{ width:46% !important; }
#tip_click table.dataTable th.dt_personas{ width:25% !important; }

#tip_click table.dataTable td.dt_zona{ width:46% !important; }
#tip_click table.dataTable td.dt_personas{ width:25% !important; }

#tip_click  table span.circle{
	margin-left:12px;
}

#tip_click .dataTables_scrollHead table.dataTable thead .sorting_asc span,
#tip_click .dataTables_scrollHead table.dataTable thead .sorting_desc span{
    width: 0;
    height: 0;
    border: 4px solid transparent;
	border-color: transparent transparent #6B9BC3 transparent;
    position: relative;
	display:inline-block;
    top: -3px;
    right: -4px;
}

#tip_click .dataTables_scrollHead table.dataTable thead .sorting_desc span{
	top:2px;
    border-color: #6B9BC3 transparent transparent transparent;
}

#tip_click .dataTables_scrollBody{ 
	height:160px !important; 
	overflow-x: auto !important; 
}

#tip_click .dataTables_wrapper .viewport{ width:100% !important; }
#tip_click .dataTables_wrapper .overview{ width:100% !important; }


#tip_click table.dataTable tbody tr:not(.odd):not(.even){
	border-bottom:1px solid #1F77B5;
	cursor:default !important;
}


#tip_click .dataTables_filter{display:none;}
#tip_click .dataTables_length{display:none;}

#tip_click #tabla_filter{display:none;}

#tabla_zona_year thead tr{ display:none; }

#tip_click .mCSB_scrollTools .mCSB_draggerRail{ background-color: lightgrey !important; }
#tip_click .mCSB_inside>.mCSB_container{ margin-right:0px !important; }
#tip_click .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color:#6B9BC3 !important; }

#tabla_zona_year_wrapper{ margin-bottom:12px; }

/*
::-webkit-scrollbar{
	width:6px;
}

::-webkit-scrollbar-track {
	background:lightgrey;
}
 
::-webkit-scrollbar-thumb {
	background:  #1F77B5; 
}
*/