* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: Roboto, Arial, sans-serif;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.map-wrapper {
  width: 100%;
  position: relative;
  padding: 55px 0;
}

#map-coordination-reference {
  width: 100%;
  height: 100%;
  position: relative;
}

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

.infobox {
  position: absolute;
  display: none;
  pointer-events: none;
}

.infobox.show {
  display: inherit;
}

.sectionName {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

.numberOfMembers {
  font-size: 22px;
  line-height: 26px;
  font-weight: 400;
}

.infobox .box,
.infobox .pin {
  background-color: black;
}

.infobox .content {
  font-family: Roboto, Arial, sans-serif;
  color: white;
}

.infobox .content p {
  margin: 0;
  text-align: center;
}

.infobox .sectionName {
  max-width: 170px;
}

.infobox .box {
  padding: 8px 8px 10px 8px;
}

.infobox .pin {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  margin-top: -7px;
}

.infobox .shape {
  display: flex;
  flex-direction: column;
}

.infobox.center {
  transform: translate(-50%, -100%);
}

.infobox.left {
  transform: translate(-10px, -100%);
}

.infobox.center .shape {
  align-items: center;
}

.infobox.left .shape.left {
  align-items: start;
}

.infobox.left .shape .pin {
  margin-left: 3px;
}

/* Zuweisen der verschieden Farbverlaeuft zu den einzelnen Sektionen. Definiert sind die Farbverläufen im SVG in der HTML-Datei (z. B. index-DE.html) */

/* Sektionen in der Romandie */
#sektion_1:hover,
#sektion_2:hover,
#sektion_3:hover,
#sektion_4:hover,
#sektion_5:hover,
#sektion_6:hover {
  fill: url("#GradientFR");
}

/* Sektionen in der Deutschschweiz */
#sektion_7:hover,
#sektion_8:hover,
#sektion_9:hover,
#sektion_10:hover,
#sektion_11:hover,
#sektion_12:hover,
#sektion_13:hover,
#sektion_14:hover,
#sektion_15:hover,
#sektion_16:hover,
#sektion_17:hover,
#sektion_18:hover,
#sektion_19:hover,
#sektion_20:hover,
#sektion_21:hover,
#sektion_22:hover,
#sektion_23:hover {
  fill: url("#GradientDE");
}

/* Sektionen im Tessin */
#sektion_13:hover {
  fill: url("#GradientTI");
}

svg #sektion_11:hover ~ .aargau.speechBubble {
  display: inherit;
}

svg #sektion_12:hover ~ .zentralschweiz.speechBubble {
  display: inherit;
}