/*Bar Chart*/

.bar-parent-hor{
	width:auto;
	max-width: fit-content;
	/*max-width: -moz-fit-content;*/
	height:auto;
	display:block;
}

.bar-parent,.col-parent,.custom-col-parent{
	position:relative;
	margin-top:50px;
}
.col-parent{
	display: grid;
	grid-template-rows: 1fr 15px;
	margin-bottom: 4vh;
	place-items:end; /*NEW*/
}

.bar-parent-hor{
	position:relative;
}

/*CHECK*/
#hidden-col3.hidden{
	height:0;
	opacity:0;
}

.pie-title,.dohnut-title{
	/*text-align:center;*/
	margin-top:55px;
}

.hidden{
	height:0;
	width:0;
	opacity:0;
}

.show-hor{
	opacity:1;
    border-radius: 0 6px 6px 0;
    display: block;
    height: 50px;
    margin: 45px 0;
    transition-property: width;	
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 1s;
	width:inherit;
}
.static.show-hor{
	transition-property: none;	
}

/*Bar chart outline*/
/*,.outline.mob-bar*/.show-hor.outline{
	padding-bottom:1px;
}
.show-hor.outline::after{
	content: " ";
    border: solid 1px;
    width: 100%;
    height: inherit;
    display: block;
    position: absolute;
    top: 0;
	border-radius: 0 6px 6px 0;
	border-color: inherit;
}

/*Column chart*/

.vertical-bar{
	max-height: -webkit-fill-available;
	max-height: -moz-available;
	position:absolute;
	bottom:0;
	opacity:1;
    border-radius: 6px 6px 0 0;
    display: grid;
	place-items:center;
    margin-top: 5px;
    transition-property:height;	
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 1s;
	height:inherit;
}

.vertical-col-outline{
	max-height: -webkit-fill-available;
	max-height: -moz-available;
	position:relative;
	bottom:0;
	opacity:1;
    border-radius: 6px 6px 0 0;
    display: grid;
	place-items:center;
    transition-property:height;	
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 1s;
	height:inherit;
}

.static.vertical-bar{
	transition-property: none;	
}

.col-title{
	margin-top: 55px;
	margin-bottom: 0;
	height:100%;
}

.col-percent{
	padding: 0.2em;
	/*font-size: 20px;*/
}

/*Column chart OUTLINE*/

@-moz-document url-prefix() {
	.vert-outline::after{
		height: 100%;
	}
}

.outline-par,.outline-par2{
	position: relative;	
}

/*.vert-outline::after{*/
  .vertical-col-outline::after{
	content: " ";
    border: solid 1px;
    /*width: 50px;*/
	width: inherit;
    height: -webkit-fill-available;
	height: 100%;
    display: block;
    position: absolute;
    border-radius: 6px 6px 0 0;
    border-color: inherit;
}

/*Bar Chart END*/

/*Pie Animation*/

.my{
	animation-delay: 2s;
}

@keyframes example {
  0%   {transform:rotate(0deg);}
}

/*PIE*/

#the-pie,#the-pie2{	
	background-color:transparent;
	--my-start: 0,0,0,0;
	position: relative;
	display:grid; 
	place-items: center;
}
#the-pie2{
	max-width: 250px;
}

svg {
	display: block;
	height: auto;
	width: 100%;
	position: relative;
}

circle {
	fill:rgba(0,0,0,0);
}

#the-pie.my.baby>svg>#pie1,#the-pie2.my.baby>svg>#pie2{
	-webkit-animation: pie1 13s ease-in-out;
  	animation: pie1 13s ease-in-out;
	stroke-width:49.5%; /*50.5%*/
  	stroke-dasharray: 0,0,0,100;
  	stroke-dashoffset: 25; 
		position:absolute;
	animation-fill-mode:forwards;
}

