.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}

/* Table to table and bar chart */
section.Widget table.widgetMain {
    color: #1d3d5e;
    border-collapse: collapse;
    width: 100%;
}

section.Widget table.widgetMain a {
    text-decoration: none;
}

section.Widget table caption, section.Widget p.caption, section.Widget div.caption {
    caption-side: bottom;
    margin-top: 2lh;
    font-size: .9rem;
    font-style: italic;
    font-weight: 400;
    color: #546d88;
    text-align: center;
}

section.Widget table.widgetMain th, section.Widget table.widgetMain td {
    padding: 1lh 1ch;
    hyphens: auto;
}

@media screen and (min-width: 450px) {
    section.Widget table.widgetMain th, section.Widget table.widgetMain td {
        padding: 1lh 2ch;
        hyphens: none;
    }
}

section.Widget table.widgetMain th {
    border-bottom: 1px solid #e5effa;
    font-style: italic;
    font-weight: 600;
}

section.Widget table.widgetMain tbody tr {
    background-size: 100% 4px;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(38,77,253,0.15) 0%, rgba(38,77,253,0.15) calc(var(--ratio)* 100%), rgba(208,226,246,0.15) calc(var(--ratio)* 100%), rgba(208,226,246,0.15) 100%);
    transition: all .3s ease-in-out;
}

section.Widget table.widgetMain tbody tr.animChart {
    animation: fillTop10Chart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  section.Widget table.widgetMain tbody tr.animChart {
    animation: none;
  }
}

@keyframes fillTop10Chart {
    0% {background-size: 0 4px;}
    100% {background-size: 100% 4px;}
}

section.Widget table.widgetMain tbody tr:hover, section.Widget table.widgetMain tbody tr:has(a:focus) {
    background-color: #f2f7fd;
}

section.Widget table tbody tr:hover, section.Widget table tbody tr:has(a:focus) {
    background-image: linear-gradient(to right, rgba(38,77,253,1) 0%, rgba(38,77,253,1) calc(var(--ratio)* 100%), rgba(208,226,246,1) calc(var(--ratio)* 100%), rgba(208,226,246,1) 100%);
}

section.Widget table.TopWebsites td {
    text-align: left;
}

section.Widget table td:first-child {
    text-align: center;
}

/* Table to table and bar chart */
section.Widget table.TopWebsites tbody.show10 tr:nth-child(n+11){
    display: none;
}

section.Widget table.TopWebsites tbody tr {
    position: relative;
    transform: translate(0);
    clip-path: inset(0);
}

section.Widget table.TopWebsites tbody tr td a::before {
    content: '';
    position: absolute;
    inset: 0;
}

/* Definition list to column chart */
p#Percentiles-Caption {
    order: 4;
}

div#percentilesResults dl {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 250px;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: relative;
}

div#percentilesResults dl div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 24px;
    font-size: 0.9rem;
}

@media screen and (max-width: 500px) {
    div#percentilesResults dl div span.wbr {
        display: block;
    }
}

div#percentilesResults dl div.active::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #88afdb;
    border-left: 10px solid transparent;
    bottom: -1rem;
    left: attr(data-position);
}

@media screen and (min-width: 450px) {
    div#percentilesResults dl div {
        width: 30px;
    }
}

div#percentilesResults dl div dt {
    order: 2;
    padding-top: 0.3rem;
    font-weight: 400;
}

div#percentilesResults dl div dd {
    margin: 0;
    width: auto;
    background-color: #264dfd;
    font-weight: 600;
    padding: 0.3rem 0;
    border-radius: 0.5rem;
    opacity: 0.95;
    order: 1;
    box-sizing: border-box;
    min-height: 25px;
    height: calc(var(--value) * 1px);
}

div#percentilesResults dl div dd.animChart {
    animation: fillDLPctleChart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  div#percentilesResults dl div dd.animChart {
    animation: none;
  }
}

@keyframes fillDLPctleChart {
    0% {max-height: 25px; opacity: 0;}
    30% {opacity: 1;}
    100% {max-height: 100%;}
}

div#percentilesResults dl div dd {
    color: white;
    text-align: center;
}

div#percentilesResults dl div dd.low {
    background-color: transparent;
    color: black;
    border-bottom: 2px solid black;
    border-radius: 0;
}

/* Table to column chart */
.columnchart {
    display: grid;
    position: relative;
    align-items: end;
    margin-top: 2rem;
}

