// Color Pallete

$white: #fff;
$light: #f8f9fa;
$dark: #343a40;
$black: #000;

$blue: #007bff;
$blue-light: #007bff20;
$blue-hover: #007bff30;
$blue-light-opaque: #eff7ff;
$blue-mid: #007bff99;
$pblue: #4c75f2;
$pblue-light: #4c75f210;
$pblue-hover: #4c75f230;
$pblue-light-opaque: #eff7ff;
$pblue-mid: #4c75f299;
$pblue-dark: #4c75f2dd;
$cherry: #ff073a;
$cherry-mid: #ff073a99;
$cherry-light: #ff073a20;
$cherry-hover: #ff073a30;
$cherry-light-opaque: #ffe0e6;
$red: #dc3545;
$red-light: #dc354520;
$red-mid: #dc354599;
$red-hover: #dc354530;
$orange: #fd7e14;
$orange-mid: #fd7e1499;
$orange-light: #fd7e1420;
$orange-hover: #fd7e1430;
$orange-light-opaque: #ffefe2;
$yellow: #ffc107;
$yellow-light: #ffc10720;
$yellow-hover: #ffc10730;
$yellow-mid: #ffc10799;
$yellow-light-opaque: #fff7e0;
$green: #28a745;
$green-light: #28a74520;
$green-hover: #28a74530;
$green-mid: #28a74599;
$gray: #6c757d;
$gray-light: #6c757d10;
$gray-light-opaque: #f6f6f7;
$gray-hover: #6c757d20;
$gray-mid: #6c757d99;
$gray-middark: #6c757d30;
$gray-dark: #343a40;
$gray-opaque: #f1f1f1;
$gray-hover-opaque: #edeeef;
$gray-hover-darker-opaque: #f6f6f7;
$purple: #201aa2dd;
$purple-light: #201aa220;
$purple-hover: #201aa230;
$purple-mid: #201aa299;
$purple-light-opaque: #e3e2f3;
$pink: #db5581;
$pink-light: #db558120;
$pink-hover: #db558130;
$pink-mid: #db558199;
$brown: #b6854d;
$brown-light: #b6854d20;
$brown-hover: #b6854d30;
$brown-mid: #b6854d99;
$brick: #e23028;
$brick-light: #e2302810;
$brick-hover: #e2302820;

// Dark mode variables
$dark-m-gray: #161625;
$dark-mid-subtext: #bdb8ae;
$dark-m-white: #e1e1e1;
$dark-m-blue: #3391ff;
$dark-m-purple: #9673b9;
$dark-m-purple-mid: #9673b9bb;
$dark-m-purple-light: #40008050;
$dark-m-purple-hover: #40008090;

* {
  font-family: 'archia';
}

html {
  overflow-x: hidden;
  width: 100vw;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 24px !important;
  font-weight: 900;
}

h2 {
  font-size: 18px !important;
  font-weight: 400;
}

h3 {
  font-size: 14px !important;
  font-weight: 400;
}

h4 {
  font-size: 13px !important;
  font-weight: 900;
}

h5 {
  font-size: 12px !important;
  font-weight: 900;
}

h6 {
  font-size: 11px !important;
  font-weight: 600;
}

.App {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.arrow-up {
  border-bottom: 5px solid $gray-mid;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-left: 0.25rem;
}

.arrow-down {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid $gray-mid;
  margin-left: 0.25rem;
}

.Navbar {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 4rem;
  justify-content: space-between;

  a {
    color: inherit;
    text-decoration: none;
  }

  .navbar-left {
    color: $gray-mid;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 1.5rem;
    text-align: center;
    width: 3rem;

    &:hover {
      color: $gray;
    }
  }

  .navbar-middle {
    color: $gray;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;

    span {
      color: $pblue;
    }
  }

  .navbar-right {
    color: $gray;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 1.5rem;
    text-align: center;
    width: 3rem;
  }

  .language-toggle {
    cursor: pointer;
    font-weight: 900;
    text-transform: uppercase;
  }

  .expand {
    background: $gray-light-opaque;
    color: $gray;
    display: flex;
    flex-direction: column;
    width: 100vw;
    z-index: 9999;

    & > * {
      border-bottom: 1px solid $gray-light;
      border-top: 1px solid $gray-light;
      padding: 1.5rem;
      transition: all 0.15s ease-in-out;

      &:hover {
        background: $pblue-hover;
      }

      span {
        &.focused {
          background: $pblue-light;
          color: $pblue;
          padding: 0.25rem;
        }
      }
    }

    .expand-bottom {
      align-self: flex-start;
      border: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h5 {
        margin: 0;
      }

      &:hover {
        background: none;
      }
    }
  }
}

.Home {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 9rem;
  margin-right: 3rem;

  .home-left,
  .home-right {
    display: flex;
    flex-direction: column;
  }

  .home-left {
    margin-right: 2.5rem;
  }

  .home-right {
    margin-left: 2.5rem;
  }

  .header {
    z-index: 99;
  }
}

.alert {
  align-items: flex-start;
  background: $gray-light;
  border-radius: 5px;
  color: $gray;
  display: flex;
  flex-direction: row;
  font-size: 10px;
  padding: 0.5rem;

  svg {
    color: $gray-mid;
    height: 16px;
    width: 16px;
  }

  .alert-right {
    margin-left: 0.25rem;
    text-align: right;
    width: 8.25rem;

    a {
      background: $gray-light;
      color: $gray;
      padding-left: 0.1rem;
      padding-right: 0.1rem;

      &:hover {
        background: $gray-hover;
      }
    }

    &.is-full {
      width: 100%;
    }
  }

  &.is-green {
    background: $green-light;
    color: $green;

    svg {
      stroke: $green-mid;
    }
  }
}

.StateHeader {
  align-self: center;
  display: flex;
  flex-direction: row;
  height: 5.25rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
  width: 100%;

  & > * {
    align-self: flex-start;
  }

  .header-left {
    h1,
    h5 {
      margin: 0;
    }

    h1 {
      color: $brick;
      max-width: 20rem;
    }

    h5 {
      color: $gray;
      font-weight: 600;
      margin-top: 0.5rem;
    }
  }

  .header-right {
    color: $purple-mid;
    display: flex;
    flex-direction: column;
    text-align: right;

    h2,
    h5 {
      font-weight: 600;
      margin: 0;
    }

    h2 {
      color: $purple;
      font-weight: 900;
    }

    a {
      background: $purple-light;
      color: inherit;
      text-decoration: none;

      &:hover {
        background: $purple-hover;
      }
    }
  }
}

.State {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 9rem;
  margin-right: 3rem;

  .state-left,
  .state-right {
    display: flex;
    flex-direction: column;
  }

  .state-left {
    margin-right: 2.5rem;
    position: relative;
  }

  .state-right {
    margin-left: 2.5rem;
  }

  a {
    text-decoration: none;
  }

  .district-bar {
    margin-bottom: 2.5rem;
    width: calc(100% - 2rem);
  }

  .MapExplorer {
    .header,
    .map-stats,
    .map-button,
    .tabs-map,
    .last-update,
    .footnote {
      display: none;
    }

    .anchor {
      display: none;
    }
  }

  .TimeseriesExplorer {
    .anchor {
      display: none;
    }
  }
}

.StateMeta {
  align-self: center;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 3rem;
  width: calc(100% - 3rem);

  &.population {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin: 0;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;

    .alert {
      margin: 0;
    }
  }

  .meta-item {
    border-radius: 5px;
    min-height: 6rem;
    padding-left: 1rem;
    padding-top: 1rem;

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0;
    }

    h5 {
      font-weight: 600;
    }

    h2 {
      font-weight: 600;
    }

    h3 {
      font-weight: 600;
      width: 10rem;
      word-wrap: break-word;
    }

    h1 {
      display: inline-block;
      font-weight: 600;
    }

    &.population {
      min-height: 1rem !important;
      padding: 0 !important;

      h1,
      h3 {
        color: $gray;
      }
    }

    .meta-item-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-right: 1rem;

      & > * {
        align-self: center;
      }

      h3 {
        width: calc(100% - 2.5rem);
      }

      svg {
        align-self: flex-start;
        cursor: pointer;
        stroke-width: 2.5px;
        width: 16px;
      }
    }

    .meta-item-middle {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      * {
        align-self: center;
      }

      svg {
        cursor: pointer;
        margin-right: 1rem;
      }
    }

    p {
      font-weight: 600;
      margin-bottom: 1.25rem;
      padding-right: 1rem;
    }

    &.confirmed {
      background: $cherry-light;

      h3,
      h5,
      svg,
      p {
        color: $cherry-mid;
      }

      h1 {
        color: $cherry;
      }
    }

    &.active {
      background: $blue-light;

      h3,
      h5,
      svg,
      p {
        color: $blue-mid;
      }

      h1 {
        color: $blue;
      }
    }

    &.recovery {
      background: $green-light;

      h3,
      h5,
      svg,
      p {
        color: $green-mid;
      }

      h1 {
        color: $green;
      }
    }

    &.mortality {
      background: $gray-light;

      h3,
      h5,
      svg,
      p {
        color: $gray-mid;
      }

      h1 {
        color: $gray;
      }
    }

    &.cpl {
      background: $yellow-light;

      h3,
      h5,
      svg {
        color: $orange-mid;
      }

      h1 {
        color: $orange;
      }
    }

    &.tpl {
      background: $purple-light;

      h3,
      h5,
      svg,
      p {
        color: $purple-mid;
      }

      h1 {
        color: $purple;
      }
    }

    &.tpr {
      background: $orange-light;

      h3,
      h5,
      p,
      svg {
        color: $orange-mid;
      }

      h1 {
        color: $orange;
      }
    }
  }
}

