.block.data-map {
  background: var(--color-brand-alice-blue);
  width: 100%;
  position: relative;
  margin-bottom: 200px;
}

  @media(max-width: 767px) {.block.data-map {
    margin-bottom: 80px;
    padding-top: 40px;
    padding-bottom: 80px
}
  }

  /* 
  #wrap {
    height: 2000vh;
    position: relative;
  }

  #scene {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  } */

  .block.data-map #wrap {
    height: 600px;
    position: relative;
  }

  @media(max-width: 767px) {

  .block.data-map #wrap {
      width: 100%;
      /* aspect-ratio: 350 / 280; */
      height: auto
  }
    }

  .block.data-map #scene {
    position: relative;  
    height: 100%;
    width: 100%;
    /* overflow: hidden; */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
    max-width: 1280px;
    margin: 0 auto;
    gap: 40px;
    
  }

  @media (max-width: 767px) {

  .block.data-map #scene {
      flex-direction: column-reverse;
      gap: 0
    
  }
    }

  .block.data-map #content-bounds {
  
    position: relative;
    width: 100%;
    /* max-width: 1280px; */
    max-width: 400px;
    height: 100%;
    /* pointer-events: none; */
    z-index: 10;
    overflow: visible;
  }

  @media(max-width: 767px) {

  .block.data-map #content-bounds {
      /* max-width: 300px; */
      max-width: 100%;
      padding-top: 32px
  }
    }

  .block.data-map #content-bounds .content-bounds-inner {
      width: 100%;
      height: 100%;
    }

  @media(max-width: 767px) {

  .block.data-map #content-bounds .content-bounds-inner {
        display: flex;
        align-items: flex-end
    }
      }

  .block.data-map #content-bounds #text-panel {
      /* position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(300px, 30vw, 420px);
      pointer-events: auto; */
      flex: 0 0 400px;
      max-width: 400px;
      z-index: 2;
      width: 100%;
      height: 100%;
    }

  @media(max-width: 767px) {

  .block.data-map #content-bounds #text-panel {
        flex: 0 0 100%;
        max-width: 100%
    }
      }

  .block.data-map #content-bounds #text-panel .slides {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;


      }

  @media(max-width: 767px) {

  .block.data-map #content-bounds #text-panel .slides {
          height: 160px


      }
        }

  .block.data-map #content-bounds #text-panel .slides .slide {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            visibility: hidden;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 20px;
          
          }

  @media(max-width: 767px) {

  .block.data-map #content-bounds #text-panel .slides .slide {
              top: 10px;
              transform: none
          
          }
            }

  .block.data-map #content-bounds #text-panel .slides .slide-title {
            display: flex;
            align-items: center;
            gap: 2px;
          }

  .block.data-map #content-bounds #text-panel .slides .slide-title svg {
              fill: var(--color-brand-air-force-blue, #5C8DA5);
            }

  .block.data-map #content-bounds #text-panel .slides .slide-title h3 {
              margin: 0;
              color: var(--color-brand-air-force-blue, #5C8DA5);
              font-family: "Neue Haas Grotesk Text Pro";
              font-size: 18px;
              font-style: normal;
              font-weight: 700;
              line-height: 110%;
            }

  .block.data-map #content-bounds #text-panel .slides .slide-text-wrap {
            color: #041A2A;
            font-family: "Neue Haas Grotesk Display Pro";
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height:116%;
            letter-spacing: -0.24px;
            max-width: 400px;
            text-wrap: pretty;
          }

  @media(max-width: 767px) {

  .block.data-map #content-bounds #text-panel .slides .slide-text-wrap {
              font-size: 18px
          }
            }

  .block.data-map #content-bounds #text-panel .slides .slide-text-wrap .slide-title-number {
              color: var(--color-brand-air-force-blue, #5C8DA5);
            }

  .block.data-map #content-bounds #text-panel .slides .slide-text-wrap .slide-title-number sup {
                font-size: 55%;
                left:0.1em;
                position: relative;
                top: -0.75em;
              }

  .block.data-map #content-bounds #text-panel .slides .slide-source {
            margin: 0;
          }

  .block.data-map #content-bounds #text-panel .slides .slide-source a {
            font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #041A2A;
            /* overflow: hidden; */
            cursor: pointer;
          }

  /* text-decoration: underline; */

  .block.data-map #content-bounds #text-panel .slides .slide-source a:hover {
              opacity: 0.8;
              color: var(--color-brand-air-force-blue, #5C8DA5);
              /* text-decoration: underline; */
            }

  .block.data-map #content-bounds #text-panel .slides .w,
          .block.data-map #content-bounds #text-panel .slides .source-inner {
            display: inline-block;
            /* transform: translateY(120%); */
          }

  .block.data-map #content-bounds .content-controls {
      position: absolute;
      top: calc(50% + 100px);
      left: 0;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      z-index: 10;
      padding: 0 20px;
      width: 100%;
    }

  @media(max-width: 767px) {

  .block.data-map #content-bounds .content-controls {
        bottom: -10px;
        top: unset;
        right: 0;
        left: unset;
        z-index: 9;
        justify-content: center;
        width: 100%
    }
      }

  .block.data-map #content-bounds .content-controls .data-map-controls {
        display: flex;
        gap: 20px; 
        align-items: center;
      }

  .block.data-map #content-bounds .content-controls .data-map-controls .btn {
          height: 40px;
          width: 40px;
          aspect-ratio: 1/1;
          padding: 0;
          max-width: none;
          margin: 0;
          border: none !important;
          border-radius: var(--radius-radius-full, 360px);
          background: var(--surface-surface-brand, #C0EBF6);
          transition: background 0.3s ease;
        }

  @media(max-width: 767px) {

  .block.data-map #content-bounds .content-controls .data-map-controls .btn {
            height: 32px;
            width: 32px
        }
          }

  .block.data-map #content-bounds .content-controls .data-map-controls .btn.disabled {
            display: none;
            opacity: 0.3;
            pointer-events: none;
            cursor: not-allowed;
          }

  .block.data-map #content-bounds .content-controls .data-map-controls .btn:hover {
            background:#9DD1DE;
          }

  .block.data-map #content-bounds .content-controls .data-map-controls .btn svg {
            width: 24px;
            height: 24px;
            color: var(--text-text-primary, #041A2A) !important;
            fill: var(--text-text-primary, #041A2A);
          }

  .block.data-map .data-map-visual {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    z-index: 1;
    width: 100%;
  }

  .block.data-map .data-map-visual #data-map-canvas {
      width: 100%;
      height: 600px;  
      display: block;
    }

  /* position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block; */

  @media(max-width: 767px) {

  .block.data-map .data-map-visual #data-map-canvas {
        /* left: 10px;
        top:- 40px;

        top: -10px;
        width: calc(100% - 40px);
        object-fit: contain;
        left: 50%;
        transform: translateX(-50%); */
        aspect-ratio: 350 / 280;
        height: auto;
        width: 100%
    }
      }

  .block.data-map .data-map-visual #data-map-legend {
      /* position: absolute;
      bottom: -20px;
      right: 0; */
      align-items: center;
      gap: 10px;
      display: flex;
      align-items: center;
      /* padding: 10px 20px; */
      justify-content: flex-end;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 20px;
    }

  @media(max-width: 767px) {

  .block.data-map .data-map-visual #data-map-legend {
        bottom: 50px;
        flex-direction: column;
        align-items: flex-start;
        left: 0;
        padding: 10px 0;
        display: none
    }
      }

  .block.data-map .data-map-visual #data-map-legend-mobile {
      display: none;
      position: relative;
    }

  @media(max-width: 767px) {

  .block.data-map .data-map-visual #data-map-legend-mobile {
        display: flex;
        position: absolute;
        bottom: 0px;
        left: 20px;
        width: 100%;
        z-index: 10
    }
      }

  .block.data-map .data-map-visual #data-map-legend-mobile .mobile-legend-toggle {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

  .block.data-map .data-map-visual .data-map-legend-tooltip {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      display: flex;
      padding: var(--radius-md, 8px);
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      border-radius: var(--radius-sm, 4px);
      background: var(--color-brand-light-blue, #C0EBF6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      pointer-events: none;
    }

  .block.data-map .data-map-visual .data-map-legend-tooltip.is-active {
        display: flex;
        opacity: 1;
        visibility: visible;
      }

  .block.data-map .data-map-visual .data-map-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

  .block.data-map .data-map-visual .data-map-legend-item svg {
        width: 16px;
        height: 16px;
      }

  .block.data-map .data-map-visual .data-map-legend-item .legend-text {
        color: var(--text-text-primary, #041A2A);
        font-family: "Neue Haas Grotesk Display Pro";
        font-size: 14px;
        font-style: normal;
        font-weight: 450;
        line-height: 120%;
        letter-spacing: -0.28px;
      }

  @media (max-width: 1023px) {.block.data-map {
    /* #text-panel {
      top: 10%;
      left: 5%;
      transform: none;
      width: 90%;
    } */
}

    .block.data-map .slide {
      
    }
 
  }

  @media(max-width: 767px) {
    
    .block.data-map #text-panel {
      /* top: calc(10% + 40px); */
    }
  }


@media (prefers-reduced-motion: reduce) {
  .data-map-visual #data-map-canvas .slide {
    animation: none !important;
  }
}


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