/* Vertical bar chart CSS starts here */
/* Bar Delays Animation Function */
.ar25-verticalChart {
	
	&.annualReport-section {padding-bottom: 20px;}

.barDelays (@index, @moredelay, @amount) when (@index<(@amount+1)){
  @multi:(@index*200ms);
  @delay:@multi+@moredelay;
  
  .chartRow:nth-of-type(@{index}) {
    .bar {
      transition: 1s @delay;
    }
  }

  .barDelays(@index+1, @moredelay, @amount);
}

/* Chart Styles */
@label-width: 150px;
@number-width: 30px;
@bar-height: 26px;

	
.chart-wrap:after {
}

.chart-wrap {
  /*max-width: 372px*//*900px*/;
  /*margin: 0 auto;*/
  /*padding: 10px;
  border: 1px solid #eeeeee;*/
	width: 31.5%;
	min-width: 247px;
	float: left;
	/*margin: 20px 1.0%;*/
	margin-top: 0px;
	margin-bottom: 40px/*45px*/;
	margin-left: 0.9%;
  margin-right: 0.9%;
	padding: 30px 30px 17px 30px/*30px 25px 25px 25px*/;
    border: 2px solid #5A287D;
    border-radius: 20px;
	align-content: end;
	position: relative;
	
&::after {
  content: "";
  position: absolute;
  width: 85%;
  height: 1px;
  border-bottom: 1px solid #3C1053;
  bottom: 55px;
  left: 8%; 
}

  .chart-title {
	font-family: 'RNHouseSansW01Bold'/*'RNHouseSansW01Regular','knilebold'*/;
	/*font-weight: 700;*/
	font-size: 22px;
	line-height: 24px;
	letter-spacing: -1%;
	color: #5a287d;
	margin-bottom: 20px;
	  margin-top: 0px/*25px*/;
	height: auto/*36px*/;
	display: block /*flex*/;
	align-items: flex-end;
    /*text-align: center;*/
    /*text-transform: uppercase;*/
	  
  }
	
.chartBottomFigureMain {
	font-family: 'knilebold'/*'knileblack'*/;
	/*font-weight: 700;*/
	font-size: 32px;
	line-height: 34px;
	letter-spacing: -1%;
	color: #5A287D;
	margin-top: 15px;
	margin-bottom: 0px/*20px*/;
	
}
  
  .chartRow {
    position: relative;
    height: @bar-height;
	  margin-top: 40px;
    margin-bottom: 5px/*2px*//*15px*/;
	  display: flex;
  }
  
  .bar-wrap {
    position: relative;
    /*background: rgb(215, 219, 222);*/
    width: 88%/*84%*//*100%*/;
	max-width: 238px/*258px*/;
    height: 100%;
	height: 38px/*40px 20px*/;
    overflow: visible/*hidden*/;
    
    .bar {
		position: absolute;
		top: 0;
		left: 0;
		height: 38px/*40px 100%*/;
		/*width: 10%;*/
		background: #F2EAF9/*#B388EC*/ /*#d9d0e1*//*rgb(243, 113, 103)*/;
		/*transition: all 1s;
		transform: translateX(-100%);*/
		border-radius: 0 6px 6px 0 ;
		overflow: visible/*hidden*/;
		
		.bar.bar-1 {/*width: 10%;
			transition: all 1s;
			transform: translateX(-100%);*/}
      
      &.in {
        transform: translateX(0%);
      }
		
    }
	  .bar-1 {
		  /*background: #5a287d #5e3281;*/
		  /*color: #ffffff;*/
	  
	  }
  }

  // Generate Bar Delays
  .barDelays(1, 200ms, 7);
  
  .label {
	position: relative /*absolute*/;
	top: 0;
	left: 0;
	/*width: @label-width;*/
	  width: 12%/*16%*/;
	padding-left: 10px;
	text-align: left;
	font-family: 'RNHouseSansW01Regular'/*"RNHouseSansW01Bold"*/;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: -1%;
	/*line-height: @bar-height;*/
	text-transform: uppercase;
	font-weight: normal;
	z-index: 10;
	padding: 10px 8px 18px 0px/*13px 10px 13px 0px*/;
	color: #646068/*#ffffff*//*#5a287d*/;
	  rotate: 90deg;
  }
  
  .number {
	position: absolute;
	top: 12px/*0*/;
	right: -56px/*-50px*//*-55px*//*0*/;
	/*width: @number-width;*/
	  width: 75px;
	padding-right: 10px;
	font-family: "RNHouseSansW01Regular", "RNHouseSansW01Bold";
	font-size: 12px;
	/*line-height: 14px;*/
	letter-spacing: -1%;
	/*line-height: @bar-height;*/
	/*font-weight: bold;*/
	color: #5A287D/*#ffffff*/;
	text-align: center/*right*/;
	z-index: 10;
	padding: 0/*10px 8px*//*12px 10px*/;
	  margin: 0px 6px/*8px 6px*/;
	  rotate: 90deg;
  }
	
	/*.bars-horizontal {
		color: #5a287d;
	padding: 25px 30px 21px 30px;
    border: 1px solid #5a287d;
    border-radius: 20px;
	}*/
	.bars-vertical {
		color: #5a287d;
		padding: 0/*25px 30px 21px 30px*/;
		border: 0px solid #5a287d;
		/*border-radius: 20px;*/
		rotate: -90deg;
		height: 320px;
		width: 320px/*309px*/;
		text-align: right;
		align-content: flex-end;
		float: right;
		border-top: 40px solid transparent;
      /*overflow: hidden;*/
		
	}
	.bars-vertical:after {
		content: "";
  position: absolute;
  width: 100%;
  height: 1px;
 /* border-bottom: 1px solid #3C1053;*/
  left: -122px;
  rotate: 90deg;
/*  right: 0;
  bottom: 2px;
  display: block;
  float: left;*/
  top: 50%;
		
	}
	
	.chartRow-1 .bar-1 {background: #B388EC/*#5a287d;*/}
	.chartRow-1 {color: #5A287D/*#ffffff*/;}
	.chartRow-1 .label {color: #646068/*#ffffff*/;}
	.chartRow-1 .number {color: #5A287D/*#ffffff*//*#5a287d*/; /*background: #d9d0e1;*/ /*transition: all 1s;*/ font-family: "RNHouseSansW01Bold"; }
	
  
	
  @media screen and (min-width:800px) {
    .chartRow {
      padding: 0 (@number-width + 10px) 0 (@label-width + 10px); 
    }
    .label {
      text-align: right;
      /*padding-left: 0;*/
    }
    .number {
      /*text-align: left;*/
      /*padding-right: 0;*/
    }
  }
	
	
}

	@media all and (max-width:991px){
	.chart-wrap {width: 48%;}
	}
	@media all and (max-width:767px){
	.chart-wrap {width: 100%;}
	}
	
/* Animate first bar only function starts here*/
.chartRow-1 .bar.bar-1::before {
  content: ' ';
  width: 1%;
	/*width: 100%;*/
  height: 100%;
  background: #5A287D/*#5a287d*/;
  position: absolute;
	border-radius: 0 6px 6px 0;
  top: 0;
  left: 0;
  right: 0;
  /*transition: all 0.3s/*1s* /; */
  /*transform: translateX(-100%);*/
	opacity: 0;
}
.chartRow-1 .animateBar1.bar.bar-1::before {
  width: 100%;
}
.chartRow-1 .animateBar1.bar.bar-1 .number {color: #5A287D/*#ffffff*/; /*background: #5a287d;*/}
	
	
.chartRow-1 .animateBar1-vertical.bar.bar-1::before {
  width: 100%;
	opacity: 1;
}
.chartRow-1 .animateBar1-vertical.bar.bar-1 .number {color: #5A287D/*#ffffff*/; background: #FFFFFF/*#5a287d;*/}

/* No animation on Bar-1 checkbox, show color in Bar-1 on page load */
.noJSAnimateBar1 .chartRow-1 .bar.bar-1 {/*background: #5A287D;*/}
.noJSAnimateBar1 .chartRow-1 .bar.bar-1::before {opacity: 1; width: 100%;}


/* Animate first bar only function ends here*/

.chart-bottom-number {margin-bottom: 10px;}
/*.chartOuterWrap {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;* /
}*/
.chartOuterWrap-verticalCSS {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
}

.downloadBottomLink {margin-top: 10px;}
	
/*	 Shareholder value RHS chart CSS starts here */
.RHSverticalChart {
	.chart-wrap {border: 0; margin-bottom: 5px; padding: 0; width: 100%; min-width: 100%;
		&::after { width: 98%; left: 0; bottom: 56px; }
		
		.chartOuterWrap-verticalJS { /*padding: 0px 50px 20px 10px;*/ /*padding-bottom: 20px;*/ float: left; width: 100%; margin-top: 30px; /*padding-right: 10%;*/ }
		
		.label {top: -2px; left: -8px;}
		.bars-vertical {width: 231px/*201px*/; height: 249px/*225px*/; border-top: 0; position: relative; margin: 0px; margin-right: 11.9%; padding-left: 22px;}
		.chartRow {margin-top: 19%/*47px*/; margin-bottom: 0%;}
		
	@media all and (min-width:992px) and (max-width:1150px){
	.chartRow {margin-top: 10%;}
	}
	
	
	}
	
	
}
/*	 Shareholder value RHS chart CSS ends here */
	
}
/* Vertical bar chart CSS ends here */