.StateDropdown {
  align-items: center;
  display: flex;
  flex-direction: row;
  position: relative;

  .state-name {
    background: $brick-light;
    border-radius: 5px;
    cursor: pointer;
    padding: 0.25rem;

    &:hover {
      &:not(.expanded) {
        background-color: $brick-hover;
      }
    }
  }

  .dropdown {
    background: $white;
    border-radius: 5px;
    height: 25rem;
    left: -0.25rem;
    overflow-y: scroll;
    position: absolute;
    top: 2.75rem;
    width: 15rem;
    z-index: 999;

    .item {
      color: $red;
      cursor: pointer;
      padding: 0.75rem;

      &:hover {
        background: $red-hover;
      }
    }
  }

  .backdrop {
    background: $red-light;
    height: 100vh;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;
  }
}

.StatisticDropdown {
  margin-left: -3px;
  margin-top: 0.5rem;
  position: relative;

  .triangle-icon {
    left: -16px;
    position: absolute;
    top: 2px;

    svg {
      vertical-align: middle !important;
    }
  }

  select {
    appearance: none;
    background-color: $gray-light;
    border: 0;
    border-radius: 3px;
    color: $gray;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    max-width: 14rem;
    min-width: 3rem;
    outline-color: $gray-hover;
    padding: 3px;

    option {
      background-color: #eee;
      color: $gray;
      padding: 3px;
    }

    &:hover {
      background-color: $gray-hover;
    }

    &.confirmed {
      background-color: $cherry-light;
      color: $cherry;
      outline-color: $cherry-hover;

      &:hover {
        background-color: $cherry-hover;
      }
    }

    &.active {
      background-color: $blue-light;
      color: $blue;
      outline-color: $blue-hover;

      &:hover {
        background-color: $blue-hover;
      }
    }

    &.recovered {
      background-color: $green-light;
      color: $green;
      outline-color: $green-hover;

      &:hover {
        background-color: $green-hover;
      }
    }

    &.tested {
      background-color: $purple-light;
      color: $purple;
      outline-color: $purple-hover;

      &:hover {
        background-color: $purple-hover;
      }
    }

    &.other,
    &.tpr,
    &.cfr {
      background-color: $orange-light;
      color: $orange;
      outline-color: $orange-hover;

      &:hover {
        background-color: $orange-hover;
      }
    }

    &.vaccinated,
    &.vaccinated1,
    &.vaccinated2 {
      background-color: $pink-light;
      color: $pink;
      outline-color: $pink-hover;

      &:hover {
        background-color: $pink-hover;
      }
    }

    &.population {
      background-color: $brown-light;
      color: $brown;
      outline-color: $brown-hover;

      &:hover {
        background-color: $brown-hover;
      }
    }
  }
}

.labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1rem;

  .label {
    align-items: center;
    background: $gray-light !important;
    border-radius: 5px !important;
    color: $gray-mid !important;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    margin-bottom: 0.25rem;
    margin-right: 0.25rem;
    padding: 0.25rem 0.5rem;
    text-transform: capitalize;

    &.is-selected {
      background: $yellow-hover !important;
      color: $orange-mid !important;

      &:hover {
        background: $yellow-hover !important;
        color: $orange-mid !important;
      }
    }

    @media not all and (pointer: coarse) {
      &:hover {
        background: $yellow-light !important;
        color: $orange-mid !important;
      }
    }

    .count {
      align-items: center;
      background: inherit;
      border-radius: 50%;
      color: inherit;
      display: flex;
      flex-direction: row;
      font-size: 12px;
      height: 1.5rem;
      justify-content: center;
      margin-left: 0.25rem;
      width: 1.5rem;
    }
  }
}

.Banner {
  background: $red-light;
  color: $red;
  display: flex;
  flex-direction: row;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  text-decoration: none;

  .wrapper {
    align-items: center;
    align-self: center;
    display: flex;
    justify-content: center;
    padding: 1rem 0.75rem;
    padding-left: 7rem;
    text-align: center;
    word-wrap: break-word;

    .content {
      margin: 0 0.5rem;
    }

    a {
      align-items: center;
      background-color: $red-light;
      color: $red;
      display: flex;
      padding: 1px;
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        background-color: $red-hover;
      }
    }
  }
}

.Search {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  position: relative;
  width: 100%;

  & > * {
    align-self: center;
  }

  label {
    color: $gray;
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  .line {
    background: $gray-light;
    height: 1rem;
    width: 2px;
  }

  input {
    appearance: none !important;
    background: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
    color: $gray;
    font-size: 1rem;
    height: 2rem;
    outline: none;
    padding: 1rem;
    padding-left: 3rem;
    width: calc(100% - 4rem);
  }

  .search-input-wrapper {
    position: relative;
    width: 100%;
  }

  .search-placeholder {
    color: $gray-mid;
    font-size: 1rem;
    left: 3rem;
    opacity: 0.8;
    pointer-events: none;
    position: absolute;
    top: 1.4rem;
    transition: opacity 1s;

    &.disappear {
      opacity: 0;
    }
  }

  .search-button {
    svg {
      color: $gray-mid;
      left: 0.75rem;
      position: absolute;
      top: 1.25rem;
      transition: all 0.2s ease-in-out;
    }

    &.is-expand {
      svg {
        left: 0.5rem;
      }
    }
  }

  .close-button {
    background: $gray-light !important;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1.35rem;
    transition: all 0.2s ease-in-out;
    width: 20px;

    &:hover {
      background: $gray-hover !important;
    }

    &.is-expand {
      right: 0.75rem;
    }

    svg {
      align-self: center;
      position: absolute;
      stroke: $gray-mid;
      stroke-width: 3;
      width: 12px;
    }

    &.custom {
      background: $pink-light !important;
      pointer-events: none;
      z-index: 0;

      svg {
        stroke: $pink !important;
      }
    }
  }

  .feature {
    background: $pink-light;
    border-radius: 5px;
    color: $pink;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.75rem;
    text-align: center;
  }

  .expanded {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    padding: 1rem;
    padding-bottom: 0;
    width: calc(100% - 4rem);

    & > * {
      flex: 1;
    }

    h4,
    h3 {
      color: $gray;
      font-weight: 600;
      margin: 0;
      margin-bottom: 0.5rem;
    }

    h3 {
      color: $pblue;
      margin-bottom: 0.75rem;
    }
  }

  .results {
    padding: 1rem;
    padding-bottom: 0;
    width: calc(100% - 2rem);

    a {
      text-decoration: none !important;
    }

    .pan-divider {
      color: $gray;
      font-weight: 600;
      padding: 1rem 0;
    }

    .result,
    .essential-result {
      align-self: flex-start;
      border-bottom: 2px solid $gray-light;
      color: $gray;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      font-size: 0.9rem;
      justify-content: space-between;
      min-height: 2rem;
      padding: 1rem;
      transition: all 0.2s ease-in-out;

      &:hover {
        background: $gray-light;
      }

      & > * {
        align-self: center;
      }

      .result-name {
        max-width: 15rem;
      }

      .result-type {
        background: $yellow-light;
        border-radius: 2px;
        color: $orange;
        display: flex;
        flex-direction: row;
        font-size: 0.75rem;
        padding: 0.25rem;

        &:hover {
          background: $yellow-hover;
        }

        svg {
          margin-left: 0.25rem;
          stroke: $orange-mid;
          stroke-width: 3px;
        }

        * {
          align-self: center;
        }
      }

      .result-left {
        display: flex;
        flex-direction: row;

        * {
          align-self: center;
        }
      }

      .result-zone {
        border-radius: 50%;
        height: 0.75rem;
        margin-left: 0.5rem;
        width: 0.75rem;

        &.is-red {
          background: $cherry-light;
          border: 2px solid $cherry-mid;
        }

        &.is-orange {
          background: $orange-light;
          border: 2px solid $orange-mid;
        }

        &.is-green {
          background: $green-light;
          border: 2px solid $green-mid;
        }
      }
    }

    .essential-result {
      display: flex;
      flex-direction: column;

      .result-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;

        .result-top-left {
          display: flex;
          flex-direction: column;

          .result-location {
            display: flex;
            flex-direction: row;
            font-size: 0.75rem;
          }

          .result-distance {
            color: $green;
            display: flex;
            flex-direction: row;
            font-size: 0.75rem;
          }
        }
      }

      .result-category {
        align-self: flex-start;
        background: $pink-light;
        border-radius: 2px;
        color: $pink;
        display: flex;
        flex-direction: row;
        font-size: 0.75rem;
        height: 1rem;
        padding: 0.25rem;
        text-align: right;
        text-transform: capitalize;

        &:hover {
          background: $pink-hover;
        }

        & > * {
          align-self: center;
        }

        svg {
          margin-left: 0.25rem;
          stroke-width: 3px;
          width: 12px;
        }
      }

      .result-description {
        align-self: flex-start;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        margin-top: 1rem;
      }

      .result-contacts {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }

      .result-contact {
        align-self: flex-start;
        background: $gray-light;
        border-radius: 2px;
        color: $gray;
        display: flex;
        flex-direction: row;
        font-size: 0.75rem;
        height: 1rem;
        margin-right: 0.25rem;
        margin-top: 0.25rem;
        padding: 0.25rem;
        text-align: right;

        &:hover {
          background: $gray-hover;
        }

        a {
          color: inherit;
        }

        & > * {
          align-self: center;
        }

        svg {
          margin-right: 0.25rem;
          stroke: $gray-mid;
          stroke-width: 3px;
          width: 12px;
        }
      }
    }
  }

  .suggestions {
    display: flex;
    flex-direction: column;
    margin-right: 1rem;

    .suggestion {
      color: $gray-mid;
      display: flex;
      flex-direction: row;
      padding: 0.1rem;

      div {
        padding-top: 1px;
      }

      h4 {
        cursor: pointer;
        margin-left: 0.25rem;
        word-wrap: wrap;

        &:hover {
          text-decoration: underline;
          text-decoration-thickness: 2px;
        }
      }
    }
  }
}

.header {
  align-self: center;
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  width: 100%;

  & > * {
    align-self: center;
  }
}

