.overview {
  grid-area: overview;
  font-size: $inner-section-text-size;
  display: flex;
}

.isOffline {
  .info {
    opacity: $opacity-disabled;
  }
  &::after {
    content: 'Disconnected';
    position: absolute;
    padding-inline: 0.5rem;
    bottom: 0.5rem;
    right: 0.5rem;
    background-color: $red-700;
    border-radius: 2px;
    font-size: calc(1rem - 2px);
    z-index: 10;
  }
}

.nav {
  display: flex;
  gap: 0.5rem;
}

.info {
  flex: 1;
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 1.5rem;
  @include ellipsis-overflow;
}

.description {
  font-size: 1rem;
  color: $label-gray;
  @include ellipsis-overflow;
}

.ahead {
  color: $green-500;
}

.behind {
  color: $ontime-delay-text;
}