.columnchart td,
.columnchart th {
  margin: 0;
  position: relative;
  width: 70px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

.columnchart th {
  font-weight: 300;
  font-size: 0.9rem;
  padding-top: 0.3rem;
}

.columnchart tr,
.columnchart tbody,
.columnchart thead {
  display: contents;
  text-align: center;
}

.columnchart thead * {
    grid-row: 2;
}

.columnchart thead tr *:nth-of-type(1) {
    grid-column: 1;
}

.columnchart thead tr *:nth-of-type(2) {
    grid-column: 2;
}

.columnchart thead tr *:nth-of-type(3) {
    grid-column: 3;
}

.columnchart td {
    background-color: #264dfd;
    opacity: 0.95;
    height: calc(var(--value) * 2px);
    color: white;
    padding-top: 1rem;
    border-radius: 0.5rem;
}

.columnchart td.animChart {
    animation: fillDLPctleChart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  .columnchart td.animChart {
    animation: none;
  }
}

.columnchart td:nth-of-type(1) {
    grid-column: 1;
}

.columnchart td:nth-of-type(2) {
    grid-column: 2;
}
  
.columnchart td:nth-of-type(3) {
    grid-column: 3;
}

.columnchart caption {
    grid-row: 3;
    grid-column: 1 / span 3;
}

/* List to bar chart */
div.multibarchart {
    font: normal 300 0.9rem "Fira Sans";
    display: flex;
    flex-direction: column;
}

div.multibarchart div.caption {
    order: 2;
}

div.multibarchart ul {
    list-style-type: none;
}

div.multibarchart > ul > li {
    display: flex;
    margin: 1rem 0;
}

div.multibarchart > ul > li > span {
    flex: 0 0 2rem;
    border-right: 1px solid rgb(207, 207, 207);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding-right: 0.3rem;
}

div.multibarchart > ul > li > ul {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    flex: 1 0 auto;
}

@media screen and (min-width: 450px) {
    div.multibarchart > ul > li > ul {
        font-size: 0.9rem;
    }
    div.multibarchart > ul > li > span {
        flex: 0 0 5rem;
    }
}

div.multibarchart > ul > li > ul li {
    display: flex;
}

div.multibarchart > ul > li > ul li:nth-child(1) {
    margin-bottom: 0.3rem;
}

div.multibarchart > ul > li > ul li > span {
    margin-right: 0.5rem;
}

div.multibarchart > ul > li > ul li > span:nth-child(1) {
    background: #4a5759 url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><path fill="hsl(0 0% 100% / .6)" fill-rule="evenodd" d="M9.8 12 0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z"/></svg>');
    width: calc(var(--value) *  var(--y) * 0.15%);
    height: 18px;
    position: relative;
    border-radius: 0.5rem;
}

div.multibarchart > ul > li > ul li:nth-of-type(odd) > span:nth-child(1) {
    background: #264dfd;
    opacity: 0.9;
}

div.multibarchart > ul > li > ul li > span.animChart {
    animation: fillMultiBarChart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  div.multibarchart > ul > li > ul li > span.animChart {
    animation: none;
  }
}

@keyframes fillMultiBarChart {
    0% {width: 0;}
    100% {width: calc(var(--value) * var(--y) * 0.15%)}
}

/* Table to pie chart */
.piechart {
    --hexagons: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><path fill="hsl(0 0% 100% / .6)" fill-rule="evenodd" d="M9.8 12 0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z"/></svg>');
    --radius: 15rem;
    margin: 0 auto;
    padding-block-start: calc(var(--radius) - 2rem);
    position: relative;
    caption-side: bottom;
}

.piechart::before, .piechart::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  transform: translateX(-50%);
  content: "";
}

.piechart::before {
  background: #4a5759 var(--hexagons);
}

.piechart.animChart::after {
    animation: appearPie 2s ease-in-out;
}

#resultsStatements-pie-app .piechart::after {
  background:
	conic-gradient(
		white 0,
        white 0.2%,
        #264dfd 0.6%,
		#264dfd var(--3),
        white var(--3wB),
        white var(--3wBend),
		transparent 0,
		transparent 100%
	);
}

