
/*  
	FÖRSTASIDAN
	Absolut senaste händelserna 
*/
.KPILatestEvent {
	position:relative;
	float:left;
	padding:0; margin:0;
	margin-top:12px; margin-right:6px; margin-left:6px;
	width:200px;
	border: 2px solid #D76512;
	border-radius: 8px;
	background:#FFFFFF; /* #FBFBFB */
	text-align: center;
}
.KPILatestEvent > p{padding:0; margin:0; line-height:100%; }
.KPILatestEvent > p:nth-of-type(1){font-weight:bold;font-size:20px; color:#D76512; margin-top:10px;}
.KPILatestEvent > p:nth-of-type(2){font-weight:bold; font-size:20px; margin-top:10px; }
.KPILatestEvent > p:nth-of-type(3){font-size:14px; margin-top:14px;}
.KPILatestEvent > p:nth-of-type(4){font-size:14px; margin-top:6px;}
.KPILatestEvent > p:last-of-type { margin-bottom:10px;}



/* ### DIAGRAM BLOCK ### */
/*  Grafer som visar olika diagram */

.statGraph {
	position:relative;
	float:left;
	padding:0; margin:0;
	margin-top:12px; margin-right:6px; margin-left:6px;
	width:300px;
	border: 2px solid #D76512;
	border-radius: 8px;
	background:#FFFFFF; /* #FBFBFB */
	text-align: center;
}
.statGraph > p{padding:0; margin:0; line-height:100%; }
.statGraph > p:nth-of-type(1){font-weight:bold;font-size:20px; color:#D76512; margin-top:8px;}
.statGraph > p:nth-of-type(2){font-size:14px; margin-top:6px; }
.statGraph > p:nth-of-type(3){font-size:14px; margin-top:14px;}
.statGraph > p:nth-of-type(4){font-size:14px; margin-top:2px;}
.statGraph > p:last-of-type { margin-bottom:8px;}

.statGraph2 {
	position:relative;
	float:left;
	padding:0; margin:0;
	margin-top:12px; margin-bottom:12px;margin-right:6px; margin-left:6px;
	padding-bottom:6px;
	width:30%;
	border: 2px solid #D76512;
	border-radius: 8px;
	background:#FFFFFF; /* #FBFBFB */
	text-align: center;
}
.statGraph2 > img {
  max-width: 110%;
  width:100%;
  margin:0;padding:0;
  margin-top:2px;
}
.statGraph2 > p {
  margin:0;padding:0;
  font-size:14px; margin-top:12px;margin-bottom:0;
}

/* ### KPI BLOCK ### */
/*  Månadens senaste händelser */
.KPIBlock {
	position:relative;
	float:left;
	padding:0; margin:0;
	margin-top:12px; margin-right:6px; margin-left:6px;
	width:200px;
	border: 2px solid #D76512;
	border-radius: 8px;
	background:#FFFFFF; /* #FBFBFB */ 
	text-align: center;
}
.KPIBlock > p{
	font-size:12px;
	padding:0; margin:0; 
	line-height:100%;
}
.KPIBlock > p:nth-of-type(1){font-weight:bold;font-size:20px; color:#D76512; margin-top:10px;}
.KPIBlock > p:nth-of-type(2){font-weight:bold; font-size:26px; margin-top:6px; }
.KPIBlock > p:nth-of-type(3){font-size:14px; margin-top:12px;}
.KPIBlock > p:nth-of-type(4){font-size:14px; margin-top:6px;}
.KPIBlock > p:last-of-type { margin-bottom:10px;}


@media all and (max-width: 950px) {
	div.statGraph2 {
		max-width: 60%;
		width:47%;
	}
	.statGraph2 >img {
		max-width: 110%;
		width:100%;
		height: auto;
	}
	
}

@media all and (max-width: 800px) {
		
	div.KPIBlock {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:31%;
	}
	div.KPILatestEvent {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:31%;
	}
	div.StatusKPIBlock {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:31%;
	}
}



@media all and (max-width: 688px) {
		
	div.KPIBlock {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:47%;
	}
	div.KPILatestEvent {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:47%;
	}	
	div.StatusKPIBlock {
		margin:0;
		margin-top:12px;
		margin-left:5px;
		margin-right:5px;
		width:47%;
	}

}

@media all and (max-width: 680px) {
	div.statGraph {
		width:94%;
		margin: auto;
		float: none;
		margin-top:12px;
	}
	div.statGraph2 {
		max-width: 110%;
		width:47%;
	}
	.statGraph2 >img {
		max-width: 110%;
		width:100%;	
	}
} 

@media all and (max-width: 580px) { 

	div.statGraph2 {
		width:94%;
		margin: auto;
		float: none;
		margin-bottom:24px;
	}
	.statGraph2 >img {
		max-width: 110%;
		width:100%;	
	}
}


@media all and (max-width: 516px) {
	div.KPIBlock {
		width:94%;
		margin: auto;
		float: none;
		margin-top:12px;
	}
	div.KPILatestEvent {
		width:94%;
		margin: auto;
		float: none;
		margin-top:12px;
	}		
	div.StatusKPIBlock {
		width:94%;
		margin: auto;
		float: none;
		margin-top:12px;
	}
	div.statGraph {
		width:94%;
		margin: auto;
		float: none;
		margin-top:12px;
	}
}

/* ### RAPPORT OCH INFORMATIONS-BLOCK ### */
.nLatestEvents {
	position:relative;
	clear:both;
	float:left;
	padding:0; margin:0;
	margin-top:12px;
	max-width:450px;
}
.nLatestEvents > p{
	padding:0; margin:0; 
	font-weight:normal;
	font-size:14px;
	margin-top:6px;
	line-height:100%;
}
.nLatestEvents > p:nth-of-type(1){font-weight:bold; font-size:24px; color:#D76512;margin-top:12px; }
.nLatestEvents > p:nth-of-type(2){font-weight:bold; font-size:18px; margin-top:8px; }
.nLatestEvents > p:nth-of-type(3){font-weight:normal;font-style:oblique;font-size:14px;margin-top:8px; }
.nLatestEvents > p:nth-of-type(4){font-weight:normal; font-size:16px;margin-top:4px; line-height:120%;}

.nLatestEvents > p:last-of-type {
  margin-bottom:12px;
}