:root {
  --light-gray: #c9c9c9;
  --green: #53a31d;
  --dark-green: var(--cbs-dark-green);
  --red: var(--cbs-red);
  --transparent: transparent;
}

html,
body {
  overflow-x: hidden;
}

#main > article > section > h1 {
  display: none;
}

.full-width {
  box-sizing: unset;
  width: 100%;
  margin-left: -150%;
  padding-left: 150%;
  padding-right: 150%;
}

.only-print {
  display: none;
}

.gap-0 {
  gap: 0;
}

.black {
  color: var(--cbs-web-text);
}

.dark-aqua {
  color: var(--cbs-dark-aqua);
}

.photo-right-header {
  background-color: var(--cbs-dark-aqua);
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: var(--cbs-white);
  margin-bottom: 2rem;
}

.photo-right-header h1,
.photo-right-header p {
  color: var(--cbs-white);
}

.photo-right-header h1 {
  font-size: var(--font-size-huge);
  margin-bottom: var(--spacing-regular);
}

.photo-right-header img {
  width: 100%;
  max-width: 500px;
  margin: auto;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.photo-background-header {
  background-repeat: space;
  background-size: 100%;
  background-position-y: -163px;
  margin-bottom: 0.5rem;
}

.photo-background-header .header-title-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 2rem;
}

.photo-background-header .header-title-container > span {
  font-size: var(--font-size-medium-large);
  padding: 0.5rem 1.5rem;
}

.photo-background-header .header-title-container > span:nth-child(odd) {
  background-color: var(--cbs-white);
  color: var(--cbs-dark-aqua);
}

.photo-background-header .header-title-container > span:nth-child(even) {
  background-color: var(--cbs-dark-aqua);
  color: var(--cbs-white);
}

.photo-background-header .header-title-container > span {
  border-radius: 0 8px 8px 0;
}

.photo-background-header .header-title-container > span:first-child {
  font-size: var(--font-size-xxl);
  border-radius: 8px 8px 8px 0;
}

.photo-background-header .header-title-container > span:last-child {
  border-radius: 0 8px 8px 8px;
}

.date-print-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.print-alert {
  margin: 2rem 0;
}

.publication-date {
  color: var(--cbs-dark-aqua);
}

.date-print-container button {
  margin: 0;
  display: flex;
  align-items: center;
  text-decoration: underline !important;
}

.print-button-icon {
  font-size: var(--social-icons-size-regular);
  width: var(--social-icon-size-regular);
  filter: brightness(0) saturate(100%) invert(10%) sepia(84%) saturate(7077%)
    hue-rotate(185deg) brightness(87%) contrast(107%);
  margin-left: 0.75rem;
}

.layout-2-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 5.75rem;
  margin-bottom: 3rem;
}

.layout-2-cols > * {
  flex: 1 1 45%;
}

.large-heading {
  color: var(--cbs-dark-aqua);
  font-size: var(--font-size-extra-large);
}

.heading-larger-margin {
  margin-top: 2.5rem;
}

.gray-container {
  background-color: #f5f5f5;
  padding: 1.875rem 2.875rem;
  border-radius: 8px;
}

.legend-content,
.legend-row {
  display: flex;
  gap: 2rem 5rem;
}