/* Pie chart legend */
.piechart tbody {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.piechart [scope=row] {
  padding-inline-end: 0.5rem;
  font-weight: 300;
  font-size: 0.9rem;
}

.piechart [scope=row]::before {
  background: var(--color) var(--background);
  background-color: var(--color);
  block-size: 1rem;
  content: "";
  display: inline-block;
  inline-size: 1rem;
  translate: -0.2rem 0.1rem 0;
}

.piechart tbody tr {
  width: fit-content;
  padding: 0 0.5rem;
}

.piechart tbody tr:nth-of-type(1) {
    --color: #264dfd;
}

.piechart tbody tr:nth-of-type(2) {
    --color: #4a5759;
}

.piechart table, .piechart thead, .piechart tr {
    width: 100%;
    text-align: center;
}

/* Pie chart animation */
@keyframes appearPie {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@media (prefers-reduced-motion) {
  .piechart.animChart::after {
    animation: none;
  }
}

/* Definition list to bar chart */
div#topNCresults dl {
    font-size: 0.9rem;
    margin-top: 0.7rem;
}

div#topNCresults dl dt {
    font-weight: 400;
}

div#topNCresults a.frameworkLink {
    margin-left: 0.5rem;
    display: inline-block;
    width: 24px;
    height: 24px;
}

div#topNCresults a.frameworkLink img {
    max-width: 15px;
    height: auto;
}

div#topNCresults a.frameworkLink img {
    position: relative;
}

div#topNCresults dd {
    background-color: #264dfd;
    margin: 0 0 1rem 0;
    text-align: right;
    color: white;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    opacity: 0.95;
    box-sizing: border-box;
}

div#topNCresults dd.animChart {
    animation: fillDLChart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  div#topNCresults dd.animChart {
    animation: none;
  }
}

@keyframes fillDLChart {
    0% {max-width: 0;}
    100% {max-width: 100%;}
}

/* Second pie chart */
/* general parameters of the pie chart */
.piechart2 {
  font: normal 1rem "Fira Sans", sans-serif;
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  padding-block-start: calc(var(--radius) * 2 + 20px);
  margin: auto;
  --radius: 125px;
  /* edit below: each portion as a percentage of the total */
  --elt1: 18;
  --elt2: 20;
  --elt3: 17;
  --elt4: 25;
  --elt5: 20;
  /* edit colours below */
  --clr1: #f2cc8f;
  --clr2: #81b29a;
  --clr3: #3d405b;
  --clr4: #e07a5f;
  --clr5: #766153;
  /* end of editing area */
  --pie-elt1: calc(var(--elt1) * 3.60deg);
  --pie-elt2: calc((var(--elt1) + var(--elt2)) * 3.60deg);
  --pie-elt3: calc((var(--elt1) + var(--elt2) + var(--elt3)) * 3.60deg);
  --pie-elt4: calc((var(--elt1) + var(--elt2) + var(--elt3) + var(--elt4)) * 3.60deg);
  --pie-elt5: calc((var(--elt1) + var(--elt2) + var(--elt3) + var(--elt4) + var(--elt5)) * 3.60deg);
}

@media screen and (min-width: 500px) {
  .piechart2 {
    --radius: 200px;
  }
}

@media screen and (min-width: 600px) {
  .piechart2 {
    --radius: 250px;
  }
}

.piechart2::before, .piechart2::after {
  position: absolute;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  top: 0;
  left: 0;
  content: "";
  border-radius: 50%;
}

/* slices of the pie chart */
.piechart2::before {
  background: conic-gradient(
    var(--clr1) var(--pie-elt1),
    var(--clr2) var(--pie-elt1),
    var(--clr2) calc(var(--pie-elt2)),
    var(--clr3) calc(var(--pie-elt2)),
    var(--clr3) calc(var(--pie-elt3)),
    var(--clr4) calc(var(--pie-elt3)),
    var(--clr4) calc(var(--pie-elt4)),
    var(--clr5) calc(var(--pie-elt4)),
    var(--clr5) calc(var(--pie-elt5))
    /* adjust here if you need more or less slices */
  );
}

