@import '../../../../styles/app';






.mapChart {
  position: relative;
  margin: (-$widget-padding-vertical) (-$widget-padding-horizontal) 0;

  .map {
    position: relative;
    height: 400px;
  }

  .stats {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 5% 10%;
  }
}

/*  Part:Map Controls  */
:global {
  .map-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid $subtle-blue;
    background: #040620;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  
    > .nav-item > .nav-link {
      border-radius: 0;
      padding: 0.7143rem 0;
      color: $text-color;
  
      &:hover {
        background-color: $subtle-blue;
        color: $text-color;
      }
    }
  
    > .nav-item > .nav-link.active {
      &,
      &:hover {
        background-color: $subtle-blue;
        color: $text-color;
        font-weight: $font-weight-bold;
      }
    }
  
    > .nav-item:first-child > a {
      border-bottom-left-radius: $border-radius;
    }
  
    > .nav-item:last-child > a {
      border-bottom-right-radius: $border-radius;
    }
  }
}


.map svg {
  height: 100%;
  width: 100%;
}

