/*
 * Use CSS variables for each grade. Allows finer control of element styling;
 */
.grade--a {
  --color: #21578A;
}

.grade--b {
  --color: #4C8C40;
}

.grade--c {
  --color: #F5B21E;
}

.grade--d {
  --color: #E87524;
}

.grade--f {
  --color: #D01F30;
}

.grade--none {
  --color: #EEE;
}

.grade--f1 {
  --color: rgb(216, 62, 72);
}

.grade--f2 {
  --color: rgb(228, 125, 134);
}

.grade--f3 {
  --color: rgb(232, 144, 152);
}

.grade--f4 {
  --color: rgb(239, 181, 186);
}

.grade--f5 {
  --color: rgb(248, 224, 225);
  --text: #1C1C1B;
}

@keyframes activecountry {
  to {
    stroke-dashoffset: 100;
  }
}
.wp-block-map__header {
  background: #FFF;
  width: 100%;
  position: relative;
  z-index: 4;
  padding: 10px 13px;
}
.wp-block-map__header h5 {
  margin-bottom: 0;
  flex-grow: 1;
  font-size: 14px;
}
.wp-block-map__header .map-year {
  min-width: 97px;
}
.wp-block-map__map-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 500px;
}
.wp-block-map .wp-block-map__wrap {
  z-index: 3;
  position: relative;
}
.wp-block-map .wp-block-grading-scale__container {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -5px;
  z-index: 2;
  padding-top: 25px;
}

.map-tool-tip {
  width: 100%;
  max-width: 375px;
  height: auto;
  max-height: 380px;
  position: absolute;
  right: 100px;
  top: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}
@media (max-width: 960px) {
  .map-tool-tip {
    right: 15px;
    top: 15px;
    max-width: 50vw;
    transform: scale(0.75);
  }
}
@media (max-width: 600px) {
  .map-tool-tip {
    right: 15px;
    top: 15px;
    max-width: 67vw;
    transform: scale(0.75);
  }
}
.map-tool-tip .map-tool-tip__close {
  display: flex;
  justify-content: flex-end;
}
.map-tool-tip .map-tool-tip__close button {
  background: none;
  border: none;
  font-size: 12px;
  text-decoration: underline;
}
.map-tool-tip__header {
  display: flex;
  align-items: center;
  gap: 20px;
}
.map-tool-tip__header .map-country__info-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.map-tool-tip__header .map-country__info-wrap .map-country__name {
  font-size: 22px;
}
.map-tool-tip__header .map-country__info-wrap .map-country__region {
  font-size: 18px;
}
.map-tool-tip__header .map-country__flag {
  width: 37px;
  height: 37px;
  border-radius: 100%;
  overflow: hidden;
  background: #D9D9D9;
  margin: 0;
  padding: 0;
}
.map-tool-tip__header .map-country__flag img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.map-tool-tip__header .map-country__name,
.map-tool-tip__header .map-country__region {
  font-weight: 600;
  font-family: "Barlow", sans-serif;
}
.map-tool-tip__header .map-country__region {
  font-size: 18px;
}
.map-tool-tip__body {
  width: calc(100% + 40px);
  margin-left: -20px;
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-tool-tip__footer {
  width: 100%;
  padding: 12px 0 0 0;
}
.map-tool-tip__footer .view-country-link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  font-family: "Barlow", sans-serif;
}

