/*
 * Industry figures (afb/figures): charts, legends, PDF download and empty state.
 * Breakpoint: 990px (--wp--custom--breakpoint--tablet).
 */

.figureAndStudies .postAttachment {
	margin: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xxl);
}

.figureAndStudies .postActions__icon {
	fill: var(--wp--preset--color--afb-dark-red);
}

.figureAndStudies__empty {
	margin: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
	text-align: center;
	font-size: var(--wp--preset--font-size--l);
}

.dataGraphs {
	display: flex;
	flex-wrap: wrap;
	min-height: 800px;
}

.dataGraphs__section {
	display: flex;
	flex-direction: column;
	flex: 0 0 100%;
	min-height: 410px;
}

@media (min-width: 990px) {
	.dataGraphs__section {
		flex: 1;
		min-width: 30%;
	}

	.dataGraphs__section--wide {
		flex: 0 0 66%;
	}
}

.dataGraph {
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
	margin: 4px;
	background-color: var(--wp--preset--color--afb-white);
	box-shadow: 0 7px 16px 0 rgba(50, 50, 50, 0.07);
	border-radius: 14px;
	font-size: var(--wp--preset--font-size--xs);
	height: 100%;
	color: var(--wp--preset--color--grey-900);
}

.dataGraph--disabled {
	background: rgba(84, 151, 155, 0.3);
}

.dataGraph--disabled .dataGraph__value {
	display: none;
}

.dataGraph__head {
	height: 36px;
}

.dataGraph__title {
	display: block;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	text-transform: uppercase;
	font-weight: 500;
}

.dataGraph__description {
	display: block;
}

.dataGraph__value {
	display: flex;
	align-items: baseline;
	font-size: 6rem;
	font-weight: 900;
	margin: var(--wp--preset--spacing--m) 0;
}

.dataGraph__value > svg {
	margin-left: var(--wp--preset--spacing--l);
}

.dataGraphs .legend {
	display: flex;
	flex-wrap: wrap;
	font-weight: 300;
}

.dataGraphs .legend__item {
	display: flex;
	flex: 0 0 33%;
	margin-right: var(--wp--preset--spacing--m);
}

.dataGraphs .legend__item svg {
	flex-shrink: 0;
}

.dataGraphs .legend__item__label {
	margin-left: var(--wp--preset--spacing--m);
	line-height: 1;
}

.dataGraphs .legend__item__value {
	display: block;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}

.vBarGraph {
	display: flex;
	align-items: flex-start;
	max-width: 245px;
	margin: var(--wp--preset--spacing--l) auto;
	position: relative;
}

.vBarGraph__scale {
	display: flex;
	flex-direction: column;
	flex: 0 1;
	justify-content: space-between;
	padding: 0;
	margin: 0;
	align-self: stretch;
	list-style: none;
}

.vBarGraph__scale__step {
	color: var(--wp--preset--color--grey-400);
	font-weight: 300;
	text-align: right;
	list-style: none;
	font-size: var(--wp--preset--font-size--xs);
	width: 50px;
	position: relative;
	left: -1.2rem;
	transform: translateY(-10%);
	margin-top: -10px;
}

.vBarGraph__data {
	flex: 1;
	display: flex;
	align-items: flex-end;
	height: 201px;
	margin: 0 auto;
	background-image: linear-gradient(to top, rgba(204, 204, 204, 0.5) 2%, rgba(204, 204, 204, 0) 2%);
	background-size: 100% 50px;
	background-position: left bottom;
}

.vBarGraph__barWrapper {
	height: 100%;
	display: flex;
	align-items: flex-end;
	margin: 0 auto;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(to bottom, rgba(84, 151, 155, 0) 0%, rgba(84, 151, 155, 0.1) 15%, rgba(84, 151, 155, 0.2) 50%, rgba(84, 151, 155, 0.25) 100%);
}

