/*	COLORES:
	gris fuente barrioca: 87868a 
	gris fuente EM: #999 #AAA
	morado ppal: #9e699a || rgb(158, 105, 154)
	morado fuerte: #7d196c 
	morado mapa: #d6b5cd || rgba(158, 105, 154, 0.2)
	verde: #6eadb0
*/


/* FONTS */

@font-face{
	font-family:"PT Serif";
	src:url("https://e00-elmundo.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.eot");
	src:url("https://e00-elmundo.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.eot?#iefix") format("embedded-opentype"),url("https://e00-elmundo.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.woff") format("woff"),url("https://e00-elmundo.uecdn.es/fonts/PTSerifWeb/pt_serif-web-regular-webfont.ttf") format("ttf")
}

@font-face{
	font-family:"Clear Sans Bold";
	src:url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.eot");
	src:url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.woff2") format("woff2"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.woff") format("woff"),url("https://e00-elmundo.uecdn.es/fonts/clearWeb/ClearSans-Bold-webfont.ttf") format("ttf")
}

body {position: relative; max-width: 990px; margin:auto; height:630px;}
body *{
	outline: transparent !important; 
	font-family: 'PT Serif', serif;
	font-style:normal !important; 
	font-weight:400; color: #505050; 
	font-size:14px;
}	
body *::-moz-focus-inner {border: 0 !important;}

/* CLASES GENERALES */
.dip{display:inline-block;}
.cb{clear:both;}
.fl{float:left;}
.fr{float:right;}
.sinbr{border-right:0px !important;}
.sinmr{margin-right:0px !important;}
.oculto{display:none !important;}
.difuminado{opacity:0.7 !important;}
.psusp{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

span.color_p, span.txt_p{display:inline-block;height:13px;float:left;}
span.seats_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{
	max-width:990px;
	margin:5px auto;
	height:600px;
	background-color:white;
	font-size:15px;
	color:#1a1a1a;
	position:relative;
	opacity:0;
}

#titular{ 
	font-family: 'Clear Sans Bold', sans-serif; 
	font-size:20px; 
	color:#0C3048; 
	height:25px; 
	line-height:30px; 
	margin-bottom:5px; 
	padding-left:15px; 
}

#subtitulo{ 
	font-size:14px; 
	height:15px; 
	line-height:15px; 
	padding-left:15px;
}


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



#dataviz{ width:100%; height:550px; position:relative; }

#tooltip {
	position: absolute;
	min-height: 40px;
	min-width: 90px;
	border: 1px solid #D3D3D3;
	display: none;
	z-index: 10000000;
	background-color: rgba(250, 250, 250, 0.9);
	padding: 5px;
	border-radius:4px;
}

#tooltip p {
	font-size: 13px;
	padding: 3px 6px;
	max-width:400px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#tooltip p.nomPlace{
	font-weight:700;
}


/*   MAPA    */

#mapa_spain{width:66%; height:550px; position:relative; float:left; }

#leyenda{ position:absolute; top:35px; left:15px; z-index:10000; width: 95%;}
.conSerieTemporal #leyenda{ width:62%; }
#leyenda .leyenda_txt{float: left; font-size: 13px;}
#leyenda .leyenda_titulo span{ font-size: 13px; position: absolute; top:-20px; }
#leyenda .gradiente{
	width: 100px;
	height: 10px;  
	border: 1px solid #ddd;
	border-radius: 1px;
	margin:0px 5px;  
	float: left;
}

.leyenda_elem{ padding-top:3px; float:left; }
.leyenda_elem .leyenda_color{ float:left; width:15px; height:15px; border:1px solid lightgrey; margin-right:5px; }
.leyenda_elem .leyenda_txt{ line-height:17px; margin-right:15px; }

#slider_time_container{ position:absolute; top:15px; right:20px; z-index:10001; width: 30%;}

#slider_time_title{ 
	position:relative; 
	width:100%; 
	height:18px; 
	font-size:13px; 
	text-align:left; 
	margin-bottom:5px; 
}

#slider_time{width:100%; height:8px;}
body.tabletNot #slider_time .noUi-handle{
	width:18px; 
	height:18px; 
	left:-9px; 
	top:-6px; 
	border-radius:1em; 
	border-color:#0C3048; 
	border-width:1px;
    cursor: pointer;
}

body:not(.tabletNot) #slider_time .noUi-handle{
	width:25px; 
	height:25px; 
	left:-9px; 
	top:-10px; 
	border-radius:1em; 
	border-color:#0C3048; 
	border-width:1px;
  
}

 #slider_time  .noUi-tooltip{
	width:100px;
	position: absolute;
	top:25px; 
	left:-42px;
	text-align:center;
	background-color:transparent;
	padding:0px;
	border:0;
}

