html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.chart-container { width: 100%; }
.legend { display: flex; flex-direction: row-reverse; background-image: linear-gradient(270deg, #96092C 0%, #FFFAB6 50%, #0D5734 100%); height: 20px; font-size: 14px; }
.legend span { transform: translateY(20px);  width: 20%; align-content: center; text-align: center; line-height: 1; }
.legend span::before { content: "|"; transform: translate(10px, -18px); display: inline-block; font-size: 14px; }
.legend-title {text-align: center; transform: translateY(18px); font-size: 14px; }

.nav-tabs { flex-wrap: nowrap; justify-content: center; white-space: nowrap; font-size: 1.125rem; text-align: center; margin-left: -.75rem; width: calc(100% + 1.5rem); }
.nav-tabs a { padding: 1rem .75rem }
.nav-tabs a.active { font-weight: bold; }

@media (min-width: 768px) {
  .chart-container { width: calc(100% - 80px); }
  .legend { flex-direction: column; width: 30px; height: unset; margin-left: auto; background-image: linear-gradient(0deg, #0D5734 0%, #FFFAB6 50%, #96092C 100%); }
  .legend span { transform: translateX(30px); width: unset; height: 20%; }
  .legend span::before { content: "-"; transform: translate(-8px, -1px); }
  .legend-title { transform: translateX(35px); writing-mode: tb-rl; }

  .nav-tabs { margin-left: 0; width: 100%; gap: 0 .5rem; }
  .nav-tabs a { padding: .75rem 1rem; }
}