.vBarGraph__bar {
	margin: 0 auto;
	width: 15px;
	border-radius: 8px 8px 0 0;
}

.hBarGraph {
	max-width: 300px;
	margin: 0 auto;
}

.hBarGraph__scale {
	display: flex;
	width: 250px;
	margin: 0 15px 0 55px;
}

.hBarGraph__scale__step {
	flex: 1;
	text-align: center;
	color: var(--wp--preset--color--grey-400);
	font-weight: 300;
	padding: 10px 0;
}

.hBarGraph__data {
	display: flex;
}

.hBarGraph__labels,
.hBarGraph__values {
	display: flex;
	flex-direction: column;
}

.hBarGraph__labels {
	flex: 0 0 75px;
}

.hBarGraph__values {
	flex: 0 0 30px;
}

.hBarGraph__label,
.hBarGraph__value {
	flex: 1;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--grey-900);
}

.hBarGraph__label {
	justify-content: flex-end;
	font-weight: 300;
}

.hBarGraph__value {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s);
}

.hBarGraph__graph {
	flex: 1;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 250px;
	max-width: 208px;
	margin: 0 5px;
	background-image: linear-gradient(to right, rgba(204, 204, 204, 0.5) 2%, rgba(204, 204, 204, 0) 2%);
	background-size: 50px 100%;
	background-position: left bottom;
}

.hBarGraph__barWrapper {
	width: 100%;
	background: linear-gradient(to left, rgba(84, 151, 155, 0) 0%, rgba(84, 151, 155, 0.1) 15%, rgba(84, 151, 155, 0.2) 50%, rgba(84, 151, 155, 0.25) 100%);
	margin: auto 0;
}

.hBarGraph__bar {
	max-width: 100%;
	height: 15px;
	border-radius: 0 8px 8px 0;
}

.mirrorGraph__label,
.mirrorGraph__value {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0;
	margin-right: var(--wp--preset--spacing--m);
	padding: 0 var(--wp--preset--spacing--xs);
	min-width: 40px;
}

.mirrorGraph__label {
	flex: 0 0 75px;
}

.mirrorGraph__value {
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}

.mirrorGraph__graph {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 250px;
	margin-bottom: var(--wp--preset--spacing--l);
}

.mirrorGraph__line {
	display: flex;
	flex: 1;
}

.mirrorGraph__bar {
	display: flex;
	flex: 0 0 50%;
	margin: auto;
	height: 15px;
	justify-content: center;
}

@media (min-width: 990px) {
	.mirrorGraph__bar {
		flex: 1;
	}
}

.mirrorGraph__leftWrapper,
.mirrorGraph__rightWrapper {
	display: flex;
	height: 100%;
	flex: 1;
}

.mirrorGraph__leftWrapper {
	justify-content: flex-end;
	background: linear-gradient(to right, rgba(84, 151, 155, 0) 0%, rgba(84, 151, 155, 0.1) 15%, rgba(84, 151, 155, 0.2) 50%, rgba(84, 151, 155, 0.25) 100%);
}

.mirrorGraph__rightWrapper {
	background: linear-gradient(to left, rgba(84, 151, 155, 0) 0%, rgba(84, 151, 155, 0.1) 15%, rgba(84, 151, 155, 0.2) 50%, rgba(84, 151, 155, 0.25) 100%);
}

.mirrorGraph__leftBar {
	height: 100%;
	border-radius: 8px 0 0 8px;
}

.mirrorGraph__rightBar {
	height: 100%;
	border-radius: 0 8px 8px 0;
}

.circleGraph {
	position: relative;
	height: 295px;
}

.circleGraph__circles {
	transform: rotate(-90deg);
}

.circleGraph__label {
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	left: 50%;
	font-weight: 300;
	color: var(--wp--preset--color--afb-medium-blue);
	font-size: 1.5rem;
	max-width: 150px;
	text-align: center;
	transform: translate(-50%, -50%);
}