.region {
  fill:#d0d0e1;
  stroke: #efeff5;
  stroke-width: 0.5px;
}

.region:hover {
  fill: #ffc200;
}

.league-1-0-club-label, .league-2-0-club-label, .league-3-0-club-label, .league-3-1-club-label, .league-4-0-club-label, .league-4-1-club-label{
  font-family: Helvetica, Tahoma, 'SwIS Bold', Arial;
  fill: #205f81;
  font-size: 6px;
}

.league-1-0-club-label:hover, .league-2-0-club-label:hover, .league-3-0-club-label:hover, .league-3-1-club-label:hover, .league-4-0-club-label:hover, .league-4-1-club-label:hover {
  font-family: Helvetica, Tahoma, 'SwIS Bold', Arial;
  fill: #205f81;
  font-size: 6px;
  font-weight: bolder;
}

.box {
  margin: 10px 10px 10px 10px;
  background: #e2e2e2;
}

.background {
  position: absolute;
  width: 35%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #205f81;
  border: 5px solid #ffc200;
}

.league-1-0 {
  d: path("M-2 -2 L2 -2 L2 2 L-2 2 Z");
  fill: #00b300;
}

.league-1-0:hover {
  d: path("M-3 -3 L3 -3 L3 3 L-3 3 Z");
  stroke: #66ff66;
  stroke-width: 0.5px;
}

.league-2-0 {
  d: path("M-3 0 L-1.0 1.0 L0 3 L1.0 1.0 L3 0 L1.0 -1.0 L0 -3 L-1.0 -1.0 Z");
  fill: #00b3b3;
}

.league-2-0:hover {
  d: path("M-5 0 L-2.0 2.0 L0 5 L2.0 2.0 L5 0 L2.0 -2.0 L0 -5 L-2.0 -2.0 Z");
  stroke: #66ffff;
  stroke-width: 0.5px;
}

.league-3-0 {
  d: path("M0 -2 L-2 0 L0 2 L2 0 Z");
  fill: red;
  stroke-width: 0.5px;
}

.league-3-0:hover {
  d: path("M0 -3 L-3 0 L0 3 L3 0 Z");
  stroke: darkred;
  stroke-width: 0.5px;
}

.league-3-1 {
  d: path("M0 -2 L-2 0 L0 2 L2 0 Z");
  fill: yellow;
  stroke-width: 0.5px;
}

.league-3-1:hover {
  d: path("M0 -3 L-3 0 L0 3 L3 0 Z");
  stroke: darkorange;
  stroke-width: 0.5px;
}

.league-4-0 {
  d: path("M0 -2 L2 2 L-2 2 Z");
  fill: brown;
  stroke-width: 0.5px;
}

.league-4-0:hover {
  d: path("M0 -3 L3 3 L-3 3 Z");
  stroke: darkmagenta;
  stroke-width: 0.5px;
}

.league-4-1 {
  d: path("M0 -2 L2 2 L-2 2 Z");
  fill: blue;
  stroke-width: 0.5px;
}

.league-4-1:hover {
  d: path("M0 -3 L3 3 L-3 3 Z");
  stroke: darkblue;
  stroke-width: 0.5px;
}

.map-svg {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
  overflow: auto;
}