/* 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-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:#515048;
}*/
.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:#525252; border-style:solid;
    text-align:right;
    padding-left:0;
    padding-right:10px;
    padding-top:15px;
}
.box-primary .horizontal-chart .caption{
	border-color:white;
}

.horizontal-chart .bars-container{
	padding:2px 0;
}

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

.horizontal-chart .row>div{
	height:60px;
	/*transition:0.5s*/
}

.horizontal-chart .total-value{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    line-height:60px;
}

.horizontal-chart .value{
    padding-left:10px;
}

/*.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;
}*/