#the-pie.my.static.baby>svg>#pie1,#the-pie2.my.static.baby>svg>#pie2{
	-webkit-animation: pieStatic 0.01s ease-in-out;
  	animation: pieStatic 0.01s ease-in-out;;
	stroke-width:49.5%;
  	stroke-dasharray: 0,0,0,100;
  	stroke-dashoffset: 25; 
		position:absolute;
	animation-fill-mode:forwards;
}

.pie-parent {
	position: relative;
	width:fit-content;
	padding-top: 2em;
}

@keyframes pie1 {
    50% { stroke-dasharray: var(--my-start); }
    100% { stroke-dasharray: var(--my-end); }
}
@keyframes pieStatic {
    90% { stroke-dasharray: var(--my-start);opacity:0.2; }
    100% { stroke-dasharray: var(--my-end);opacity:1; }
}

/*Donut*/

.pie-percent,.col-percent,.donut-percent,.bar-percent{ 	
	opacity:0;
	visibility:hidden;
}
#the-donut2{
	max-width: 250px;
}

#the-donut .donut-percent, #the-donut2 .donut-percent,.pie-parent .pie-percent{
	margin-top:0;
	margin-bottom:0;
}

.pie-percent::after{
	position: absolute;
    top: 3%;
    left: 100%;
}

@keyframes animastat {
	from{ opacity:0;}	
	to{opacity:1;}	
}

@keyframes animatrix {
	from{ transform: translate(-50%,3em);
	opacity:0;}	
	to{transform: translate(-50%,-50%);
	opacity:1;}	
}

@keyframes animat{
	from{ opacity:0;}	
	to{	opacity:1;}	
}

.show-hor > .bar-percent, .show-hor.outline::after{
	display:grid;
	height: inherit;
	place-content:center;
}

.vertical-bar > .col-percent, .show-hor > .bar-percent, .show-hor.outline::after{
	animation: animat 4s ease-in;
	height: inherit;
	opacity:1;
	visibility:visible;	
	font-weight:700;
	animation-fill-mode:forwards;
}
.vertical-bar > .col-percent{
	font-size: 0.9rem;
	display:contents;
}
.show-hor > .bar-percent, .show-hor.outline::after{
	font-size: 20px;
}

.vertical-col-outline::after{
	animation: animat 4s ease-in;
	display:grid;
	opacity:1;
	visibility:visible;
	font-weight:700;
	animation-fill-mode:forwards;
}

.vertical-bar > .col-percent{
	margin: 50% 0;
    height: inherit;
}

.my.baby > .pie-percent,.mj.baby > .donut-percent{	
	animation: animatrix 3s ease-in;
	opacity:1;
	visibility:visible;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index:6;
	font-weight:700;
}

.dad-donut,.dad-donut2{
	position:relative;
	width:fit-content;
	padding-top: 2em;
}

#the-donut,#the-donut2{
	background-color:transparent;
	--my-start: 0,0,0,0;
	position:relative;
	display:grid;
    place-items:center;
}

#the-donut.mj.baby>svg>#donut1,#the-donut2.mj.baby>svg>#donut2{
	-webkit-animation: donut1 13s ease-in-out;
  	animation: donut1 13s ease-in-out;
  	stroke-dasharray: 0,0,0,100;
  	stroke-dashoffset: 25;
	animation-fill-mode:forwards;
}

#the-donut.mj.static.baby>svg>#donut1,#the-donut2.mj.static.baby>svg>#donut2{
	-webkit-animation: pieStatic 0.01s ease-in-out;
  	animation: pieStatic 0.01s ease-in-out;
  	stroke-dasharray: 0,0,0,100;
  	stroke-dashoffset: 25;
	animation-fill-mode:forwards;
}

@keyframes donut1 {
	50% { stroke-dasharray: var(--my-start); }
    100% { stroke-dasharray: var(--my-end); }
}

/*Donut END*/

/*Mobile screen sizes*/

/* Safari */

h4.col-percent{
	-webkit-text-size-adjust:80%;
	text-size-adjust:80%;
}

/*Donut chart mobile*/
/*1025*/


