:root {
  --sitediver-background-color: var(--pico-background-color);
  --sitediver-border-width: var(--pico-border-width);
  --sitediver-border-radius: var(--pico-border-radius);
  --sitediver-border-color: var(--pico-muted-border-color);
  --sitediver-line-height: var(--pico-line-height);
  --sitediver-spacing: var(--pico-spacing);
}
:root {
  --sitediver-font-size-xxsmall: 0.675rem;
  --sitediver-font-size-xsmall: 0.75rem;
  --sitediver-font-size-small: 0.875rem;
  --sitediver-font-size: 1rem;
  --sitediver-font-size-large: 1.5rem;
  --sitediver-font-size-xlarge: 1.75rem;
  --sitediver-font-size-xxlarge: 2rem;
  --sitediver-font-weight-bold: 700;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --sitediver-color-error-background: oklch(86.5% 0.0781 27.2);
  --sitediver-color-error-border: oklch(31.9% 0.1204 35);
  --sitediver-color-error-font: oklch(45.4% 0.1747 34.7);
  --sitediver-color-info-background: oklch(95.8% 0.0147 286.1);
  --sitediver-color-info-border: oklch(67% 0.1628 272.3);
  --sitediver-color-info-font: oklch(50.2% 0.1941 262);
  --sitediver-color-warning-background: oklch(95.7% 0.0322 81);
  --sitediver-color-warning-border: oklch(48.1% 0.0987 84);
  --sitediver-color-warning-font: oklch(59.8% 0.1219 84.1);
  --sitediver-color-chart-default: oklch(60.7% 0.0411 275.2);
  --sitediver-color-chart-script: oklch(38% 0.1329 346.4);
  --sitediver-color-chart-img: oklch(59.7% 0.0673 203.2);
  --sitediver-color-chart-link: oklch(49.9% 0.0789 155.2);
  --sitediver-color-chart-tick: oklch(52.7% 0.0262 260.9);
  --sitediver-color-pallet-violet-mean: oklch(54.7% 0.2738 288.8);
  --sitediver-color-pallet-violet-p75: oklch(50.6% 0.2848 284.7);
  --sitediver-color-pallet-violet-p95: oklch(46.6% 0.2832 279.9);
  --sitediver-color-pallet-red-mean: oklch(49.3% 0.2108 11.6);
  --sitediver-color-pallet-red-p75: oklch(45.7% 0.203 14.2);
  --sitediver-color-pallet-red-p95: oklch(34.4% 0.1442 10.6);
  --sitediver-color-pallet-green-mean: oklch(62.9% 0.2472 148);
  --sitediver-color-pallet-green-p75: oklch(52.5% 0.1772 148.4);
  --sitediver-color-pallet-green-p95: oklch(43.7% 0.1772 145.1);
  --sitediver-color-pallet-blue-mean: oklch(51.4% 0.2089 275.1);
  --sitediver-color-pallet-blue-p75: oklch(42.1% 0.2312 269.9);
  --sitediver-color-pallet-blue-p95: oklch(33.6% 0.1979 268.2);
  --sitediver-color-pallet-orange-mean: oklch(67.4% 0.2189 38.4);
  --sitediver-color-pallet-orange-p75: oklch(58.1% 0.198 36.2);
  --sitediver-color-pallet-orange-p95: oklch(47.2% 0.1696 34);
  --sitediver-font-color: oklch(35.4% 0.0173 255.9);
  --sitediver-font-color-muted: oklch(52.7% 0.0262 260.9);
  --sitediver-box-shadow: 0 1px 3px 0 color(display-p3 0 0 0 / 0.1);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --sitediver-color-error-background: oklch(91.6% 0.0322 32.1);
  --sitediver-color-error-border: oklch(49.6% 0.1723 29.7);
  --sitediver-color-error-font: oklch(49.6% 0.1723 29.7);
  --sitediver-color-info-background: oklch(32.2% 0.1216 263.1);
  --sitediver-color-info-border: oklch(91.7% 0.0339 283.9);
  --sitediver-color-info-font: oklch(91.9% 0.0327 284.2);
  --sitediver-color-warning-background: oklch(48.1% 0.0986 84);
  --sitediver-color-warning-border: oklch(91.4% 0.0788 82.7);
  --sitediver-color-warning-font: oklch(95.8% 0.0326 81.5);
  --sitediver-color-chart-default: oklch(91.3% 0.0025 275.9);
  --sitediver-color-chart-script: oklch(55.9% 0.1504 344.2);
  --sitediver-color-chart-img: oklch(78% 0.0532 203.1);
  --sitediver-color-chart-link: oklch(70.5% 0.0742 156.8);
  --sitediver-color-chart-tick: oklch(61.1% 0.0309 259.7);
  --sitediver-color-pallet-violet-mean: oklch(65.3% 0.2033 309.9);
  --sitediver-color-pallet-violet-p75: oklch(62.9% 0.2363 329.7);
  --sitediver-color-pallet-violet-p95: oklch(68.6% 0.3423 328.5);
  --sitediver-color-pallet-red-mean: oklch(63.8% 0.209 5.1);
  --sitediver-color-pallet-red-p75: oklch(59.3% 0.2639 20.9);
  --sitediver-color-pallet-red-p95: oklch(64.6% 0.293 23);
  --sitediver-color-pallet-green-mean: oklch(76.9% 0.2632 146.2);
  --sitediver-color-pallet-green-p75: oklch(74.3% 0.3202 145.6);
  --sitediver-color-pallet-green-p95: oklch(67.8% 0.2877 145.3);
  --sitediver-color-pallet-blue-mean: oklch(63% 0.1042 281.9);
  --sitediver-color-pallet-blue-p75: oklch(61.5% 0.1883 278.2);
  --sitediver-color-pallet-blue-p95: oklch(67.9% 0.1864 279.1);
  --sitediver-color-pallet-orange-mean: oklch(67.4% 0.2188 38.4);
  --sitediver-color-pallet-orange-p75: oklch(63.6% 0.1589 36.6);
  --sitediver-color-pallet-orange-p95: oklch(73.9% 0.1611 33.5);
  --sitediver-font-color: oklch(82.8% 0.0153 258.8);
  --sitediver-font-color-muted: oklch(61.1% 0.0309 259.7);
  --sitediver-box-shadow: 0 1px 5px 0 color(display-p3 1 1 1 / 0.2);
  }
}