.ActionsPanel {
  margin-bottom: 0.3rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  position: relative;
  width: calc(100% - 1rem);

  .actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: all 1s;
    width: 100%;

    & > * {
      align-self: center;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }

    h5 {
      color: $gray;
      font-weight: 600;
      margin: 0;
    }

    svg {
      cursor: pointer;
      fill: #a6abb0;
      stroke: #a6abb0;
      stroke-width: 0.5;
      user-select: none;
      width: 16px;

      &:hover {
        fill: $gray;
        stroke: $gray;
      }
    }

    .timeline-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;

      svg {
        display: flex;
        flex-direction: row;
        justify-content: center;

        path {
          align-self: center;
        }
      }
    }

    .bell-icon {
      height: 24px;
      position: relative;

      .indicator {
        background: $pblue;
        border-radius: 50%;
        height: 7px;
        position: absolute;
        right: -3px;
        top: -3px;
        width: 7px;
      }
    }
  }
}

.Timeline {
  align-items: center;
  user-select: none;
  width: 100%;

  .timeline {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 0;

    .highlight {
      color: $brown !important;
      opacity: 0;
      position: absolute;
      text-align: center;
      top: 3.25rem;
      transform: translate3d(0, 10px, 0);
      transition: all 0.3s;
      width: 100%;

      &.current {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      svg {
        fill: #dc3545dd;
        pointer-events: none;
        stroke: none;
      }
    }

    .wheel {
      align-items: center;
      color: #fff;
      display: block;
      height: 3rem;
      margin-top: -0.75rem;
      overflow: hidden;
      width: 100%;
    }

    .wheel__inner {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      pointer-events: none;
      transform-style: preserve-3d;
      width: 100%;
    }

    .wheel__slides {
      height: 100%;
      margin-top: 2px;
      position: relative;
      width: 100%;
    }

    .wheel__slide {
      -webkit-backface-visibility: hidden;
      align-items: center;
      backface-visibility: hidden;
      display: flex;
      height: 100%;
      justify-content: center;
      position: absolute;
      width: 100%;

      h5 {
        -moz-user-select: -moz-none;
        -webkit-user-select: none;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.6;
        padding: 4px;
        pointer-events: all;
        transition: all 0.3s;
        user-select: none;

        &.current {
          background-color: #6c757d20;
          opacity: 0.8;

          &:hover {
            opacity: 1;
          }
        }

        &:hover {
          background-color: #6c757d30;
          opacity: 0.8;
        }

        &::selection {
          background: transparent !important;
        }
      }

      .calendar-icon {
        align-self: center;
        cursor: pointer;
        display: flex;
        margin-left: 0.2rem;
        opacity: 0;
        transition: opacity 0.15s ease-in-out;

        &.show {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    .wheel-buttons {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      z-index: 1;

      .wheel-button {
        align-items: center;
        color: $gray;
        display: flex;

        &.left {
          svg {
            transform: rotate(180deg);
          }
        }

        &.active {
          svg {
            fill: $pblue;
            stroke: none;

            &:hover {
              fill: $pblue-mid;
              stroke: none;
            }
          }
        }
      }
    }
  }

  .Calendar {
    align-items: center;
    display: flex;
    justify-content: center;

    .react-calendar {
      border-radius: 5px;
      line-height: 2em;

      *,
      *::before,
      *::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }

      .react-calendar__navigation {
        margin-bottom: 1em;
      }

      button {
        border: 0;
        border-radius: 5px;
        margin: 0.125rem;
        outline: none;

        &:enabled {
          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .react-calendar__viewContainer {
      display: flex;
    }

    .react-calendar__navigation {
      font-size: 25px;

      button {
        background-color: $gray-light;
        color: $gray;
        min-width: 44px;
        padding: 1em 0.5em;

        &:enabled {
          &:hover {
            background-color: #6c757d40;
          }
        }

        &:disabled {
          background: none;
        }

        div {
          align-items: center;
          display: flex;
          justify-content: center;
        }
      }
    }

    .react-calendar__month-view__weekdays {
      font-size: 0.75em;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
    }

    .react-calendar__month-view__weekdays__weekday {
      padding: 0.5em;
    }

    .react-calendar__tile {
      background: none;
      color: $gray;
      max-width: 100%;
      padding: 1em 0.5em;
      text-align: center;

      &:enabled {
        background-color: $gray-light;

        &.react-calendar__tile--now {
          background-color: #ffff76;
          color: $black;

          &:hover {
            background-color: #ffffa9;
          }
        }

        &.react-calendar__tile--active,
        &.react-calendar__tile--hasActive {
          background-color: #006edc;
          color: $white;

          &:hover {
            background-color: #1087ff;
          }
        }

        &.react-calendar__month-view__days__day--neighboringMonth {
          background-color: #6c757d06;
          color: #6c757d99;
        }

        &:hover {
          background-color: $gray-hover;
        }
      }
    }

    .react-calendar__month-view {
      .react-calendar__tile {
        flex-basis: calc(100% / 7 - 0.25rem) !important;
        max-width: calc(100% / 7 - 0.25rem) !important;
      }
    }

    .react-calendar__year-view {
      .react-calendar__tile {
        flex-basis: calc(100% / 3 - 0.25rem) !important;
        max-width: calc(100% / 3 - 0.25rem) !important;
      }
    }

    .react-calendar__month-view__days__day--weekend {
      color: $cherry;
    }

    .react-calendar__year-view,
    .react-calendar__decade-view,
    .react-calendar__century-view {
      .react-calendar__tile {
        color: $gray;
        padding: 2em 0.5em;
      }
    }
  }
}

.button {
  background: $blue-light;
  border: 0;
  border-radius: 5px;
  color: $blue-mid;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 0.75rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
  outline: none;
  padding: 0.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease-in-out;

  svg {
    padding-right: 6px;
    stroke-width: 2px;
    width: 20px;
  }

  &.is-purple {
    background: $purple-light;
    color: $purple-mid;

    &:hover {
      background: $purple-hover;
    }
  }

  &.is-green {
    background: $green-light;
    color: $green-mid;

    &:hover {
      background: $green-hover;
    }
  }

  &:hover {
    background: $blue-hover;
  }

  & > * {
    align-self: center;
  }
}

.MapSwitcher {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  width: 100%;

  .highlight {
    pointer-events: none;
    position: absolute;
  }

  .highlight,
  .clickable {
    border-radius: 5px;
    cursor: pointer;
    height: 14rem;
    width: calc(25%);
    z-index: 10;
  }

  .clickable {
    transition: background 0.15s ease-in-out;

    &:hover {
      &.is-confirmed {
        background: $cherry-light;
      }

      &.is-active {
        background: $blue-light;
      }

      &.is-recovered {
        background: $green-light;
      }

      &.is-deceased {
        background: $gray-light;
      }
    }
  }
}

.Level {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;

  .level-item {
    display: flex;
    flex-direction: column;

    & > * {
      align-self: center;
    }
  }

  h1,
  h5 {
    margin-bottom: 0;
  }

  h1 {
    font-size: min(3.75vw, 22px) !important;
    font-weight: 600;
  }

  h4 {
    margin-bottom: -0.5rem;
  }

  h5 {
    font-weight: 600;
    overflow-wrap: break-word;
    text-align: center;
    width: 100%;
  }

  .is-confirmed {
    h1,
    h5 {
      color: $cherry;
    }

    h4 {
      color: $cherry-mid;
    }
  }

  .is-active {
    h1,
    h5 {
      color: $blue;
    }

    h4 {
      color: $blue-mid;
    }
  }

  .is-recovered {
    h1,
    h5 {
      color: $green;
    }

    h4 {
      color: $green-mid;
    }
  }

  .is-deceased {
    h1,
    h5 {
      color: $gray;
    }

    h4 {
      color: $gray-mid;
    }
  }

  .is-tested {
    h1,
    h5 {
      color: $purple;
    }

    h4 {
      color: $purple-mid;
    }
  }

  .is-vaccinated {
    h1,
    h5 {
      color: $pink;
    }

    h4 {
      color: $pink-mid;
    }
  }

  .is-tpr {
    h1,
    h5 {
      color: $orange;
    }

    h4 {
      color: $orange-mid;
    }
  }
}

.VaccinationHeader {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.25rem;
  margin-top: 2rem;
  width: 100%;

  .level-vaccinated {
    align-items: center;
    align-self: center;
    animation-delay: 200ms;
    background: $pink-light;
    border-radius: 5px;
    color: $pink;
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
    padding: 0.5rem;

    div {
      font-size: 13px;
      font-weight: 500;
      margin: 0 0 0 0.25rem;
    }
  }

  .progress-bar-wrapper {
    color: $gray;
    font-size: 12px;
    margin-top: 0.5rem;
    position: relative;
    width: 100%;

    .progress-bar {
      background-color: $pink-light;
      border-radius: 5px;
      color: $pink;
      height: 24px;
      margin-bottom: 0.1rem;
      margin-top: 0.1rem;
      position: relative;

      &.value {
        background-image: linear-gradient(
          45deg,
          $pink-mid 25%,
          $pink-light 25%,
          $pink-light 50%,
          $pink-mid 50%,
          $pink-mid 75%,
          $pink-light 75%,
          $pink-light 100%
        );
        background-size: 14px 14px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        margin: 0;
        opacity: 0.6;
        position: absolute;

        &.opaque {
          background: $pink-mid;
        }

        &.highlighted {
          opacity: 1;
        }

        span {
          margin-left: calc(100% + 0.25rem);
          width: max-content;
        }
      }
    }

    .legend {
      opacity: 0.6;

      &.highlighted {
        opacity: 1;
      }

      .label-wrapper {
        display: flex;

        .label {
          cursor: pointer;
          flex-shrink: 0;
        }
      }

      .arrow {
        cursor: pointer;
        margin-bottom: 0.2rem;
        width: fit-content;
      }
    }
  }
}

abbr {
  text-decoration: none;

  &.is-cherry {
    color: $cherry;
  }

  &.is-blue {
    color: $blue;
  }

  &.is-green {
    color: $green;
  }

  &.is-gray {
    color: $gray;
  }
}

.TableLoader {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.Icons {
  font-size: 12px;
  font-weight: 600;

  span {
    font-size: 8px;
    font-weight: 600;
    line-height: 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    user-select: none;
  }
}

.table-top {
  align-items: flex-end;
  align-self: center;
  display: flex;
  flex-direction: row;
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  width: 100%;

  .table-top-left {
    display: flex;
    flex-direction: row;
  }

  .toggle {
    align-items: center;
    background: $gray-light;
    border-radius: 5px;
    color: $gray-mid;
    cursor: pointer;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    margin-right: 0.25rem;
    user-select: none;
    width: 2.5rem;

    &.disabled {
      cursor: not-allowed;
    }

    svg {
      margin: 0.25rem;
    }

    &:hover {
      &:not(.disabled) {
        background: $gray-hover;
      }
    }
  }

  .option-toggle,
  .expand-table-toggle {
    &.is-highlighted {
      background: $green-light;
      color: $green;

      &:hover {
        background: $green-hover;
      }
    }
  }

  .info-toggle {
    &.is-highlighted {
      background: $yellow-light;
      color: $yellow;

      &:hover {
        background: $yellow-hover;
      }
    }
  }

  .lakh-toggle {
    &.is-highlighted {
      background: $pink-light;
      color: $pink;

      &:hover {
        background: $pink-hover;
      }
    }
  }

  .delta-toggle {
    &.is-highlighted {
      background: $blue-light;
      color: $blue;

      &:hover {
        background: $blue-hover;
      }
    }
  }

  .expand-table-toggle {
    color: $gray-mid;
    margin-left: auto;
    margin-right: 0;

    &.is-highlighted {
      svg {
        transform: rotate(90deg);
      }
    }

    svg {
      cursor: pointer;
      margin-bottom: 0.25rem;
      transform: rotate(-90deg);
      transition: transform 0.15s ease-in-out;
    }
  }

  @media (min-width: 769px) {
    margin-top: 1rem;
  }
}

.table-helper {
  align-self: center;
  color: $gray;
  display: flex;
  flex-direction: column;
  width: calc(100% - 2rem);

  h5 {
    color: $gray-mid;
  }

  .helper-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .info-item {
    align-items: center;
    color: $gray;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 600;
    height: 1.5rem;

    &:first-child {
      margin-top: 1rem;
    }

    :first-child {
      width: 1.6rem;

      svg {
        width: 15px;
      }
    }

    p {
      max-width: calc(100% - 1.6rem);
    }

    svg {
      color: $gray-mid;
      margin-bottom: 0.25rem;
    }

    .is-confirmed {
      svg {
        color: $cherry;
      }
    }

    .is-active {
      svg {
        color: $blue;
      }
    }

    .is-recovered {
      svg {
        color: $green;
      }
    }

    .is-deceased {
      svg {
        color: $gray;
      }
    }

    .is-tested {
      svg {
        color: $purple;
      }
    }

    .is-vaccinated,
    .is-vaccinated1,
    .is-vaccinated2 {
      svg {
        color: $pink;
      }
    }

    &.notes {
      svg {
        margin-bottom: 0;
      }
    }

    &.sort {
      svg {
        margin-bottom: 0;
      }
    }

    &.abbr {
      sup {
        position: relative;
        top: -0.4em;
        vertical-align: baseline;
      }
    }
  }

  .text {
    color: $gray-mid;
    font-weight: 600;

    a {
      background: $gray-light;
      border-bottom: 2px solid $gray-hover;
      color: $gray;
      text-decoration: none;

      &:hover {
        background: $gray-hover;
      }
    }
  }
}

.table-container {
  align-self: center;
  overflow-x: auto;
  width: 100%;
}

.table {
  border-radius: 3px;
  display: inline-grid;
  font-size: 12px;
  grid-template-rows: auto;
  min-width: 100%;

  .state-meta {
    grid-column: 1 / -1;
    left: 0;
    position: sticky;

    .state-meta-top {
      align-items: center;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 1 + 0.25rem;
      margin-top: 1rem;

      svg {
        margin-right: 0.5rem;
      }

      .last-updated {
        align-items: center;
        color: $green;
        display: flex;
        flex-direction: row;
      }

      .state-page {
        align-items: center;
        background: $yellow-light;
        border-radius: 5px;
        color: $orange;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        padding: 0.75rem;

        p {
          align-self: flex-end;
          flex: 1;
          margin: 0;
          text-align: right;
        }

        &:hover {
          background: $yellow-hover;
        }
      }
    }

    .state-meta-bottom {
      padding-bottom: 1.5rem;

      .disclaimer {
        background: $brick-light;
        border-radius: 5px;
        color: $brick;
        margin: auto;
        padding: 1rem 0.25rem;
        text-align: center;
        width: 16rem;

        svg {
          margin-right: 0.5rem;
        }
      }
    }
  }

  .row {
    cursor: pointer;
    display: contents;
    width: 100%;

    &:nth-child(odd) {
      .cell {
        background: $gray-light;
      }
    }

    &.is-highlighted {
      .cell {
        background: $gray-hover-opaque !important;
      }
    }

    &.heading {
      .cell {
        cursor: pointer;
        user-select: none;

        &:hover {
          background: $gray-hover-opaque !important;
        }
      }
    }

    &.is-total {
      position: sticky;
      top: 0;

      .cell {
        background: $gray-hover-opaque !important;
        padding-bottom: 0.75rem;
      }
    }

    .cell {
      align-items: center;
      border-radius: 3px;
      color: $gray;
      display: flex;
      flex-direction: row;
      margin-bottom: 0.25rem;
      padding: 0.5rem;
      position: relative;

      &:not(:first-child) {
        flex-basis: 4rem;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: flex-end;
      }

      &:first-child {
        background: $gray-hover-darker-opaque;
        flex-basis: 7rem;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: space-between;
        left: 0;
        position: sticky;
        z-index: 11;

        .sort-icon {
          left: unset;
          right: 0;
        }
      }

      svg {
        color: $gray-mid;
        margin-left: 0.2rem;
        stroke-width: 2.5px;
      }

      .sort-icon {
        left: 0;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        position: absolute;
        top: 0;

        &.is-confirmed {
          svg {
            color: $cherry;
          }
        }

        &.is-active {
          svg {
            color: $blue;
          }
        }

        &.is-recovered {
          svg {
            color: $green;
          }
        }

        &.is-deceased {
          svg {
            color: $gray;
          }
        }

        &.is-tested {
          svg {
            color: $purple;
          }
        }

        &.is-vaccinated,
        &.is-vaccinated1,
        &.is-vaccinated2 {
          svg {
            color: $pink;
          }
        }
      }

      &.statistic {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .total {
          font-size: 14px;
        }

        .is-confirmed {
          color: $cherry;
        }

        .is-active {
          color: $blue;
        }

        .is-recovered {
          color: $green;
        }

        .is-deceased {
          color: $gray;
        }

        .is-tested {
          color: $purple;
        }

        .is-vaccinated,
        .is-vaccinated1,
        .is-vaccinated2 {
          color: $pink;
        }
      }

      &:not(:last-child) {
        margin-right: 0.25rem;
      }

      &.heading {
        background: $gray-light-opaque;
        font-size: 13px;
        font-weight: 900;
        padding: 1.25rem 0.5rem 0.75rem;
        text-align: right;

        &.state {
          padding: 1.5rem 0.5rem 0.75rem;

          .sort-icon {
            top: 0.5rem;
          }
        }

        &:hover {
          background: $gray-hover-opaque !important;
        }

        svg {
          margin-left: 0;
          margin-right: 0.3rem;
        }
      }

      .state-name,
      .district-name {
        font-size: 14px;
        font-weight: 600;
        max-width: 7rem;
        word-wrap: break-word;
      }
    }
  }

  .spacer-row {
    grid-column: 1 / -1;
    left: 0;
    position: sticky;

    .spacer {
      color: $gray-mid;
      margin-bottom: 1 + 0.25rem;
      margin-top: 1rem;
      text-align: center;

      p {
        margin-left: auto;
        margin-right: auto;
        width: 10rem;
      }

      .fold {
        cursor: pointer;

        &:hover {
          color: $gray;
        }
      }
    }
  }

  .intersection {
    display: block;
  }
}

.Table {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.paginate {
  align-items: center;
  color: $gray;
  display: flex;
  justify-content: center;
  margin-top: 1rem;

  div {
    background: $gray-light;
    border-radius: 5px;
    color: $gray-mid;
    cursor: pointer;
    display: flex;
    padding: 0.5rem;

    &.left {
      margin-right: 1rem;
    }

    &.right {
      margin-left: 1rem;
    }

    &:hover {
      &:not(.disabled) {
        background: $gray-hover;
      }
    }
  }

  h5 {
    margin: 0;
  }
}

#chart {
  z-index: 10;
}

.anchor {
  cursor: pointer;
  position: absolute;
  right: 0;
  user-select: none;
  z-index: 999;

  svg {
    color: $gray-mid;
    transform: rotate(45deg);
    transition: all 0.1s ease-in-out;

    &:hover {
      color: $gray;
    }
  }

  &.stickied {
    svg {
      color: $gray;
      transform: rotate(90deg);
    }
  }
}

.map-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  &.stickied {
    position: sticky;
    top: -6rem;
  }
}

.MapExplorer {
  align-self: center;
  position: relative;
  width: 100%;

  &.stickied {
    position: sticky !important;
    top: 0;
  }

  &.hidden {
    display: none;
  }

  .anchor {
    top: -1.5rem;
  }

  .svg-parent {
    display: block;
    margin: auto;
    margin-top: 2rem;
    overflow: visible;
    position: relative;
    width: 90%;

    &.maplegend {
      margin-top: 0.6rem;
      user-select: none;
      z-index: 1;
    }

    svg {
      align-self: center;
      height: 100%;
      overflow: visible;
      width: 100%;

      text {
        fill: $gray;
        font-weight: 600;
        text-align: right;
      }
    }
  }

  .map-button {
    background: $yellow-light;
    border-radius: 5px;
    color: $orange;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    padding: 0.5rem;
    position: absolute;
    right: 0;
    transition: all 0.2s ease-in-out;

    &:hover {
      background: $yellow-hover;
    }

    svg {
      height: 12px;
      margin-left: 0.25rem;
      stroke: $orange-mid;
      stroke-width: 3px;
      vertical-align: middle;
      width: 12px;
    }
  }

  .panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 6rem;
    padding-top: 1rem;
    position: relative;

    h2 {
      font-weight: 900;
      margin-top: 0;
      transition: color 0.3s ease-in-out;
      word-wrap: break-word;

      &.confirmed {
        color: $brick;
      }

      &.active {
        color: $blue;
      }

      &.recovered {
        color: $green;
      }

      &.deceased {
        color: $gray;
      }
    }

    h4 {
      color: $gray-mid;
      margin: 0;
      word-wrap: break-word;
    }

    .panel-left {
      display: flex;
      flex: 1;
      flex-direction: column;

      .district {
        line-height: 15px;
        margin: 0;
        transition: color 0.3s ease-in-out;

        span {
          font-size: 0.75rem;
          font-weight: 600;
        }

        &.confirmed {
          color: $brick;
        }

        &.active {
          color: $blue;
        }

        &.recovered {
          color: $green;
        }

        &.deceased {
          color: $gray;
        }

        &.tested {
          color: $purple;
        }
      }
    }

    .panel-right {
      color: $gray-mid;
      display: flex;
      flex-direction: column;

      .disabled {
        cursor: not-allowed !important;
      }

      svg {
        transition: all 0.3s ease-in-out;
      }

      .is-highlighted {
        background: $gray-middark !important;

        &:hover {
          &:not(.disabled) {
            background: $gray-hover !important;
          }
        }
      }

      &.is-confirmed {
        color: $cherry-mid;

        .is-highlighted {
          background: $cherry-light !important;

          &:hover {
            &:not(.disabled) {
              background: $cherry-hover !important;
            }
          }
        }
      }

      &.is-active {
        color: $blue-mid;

        .is-highlighted {
          background: $blue-light !important;

          &:hover {
            &:not(.disabled) {
              background: $blue-hover !important;
            }
          }
        }
      }

      &.is-recovered {
        color: $green-mid;

        .is-highlighted {
          background: $green-light !important;

          &:hover {
            &:not(.disabled) {
              background: $green-hover !important;
            }
          }
        }
      }

      &.is-deceased {
        color: $gray-mid;

        .is-highlighted {
          background: $gray-middark !important;

          &:hover {
            &:not(.disabled) {
              background: $gray-hover !important;
            }
          }
        }
      }

      &.is-tpr,
      &.is-cfr,
      &.is-other {
        color: $orange-mid;

        .is-highlighted {
          background: $orange-light !important;

          &:hover {
            &:not(.disabled) {
              background: $orange-hover !important;
            }
          }
        }
      }

      &.is-tested {
        color: $purple-mid;

        .is-highlighted {
          background: $purple-light !important;

          &:hover {
            &:not(.disabled) {
              background: $purple-hover !important;
            }
          }
        }
      }

      &.is-vaccinated,
      &.is-vaccinated1,
      &.is-vaccinated2 {
        color: $pink-mid;

        .is-highlighted {
          background: $pink-light !important;

          &:hover {
            &:not(.disabled) {
              background: $pink-hover !important;
            }
          }
        }
      }

      &.is-population {
        color: $brown-mid;

        .is-highlighted {
          background: $brown-light !important;

          &:hover {
            &:not(.disabled) {
              background: $brown-hover !important;
            }
          }
        }
      }

      .switch-type,
      .switch-statistic {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: 0.25rem;

        .toggle {
          align-items: center;
          background: $gray-light;
          border-radius: 5px;
          cursor: pointer;
          display: flex;
          flex-direction: row;
          height: 2.5rem;
          justify-content: center;
          margin-left: 0.25rem;
          user-select: none;
          width: 2.5rem;

          &.back {
            margin-right: 0 !important;

            svg {
              fill: $gray;
              stroke: transparent;
            }
          }

          &:hover {
            &:not(.disabled) {
              background: $gray-hover;
            }
          }

          svg {
            height: 100%;
          }
        }

        .divider {
          background: $gray-hover;
          border-radius: 5px;
          margin-left: 0.25rem;
          width: 2px !important;
        }
      }

      .switch-statistic {
        align-self: flex-end;
        flex-direction: row;
        position: absolute;
        top: 5rem;

        .statistic-option {
          background: none;
          display: flex;
          flex-direction: row;
          height: 1.25rem;
          margin-bottom: 0.25rem;
          margin-left: 0.65rem !important;
          width: 1.25rem;

          span {
            position: absolute;
          }

          &:hover {
            background: none;
          }

          svg {
            fill: $gray-hover;
            stroke: none;
          }

          &.is-highlighted {
            svg {
              fill: $gray;
              transform: scale(1.25);
            }
          }

          &.is-confirmed {
            svg {
              fill: $cherry-hover;
            }

            &.is-highlighted {
              svg {
                fill: $cherry;
              }
            }
          }

          &.is-active {
            svg {
              fill: $blue-hover;
            }

            &.is-highlighted {
              svg {
                fill: $blue;
              }
            }
          }

          &.is-recovered {
            svg {
              fill: $green-hover;
            }

            &.is-highlighted {
              svg {
                fill: $green;
              }
            }
          }

          &.is-deceased {
            svg {
              fill: $gray-hover;
            }

            &.is-highlighted {
              svg {
                fill: $gray;
              }
            }
          }

          &.is-vaccinated {
            svg {
              fill: $pink-hover;
            }

            &.is-highlighted {
              svg {
                fill: $pink;
              }
            }
          }
        }
      }
    }

    &.bottom {
      margin-top: 0;
      padding-top: 0;
    }
  }

  #legend,
  #legend-choro {
    position: absolute;
  }

  #chart,
  #legend,
  #legend-choro {
    &:not(.zone) {
      filter: saturate(1.5);
    }

    &.zone {
      filter: saturate(1.25);
    }
  }

  .disclaimer {
    align-items: center;
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 5px;
    bottom: 50%;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: background, color 0.3s ease-in-out;
    width: 10rem;
    z-index: 99;

    &.is-confirmed {
      background: $cherry-light;
      color: $cherry;
    }

    &.is-active {
      background: $blue-light;
      color: $blue;
    }

    &.is-recovered {
      background: $green-light;
      color: $green;
    }

    &.is-deceased {
      background: $gray-light;
      color: $gray;
    }

    span {
      flex: 1;
    }

    svg {
      align-self: flex-start;
      margin-right: 0.5rem;
      stroke-width: 2px;
      width: 16px;
    }
  }

  .footnote {
    color: $gray;
    margin-bottom: 0;
    margin-top: 1em;
    text-align: left;
    z-index: 1;

    a {
      border-bottom: 2px solid $gray-hover;
      text-decoration: none;

      &:hover {
        background: $gray-hover;
      }
    }
  }
}

.tabs {
  display: flex;
  flex-direction: row;
  position: relative;

  .tab {
    background: $gray-light;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: $gray-mid;
    cursor: pointer;
    height: 3.25rem;
    margin-right: 0.25rem;
    min-width: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;

    &:hover {
      background: $gray-hover;
    }

    &.focused {
      background: $gray-opaque;
      color: $gray;
    }
  }
}

.tabs-map {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  z-index: 99;

  h4 {
    display: table-cell;
    font-size: 12px !important;
    font-weight: 900;
    height: 2rem;
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: middle;
  }

  .tab {
    background: $gray-light;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: $gray-mid;
    cursor: pointer;
    height: 2rem;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
    min-width: 1.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    transition: all 0.3s ease-in-out;

    &:hover {
      background: $gray-hover;
    }

    &.focused {
      background: $gray-opaque;
      color: $gray;
    }

    &.disabled {
      background: $gray-opaque;
      color: $gray-mid;
    }
  }

  sup {
    position: relative;
    top: -0.5em;
    vertical-align: top;
  }
}

.TimeseriesExplorer {
  align-self: center;
  display: flex;
  flex-direction: column;
  width: calc(100% - 2rem);

  &.stickied {
    position: sticky !important;
    top: -6.5rem;
  }

  .alert {
    align-self: flex-end;
    margin: 0;
    margin-top: 1rem;
  }

  .state-selection {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    max-width: calc(100% - 0.6rem);

    .dropdown {
      min-width: calc(60%);

      select {
        appearance: none;
        background-color: #eee;
        background-image: url('data:image/svg+xml,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="m0,6l12,12l12,-12l-24,0z" fill="gray"/><path fill="none" d="m0,0l24,0l0,24l-24,0l0,-24z"/></svg>');
        background-position-x: calc(100% - 0.4rem);
        background-position-y: 50%;
        background-repeat: no-repeat;
        background-size: 0.6rem;
        border: 2px solid #e8e8e9;
        border-radius: 4px;
        color: $gray;
        cursor: pointer;
        font-weight: 600;
        padding: 0.5rem;
        padding-right: 1.4rem;
        width: 100%;

        &:focus {
          outline: none;
        }
      }
    }

    .reset-icon {
      margin: auto;
      margin-left: 0.75rem;
      margin-top: 0.5rem;

      svg {
        color: $gray-mid;
        cursor: pointer;
        fill: #a6abb0;
        stroke: #a6abb0;
        stroke-width: 0.5;
        width: 16px;

        &:hover {
          fill: $gray;
          stroke: $gray;
        }
      }
    }
  }
}

.Timeseries {
  align-self: center;
  width: 100%;

  .svg-parent {
    height: 12rem;
    margin-bottom: 1rem;

    &.is-confirmed {
      .stem {
        stroke: $cherry-mid;
      }

      .trend-area {
        fill: $cherry-mid;
      }
    }

    &.is-active {
      .stem {
        stroke: $blue-mid;
      }

      .trend-area {
        fill: $blue-mid;
      }
    }

    &.is-recovered {
      .stem {
        stroke: $green-mid;
      }

      .trend-area {
        fill: $green-mid;
      }
    }

    &.is-deceased {
      .stem {
        stroke: $gray-mid;
      }

      .trend-area {
        fill: $gray-mid;
      }
    }

    &.is-tested {
      .stem {
        stroke: $purple-mid;
      }

      .trend-area {
        fill: $purple-mid;
      }
    }

    &.is-vaccinated {
      .stem {
        stroke: $pink-mid;
      }

      .trend-area {
        fill: $pink-mid;
      }
    }

    &.is-tpr {
      .stem {
        stroke: $orange-mid;
      }

      .trend-area {
        fill: $orange-mid;
      }
    }

    &.is-brush {
      height: 4rem;
    }

    svg {
      width: 100%;
    }
  }
}

.timeseries-header {
  align-self: center;
  position: relative;
  width: 100%;

  h1 {
    color: $gray;
    margin: 0;
    margin-bottom: 2rem;
    text-align: center;
  }

  .timeseries-options {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1rem;

    .timeseries-mode {
      display: flex;
      flex-direction: row;
    }

    .scale-modes {
      align-items: flex-end;
      bottom: 0;
      color: $gray;
      display: flex;
      flex-direction: row;
      right: 0;
      z-index: 99;

      &:hover {
        label {
          &.main {
            color: $gray;
          }
        }
      }

      .timeseries-mode {
        margin-left: 1rem;
      }

      & > * {
        align-self: center;
      }
    }

    label {
      color: $gray-mid;
      font-size: 0.75rem;
      font-weight: 900;
      margin-right: 0.25rem;
      z-index: 99;
    }
  }
}

.disabled {
  input {
    &.switch {
      background: $gray-light !important;
      border: $gray-light 2px solid !important;
      cursor: not-allowed !important;

      &::after {
        background: $gray-light !important;
      }
    }
  }
}

input {
  &.switch {
    appearance: none;
    background-color: #fff;
    border: 2px solid #d9dadc;
    border-radius: 10px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    outline: none;
    position: relative;
    transition: all 300ms ease-in-out;
    width: 24px;

    &::after {
      background-color: $gray-mid;
      border-radius: 50%;
      content: '';
      height: 10px;
      left: 0;
      position: absolute;
      top: 0;
      transition: all 300ms ease-in-out;
      width: 10px;
    }

    &:checked {
      background-color: $gray-mid;
      transition: all 300ms ease-in-out;

      &::after {
        background-color: $light;
        left: 10px;
        transition: all 300ms ease-in-out;
      }
    }
  }
}

.Timeseries,
.Minigraph {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  width: 100%;

  .stats {
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    left: 0.5rem;
    padding: 0.25rem;
    pointer-events: none;
    position: absolute;
    top: 0.5rem;

    .stats-bottom {
      display: flex;
      flex-direction: row;

      h6 {
        margin-bottom: 0.1rem;
        margin-left: 0.25rem;
      }

      & > * {
        margin-top: auto;
      }
    }

    h2,
    h5,
    h6 {
      margin: 0;
      transition: all 0.15s ease-in-out;
    }

    h5 {
      color: $cherry-mid;

      &.title {
        color: $cherry-mid;
      }
    }

    h2,
    h6 {
      color: $cherry;
    }

    &.is-recovered {
      h5 {
        color: $green-mid;

        &.title {
          color: $green-mid;
        }
      }

      h2,
      h6 {
        color: $green;
      }
    }

    &.is-deceased {
      h5 {
        color: $gray-mid;

        &.title {
          color: $gray-mid;
        }
      }

      h2,
      h6 {
        color: $gray;
      }
    }

    &.is-active {
      h5 {
        color: $blue-mid;

        &.title {
          color: $blue-mid;
        }
      }

      h2,
      h6 {
        color: $blue;
      }
    }

    &.is-tested {
      h5 {
        color: $purple-mid;

        &.title {
          color: $purple-mid;
        }
      }

      h2,
      h6 {
        color: $purple;
      }
    }

    &.is-vaccinated {
      h5 {
        color: $pink-mid;

        &.title {
          color: $pink-mid;
        }
      }

      h2,
      h6 {
        color: $pink;
      }
    }

    &.is-tpr {
      h5 {
        color: $orange-mid;

        &.title {
          color: $orange-mid;
        }
      }

      h2,
      h6 {
        color: $orange;
      }
    }
  }

  .svg-parent {
    align-self: center;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;

    svg {
      .domain,
      .tick {
        stroke-width: 1.5;

        line {
          stroke-width: 1.5;
        }
      }

      text {
        font-size: 9px;
        font-weight: 600;
        stroke: transparent;
      }
    }

    &.is-confirmed {
      background: $cherry-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $cherry;
        }

        text {
          color: $cherry-mid;
        }
      }
    }

    &.is-recovered {
      background: $green-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $green;
        }

        text {
          color: $green-mid;
        }
      }
    }

    &.is-deceased {
      background: $gray-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $gray;
        }

        text {
          color: $gray-mid;
        }
      }
    }

    &.is-active {
      background: $blue-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $blue;
        }

        text {
          color: $blue-mid;
        }
      }
    }

    &.is-tested {
      background: $purple-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $purple;
        }

        text {
          color: $purple-mid;
        }
      }
    }

    &.is-vaccinated {
      background: $pink-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $pink;
        }

        text {
          color: $pink-mid;
        }
      }
    }

    &.is-tpr {
      background: $orange-light;

      svg {
        .domain,
        .tick,
        line {
          stroke: $orange;
        }

        text {
          color: $orange-mid;
        }
      }
    }

    &.is-brush {
      .overlay {
        fill: #6c757d40;
        pointer-events: all;
      }

      .selection {
        cursor: move;
        stroke: none;
      }

      svg {
        .domain,
        .tick,
        line {
          stroke: $gray;
        }

        text {
          color: $gray;
        }
      }
    }
  }
}

