body {
  font-size: 12px;
  background-color: #fdf6ef;
  color: #555555;
}

body,
text {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  text-transform: uppercase;
}

.axis-title {
  text-transform: uppercase;
}

svg {
  width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 960px;
  min-width: 350px;
  margin: auto;
  text-align: center;
}

.chart-container {
  position: relative;
}

.dumbbell-container {
  margin-bottom: 12px;
}

.salary-type-1 {
  color: #358291;
  fill: #358291;
  stroke: #358291;
}

.salary-type-2 {
  color: #e17337;
  fill: #e17337;
  stroke: #e17337;
}

.salary-type-1,
.salary-type-2 {
  fill-opacity: 0.8;
}

.dumbbell-path {
  fill: none;
}

/* Add an invisible stroke to the dot to increase the mouse capturing area */
.dumbbell-dot {
  stroke: transparent;
  pointer-events: all;
}
/* Hide the first and the last, but still capture the hovering */
.dumbbell-dot:first-child,
.dumbbell-dot:last-child {
  fill: none;
  pointer-events: all;
}

.dot-marker circle,
.arrow-marker path {
  stroke: none;
}

.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: #fdf6ef;
  padding: 0.5em 0.75em;
  border: 1px solid #555555;
  border-radius: 5px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s;
}

.chart-tooltip.is-visible {
  opacity: 1;
}

.chart-tooltip td {
  text-align: left;
}

.chart-tooltip td.red {
  color: #e14837;
}