:root {
  --bottom-nav-h: 64px;
  --nav-item-color-inactive: #454f59;
  --nav-item-color-active: #dee4ea;
  --nav-item-icon-size: 28px;
}

@font-face {
  font-family: "Aeonik Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/AeonikPro-Regular-latin.woff2") format("opentype");
}

@media screen and (max-width: 600px) {
  #tv_chart_container {
    position: relative;
    height: 100vh; /* fill full viewport on mobile */
  }
  #tv_chart_container iframe {
    height: 100% !important;
  }

  #mobile-bottom-nav {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
  }

  .nav-item {
    flex: 1;
    text-align: center;
    height: 100%;
    position: relative;
  }

  .nav-item:before {
    content: "";
    width: calc(var(--single-pixel) * 39px);
    height: calc(var(--single-pixel) * 2px);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    background-color: var(--nav-item-color-active);
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .nav-item label {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding-bottom: calc(var(--single-pixel) * 8px); */
  }

  .nav-item-icon {
    height: var(--nav-item-icon-size);
    width: var(--nav-item-icon-size);
    position: relative;
  }

  .nav-item-icon:before {
    content: "";
    position: absolute;
    --drop-shadow-size: 44px;
    width: var(--drop-shadow-size);
    height: var(--drop-shadow-size);
    left: calc(-1 * (var(--drop-shadow-size) - var(--nav-item-icon-size)) / 2);
    top: calc(-1 * (var(--drop-shadow-size) - var(--nav-item-icon-size)) / 2);
    opacity: 0;
    background-image: url("./assets/images/bottom-nav-item-drop-shadow.png");
    background-position: center;
    background-size: contain;
  }

  .nav-item-text {
    font-size: 10px;
    line-height: 16px;
  }

  .nav-item img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .nav-item img.inactive-icon {
    opacity: 1;
  }

  .nav-item img.active-icon {
    opacity: 0;
  }

  .nav-item.active::before,
  .nav-item.active .nav-item-icon::before,
  .nav-item.active img.active-icon {
    opacity: 1;
  }

  .nav-item.active .nav-item-text {
    color: #dee4ea;
  }

  .nav-item.active img.inactive-icon {
    opacity: 0;
  }

  input {
    display: none;
  }
}