.graph-options { display: grid; gap: 10px; margin-bottom: 20px; }
.graph-options .graph-option { flex-basis: 100%; height: 50px; border-style: solid; border-width: 1px; text-align: center; padding: 8px; font-size: 14px; border-radius: 5px; background-color: transparent; }
.graph-options .graph-option:hover { background-color: #e8e8e8; }

.apexcharts-canvas > svg { position: relative; z-index: 0; }

section:not(.everything-to-play-for) .apexcharts-tooltip {
	padding: 8px 12px;
	background-color: rgba(0, 0, 0, 0.1);
	color: #002236;
	font-size: 28px !important;
	transform: translateX(-50%) translateY(-50%);
	transform-origin: center;
	text-align: center;
}

section:not(.everything-to-play-for) .apexcharts-tooltip .small-span span { font-size: 66%; }



.box-chart { position: relative; }
.box-chart .boxes { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; z-index: 0; }
.box-chart .boxes .box { width: auto; height: auto; background-color: var(--hl-light-green); opacity: 0.1; }
/*.box-chart .boxes .box.active { opacity: 1; }*/

.box-chart .content { position: relative; z-index: 1; background-color: transparent; width: 100%; }

.box-chart h3 { margin: 0; color: var(--hl-light-green); }

.box-chart .number p,
.box-chart .number span { color: var(--hl-light-green); }


.three-in-four { display: inline-flex; flex-direction: row; padding: 20px 0 0 20px;  gap: 20px; height: 180px; }
.three-in-four img { opacity: 0; height: 160px; }

.technology-risk-cl {
	position: relative;
	background: var(--light-blue-to-green-0);
	display: flex;
	align-items: center;
}

.technology-risk-cl .chart { width: 100%; }
.technology-risk-cl .caption { position: absolute; display: flex; width: 100%; align-items: center; justify-content: center; }
.technology-risk-cl .caption p { width: 100px; font-size: 20px; line-height: 1.15em; font-family: 'GT Ultra Regular', sans-serif; font-weight: bold; margin: 0; }




.radialbar-tooltip { position: absolute; left: 50%; top: 50%; width: 90px!important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transform: translate(-50%, -50%);  }
.radialbar-tooltip p { margin: 0; }

.radialbar-tooltip p.value { color: #002236; font-size: 28px; font-family: 'GT Ultra Regular', sans-serif; font-weight: 700; text-align: center; line-height: 1; }
.radialbar-tooltip p.label { color: #002236; font-size: 14px; font-family: 'GT Ultra', sans-serif; font-weight: 400; line-height: 1.15em; text-align: center; }


.tgs-graph .radialbar-tooltip p.value { font-size: 46px; }
.tgs-graph .radialbar-tooltip p.label { font-size: 20px; }

.repositioning-chart .radialbar-tooltip p.value { font-size: 56px; margin-bottom: 10px; }
.repositioning-chart .radialbar-tooltip p.label { font-size: 30px; }

.digital-defence-graphs .graph .radialbar-tooltip { width: 200px!important; }
.digital-defence-graphs .graph .radialbar-tooltip p.value { font-size: 56px; margin-bottom: 10px; }


.ai-sky-chart { width: 100%; height: 200px; }

.ai-sky-graphs {
	background: var(--light-blue-to-green-70);
	padding: 30px;
}

.ai-sky-graphs h3.title { color: #002236; margin: 1em 0 0 0; }
.ai-sky-graphs p { color: #002236; line-height: 1.2em;}


.changed-bm-chart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }

.changed-bm-chart .graphic {
	width: 100%;
	height: 0;
	padding-top: 216%;
	background-image: url("/riskonomy/_assets/high-rise-dark-green.png");
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.changed-bm-chart .graphic:nth-child(10):after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); clip-path: polygon(50% 0, 100% 13%, 100% 33%, 50% 46%, 0 33%, 0 13%); }