[data-theme="dark"] {
  --sitediver-color-error-background: oklch(91.6% 0.0322 32.1);
  --sitediver-color-error-border: oklch(49.6% 0.1723 29.7);
  --sitediver-color-error-font: oklch(49.6% 0.1723 29.7);
  --sitediver-color-info-background: oklch(32.2% 0.1216 263.1);
  --sitediver-color-info-border: oklch(91.7% 0.0339 283.9);
  --sitediver-color-info-font: oklch(91.9% 0.0327 284.2);
  --sitediver-color-warning-background: oklch(48.1% 0.0986 84);
  --sitediver-color-warning-border: oklch(91.4% 0.0788 82.7);
  --sitediver-color-warning-font: oklch(95.8% 0.0326 81.5);
  --sitediver-color-chart-default: oklch(91.3% 0.0025 275.9);
  --sitediver-color-chart-script: oklch(55.9% 0.1504 344.2);
  --sitediver-color-chart-img: oklch(78% 0.0532 203.1);
  --sitediver-color-chart-link: oklch(70.5% 0.0742 156.8);
  --sitediver-color-chart-tick: oklch(61.1% 0.0309 259.7);
  --sitediver-color-pallet-violet-mean: oklch(65.3% 0.2033 309.9);
  --sitediver-color-pallet-violet-p75: oklch(62.9% 0.2363 329.7);
  --sitediver-color-pallet-violet-p95: oklch(68.6% 0.3423 328.5);
  --sitediver-color-pallet-red-mean: oklch(63.8% 0.209 5.1);
  --sitediver-color-pallet-red-p75: oklch(59.3% 0.2639 20.9);
  --sitediver-color-pallet-red-p95: oklch(64.6% 0.293 23);
  --sitediver-color-pallet-green-mean: oklch(76.9% 0.2632 146.2);
  --sitediver-color-pallet-green-p75: oklch(74.3% 0.3202 145.6);
  --sitediver-color-pallet-green-p95: oklch(67.8% 0.2877 145.3);
  --sitediver-color-pallet-blue-mean: oklch(63% 0.1042 281.9);
  --sitediver-color-pallet-blue-p75: oklch(61.5% 0.1883 278.2);
  --sitediver-color-pallet-blue-p95: oklch(67.9% 0.1864 279.1);
  --sitediver-color-pallet-orange-mean: oklch(67.4% 0.2188 38.4);
  --sitediver-color-pallet-orange-p75: oklch(63.6% 0.1589 36.6);
  --sitediver-color-pallet-orange-p95: oklch(73.9% 0.1611 33.5);
  --sitediver-font-color: oklch(82.8% 0.0153 258.8);
  --sitediver-font-color-muted: oklch(61.1% 0.0309 259.7);
  --sitediver-box-shadow: 0 1px 5px 0 color(display-p3 1 1 1 / 0.2);

}

