/* Patterns */
.dash-pattern {
  fill: url(#diagonalDashPattern);
}

.wioniq_grass_pattern {
  fill: url(#wioniq_grass_pattern);
}

.wioniq_waves_pattern {
  fill: url(#waves_custom_wioniq);
}

.grey-dash-pattern {
  fill: #777777;
  fill: url(#diagonalDashPattern);
  height: 40pt;
  rx: 8px;
  ry: 8px;
}

/* Lines & edges */
.outer-edges {
  fill: transparent;
  stroke: #777;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-style {
  fill: transparent;
  stroke: #777;
  stroke-width: 6;
}

.lighter-line {
  stroke: #777;
  stroke-width: 1;
}

.light-line {
  stroke: #777;
  stroke-width: 2;
}

.hard-line {
  stroke: #777;
  stroke-width: 4;
}

.arrow-line {
  stroke: #555;
  stroke-width: 6;
}

.rounded-edges {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.greyborderline {
  stroke: #777777;
  stroke-width: 3px;
  fill: none;
}

.greyline {
  stroke: #777777;
  stroke-width: 1.5px;
  fill: none;
}

.greydashline {
  stroke: #777777;
  stroke-width: 3px;
  stroke-dasharray: 6, 9;
}

.orangeborderline {
  stroke: #ff9500;
  stroke-width: 3px;
  fill: none;
}

.greenborderline {
  stroke: #77d990;
  stroke-width: 3px;
  fill: none;
}

.greenline {
  stroke: #77d990;
  stroke-width: 1.5px;
  fill: none;
}

/* Fills */
.transparent-fill {
  fill: transparent;
}

.white-fill {
  fill: #f1f1f1;
}

.red-fill {
  fill: #ff3b30;
}

.orange-fill {
  fill: #ff9500;
}

.green-fill {
  fill: #34c759;
}

.blue-fill {
  fill: #007aff;
}

.light-blue-fill {
  fill: #b7d5fb;
}

.sky-blue-fill {
  fill: #54a6ff;
}

.sky-blue-fill.light-line {
  stroke: #17416eff;
}

.gray-fill,
.grey-fill {
  fill: #777;
}

.light-gray-fill {
  fill: #eee;
}

.dark-light-fill {
  fill: #fff;
}

.dark .dark-light-fill {
  fill: #252525;
}

.circleobject {
  fill: #ffff00;
  stroke: #777777;
  stroke-width: 3;
}

/* Labels */
.elevation-line {
  fill: transparent;
  stroke: #007aff;
  stroke-width: 3;
}

.elevation-line-fill {
  fill: #007aff;
  stroke-width: 0;
}

.elevation-tag text {
  dominant-baseline: middle;
  text-anchor: middle;
  fill: #fff;
}

.elevation-tag line {
  stroke: #777;
  stroke-width: 2;
}

.elevation-values text {
  text-anchor: start;
  fill: #777;
}

.elevation-values .elevation-values-row-1 {
  x: 0;
  y: 0;
  transform: translate(0, -130px);
}

.elevation-values .elevation-values-row-2 {
  x: 0;
  y: 0;
  transform: translate(0, -40px);
}

.elevation-tag text,
.elevation-values text {
  font-size: 25pt;
  font-weight: medium;
  font-style: inter;
  letter-spacing: -3%;
}

.elevation-tag.medium-label rect {
  width: 250px;
}

.elevation-tag.big-label text {
  font-size: 36pt;
  font-weight: medium;
  font-style: inter;
  letter-spacing: -3%;
}

.complimentarytext {
  font-size: 25pt;
  fill: #777777;
}

.smalllabeltext {
  font-size: 25pt;
  fill: #ffffff;
}

.biglabeltext {
  font-size: 36pt;
  fill: #ffffff;
}

.greysmalllabel {
  fill: #777777;
  height: 40pt;
  rx: 8px;
  ry: 8px;
  width: 250px;
}

.greysmalllabel.rectangle rect {
  width: 2500px;
}

.bluelargelabel {
  fill: #007aff;
  height: 66pt;
  rx: 8px;
  ry: 8px;
}

.objectletter {
  fill: #777777;
  font-size: 25pt;
  font-weight: bold;
}

/* Info box */
.info-box-bg {
  fill: #fff;
  stroke: #333;
  opacity: 0.85;
}

.info-box-text {
  fill: #000 !important;
  font-size: 2rem !important;
  font-weight: bold;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
}