.Minigraph {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  margin-bottom: 2rem;
  margin-top: 1rem;

  .svg-parent {
    background: transparent !important;
  }
}

.floating-buttons {
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  right: 1rem;
  width: 3rem;
  z-index: 1;

  button {
    backdrop-filter: saturate(180%) blur(2px);
    background: $yellow-mid;
    border: 0;
    border-radius: 50%;
    color: $orange;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin: 0.25rem;
    outline: none;
    padding: 0.75rem;
    transition: all 0.2s ease-in-out;

    &:hover {
      background: #ffa500;

      svg {
        stroke: #ffa500;
      }
    }

    svg {
      align-self: center;
      stroke: $orange;
    }
  }
}

.Links {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.link {
  align-self: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
  width: 34rem;

  a {
    background: $blue-light;
    color: $blue;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease-in-out;
    word-wrap: break-word;

    &:hover {
      background: $blue-hover;
    }
  }

  h3 {
    color: $gray-dark;
    font-weight: 900;
    margin-bottom: 0;
  }
}

footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
  margin-top: 4rem;
  width: 100%;

  & > * {
    align-self: center;
    text-align: center;
  }

  h5 {
    color: $gray;
    font-weight: 600;
    margin: 0;
    margin-bottom: 2rem;
  }

  svg {
    margin-right: 0.5rem;
    padding: 0.25rem;
  }

  .telegram {
    color: $blue-mid;

    &:hover {
      color: $blue;
    }
  }

  .github {
    color: $gray-mid;

    &:hover {
      color: $gray;
    }
  }

  .instagram {
    color: $pink-mid;

    &:hover {
      color: $pink;
    }
  }

  .twitter {
    color: $pblue-mid;

    &:hover {
      color: $pblue;
    }
  }

  .api {
    color: $yellow-mid;

    &:hover {
      color: $yellow;
    }
  }

  .mail {
    color: $brown-mid;

    &:hover {
      color: $brown;
    }
  }
}