.box {
  background-color: var(--box-background-color, --sitediver-background-color);
  border: var(--border-width, 1px) solid var(--border-color, --sitediver-border-color);
  border-radius: var(--sitediver-border-radius);
  box-shadow: var(--sitediver-box-shadow);
  color: var(--box-color, --sitediver-font-color);
  padding: var(--sitediver-spacing);
}
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: var(--center-max-width, 140ch);
  padding-inline-end: var(--center-padding-inline, var(--sitediver-spacing));
  padding-inline-start: var(--center-padding-inline, var(--sitediver-spacing));
}
.center > * {
  box-sizing: border-box;
}
.center.intrinsic {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sitediver-spacing);
  justify-content: var(--cluster_justify-content, flex-start);
  align-items: var(--cluster_align-items, center);
}
.frame {
  aspect-ratio: var(--frame-numerator, 16) / var(--frame-denominator, 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.grid {
  display: grid;
  grid-gap: var(--sitediver-spacing);
}
@supports (width: min(250px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4);
}
.sidebar > :first-child {
  flex-grow: 1;
}
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-minimal-width, 50%);
}
.sidebar.right > :last-child {
  flex-grow: 1;
}
.sidebar.right > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-minimal-width, 50%);
}
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-block: 0;
}
.stack > * + * {
  margin-block-start: var(--stack-space, calc(var(--sitediver-line-height) * var(--sitediver-font-size)));
}
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sitediver-spacing);
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}
.switcher > :nth-last-child(n + 5),
.switcher > :nth-last-child(n + 5) ~ * {
  flex-basis: 100%;
}
sitediver-alert {
  --cluster_align-items: baseline;
  background-color: var(--alert_background-color);
  border: var(--sitediver-border-width, 2px) solid var(--alert_border-color, var(--sitediver-border-color));
  border-radius: var(--sitediver-border-radius);
  padding: var(--sitediver-spacing);
  transition: opacity 200ms ease-out;
}
sitediver-alert * {
  color: var(--alert_color);
}
sitediver-alert.error {
  --alert_background-color: var(--sitediver-color-error-background);
  --alert_border-color: var(--sitediver-color-error-border);
  --alert_color: var(--sitediver-color-error-font);
}
sitediver-alert.warning {
  --alert_background-color: var(--sitediver-color-warning-background);
  --alert_border-color: var(--sitediver-color-warning-border);
  --alert_color: var(--sitediver-color-warning-font);
}
sitediver-alert.info {
  --alert_background-color: var(--sitediver-color-info-background);
  --alert_border-color: var(--sitediver-color-info-border);
  --alert_color: var(--sitediver-color-info-font);
}
sitediver-alert .text-container {
  flex-grow: 2;
}
sitediver-alert .text-container p {
  margin-bottom: 0;
}
sitediver-alert > .icon {
  position: relative;
  top: 2px;
}
.avatar {
  background-color: var(--background-color-avatar, var(--pico-primary-background));
  border: 1px solid var(--border-color-avatar);
  color: var(--color-avatar, var(--pico-primary-inverse));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  height: var(--icon-size-avatar, 40px);
  width: var(--icon-size-avatar, 40px);
}
nav.breadcrumb {
  --pico-nav-breadcrumb-divider: "/";
}
.dropdown.transparent summary {
  height: unset !important;
}
.dropdown.transparent summary:after {
  display: none;
}
.dropdown.transparent summary:not(:hover) {
  background-color: transparent !important;
  border-color: transparent !important;
}
.dropdown .divider {
  border-bottom: 1px solid var(--sitediver-border-color);
}
.dropdown li {
  position: relative;
}
.dropdown form {
  height: calc(1rem * var(--pico-line-height));
}
.dropdown form button[role="link"] {
  background-color: transparent;
  border-radius: 0;
  color: var(--pico-dropdown-color);
  left: var(--pico-form-element-spacing-horizontal);
  margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
  position: absolute;
  text-decoration: none;
}
.dropdown form button[role="link"]:hover {
  background-color: var(--pico-dropdown-hover-background-color);
}
svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}
svg.icon.large {
  --icon-size: 40px;
}
.logo {
  display: flex;
  gap: 10px;
  align-items: center;
}
.logo.colored {
  --logo-fill: var(--pico-primary-background);
}
.logo.large {
  --logo-size: 64px;
}
.logo > svg {
  fill: var(--logo-fill, #000);
}
.logo :first-child {
  width: var(--logo-size, 40px);
  height: var(--logo-size, 40px);
}
.logo .name {
  display: var(--logo-name-display, block);
  height: calc(var(--logo-size, 40px) - 10px);
}
sitediver-popover {
  display: block;
}
sitediver-popover.visible {
  --popover-display: block;
}
sitediver-popover [role="tooltip"] {
  display: var(--popover-display, none);
  left: 0;
  position: absolute;
  top: 0;
  width: max-content;
}
section.login {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 100px auto;
  max-width: 500px;
}
section.login .content {
  width: 100%;
}
.chart-with-tile-summaries {
  --sidebar-content-minimal-width: 25%;
}
.dashboard-filter {
  --cluster_align-items: end;
}
.dashboard-filter :not(button) {
  flex-grow: 1;
}
.dashboard-filter button {
  width: 20%;
}
.tile-summary .title {
  color: var(--sitediver-font-color-muted);
  font-weight: var(--sitediver-font-weight-bold);
}
.tile-summary .value {
  color: var(--sitediver-font-color);
  font-size: var(--sitediver-font-size-xxlarge);
  font-weight: var(--sitediver-font-weight-bold);
}
.sessions-list {
  list-style: none;
}
.static-chart {
  position: relative;
}
.static-chart > svg {
  aspect-ratio: 2;
  width: 100%;
  container: static-chart / inline-size;
}
.static-chart .no-data {
  color: var(--text-color-muted);
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}
.static-chart .text-overlay {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.axis .tick,
.axis .tick-offset {
  stroke: var(--sitediver-color-chart-tick);
}
.axis .tick {
  stroke-dasharray: 1;
}
.axis-text > span {
  color: var(--sitediver-font-color-muted);
  font-size: var(--sitediver-font-size-small);
  left: var(--x);
  position: absolute;
  top: var(--y);
  transform: translate(var(--translate-x, 0), var(--translate-y, 0));
  white-space: nowrap;
}
.axis-text.axis-y > span {
  max-width: var(--label-width);
  overflow: hidden;
  padding-right: 1rem;
  text-overflow: ellipsis;
}
g.line > path,
g.line circle {
  stroke: var(--line-color, var(--sitediver-color-palette-1-mean));
}
.legends {
  --swatch-size: 15px;
  display: flex;
  gap: 10px;
  justify-content: end;
  margin-top: 10px;
  position: relative;
  top: calc(var(--swatch-size) * -1);
}
.legends .legend {
  align-items: center;
  display: flex;
  gap: 5px;
}
.legends .legend .color-indicator {
  background-color: var(--legend-color, var(--text-color-muted));
  height: var(--swatch-size);
  width: var(--swatch-size);
}
.legends .legend > span {
  color: var(--legend-color, var(--text-color-muted));
  font-size: var(--sitediver-font-size-xxsmall);
}
.bar {
  --bar-color: var(--sitediver-color-chart-default);
}
.bar.script {
  --bar-color: var(--sitediver-color-chart-script);
}
.bar.img {
  --bar-color: var(--sitediver-color-chart-img);
}
.bar.link {
  --bar-color: var(--sitediver-color-chart-link);
}
.bar rect {
  fill: var(--bar-color);
}
.bar-label {
  color: var(--sitediver-font-color-muted);
  font-size: var(--sitediver-font-size-small);
  left: var(--x);
  padding-left: 0.3em;
  position: absolute;
  top: var(--y);
  transform: translateY(-50%);
}
.bar-label.flipped {
  padding-left: 0;
  padding-right: 0.3em;
  transform: translate(-100%, -50%);
}
.date-range-input-container {
  display: flex;
}
.date-range-input-container > * {
  width: 100%;
}
.date-range-input-container input:focus {
  position: relative;
}
.date-range-input-container .date-range-start > input:not(:focus) {
  border-bottom-right-radius: 0;
  border-right-color: transparent;
  border-top-right-radius: 0;
}
.date-range-input-container .date-range-end > input:not(:focus) {
  border-bottom-left-radius: 0;
  border-left-color: transparent;
  border-top-left-radius: 0;
}