.map-country-score {
  width: 100%;
}
.map-country-score__group {
  display: flex;
  flex-direction: column;
}
.map-country-score__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #D9D9D9;
  border-radius: 6px;
  height: 32px;
}
.map-country-score__row .map-country-score__grade-wrap .map-country-score__percent {
  color: var(--text, #fff);
}
.map-country-score__row .map-country-score__grade-wrap .map-country-score__grade {
  color: var(--text, #fff);
}
.map-country-score__row .map-country-score__label {
  color: #013B71;
}
.map-country-score__row--region {
  background-color: transparent;
  height: 20px;
}
.map-country-score__row--region .map-country-score__grade-wrap {
  background: none !important;
}
.map-country-score__row--region .map-country-score__label,
.map-country-score__row--region .map-country-score__grade,
.map-country-score__row--region .map-country-score__percent {
  font-size: 13px;
  color: #013B71 !important;
}
.map-country-score__row--region .map-country-score__label {
  text-transform: uppercase;
}
.map-country-score__group[data-report=GBPI] .map-country-score__percent {
  font-size: 10px !important;
}
.map-country-score__label {
  color: #013B71;
  font-weight: 600;
  font-size: 18px;
  padding: 5px 9px;
}
.map-country-score__grade-wrap {
  border-radius: 6px;
  padding: 5px 15px;
  width: 100%;
  max-width: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}
.map-country-score__grade, .map-country-score__percent {
  color: #FFF;
  font-weight: 600;
  font-size: 18px;
}
.map-country-score__grade {
  width: 14px;
  text-align: center;
}
.map-country-score__percent {
  text-align: right;
  text-transform: uppercase;
}

body .wp-block-map .controls {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}
body .wp-block-map .controls > * {
  background-color: #FFF;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center;
  border: solid 1px #A4A4A4;
  text-indent: -99999em;
  min-width: 30px;
  height: 30px;
  position: relative;
}
body .wp-block-map .controls > *.zoom_in_btn {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z" fill="%23013B71"/></svg>');
}
body .wp-block-map .controls > *.zoom_out_btn {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z" fill="%23013B71"/></svg>');
}
body .wp-block-map .controls > *.zoom_reset_btn {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M370.7 133.3C339.5 104 298.9 88 255.8 88c-77.5 .1-144.3 53.2-162.8 126.9-1.3 5.4-6.1 9.2-11.7 9.2H24.1c-7.5 0-13.2-6.8-11.8-14.2C33.9 94.9 134.8 8 256 8c66.4 0 126.8 26.1 171.3 68.7L463 41C478.1 25.9 504 36.6 504 57.9V192c0 13.3-10.7 24-24 24H345.9c-21.4 0-32.1-25.9-17-41l41.8-41.7zM32 296h134.1c21.4 0 32.1 25.9 17 41l-41.8 41.8c31.3 29.3 71.8 45.3 114.9 45.3 77.4-.1 144.3-53.1 162.8-126.8 1.3-5.4 6.1-9.2 11.7-9.2h57.3c7.5 0 13.2 6.8 11.8 14.2C478.1 417.1 377.2 504 256 504c-66.4 0-126.8-26.1-171.3-68.7L49 471C33.9 486.1 8 475.4 8 454.1V320c0-13.3 10.7-24 24-24z" fill="%23013B71"/></svg>');
}

.wp-block-map__map-area {
  position: relative;
  padding: 0;
}
.wp-block-map__map-area svg {
  position: relative;
}
.wp-block-map__map-area svg path.country {
  transition: fill 0.25s linear;
  stroke: #fff;
  fill: #e0e0e0;
  stroke-linejoin: round;
  shape-rendering: geometricprecision;
  vector-effect: non-scaling-stroke;
}
.wp-block-map__map-area svg path.country.grade--a {
  fill: #21578A;
}
.wp-block-map__map-area svg path.country.grade--b {
  fill: #4C8C40;
}
.wp-block-map__map-area svg path.country.grade--c {
  fill: #F5B21E;
}
.wp-block-map__map-area svg path.country.grade--d {
  fill: #E87524;
}
.wp-block-map__map-area svg path.country.grade--f {
  fill: #D01F30;
}
.wp-block-map__map-area svg path.country.grade--none {
  fill: #EEE;
}
.wp-block-map__map-area svg path.country.grade--f1 {
  fill: rgb(216, 62, 72);
}
.wp-block-map__map-area svg path.country.grade--f2 {
  fill: rgb(228, 125, 134);
}
.wp-block-map__map-area svg path.country.grade--f3 {
  fill: rgb(232, 144, 152);
}
.wp-block-map__map-area svg path.country.grade--f4 {
  fill: rgb(239, 181, 186);
}
.wp-block-map__map-area svg path.country.grade--f5 {
  fill: rgb(248, 224, 225);
}
.wp-block-map__map-area svg path.country.active {
  stroke-width: 2;
  stroke-dasharray: 5;
  stroke-dashoffset: 0;
  animation: activecountry 10s linear infinite;
}
.wp-block-map__map-area .controls {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.wp-block-map__map-area .map-tool-tip {
  position: absolute;
}
.wp-block-map__map-area .map-tool-tip.is--hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}