#slider_time .noUi-handle:before{background:0 !important;}
#slider_time .noUi-handle:after{background:0 !important;}
#slider_time .noUi-connect{ background: #1F77B5; }


#slider_time_vals{clear:both; width:100%; margin-top:10px;}
#slider_time_vals span{display:inline-block; font-size:12px;}
#slider_time_vals #slider_time_min{float:left;}
#slider_time_vals #slider_time_max{float:right;}

#usersCantSelect, #usersCantSelectVals{ width:230px !important; }


/* To do: Meter font family: PT Serif Regular */
#fuente{ position:absolute; bottom:5px; left:15px; z-index:10000; width: 90%; font-size:12px;}
#fuente a{font-size:12px; color:#0C3048; text-decoration:underline;}

#mapa_spain svg{height:550px; width:600px;}
#mapa_spain svg .placePath{
	stroke-width:1px;
	cursor:pointer;
	-webkit-transition: fill 200ms linear; -moz-transition: fill 200ms linear;
	-o-transition: fill 200ms linear; -ms-transition: fill 200ms linear; transition: fill 200ms linear;
}

#mapa_spain svg  .placePath.placeSel{ fill:#7d196c; }
#mapa_spain svg  .placePath.conMuertes:not(.provSel):hover{ fill:rgba(125,25,108,0.55);}


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

	DATATABLE
	
******************/

#tabla{width:32%; float:right; height:550px; padding-right:15px;}

table.dataTable td, .dataTable th{
	font-size:13px;
	padding-top:10px;
    padding-bottom:10px;
	text-align:left;
    padding-left: 12px;
	padding-right:10px;
}

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;
}

.dataTables_scrollHead table.dataTable thead{  }
.dataTables_scrollHead table.dataTable thead th{
	position:relative;
	padding-bottom:10px;
	cursor:pointer;
}

.dataTables_scrollHead table.dataTable thead tr{
	/*border-bottom:1px solid #999;
	border-top: 1px solid #999;*/
	background-color: #e2e2e2;
	
}

.dataTables_scrollHead .dataTables_scrollHeadInner{ padding-right:0px !important; width:100% !important; }
.dataTables_scrollHead .dataTable{ width:100% !important; }

.dataTables_scrollHead table.dataTable thead .sorting_asc:after, 
.dataTables_scrollHead table.dataTable thead .sorting_desc:after{
	content: "";
    width: 0;
    height: 0;
    border: 5px solid transparent;
	border-color: transparent transparent  #1F77B5 transparent;
    position: absolute;
    top: 9px;
    right: 11px;
}

.dataTables_scrollHead table.dataTable thead .sorting_desc:after{
	top:15px;
    border-color:  #1F77B5 transparent transparent transparent;
}

table.dataTable tbody tr.selected{background-color:#E68100;}
table.dataTable tbody tr.selected td{color:#fff;}
table.dataTable tbody tr.odd:not(.selected):hover, table.dataTable tbody tr.even:not(.selected):hover{background-color:rgba(5, 38, 103, 0.1)}


table.dataTable tbody tr:not(.odd):not(.even){
	border-bottom:1px solid #1F77B5; 
	cursor:default !important;
}
table.dataTable tbody tr td.group{
	color: #1F77B5; 
	font-family: "RobotoBold";
	cursor:default !important;
}

table.dataTable tbody tr td a:hover{ color:red; }

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

#tabla_filter{display:none;}

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

::-webkit-scrollbar-track {
	background:lightgrey;
}
 
::-webkit-scrollbar-thumb {
	background: #0C3048; 
}


/* MEDIA QUERIES */

@media screen and (max-width: 989px) {
	#container{ width:660px; }
	#mapa_spain{width:100%;}
	#mapa_spain svg{display:block; margin:auto;}
	#tabla{display:none;}
}

@media screen and (max-width: 659px) {
	#titular{font-size:18px;}
	#container{ width:300px; height:435px; }
	#mapa_spain{width:100%; height:385px;}
	#leyenda{ top:auto; bottom: 35px !important; width:95% !important; }
	#slider_time_container{right:auto; width:80%; left:10%;}
	#slider_time  .noUi-tooltip{top:20px;}
	#mapa_spain svg{display:block;width:280px; height:280px; margin:auto; margin-top:40px; pointer-events:none;}
	#tabla{display:none;}
}