.description {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(229, 229, 229, 0.7);
}

div, img, footer {
  position: relative;
  box-sizing: border-box;
}
      #nested-coordinates {
            position: absolute;
            background-color: #f0f0f0;
            padding: 5px;
            border: 1px solid #ccc;
            z-index: 10000;
        }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  font-weight: 300;
}

h1 {
  font-size: 36pt;
}

h2 {
  font-size: 24pt;
}

h3 {
  font-size: 18pt;
}

h4 {
  font-size: 16pt;
}

h5 {
  font-size: 14pt;
}

h6 {
  font-size: 12pt;
}

p {
  font-size: 12pt;
  margin-bottom: 12pt;
}

strong {
  font-weight: 900;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  color: #e5e5e5;
}

.iwb-img {
    transition: opacity 0.3s ease;
}

.iwb-img:hover {
  opacity: 0.8 !important; /* Change the opacity to make it semi-visible */
}

.iwb-apply-img {
    transition: opacity 0.3s ease;
}

.iwb-apply-img:hover {
  opacity: 0.8 !important; /* Change the opacity to make it semi-visible */
}

a {
  transition: color 0.25s ease-in-out;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #dff3fd;
}

a:visited {
  color: #dff3fd;
}

li.active a, a:hover, a:active {
  color: #e5e5e5;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
select option {
 transform: translate(-50%, -50%);
  background: rgba(16,49,77, 0.99);
  border:none;
}
/* Define your CSS classes for different styles */
.energy {
filter: none;
}

.broadband {
filter: brightness(103%) contrast(114%) grayscale(0%) hue-rotate(340deg) invert(0%) opacity(100%) saturate(122%) sepia(0%);}

.mobile {
filter: brightness(104%) contrast(104%) grayscale(0%) hue-rotate(29deg) invert(0%) opacity(100%) saturate(122%) sepia(0%);
}


.centered-y {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.distribution-map {
  position: relative;
  width: 100%;
  /* padding: 20px; */
  box-sizing: border-box;
  margin: 0 auto;
}

.distribution-map > img {
  width: 100%;
  position: relative;
  margin: 0;
}

.xl {
    width: 80px !important;
    height: 80px !important;
    border-radius: 40px !important
    
}


.xs {
width: 6px !important;
    height: 6px !important;
    border-radius: 3px !important;
    
}

.moon {
  outline: none;
  z-index: 0;
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  opacity: 1;
  transform: translate(-50%, -50%);
  border: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
}


.greenmoon{
  outline: none;
  z-index: 0;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 1;
  transform: translate(-50%, -50%);
  /* background: rgb(255 255 255); */
  border: none;
  background: radial-gradient(circle at center, rgb(255 255 255) 0%, rgb(255 255 255) 78%);
}

.line{
  outline: none;
  z-index: 0;
  position: absolute;
  width: 4px;
  height: 116px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 1;
  transform: translate(-50%, -50%);
  /* background: rgb(255 255 255); */
  border: none;
  /* background: radial-gradient(circle at center, rgb(255 255 255 / 63%) 0%, rgb(255 255 255 / 44%) 78%); */
  transform: rotate(328deg);
  background-color: #f0f0f096;
  box-shadow: 0px 1px 6px 0px #dadadae8;
}

.goldenmoon{
  outline: none;
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 1;
  transform: translate(-50%, -50%);
  /* background: rgb(255 255 255); */
  border: none;
  background: radial-gradient(circle at center, rgb(255 255 255 / 92%) 0%, rgb(255 255 255) 78%);
}

.star{
  outline: none;
  z-index: 0;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 3px;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.lamp{
  outline: none;
  z-index: 0;
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.visitor{
  outline: none;
  z-index: 1000;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 3px;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255);
}
.visitstart{
  z-index: 0;
  position: absolute;
  width: 5px;
  height: 5px;
  opacity:0;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}



.blink {
    animation: blinkAnimation 2s infinite; /* Apply the blinkAnimation for 2 seconds, infinitely */
}

.red {
    background-color: red !important;
}

.distribution-map .map-point {
  cursor: pointer;
  outline: none;
  z-index: 0;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 1;
  transform: translate(-50%, -50%);
  background: rgb(235 229 229 / 0%);
  border: none;
  animation: blink 2s infinite; /* Apply the blinkAnimation for 2 seconds, infinitely */
}

.distribution-map .map-point::before {
  content: "";
  position: absolute;
  top: -20px; /* Adjust this value to increase the clickable area */
  left: -20px; /* Adjust this value to increase the clickable area */
  width: 50px; /* Adjust this value to increase the clickable area */
  height: 50px; /* Adjust this value to increase the clickable area */
  border-radius: 50%;
  opacity: 0; /* Make the hitbox invisible */
}


@keyframes blink {
  0% {
    opacity: 1; /* Start with full opacity */
  }
  50% {
    opacity: 0.5; /* Blink to half opacity at 50% of the animation */
  }
  100% {
    opacity: 1; /* Return to full opacity at the end of the animation */
  }
}

@keyframes starblink {
  0%, 14.28%, 28.56%, 42.84%, 57.12%, 71.4%, 85.68%, 100% {
    opacity: 0; /* Fully transparent at the beginning, 1/7th intervals, and end */
  }
  7.14%, 21.42%, 35.7%, 50%, 64.28%, 78.56%, 92.84% {
    opacity: 1; /* Fade in to full opacity at 1/14th intervals, 50%, and 13/14th intervals of the animation */
  }
}


@keyframes dangerblink {
  0%, 25%, 50%, 75%, 100% {
    opacity: 1; /* Full opacity at the beginning, middle, and end */
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    opacity: 0; /* Blink to fully transparent at 12.5%, 37.5%, 62.5%, 87.5% of the animation */
  }
}



@keyframes lampblink {
  0%, 100% {
    opacity: 1; /* Full opacity at the beginning, end, and most of the time */
  }
  10% {
    opacity: 0.5; /* Slowly dim in at 10% of the animation duration */
  }
  10%, 22.5%, 25%, 27.5%, 70% {
    opacity: 0.7; /* Set a lower opacity for a subtle flicker */
  }
  80% {
    opacity: 0.5; /* Slowly dim out at 80% of the animation duration */
  }
  20%, 5%, 8%, 15%, 18% {
    opacity: 0.8; /* Increase opacity slightly for smoother transitions */
  }
}

.lampblink {
  animation: lampblink 8s infinite;
}

.lampblink-1 {
  animation: lampblink 6s infinite;
}

.lampblink-2 {
  animation: lampblink 3s infinite;
}


@keyframes sparkle {
  0%, 20%, 40%, 60%, 80%, 100% {
    opacity: 0.9; /* Full opacity at regular intervals */
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 0.5; /* Lower opacity at intervals between full opacity */
  }
}



.starblink {
  animation: starblink 60s; /* Apply the blinkAnimation for 2 seconds, infinitely */
  animation-delay: 6s; /* 2s delay before each cycle */
}

.dangerblink {
  animation: dangerblink 3s infinite; /* Apply the blinkAnimation for 2 seconds, infinitely */
  animation-delay: 23s; /* 2s delay before each cycle */
}


.sparkle-success-1 {
  animation: sparkle 2s; /* Keep the duration fixed at 2 seconds */
  animation-delay: 43s; /* 2s delay before each cycle */
}
.move-point-success-1 {
  animation: moveAnimation-success-1 14s linear forwards;
  animation-delay: 45s;
  transform: translate(-50%, -50%);
}


.sparkle-bounced-application {
  animation: sparkle 2s; /* Keep the duration fixed at 2 seconds */
  animation-delay: 70s; /* 2s delay before each cycle */
}

.move-point-bounced-application {
  animation: moveAnimation-bounced-application 6s linear forwards;
  animation-delay: 72s;
  transform: translate(-50%, -50%);
}


.sparkle-bounced {
  animation: sparkle 2s; /* Keep the duration fixed at 2 seconds */
  animation-delay: 85s; /* 2s delay before each cycle */
}

.move-point-bounced {
  animation: moveAnimation-bounced 14s linear forwards;
  animation-delay: 87s;
  transform: translate(-50%, -50%);
}


.sparkle-success-2 {
  animation: sparkle 2s; /* Keep the duration fixed at 2 seconds */
  animation-delay: 101s; /* 2s delay before each cycle */
}

.move-point-success-2 {
  animation: moveAnimation-success-2 14s linear forwards;
  animation-delay: 103s;
  transform: translate(-50%, -50%);
}





.starglow {
  box-shadow: 0px 0px 20px 5px #fdfafa, inset 0 0 10px 0px #fdfafa;
  border: none;
}

.distribution-map .map-point:hover {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  box-shadow: 0 0 10px 3px #fdfafa, inset 0 0 10px 3px #fdfafa; /* Add both outer and inner box-shadows */
}

.glow-iwb {
  box-shadow: 0px 0px 20px 18px #fdfafa, inset 2px 1px 20px 20px #fdfafa;
  border: none;
}

.glow {
box-shadow: 0px 0px 20px 0px #828CA1, inset 0 0 20px 11px #828CA1;
      box-shadow: 0px 0px 20px 0px #ffffff, inset 0 0 20px 11px #ffffff;
      /* border: none; */
}

.greenglow {
      box-shadow: 0px -1px 13px 7px #b5cfbca1, inset 0 0 0px 0px #cdfacf6b;
      border: none;
      
}

.goldenglow {
      box-shadow: 0px 0px 20px 8px #ffeb3b5c, inset 0 0 11px 2px #fbf5ab99;
      border: none;
}

.redglow {
      box-shadow: 0px 0px 20px 8px #b85b5b, inset 0 0 6px 0px #be6f6f;
      border: none;
}

.redlampglow {
      box-shadow: 0px 0px 20px 9px #be8292c7, inset 0 0 20px 3px #f5bdcc36;
      border: none;
}


.blueglow {
      box-shadow: 0px 0px 20px 12px #6d94b4e3, inset 0 0 20px 0px #e6f4ff;
      border: none;
}

@keyframes moveAnimation-success-1 {
  0%, 5%, 10%, 15%, 25%, 35%, 50%, 60% {
    background-color: white;
    opacity: 1;
}

  /* Keyframes for specific points */
  0% {
    left: 86.33%;
    top: 25.24%;
  }
  5% {
    left: 82.66%;
    top: 29.18%;
  }
  10% {
    left: 75.63%;
    top: 32.31%;
  }
  15% {
    left: 64.38%;
    top: 33.21%;
  }
  25% {
    left: 54.53%;
    top: 29.53%;
  }
  35% {
    left: 42.34%;
    top: 33.73%;
  }
  50% {
    left: 27.34%;
    top: 39.14%;
    box-shadow: none;
    opacity: 0.6;
  }

  58% {
    left: 27.34%;
    top: 39.14%;
    background-color: #133F61;
    box-shadow: none;
    opacity: 0.6;
  }


  64% {
    left: 27.34%;
    top: 39.14%;
    background-color: green;
    box-shadow: none;
    opacity: 1;
  }

  70% {
    left: 27.34%;
    top: 39.14%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
  }

  75% {
    top: 42.05%;
    left: 17.2%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
    animation-timing-function: steps(1, end); /* Pause the animation at this keyframe */
  }

  80% {
    top: 42.05%;
    left: 17.2%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
  }

  85% {
    left: 17.42%;
    top: 42.15%;
    background-color: #FFD700;
    box-shadow: 0px -1px 13px 7px white, inset 0 0 0px 0px yellow;
    opacity: 0.8;
  }

  90% {
    left: 17.42%;
    top: 42.15%;
    background-color: #FFD700;
    box-shadow: 0px -1px 13px 7px white, inset 0 0 0px 0px yellow;
    opacity: 0.8;
  }

  100% {
    left: -1%;
    top: 46.88%;
    background-color: #FFD700;
    opacity: 0.8;
  }
}



@keyframes moveAnimation-bounced-application {
  0%, 5%, 10%, 15%, 25%, 35%, 50%, 60% {
    background-color: white;
    opacity: 1;
  }

  /* Keyframes for specific points */
  0% {
top: 19.86%; left: 25.16%
  }
  5% {
top: 20.66%; left: 27.50%
  }
  10% {
top: 23.74%; left: 33.13%
  }
  15% {
top: 29.15%; left: 33.59%
  }
  25% {
top: 39.02%; left: 27.42%
  }

  50% {
    left: 27.34%;
    top: 39.14%;
    background-color: #133F61;
    box-shadow: none;
    opacity: 0.6;
  }

  55% {
    left: 27.34%;
    top: 39.14%;
    background-color: #4CAF50;
    opacity: 1;
  }

  60% {
    left: 27.34%;
    top: 39.14%;
    background-color: #4CAF50;
    box-shadow: none;
    opacity: 0.6;
  }

  70% {
    top: 42.05%;
    left: 17.2%;
    background-color: #4CAF50;
    box-shadow: none;
    opacity: 0.6;
    animation-timing-function: steps(1, end); /* Pause the animation at this keyframe */
  }

  80% {
    top: 42.05%;
    left: 17.2%;
    background-color: #4CAF50;
    box-shadow: none;
    opacity: 0.6;
  }

  95% {
    left: 17.42%;
    top: 42.15%;
    background-color: #F44336;
    box-shadow: 0px -1px 13px 7px white, inset 0 0 0px 0px #f4433661;
    opacity: 0.8;
  }

  97% {
    left: 17.42%;
    top: 42.15%;
    background-color: #F44336;
    box-shadow: -2px -1px 13px 7px white, inset 0 0 0px 0px #f443369e;
    opacity: 0.8;
  }

  100% {top: 48.56%;left: 21.18%;background-color: #F44336;box-shadow: none;opacity: 0.6;}
}

@keyframes moveAnimation-bounced {
  0%, 5%, 10%, 15%, 25%, 35%, 50%, 60% {
    background-color: white;
    opacity: 1;
  }

  /* Keyframes for specific points */
  0% {
top: 18.71%; left: 76.64%
  }
  5% {
top: 21.1%; left: 72.19%
  }
  10% {
top: 22.44%; left: 66.41%
  }
  15% {
top: 25.54%; left: 61.33%
  }
  25% {
    left: 54.53%;
    top: 29.53%;
  }
  
    45% {
        top: 33.70%; left: 42.50%
  }


  55% {
    left: 27.20%;
    top: 39.14%;
    background-color: white;
    opacity: 1;
  }

  60% {
    left: 27.20%;
    top: 39.14%;
    background-color: #275072;
    box-shadow: none;
    opacity: 0.6;
  }

  73% {
    left: 27.20%;
    top: 39.14%;
    background-color: red;
    box-shadow: none;
    opacity: 0.6;
  }

  90% {
    top: 47.58%; left: 21.72%;
    background-color: red;
    box-shadow: none;
    opacity: 0.6;
  }


  100% {
top: 48.56%; left: 21.71%;
    background-color: red;
    width:6px;
    height:6px;
    border-radius:3px;
    box-shadow: none;
    opacity: 0.6;
  }

}


@keyframes moveAnimation-success-2 {
  0%, 5%, 10%, 15%, 25%, 35%, 50%, 60% {
    background-color: white;
    opacity: 1;
  }

  /* Keyframes for specific points */
  0% {
top: 17.76%; left: 48.83%
  }
  5% {
top: 20.31%; left: 49.69%
  }
  10% {
top: 22.49%; left: 53.20%
  }
  15% {
top: 29.55%; left: 54.45%
  }

  
    45% {
top: 33.70%; left: 42.50%
  }

  50% {
    left: 27.34%;
    top: 39.14%;
    /* background-color: #133F61; */
    box-shadow: none;
    opacity: 0.6;
  }

  55% {
    left: 27.34%;
    top: 39.14%;
    background-color: #133F61;
    opacity: 1;
  }

  60% {
    left: 27.34%;
    top: 39.14%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
  }

  75% {
    top: 42.05%;
    left: 17.2%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
    animation-timing-function: steps(1, end); /* Pause the animation at this keyframe */
  }

  80% {
    top: 42.05%;
    left: 17.2%;
    background-color: green;
    box-shadow: none;
    opacity: 0.6;
  }

  85% {
    left: 17.42%;
    top: 42.15%;
    background-color: #FFD700;
    box-shadow: 0px -1px 13px 7px white, inset 0 0 0px 0px yellow;
    opacity: 0.8;
  }

  90% {
    left: 17.42%;
    top: 42.15%;
    background-color: #FFD700;
    box-shadow: 0px -1px 13px 7px white, inset 0 0 0px 0px yellow;
    opacity: 0.8;
  }

  100% {
    left: -1%;
    top: 46.88%;
    background-color: #FFD700;
    opacity: 0.8;
  }
}


.distribution-map .map-point .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.7s ease-out;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: overlay;
  background: rgba(26, 26, 26, 0.75);
  border: 5px solid #7fcff7;
  border-radius: 14px;
  /* opacity: -0.2; */
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
  margin: 0;
  padding: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: 300px;
  height: 220px;
  color: #e5e5e5;
z-index:3000;
  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
  animation:none;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  
  -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0s, 0s;
  transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
  color: #afe1fa;
}