.legend-content {
  flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.legend-row {
  align-items: center;
}

.legend-row > *:first-child {
  flex: 0 0 66px;
  width: 66px;
}

.footnotes {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  gap: 1rem;
}

.footnotes li {
  display: flex;
  gap: 0.75rem;
}

.thumbnail-links {
  display: flex;
  align-items: center;
  gap: 4rem 2rem;
  flex-wrap: wrap;
}

.thumbnail-links li {
  flex: 1 1 30%;
  position: relative;
}

.thumbnail-links .thumbnail-link-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.thumbnail-links .link-img {
  width: 66px;
  height: 66px;
}

.thumbnail-links .thumbnail-link-text {
  color: var(--cbs-dark-aqua);
}

.thumbnail-links a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.figure-container {
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 11px;
  line-height: 1.1;
}

.figure-container .indicator-container {
  display: flex;
  margin-bottom: 0.25rem;
}

.figure-container .indicator-data {
  flex-grow: 1;
  margin-top: 0.5rem;
}

.indicator-links {
  display: flex;
  align-items: end;
  width: 65px;
  font-size: var(--font-size-extra-small);
  margin-left: 1rem;
  flex-shrink: 0;
}

.indicator-links.mobile {
  display: none;
  justify-content: end;
  width: 60px;
  margin-left: 1rem;
}

.indicator-links * {
  color: var(--cbs-dark-aqua);
  text-decoration: underline;
}

.indicator-title {
  background-color: var(--cbs-light-gray);
  font-size: 13px;
  padding: 5px 3px 3px 5px;
  border-radius: 3px;
  margin-top: 2px;
}

.category-title {
  margin: 30px 0 0 0;
  padding: 16px 0 0 0;
  border-top: 1px dashed var(--cbs-dark-gray);
  font-size: 14px;
}

.figure-container .theme-title,
.figure-container .category-title {
  font-family: var(--font-family-titles), sans-serif;
}

.figure-container .header-container {
  display: flex;
}

.figure-container .header-container:has(.theme-sdgs-outer.two-rows) {
  margin-top: 3rem;
}

.figure-container .theme-title {
  color: var(--cbs-aqua);
  font-size: var(--font-size-extra-large);
  flex-grow: 1;
}

.figure-container .theme-sdgs-outer {
  flex: 0 0 160px;
  position: relative;
}

.figure-container .theme-sdgs-outer.one-icon {
  flex: 0 0 48px;
}

.figure-container .theme-sdgs-outer.two-icons {
  flex: 0 0 104px;
}

.figure-container .theme-sdgs-outer .theme-sdgs-inner {
  position: absolute;
  bottom: -60px;
  display: flex;
  gap: 0.5rem;
  height: 104px;
  flex-wrap: wrap;
  z-index: 10;
}

.figure-container .theme-sdgs-outer.one-row .theme-sdgs-inner {
  bottom: -32px;
  height: 48px;
}

.figure-container .theme-sdgs-inner > div {
  position: relative;
  width: 48px;
  height: 48px;
}

.figure-container .theme-sdgs-inner > div > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.figure-container
  .header-container
  ~ div:not(.header-container):not(.page-break) {
  margin-bottom: 2.5rem;
}

.figure-container .category-title {
  font-size: var(--font-size-large);
  margin: 8px 0 0 0;
  padding: 8px 0 0 0;
}

.figure-container .category-title.icons-two-rows-above {
  padding-top: 3.375rem;
}

.figure-container .category-title.icons-one-row-above {
  padding-top: 24px;
}

.value-nl-container,
.value-eu-container {
  display: flex;
  align-items: end;
  padding-bottom: 0.25rem;
}

.value-nl-container {
  flex-grow: 1;
}

.values-dividing-line {
  border-right: 2px solid var(--cbs-light-gray);
  margin: 0 1rem;
}

.value-eu-container {
  justify-content: flex-end;
  flex: 0 0 275px;
  margin-left: 3%;
}

.values-container {
  display: flex;
  min-height: 45px;
}

.values-container > div > div {
  display: flex;
  align-items: end;
}

.value-number {
  font-family: var(--font-family-titles);
  font-size: 22px;
  line-height: 22px;
  white-space: nowrap;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.value-eu-container > div > * {
  text-align: right;
}

.value-eu-container .value-number {
  min-width: 47px;
}

.value-eu-container .value-number sup {
  font-size: 12px;
  line-height: 9px;
}

.value-nl-arrow {
  min-width: 30px;
}

.value-nl-arrow > svg {
  width: 30px;
  height: 19px;
}

.value-eu-container > div > .value-total-countries {
  min-width: 47px;
}

.value-eu-bars svg {
  width: 166px;
  height: 32px;
}

.figure-container + .chart-datatable .datatable-container.collapse:not(.show) {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.color-black {
  color: var(--cbs-dark-gray);
}

.fill-color-black {
  fill: var(--cbs-dark-gray);
}

.color-light-gray {
  color: var(--light-gray);
}

.fill-color-light-gray {
  fill: var(--light-gray);
}

.color-gray,
.color-dark-gray {
  color: var(--cbs-dark-gray);
}

.fill-color-gray,
.fill-color-dark-gray {
  fill: var(--light-gray);
}

.color-green {
  color: var(--green);
}

.fill-color-green {
  fill: var(--green);
}

.color-red {
  color: var(--red);
}

.fill-color-red {
  fill: var(--red);
}

.color-white {
  color: var(--cbs-white);
}

.fill-color-white {
  fill: var(--cbs-white);
}

.color-transparent {
  color: var(--transparent);
}

.fill-color-transparent {
  fill: var(--transparent);
}

@media only screen and (max-width: 992px) {
  .photo-background-header {
    background-position-y: -10vw;
  }

  .thumbnail-links {
    gap: 2rem;
  }

  .thumbnail-links li,
  .layout-2-cols > * {
    flex: 1 1 100%;
  }

  .photo-background-header .header-title-container {
    padding: 1.5rem;
  }

  .layout-2-cols {
    margin-bottom: 0.5rem;
  }

  .gray-container {
    padding: 1.25rem 1rem;
  }

  .figure-container .theme-title {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media screen and (max-width: 768px) {
  .figure-container .indicator-data {
    margin-top: 2rem;
  }

  .figure-container .indicator-title {
    margin-top: 0.25rem;
  }

  .figure-container .values-container {
    flex-direction: column;
  }

  .indicator-links.desktop {
    display: none;
  }

  .indicator-links.mobile {
    display: flex;
  }

  .value-eu-container {
    flex: 0;
  }

  .value-nl-container > div {
    flex-grow: 1;
  }

  .figure-container .icon {
    min-width: 33px;
  }

  .figure-container .value-number {
    line-height: normal;
  }

  .figure-container .value-description {
    flex-grow: 1;
  }

  .figure-container .value-nl-arrow {
    min-width: 18px;
  }

  .figure-container .value-nl-arrow > svg {
    width: 18px;
  }

  .figure-container .value-eu-bars svg {
    width: 166px;
    height: 32px;
  }

  .legend-content,
  .legend-row {
    gap: 1rem 2rem;
  }

  .legend-content {
    margin-top: 1rem;
  }
}

@media screen and (max-width: 650px) {
  .photo-background-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: initial;
  }
}

@media print {
  .no-print,
  .no-print *,
  a.no-href-in-print:after {
    display: none !important;
  }

  .only-print {
    display: block;
  }

  .print-page-break {
    page-break-before: always;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
    min-width: auto !important;
  }
}