@font-face {
  font-family: "Bold";
  src: url("/assets/fonts/Mulish-Bold.ttf");
}
@font-face {
  font-family: "Semibold";
  src: url("/assets/fonts/Mulish-SemiBold.ttf");
}
@font-face {
  font-family: "Regular";
  src: url("/assets/fonts/Mulish-Regular.ttf");
}
@font-face {
  font-family: "ExtraBold";
  src: url("/assets/fonts/Mulish-ExtraBold.ttf");
}
#map {
  width: 100%;
  height: 600px;
  margin-top: clamp(32px, calc(-4.5714285714px + 4.7619047619vw), 64px);
  margin-bottom: clamp(32px, calc(-4.5714285714px + 4.7619047619vw), 64px);
  position: relative;
  border-radius: 8px;
}
#map .infoTriangle {
  position: absolute;
  bottom: -54px;
  z-index: 999999;
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-left: 400px solid #eeeeee;
  border-bottom: 200px solid transparent;
  filter: drop-shadow(5px 5px 4px black);
}
#map .infoTriangle .infoHeader {
  position: absolute;
  top: 30%;
  left: 0;
  filter: drop-shadow(0px 0px 0px transparent) !important;
}

.legend {
  font-family: "Regular" !important;
  font-size: 0.875rem !important;
  position: absolute;
  z-index: 9999;
  background-color: #F8F9FB;
  padding: 59px 5px 0px 33px;
  width: 350px;
  display: none;
  flex-direction: column;
  gap: 15px;
  right: 0;
  top: 0px;
  height: 100%;
  box-shadow: 0px 0px 20px 12px #5c5c5c;
}
.legend span:first-child {
  font-family: "Semibold" !important;
  font-size: 1rem !important;
}
.legend ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legend ul li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.legendToggleContainer {
  width: 350px;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
}
.legendToggleContainer .legend-toggle {
  background-color: white;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: "Regular" !important;
  font-size: 1rem !important;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  display: flex;
  gap: 10px;
  align-items: center;
}

.legend.visible {
  display: flex;
}

.leaflet-popup-close-button {
  display: none !important;
}

.leaflet-popup-content {
  text-align: center !important;
}

body {
  margin: 0px;
  padding: 0px;
}

.offcanvas {
  width: 500px;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  position: absolute !important;
  top: 0;
  box-shadow: 0px 0px 20px 12px #5c5c5c;
  z-index: 999999;
}
.offcanvas .offcanvas-header {
  background-color: #f8f9fb;
  align-items: baseline !important;
}
.offcanvas .offcanvas-header .ocHeaderText {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offcanvas .offcanvas-header .ocHeaderText .flagAndInfo {
  display: flex;
  gap: 10px;
  align-items: center;
}
.offcanvas .offcanvas-header .ocHeaderText .flagAndInfo #flag {
  width: 64px;
}
.offcanvas .offcanvas-header .ocHeaderText .flagAndInfo #info {
  display: flex;
  flex-direction: column;
}
.offcanvas h1 {
  font-family: "Bold" !important;
  font-size: 1.562rem !important;
}
.offcanvas h2 {
  font-family: "Bold" !important;
  font-size: 1.25rem !important;
}
.offcanvas h3 {
  font-family: "Semibold" !important;
  font-size: 1rem !important;
}
.offcanvas ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}
.offcanvas ul li {
  font-family: "Regular" !important;
  font-size: 1rem !important;
}

@media (max-width: 768px) {
  #map {
    height: 350px !important;
    border-radius: 0px !important;
  }
  #map .legendToggleContainer {
    width: 100% !important;
  }
  #map .legend {
    width: 100% !important;
    gap: 10px !important;
    padding: 53px 5px 0px 33px;
  }
  #map .legend ul {
    gap: 5px !important;
  }
  .offcanvas {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  .offcanvas #flag {
    width: 52px !important;
  }
  .offcanvas h1 {
    font-size: 1.2rem !important;
  }
  .offcanvas h2 {
    font-size: 1rem !important;
  }
  .offcanvas ul li {
    font-size: 0.9rem !important;
  }
}/*# sourceMappingURL=networkMap.css.map */