.vis *,
.vis *::before,
.vis *::after {
  box-sizing: border-box;
}

.vis {
  font-family: "Roboto", "Arial", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(2, 2, 2);
  position: relative;
}

.vis .vis-title {
  font-family: "Poppins", "Arial", sans-serif;
  font-weight: 300;
  font-size: calc(1.2rem + 0.3vw);
  line-height: 1.2;
  text-transform: uppercase;
}

.vis .vis-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
}

.vis .vis-section .vis-intro {
  padding-top: 0;
}

.vis .vis-intro-card {
  padding: 1rem;
  background-color: rgba(188, 221, 221, 0.5);
}

.vis .vis-intro span {
  font-weight: 400;
}

@media (min-width: 1200px) {
  .vis .vis-title {
    font-size: 1.4rem;
  }
}

.vis .vis-row {
  margin-left: -1rem;
  margin-right: -1rem;
}

.vis .vis-col {
  padding-left: 1rem;
  padding-right: 1rem;
}

.vis .vis-stack > * + * {
  margin-top: 1.5rem;
}

.vis .vis-side > * {
  width: 240px;
}

.vis .vis-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 960px) {
  .vis .vis-row {
    display: flex;
    flex-wrap: wrap;
  }

  .vis .vis-main {
    flex: 1;
  }

  .vis .vis-side {
    display: block;
  }
}

.vis .vis-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.vis .vis-footer-note {
  color: rgba(2, 2, 2, 0.5);
}

.vis button {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: rgb(240, 109, 36);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0.75rem 1.5rem;
  border: none;
  font-size: 1rem;
  border-radius: 999rem;
  text-transform: uppercase;
  transition: color 0.15s ease-in-out, background-color;
}

.vis button:hover,
.vis button:active {
  background-color: hsl(21, 87%, 44%);
}

/* Switcher */
.vis .vis-switcher {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: 2rem;
}

.vis .vis-switcher button {
  margin: 0.5rem;
  background-color: rgb(119, 187, 187);
}

.vis .vis-switcher button:hover,
.vis .vis-switcher button:active,
.vis .vis-switcher button.is-selected {
  background-color: rgb(85, 170, 170);
}

/* Filters */
.vis .vis-filter + .vis-filter {
  margin-top: 1rem;
}

.vis .vis-filter label {
  display: inline-block;
  margin-bottom: 0.125rem;
  font-weight: 400;
  color: rgb(119, 187, 187);
}

.vis .info-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.2em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='rgb(2, 2, 2)' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.vis .vis-filter select {
  display: block;
  padding: 0.25rem 1.25rem 0.25rem 0.5rem;
  width: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgb(119, 187, 187)' stroke='rgb(119, 187, 187)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6 Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 16px 12px;
  border: none;
  border-bottom: 1px solid rgba(2, 2, 2, 0.2);
  transition: border-color 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.vis .vis-filter select:focus {
  border-color: rgb(2, 2, 2);
}

.vis .chart-title {
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
}

.vis .chart-subtitle {
  font-size: 0.75rem;
  text-align: center;
}

.vis .chart-svg {
  display: block;
  font-size: 0.75rem;
}

.vis .vis-card {
  border: 1px solid rgba(2, 2, 2, 0.2);
  padding: 1rem;
}

.vis text {
  font-family: "Roboto", "Arial", sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
}

/* Key */
.vis .vis-key {
  margin-bottom: 0.25rem;
}

.vis .vis-keys .vis-card > * + * {
  margin-top: 1rem;
}

.vis .legend-item {
  display: flex;
  align-items: baseline;
}

.vis .legend-item + .legend-item {
  margin-top: 0.25rem;
}

.vis .legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.75rem;
  flex: 0 0 8px;
}

.vis .legend-swatch--line {
  width: 32px;
  height: 2px;
  border-radius: 0;
  margin-right: 0.75rem;
  flex: 0 0 32px;
  position: relative;
  top: -0.32em;
}

.vis .size-legend-items {
  margin-left: -0.05rem;
  margin-right: -0.05rem;
}

.vis .size-legend-item {
  margin-left: 0.05rem;
  margin-right: 0.05rem;
}

.vis .size-legend-label {
  font-size: 0.75rem;
}

/* Tooltip */
.vis-tooltip {
  font-family: "Roboto", "Arial", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(2, 2, 2);
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  width: auto;
  max-width: 240px;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15 ease-in-out;
}

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

.vis-tooltip .spacer-lg {
  height: 0.75rem;
}

.vis-tooltip .spacer-sm {
  height: 0.5rem;
}

.vis-tooltip ul,
.vis-tooltip li {
  margin: 0;
  padding: 0;
}

.vis-tooltip ul {
  margin-left: 2rem;
}

.vis-tooltip b {
  font-weight: 400;
}

/* Chart shared */
.vis svg {
  overflow: visible;
}

.vis .is-mutable {
  transition: opacity 0.15s ease-in-out;
}

.vis .is-muted {
  opacity: 0.2;
}

/* Distance chart */
.vis .vis-distance .distance-dot {
  stroke: rgb(255, 255, 255);
}

.vis .vis-distance .distance-dot.is-highlighted {
  stroke: rgb(2, 2, 2);
}

.vis .vis-distance .distance-median-capture-rect {
  fill: none;
  pointer-events: all;
}

.vis .vis-distance .distance-median-line {
  stroke: currentColor;
  stroke-width: 2px;
}

.vis .vis-distance .method-category-name {
  font-size: 0.875rem;
  font-weight: 400;
}

/* Choice chart */
.vis .vis-choice .choice-link {
  stroke-opacity: 0.5;
  mix-blend-mode: multiply;
}

.vis .vis-choice .choice-column-label {
  font-size: 0.875rem;
  font-weight: 400;
}

/* Stock chart */
.vis .vis-stock .stock-link {
  fill: none;
  stroke: rgba(2, 2, 2, 0.2);
  stroke-width: 1.5px;
}

.vis .vis-stock .stock-node {
  stroke-width: 1.5px;
}

.vis .vis-stock .stock-divider {
  stroke: rgba(2, 2, 2, 0.4);
  stroke-width: 1.5px;
  stroke-dasharray: 8;
}

.vis .vis-stock .round-label {
  font-size: 0.875rem;
  font-weight: 400;
}