/* Facilite la création de graphiques (horizontaux et verticaux) */
/* @author : HSIM */

/* Common */

.bar{
	background-color:#85CAE4;
}

.bar-male{
	background-color:#85CAE4;
}

.bar-female{
	background-color:#E0B7DE
}

/********************************************************
 * VERTICAL CHART
 ********************************************************/

.vertical-chart .chart{
	padding:0
}

.vertical-chart .caption{
    font-size: 10px;
    font-weight:bold;
	text-align:center;
	padding:0;
	margin-bottom:15px
}

.vertical-chart .chart-column{
	height:150px; padding:0
}

/*.vertical-chart .chart-column:hover .bar{
    background-color:#0E3083;
}*/
.box-primary .vertical-chart .chart-column:hover .bar{
	background-color:white;
}

.vertical-chart .chart-column/*:hover*/ .bar>.value{
	opacity:0.75;
	margin-top:-20px
}

.vertical-chart .chart-column:after{
	content:"";
	background-color:#525252;
	height:1px;
	position:absolute;
	bottom:-1px;
	left:-16px;
	right:-16px;
}
.box-primary .vertical-chart .chart-column:after{
	background-color:white;
}

.vertical-chart .chart-details-container{
	height:150px; display: flex; align-items: center; padding:0
}

.vertical-chart .bar{
	position:absolute; bottom:0; width:100%; transition:0.5s
}

.vertical-chart .value{
	position:absolute;
	left:0;right:0;
	text-align:center;
	top:0;
	opacity:0;
	transition:0.5s;
}

.vertical-chart .caption/*:hover*/>.value{
	top:15px;
	opacity:0.75;
    font-weight:normal;
}

/********************************************************
 * HORIZONTAL CHART
 ********************************************************/
.horizontal-chart .caption{
	border-width:0 1px 0 0; border-color:white; border-style:solid; text-align:right; padding-left:0
}
 
.horizontal-chart .bars-container{
	padding:0;
}

.horizontal-chart .bar{
	position:absolute; top:2px; bottom:2px; left:0; transition:0.5s
}

.horizontal-chart .row>div{
	height:30px;
	line-height:30px;
	transition:0.5s
}

.horizontal-chart .row:hover>div{
	height:60px;
	line-height:60px;
}
.horizontal-chart .row:hover>.caption{
	font-size:2em
}
.horizontal-chart .row:hover .bar{
	top:5px; bottom:5px
}

.horizontal-chart .bar:hover{
	background-color:white !important;
}