/* white borders between each slide of the pie chart */
.piechart2::after {
  background: conic-gradient(
    white 0deg,
    white 0.5deg,
    transparent 1deg,

    transparent calc(var(--pie-elt1) - 1deg),
    white calc(var(--pie-elt1) - 0.5deg),
    white calc(var(--pie-elt1) + 0.5deg),
    transparent calc(var(--pie-elt1) + 1deg),

    transparent calc(var(--pie-elt2) - 1deg),
    white calc(var(--pie-elt2) - 0.5deg),
    white calc(var(--pie-elt2) + 0.5deg),
    transparent calc(var(--pie-elt2) + 1deg),

    transparent calc(var(--pie-elt3) - 1deg),
    white calc(var(--pie-elt3) - 0.5deg),
    white calc(var(--pie-elt3) + 0.5deg),
    transparent calc(var(--pie-elt3) + 1deg),

    transparent calc(var(--pie-elt4) - 1deg),
    white calc(var(--pie-elt4) - 0.5deg),
    white calc(var(--pie-elt4) + 0.5deg),
    transparent calc(var(--pie-elt4) + 1deg),

    transparent calc(var(--pie-elt5) - 1deg),
    white calc(var(--pie-elt5) - 0.5deg)
    /* adjust here if you need more or less slices */
  );
}

/* legend and counters */
.piechart2 tbody {
  counter-reset: count 0;
}

.piechart2 tbody tr th,.piechart2 tbody tr td {
  width: var(--radius);
}

.piechart2 tbody tr th {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.piechart2 tbody tr th::before {
  counter-increment: count 1;
}

.piechart2 tbody tr th::before, .piechart2 tbody tr::after {
  content: counter(count, decimal);
  font: bold 0.9rem "Fira Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
}

.piechart2 tbody tr th::before {
  font-weight: 300;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-right: 0.3rem;
}

.piechart2 tbody tr th {
  text-align: right;
  padding-right: 1rem;
}

.piechart2 tbody tr::after {
  position: absolute;
  left: calc(var(--radius) - 10px);
  top : calc(var(--radius) - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
}

.piechart2 tbody tr:nth-of-type(1)::after {
  --offset: calc(270deg + var(--pie-elt1) - ((var(--elt1) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
}

.piechart2 tbody tr:nth-of-type(2)::after {
  --offset: calc(270deg + var(--pie-elt2) - ((var(--elt2) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
  border: 2px solid var(--clr2);
}

.piechart2 tbody tr:nth-of-type(3)::after {
  --offset: calc(270deg + var(--pie-elt3) - ((var(--elt3) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
  border: 2px solid var(--clr3);
}

.piechart2 tbody tr:nth-of-type(4)::after {
  --offset: calc(270deg + var(--pie-elt4) - ((var(--elt4) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
  border: 2px solid var(--clr4);
}

.piechart2 tbody tr:nth-of-type(5)::after {
  --offset: calc(270deg + var(--pie-elt5) - ((var(--elt5) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
  border: 2px solid var(--clr5);
}

.piechart2 tbody tr:nth-of-type(6)::after {
  --offset: calc(270deg + var(--pie-elt6) - ((var(--elt6) * 3.60deg) / 2));
  transform: translateX(calc(cos(var(--offset)) * var(--radius))) translateY(calc(sin(var(--offset)) * var(--radius)));
  border: 2px solid var(--clr6);
}

.piechart2 tbody tr:nth-of-type(1)::after, .piechart2 tbody tr:nth-of-type(1) th::before {
  border-color: var(--clr1);
}

.piechart2 tbody tr:nth-of-type(2)::after, .piechart2 tbody tr:nth-of-type(2) th::before {
  border-color: var(--clr2);
}

.piechart2 tbody tr:nth-of-type(3)::after, .piechart2 tbody tr:nth-of-type(3) th::before {
  border-color: var(--clr3);
}

.piechart2 tbody tr:nth-of-type(4)::after, .piechart2 tbody tr:nth-of-type(4) th::before {
  border-color: var(--clr4);
}

.piechart2 tbody tr:nth-of-type(5)::after, .piechart2 tbody tr:nth-of-type(5) th::before {
  border-color: var(--clr5);
}

.piechart2 tbody tr:nth-of-type(6)::after, .piechart2 tbody tr:nth-of-type(6) th::before {
  border-color: var(--clr6);
}

/* above six slices, a pie chart becomes hard to read */

/* animation */
.piechart2.animChart::before {
  animation: appear 0.5s ease-in-out;
}

.piechart2 tbody tr.animChart::after {
  animation: appear 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  .piechart2 tbody tr.animChart::after {
    animation: none;
  }
}

@keyframes appear {
  0% {opacity: 0;}
  100% {opacity: 1;}
}