/* modules */
section.Widget {
    border: 1px solid #d0e2f6;
    border-radius: 0.5rem;
    box-shadow: .5ch .5lh 2ch rgba(0 0 0 / 2%);
    background-color: white;
    padding: 1rem;
    color: #1d3d5e;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    box-sizing: border-box;
}

section.flexWidget {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 450px) {
    section.Widget {
        padding: 2rem 4ch 3rem 4ch;
    }
}

section.Widget h2 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 1.5rem;
    text-align: center;
}

section.Widget summary {
    list-style: none;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    cursor: pointer;
    position: relative;
    text-align: right;
    margin-top: 1rem;
    padding-right: 3rem;
  }

section.Widget summary.settings::after {
    content: '';
    background: url('../img/settings.svg') no-repeat;
    background-size: 80%;
    background-position: 45% 50%;
    background-repeat: no-repeat;
    background-color: #264dfd;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    position: absolute;
    right: 0;
    top: -0.5rem;
}

section.Widget details.help aside {
    padding-top: 3rem;
}

section.Widget details.help aside a {
    text-decoration: underline;
}

section.Widget details.help aside p.intertitle {
    margin: 0.3rem 0;
}

section.Widget details.help aside p.intertitle {
    margin-top: 1.5rem;
}

section.Widget details.help summary {
    background: none;
    background-color: #264dfd;
    color: white;
    text-align: center;
    line-height: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    padding-right: 0;
    outline-offset: 2px;
}

section.Widget aside {
    font-size: 0.9rem;
    font-weight: 300;
    box-sizing: border-box;
    padding: 0 1rem;
}

section.Widget aside li {
    padding-top: 0.2rem;
}

section.Widget fieldset {
    border: none;
}

section.Widget form {
    border-radius: 0.5rem;
    background-color: #e5effa;
    padding: .5rlh 1ch;
    width: fit-content;
}

section.Widget form > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rlh 1ch;
}

section.Widget form label {
    display: block;
    margin-bottom: .25rlh;
    padding-left: .25ch;
    color: #546d88;
    font-size: .9em;
    font-style: italic;
}

section.Widget form p.errorMessage {
    margin-top: 0.5rem;
    color: #546d88;
    font-size: .9em;
    font-style: normal;
}

section.Widget form input, section.Widget form select {
    border: 1px solid #d0e2f6;
    border-radius: 0.5rem;
    padding: .5lh 1ch;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    color: #1d3d5e;
    font: inherit;
}

section.Widget form button {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    background-color: #264dfd;
    color: #f2f7fd;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .05ch;
    text-decoration: none;
    cursor: pointer;
}

section.Widget form button:hover, section.Widget form button:focus {
    outline: 2px solid #264dfd;
    outline-offset: 1px;
}

section.Widget table.widgetMain {
    color: #1d3d5e;
    border-collapse: collapse;
    width: 100%;
}

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 td:first-child {
    text-align: center;
}

/* top websites */
section.Widget table.TopWebsites tbody.show10 tr:nth-child(n+11){
    display: none;
}

/* key figures */
.KeyFigures dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1rem;
}

@media screen and (min-width: 900px) {
    .KeyFigures dl {
        grid-auto-columns: minmax(0, 1fr);
        text-align: center;
    }
}

.KeyFigures dt {
    grid-column: 1;
    align-self: center;
    font-weight: 400;
}

@media screen and (min-width: 900px) {
    .KeyFigures dt {
        grid-column: auto;
        grid-row: 2;
        align-self: start;
    }
}

.KeyFigures dd {
    grid-column: 2;
    font-weight: 700;
    font-size: 3em;
    margin-inline-start: 0;
}

@media screen and (min-width: 900px) {
    .KeyFigures dd {
        grid-column: auto;
        grid-row: 1;
        font-size: 4em;
    }
}

/* non-conformities */
div#topNCresults dl {
    font-size: 0.9rem;
    margin-top: 0.7rem;
}

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

.pills .pill a {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
}

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

div#topNCresults a.frameworkLink img, .pills .pill .relativePos {
    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;
    animation: fillDLChart 2s ease-in-out;
}

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

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

div#topNCresults.show10 dl div:nth-child(n+11){
    display: none;
}

section.Widget button.showAll {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    background-color: #264dfd;
    color: #f2f7fd;
    font-weight: 400;
    letter-spacing: .05ch;
    text-decoration: none;
    cursor: pointer;
    margin-top: 2rem;
    font-size: 0.9rem;
    outline-offset: 2px;
}

/* percentiles */
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;
}

div#percentilesResults dl div dd {
    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 button {
    background-color: transparent;
    border: none;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

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

div#percentilesResults ul {
    border-radius: 0.5rem;
    background-color: #e5effa;
    width: 100%;
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 105%;
    border: 1px solid #88afdb;
    box-shadow: .5ch .5lh 2ch rgba(0 0 0 / 2%);
}

div#percentilesResults ul li {
    font-weight: 300;
    font-size: 0.9rem;
    padding: 0.3rem 1rem;
    margin-bottom: 0.3rem;
}

div#percentilesResults ul li a {
    text-decoration: underline;
}

ul#percentilesDetails {
    border-radius: 0.5rem;
    background-color: #e5effa;
    width: 100%;
    list-style-type: none;
}

ul#percentilesDetails li {
    font-weight: 300;
    font-size: 0.9rem;
    padding: 0.3rem 1rem;
    margin-bottom: 0.3rem;
}

ul#percentilesDetails li a {
    text-decoration: underline;
}

/* labels */
div#labelsResults div {
    display: flex;
    flex-direction: column;
}

div#labelsResults div h3 {
    flex: 0 0 7rem;
}

div#labelsResults div ul {
    flex: 1 0 auto;
}

div#labelsResults div h3 {
    display: block;
    margin: 1rem 0 0 0;
    text-align: center;
    font-weight: 700;
}

div#labelsResults > div > h3 > img {
    display: block;
    margin: auto;
    max-width: 45px;
}

@media screen and (min-width: 600px) {
    div#labelsResults div {
        flex-direction: row;
    }

    div#labelsResults div h3 {
        margin: 1rem 0 2rem 0;
    }
}

div#labelsResults > div:not(.bronze) {
    border-bottom: 1px solid rgb(168, 168, 168);
}

div#labelsResults ul {
    list-style-type: none;
    font-weight: 300;
    margin: 1rem 0;
}

div#labelsResults ul li span:nth-of-type(2) {
    font-style: italic;
    font-size: 0.9rem;
    padding-top: 0.4rem;
    padding-bottom: 0.5rem;
    display: block;
}

div#labelsResults a {
    border-bottom: 1px solid black;
    padding-bottom: 0.1rem;
    line-height: 1.6rem;
    font-weight: 300;
}

/* admin levels */
.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;
}