.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: #000000; 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(--lime-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(--lime-green); }

.box-chart .number p,
.box-chart .number span { color: var(--lime-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-color: var(--lime-green); 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: berlingske_sans_roundmedium, 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: #000000; font-size: 28px; font-family: berlingske_sans_roundmedium, sans-serif; font-weight: 700; text-align: center; line-height: 1; }
.radialbar-tooltip p.label { color: #000000; font-size: 14px; font-family: berlingsle_sans_roundregular, 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-color: #C1FD07; padding: 30px; }

.ai-sky-graphs h3.title { color: #000000; margin: 1em 0 0 0; }
.ai-sky-graphs p { color: #000000; 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-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%); }