.container {
  position: absolute;
  width: var(--layout-aside-width);
  z-index: 9999;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: white;
  border-top: 1px solid theme(colors.primary.200);
  animation: appear 0.3s ease-in-out;
  text-align: left;
  box-shadow: theme(boxShadow.stats);

  @screen md {
    box-shadow: none;
    z-index: 1;
    height: 100%;
    position: relative;
    background: transparent;
    border-top: 0px;
    border-left: 1px solid theme(colors.primary.200);
  }
}

.inner {
  user-select: none;
  padding: theme(spacing.4) theme(spacing.3);
  padding-top: 0px;
  overflow-x: scroll;
  display: flex;
  flex-flow: row nowrap;
  gap: theme(spacing.8);

  @screen md {
    gap: theme(spacing.8);
    height: 100%;
    overflow-x: visible;
    overflow-y: scroll;
    flex-flow: column wrap;
  }
}

.close {
  text-align: center;

  @screen md {
    text-align: right;
  }
}

.networkStats {
  display: flex;
  flex-flow: column nowrap;
  gap: theme(spacing.3);
  height: 100%;

  > div {
    display: flex;
    flex-flow: column wrap;
    flex: 1;
    min-width: 100px;
    padding: theme(spacing.3) theme(spacing.2);
    align-items: center;
    justify-content: center;
    border-radius: theme(borderRadius.md);
    background-color: theme(colors.primary.100);
    flex-shrink: 0;
    overflow: hidden;

    span {
      color: theme(colors.primary.900);
      font-weight: theme(fontWeight.semibold);
      flex-shrink: 0;
    }
  }

  @screen md {
    height: auto;
    flex-flow: row nowrap;

    > div {
      min-width: auto;
    }
  }
}

.statsHeader {
  font-weight: 600;
  display: none;

  @screen md {
    display: block;
  }
}

.monoHeader {
  font-family: theme(fontFamily.mono);
  font-size: theme(fontSize.xs);
  text-transform: uppercase;
  letter-spacing: theme(letterSpacing.wide);
  color: theme(colors.primary.600);
}

.section {
  @screen md {
  }
}

.section,
.sectionServices {
  display: flex;
  flex-flow: row;
  gap: theme(spacing.3);

  @screen md {
    display: flex;
    flex-flow: column wrap;
    gap: theme(spacing.3);
  }
}

sub {
  vertical-align: baseline;
  margin-left: 2px;
  font-size: 50%;
  bottom: 0 !important;
  color: theme(colors.primary.500);
}

.serviceStat {
  font-size: theme(fontSize.sm);
  background-color: white;
  border: 1px solid theme(colors.primary.200);
  border-radius: theme(borderRadius.md);

  > header {
    padding: theme(spacing.3);
  }

  > footer {
    border-top: 1px solid theme(colors.primary.200);
    display: flex;
    flex-flow: row nowrap;
    font-size: 11px;
    font-family: theme(fontFamily.mono);
    justify-content: space-between;
    padding: theme(spacing.2) theme(spacing.3);
  }
}

.serviceName {
  font-weight: theme(fontWeight.semibold);
  font-size: theme(fontSize.base);
  margin-bottom: theme(spacing.3);
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
  align-items: center;
}

.latest {
  background-color: theme(colors.primary.50);
  border-radius: theme(borderRadius.md);
  font-size: theme(fontSize.xs);
  text-transform: uppercase;
  letter-spacing: theme(letterSpacing.wide);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: theme(spacing.2);
  padding: theme(spacing.2) theme(spacing.3);
}

.statValue {
  line-height: 1;
  font-family: theme(fontFamily.mono);
  font-weight: theme(fontWeight.bold);
  text-transform: uppercase;
  display: inline-flex;
  flex-flow: row nowrap;
  gap: 5px;
  line-height: 1;

  > span {
    font-weight: theme(fontWeight.normal);
  }
}

.chart {
  width: auto;
  line-height: 1;
  margin: 0 theme(spacing.3);
}