/*Bar Chart mobile*/
/*768*/
@media screen and (max-width:768px) and (min-width:451px) {
	.bar-parent{
	max-width:420px;
	}
}
/*450*/

@media screen and (min-width:450px) {
	.vertical-bar{
	width: 50px;
	}

	.pie-title,.dohnut-title{
	text-align: center;
	}

	.outline-par,.outline-par2{
	width:50px;
	}
}

@media screen and (max-width:769px) {
	
	.vertical-bar > .col-percent,.bar-percent{
	font-size:0.9rem;
	}
	.vertical-bar{
		width: 35px;
	}

	/*.bar-parent-hor*/.col-parent,.dad-donut,.dad-donut2{
	min-width:90%;
	}
	.col-parent,.dad-donut,.dad-donut2{
	margin: 0 auto;
	}
	
	/*Bar mobile*/

	.outline.mob-bar2{
	padding-top:1px;
	}
	/*.outline.mob-bar,.outline.mob-bar2*/.outline.show-hor{
	max-width: -webkit-fill-available;
	max-width: 100%;
	}
	/*.mob-bar,.mob-bar2*/.show-hor{
	max-width: -webkit-fill-available;
	max-width: 100%;
	opacity:1;
    border-radius: 0 6px 6px 0;
    display: block;
    height: 30px;
    margin: 45px 0;
    transition-property: width;	
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 1s;
	width:inherit;
	}

	/*.outline.mob-bar::after,.outline.mob-bar2::after*/.outline.show-hor::after{
		content: " ";
		border: solid 1px;
		width: 100%;
		height: inherit;
		display: block;
		position: absolute;
		top: 0;
		border-radius: 0 6px 6px 0;
		border-color: inherit;
	}

	/*.mob-bar > .bar-percent, .outline.mob-bar::after,.mob-bar2 > .bar-percent, .outline.mob-bar2::after*/.show-hor > .bar-percent,.outline.show-hor::after{
		animation: animat 4s ease-in;
		display:grid;
		place-content:center;
		opacity:1;
		visibility:visible;
		height: inherit;
		font-weight:700;
		animation-fill-mode:forwards;
	}

	/*Column chart*/

	.outline-par,.mob-col,.mob-col2{
		width: 35px;
	}

	.mob-col,.mob-col2{
		max-height: -webkit-fill-available;
		max-height: -moz-available;		
		position:absolute;
		bottom:0;
		opacity:1;
		border-radius: 6px 6px 0 0;
		display: grid;
		place-items:center;
		margin-top: 5px;
		transition-property:height;	
		transition-duration: 5s;
		transition-timing-function: linear;
		transition-delay: 1s;
		height:inherit;
	}

	.mob-col > .col-percent, .outline.mob-col::after,.mob-col2 > .col-percent, .outline.mob-col2::after{
	animation: animat 4s ease-in;
    display: grid;
    place-content: center;
    opacity: 1;
    visibility: visible;
	font-size:0.9rem;
    /*padding-top: 9px;*/
    font-weight: 700;
    animation-fill-mode: forwards;
	margin-bottom: 0;
	}

	.vertical-col-outline::after{
		width: 35px;		
	}

	.col-parent{
	max-width: 80px;
	margin-top:2em;
	}
	
	.vert-outline::after{
    width: 41px;
	}

	.vertical-bar>.col-title{
	min-width: 100vw;
	}
}
@media screen and (max-width:450px) {
	.col-parent .col-title {
    padding-top: 1rem;
	font-size:77%;
	}
}
	
	/*Donut*/
	@media screen and (max-width:450px) {
	#the-donut,#the-donut2{
		width:inherit;
	}
	#the-donut h4,#the-donut2 h4{
		font-size: 12px;
	}
	#the-pie,#the-pie2{
	max-width:200px;
	}

	/*Percent elements and titles*/
	.pie-percent,.donut-percent{
		font-size:17px;
		font-weight: 600;
	}

	.bar-title,.col-title,.pie-title,.dohnut-title{
		font-size:16px;
	}
}