.ati-root { display: block; }
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    padding:6px 12px;
}

a {
    color: #FFFFFF;
}
body {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
}
.App {
  display: block;
  margin: 20px auto;
  position: relative;
  max-width: 1408px;
}

.App .App__Message {
  font-size: 15px;
  line-height: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

.barchart {
    padding-bottom: 32px;
    margin-bottom: 32px;
    /*overflow-x:scroll;*/
    position: relative;
    box-sizing: border-box;
    /*overflow: hidden;*/
    
        /* .score-bar-container:hover {
            opacity: .8;
        } */
    
}
.total-score-bar {
    transition: width .2s ease-out;
}
.barchart .bargroups {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
   /* border-top:1px solid #d1d0c8; */
}
.barchart:focus {
    outline: none;
}

.barchart .yAxis-measure {
    position: absolute;
    width: 1.5rem; /* leftPad - 20 */
    top:-0.5rem;
    left:0;
    height: 480px;
    font-size:1rem;
    color: #FFF;
    text-align: right;
}
.barchart .yAxis-measure.right-side {
    right:0;
    left:auto;
}
.barchart .yAxis-measure .tick {
    position: absolute;
    width:100%;
}
.barchart .yAxis-measure.left-side .tick {
    right: 0.5rem;
}
.barchart .category-group .group-bars {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    z-index: 1;
    pointer-events: auto;

}
.barchart .category-group .category-grid {
    position: absolute;
    border-top:1px solid #fff;
    width:100%;
    height:145px;
    left:-3px;
    transition:opacity ease-out .2s;
    z-index: 0;
    pointer-events: none;
}
.barchart .category-group.category-very-poor .category-grid {
    border-right: none;
}
.barchart .category-group .group-bars .aid-donor {
   /* flex-grow:1;*/
    flex-wrap: nowrap;
    z-index:2;
}
.aid-donor {
    vertical-align: bottom;
    position: relative;
    transition: all .2s ease-out;
    outline: none;
}
.aid-donor > svg .clickbg {
    fill:transparent;
}
.aid-donor:hover > svg .clickbg {
    fill:transparent !important; /* overwriting inline fill needed for htl2canvas */
}
.aid-donor > svg .component-stack {
    pointer-events: all;
}
.category-group {
    position: relative;
    padding-bottom: 170px;
    white-space: nowrap;
    transition: all .2s ease-out;
}

.legend {
    position: absolute;
    top:1rem;
    right:1rem;
    pointer-events: none;
    z-index:200;
}

.barchart .legend .panel.datasheet {
    width: 0;
    box-sizing: border-box;
    transition: transform ease-out .2s, width ease-out .2s;
    pointer-events: auto;
}

.category-group .group-title {
    position: absolute;
    bottom:0;
    left: 0;
}
.category-group .group-title > span {
    display: block;
    text-align: center;
    color: #FFFFFF;
}
.category-group .group-title > span > span {
    font-size:.75rem;
}
.category-group .group-title .label-hidden {
    visibility: hidden;
}
.category-group .group-title > span[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 4px 8px;
    background-color: inherit;
    color: #FFFFFF;
    white-space: nowrap;
    z-index: 300;
}
.legend .group-title {
    margin-bottom:1em
}
.group-title,
.data-title {
    width: 100%;
    font-size:.53125rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height:1;

}
.data-position,
.data-components {
    width: 100%;
    font-size:.6rem;
    box-sizing: border-box;
}
.data-position {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    font-size:.7rem;
    line-height: 1.2;
}
.legend p.small.footnote,
.data-components {
    font-weight: normal;
    font-size:.6rem;
}
.legend p.small.footnote {
    margin: .75rem 0 0;
}
.data-components {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.8;
    margin-left: 0 !important;
}

.data-components > li {
    padding-left: 10px;
    border-left:17px solid white;
    list-style: none !important;
}
.group-title > span {
    display: block;
    padding: 7px 0;
    position: relative;
    white-space: nowrap;
}
.legend .group-title > h3,
.legend .data-title > h3 {
    display: block;
    padding: 6px;
    position: relative;
    overflow: hidden;
    margin: 0 0 1em;
    font-size: 1.17em;
    color:currentColor;
}
i.circle {
    content:' ';
    width:21px !important;
    height:21px;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    top:0;
}
.legend .data-title > h3 {
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.2;
}
.legend .data-title > h3 i.circle {
    position: relative;
}
.legend .data-title > h3 span,
.legend .data-title > h3 a {
    padding-left: 7px;
    color:currentColor;
    flex:1;
}

.donor-label {
    transform: rotate(-90deg);
    transform-origin: bottom right;
    position: absolute;
    right: 0;
    bottom:0;
    white-space: nowrap;
    padding: 2px 8px 2px 6px;
    font-size:.65625rem;
    display: flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    transition: height .2s ease-out, font-size .2s ease-out;
    color: #FFFFFF;

}
svg.bar {
    pointer-events: none;
}
svg.bar g {
    pointer-events: all;
}
.export-buttons {
    text-align: right;
}
.export-buttons.left {
    text-align:left;
}
.export-buttons button {
    margin-left:12px;
    font-size:0.75rem;
    border: 1px solid #CCCCCC;
}

.component-stack-container {
    opacity:0;
    display:none;
    transition: opacity .2s ease-out;
}

.chart-key {
    position: absolute;
    top: 4%;
    right: 7%;
    border: 1px solid var(--2026-light-grey, #C7D6D7);
    color:var(--2026-light-grey, #C7D6D7);
    border-radius: .75rem;
    padding: .5rem .75rem;
    font-weight: 500;
    z-index: 1;
    transition: opacity ease-out .2s;
}
.chart-key .colour-key {
    margin-bottom: .5rem;

}
.chart-key .colour-key,
.chart-key .last-year-marker {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

.chart-key svg,
.chart-key label {
    display:block;
    line-height:1;
    margin:0;
}
.chart-key svg {
    width:2rem;
}

.ati-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    position:absolute;
    top:0;
    right:52px;
    z-index: 100;
    background-color: rgba(255, 255, 255, .15) }
.ati-legend__row { display: flex; align-items: center; gap: 10px; }
.ati-legend__swatches { display: inline-flex; gap: 2px; }
.ati-legend__swatch { display: inline-block; width: 14px; height: 14px; vertical-align: middle; }
.ati-legend__label { font-size: 0.85em; letter-spacing: 0.05em; color: #fff; }
.ati-legend__note { margin: 6px 0 0; max-width: 260px; font-size: 0.7rem; line-height: 1.35; color: #fff; }

.aid-donor-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: background-color .15s ease;
}
.aid-donor-link:hover,
.aid-donor-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}
caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: var(--2026-light-grey);
    font-weight: bold;
    text-align: center;
    caption-side: top;
}
table {
    border-spacing: 0;
    min-width: 1100px;
}
th button {
    width: 100%;
    text-align: left;
    font-size: 0.75rem;
   /* border:none; */
    padding-left: 0;
    min-height: 40px;
}
td {
    font-size: 0.75rem;
    padding: 9px 12px;
}
td.category-cell,
td.score-cell{
    padding: 5px 4px;
}
.group-badge {
    color:#FFFFFF;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}
.score-bar {
    height:24px;
    width:100%;
    position: relative;
}
.score-bar .fill {
    position: absolute;
    height: 24px;
    top:0;
}
.score-bar .fill--hatch {
    background-image: repeating-linear-gradient(-45deg,
        var(--ati-bar-color) 0 1px, transparent 1px 6px);
}
th.sorter {
    background-color: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    border-left-width: 0;
    padding: 0;
    button {

    color: var(--2026-light-grey);
    }
}
th.sorter.ascending,
th.sorter.descending {
    background-color: rgba(0,0,0,0.25);
}
th.sorter:first-of-type {
    border-left-width: 1px;
}
th.sorter button {
    position: relative;
    padding-right: 24px;
    border: none;
    background-color: transparent;
}
th.sorter button:after {
    content: ' ';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position:absolute;
    right:12px;
    top:50%;
    transform: translateY(-2px);
}
th.sorter.ascending button:after {
    border-bottom: 5px solid currentColor;
}

th.sorter.descending button:after {
    border-top: 5px solid currentColor;
}
tr.clickable-row {
    cursor: pointer;

}
tr.clickable-row:hover {
    background-color: rgba(0,0,0,0.1);
}
th {
    height: 100%;
}
tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}
td.centered {
    text-align: center;
}

.ati-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
}
.ati-badge--acc { background: #40a5a4; color: #0d1d3b; }
.ati-badge--non { background: transparent; color: #40a5a4; border: 1px solid currentColor; }