#level-details-inner {
  margin-top: 1.5625rem;

  &,
  & .border-block__border,
  & .block_border {
    border-radius: var(--button--border-radius, 0);
  }

  & .row {
    & > div {
      position: relative;
      padding: 1.5625rem 1.5625rem;
    }

    & div:nth-child(2n) {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 5%;
        width: 90%;
        height: 0;
        border-top: 1px solid var(--wp--preset--color--brand-1, #025a02);
        border-radius: var(--button--border-radius, 0);
      }

      @media (min-width: 48rem) {
        /* media queries cannot be placed inside a pseudo-element selector */
        &::after {
          top: 5%;
          left: 0;
          width: 0;
          height: 90%;
          border-top: none;
          border-left: 1px solid var(--wp--preset--color--brand-1, #025a02);
          border-radius: var(--button--border-radius, 0);
        }
      }
    }
  }

  & h2 {
    padding: var(--wp--preset--spacing--35, 0.625rem);
    border-radius: var(--button--border-radius, 0);
    background: var(--wp--preset--color--brand-2, transparent);
    color: var(--wp--preset--color--brand-2-inv, var(--wp--preset--color--white, inherit));
  }

  & fieldset legend {
    padding: var(--wp--preset--spacing--35, 0.625rem);
    border-radius: var(--button--border-radius, 0);
    background: var(--wp--preset--color--brand-2, transparent);
    color: var(--wp--preset--color--brand-2-inv, var(--wp--preset--color--white, inherit));
  }

  & .middle {
    & h2 {
      background: var(--wp--preset--color--brand-4, #2c729cff);
    }

    & fieldset legend {
      background: var(--wp--preset--color--brand-4, #2c729cff);
    }
  }

  & .river-state {
    padding: var(--wp--preset--spacing--35, 0.625rem);
    border-radius: var(--button--border-radius, 0);
    background: var(--wp--preset--color--brand-2-300, #c8d277);

    &::before {
      content: "";
      display: inline-block;
      margin-right: 0.3125rem;
      font: normal normal normal 0.875rem / 1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    & span {
      display: inline-block;
      padding: 0.125rem 0.1875rem;
      color: var(--wp--preset--color--white);
      line-height: 0.8125rem;
      text-transform: uppercase;
      font-size: 0.8125rem;
      font-weight: 300;
    }
  }

  & .river-state.river-rising span {
    background: var(--wp--preset--color--brand-1, #025a02);
  }

  & .current-info {
    margin-bottom: var(--wp--preset--spacing--35, 0.625rem);
    padding-bottom: var(--wp--preset--spacing--35, 0.625rem);
    border-bottom: 1px solid var(--wp--preset--color--brand-2-300, #c8d277);
  }

  & .normal-info {
    margin-bottom: var(--wp--preset--spacing--35, 0.625rem);
    padding-bottom: var(--wp--preset--spacing--35, 0.625rem);
    border-bottom: 1px solid var(--wp--preset--color--brand-2-300, #c8d277);
  }

  & .height-info {
    margin-bottom: var(--wp--preset--spacing--35, 0.625rem);
    padding-bottom: var(--wp--preset--spacing--35, 0.625rem);
    border-bottom: 1px solid var(--wp--preset--color--brand-2-300, #c8d277);
  }

  & .yesterday-info {
    color: var(--wp--preset--color--brand-3);
    font-weight: 600;
    font-style: italic;
  }

  & .upper {
    & h2 {
      background: var(--wp--preset--color--red-600, #ab0001);
    }

    & fieldset legend {
      background: var(--wp--preset--color--red-600, #ab0001);
    }
  }
}

fieldset #level-details-inner {
  & legend {
    padding: var(--wp--preset--spacing--35, 0.625rem);
    background: var(--wp--preset--color--brand-2, transparent);
    color: var(--wp--preset--color--brand-2-inv, var(--wp--preset--color--white, inherit));
  }

  & .middle legend {
    background: var(--wp--preset--color--brand-4, #2c729cff);
  }

  & .upper legend {
    background: var(--wp--preset--color--red-600, #ab0001);
  }
}