.Volunteers {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-left: 6rem;
  margin-top: 4rem;
  min-height: 30rem;
  width: calc(100% - 6rem);

  .wrapper {
    max-width: 80%;

    .description {
      background: $blue-light;
      border-radius: 0.25rem;
      color: $blue;
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 3rem;
      padding: 1rem;
      text-align: justify;
      text-justify: inter-word;
    }
  }

  .members {
    display: grid;
    grid-auto-rows: 6.5rem;
    grid-column-gap: 1%;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    width: 80%;

    .last {
      display: flex;
      position: relative;

      .Member {
        background-color: $gray-light-opaque;
        box-sizing: border-box;
        height: 100%;
        position: absolute;
        width: 70%;

        &:hover {
          background-color: $gray-hover-opaque;
        }

        &.second {
          background-color: $white;
          left: 15%;

          &:hover {
            background-color: $gray-hover-opaque;
          }
        }

        &.third {
          left: 30%;
        }
      }
    }

    .Member {
      align-items: center;
      background-color: $gray-light;
      border-radius: 0.25rem;
      display: flex;
      flex-direction: row;
      padding: 1rem;
      position: relative;
      text-decoration: none;

      > a {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      &:hover {
        background-color: $gray-hover;
      }

      .image {
        aspect-ratio: 1;
        border-radius: 10px;
        height: 100%;
        margin-right: 1rem;

        svg {
          border-radius: 10px;
          height: 100%;
          width: 100%;
        }
      }

      .link-external {
        align-self: flex-start;
        color: $gray;
        margin-left: 1rem;
      }

      .details {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
        pointer-events: none;
        position: relative;
        white-space: nowrap;
        width: 100%;

        > * {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .name {
          color: #343a40ee;
          font-weight: 600;
          margin: 0;
          margin-bottom: 0.25rem;
        }

        .bio {
          color: $blue;
          font-size: 12px;
          margin: 0;
          margin-bottom: 0.25rem;
        }

        .socials {
          align-items: center;
          cursor: pointer;
          display: flex;
          line-height: 1.5rem;
          margin-top: auto;
          transition: opacity 0.15s ease-in-out;

          .icon {
            pointer-events: all;
          }

          svg {
            margin-right: 0.5rem;
          }

          .github {
            color: #6c757dbb;

            &:hover {
              color: $gray;
            }
          }

          .linkedin {
            color: $blue-mid;

            &:hover {
              color: $blue;
            }
          }

          .instagram {
            color: $pink-mid;

            &:hover {
              color: $pink;
            }
          }

          .twitter {
            color: $pblue-mid;

            &:hover {
              color: $pblue;
            }
          }
        }
      }
    }
  }
}

.About {
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  width: 100%;

  & > * {
    align-self: center;
    margin-bottom: 1.5rem;
    width: 34rem;
  }

  & > *:first-child {
    margin-top: 4rem;
  }

  h2 {
    font-weight: 600;
    margin: 0;
    text-transform: none;
  }

  .question {
    color: $gray-dark;
    margin: 0;
    margin-bottom: 0.25rem;
  }

  .answer {
    color: $blue;
    line-height: 1.5rem;
  }

  a {
    background: $blue-light;
    color: $blue;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.pills {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  > button {
    background-color: $yellow-light;
    border: 2px $yellow-light solid;
    border-bottom: 0;
    border-top: 0;
    color: $orange;
    cursor: pointer;
    font-size: 10px !important;
    font-weight: 600;
    margin: 0;
    padding: 10px 15px;
    text-align: center;
    transition: background 0.25s ease-in-out;

    &:hover {
      background: $yellow-hover;
    }

    &.selected {
      background-color: $yellow-mid;
    }

    &:focus {
      &:not(:focus-visible) {
        outline: none;
      }
    }

    &:first-of-type {
      border: 0;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
    }

    &:last-of-type {
      border: 0;
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;
    }
  }
}

.updates-header {
  align-self: center;
  color: $gray-dark;
  width: 100%;

  h2 {
    color: $pblue;
    font-weight: 900;
  }

  h3 {
    color: $blue-mid;
    font-weight: 900;

    &:hover {
      svg {
        color: $blue;
      }
    }

    svg {
      height: 1rem;
    }
  }
}

.updates-footer {
  align-self: center;
  color: $gray-dark;
  margin-left: auto;

  .telegram {
    color: $blue;

    &:hover {
      color: $purple;
    }
  }

  h4 {
    color: $blue-mid;
    font-weight: 900;
    margin-top: 0.5rem;

    svg {
      height: 1rem;
      margin-bottom: -0.1rem;
      margin-left: 0.25rem;
    }

    &:hover {
      color: $blue;
    }
  }
}

.updates {
  align-self: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  min-height: 22rem !important;
  width: 100%;

  .update {
    background: $gray-light;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    transition: all 0.2s ease-in-out;

    &:hover {
      background: $gray-hover;
    }

    h5,
    h4 {
      margin: 0;
    }

    h5 {
      color: $gray-mid;
      margin-bottom: 0.15rem;
    }

    h4 {
      color: $gray;
      font-weight: 600;
    }
  }

  .button {
    background: $pblue-light;
    color: $pblue;
    display: flex;
    flex-direction: row;
    height: 3rem;
    width: 13rem;

    & > * {
      align-self: center;
    }

    &:hover {
      background: $pblue-hover;
    }
  }

  a {
    color: inherit;
    display: flex;
    flex-direction: row;
    text-decoration: none;

    & > * {
      align-self: center;
    }
  }
}

.district-bar {
  align-self: center;
  display: flex;
  flex-direction: column;

  .district-bar-bottom {
    .button {
      background: $gray-light;
      color: $gray;
      flex-basis: 15%;
      font-weight: 600;
      height: 2.5rem;
      justify-content: center;
      margin-top: 0.75rem;
      text-transform: unset;
      width: 5rem;

      &:hover {
        background: $gray-hover;
      }
    }
  }

  .district-bar-top {
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    &.expanded {
      flex-direction: column;
    }

    h2 {
      font-weight: 900;
      margin-bottom: 0.5rem;
      margin-top: 0;

      &.confirmed {
        color: $red;
      }

      &.active {
        color: $blue;
      }

      &.recovered {
        color: $green;
      }

      &.deceased {
        color: $gray;
      }

      &.vaccinated {
        color: $pink;
      }
    }
  }

  .district-bar-left {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .district-bar-right {
    display: flex;
    flex-basis: 15rem;
    flex-grow: 1;
    justify-content: center;
    position: relative;

    .happy-sign {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 4rem;
    }

    .DeltaBarGraph {
      margin-top: 1rem;
      width: 100%;

      svg {
        width: 100%;

        .label {
          font-size: 11px;
          font-weight: 900;
          text-anchor: middle;
        }
      }
    }
  }

  .districts {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 10rem;

    &.is-grid {
      display: grid;
      grid-auto-flow: column;
      grid-gap: 0.5rem;
      padding-bottom: 0.5rem;
      width: 100%;
    }

    .district {
      display: flex;
      flex-direction: row;
      height: 2.5rem;
      justify-content: flex-start;
      margin-right: 0.5rem;

      h2,
      h5 {
        color: $gray;
        font-weight: 600;
        margin: 0;
      }

      h5 {
        display: inline-block !important;
        margin-left: 0.5rem;
        margin-top: 0.15rem;
        width: auto !important;
      }

      & > * {
        align-self: center;
      }

      .delta {
        display: flex;
        flex-direction: row;
        margin-left: 0.5rem;
        margin-top: 4px;

        h6 {
          margin: 0;

          &.confirmed {
            color: $red-mid;
          }

          &.active {
            color: $blue-mid;
          }

          &.recovered {
            color: $green-mid;
          }

          &.deceased {
            color: $gray-mid;
          }

          &.vaccianted {
            color: $pink-mid;
          }
        }

        svg {
          stroke-width: 4;
          vertical-align: bottom;
          width: 10px;

          &.confirmed {
            color: $red-mid;
          }

          &.active {
            color: $blue-mid;
          }

          &.recovered {
            color: $green-mid;
          }

          &.deceased {
            color: $gray-mid;
          }

          &.vaccinated {
            color: $pink-mid;
          }
        }

        & > * {
          align-self: center;
        }
      }
    }
  }
}

.LanguageSwitcher {
  align-self: center;
  display: flex;
  flex-direction: column;
  margin-left: 5rem;
  width: 34rem;

  h3 {
    align-self: center;
    color: $pblue;
    font-weight: 600;
    margin-bottom: 2rem;
  }

  .close-button {
    align-self: center;
    background: $pblue-light;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 1rem;
    min-width: 1rem;
    padding: 1rem;

    &:hover {
      background: $pblue-hover;
    }

    svg {
      color: $pblue-mid;
      stroke-width: 2.5px;

      &:hover {
        color: $pblue;
      }
    }
  }

  .languages {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
    min-height: 10rem;

    .language {
      border-radius: 5px;
      color: $pblue-mid;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      font-weight: 600;
      justify-content: center;
      padding: 1rem;
      user-select: none;

      &:hover {
        color: $pblue;
      }

      &.is-highlighted {
        background: $pblue-light;
        color: $pblue;
      }
    }
  }
}

.SunMoon {
  cursor: pointer;
}

.Tooltip {
  background-color: $black !important;
  border-radius: 8px !important;
  color: $white;
  font-size: 13px !important;
  font-weight: 600;
  padding: 0.5rem;

  .message {
    margin: 0;

    :not(:last-child) {
      margin-bottom: 0.5rem;
    }
  }
}

.frac {
  display: inline-block;
  letter-spacing: 0.001em;
  position: relative;
  text-align: center;
  vertical-align: middle;

  span {
    display: block;
    padding: 0.1em;

    &.bottom {
      border-top: thin solid;
    }
  }
}

@media (min-width: 769px) {
  .Home,
  .State {
    padding-top: 5rem;
  }

  .Navbar {
    background: $gray-light-opaque;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    min-width: 5rem;
    position: fixed;
    z-index: 999;

    .navbar-left {
      margin-bottom: 0.5rem;
      margin-top: auto;
      order: 3;
      text-align: center;
    }

    .navbar-middle {
      font-size: 0.6rem;
      order: 1;
      padding-bottom: 2rem;
      padding-top: 2rem;
      text-align: center;
      width: 46px;
      word-wrap: break-word;
    }

    .navbar-right {
      align-items: center;
      background: $gray-light-opaque;
      display: flex;
      flex-direction: column;
      order: 2;
      padding-bottom: 0;
      padding-top: 0;

      span {
        display: flex;
        flex-direction: row;
        height: 1.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;

        &:hover {
          color: $pblue-dark;
        }
      }
    }

    .expand {
      background: $gray-light-opaque;
      flex-direction: column;
      height: calc(100% - 5.5rem);
      padding-left: 0;
      padding-top: 5.75rem;
      top: 0;
      width: 15rem;

      & > * {
        border: 0;
        color: $gray;
        font-weight: 600;
        height: 1.5rem;
        width: 12rem;
      }
    }
  }

  .dark-mode {
    .Navbar,
    .expand,
    .navbar-right {
      background: #1e1e30 !important;
    }
  }

  .State {
    .state-left,
    .state-right {
      min-width: 33rem;
      width: 40%;
    }
  }

  .Home {
    .home-left,
    .home-right {
      min-width: 33rem;
      width: 40%;

      &.expanded {
        width: min(100%, max(71rem, calc(80% + 5rem)));
      }
    }

    .home-left {
      &.expanded {
        margin-bottom: 2.5rem;
        margin-right: 0;
      }
    }

    .home-right {
      &.expanded {
        flex-direction: row;
        margin-left: 0;
      }
    }
  }

  .map-container {
    &.expanded {
      margin-right: 2.5rem;
      width: 50%;
    }
  }

  .TimeseriesExplorer {
    &.expanded {
      margin-left: 2.5rem;
      width: calc(50% - 2rem);
    }
  }

  footer {
    margin-bottom: 5rem;
  }
}

@media (max-width: 769px) {
  .table-container,
  .header,
  .TimeseriesExplorer,
  .map-container,
  .Links,
  .Summary,
  .Volunteers,
  .About,
  .updates,
  .updates-header,
  .StateMeta,
  .timeline,
  .table-top,
  .LanguageSwitcher,
  .VaccinationHeader {
    width: calc(100% - 2rem);
  }

  .Home,
  .State {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    padding-top: 1rem;
    width: 100%;

    .home-left,
    .home-right,
    .state-left,
    .state-right {
      display: flex;
      flex-direction: column;
      margin: 0;
      width: 100%;
    }
  }

  .map-container {
    align-self: center;
  }

  .MapExplorer {
    .svg-parent {
      width: 100%;
    }

    .header {
      margin-top: 2rem;
    }
  }

  .link,
  .faq {
    width: calc(100% - 2rem);
  }

  .Timeseries {
    .svg-parent {
      width: 100%;
    }
  }

  .Minigraph {
    .svg-parent {
      padding: 0;
    }
  }

  .map-stats {
    .stats {
      .timestamp {
        width: 4.5rem;
      }
    }
  }

  a {
    &.button {
      display: flex;
      flex: row;
      justify-content: center;
      width: 10rem;

      & > * {
        align-self: center;
      }

      svg {
        width: 38px;
      }
    }
  }

  .Banner {
    .wrapper {
      flex-direction: column;
      padding-left: 0.75rem;
      width: 100%;

      .content {
        margin: 0.5rem 0;
      }
    }
  }

  .cards-container {
    padding: 0.5rem;

    .cards {
      .card {
        flex: 0 1 100%;
        height: 25rem;
        margin-bottom: 0;
      }

      .chart-title {
        padding: 20px 0 10px;
      }

      .card-big {
        height: 30rem;
      }
    }
  }

  .Demographics {
    margin-left: 0;
    width: 100%;

    .select {
      .react-date-picker__calendar {
        position: fixed;
        top: 2.3rem !important;
      }
    }

    .header {
      margin: 0;
      padding-left: 1rem;
      padding-right: 1rem;
      width: calc(100% - 2rem);
    }

    .reminder {
      padding-bottom: 1rem;
      padding-top: 1rem;
      width: calc(100% - 4rem);
    }

    .Patients {
      width: calc(100% - 2rem);
    }

    .modal {
      .modal-content {
        width: calc(100% - 5rem);

        .meta {
          height: 20rem;
        }
      }
    }

    .filters-left {
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .filters {
      align-self: center;
      height: auto;
      justify-content: center;
      padding: 0.5rem;
    }
  }

  .patients-summary {
    width: calc(100% - 2rem);

    .modal {
      .modal-content {
        width: calc(100% - 5rem);

        .meta {
          height: 20rem;
        }
      }
    }
  }

  .patientdb-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;

    .Patients {
      width: 100%;
    }

    .day {
      justify-content: center;
      width: 100%;
    }
  }

  .Navbar {
    .expand {
      height: calc(100% - 4rem);
      overflow: auto;
      transform: none !important;
    }

    .expand-bottom {
      margin-top: auto;
    }

    .navbar-right {
      span {
        display: none;

        &:first-child {
          display: initial;
        }
      }
    }
  }

  .Search {
    .result-name {
      max-width: 10rem !important;
    }
  }

  .State {
    .MapExplorer,
    .StateHeader {
      width: calc(100% - 2rem);
    }

    .district-bar {
      width: calc(100% - 3rem);

      h1 {
        padding-left: 0;
      }
    }
  }

  .StateMeta {
    display: grid;
    grid-gap: 1rem;
    grid-template-rows: repeat(auto-fit, minmax(5rem));
    margin-bottom: 2.5rem;

    .meta-item {
      min-width: 1rem;
    }
  }

  .timeline {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .LanguageSwitcher {
    margin-left: 0;
  }

  .VaccinationHeader {
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  .timeseries-header {
    .timeseries-options {
      flex-direction: column;

      .moving-average {
        margin-top: 0.75rem;
      }
    }
  }

  .MapSwitcher {
    .highlight,
    .clickable {
      height: 13rem;
    }
  }

  .Volunteers {
    margin-left: 0;

    .wrapper,
    .members {
      max-width: 100%;
      width: 100%;
    }
  }
}

// Dark Mode

.dark-mode {
  background: #161625 !important;
  color: #bdbdbd;

  .switch-wrapper > div {
    background: #161625 !important;
  }

  .is-tested {
    color: $dark-m-purple !important;

    svg {
      color: $dark-m-purple !important;
    }
  }

  .expand {
    background: #1e1e30 !important;
  }

  .Navbar,
  .expand {
    border-right: 0;

    .navbar-middle {
      color: #bdbdbd;
    }
  }

  .table {
    .cell {
      &:first-child {
        background: #1e1e30 !important;
      }

      &.heading {
        background: #1e1e30 !important;

        &:hover {
          background: #212130 !important;
        }
      }
    }

    .is-highlighted,
    .is-total {
      .cell {
        background: #1e1e30 !important;
      }
    }
  }

  .Search {
    input {
      background: #1e1e30 !important;
    }
  }

  .State {
    .header-right {
      h5 {
        color: #9673b9bb !important;
      }

      h2 {
        color: #9673b9 !important;
      }

      a {
        background: $dark-m-purple-light !important;
      }
    }

    .breadcrumb {
      ul {
        background: #1e1e30 !important;

        &::after {
          border-bottom-color: #1e1e30 !important;
        }

        li {
          a {
            color: $gray !important;

            &:hover {
              color: $white !important;
            }
          }
        }
      }
    }
  }

  .StateHeader {
    .header-right {
      color: $dark-m-purple-mid;

      h2 {
        color: $dark-m-purple;
      }

      a {
        background: $dark-m-purple-light;

        &:hover {
          background: $dark-m-purple-hover !important;
        }
      }
    }
  }

  .MapExplorer {
    #chart,
    #legend-choro {
      &.zone {
        filter: none;
      }

      &:not(.zone) {
        filter: invert(1) hue-rotate(180deg) saturate(1.5) url('#balance-color');
      }
    }

    .maplegend {
      background: #161625 !important;
    }

    .meta {
      h1 {
        &.tested {
          color: #9673b9 !important;
        }
      }

      h2 {
        &.tested {
          color: #9673b9 !important;
        }
      }
    }

    .panel {
      .panel-left {
        .tested {
          color: $dark-m-purple !important;
        }
      }
    }

    .stats {
      &.tested {
        background: $dark-m-purple-light !important;

        h1 {
          color: #9673b9 !important;
        }

        h5,
        h6 {
          color: #9673b9bb !important;
        }

        svg {
          stroke: #9673b9bb !important;

          &:hover {
            stroke: #9673b9 !important;
          }
        }
      }
    }

    .disclaimer {
      color: $gray-light-opaque;
    }
  }

  .Timeseries,
  .Minigraph {
    .stats {
      &.is-tested {
        h5 {
          color: $dark-m-purple-mid !important;

          &.title {
            color: $dark-m-purple-mid !important;
          }
        }

        h2,
        h6 {
          color: $dark-m-purple !important;
        }
      }
    }

    .svg-parent {
      &.is-tested {
        background: $dark-m-purple-light !important;

        svg {
          circle,
          .domain,
          .tick {
            stroke: $dark-m-purple !important;
          }

          circle {
            fill: $dark-m-purple !important;
          }

          .trend,
          line {
            stroke: #9673b999 !important;
          }

          .trend-area {
            fill: #9673b999 !important;
          }

          text {
            color: $dark-m-purple-mid !important;
            stroke: transparent;
          }
        }
      }

      &.is-brush {
        .handle--custom {
          stroke: $gray-light-opaque;
        }
      }
    }
  }

  .tpl {
    background: $dark-m-purple-light !important;

    h3,
    h5,
    svg,
    p {
      color: #9673b9bb !important;
    }

    h1 {
      color: #9673b9 !important;
    }
  }

  .tab {
    &.focused {
      background: #1e1e30 !important;
      color: #bdbdbd !important;
    }
  }

  .pills {
    button {
      &.selected {
        background: #{$yellow}50;
      }
    }
  }

  .TimeseriesExplorer {
    .state-selection {
      .dropdown {
        select {
          background: #1e1e30;
          background-image: linear-gradient(45deg, transparent 50%, $gray 50%),
          linear-gradient(135deg, $gray 50%, transparent 50%);
          background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
          background-repeat: no-repeat;
          background-size: 5px 5px, 5px 5px;
          border-color: #9494941a;
        }
      }
    }
  }

  input {
    &.switch {
      background-color: #161625 !important;
      border: 2px solid $gray-mid !important;

      &:checked {
        background-color: #6c757d99 !important;

        &::after {
          background-color: #cfcfcf !important;
        }
      }

      &::after {
        background-color: #cfcfcf !important;
      }
    }
  }

  .disabled {
    input {
      &.switch {
        background: $dark !important;
        border: $gray-light 2px solid !important;
        opacity: 0.7;

        &::after {
          background: $gray !important;
        }
      }
    }
  }

  .Volunteers {
    .members {
      .last {
        .Member {
          &:hover {
            background-color: #212130;
          }

          &.second {
            background-color: $dark-m-gray;

            &:hover {
              background-color: #212130;
            }
          }
        }
      }

      .Member {
        background-color: #1e1e30;

        &:hover {
          background-color: $gray-hover;
        }

        .details {
          .name {
            color: $gray;
          }
        }
      }
    }
  }

  .About {
    .question {
      color: $gray !important;
    }
  }

  .Demographics {
    .filters {
      background: #1e1e30 !important;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1e1e30;
    }

    .legend {
      background: #1e1e30 !important;
    }

    .react-date-picker {
      background: #1e1e30;
      border-color: #9494941a !important;
    }

    .modal-content {
      background: #1e1e30 !important;
    }

    .modal {
      background: #1e1e30bb !important;
    }
  }

  .StateDropdown {
    .dropdown {
      background: #1e1e30 !important;
    }
  }

  .StatisticDropdown {
    select {
      option {
        background: #1e1e30;
        color: $gray;
      }
    }
  }

  .TableLoader {
    svg {
      rect {
        fill: #1e1e30 !important;
      }
    }
  }
}

// Animation Support

.fadeInUp {
  animation-duration: 0.45s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  animation-duration: 0.45s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.rotateDownRight {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: rotateDownRight;
}

@keyframes rotateDownRight {
  100% {
    transform: rotate(-90deg);
  }
}

.rotateRightDown {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: rotateRightDown;
}

@keyframes rotateRightDown {
  0% {
    transform: rotate(-90deg);
  }
}

.fadeOutDown {
  animation-duration: 0.45s;
  animation-fill-mode: both;
  animation-name: fadeOutDown;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}
