@charset "UTF-8";
/* Graph Colors */
/* Dimensions */
@font-face {
  font-family: "Roboto";
  src: url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-light-de0843b4b079ac4aa936a060bc727dc8.woff2") format("woff2"), url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-light-b61c0e3f4f0eb2a9b89c922f3005f0ec.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-regular-e237166b711fd1d4ac0f5684faecc85f.woff2") format("woff2"), url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-regular-5f42a5fd22c38a40bc0d552c635230a9.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-medium-402cd24a00761abd118fb0ee06ae6e4e.woff2") format("woff2"), url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-medium-721b4f8b8116d2e7ddc1414d7b89b95a.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-bold-f792bc98698c0c9c21f1bcb147009838.woff2") format("woff2"), url("https://cdn.clarify.io/clarifyapp-clarify-o2yk8hi5h-clarify-io/assets/fonts/roboto/roboto-bold-57c12ad207f465f38a28c06b369ad2b8.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
.thread-error, .thread-pane, .thread-feed-pane {
  height: calc(100vh - 41px);
  width: 35vw;
  min-width: 320px;
  max-width: 750px;
}
@media (max-width: 600px) {
  .thread-error, .thread-pane, .thread-feed-pane {
    width: 100vw;
  }
}

.resizes[data-direction=top] {
  cursor: row-resize;
  position: relative;
  height: 2px;
  transition: background-color 0.12s ease-in-out;
  background-color: var(--neutral-10);
}
.resizes[data-direction=top]:hover {
  background-color: var(--neutral-10);
}
.resizes[data-direction=top].dragging {
  background-color: var(--neutral-10);
}
.resizes[data-direction=top]::before {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 6px;
  content: "";
  z-index: 100;
}

[data-animation=flash] {
  animation: flash linear 1s;
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.time-axis-tooltip {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 24px;
  border-radius: 6px;
  position: relative;
  background: #293647;
  color: #eef1fb;
  border: 1px solid #455060;
  box-sizing: border-box;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.24);
}

.time-axis-tooltip--nib {
  width: 16px;
  height: 16px;
  color: #333;
  pointer-events: none;
  position: absolute;
}

.time-axis-tooltip--nib::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.time-axis-tooltip--nib::after {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
  z-index: -1;
}

[data-popper-placement^=top] .time-axis-tooltip--nib {
  bottom: 0;
  left: 0;
}

[data-popper-placement^=top] .time-axis-tooltip--nib::before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  transform-origin: center top;
  border-top-color: #293647;
}

[data-popper-placement^=top] .time-axis-tooltip--nib::after {
  border-top-color: #455060;
  border-width: 8px 8px 0;
  top: 17px;
  left: 0px;
}

[data-popper-placement^=bottom] .time-axis-tooltip--nib {
  top: 0;
  left: 0;
}

[data-popper-placement^=bottom] .time-axis-tooltip--nib::before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  transform-origin: center top;
  border-bottom-color: #293647;
}

[data-popper-placement^=bottom] .time-axis-tooltip--nib::after {
  border-bottom-color: #455060;
  border-width: 0 8px 8px;
  bottom: 17px;
  left: 0px;
}

.time-axis-tooltip--text {
  margin: 0;
  padding: 0;
}

.timeline-time-bar {
  display: grid;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  grid-template: auto/1fr max-content;
  background: var(--background-03);
  padding: 6px 8px 6px 12px;
  height: 44px;
}

.timeline-time-bar--actions {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.timeline-time-bar--buttons {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
}

.timeline-time-bar--text {
  line-height: 24px;
  font-size: 17px;
  font-family: Roboto;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.timeline-time-bar--buttons-expanded {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
}
@media (max-width: 700px) {
  .timeline-time-bar--buttons-expanded {
    display: none;
  }
}

.timeline-time-bar--buttons-resized {
  display: none;
}
@media (max-width: 700px) {
  .timeline-time-bar--buttons-resized {
    display: block;
  }
}

.timeline-ruler-timestamp {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 1px 11px;
  left: 0;
  position: absolute;
  bottom: 21px;
  pointer-events: none;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
}

.timeline-ruler-timestamp::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 7px 0 7px;
  border-color: transparent;
}

.timeline-ruler-timestamp::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 7px 0 7px;
  border-color: transparent;
  z-index: -1;
}

.timeline-ruler-timestamp[data-ruler-style=scrubbing] {
  background: var(--neutral-20);
  color: var(--white-100);
  border-color: #4f565e;
}
.timeline-ruler-timestamp[data-ruler-style=scrubbing]::before {
  border-top-color: var(--neutral-20);
}
.timeline-ruler-timestamp[data-ruler-style=scrubbing]::after {
  border-top-color: #4f565e;
}

.timeline-ruler-timestamp[data-ruler-style=adjusting] {
  background-color: #3b55d7;
  border-color: #ffffff;
  color: #eef1fb;
}
.timeline-ruler-timestamp[data-ruler-style=adjusting]::before {
  border-top-color: #3b55d7;
}
.timeline-ruler-timestamp[data-ruler-style=adjusting]::after {
  border-top-color: #ffffff;
}

.timeline-ruler-timestamp[data-ruler-style=highlighted],
.timeline-ruler-timestamp[data-ruler-style=pinned] {
  background-color: #3b55d7;
  border-color: #3b55d7;
  color: #ffffff;
}
.timeline-ruler-timestamp[data-ruler-style=highlighted]::before,
.timeline-ruler-timestamp[data-ruler-style=pinned]::before {
  border-top-color: #3b55d7;
}
.timeline-ruler-timestamp[data-ruler-style=highlighted]::after,
.timeline-ruler-timestamp[data-ruler-style=pinned]::after {
  border-top-color: #3b55d7;
}

/* Graph Colors */
/* Dimensions */
.tooltip-container {
  position: absolute;
  top: 0;
  margin-left: 24px;
  display: grid;
  gap: 0 6px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  justify-items: start;
  left: 0;
}

.tooltip-item {
  background-color: var(--black-80);
  color: var(--white-80);
  border-radius: 4px;
  display: flex;
  flex-shrink: 0;
  max-width: 245px;
  padding: 2px;
  height: 20px;
  pointer-events: auto;
}

.tooltip-item-method {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
}

.tooltip-item-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

.tooltip-item-name {
  margin-left: 4px;
}

.tooltip-item-value {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
}

.tooltip-item-icon {
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  position: relative;
  flex-shrink: 0;
}

.tooltip-item-icon::after {
  width: 8px;
  height: 8px;
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  background: green;
}

.tooltip-item[data-visualization-type=line-chart] .tooltip-item-icon::after {
  border-radius: 50%;
}

.tooltip-item[data-color=grey-01] .tooltip-item-icon::after {
  background-color: #dce0f6;
}

.tooltip-item[data-color=grey-02] .tooltip-item-icon::after {
  background-color: #b9bdd3;
}

.tooltip-item[data-color=grey-03] .tooltip-item-icon::after {
  background-color: #9095a9;
}

.tooltip-item[data-color=grey-04] .tooltip-item-icon::after {
  background-color: #696d81;
}

.tooltip-item[data-color=blue-01] .tooltip-item-icon::after {
  background-color: #2a61ed;
}

.tooltip-item[data-color=blue-02] .tooltip-item-icon::after {
  background-color: #5381f3;
}

.tooltip-item[data-color=blue-03] .tooltip-item-icon::after {
  background-color: #86a9f9;
}

.tooltip-item[data-color=blue-04] .tooltip-item-icon::after {
  background-color: #aec8fe;
}

.tooltip-item[data-color=cyan-01] .tooltip-item-icon::after {
  background-color: #08abbc;
}

.tooltip-item[data-color=cyan-02] .tooltip-item-icon::after {
  background-color: #3fc3d0;
}

.tooltip-item[data-color=cyan-03] .tooltip-item-icon::after {
  background-color: #75dae3;
}

.tooltip-item[data-color=cyan-04] .tooltip-item-icon::after {
  background-color: #adf2f7;
}

.tooltip-item[data-color=yellow-01] .tooltip-item-icon::after {
  background-color: #df9d1d;
}

.tooltip-item[data-color=yellow-02] .tooltip-item-icon::after {
  background-color: #e8b34c;
}

.tooltip-item[data-color=yellow-03] .tooltip-item-icon::after {
  background-color: #f2ca7e;
}

.tooltip-item[data-color=yellow-04] .tooltip-item-icon::after {
  background-color: #fbe0ac;
}

.tooltip-item[data-color=purple-01] .tooltip-item-icon::after {
  background-color: #7e36ea;
}

.tooltip-item[data-color=purple-02] .tooltip-item-icon::after {
  background-color: #975cf0;
}

.tooltip-item[data-color=purple-03] .tooltip-item-icon::after {
  background-color: #b589f7;
}

.tooltip-item[data-color=purple-04] .tooltip-item-icon::after {
  background-color: #d1b5fd;
}

.tooltip-item[data-color=purple-05] .tooltip-item-icon::after {
  background-color: #d1b5fd;
}

.tooltip-item[data-color=pink-01] .tooltip-item-icon::after {
  background-color: #d821e7;
}

.tooltip-item[data-color=pink-02] .tooltip-item-icon::after {
  background-color: #e45ae7;
}

.tooltip-item[data-color=pink-03] .tooltip-item-icon::after {
  background-color: #ef8ce7;
}

.tooltip-item[data-color=pink-04] .tooltip-item-icon::after {
  background-color: #fabce6;
}

.tooltip-item[data-color=green-01] .tooltip-item-icon::after {
  background-color: #1ddf30;
}

.tooltip-item[data-color=green-02] .tooltip-item-icon::after {
  background-color: #4fe85b;
}

.tooltip-item[data-color=green-03] .tooltip-item-icon::after {
  background-color: #82f188;
}

.tooltip-item[data-color=green-04] .tooltip-item-icon::after {
  background-color: #b6fbb5;
}

.tooltip-item[data-color=red-01] .tooltip-item-icon::after {
  background-color: #df301d;
}

.tooltip-item[data-color=red-02] .tooltip-item-icon::after {
  background-color: #e85e4e;
}

.tooltip-item[data-color=red-03] .tooltip-item-icon::after {
  background-color: #f18b80;
}

.tooltip-item[data-color=red-04] .tooltip-item-icon::after {
  background-color: #fbbbb4;
}

.tooltip-item[data-color=blue-ocean-01] .tooltip-item-icon::after {
  background-color: #1a3078;
}

.tooltip-item[data-color=blue-ocean-02] .tooltip-item-icon::after {
  background-color: #2542a1;
}

.tooltip-item[data-color=blue-ocean-03] .tooltip-item-icon::after {
  background-color: #318fee;
}

.tooltip-item[data-color=blue-ocean-04] .tooltip-item-icon::after {
  background-color: #5973de;
}

.tooltip-item[data-color=blue-ocean-05] .tooltip-item-icon::after {
  background-color: #8497e0;
}

.tooltip-item[data-color=blue-ocean-06] .tooltip-item-icon::after {
  background-color: #bac2e0;
}

.tooltip-item[data-color=blue-ocean-07] .tooltip-item-icon::after {
  background-color: #fefefe;
}

.visualization-line-chart {
  z-index: 300;
}

.visualization-line-chart-canvas-wrapper {
  position: relative;
  display: flex;
}

.visualization-line-chart-canvas {
  margin-top: -8px;
  margin-bottom: -8px;
}

.visualization-line-chart-drop-zone {
  isolation: isolate;
  position: relative;
}
@supports not (isolation: isolate) {
  .visualization-line-chart-drop-zone {
    transform: scale(1);
  }
}

.visualization-line-chart-drop-zone[data-over]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px solid #4564fd;
}

.visualization-line-chart-drop-zone[data-over-document] {
  pointer-events: auto;
}

.visualization-drop-zone {
  height: 8px;
}

.visualization-drop-zone-more {
  display: none;
}

.visualization-drop-zone[data-over-document] {
  z-index: 500;
  pointer-events: auto;
  position: relative;
}

.visualization-drop-zone[data-over-document] .visualization-drop-zone-more {
  display: block;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 0;
  right: 0;
}

.visualization-drop-zone[data-over-document]:last-child .visualization-drop-zone-more {
  bottom: -80px;
}

.visualization-drop-zone[data-over] {
  background: #00cf75;
}

.visualization-status-visualization-items {
  isolation: isolate;
  position: relative;
}
@supports not (isolation: isolate) {
  .visualization-status-visualization-items {
    transform: scale(1);
  }
}

.visualization-status-visualization-items-item {
  margin-top: 8px;
  position: relative;
  display: flex;
}
.visualization-status-visualization-items-item:first-child {
  margin-top: 0;
}
.visualization-status-visualization-items-item:last-child {
  margin-bottom: 0;
}

.visualization-status-canvas {
  margin-top: -8px;
  margin-bottom: -8px;
}

.visualization-status-visualization-tooltip {
  z-index: 100;
}

/* Graph Colors */
/* Dimensions */
.a-item-card[data-style=light] {
  --item-card-background-color: #ffffff;
  --item-card-hover-background-color: #ffffff;
  --item-card-title-color: #152233;
  --item-card-unit-color: #152233;
  --item-card-box-shadow-hover: 0px 2px 16px rgba(0, 0, 0, 0.08);
  --item-card-box-shadow-focus: 0px 2px 16px rgba(0, 0, 0, 0.08);
  --item-card-border-color: #e6e8ed;
  --item-card-border-color-hover: #c9ccd1;
  --item-card-border-color-focus: #e6e8ed;
}

.a-item-card[data-style=dark] {
  --item-card-background-color: var(--white-05);
  --item-card-hover-background-color: var(--white-10);
  --item-card-title-color: var(--neutral-100);
  --item-card-unit-color: var(--neutral-80);
  --item-card-box-shadow-hover: 0px 4px 20px rgba(0, 0, 0, 0.24);
  --item-card-box-shadow-focus: 0px 4px 20px rgba(0, 0, 0, 0.24);
  --item-card-border-color: var(--white-10);
  --item-card-border-color-hover: var(--white-10);
  --item-card-border-color-focus: var(--white-10);
}

.a-item-card {
  border-radius: 4px;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  grid-gap: 12px;
  min-height: 78px;
  padding: 12px;
  transition: box-shadow 0.12s ease-in-out;
}

.a-item-card {
  background: var(--item-card-background-color);
  border-color: var(--item-card-border-color);
  color: var(--item-card-title-color);
  position: relative;
}

.a-item-card:hover {
  background: var(--item-card-hover-background-color);
  box-shadow: var(--item-card-box-shadow-hover);
  border-color: var(--item-card-border-color-hover);
}

.a-item-card:focus-within {
  box-shadow: var(--item-card-box-shadow-focus);
  border-color: var(--item-card-border-color-focus);
}

.a-item-card-open-button-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.a-item-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 16px;
  max-height: 32px;
}

.a-item-card-name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  max-width: 288px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: normal;
  color: var(--item-card-title-color);
  flex: 1;
  flex-shrink: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.a-item-card-unit {
  max-width: 50px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--item-card-unit-color);
}

.a-item-card-metadata {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  grid-gap: 4px;
}

.a-item-card-data {
  display: flex;
  gap: 4px;
  overflow: hidden;
  position: relative;
}

.a-item-card-action {
  position: absolute;
  right: 15px;
  bottom: 12px;
}

@media (hover: none) {
  .a-item-card-action {
    opacity: 1;
  }
}
@media (hover: hover) {
  .a-item-card-action {
    opacity: 0;
  }
  .a-item-card-action:focus {
    opacity: 1;
  }
}
.a-item-card:hover .a-item-card-action,
.a-item-card-action:focus-within {
  opacity: 1;
}

.a-item-card-link {
  text-decoration: none;
}

.a-item-card-data[data-label-expand=compact] {
  flex-wrap: nowrap;
}

.a-item-card-data[data-label-expand=expand] {
  flex-wrap: wrap;
  max-height: 52px;
}

.a-item-card-missing {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  border: 1px solid #e6e8ed;
  color: #3c4756;
  padding: 27px 9px;
  height: 100px;
  transition: box-shadow 0.12s ease-in-out;
  display: grid;
  align-items: center;
  justify-content: start;
  grid-auto-flow: column;
  gap: 8px;
}

.a-item-card-missing:hover {
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
}

.a-text {
  display: grid;
  position: relative;
  align-items: center;
  justify-content: start;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: auto;
  grid-gap: 8px;
}

.a-text--text {
  margin: 0;
  text-decoration: none;
  outline: 0;
  padding: 2px 0;
  overflow: hidden;
  word-wrap: break-word;
}

.a-text[data-style=text] .a-text--text {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--a-text-style-text);
}

.a-text[data-style=link] .a-text--text {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--a-text-style-link-text);
  cursor: pointer;
}

.a-text-copy--icon {
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  width: max-content;
  display: flex;
  fill: var(--a-text-copy-icon-fill);
  cursor: pointer;
}

body:not(.using-mouse) .a-text-copy--icon:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.a-text-copy--icon::-moz-focus-inner {
  border: 0;
}

.a-text-copy--icon:hover {
  fill: var(--a-text-copy-icon-fill-hover);
}

.a-text[data-theme=light] {
  --a-text-style-text:#666666;
  --a-text-style-link-text:#4564fd;
  --a-text-copy-icon-fill:#b5b6ba;
  --a-text-copy-icon-fill-hover:#000000;
}

.a-text[data-theme=faded] {
  --a-text-style-text:#b5b6ba;
  --a-text-style-link-text:#4564fd;
  --a-text-copy-icon-fill:#b5b6ba;
  --a-text-copy-icon-fill-hover:#000000;
}

.a-tooltip {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--tooltip-text-color);
  background-color: var(--tooltip-background-color);
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  max-width: 400px;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.a-tooltip[data-style=dark] {
  --tooltip-background-color: #1f2c3d;
  --tooltip-text-color: #eef1fb;
  border: 1px solid #324052;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.12), 0px 12px 24px rgba(0, 0, 0, 0.16);
}

.a-tooltip[data-style=light] {
  --tooltip-background-color: #f5f5f5;
  --tooltip-text-color: #152233;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid #e6e8ed;
}

.admin-card {
  box-shadow: 0px 4px 16px rgba(21, 34, 51, 0.12);
  display: grid;
  row-gap: 40px;
  padding: 24px;
}

.admin-card--header {
  display: grid;
  row-gap: 8px;
}

.admin-card--status-block {
  background-color: #f2f3fc;
  max-width: 240px;
  height: 108px;
  padding: 24px;
}

.admin-card--status-block-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  row-gap: 8px;
}

.admin-card--status-block-title {
  line-height: 32px;
  font-size: 28px;
  letter-spacing: 1.0639999866px;
  font-family: Roboto;
  font-weight: 700;
  color: #2e3a5e;
  margin: 0;
}

.admin-card--status-block-description {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #495578;
  margin: 0;
}

.admin-card--status-block-description::first-letter {
  text-transform: capitalize;
}

.data-grid {
  --data-grid-background: white;
}

[data-theme-provider=dark] .data-grid,
.dialogue[data-theme-provider=light] .data-grid {
  --data-grid-background: var(--background-03);
}

.data-grid--container {
  display: inline-grid;
}

.data-grid-cell[data-size=default],
.data-grid-column[data-size=default],
.data-grid-filter-column[data-size=default] {
  width: 204px;
}

.data-grid-cell[data-size=ultra-wide],
.data-grid-column[data-size=ultra-wide],
.data-grid-filter-column[data-size=ultra-wide] {
  width: 608px;
}

.data-grid-fields-copy {
  display: grid;
  margin-top: -8px;
  height: 32px;
  grid-template-columns: minmax(0, max-content);
  grid-auto-columns: 32px;
  grid-auto-flow: column;
  gap: 2px;
  align-items: center;
}

.data-grid-fields-copy--text {
  overflow: hidden;
}

.data-grid-fields-copy--button {
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  fill: var(--neutral-40);
  cursor: pointer;
}

body:not(.using-mouse) .data-grid-fields-copy--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-fields-copy--button::-moz-focus-inner {
  border: 0;
}

.data-grid-fields-copy--button:hover {
  fill: var(--neutral-20);
}

.data-view--container {
  display: inline-grid;
  grid-template-rows: 40px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.data-view--container:has(.token-filter--container) {
  grid-template-rows: 40px max-content minmax(0, 1fr);
}

.page-layout-complex--data-view {
  padding-left: 32px;
}

.page-layout-complex--data-view .table-toolbar--container,
.page-layout-complex--data-view .token-filter--container {
  padding-left: 16px;
  padding-right: 32px;
}

.data-view {
  overflow: auto;
}

.data-view--data-grid {
  display: inline-grid;
  min-width: 100%;
}

.data-view--scrollable-area {
  display: inline-block;
  min-width: 100%;
}

.data-view[data-is-loading] .data-grid-row {
  opacity: 0.5;
}

.data-view--toolbar-actions {
  display: flex;
  gap: 8px;
}

.data-view--empty-state {
  width: calc(100vw - 272px);
  position: sticky;
  left: 0;
  margin-top: 150px;
}

.data-view--container[data-custom-toolbar] {
  grid-template-rows: 1fr;
}

.divider {
  border-top-style: solid;
  border-bottom-style: none;
  margin-top: -1px;
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

.divider[data-theme=light] {
  border-color: #f4f4f5;
}

.divider[data-theme=dark] {
  border-color: #455060;
}

.dropdown-menu-header {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
  padding: 20px 16px 12px 16px;
  list-style: none;
}

.dropdown-menu {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--neutral-10);
  box-shadow: var(--shadow-03);
  border-radius: 2px;
  overflow: auto;
  max-height: 80vh;
}

.dropdown-menu--item {
  padding: 0 12px;
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  outline: none;
  color: var(--neutral-80);
  fill: var(--neutral-80);
}

body:not(.using-mouse) .dropdown-menu--item:focus {
  background: var(--dropdown-menu-hover-background);
}

body:not(.using-mouse) .dropdown-menu--item:focus .dropdown-menu-item--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
}

.dropdown-menu--item:not([aria-disabled]):hover {
  background: var(--dropdown-menu-hover-background);
}

.dropdown-menu--item[aria-disabled] {
  color: var(--neutral-50);
  fill: var(--neutral-50);
  cursor: not-allowed;
}

.dropdown-menu--item:not([aria-disabled])[data-intent=danger] {
  color: var(--system-danger-red-base);
  fill: var(--system-danger-red-base);
}

.dropdown-menu--item:first-child {
  margin-top: 4px;
}

.dropdown-menu--item:last-child {
  margin-bottom: 4px;
}

.dropdown-menu--item[data-layout=description] {
  padding: 5px 12px;
  gap: 2px 8px;
  grid-template: "header" "text" auto/1fr;
}

.dropdown-menu--item[data-layout=description-icon] {
  padding: 5px 12px;
  gap: 2px 8px;
  grid-template: "icon header" "icon text" auto/max-content 1fr;
}

.dropdown-menu-description--icon {
  grid-area: icon;
}

.dropdown-menu--item[data-layout=text] {
  grid-template-columns: 1fr;
}

.dropdown-menu--item[data-layout=icon] {
  grid-template-columns: max-content 1fr;
  gap: 8px;
}

.dropdown-menu--item[data-layout=icon-option] {
  grid-template-columns: max-content 1fr 24px;
}

.dropdown-menu--item[data-layout=header-text-value] {
  grid-template: "header value" "text value" auto/1fr 20px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.dropdown-menu--item[data-layout=option] {
  grid-template-columns: 1fr 24px;
}

.dropdown-menu--item[data-layout=icon-option-value] {
  padding: 5px 12px;
  gap: 2px 8px;
  grid-template: "icon header value" "icon text value" auto/max-content 1fr 20px;
}

.dropdown-menu--item[data-layout=icon-option-value] .dropdown-menu-item--checkmark {
  grid-area: value;
}

.dropdown-menu--item[data-layout=header-text-value] .dropdown-menu-item--checkmark {
  grid-area: value;
}

.dropdown-menu--separator {
  margin: -1px 0 0 0;
  border: none;
  border-bottom: 1px solid var(--neutral-20);
}

.dropdown-menu-item--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 0;
  margin-right: auto;
}

.dropdown-menu-item--text[data-text-style] {
  color: var(--neutral-60);
  grid-area: text;
  padding: 0;
}

.dropdown-menu-description--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-90);
  margin: 0;
  padding: 0;
  grid-area: header;
}

.dropdown-menu-description--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  grid-area: text;
  margin: 0;
}

.dropdown-menu-item--checkmark {
  align-self: center;
}

.dropdown-menu-item--icon {
  align-self: center;
}

.dropdown-menu-description--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  margin: 0;
}

.dropdown-menu-description--description {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
}

.dropdown-menu[data-theme-provider=dark] {
  --dropdown-menu-hover-background: var(--white-05);
}

.dropdown-menu[data-theme-provider=light] {
  --dropdown-menu-hover-background: var(--black-05);
}

.error-popover {
  width: 320px !important;
  gap: 16px !important;
}

.error-popover--content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  display: grid;
  grid-auto-flow: row;
  gap: 16px;
}

.error-popover--content p {
  margin: 0;
}

.error-popover--content ul {
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  padding: 0 0 0 20px;
  margin: 0;
}

.error-popover--footer {
  justify-content: end;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  gap: 8px;
}

.form-fieldset {
  display: grid;
  row-gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}

.form-fieldset--grid {
  display: grid;
}

.header-contextual {
  display: flex;
  align-items: center;
}

.header-contextual--tooltip {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  height: 24px;
  flex: 0;
  cursor: default;
}

body:not(.using-mouse) .header-contextual--tooltip:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.header-contextual--tooltip::-moz-focus-inner {
  border: 0;
}

.header-contextual--tooltip:disabled {
  cursor: not-allowed;
}

.header-contextual--tooltip-icon {
  fill: var(--header-tooltip-icon-fill);
}

.header-contextual--tooltip-icon:hover {
  fill: var(--header-tooltip-icon-fill-hover);
}

.header-contextual--icon {
  fill: var(--header-icon-fill);
}

.header-contextual--title,
.header-contextual--tooltip,
.header-contextual--tooltip-icon {
  margin-left: 6px;
}

.header-contextual--title:first-child,
.header-contextual--tooltip:first-child,
.header-contextual--tooltip-icon:first-child {
  margin-left: 0;
}

.header-contextual--title:last-child,
.header-contextual--tooltip:last-child,
.header-contextual--tooltip-icon:last-child {
  margin-right: 0;
}

.header-contextual--title {
  color: var(--header-text-color);
  margin: 0;
  text-align: left;
  padding: 2px 0;
  flex-grow: 1;
}

.header-contextual[data-theme=light] .header-contextual--title {
  line-height: 20px;
  font-size: 17px;
  letter-spacing: 0.68px;
  font-family: Roboto;
  font-weight: 700;
}

.header-contextual[data-theme=light-medium] .header-contextual--title {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 700;
}

.header-contextual[data-theme=light] {
  --header-text-color: #000000;
  --header-tooltip-icon-fill: #b5b6ba;
  --header-tooltip-icon-fill-hover: black;
  --header-icon-fill: #000000;
}

.header-contextual[data-theme=light-medium] {
  --header-text-color: #3c4756;
  --header-tooltip-icon-fill: #b5b6ba;
  --header-tooltip-icon-fill-hover: black;
  --header-icon-fill: #3c4756;
  padding: 2px 0;
}

.input-search {
  position: relative;
  display: grid;
  grid-template: "icon . clear" auto/24px 1fr 24px;
  gap: 8px;
  padding: 0 12px;
  align-content: center;
  isolation: isolate;
}

.input-search[data-size=medium] {
  height: 40px;
}

.input-search[data-size=large] {
  height: 48px;
}

.input-search {
  box-shadow: var(--input-text-inset);
  background-color: var(--input-text-background);
  fill: var(--input-text-color);
}

.input-search:hover:not(:focus-within):not(:disabled) {
  box-shadow: var(--input-text-inset-hover);
  background-color: var(--input-text-background-hover);
}

.input-search:focus-within:not([readonly]) {
  box-shadow: var(--input-text-inset-focus);
  background-color: var(--input-text-background-focus);
}

.input-search:disabled {
  background-color: var(--input-text-background-disabled);
  box-shadow: var(--input-text-inset-disabled);
  cursor: not-allowed;
}

.input-search--input {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  box-shadow: inset 0 0 0 1px #e6e8ed;
  background: transparent;
  z-index: 1;
  border: none;
  outline: none;
  color: var(--input-text-color);
  position: absolute;
  padding: 0 44px 0 44px;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.input-search--input::placeholder {
  color: var(--input-text-color-placeholder);
}

.input-search--input:-ms-input-placeholder {
  color: var(--input-text-color-placeholder);
}

.input-search--input[data-validity=invalid] {
  box-shadow: var(--input-text-inset-invalid);
}

.input-search--input[data-validity=valid] {
  box-shadow: var(--input-text-inset-success);
}

.input-search--input:placeholder-shown + .input-search--clear {
  display: none;
}

.input-search--icon {
  grid-area: icon;
  z-index: 2;
  pointer-events: none;
  fill: #152233;
}

.input-search--clear {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  grid-area: clear;
  z-index: 2;
  display: flex;
  fill: #b5b6ba;
}

body:not(.using-mouse) .input-search--clear:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.input-search--clear::-moz-focus-inner {
  border: 0;
}

.input-search--clear:hover, .input-search--clear:active {
  fill: #000000;
}

.input-search[data-style=light] {
  --input-text-color: #383a3d;
  --input-text-color-placeholder: #b5b6ba;
  --input-text-background: transparent;
  --input-text-background-hover: transparent;
  --input-text-background-focus: transparent;
  --input-text-background-disabled: #f5f5f5;
  --input-text-inset: inset 0 0 0 1px #d4d4d4;
  --input-text-inset-hover: inset 0 0 0 1px #939399;
  --input-text-inset-focus: inset 0 0 0 2px #4564fd;
  --input-text-inset-disabled: inset 0 0 0 1px #e2e4ee;
  --input-text-inset-invalid: inset 0 0 0 1px #e75f6d;
  --input-text-inset-success: inset 0 0 0 1px #4564fd;
}

.input-search[data-style=invisible] {
  --input-text-color: #152233;
  --input-text-color-placeholder: #bcbfc8;
  --input-text-background: transparent;
  --input-text-background-hover: white;
  --input-text-background-focus: white;
  --input-text-background-disabled: #f5f5f5;
  --input-text-inset: none;
  --input-text-inset-hover: none;
  --input-text-inset-focus: 0px 2px 16px rgba(0, 0, 0, 0.08);
  --input-text-inset-disabled: inset 0 0 0 1px #e2e4ee;
  --input-text-inset-invalid: inset 0 0 0 1px #e75f6d;
  --input-text-inset-success: inset 0 0 0 1px #4564fd;
}

.label-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.label--title {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
  text-align: left;
}

.label-action--button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}

body:not(.using-mouse) .label-action--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.label-action--button::-moz-focus-inner {
  border: 0;
}

.label-action--tooltip {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  cursor: default;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}

body:not(.using-mouse) .label-action--tooltip:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.label-action--tooltip::-moz-focus-inner {
  border: 0;
}

.label-action--container {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  gap: 2px;
}

.label-action--icon {
  fill: var(--neutral-60);
}

.label-action--icon:hover {
  fill: var(--black-100);
}

.label-action--icon:last-child:not(:only-child) {
  margin-left: 2px;
}

.metadata-container {
  display: grid;
  row-gap: 24px;
}

.metadata-duration--grid {
  grid-template-columns: 156px 1fr;
  align-items: center;
  column-gap: 4px;
  row-gap: 4px;
}

.metadata-duration--text {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #666666;
  margin: 0;
  padding: 11px 12px 9px 12px;
}

.metadata-textfield--error {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #c4515d;
  margin: 0;
}

.metadata-fieldsets--paragraph {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #939399;
  padding: 0;
  margin: 0;
}

.metadata-fieldsets--paragraph ul {
  margin: 0;
  padding-left: 22px;
}

.duration-fields--text {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #666666;
  margin: 0;
}

.m-page-layout-complex {
  padding: 0;
  display: grid;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
  grid-template: "header" max-content "container" 1fr;
}

.m-page-layout-complex--header {
  background-color: #f5f5f5;
  grid-area: header;
  padding: 24px 32px 20px 32px;
}

.m-page-layout-complex--container {
  grid-area: container;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}

.m-page-layout-header--container {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}

.m-page-layout-header--headline-content {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  gap: 8px;
}

.m-page-layout-header--headline {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-column-gap: 8px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

.m-page-layout-header--icon[data-has-breadcrumb=true] {
  fill: #4564fd;
}

.m-page-layout-header--title {
  line-height: 24px;
  font-size: 20px;
  letter-spacing: 0.6px;
  font-family: Roboto;
  font-weight: 700;
  color: #152233;
  margin: 0;
  display: inline-flex;
}

.m-page-layout-header--title-regular {
  line-height: 24px;
  font-size: 20px;
  letter-spacing: 0.6px;
  font-family: Roboto;
  font-weight: 400;
}

a.m-page-layout-header--title {
  text-decoration: none;
  color: #4564fd;
}

a.m-page-layout-header--title:hover {
  text-decoration: underline;
}

.m-page-layout-header--breadcrumb {
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
}

.m-page-layout-header--breadcrumb-entry {
  position: relative;
  list-style: none;
  display: inline-flex;
}

.m-page-layout-header--breadcrumb-joiner {
  align-self: center;
  fill: #bcbfc8;
}

.m-page-layout-header--actions {
  margin-left: 10px;
}

.m-page-layout-header--headline-description {
  line-height: 24px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #3c4756;
  margin: 0;
}

.m-page-layout-header--content {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  gap: 4px;
}

.m-page-layout-header--content-navigation {
  gap: 8px 24px;
  flex-wrap: wrap;
  display: flex;
}

.m-page-layout {
  overflow: auto;
  isolation: isolate;
}

.m-page-layout-simple-header--sentinel:not([data-in-view]) + .m-page-layout-simple-header--sticky::before {
  opacity: 1;
}

.m-page-layout-simple-header--sticky {
  position: sticky;
  padding: 24px 32px;
  background: #f5f5f5;
  top: 0;
  margin-bottom: 16px;
  z-index: 1;
}

.m-page-layout-simple-header--sticky::before {
  position: absolute;
  transition: opacity 0.12s ease-in-out;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.12);
  opacity: 0;
}

.m-page-layout-content-container {
  margin-bottom: 24px;
  padding: 0 32px;
}

.popover-layout {
  background: white;
  display: grid;
  align-items: stretch;
  grid-auto-flow: row;
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.11);
  grid-gap: 0;
  max-height: 456px;
  width: 264px;
  overflow: auto;
}

.popover-layout--list {
  isolation: isolate;
  z-index: 1;
  padding: 0 12px;
  margin: 0;
}

@supports (-moz-user-select: none) {
  .popover-layout--list {
    padding-bottom: 70px;
  }
}
.popover-layout--header {
  position: sticky;
  display: grid;
  grid-auto-flow: row;
  gap: 12px;
  top: 0;
  margin-bottom: 12px;
  background: white;
  border-bottom: 1px solid #e6e8ed;
  z-index: 2;
  padding: 12px;
}

.popover-layout--footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px;
  background: white;
  border-top: 1px solid #e6e8ed;
  margin-top: 12px;
}

.popover-layout-item {
  padding: 4px 12px 4px 4px;
  margin: 0;
  list-style: none;
  display: flex;
}

.popover-layout-item--title {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  word-break: break-word;
  padding-left: 8px;
}

.popover-layout-item--title[data-checked] {
  font-weight: 700;
}

.side-pane {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(21, 34, 51, 0.12);
  clip-path: inset(-12px 0 0 -16px);
  width: 380px;
}

.side-pane--shadowless {
  clip-path: inset(-12px 0 0 -1px);
  box-shadow: -1px 0 0 0 #e2e4ee, 0px 4px 16px rgba(21, 34, 51, 0.12);
  margin-left: 1px;
}

.side-pane-header--sticky {
  position: relative;
  flex-shrink: 0;
}

.side-pane-header--sticky::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #e2e4ee;
}

.side-pane[data-header-border=hidden] .side-pane-header--sticky::before {
  display: none;
}

.side-pane-content--container {
  overflow: auto;
  display: grid;
  flex: 1;
  align-items: start;
}

.side-pane-menu-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-content: start;
  flex-shrink: 0;
  padding: 12px;
}

.side-pane-header-actions--grouped {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.side-pane-header-actions--grouped > *:not(:last-child) {
  margin-right: 8px;
}

.side-pane-header-content {
  padding: 0 24px;
  display: grid;
  grid-auto-flow: row;
  gap: 16px;
}

.side-pane--menu {
  margin-top: 8px;
}

.side-pane-content {
  display: grid;
  row-gap: 24px;
  padding: 24px;
}

.side-pane-content .a-text--text {
  overflow: hidden;
  word-wrap: break-word;
  padding: 0;
}

.admin-side-pane-header {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px;
  margin-top: 8px;
}

.admin-side-pane-header--heading {
  line-height: 24px;
  font-size: 22px;
  letter-spacing: 0.7040000105px;
  font-family: Roboto;
  font-weight: 700;
  margin: 0;
  padding: 6px 0;
}

.status-message {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #a2a9b3;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  background-color: #f0f0f0;
  padding: 10px;
  grid-template-columns: 18px 1fr;
}

.status-message[data-validity=unvalidated] {
  fill: #bcbfc8;
}

.status-message[data-validity=validated] {
  fill: #3b55d7;
}

.status-message[data-validity=invalid] {
  fill: #3c4756;
}

.status-message[data-validity=info] {
  fill: #152233;
}

.text-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  outline: none;
  position: relative;
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--text-button-color);
  fill: var(--text-button-fill-color);
  display: flex;
  align-items: center;
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body:not(.using-mouse) .text-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.text-button::-moz-focus-inner {
  border: 0;
}

.text-button:disabled {
  color: var(--text-button-disabled-color);
  cursor: not-allowed;
}

.text-button:hover, .text-button:active {
  color: var(--text-button-color-active);
}

.text-button[data-size=normal] {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
}

.text-button[data-size=small] {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  padding: 8px;
}

.text-button[data-content-size=content] {
  width: max-content;
}

.text-button[data-style=primary] {
  --text-button-color: #4564fd;
  --text-button-color-active: #3b55d7;
  --text-button-fill-color: #4564fd;
  --text-button-disabled-color: #b5b6ba;
}

.text-button[data-style=secondary] {
  --text-button-color: #b5b6ba;
  --text-button-color-active: #939399;
  --text-button-fill-color: #b5b6ba;
  --text-button-disabled-color: #d4d4d4;
}

.text-button-link[disabled] {
  color: #d4d4d4;
  pointer-events: none;
}

.text-button-icon {
  display: flex;
}

.text-button-text {
  padding: 2px;
}

.text-tag {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  background: var(--text-tag-background-color);
  color: var(--text-tag-color);
  text-decoration: none;
  padding: 0 8px;
  width: max-content;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 4px;
  grid-template-rows: 24px;
  grid-template-columns: minmax(0, max-content);
}

.text-tag--icon {
  fill: var(--text-tag-icon-fill);
  width: 24px;
  height: 24px;
}

.text-tag[data-style=gray] {
  --text-tag-background-color:#f2f3fc;
  --text-tag-color:#8088a1;
  --text-tag-icon-fill:#8088a1;
}

.text-tag[data-style=green] {
  --text-tag-background-color:#ebfaf1;
  --text-tag-color:#228561;
  --text-tag-icon-fill:#228561;
}

.text-tag[data-style=blue] {
  --text-tag-background-color:#dae1fe;
  --text-tag-color:#324ac2;
  --text-tag-icon-fill:#324ac2;
}

.text-tag[data-style=red] {
  --text-tag-background-color:#fdeff0;
  --text-tag-color:#c4515d;
  --text-tag-icon-fill:#c4515d;
}

.token-filter {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
  flex-direction: row;
  flex-wrap: wrap;
}

.token-filter-string-popover {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
}

.token-filter-string-popover--buttons {
  display: grid;
  gap: 4px;
  justify-content: end;
  grid-auto-flow: column;
}

.popover.token-filter-popover {
  max-height: 236px;
  padding: 4px 0 0 0;
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 0;
}

.token-filter-popover--list {
  border-top: 1px solid var(--white-10);
  overflow: auto;
  padding: 0;
  margin: 0;
}

.token-filter-popover--list .dropdown-item:last-child {
  margin-bottom: 2px;
}

.token-filter-popover--footer {
  border-top: 1px solid var(--white-10);
  padding: 8px 12px;
  display: grid;
  justify-content: end;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

.token-filter--container {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  grid-template-columns: 1fr;
  grid-auto-columns: max-content;
}

.token-filter--aux {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  grid-auto-columns: max-content;
  align-items: center;
}

.token-filter--aux-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
}

.wizard-dialog {
  max-width: 592px !important;
  height: 464px !important;
}

.wizard-dialog .dialogue--main-content {
  padding-bottom: 0 !important;
}

.wizard-dialog--content {
  isolation: isolate;
  display: grid;
  gap: 0 24px;
  grid-template: "progress step-content" 1fr "toolbar toolbar" auto/200px 1fr;
}

.wizard-dialog-step--content {
  grid-area: step-content;
  z-index: 1;
}

@supports (-moz-appearance: none) {
  .wizard-dialog-step--content {
    padding-bottom: 80px;
  }
}
.wizard-dialog-step--toolbar {
  grid-area: toolbar;
  background-color: var(--background-03);
  padding: 24px 0 16px 0;
  display: grid;
  gap: 12px;
  grid-auto-flow: column;
  justify-content: end;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.wizard-dialog--progress {
  grid-area: progress;
  z-index: 1;
  display: grid;
  grid-auto-flow: row;
  gap: 12px;
  justify-items: start;
  align-content: start;
}

@media (max-width: 480px) {
  .wizard-dialog--progress {
    display: none;
  }
  .wizard-dialog--content {
    grid-template: "step-content" 1fr "toolbar" auto/1fr;
  }
}
.wizard-dialog-progress--step {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  outline: none;
  position: relative;
  color: #b5b6ba;
  list-style: none;
  fill: #4564fd;
}

body:not(.using-mouse) .wizard-dialog-progress--step:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.wizard-dialog-progress--step::-moz-focus-inner {
  border: 0;
}

.wizard-dialog-progress--step:not([disabled]) {
  cursor: pointer;
}

.wizard-dialog-progress--step-content {
  display: grid;
  grid-template: "icon title" auto/16px 1fr;
  align-items: center;
  gap: 12px;
}

.wizard-dialog-progress--step[data-current] {
  color: #000000;
}

.wizard-dialog-progress-step--icon {
  grid-area: icon;
}

.wizard-dialog-progress-step--title {
  grid-area: title;
}

.wizard-dialog-text-content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
  display: grid;
  grid-auto-rows: max-content;
  gap: 12px;
}

.wizard-dialog-text-content h2 {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.wizard-dialog-text-content p {
  margin: 0;
  padding: 0;
}

.wizard-dialog-text-content a {
  color: var(--system-action-blue-base);
  text-decoration: none;
}

.wizard-dialog-text-content .faded {
  color: var(--neutral-50);
}

.data-grid {
  --data-grid-background: white;
}

[data-theme-provider=dark] .data-grid,
.dialogue[data-theme-provider=light] .data-grid {
  --data-grid-background: var(--background-03);
}

.data-grid--container {
  display: inline-grid;
}

.data-grid-cell[data-size=default],
.data-grid-column[data-size=default],
.data-grid-filter-column[data-size=default] {
  width: 204px;
}

.data-grid-cell[data-size=ultra-wide],
.data-grid-column[data-size=ultra-wide],
.data-grid-filter-column[data-size=ultra-wide] {
  width: 608px;
}

.data-grid-fields-copy {
  display: grid;
  margin-top: -8px;
  height: 32px;
  grid-template-columns: minmax(0, max-content);
  grid-auto-columns: 32px;
  grid-auto-flow: column;
  gap: 2px;
  align-items: center;
}

.data-grid-fields-copy--text {
  overflow: hidden;
}

.data-grid-fields-copy--button {
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  fill: var(--neutral-40);
  cursor: pointer;
}

body:not(.using-mouse) .data-grid-fields-copy--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-fields-copy--button::-moz-focus-inner {
  border: 0;
}

.data-grid-fields-copy--button:hover {
  fill: var(--neutral-20);
}

.data-grid-cell {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  outline: none;
  position: relative;
  color: var(--neutral-80);
  background: var(--data-grid-background);
  padding: 16px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 180px;
  flex-shrink: 0;
  height: 48px;
  text-decoration: none;
}

body:not(.using-mouse) .data-grid-cell:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-cell::-moz-focus-inner {
  border: 0;
}

.data-grid-cell[data-style=bold] {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--neutral-80);
}

.data-grid-cell[data-type=selected] {
  position: sticky;
  z-index: 90;
  display: flex;
  padding: 16px;
  width: 48px;
  left: 0;
}

.data-grid--signal-published-state {
  margin-top: -4px;
}

.data-grid--boolean-badge {
  margin-top: -4px;
}

.data-grid--route-link {
  margin-top: -4px !important;
  display: inline-block;
  text-decoration: none;
}

.data-grid--item-visibility-state {
  margin-top: -4px;
}

.data-grid-labels--list {
  margin-top: -6px;
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  justify-items: start;
  grid-auto-columns: max-content;
}

.data-grid {
  --data-grid-background: white;
}

[data-theme-provider=dark] .data-grid,
.dialogue[data-theme-provider=light] .data-grid {
  --data-grid-background: var(--background-03);
}

.data-grid--container {
  display: inline-grid;
}

.data-grid-cell[data-size=default],
.data-grid-column[data-size=default],
.data-grid-filter-column[data-size=default] {
  width: 204px;
}

.data-grid-cell[data-size=ultra-wide],
.data-grid-column[data-size=ultra-wide],
.data-grid-filter-column[data-size=ultra-wide] {
  width: 608px;
}

.data-grid-fields-copy {
  display: grid;
  margin-top: -8px;
  height: 32px;
  grid-template-columns: minmax(0, max-content);
  grid-auto-columns: 32px;
  grid-auto-flow: column;
  gap: 2px;
  align-items: center;
}

.data-grid-fields-copy--text {
  overflow: hidden;
}

.data-grid-fields-copy--button {
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  fill: var(--neutral-40);
  cursor: pointer;
}

body:not(.using-mouse) .data-grid-fields-copy--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-fields-copy--button::-moz-focus-inner {
  border: 0;
}

.data-grid-fields-copy--button:hover {
  fill: var(--neutral-20);
}

.data-grid-column {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  width: 180px;
  flex-shrink: 0;
}

.data-grid-column--empty {
  width: 48px;
  position: sticky !important;
  background: var(--data-grid-background);
  z-index: 100;
  left: 0;
  flex-shrink: 0;
}

.data-grid--columns[aria-rowindex="1"] .data-grid-column--empty {
  outline: none;
  position: relative;
}

body:not(.using-mouse) .data-grid--columns[aria-rowindex="1"] .data-grid-column--empty:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid--columns[aria-rowindex="1"] .data-grid-column--empty::-moz-focus-inner {
  border: 0;
}

.data-grid--columns[aria-rowindex="2"] .data-grid-column--empty {
  outline: none;
  position: relative;
}

body:not(.using-mouse) .data-grid--columns[aria-rowindex="2"] .data-grid-column--empty:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 3px;
  right: 3px;
  top: -7px;
  bottom: -7px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid--columns[aria-rowindex="2"] .data-grid-column--empty::-moz-focus-inner {
  border: 0;
}

.data-grid-column--title {
  outline: none;
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-80);
  height: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

body:not(.using-mouse) .data-grid-column--title:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-column--title::-moz-focus-inner {
  border: 0;
}

.data-grid-column--sort-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-80);
  fill: var(--neutral-40);
  cursor: pointer;
}

body:not(.using-mouse) .data-grid-column--sort-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-column--sort-button::-moz-focus-inner {
  border: 0;
}

.data-grid-column-sort-button--container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.data-grid-column--title[aria-sort]:not([aria-sort=none]) .data-grid-column--sort-button {
  color: var(--neutral-100);
  fill: var(--neutral-80);
}

.data-grid-column--title[aria-sort=descending] .data-grid-column--change-sort {
  transform: rotate(180deg);
}

.data-grid-column--change-sort {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: flex;
}

.data-grid-column--resize {
  width: 4px;
  cursor: col-resize;
  position: relative;
}

.data-grid-column--resize::after {
  position: absolute;
  top: -11px;
  right: -12px;
  bottom: -55px;
  width: 4px;
  box-shadow: inset -1px 0 0 0px var(--neutral-10);
  content: "";
  z-index: 1000;
}

.data-grid-column--resize:active::after,
.data-grid-column--resize:hover::after {
  box-shadow: inset -1px 0 0 0px var(--system-action-blue-base);
}

.data-grid-column--resize::before {
  content: "";
  position: absolute;
  top: -11px;
  right: -16px;
  bottom: -55px;
  width: 8px;
  z-index: 1000;
}

.data-grid-filter--empty-state {
  height: 160px !important;
}

.data-grid-filter--footer {
  display: flex;
  justify-content: flex-end;
}

.data-grid-filter--not-set {
  margin-top: -4px;
  margin-bottom: 8px;
}

.data-grid-filter-item--children {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

.data-grid-filter-column {
  outline: none;
  position: relative;
  width: 180px;
  flex-shrink: 0;
  padding: 0 12px 0 12px;
  display: grid;
  grid-gap: 0;
  grid-template-rows: 32px;
  grid-template-columns: minmax(0, 1fr) 24px;
  outline: none;
  position: relative;
}

body:not(.using-mouse) .data-grid-filter-column:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 5px;
  right: 5px;
  top: -7px;
  bottom: -7px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-filter-column::-moz-focus-inner {
  border: 0;
}

.data-grid-column--filter {
  height: 32px;
}

.data-grid-filter-column--clear-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  padding: 4px;
  fill: var(--neutral-40);
  align-self: center;
  width: 24px;
  height: 24px;
}

body:not(.using-mouse) .data-grid-filter-column--clear-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-filter-column--clear-button::-moz-focus-inner {
  border: 0;
}

.data-grid-filter-column--clear-button:hover, .data-grid-filter-column--clear-button:active {
  fill: var(--neutral-20);
}

.data-grid {
  --data-grid-background: white;
}

[data-theme-provider=dark] .data-grid,
.dialogue[data-theme-provider=light] .data-grid {
  --data-grid-background: var(--background-03);
}

.data-grid--container {
  display: inline-grid;
}

.data-grid-cell[data-size=default],
.data-grid-column[data-size=default],
.data-grid-filter-column[data-size=default] {
  width: 204px;
}

.data-grid-cell[data-size=ultra-wide],
.data-grid-column[data-size=ultra-wide],
.data-grid-filter-column[data-size=ultra-wide] {
  width: 608px;
}

.data-grid-fields-copy {
  display: grid;
  margin-top: -8px;
  height: 32px;
  grid-template-columns: minmax(0, max-content);
  grid-auto-columns: 32px;
  grid-auto-flow: column;
  gap: 2px;
  align-items: center;
}

.data-grid-fields-copy--text {
  overflow: hidden;
}

.data-grid-fields-copy--button {
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  fill: var(--neutral-40);
  cursor: pointer;
}

body:not(.using-mouse) .data-grid-fields-copy--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.data-grid-fields-copy--button::-moz-focus-inner {
  border: 0;
}

.data-grid-fields-copy--button:hover {
  fill: var(--neutral-20);
}

.data-grid--columns {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--data-grid-background);
}

.data-grid--columns[aria-rowindex="2"] {
  padding-bottom: 12px;
}

.data-grid--header {
  display: grid;
  align-items: stretch;
  position: sticky;
  top: 0;
  background: var(--data-grid-background);
  z-index: 100;
}

.data-grid--header::after,
.data-grid--header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--neutral-10);
  height: 1px;
  z-index: 110;
}

.data-grid--header::after {
  top: 0;
}

.data-grid--header::before {
  bottom: 0;
}

.data-view--container[data-custom-toolbar] .data-grid--header::after {
  background: none;
}

.data-grid-row {
  height: 48px;
  display: inline-flex;
  flex-direction: row;
}

.data-grid-row[aria-selected] .data-grid-cell {
  background: var(--background-04);
}

.data-grid-row:not([aria-selected]):hover .data-grid-cell, .data-grid-row:not([aria-selected])[data-is-active] .data-grid-cell {
  background: var(--background-04);
}

.table-toolbar--container {
  display: grid;
  grid-template: "checkbox main column" auto/auto 1fr auto;
  align-items: center;
  align-content: center;
  padding: 4px 0 4px 0;
  gap: 12px;
}

.table-toolbar--actions {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  gap: 4px;
}

.table-toolbar-actions--column {
  grid-area: column;
}

.table-toolbar-actions--main {
  grid-area: main;
}

.table-toolbar--checkbox-container {
  display: flex;
  align-items: center;
  grid-area: checkbox;
}

.table-toolbar--checkbox-label {
  line-height: 20px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--neutral-80);
  margin-left: 12px;
  padding: 6px 0;
}

.table-toolbar--selection {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--neutral-80);
}

.column-selector--header {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: #7e7e7e;
  margin: 0;
}

.column-selector--footer {
  display: flex;
  justify-content: space-between;
}

.data-view--loading {
  position: sticky;
  left: 0;
  width: calc(100vw - 272px);
  display: grid;
  padding: 16px 0 6px 0;
}

.data-view--non-ideal-state-inline {
  display: grid;
  position: sticky;
  left: 0;
  padding: 16px 0 6px 0;
  max-width: 420px;
}

.items-add--data-view {
  isolation: isolate;
}

.items-add--data-view .table-toolbar--container {
  padding-top: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.items-add--data-view .token-filter--container {
  padding-left: 16px;
  padding-right: 16px;
}

.items-add--dialog-error .dialog--content {
  align-items: center;
}

.items-add--dialog {
  max-width: 80vw !important;
  height: 80vw !important;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-template-rows: max-content 1fr;
  grid-auto-columns: max-content;
}

.items-add--dialog .dialogue--main-content {
  display: inline-grid;
  overflow: hidden;
  padding: 0;
}

.items-add--dialog .dialog--scrollable-container {
  overflow: hidden;
}

.items-add--dialog .dialog--content-container {
  overflow: hidden;
}

.items-add--footer {
  flex-grow: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  gap: 8px;
}

.items-add--footer--button-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 8px;
}

.items-add--selected-items {
  position: absolute;
  top: 57px;
  right: 0;
  bottom: 82px;
  width: 360px;
  border-top: 1px solid var(--neutral-40);
  border-bottom: 1px solid var(--neutral-40);
  border-left: 1px solid var(--neutral-40);
  background: var(--background-03);
  padding: 16px;
  overflow: auto;
}

.items-add--selected-items-list {
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  margin-top: 16px;
}

.items-add--selected-items-item {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: 8px;
}

.items-add--selected-items--empty {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  margin: 0;
  padding: 10px 0;
}

.button-group {
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

.button-group[data-type=default] {
  --border-style: 1px solid var(--opacity-medium);
}

.button-group[data-type=default] .button-group-button--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.button-group-select, .button-group-button, .button-group-icon-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  outline: none;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
  color: var(--neutral-secondary);
  fill: var(--neutral-secondary);
  border-top: var(--border-style);
  border-bottom: var(--border-style);
  position: relative;
}

body:not(.using-mouse) .button-group-select:focus::after, body:not(.using-mouse) .button-group-button:focus::after, body:not(.using-mouse) .button-group-icon-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border: 1px solid #4564fd;
  border-radius: inherit;
}

.button-group-select::-moz-focus-inner, .button-group-button::-moz-focus-inner, .button-group-icon-button::-moz-focus-inner {
  border: 0;
}

.button-group-select:not(:last-child), .button-group-button:not(:last-child), .button-group-icon-button:not(:last-child) {
  border-right: var(--border-style);
}

.button-group-select:first-child, .button-group-button:first-child, .button-group-icon-button:first-child {
  border-left: var(--border-style);
  border-radius: 4px 0 0 4px;
}

.button-group-select:last-child, .button-group-button:last-child, .button-group-icon-button:last-child {
  border-right: var(--border-style);
  border-radius: 0 4px 4px 0;
}

.button-group-select:only-child, .button-group-button:only-child, .button-group-icon-button:only-child {
  border-left: var(--border-style);
  border-right: var(--border-style);
  border-radius: 4px;
}

.button-group-select:disabled, .button-group-button:disabled, .button-group-icon-button:disabled {
  color: var(--neutral-quaternary);
  fill: var(--neutral-quaternary);
  cursor: not-allowed;
}

.button-group-icon-button {
  padding: 7px;
}

.button-group-button {
  padding: 5px 7px;
}

.button-group-button[data-icon-position=trailing] .button-group-button--icon {
  grid-column-start: 2;
}

.button-group-select {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.button-group-select--select {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  outline: none;
  appearance: none;
  margin: 0;
  padding: 6px 24px 6px 8px;
  border: none;
  color: var(--neutral-100);
  background: transparent;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-group-select--select[disabled] {
  color: var(--neutral-60);
}

.button-group-select--icon {
  position: absolute;
  top: 8px;
  right: 8px;
}

.button-tabs {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  justify-content: start;
  grid-auto-columns: max-content;
  overflow: auto;
}

.button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  background: var(--button-background);
  border-radius: 4px;
  color: var(--button-color);
  box-shadow: var(--button-inset);
  text-decoration: none;
  cursor: pointer;
}

body:not(.using-mouse) .button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.button::-moz-focus-inner {
  border: 0;
}

.button[data-content-size=content] {
  width: max-content;
}

.button:not([disabled]):hover {
  background: var(--button-background-hover);
  color: var(--button-color-hover);
  box-shadow: var(--button-inset-hover);
  fill: var(--button-fill-icon-hover);
}

.button:not([disabled]):active {
  background: var(--button-background-active);
  box-shadow: var(--button-inset-active);
  color: var(--button-color-active);
}

body:not(.using-mouse) .button:not([disabled]):focus {
  background: var(--button-background-focus);
  box-shadow: var(--button-inset-focus);
  color: var(--button-color-focus);
}

.button[disabled]:not([aria-busy]) {
  background: var(--button-background-disabled);
  color: var(--button-color-disabled);
  box-shadow: var(--button-inset-disabled);
  cursor: not-allowed;
}

.button-icon {
  display: flex;
  fill: var(--button-fill-icon);
}

.button[disabled]:not([aria-busy]) .button-icon {
  fill: var(--button-fill-icon-disabled);
}

.button[data-icon-position=leading] .button-icon:not(:only-child) {
  margin-right: var(--button-gap);
}

.button[data-icon-position=trailing] .button-icon:not(:only-child) {
  margin-left: var(--button-gap);
}

.button[data-text=text-tiny] {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
}

.button[data-text=text-small] {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
}

.button[data-text=text-medium] {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.button[data-text=text-large] {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: var(--button-fill-animation);
  position: absolute;
  left: 0;
  right: 0;
}

.button[aria-busy] .button-text,
.button[aria-busy] .button-icon {
  visibility: hidden;
}

.button[aria-busy] {
  cursor: not-allowed;
}

.button[data-layout=icon-text] {
  padding: var(--button-icon-text-space);
}

.button[data-layout=text] {
  padding: var(--button-text-space);
}

.button[data-layout=icon] {
  width: var(--button-height);
}

.button[data-size=tiny] {
  --button-height: 24px;
  --button-gap: 4px;
  --button-icon-text-space: 5px 6px;
  --button-text-space: 5px 6px;
}

.button[data-size=small] {
  --button-height: 28px;
  --button-gap: 4px;
  --button-icon-text-space: 5px 6px;
  --button-text-space: 5px 6px;
}

.button[data-size=medium] {
  --button-height: 32px;
  --button-gap: 4px;
  --button-icon-text-space: 6px 8px;
  --button-text-space: 6px 10px;
}

.button[data-size=large] {
  --button-height: 40px;
  --button-gap: 4px;
  --button-icon-text-space: 10px;
  --button-text-space: 10px;
}

.button[data-type=filled][data-intent=primary] {
  --button-background: var(--action-default);
  --button-background-hover: var(--action-default);
  --button-background-active: var(--action-default);
  --button-background-focus: var(--action-default);
  --button-background-disabled: var(--opacity-medium);
  --button-color: var(--neutral-white);
  --button-color-hover: var(--neutral-white);
  --button-color-active: var(--neutral-white);
  --button-color-focus: var(--neutral-white);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--neutral-white);
  --button-fill-icon-hover: var(--neutral-white);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--neutral-white);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-focus: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-disabled: none;
}

.button[data-type=filled][data-intent=neutral] {
  --button-background: var(--opacity-mild);
  --button-background-hover: var(--opacity-medium);
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: var(--opacity-medium);
  --button-color: var(--neutral-secondary);
  --button-color-hover: var(--neutral-secondary);
  --button-color-active: var(--neutral-secondary);
  --button-color-focus: var(--neutral-secondary);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--neutral-secondary);
  --button-fill-icon-hover: var(--neutral-secondary);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--neutral-secondary);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-focus: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-disabled: none;
}

.button[data-type=filled][data-intent=destructive] {
  --button-background: var(--danger-default);
  --button-background-hover: var(--danger-default);
  --button-background-active: var(--danger-default);
  --button-background-focus: var(--danger-default);
  --button-background-disabled: var(--opacity-medium);
  --button-color: var(--neutral-white);
  --button-color-hover: var(--neutral-white);
  --button-color-active: var(--neutral-white);
  --button-color-focus: var(--neutral-white);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--neutral-white);
  --button-fill-icon-hover: var(--neutral-white);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--neutral-white);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-focus: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-disabled: none;
}

.button[data-type=ghost][data-intent=neutral] {
  --button-background: transparent;
  --button-background-hover: var(--opacity-mild);
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: transparent;
  --button-color: var(--neutral-secondary);
  --button-color-hover: var(--neutral-secondary);
  --button-color-active: var(--neutral-secondary);
  --button-color-focus: var(--neutral-secondary);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--neutral-secondary);
  --button-fill-icon-hover: var(--neutral-secondary);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--neutral-secondary);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-focus: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-disabled: none;
}

.button[data-type=ghost][data-intent=primary] {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: transparent;
  --button-color: var(--action-default);
  --button-color-hover: var(--action-default);
  --button-color-active: var(--action-default);
  --button-color-focus: var(--action-default);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--action-default);
  --button-fill-icon-hover: var(--action-default);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--action-default);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: 0 0 0 1px var(--action-focus);
  --button-inset-focus: 0 0 0 1px var(--action-focus);
  --button-inset-disabled: none;
}

.button[data-type=ghost][data-intent=destructive] {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: transparent;
  --button-color: var(--danger-default);
  --button-color-hover: var(--danger-default);
  --button-color-active: var(--danger-default);
  --button-color-focus: var(--danger-default);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--danger-default);
  --button-fill-icon-hover: var(--danger-default);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--danger-default);
  --button-inset: none;
  --button-inset-hover: none;
  --button-inset-active: 0 0 0 1px var(--danger-focus);
  --button-inset-focus: 0 0 0 1px var(--danger-focus);
  --button-inset-disabled: none;
}

.button[data-type=outline][data-intent=destructive] {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: transparent;
  --button-color: var(--danger-default);
  --button-color-hover: var(--danger-default);
  --button-color-active: var(--danger-default);
  --button-color-focus: var(--danger-default);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--danger-default);
  --button-fill-icon-hover: var(--danger-default);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--danger-default);
  --button-inset: inset 0 0 0 1px var(--danger-hint);
  --button-inset-hover: inset 0 0 0 1px var(--danger-hint);
  --button-inset-active: inset 0 0 0 1px var(--danger-default);
  --button-inset-focus: inset 0 0 0 1px var(--danger-default);
  --button-inset-disabled: inset 0 0 0 1px var(--opacity-medium);
}

.button[data-type=outline][data-intent=primary] {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-mild);
  --button-background-disabled: transparent;
  --button-color: var(--action-default);
  --button-color-hover: var(--action-default);
  --button-color-active: var(--action-default);
  --button-color-focus: var(--action-default);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--action-default);
  --button-fill-icon-hover: var(--action-default);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--action-default);
  --button-inset: inset 0 0 0 1px var(--action-faded);
  --button-inset-hover: inset 0 0 0 1px var(--action-faded);
  --button-inset-active: inset 0 0 0 1px var(--action-focus);
  --button-inset-focus: inset 0 0 0 1px var(--action-focus);
  --button-inset-disabled: inset 0 0 0 1px var(--opacity-medium);
}

.button[data-type=outline][data-intent=neutral] {
  --button-background: transparent;
  --button-background-hover: var(--opacity-mild);
  --button-background-active: var(--opacity-mild);
  --button-background-focus: var(--opacity-very-strong);
  --button-background-disabled: transparent;
  --button-color: var(--neutral-secondary);
  --button-color-hover: var(--neutral-secondary);
  --button-color-active: var(--neutral-secondary);
  --button-color-focus: var(--neutral-secondary);
  --button-color-disabled: var(--neutral-quaternary);
  --button-fill-icon: var(--neutral-secondary);
  --button-fill-icon-hover: var(--neutral-secondary);
  --button-fill-icon-disabled: var(--neutral-quaternary);
  --button-fill-animation: var(--neutral-secondary);
  --button-inset: inset 0 0 0 1px var(--opacity-medium);
  --button-inset-hover: inset 0 0 0 1px var(--opacity-medium);
  --button-inset-active: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-focus: inset 0 0 0 1px var(--opacity-very-strong);
  --button-inset-disabled: inset 0 0 0 1px var(--neutral-quaternary);
}

.calendar-popover.popover {
  width: 232px;
}

.calendar-popover--header {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
  grid-auto-columns: max-content;
  gap: 4px;
}

.calendar-popover--month {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
  padding: 0;
}

.export-calendar-popover {
  width: 428px !important;
}

.export-calendar {
  display: grid;
  gap: 4px 12px;
  grid-template: "year year" auto "header header" auto "leading trailing" auto/1fr 1fr;
}

.export-calendar-popover--year {
  grid-area: year;
}

.export-calendar-popover--header {
  grid-area: header;
  margin-bottom: 4px;
}

.calendar-double-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.calendar-double-header--leading,
.calendar-double-header--trailing {
  display: grid;
  gap: 4px;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
}

.calendar-double-header--trailing {
  justify-content: end;
}

.calendar-year-header {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.calendar-year-header--year {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  padding: 0 10px;
  margin: 0;
  color: var(--neutral-80);
}

.calendar {
  display: grid;
  grid-auto-rows: max-content;
  gap: 4px;
}

.calendar-header,
.calendar-row {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-header--cell {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  text-align: center;
  color: var(--neutral-60);
  padding: 4px 0;
}

.calendar--cell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.calendar--cell[data-today] .calendar--cell-button {
  text-decoration: underline;
}

.calendar--cell-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 500;
  text-align: center;
  padding: 6px 0;
  color: var(--neutral-80);
}

.calendar--cell[aria-selected]:not([data-selection]),
.calendar--cell[aria-selected][data-selection=single],
.calendar--cell[aria-selected][data-selection=start],
.calendar--cell[aria-selected][data-selection=end] {
  border-radius: 16px;
  color: var(--neutral-100);
  background: var(--system-action-blue-base);
}

.calendar--cell[aria-selected][data-selection=start] {
  border-radius: 16px 0 0 16px;
}

.calendar--cell[aria-selected][data-selection=end] {
  border-radius: 0 16px 16px 0;
}

.calendar--cell[aria-selected][data-selection=between] {
  color: var(--neutral-80);
  background: var(--system-action-blue-dark-2);
}

.calendar--cell,
.calendar-header--cell,
.calendar--cell-button {
  outline: none;
  position: relative;
}

body:not(.using-mouse) .calendar--cell:focus::after,
body:not(.using-mouse) .calendar-header--cell:focus::after,
body:not(.using-mouse) .calendar--cell-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.calendar--cell::-moz-focus-inner,
.calendar-header--cell::-moz-focus-inner,
.calendar--cell-button::-moz-focus-inner {
  border: 0;
}

.card-header {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-template-columns: max-content 1fr max-content;
  padding-top: 8px;
  padding-bottom: 7px;
  padding-left: 4px;
  padding-right: 4px;
  border-bottom: 1px solid var(--neutral-10);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card-header:hover {
  background-color: var(--background-04);
}

.card-header--content {
  display: grid;
  gap: 2px;
  grid-auto-flow: row;
}

.card-header--title-container {
  display: grid;
  gap: 4px;
  fill: white;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
}

.card-header--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-90);
  margin: 0;
  padding: 2px 0;
}

.card-header--description {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
  margin: 0;
}

.card-header--icon-reorder {
  fill: var(--neutral-40);
  padding: 2px;
  border-radius: 4px;
  height: 20px;
  cursor: grab;
}

@media (hover: none) {
  .card-header--icon-reorder {
    opacity: 1;
  }
}
@media (hover: hover) {
  .card-header--icon-reorder {
    opacity: 0;
  }
  .card-header--icon-reorder:focus {
    opacity: 1;
  }
}
.card-header--icon-reorder:hover {
  background-color: var(--white-10);
  fill: var(--neutral-80);
}

.card-header--icon-reorder:active {
  background-color: var(--white-10);
  fill: var(--neutral-80);
}

.card-header--icon-reorder:focus {
  fill: var(--neutral-40);
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.card-header--menu-button {
  visibility: hidden;
}

.card-header:hover .card-header--icon-reorder {
  opacity: 1;
}

.card-header:hover .card-header--menu-button {
  visibility: visible;
}

.card-header--menu-button[aria-expanded=true] {
  visibility: visible;
}

.card-header:hover .card-header--title {
  color: var(--system-action-blue-base);
}

.card-header:has([data-dragging=true]) {
  background-color: var(--neutral-10);
}

.card-header--link {
  text-decoration: none;
  margin: 0;
  padding: 0;
  justify-self: start;
}

.card-header--link:hover {
  text-decoration: underline;
  text-decoration-color: var(--system-action-blue-base);
}

.card-block {
  border: 1px solid var(--neutral-10);
  border-radius: 5px;
  color: var(--neutral-70);
  display: flex;
  flex-direction: column;
}

.card-content {
  transition: opacity 0.12s ease-in-out;
  position: relative;
  padding: 12px 10px;
  flex-grow: 1;
  display: grid;
}

.card-block:has([data-dragging=true]) {
  background-color: var(--neutral-10);
}

.card-block[data-reloading] .card-content {
  opacity: 0.4;
}

.dialogue-header {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  grid-template-rows: 28px;
  gap: 8px;
  padding: 10px 0;
}

.dialogue-header--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-secondary);
  margin: 0;
  padding: 0;
}

.dialogue {
  display: flex;
  padding: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  flex-direction: column;
  background: var(--overlay-01);
  align-items: center;
}

.dialogue--padding {
  flex-shrink: 1000;
  height: 108px;
}

.dialogue--padding--bottom {
  flex-grow: 1;
  flex-shrink: 1000;
  height: 108px;
}

.dialogue--content {
  position: relative;
  overflow: auto;
  background: var(--background-03);
  box-shadow: var(--shadow-03);
  border: 1px solid var(--neutral-10);
  border-radius: 8px;
  flex-shrink: 1;
  flex-grow: 0;
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.dialogue--content[data-style=partition] .dialogue--header {
  border-bottom: 1px solid var(--neutral-10);
}

.dialogue--content[data-style=partition] .dialogue--footer {
  border-top: 1px solid var(--neutral-10);
}

.dialog--content--paragraph {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  margin: 0;
}

.dialogue--header {
  padding: 0 10px;
  background: var(--background-03);
  position: sticky;
  top: 0;
  z-index: 1;
}

.dialogue--main-content {
  padding: 0 10px;
  display: grid;
  grid-auto-flow: row;
  gap: 0;
  flex-grow: 1;
}

.dialogue--main-content:last-child {
  padding-bottom: 10px;
}

.dialogue--footer {
  display: flex;
  gap: 8px;
  padding: 10px;
  justify-content: end;
}

.dropdown-non-ideal-state {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  padding: 12px;
  color: var(--neutral-80);
  text-align: center;
}

.dropdown-item {
  padding: 0 12px;
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  outline: none;
  color: var(--neutral-80);
  fill: var(--neutral-80);
}

.dropdown-item:focus {
  background: var(--white-05);
}

.dropdown-item:not([aria-disabled]):hover {
  background: var(--white-05);
}

.dropdown-item[aria-disabled] {
  color: var(--neutral-50);
  fill: var(--neutral-50);
  cursor: not-allowed;
}

.dropdown-item--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 0;
  margin-right: auto;
}

.dropdown-item--children {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}

.dropdown-item--tree-item {
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 8px;
}

.dropdown-layout-item {
  padding: 0 12px;
  list-style: none;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  position: relative;
  isolation: isolate;
  gap: 8px;
  margin: 0;
  outline: none;
  color: var(--neutral-80);
  fill: var(--neutral-80);
}

.dropdown-layout-item[aria-disabled] {
  color: var(--neutral-50);
  fill: var(--neutral-50);
  cursor: not-allowed;
}

.dropdown-layout-item--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 0;
  margin-right: auto;
  outline: none;
  cursor: pointer;
}

.dropdown-layout-item--text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.dropdown-layout-item--text:focus::before {
  background: var(--white-05);
}

.dropdown-layout-item:not([aria-disabled]) .dropdown-layout-item--text:hover::before {
  background: var(--white-05);
}

.dropdown-search-item {
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  display: grid;
  grid-template: "icon . clear" auto/max-content 1fr 32px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  position: relative;
}

.dropdown-search-item--icon {
  fill: var(--neutral-60);
  grid-area: icon;
}

.dropdown-search-item--input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 8px 44px 8px 34px;
  background-color: transparent;
  border: 0;
  color: var(--neutral-100);
  outline: none;
}

.dropdown-search-item--input::placeholder {
  color: var(--neutral-50);
}

.dropdown-search-item--clear {
  grid-area: clear;
}

.dropdown-search-item--input:placeholder-shown + .dropdown-search-item--clear {
  display: none;
}

.navigation-icon-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body:not(.using-mouse) .navigation-icon-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.navigation-icon-button::-moz-focus-inner {
  border: 0;
}

.navigation-icon-button[data-size=small] {
  width: 20px;
  height: 20px;
}

.navigation-icon-button[data-size=medium] {
  width: 24px;
  height: 24px;
}

.navigation-icon-button[data-size=large] {
  width: 28px;
  height: 28px;
}

.navigation-icon-button[data-size=extra-large] {
  width: 32px;
  height: 32px;
}

.navigation-icon-button[data-style=call-to-action] {
  background: var(--action-default);
  fill: white;
  border-radius: 4px;
}

.navigation-icon-button[data-style=call-to-action]:not(:disabled):hover, .navigation-icon-button[data-style=call-to-action]:not(:disabled):active {
  background: var(--action-hover);
}

.navigation-icon-button[data-style=regular] {
  fill: var(--neutral-tertiary);
  border-radius: 4px;
}

.navigation-icon-button[data-style=regular]:not(:disabled):hover, .navigation-icon-button[data-style=regular]:not(:disabled):active {
  background: var(--opacity-mild);
}

.item-card {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-40);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--background-04);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  padding: 12px;
}

.item-card--header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-card--title {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-100);
  margin: 0;
  flex-grow: 1;
}

.item-card--text {
  margin: 0;
}

.list-item {
  padding: 4px 8px 4px 6px;
  border-radius: 4px;
  gap: 4px;
  height: 28px;
  color: var(--neutral-secondary);
  fill: var(--neutral-secondary);
  display: flex;
  align-items: center;
}

.list-item:hover:not([aria-disabled]),
.list-item[aria-selected]:not([aria-disabled]) {
  background: var(--opacity-mild);
}

.list-item:focus:not([aria-disabled]) {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.list-item[aria-disabled] {
  color: var(--neutral-quaternary);
  fill: var(--neutral-quaternary);
}

.list-item[data-bleed] {
  padding: 4px 12px;
  border-radius: inherit;
}

.list-item--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  flex: 1;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.list-item--metadata {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
}

.tag-list-search {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: #666666;
  border-bottom: 1px solid #ebebed;
}

.tag-list-container {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
  width: 300px;
  max-height: 200px;
  background: white;
  overflow: auto;
}

.tag-list {
  list-style: none;
  margin: 0;
}

.tag-list:not(:last-child) {
  border-bottom: 1px solid #ebebed;
}

.tag-list-category-item {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  margin: 0;
  cursor: pointer;
}

.tag-list-category-item:hover {
  background: #f4f4f5;
}

.tag-list-category-item[data-highlighted] {
  background: #f4f4f5;
}

.tag-list-category-items {
  padding: 0;
  margin: 0;
  list-style: none;
}

.tag-list-category-title {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 700;
  color: #000000;
  margin: 0;
  padding: 4px 16px 16px 16px;
}

.tag-list-category-item-item-icon {
  width: 24px;
  height: 24px;
  fill: #4564fd;
}

.tag-list-category-item-item-title {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  color: #666666;
}

.tag-list-category-input-item {
  padding: 6px 16px 6px 40px;
}

.tag-list-category-input-item-input {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  color: #000000;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

.tag-list-category-input-item-input::placeholder {
  color: #b5b6ba;
}

.tag-list-category-input-item-input:hover::placeholder {
  color: #4564fd;
}

.tag-list-category-query {
  height: 46px;
  display: flex;
  flex-direction: row;
  padding: 12px 16px 10px 16px;
  align-items: flex-end;
}

.tag-list-category-query-title {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  color: #666666;
  margin-left: 8px;
  flex-grow: 1;
}

.tag-list-category-query-icon {
  flex-shrink: 0;
}

.tag-list-category-query[data-highlighted] {
  background: #f4f4f5;
}

.tag-list-category-add-title {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  color: #4564fd;
}

.tag-list-empty-state {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: #a2a9b3;
  padding: 20px 12px;
  margin: 0;
}

.non-ideal-inline-error {
  padding: 24px;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.non-ideal-inline-error--text {
  line-height: 24px;
  font-size: 17px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-50);
  text-align: center;
  margin: 0;
  padding: 0;
}

.non-ideal-inline-error--button {
  justify-self: center;
}

.non-ideal-inline-loading {
  padding: 24px;
  min-height: 132px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 16px;
  stroke: var(--neutral-40);
}

.non-ideal-inline-loading--text {
  line-height: 24px;
  font-size: 17px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-50);
  text-align: center;
  margin: 0;
  padding: 0;
}

.non-ideal-state {
  display: grid;
  grid-template-columns: minmax(auto, 420px);
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  justify-content: center;
  justify-items: center;
  align-content: center;
  gap: 8px;
  color: var(--neutral-80);
  fill: var(--neutral-80);
}

.non-ideal-state[data-content-size=context] {
  flex-grow: 1;
}

.non-ideal-state--content {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  justify-content: center;
  justify-items: center;
  gap: 4px;
}

.non-ideal-state--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  margin: 0;
}

.non-ideal-state--text {
  display: grid;
  gap: 2px;
}

.non-ideal-state--text p {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.non-ideal-state--text a {
  color: var(--system-action-blue-base);
  text-decoration: none;
}

.non-ideal-state--text a:hover {
  text-decoration: underline;
}

[data-theme-provider=dark] .non-ideal-state-loading,
.non-ideal-state-loading[data-theme-provider=dark] {
  fill: var(--system-success-green-base);
}

.non-ideal-state-loading {
  flex-grow: 1;
  align-content: center;
  align-self: stretch;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 24px;
  fill: var(--system-action-blue-base);
}

.non-ideal-state-loading[data-size=medium] {
  gap: 18px;
}

.non-ideal-state-loading--title {
  line-height: 24px;
  font-size: 17px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
}

.popover {
  display: grid;
  grid-auto-rows: max-content;
  gap: 8px;
  padding: 12px;
  box-shadow: var(--shadow-02), inset 0 0 0 1px var(--neutral-10);
  background: var(--background-04);
  width: 280px;
  border-radius: 4px;
}

.popover[data-style=gapless] {
  padding: 0 0 4px 0;
}

.popover-header {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr max-content;
  align-items: center;
}

.popover-header--heading {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  padding: 0;
  margin: 0;
}

.toggle-check--container {
  display: flex;
  border-radius: 4px;
  border: 1px solid var(--opacity-medium);
  width: max-content;
  flex-grow: 1;
  position: relative;
}

.toggle-check--container:has(input:disabled) {
  opacity: 0.6;
}

.toggle-check {
  position: absolute;
  opacity: 0;
  margin: 0;
  height: 26px;
  z-index: -1;
}

.toggle-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
  fill: var(--neutral-quaternary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 4px;
  width: 100%;
  white-space: nowrap;
}

.toggle-check:not(:checked) + .toggle-label:hover {
  background: var(--opacity-mild);
}

.toggle-label[data-size=large] {
  padding: 10px 8px;
}

.toggle-label:not(:only-of-type):not(:last-child) {
  border-right: 1px solid var(--opacity-medium);
}

.toggle-check:checked + .toggle-label {
  background-color: var(--opacity-mild);
  color: var(--neutral-primary);
  fill: var(--neutral-primary);
}

.toggle-check:checked + .toggle-label:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.toggle-check:checked + .toggle-label:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.toggle-check:focus + .toggle-label {
  box-shadow: 0 0 0 1px var(--action-focus);
}

.toggle-label--large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tabs {
  display: grid;
  gap: 12px;
  grid-auto-flow: column;
  align-content: start;
  justify-content: start;
  position: relative;
}

.tabs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--neutral-20);
}

.tabs--tab {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  margin-bottom: 6px;
  position: relative;
  color: var(--neutral-60);
}

body:not(.using-mouse) .tabs--tab:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.tabs--tab::-moz-focus-inner {
  border: 0;
}

.tabs--tab[aria-selected=true] {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--neutral-80);
}

.tabs--tab[aria-selected=true]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--system-action-blue-base);
}

.element-token {
  outline: none;
  position: relative;
  --token-button-color: var(--neutral-80);
  --token-button-fill: var(--neutral-80);
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
  align-content: center;
  background-color: var(--neutral-10);
  border-radius: 14px;
  height: 28px;
  padding: 6px 12px;
  position: relative;
  color: var(--token-button-color);
  fill: var(--token-button-fill);
}

body:not(.using-mouse) .element-token:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 34px;
}

.element-token::-moz-focus-inner {
  border: 0;
}

.element-token[data-icon-only] {
  padding: 7px;
}

.element-token--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.element-token--button-closeable {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: grid;
  fill: var(--neutral-40);
}

body:not(.using-mouse) .element-token--button-closeable:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.element-token--button-closeable::-moz-focus-inner {
  border: 0;
}

.element-token:hover .element-token--button-closeable {
  fill: var(--neutral-60);
}

.element-token .element-token--button-closeable:hover {
  fill: var(--neutral-80);
}

.element-token--button-rounded {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: grid;
}

body:not(.using-mouse) .element-token--button-rounded:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.element-token--button-rounded::-moz-focus-inner {
  border: 0;
}

.element-token--button-rounded .element-token {
  --token-button-color: var(--neutral-60);
  --token-button-fill: var(--neutral-60);
}

.element-token--button-rounded .element-token:hover {
  fill: var(--neutral-80);
  color: var(--neutral-80);
}

@media (hover: hover) {
  .element-token:hover .element-token--button-closeable[data-remove-style=hover] {
    opacity: 1;
  }
  .element-token--button-closeable[data-remove-style=hover] {
    isolation: isolate;
    position: absolute;
    transition: opacity 0.3s ease;
    right: 8px;
    opacity: 0;
  }
  @supports not (isolation: isolate) {
    .element-token--button-closeable[data-remove-style=hover] {
      transform: scale(1);
    }
  }
  .element-token--button-closeable[data-remove-style=hover]:focus-within {
    opacity: 1;
  }
  .element-token--button-closeable[data-remove-style=hover]:before {
    content: "";
    background: linear-gradient(90deg, rgba(242, 243, 252, 0) 0%, var(--neutral-10) 16px);
    pointer-events: none;
    z-index: -1;
    position: absolute;
    width: 47px;
    right: -8px;
    top: -5px;
    bottom: -5px;
    border-radius: 0 14px 14px 0;
  }
}
.forms-checkbox {
  width: 16px;
  height: 16px;
  position: relative;
  display: grid;
  flex-shrink: 0;
  flex-grow: 0;
}

.forms-checkbox[data-spacing=modern] {
  margin: 4px;
}

.forms-checkbox--input {
  outline: none;
  position: absolute;
  background: none;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.forms-checkbox--checked {
  display: none;
}

.forms-checkbox--indeterminate {
  display: none;
}

.forms-checkbox--visual {
  pointer-events: none;
  border-radius: 2px;
  fill: white;
}

.forms-checkbox--input:checked:not(:indeterminate) + .forms-checkbox--visual .forms-checkbox--checked {
  display: block;
}

.forms-checkbox--input:indeterminate + .forms-checkbox--visual .forms-checkbox--indeterminate {
  display: block;
}

.forms-checkbox--input:disabled + .forms-checkbox--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--neutral-faded);
  fill: var(--neutral-white);
}

.forms-checkbox--input:disabled:checked + .forms-checkbox--visual, .forms-checkbox--input:disabled:indeterminate + .forms-checkbox--visual {
  background: var(--action-faded);
  box-shadow: none;
}

.forms-checkbox--input:not(:disabled) + .forms-checkbox--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--neutral-quaternary);
}

.forms-checkbox--input:not(:disabled):checked + .forms-checkbox--visual, .forms-checkbox--input:not(:disabled):indeterminate + .forms-checkbox--visual {
  box-shadow: none;
  background: var(--action-default);
}

.forms-checkbox--input:not(:disabled):hover:checked + .forms-checkbox--visual, .forms-checkbox--input:not(:disabled):indeterminate:checked + .forms-checkbox--visual {
  background: var(--action-hover);
}

.forms-checkbox--input:not(:disabled):active:checked + .forms-checkbox--visual {
  background: var(--action-default);
}

.forms-checkbox--input:not(:disabled):not(:checked):not(:indeterminate):hover + .forms-checkbox--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--opacity-strong);
  background: var(--opacity-medium);
}

.forms-checkbox--input:not(:disabled):not(:checked):not(:indeterminate):active + .forms-checkbox--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--neutral-quaternary);
  background: none;
}

.forms-checkbox--input:focus + .forms-checkbox--visual::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border-radius: 2px;
  border: 1px solid var(--action-default);
}

.forms-field--container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: max-content 1fr;
}

.input-rounded-select {
  background-color: transparent;
  box-shadow: 0 0 0 1px var(--opacity-medium);
  border: none;
  border-radius: 4px;
  color: var(--neutral-primary);
  height: var(--input-rounded-select-height);
  margin: 0;
  outline: none;
  padding: var(--input-rounded-select-padding);
  text-overflow: "";
  overflow: hidden;
  align-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: left;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.input-rounded-select option {
  color: initial;
  font-weight: normal;
  font-family: sans-serif;
}

.input-rounded-select:hover:not(:focus):not(:disabled):not([data-validity=invalid]) {
  box-shadow: 0 0 0 1px var(--opacity-strong);
}

.input-rounded-select:focus:not([readonly]) {
  box-shadow: 0 0 0 1px var(--action-default);
}

.input-rounded-select:active:not([disabled]) {
  box-shadow: 0 0 0 1px var(--opacity-strong);
}

.input-rounded-select[disabled] {
  color: var(--neutral-quaternary);
  background-color: var(--opacity-mild);
  box-shadow: inherit;
  cursor: not-allowed;
}

.input-rounded-select[data-validity=invalid]:not([disabled]) {
  box-shadow: 0 0 0 1px var(--danger-default);
}

.input-rounded-select[data-size=large] {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
}

.input-rounded-select[data-size=small],
.input-rounded-select[data-size=medium] {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.form-select-rounded {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-rounded-select:not(button):not(:valid),
.input-rounded-select[data-placeholder-visible] {
  color: var(--neutral-quaternary);
}

.input-rounded-select--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: var(--neutral-tertiary);
  position: absolute;
  right: 4px;
  width: 12px;
  height: 12px;
  margin: 2px;
  pointer-events: none;
}

.form-select-rounded[data-size=small] {
  --input-rounded-select-height: 28px;
  --input-rounded-select-padding: 6px 24px 6px 8px;
}

.form-select-rounded[data-size=medium] {
  --input-rounded-select-height: 32px;
  --input-rounded-select-padding: 8px 24px 8px 10px;
}

.form-select-rounded[data-size=large] {
  --input-rounded-select-height: 40px;
  --input-rounded-select-padding: 10px 24px 10px 12px;
}

.input-rounded-text {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  outline: none;
  height: var(--input-rounded-text-height);
  width: 100%;
  margin: 0;
  padding: var(--input-rounded-text-padding);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--neutral-primary);
  box-shadow: inset 0 0 0 1px var(--opacity-medium);
}

.input-rounded-text:hover:not(:focus):not(:disabled):not([data-validity=invalid]) {
  box-shadow: inset 0 0 0 1px var(--opacity-strong);
}

.input-rounded-text:focus:not([readonly]) {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.input-rounded-text:disabled {
  color: var(--neutral-quaternary);
  background-color: var(--opacity-mild);
  box-shadow: inherit;
  cursor: not-allowed;
}

.input-rounded-text[data-size=small],
.input-rounded-text[data-size=medium] {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.input-rounded-text[data-size=small]::placeholder,
.input-rounded-text[data-size=medium]::placeholder {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
}

.input-rounded-text[data-size=small]:-ms-input-placeholder,
.input-rounded-text[data-size=medium]:-ms-input-placeholder {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
}

.input-rounded-text[data-size=large] {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
}

.input-rounded-text[data-size=large]::placeholder {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
}

.input-rounded-text[data-size=large]:-ms-input-placeholder {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-quaternary);
}

.input-rounded-text[data-validity=invalid] {
  box-shadow: inset 0 0 0 1px var(--danger-default);
}

.input-rounded-text::selection {
  background: var(--action-faded);
}

.input-rounded-text[data-size=small] {
  --input-rounded-text-height: 28px;
  --input-rounded-text-padding: 6px 8px;
}

.input-rounded-text[data-size=medium] {
  --input-rounded-text-height: 32px;
  --input-rounded-text-padding: 8px;
}

.input-rounded-text[data-size=large] {
  --input-rounded-text-height: 40px;
  --input-rounded-text-padding: 10px 12px;
}

.input-text-area {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  background: var(--input-text-area-background);
  box-shadow: var(--input-text-area-inset);
  border: 0;
  border-radius: 2px;
  color: var(--input-text-area-color);
  min-height: 80px;
  margin: 0;
  outline: none;
  padding: 11px;
  resize: none;
  text-align: left;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-text-area::placeholder {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--input-text-area-color-placeholder);
}

.input-text-area:-ms-input-placeholder {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--input-text-area-color-placeholder);
}

.input-text-area:hover:not(:focus):not(:disabled) {
  box-shadow: var(--input-text-area-inset-hover);
}

.input-text-area:focus:not([readonly]) {
  box-shadow: var(--input-text-area-inset-focus);
}

.input-text-area:active:not([disabled]) {
  box-shadow: var(--input-text-area-inset-active);
}

.input-text-area:disabled {
  background-color: var(--input-text-area-background-disabled);
  box-shadow: var(--input-text-area-inset-disabled);
  cursor: not-allowed;
}

.input-text-area[data-validity=invalid]:not([disabled]) {
  box-shadow: var(--input-text-area-inset-invalid);
}

.input-text-area[data-validity=valid]:not([disabled]) {
  box-shadow: var(--input-text-area-inset-success);
}

.input-text-area::selection {
  background: var(--input-rounded-text-area-background-highlighted);
  color: var(--input-rounded-text-area-color-highlighted);
}

/*Text area colors*/
.input-text-area[data-style=light],
[data-theme-provider=light] .input-text-area {
  --input-text-area-background: transparent;
  --input-text-area-background-disabled: #edeff0;
  --input-rounded-text-area-background-highlighted: #4c6fff;
  --input-text-area-color: #0b1420;
  --input-text-area-color-placeholder: #8f959e;
  --input-rounded-text-area-color-highlighted: #ffffff;
  --input-text-area-inset: inset 0 0 0 1px #d1d5d9;
  --input-text-area-inset-hover: inset 0 0 0 1px #b0b5bc;
  --input-text-area-inset-active: inset 0 0 0 1px #4c6fff;
  --input-text-area-inset-focus: inset 0 0 0 1px #4c6fff;
  --input-text-area-inset-disabled: inset 0 0 0 1px #e2e4ee;
  --input-text-area-inset-invalid: inset 0 0 0 1px #e75f6d;
  --input-text-area-inset-success: inset 0 0 0 1px #4c6fff;
}

.input-text-area[data-style=dark],
[data-theme-provider=dark] .input-text-area {
  --input-text-area-background: transparent;
  --input-text-area-background-disabled: rgba(255, 255, 255, 0.1);
  --input-rounded-text-area-background-highlighted: #4c6fff;
  --input-text-area-color: #ffffff;
  --input-text-area-color-placeholder: #82888f;
  --input-rounded-text-area-color-highlighted: #ffffff;
  --input-text-area-inset: inset 0 0 0 1px #2c3339;
  --input-text-area-inset-hover: inset 0 0 0 1px #515961;
  --input-text-area-inset-active: inset 0 0 0 1px #5d78ff;
  --input-text-area-inset-focus: inset 0 0 0 1px #5d78ff;
  --input-text-area-inset-disabled: inset 0 0 0 1px #e2e4ee;
  --input-text-area-inset-invalid: inset 0 0 0 1px #e75f6d;
  --input-text-area-inset-success: inset 0 0 0 1px #5d78ff;
}

.forms-radio {
  width: 16px;
  height: 16px;
  position: relative;
  display: grid;
  flex-shrink: 0;
  flex-grow: 0;
  --forms-radio-base-color: var(--neutral-tertiary);
  --forms-radio-hover-color: var(--neutral-tertiary);
  --forms-radio-hover-background: var(--opacity-medium);
  --forms-radio-checked-color: var(--action-default);
  --forms-radio-disabled: var(--neutral-quaternary);
}

.forms-radio--input {
  outline: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.forms-radio--visual {
  pointer-events: none;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--forms-radio-base-color);
}

.forms-radio--input:not(:disabled):not(:checked):hover + .forms-radio--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--forms-radio-hover-color);
  background: var(--forms-radio-hover-background);
}

.forms-radio--input:checked + .forms-radio--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--forms-radio-checked-color);
}

.forms-radio--input:checked + .forms-radio--visual::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 4px;
  left: 4px;
  background: var(--forms-radio-checked-color);
  border-radius: 50%;
}

.forms-radio--input:disabled + .forms-radio--visual {
  box-shadow: inset 0 0 0 var(--unit-1-5-px, 2px) var(--forms-radio-disabled);
}

.forms-radio--input:disabled:checked + .forms-radio--visual::after {
  background: var(--forms-radio-disabled);
}

.forms-radio--input:focus-visible + .forms-radio--visual::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: var(--unit-1-5-px, 1px) solid var(--system-action-blue-base);
}

.forms-switch {
  cursor: pointer;
  position: relative;
  display: flex;
  width: 32px;
  height: 16px;
  flex-shrink: 0;
  flex-grow: 0;
}

.forms-switch--input {
  outline: none;
  position: relative;
  outline: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  z-index: 100;
}

body:not(.using-mouse) .forms-switch--input:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 1px solid #4564fd;
  border-radius: 12px;
}

.forms-switch--input::-moz-focus-inner {
  border: 0;
}

.forms-switch--visual {
  display: flex;
  align-items: center;
  position: relative;
  height: 16px;
  width: 32px;
  border-radius: 16px;
  background-color: var(--neutral-quaternary);
  flex-shrink: 0;
  transition: background-color 0.15s ease-in-out;
  padding: var(--unit-1-5-px, 2px);
  --switch-width: calc(16px - var(--unit-1-5-px, 2px) * 2);
}

.forms-switch--visual::before {
  content: "";
  position: absolute;
  height: var(--switch-width);
  width: var(--switch-width);
  border-radius: 50%;
  background-color: var(--neutral-white);
  transition: transform 0.15s ease-in-out;
}

.forms-switch--input:checked + .forms-switch--visual {
  background-color: var(--action-default);
}

.forms-switch--input:checked:hover + .forms-switch--visual {
  background-color: var(--action-hover);
}

.forms-switch--input:checked + .forms-switch--visual::before {
  transform: translateX(16px);
}

.forms-switch--input:disabled + .forms-switch--visual {
  background: var(--neutral-faded);
}

.forms-switch--input:checked:disabled + .forms-switch--visual {
  background: var(--action-faded);
}

.header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header--text {
  color: var(--neutral-secondary);
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.header[data-size=tiny] {
  height: 24px;
}

.header[data-size=tiny] .header--text {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 500;
}

.header[data-size=small] {
  height: 28px;
}

.header[data-size=small] .header--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
}

.header--icon {
  fill: var(--neutral-secondary);
  height: 12px;
  width: 12px;
  display: flex;
}

.header--actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 2px;
}

.layout--application {
  display: grid;
  isolation: isolate;
  height: 100vh;
  height: min(100vh, 100dvh);
  top: 0;
}

.layout--application[data-display-mode=content-only],
.layout--application[data-display-mode=over-content] {
  grid-template: "content" 1fr/1fr;
}

.layout--application[data-display-mode=content-only] .layout--application--menu,
.layout--application[data-display-mode=over-content] .layout--application--menu {
  grid-area: content;
}

.layout--application[data-display-mode=content-only] .layout--application--content,
.layout--application[data-display-mode=over-content] .layout--application--content {
  grid-area: content;
}

.layout--application[data-display-mode=beside-content] {
  grid-template: "menu content" 1fr/240px 1fr;
}

.layout--application[data-display-mode=beside-content] .layout--application--menu {
  grid-area: menu;
}

.layout--application[data-display-mode=beside-content] .layout--application--content {
  grid-area: content;
}

.layout--application--menu {
  z-index: 200;
  max-width: 240px;
  overflow: auto;
}

.layout--application--content {
  z-index: 100;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: start;
}

[data-display-mode=content-only] {
  --application-layout-top-offset: 44px;
}

[data-display-mode=over-content] .layout--application--content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.16);
}

.layout-application--state {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--background-03);
}

.navigation-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  text-decoration: none;
  text-align: left;
}

body:not(.using-mouse) .navigation-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.navigation-button::-moz-focus-inner {
  border: 0;
}

.navigation-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.navigation-button-content {
  border-radius: 2px;
  --navigation-button-additional-padding: 0px;
}

.navigation-button-content[data-indented] {
  --navigation-button-additional-padding: 16px;
}

.navigation-button-content[data-intent=call-to-action] {
  background: var(--system-action-blue-base);
  color: var(--neutral-100);
  fill: var(--neutral-100);
}

.navigation-button-content[data-intent=call-to-action]:hover {
  background: var(--system-action-blue-light-1);
}

.navigation-button-content[data-intent=call-to-action]:focus {
  background: var(--system-action-blue-light-1);
}

.navigation-button-content[data-intent=call-to-action]:active {
  background: var(--system-action-blue-light-1);
}

.navigation-button-content[data-intent=regular] {
  background: transparent;
  fill: var(--neutral-60);
  color: var(--neutral-80);
}

.navigation-button-content[data-intent=regular]:hover {
  background: var(--white-10);
  fill: var(--neutral-80);
}

.navigation-button-content[data-intent=regular]:focus {
  background: var(--white-15);
  fill: var(--neutral-80);
}

.navigation-button-content[data-intent=regular]:active {
  background: var(--white-15);
}

.navigation-button-content {
  display: grid;
  grid-auto-flow: column;
  position: relative;
  height: 32px;
  align-items: center;
}

.navigation-button-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  grid-area: text;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.navigation-button-block {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  justify-items: end;
  grid-area: block;
}

.navigation-button-content--icons {
  display: grid;
  grid-auto-flow: column;
  grid-area: icon;
  align-items: center;
}

.navigation-button-content[data-layout=icon-text-block] {
  padding: 0 6px 0 calc(6px + var(--navigation-button-additional-padding));
  gap: 2px;
  grid-template-columns: max-content 1fr max-content;
  grid-template-areas: "icon text block";
}

.navigation-button-content[data-layout=icon-text] {
  padding: 0 6px 0 calc(6px + var(--navigation-button-additional-padding));
  gap: 2px;
  grid-template-columns: max-content 1fr;
  grid-template-areas: "icon text";
}

.navigation-button-content[data-layout=text-block] {
  padding: 0 6px 0 calc(6px + var(--navigation-button-additional-padding));
  gap: 2px;
  grid-template-columns: 1fr max-content;
  grid-template-areas: "text block";
}

.navigation-button-content[data-layout=text] {
  padding: 0 6px 0 calc(6px + var(--navigation-button-additional-padding));
  grid-template-columns: 1fr;
  grid-template-areas: "text";
}

.navigation-button-icon {
  display: flex;
  padding: 4px;
  width: max-content;
}

.navigation-button--loading {
  width: 20px;
  height: 20px;
  display: grid;
  align-content: center;
  justify-content: center;
}

.navigation-button--expand-button[data-expanded] svg {
  transform: rotate(90deg);
}

.navigation-button.active .navigation-button-content[data-intent=regular] {
  background: var(--white-15);
  fill: var(--neutral-80);
}

.navigation-button.active .navigation-button-content[data-intent=call-to-action] {
  background: var(--system-action-blue-base);
}

.navigation-panel-sidebar {
  background-color: var(--background-04);
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--neutral-10);
}

.navigation-panel-sidebar-header {
  background-color: var(--background-04);
  padding: 8px 12px;
  display: grid;
  justify-items: start;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.navigation-panel-sidebar-list-container {
  padding: 0px 12px 0 16px;
  display: grid;
  gap: 2px;
  align-items: start;
  align-content: start;
  flex-grow: 1;
  z-index: 100;
}

.navigation-panel-sidebar--tree {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.navigation-panel-sidebar-footer {
  background-color: var(--background-04);
  position: sticky;
  z-index: 100;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px 16px 16px;
  justify-content: flex-end;
}

.navigation-panel-divider {
  background-color: transparent;
  border: 0;
  display: inline-flex;
  margin: 0;
  padding: 4px 0;
  width: 100%;
}

.app-navigation-content-profile {
  display: grid;
  align-items: center;
  gap: 2px;
  padding: 0 0 0 4px;
  grid-auto-flow: column;
  justify-content: space-between;
  width: 100%;
}

.app-navigation-content-profile--user-avatar {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.app-navigation-content-profile--button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  border-radius: 2px;
  padding: 4px;
  text-decoration: none;
  text-align: center;
  width: 28px;
  height: 28px;
  background: transparent;
  fill: var(--neutral-60);
  color: var(--neutral-80);
}

body:not(.using-mouse) .app-navigation-content-profile--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.app-navigation-content-profile--button::-moz-focus-inner {
  border: 0;
}

.app-navigation-content-profile--button:hover {
  background: var(--white-10);
  fill: var(--neutral-80);
}

.app-navigation-content-profile--button:focus {
  background: var(--white-15);
  fill: var(--neutral-80);
}

.app-navigation-content-profile--text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  padding: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.item-profile {
  width: 340px;
  display: grid;
  height: 72px;
  padding: 16px 20px 16px 16px;
  gap: 4px 16px;
  grid-template: "avatar name button" auto "avatar email button" auto/40px minmax(0, 1fr) max-content;
  align-content: center;
  align-items: center;
}

.item-profile--user-avatar {
  grid-area: avatar;
  border-radius: 50%;
}

.item-profile-user--name {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 700;
  color: #000000;
  grid-area: name;
  align-self: end;
  text-decoration: none;
  outline: none;
}

.item-profile-user--email {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  color: #666666;
  grid-area: email;
  align-self: start;
}

.item-profile-user--name,
.item-profile-user--email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "…";
}

.item-profile-user--button {
  grid-area: button;
}

.app-navigation-content-profile--popover {
  width: max-content;
}

.navigation-section {
  outline: none;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 4px 2px;
  color: var(--neutral-80);
  fill: var(--neutral-60);
}

body:not(.using-mouse) .navigation-section:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.navigation-section::-moz-focus-inner {
  border: 0;
}

.navigation-section[aria-expanded=true] .navigation-section--expand-button {
  transform: rotate(90deg);
}

.navigation-section--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
}

.navigation-section--children {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.navigation-section-expand-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.navigation-top-header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  background-color: var(--background-04);
  color: var(--neutral-80);
  display: grid;
  grid-template-columns: auto max-content;
  gap: 4px;
  padding: 8px 12px;
  position: sticky;
  top: 0;
  z-index: 101;
  border-bottom: 1px solid var(--neutral-10);
}

.navigation-top-header--collapsible {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  justify-content: start;
  height: 28px;
  gap: 4px;
}

.navigation-top-header--menu-grouped {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
}

.search {
  position: relative;
  display: grid;
  grid-template: "icon . clear" auto/12px 1fr 16px;
  gap: 4px;
  padding: 6px 4px 6px 8px;
  align-items: center;
  isolation: isolate;
}

.search[data-size=small] {
  height: 28px;
}

.search--input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--opacity-medium);
  background: transparent;
  z-index: 1;
  border: none;
  outline: none;
  color: var(--neutral-primary);
  position: absolute;
  padding: 0 24px 0 24px;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.search--input::placeholder {
  color: var(--neutral-quaternary);
}

.search--input:-ms-input-placeholder {
  color: var(--neutral-quaternary);
}

.search--input::selection {
  background: var(--action-faded);
}

.search--input:hover:not(:focus):not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--opacity-strong);
}

.search--input:focus {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.search--input:disabled {
  background-color: var(--opacity-mild);
  color: var(--neutral-quaternary);
  box-shadow: inherit;
  cursor: not-allowed;
}

.search--input:disabled + .search--clear,
.search--input:placeholder-shown + .search--clear {
  display: none;
}

.search--icon {
  grid-area: icon;
  z-index: 2;
  pointer-events: none;
  fill: var(--neutral-quaternary);
}

.search--clear {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  grid-area: clear;
  padding: 2px;
  z-index: 2;
  display: flex;
  fill: var(--neutral-quaternary);
}

body:not(.using-mouse) .search--clear:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.search--clear::-moz-focus-inner {
  border: 0;
}

.search--clear:hover, .search--clear:active {
  fill: var(--neutral-tertiary);
}

:root {
  --black-05: rgba(0, 0, 0, 0.05);
  --black-07: rgba(0, 0, 0, 0.07);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-100: #000000;
  --black-15: rgba(0, 0, 0, 0.15);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-90: rgba(0, 0, 0, 0.9);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-100: #ffffff;
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
}

[data-theme-provider=dark] {
  --background-00: #010202;
  --background-01: #080a0b;
  --background-02: #0f1215;
  --background-03: #171b1e;
  --background-04: #1e2227;
  --background-inverted: #e6e7e9;
  --neutral-10: #2c3339;
  --neutral-100: #ffffff;
  --neutral-20: #3b434c;
  --neutral-30: #515961;
  --neutral-40: #697078;
  --neutral-50: #82888f;
  --neutral-60: #9a9fa5;
  --neutral-70: #b4b7bd;
  --neutral-80: #cdcfd3;
  --neutral-90: #e6e7e9;
  --overlay-01: rgba(0, 0, 0, 0.16);
  --overlay-02: rgba(0, 0, 0, 0.4);
  --overlay-03: rgba(0, 0, 0, 0.8);
  --system-action-blue-base: #5d78ff;
  --system-action-blue-dark-1: #4665fd;
  --system-action-blue-dark-2: #334aba;
  --system-action-blue-light-1: #679ae6;
  --system-action-blue-light-2: #a1c8ff;
  --system-alert-yellow-base: #edce45;
  --system-alert-yellow-dark-1: #bea437;
  --system-alert-yellow-dark-2: #8e7b29;
  --system-alert-yellow-light-1: #f1d76a;
  --system-alert-yellow-light-2: #f4e18f;
  --system-danger-red-base: #e75f6d;
  --system-danger-red-dark-1: #b94c57;
  --system-danger-red-dark-2: #8b3941;
  --system-danger-red-light-1: #e27580;
  --system-danger-red-light-2: #f19fa7;
  --system-success-green-base: #3bcc75;
  --system-success-green-dark-1: #2fa35d;
  --system-success-green-dark-2: #237a46;
  --system-success-green-light-1: #62d690;
  --system-success-green-light-2: #89e0ac;
  --scroll-shadow-bottom: 0 2px 2px rgba(0, 0, 0, 0.12);
  --scroll-shadow-top: 0 -2px 2px rgba(0, 0, 0, 0.12);
  --shadow-01: 0 2px 16px rgba(0, 0, 0, 0.12);
  --shadow-02: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-03: 0 12px 24px rgba(0, 0, 0, 0.16), 0 2px 16px rgba(0, 0, 0, 0.24);
  --shadow-04: 0 8px 24px rgba(0, 0, 0, 0.32), 0 0 16px rgba(0, 0, 0, 0.16);
  --shadow-05: 0 8px 40px rgba(0, 0, 0, 0.48), 0 0 32px rgba(0, 0, 0, 0.32);
}

[data-theme-provider=light] {
  --background-00: #ffffff;
  --background-01: #f2f3f4;
  --background-02: #fafbfb;
  --background-03: #f4f5f5;
  --background-04: #f1f2f3;
  --background-inverted: #0f1215;
  --neutral-10: #edeff0;
  --neutral-100: #0b1420;
  --neutral-20: #e2e4e7;
  --neutral-30: #d1d5d9;
  --neutral-40: #b0b5bc;
  --neutral-50: #8f959e;
  --neutral-60: #6d7681;
  --neutral-70: #57616d;
  --neutral-80: #414c5a;
  --neutral-90: #2b3746;
  --overlay-01: rgba(0, 0, 0, 0.16);
  --overlay-02: rgba(0, 0, 0, 0.36);
  --overlay-03: rgba(0, 0, 0, 0.8);
  --system-action-blue-base: #4c6fff;
  --system-action-blue-dark-01: #3349ba;
  --system-action-blue-dark-02: #27388e;
  --system-action-blue-light-01: #a2c8ff;
  --system-action-blue-light-02: #d1e4ff;
  --system-alert-yellow-base: #edce45;
  --system-alert-yellow-dark-01: #a69b30;
  --system-alert-yellow-dark-02: #898021;
  --system-alert-yellow-light-01: #fff6a5;
  --system-alert-yellow-light-02: #fffbd2;
  --system-danger-red-base: #e75f6d;
  --system-danger-red-dark-1: #a24352;
  --system-danger-red-dark-2: #8c3442;
  --system-danger-red-light-1: #ffb4c0;
  --system-danger-red-light-2: #ffd9e0;
  --system-success-green-base: #3bcc75;
  --system-success-green-dark-1: #298f69;
  --system-success-green-dark-2: #1c7755;
  --system-success-green-light-1: #a4ffdd;
  --system-success-green-light-2: #d2ffee;
  --scroll-shadow-bottom: 0 2px 2px rgba(0, 0, 0, 0.06);
  --scroll-shadow-top: 0 -2px 2px rgba(0, 0, 0, 0.06);
  --shadow-01: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-02: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-03: 0 12px 24px rgba(0, 0, 0, 0.08), 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-04: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 16px rgba(0, 0, 0, 0.08);
  --shadow-05: 0 8px 40px rgba(0, 0, 0, 0.24), 0 0 32px rgba(0, 0, 0, 0.16);
}

:root {
  --token--neutral-01: rgba(251, 251, 252, 1);
  --token--neutral-02: rgba(245, 246, 247, 1);
  --token--neutral-03: rgba(242, 243, 245, 1);
  --token--neutral-04: rgba(236, 237, 239, 1);
  --token--neutral-10: rgba(227, 229, 232, 1);
  --token--neutral-20: rgba(213, 215, 219, 1);
  --token--neutral-30: rgba(176, 181, 186, 1);
  --token--neutral-40: rgba(156, 161, 167, 1);
  --token--neutral-50: rgba(131, 135, 139, 1);
  --token--neutral-60: rgba(103, 107, 112, 1);
  --token--neutral-70: rgba(81, 85, 91, 1);
  --token--neutral-80: rgba(56, 61, 66, 1);
  --token--neutral-90: rgba(32, 35, 39, 1);
  --token--neutral-95: rgba(23, 26, 29, 1);
  --token--neutral-100: rgba(9, 11, 12, 1);
  --token--system--action-01: rgba(250, 252, 255, 1);
  --token--system--action-02: rgba(236, 241, 255, 1);
  --token--system--action-10: rgba(216, 225, 255, 1);
  --token--system--action-20: rgba(187, 201, 254, 1);
  --token--system--action-30: rgba(153, 172, 254, 1);
  --token--system--action-40: rgba(111, 136, 254, 1);
  --token--system--action-50: rgba(68, 98, 248, 1);
  --token--system--action-60: rgba(60, 86, 218, 1);
  --token--system--action-70: rgba(51, 74, 186, 1);
  --token--system--action-80: rgba(42, 61, 155, 1);
  --token--system--action-90: rgba(34, 49, 123, 1);
  --token--system--action-100: rgba(25, 36, 91, 1);
  --token--system--alert-01: rgba(255, 254, 251, 1);
  --token--system--alert-02: rgba(254, 252, 237, 1);
  --token--system--alert-10: rgba(252, 247, 216, 1);
  --token--system--alert-20: rgba(250, 239, 188, 1);
  --token--system--alert-30: rgba(246, 230, 153, 1);
  --token--system--alert-40: rgba(242, 218, 111, 1);
  --token--system--alert-50: rgba(233, 203, 68, 1);
  --token--system--alert-60: rgba(208, 180, 57, 1);
  --token--system--alert-70: rgba(182, 157, 47, 1);
  --token--system--alert-80: rgba(157, 134, 36, 1);
  --token--system--alert-90: rgba(130, 111, 25, 1);
  --token--system--alert-100: rgba(104, 88, 15, 1);
  --token--system--success-01: rgba(251, 255, 253, 1);
  --token--system--success-02: rgba(236, 252, 244, 1);
  --token--system--success-10: rgba(214, 246, 230, 1);
  --token--system--success-20: rgba(184, 237, 209, 1);
  --token--system--success-30: rgba(147, 226, 182, 1);
  --token--system--success-40: rgba(102, 211, 149, 1);
  --token--system--success-50: rgba(56, 193, 113, 1);
  --token--system--success-60: rgba(47, 171, 99, 1);
  --token--system--success-70: rgba(38, 149, 84, 1);
  --token--system--success-80: rgba(29, 128, 70, 1);
  --token--system--success-90: rgba(20, 105, 55, 1);
  --token--system--success-100: rgba(11, 84, 40, 1);
  --token--system--danger-01: rgba(255, 251, 252, 1);
  --token--system--danger-02: rgba(254, 240, 242, 1);
  --token--system--danger-10: rgba(251, 221, 225, 1);
  --token--system--danger-20: rgba(248, 197, 203, 1);
  --token--system--danger-30: rgba(243, 168, 176, 1);
  --token--system--danger-40: rgba(237, 131, 142, 1);
  --token--system--danger-50: rgba(227, 93, 107, 1);
  --token--system--danger-60: rgba(200, 78, 91, 1);
  --token--system--danger-70: rgba(173, 63, 74, 1);
  --token--system--danger-80: rgba(145, 48, 58, 1);
  --token--system--danger-90: rgba(119, 33, 42, 1);
  --token--system--danger-100: rgba(92, 18, 26, 1);
  --token--opacity--white-05: rgba(255, 255, 255, 0.05);
  --token--opacity--white-07: rgba(255, 255, 255, 0.07);
  --token--opacity--white-10: rgba(255, 255, 255, 0.1);
  --token--opacity--white-20: rgba(255, 255, 255, 0.2);
  --token--opacity--white-30: rgba(255, 255, 255, 0.3);
  --token--opacity--white-40: rgba(255, 255, 255, 0.4);
  --token--opacity--white-50: rgba(255, 255, 255, 0.5);
  --token--opacity--white-60: rgba(255, 255, 255, 0.6);
  --token--opacity--white-70: rgba(255, 255, 255, 0.7);
  --token--opacity--white-80: rgba(255, 255, 255, 0.8);
  --token--opacity--white-90: rgba(255, 255, 255, 0.9);
  --token--opacity--white-100: rgba(255, 255, 255, 1);
  --token--opacity--black-05: rgba(0, 0, 0, 0.05);
  --token--opacity--black-07: rgba(0, 0, 0, 0.07);
  --token--opacity--black-10: rgba(0, 0, 0, 0.1);
  --token--opacity--black-20: rgba(0, 0, 0, 0.2);
  --token--opacity--black-30: rgba(0, 0, 0, 0.3);
  --token--opacity--black-40: rgba(0, 0, 0, 0.4);
  --token--opacity--black-50: rgba(0, 0, 0, 0.5);
  --token--opacity--black-60: rgba(0, 0, 0, 0.6);
  --token--opacity--black-70: rgba(0, 0, 0, 0.7);
  --token--opacity--black-80: rgba(0, 0, 0, 0.8);
  --token--opacity--black-90: rgba(0, 0, 0, 0.9);
  --token--opacity--black-100: rgba(0, 0, 0, 1);
}

[data-theme-provider=dark] {
  --neutral-primary: var(--token--neutral-01);
  --neutral-secondary: var(--token--neutral-03);
  --neutral-tertiary: var(--token--neutral-10);
  --neutral-quaternary: var(--token--neutral-40);
  --neutral-faded: var(--token--neutral-80);
  --neutral-white: rgba(255, 255, 255, 1);
  --neutral-black: rgba(0, 0, 0, 1);
  --background-primary: var(--token--neutral-100);
  --background-secondary: var(--token--neutral-95);
  --background-tertiary: var(--token--neutral-90);
  --opacity-mild: rgba(255, 255, 255, 0.08);
  --opacity-medium: rgba(255, 255, 255, 0.16);
  --opacity-strong: rgba(255, 255, 255, 0.24);
  --opacity-very-strong: rgba(255, 255, 255, 0.32);
  --action-default: var(--token--system--action-40);
  --action-hover: var(--token--system--action-30);
  --action-focus: var(--token--system--action-30);
  --action-faded: var(--token--system--action-20);
  --action-hint: var(--token--system--action-10);
  --danger-default: var(--token--system--danger-40);
  --danger-hover: var(--token--system--danger-30);
  --danger-focus: var(--token--system--danger-30);
  --danger-faded: var(--token--system--danger-20);
  --danger-hint: var(--token--system--danger-10);
  --alert-default: var(--token--system--alert-40);
  --alert-hover: var(--token--system--alert-30);
  --alert-focus: var(--token--system--alert-30);
  --alert-faded: var(--token--system--alert-20);
  --alert-hint: var(--token--system--alert-10);
  --success-default: var(--token--system--success-40);
  --success-hover: var(--token--system--success-30);
  --success-focus: var(--token--system--success-30);
  --success-faded: var(--token--system--success-20);
  --success-hint: var(--token--system--success-10);
}

[data-theme-provider=light] {
  --neutral-primary: var(--token--neutral-100);
  --neutral-secondary: var(--token--neutral-80);
  --neutral-tertiary: var(--token--neutral-60);
  --neutral-quaternary: var(--token--neutral-40);
  --neutral-faded: var(--token--neutral-20);
  --neutral-white: rgba(255, 255, 255, 1);
  --neutral-black: rgba(0, 0, 0, 1);
  --background-primary: rgba(255, 255, 255, 1);
  --background-secondary: var(--token--neutral-01);
  --background-tertiary: var(--token--neutral-03);
  --opacity-mild: var(--token--opacity--black-05);
  --opacity-medium: var(--token--opacity--black-10);
  --opacity-strong: var(--token--opacity--black-20);
  --opacity-very-strong: var(--token--opacity--black-30);
  --action-default: var(--token--system--action-50);
  --action-hover: var(--token--system--action-60);
  --action-focus: var(--token--system--action-60);
  --action-faded: var(--token--system--action-20);
  --action-hint: var(--token--system--action-10);
  --danger-default: var(--token--system--danger-50);
  --danger-hover: var(--token--system--danger-60);
  --danger-focus: var(--token--system--danger-60);
  --danger-faded: var(--token--system--danger-20);
  --danger-hint: var(--token--system--danger-10);
  --alert-default: var(--token--system--alert-50);
  --alert-hover: var(--token--system--alert-60);
  --alert-focus: var(--token--system--alert-60);
  --alert-faded: var(--token--system--alert-20);
  --alert-hint: var(--token--system--alert-10);
  --success-default: var(--token--system--success-50);
  --success-hover: var(--token--system--success-60);
  --success-focus: var(--token--system--success-60);
  --success-faded: var(--token--system--success-20);
  --success-hint: var(--token--system--success-10);
}

.a-menu-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 400;
  padding-bottom: 5px;
  color: #a4aabb;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  display: inline-flex;
}
body:not(.using-mouse) .a-menu-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.a-menu-button::-moz-focus-inner {
  border: 0;
}
.a-menu-button:hover:not([disabled]):not(.active) {
  color: #8088a1;
}
.a-menu-button:active:not([disabled]):not(.active) {
  color: #495578;
  border-bottom-color: #d3d6df;
}
.a-menu-button:disabled {
  color: #d3d6df;
  cursor: not-allowed;
}
.a-menu-button.active {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.15px;
  font-family: Roboto;
  font-weight: 700;
  color: #4564fd;
  border-bottom-color: #4564fd;
}

.a-menu[data-style=large] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 16px;
  position: relative;
  padding: 0 24px;
  margin-left: -24px;
  margin-right: -24px;
}

.a-tag-text {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  grid-area: text;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.a-tag-content {
  display: grid;
  position: relative;
  height: 24px;
  align-items: center;
}

.a-tag-content[data-style=icon-text-button] {
  grid-template-columns: 5px 18px 4px 1fr 8px 18px 8px;
  grid-template-areas: ". icon . text . button .";
}

.a-tag-content[data-style=icon-text] {
  grid-template-columns: 5px 14px 4px 1fr 12px;
  grid-template-areas: ". icon . text .";
}

.a-tag-content[data-style=text-button] {
  grid-template-columns: 12px 1fr 8px 18px 8px;
  grid-template-areas: ". text . button .";
}

.a-tag-content[data-style=text] {
  grid-template-columns: 12px 1fr 12px;
  grid-template-areas: ". text .";
}

.a-tag-content[data-style=icon] {
  grid-template-columns: 5px 14px 5px;
  grid-template-areas: ". icon . ";
}

.a-tag-remove-button[data-remove-style=visible] {
  grid-area: button;
}

.a-tag-remove-button[data-remove-style=hover] {
  isolation: isolate;
  position: absolute;
  transition: opacity 0.3s ease;
  right: 8px;
  opacity: 0;
}
@supports not (isolation: isolate) {
  .a-tag-remove-button[data-remove-style=hover] {
    transform: scale(1);
  }
}
.a-tag-remove-button[data-remove-style=hover]:focus-within {
  opacity: 1;
}
.a-tag-remove-button[data-remove-style=hover]:after {
  content: "";
  pointer-events: none;
  z-index: -1;
  position: absolute;
  width: 47px;
  right: -8px;
  top: -5px;
  bottom: -5px;
  border-radius: 0 14px 14px 0;
}

.a-tag-default-primary[data-theme=light] .a-tag-remove-button[data-remove-style=hover]:after {
  background: linear-gradient(90deg, rgba(242, 243, 252, 0) 0%, #f2f3fc 16px);
}

.a-tag-default-primary[data-theme=light-outline] .a-tag-remove-button[data-remove-style=hover]:after {
  background: linear-gradient(90deg, rgba(242, 243, 252, 0) 0%, #f2f3fc 16px);
}

.a-tag-default-primary[data-theme=dark] .a-tag-remove-button[data-remove-style=hover]:after {
  background: linear-gradient(90deg, rgba(242, 243, 252, 0) 0%, #293647 16px);
}

.a-tag-default-primary[data-theme=dark-outline] .a-tag-remove-button[data-remove-style=hover]:after {
  background: linear-gradient(90deg, rgba(242, 243, 252, 0) 0%, #293647 16px);
}

.a-tag-content:hover .a-tag-remove-button[data-remove-style=hover] {
  opacity: 1;
}

.a-tag-remove-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  width: 14px;
  height: 14px;
  display: flex;
  outline: none;
  fill: #a4aabb;
}
.a-tag-remove-button:hover {
  fill: #495578;
}

.a-tag-icon {
  display: flex;
  width: max-content;
  grid-area: icon;
}

.a-tag-default-primary {
  outline: none;
  position: relative;
  fill: #383a3d;
  border-radius: 14px;
  flex-shrink: 0;
}
body:not(.using-mouse) .a-tag-default-primary:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 28px;
}
.a-tag-default-primary::-moz-focus-inner {
  border: 0;
}

.a-tag-default-primary[data-theme=light] {
  background-color: #f2f3f9;
  color: #3c4756;
}

.a-tag-default-primary[data-theme=light-outline] {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px #f0f0f0;
  color: #3c4756;
}

.a-tag-default-primary[data-theme=dark] {
  background-color: #293647;
  color: #d2d6df;
}

.a-tag-default-primary[data-theme=dark-outline] {
  box-shadow: inset 0 0 0 1px var(--neutral-20);
  color: #eef1fb;
}

.a-tag-filter {
  outline: none;
  position: relative;
  fill: #383a3d;
  border-radius: 14px;
  background-color: #f2f3f9;
  color: #3c4756;
}
body:not(.using-mouse) .a-tag-filter:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 28px;
}
.a-tag-filter::-moz-focus-inner {
  border: 0;
}

.a-tag-filter[data-style=filter-text] {
  background: white;
  box-shadow: inset 0px 0px 0px 1px #e3e6f1;
  border: 1px solid transparent;
}
.a-tag-filter[data-style=filter-text]:hover {
  border: 1px solid #364fc2;
}
.a-tag-filter[data-style=filter-text]:active {
  border: 1px solid #9aabf5;
}

.a-tag-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  fill: #383a3d;
  border-radius: 14px;
  background-color: #f2f3f9;
  color: #3c4756;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
body:not(.using-mouse) .a-tag-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 28px;
}
.a-tag-button::-moz-focus-inner {
  border: 0;
}
.a-tag-button:not(:disabled):hover {
  background: #eff0fc;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.13);
}
.a-tag-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.alert-footer-button .button-text {
  max-width: 280px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.alert-dialog--container > .dialogue {
  z-index: 400;
}

.app-navigation--list-entry {
  display: grid;
}

.app-navigation--collection-list {
  margin: 2px 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.app-navigation--list-drop-zone {
  position: relative;
}

.app-navigation--list-drop-zone[data-over]::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--system-action-blue-base);
  border-radius: 2px;
  pointer-events: none;
}

@media (hover: none) {
  .app-navigation--list-entry--context-menu-button {
    opacity: 1;
  }
}
@media (hover: hover) {
  .app-navigation--list-entry--context-menu-button {
    opacity: 0;
  }
  .app-navigation--list-entry--context-menu-button:focus {
    opacity: 1;
  }
}
.navigation-button:hover .app-navigation--list-entry--context-menu-button {
  opacity: 1;
}

.app-navigation--list-entry-empty {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  justify-items: center;
  border: 1px dashed #697078;
  margin: 2px 0;
  padding: 5px;
}

@media (hover: none) {
  .app-navigation--expand-child-button {
    opacity: 1;
  }
}
@media (hover: hover) {
  .app-navigation--expand-child-button {
    opacity: 0;
  }
  .app-navigation--expand-child-button:focus {
    opacity: 1;
  }
}
.navigation-section:hover .app-navigation--expand-child-button {
  opacity: 1;
}

.app-navigation--button-menu {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  background: transparent;
  fill: var(--neutral-60);
  color: var(--neutral-80);
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 4px;
  padding: 6px 6px 6px 10px;
  border-radius: 2px;
  text-align: left;
}
body:not(.using-mouse) .app-navigation--button-menu:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.app-navigation--button-menu::-moz-focus-inner {
  border: 0;
}
.app-navigation--button-menu:hover {
  background: var(--white-10);
  fill: var(--neutral-80);
}
.app-navigation--button-menu:focus {
  background: var(--white-15);
  fill: var(--neutral-80);
}
.app-navigation--button-menu:active {
  background: var(--white-15);
}
.app-navigation--button-menu:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.app-navigation--button-menu-text {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  max-width: 158px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.app-navigation--button-menu[aria-expanded=true] {
  background: var(--white-15);
  fill: var(--neutral-80);
}

.app-navigation--create-menu {
  width: 240px;
}

.app-navigation--menu {
  width: 280px;
}

.app-navigation--menu--non-ideal-state {
  padding: 24px 0;
}

.avatar {
  border-radius: 50%;
}

.board-layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--board-layout-grid-columns), 1fr);
  grid-template-rows: repeat(var(--board-layout-grid-rows), 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
}

.board-layout-grid--visualization {
  grid-column-end: span var(--board-layout-grid--visualization-width);
  grid-row-end: span var(--board-layout-grid--visualization-height);
  contain: size layout paint;
}

.board-layout-grid::before {
  content: "";
  aspect-ratio: 1;
  width: 0;
  padding-bottom: 100%;
  grid-row: 1/1;
  grid-column: 1/1;
}

.board-layout-grid > .board-layout-grid--visualization:first-child {
  grid-row-start: 1;
  grid-column-start: 1;
}

.map-section--map-container {
  position: absolute;
  inset: 0;
  display: grid;
  border-radius: 4px;
}

.map-section--map {
  border-radius: 4px;
}

.board--grid {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  grid-auto-flow: row;
  list-style: none;
  --board-columns: 4;
}
.board--grid[data-editable] {
  gap: 0;
  margin-top: -12px;
}

.board-plot--timestamp {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  width: initial;
  color: var(--neutral-80);
  padding: 4px 8px;
  pointer-events: none;
}

/* Graph Colors */
/* Dimensions */
.m-card {
  position: relative;
  background-color: #ffffff;
  transition: box-shadow 0.25s;
  border-radius: 0;
  border: 1px solid #e6e8ed;
  padding: 18px 24px 16px 24px;
}
.m-card:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #c9ccd1;
}
.m-card:focus-within {
  border: 1px solid #e6e8ed;
}

.m-card--footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Graph Colors */
/* Dimensions */
.color-popover {
  border-radius: 6px;
  background-color: var(--background-04);
  border: 1px solid var(--neutral-10);
  box-shadow: var(--shadow-02);
  padding: 12px;
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
}

.color-popover-content {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.color-popover-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.color-popover-item {
  width: 23px;
  height: 23px;
  padding: 1px;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}

.color-popover-item:not([data-selected]):hover {
  box-shadow: 0 0 0 1px var(--neutral-60);
}

.color-popover-item[data-selected] {
  box-shadow: 0 0 0 1px var(--neutral-100);
}

.color-popover-item[data-color=grey-01] {
  background-color: #dce0f6;
}

.color-popover-item[data-color=grey-02] {
  background-color: #b9bdd3;
}

.color-popover-item[data-color=grey-03] {
  background-color: #9095a9;
}

.color-popover-item[data-color=grey-04] {
  background-color: #696d81;
}

.color-popover-item[data-color=blue-01] {
  background-color: #2a61ed;
}

.color-popover-item[data-color=blue-02] {
  background-color: #5381f3;
}

.color-popover-item[data-color=blue-03] {
  background-color: #86a9f9;
}

.color-popover-item[data-color=blue-04] {
  background-color: #aec8fe;
}

.color-popover-item[data-color=cyan-01] {
  background-color: #08abbc;
}

.color-popover-item[data-color=cyan-02] {
  background-color: #3fc3d0;
}

.color-popover-item[data-color=cyan-03] {
  background-color: #75dae3;
}

.color-popover-item[data-color=cyan-04] {
  background-color: #adf2f7;
}

.color-popover-item[data-color=yellow-01] {
  background-color: #df9d1d;
}

.color-popover-item[data-color=yellow-02] {
  background-color: #e8b34c;
}

.color-popover-item[data-color=yellow-03] {
  background-color: #f2ca7e;
}

.color-popover-item[data-color=yellow-04] {
  background-color: #fbe0ac;
}

.color-popover-item[data-color=purple-01] {
  background-color: #7e36ea;
}

.color-popover-item[data-color=purple-02] {
  background-color: #975cf0;
}

.color-popover-item[data-color=purple-03] {
  background-color: #b589f7;
}

.color-popover-item[data-color=purple-04] {
  background-color: #d1b5fd;
}

.color-popover-item[data-color=purple-05] {
  background-color: #d1b5fd;
}

.color-popover-item[data-color=pink-01] {
  background-color: #d821e7;
}

.color-popover-item[data-color=pink-02] {
  background-color: #e45ae7;
}

.color-popover-item[data-color=pink-03] {
  background-color: #ef8ce7;
}

.color-popover-item[data-color=pink-04] {
  background-color: #fabce6;
}

.color-popover-item[data-color=green-01] {
  background-color: #1ddf30;
}

.color-popover-item[data-color=green-02] {
  background-color: #4fe85b;
}

.color-popover-item[data-color=green-03] {
  background-color: #82f188;
}

.color-popover-item[data-color=green-04] {
  background-color: #b6fbb5;
}

.color-popover-item[data-color=red-01] {
  background-color: #df301d;
}

.color-popover-item[data-color=red-02] {
  background-color: #e85e4e;
}

.color-popover-item[data-color=red-03] {
  background-color: #f18b80;
}

.color-popover-item[data-color=red-04] {
  background-color: #fbbbb4;
}

.color-popover-item[data-color=blue-ocean-01] {
  background-color: #1a3078;
}

.color-popover-item[data-color=blue-ocean-02] {
  background-color: #2542a1;
}

.color-popover-item[data-color=blue-ocean-03] {
  background-color: #318fee;
}

.color-popover-item[data-color=blue-ocean-04] {
  background-color: #5973de;
}

.color-popover-item[data-color=blue-ocean-05] {
  background-color: #8497e0;
}

.color-popover-item[data-color=blue-ocean-06] {
  background-color: #bac2e0;
}

.color-popover-item[data-color=blue-ocean-07] {
  background-color: #fefefe;
}

.color-popover-item[data-color=threshold-neutral-01] {
  background-color: #99aaff;
}

.color-popover-item[data-color=threshold-neutral-02] {
  background-color: #7c88c3;
}

.color-popover-item[data-color=threshold-neutral-03] {
  background-color: #425e82;
}

.color-popover-item[data-color=threshold-negative-01] {
  background-color: #c43e62;
}

.color-popover-item[data-color=threshold-negative-02] {
  background-color: #e75f6d;
}

.color-popover-item[data-color=threshold-negative-03] {
  background-color: #f0959e;
}

.color-popover-item[data-color=threshold-negative-04] {
  background-color: #f2c4c8;
}

.color-popover-item[data-color=threshold-positive-01] {
  background-color: #1ae39b;
}

.color-popover-item[data-color=threshold-positive-02] {
  background-color: #39bb8c;
}

.color-popover-item[data-color=threshold-medium-01] {
  background-color: #f6da60;
}

.gradient-popover-content {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
}

.gradient-popover-color {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 3px;
  height: 22px;
  margin: 1px;
  background: linear-gradient(to right in hsl, var(--gradient-from), var(--gradient-to));
}

.gradient-popover-color[data-selected] {
  box-shadow: 0 0 0 1px var(--neutral-white);
}

.gradient-popover-color[data-color=gradient-red-blue] {
  --gradient-from: #ff4d4d;
  --gradient-to: #6789ff;
}

.gradient-popover-color[data-color=gradient-red-green] {
  --gradient-from: #ff434e;
  --gradient-to: #44ff9a;
}

.gradient-popover-color[data-color=gradient-yellow-purple] {
  --gradient-from: #ffdd65;
  --gradient-to: #9659ff;
}

.gradient-popover-color[data-color=gradient-yellow-blue] {
  --gradient-from: #ffe96a;
  --gradient-to: #5044ff;
}

.gradient-popover-color[data-color=gradient-magenta-cyan] {
  --gradient-from: #f05cc9;
  --gradient-to: #44cdff;
}

/* Graph Colors */
/* Dimensions */
.gradient-popover {
  gap: 0;
  width: max-content;
  contain: layout;
}

.gradient-popover--preview {
  display: grid;
  width: 100%;
  gap: 4px;
  justify-content: space-between;
  grid-template: "preview preview preview" auto "low . high" auto/max-content 1fr max-content;
}

.gradient-popover--header {
  padding: 6px 12px;
  grid-template-columns: max-content max-content 1fr;
}

.gradient-popover--flip {
  justify-self: end;
}

.gradient-popover--content {
  padding: 8px 12px;
  gap: 8px;
  display: grid;
  border-top: 1px solid var(--opacity-medium);
}

.gradient-popover--preview-preview {
  grid-area: preview;
  box-shadow: 0 0 0 1px var(--opacity-medium);
  border-radius: 4px;
  height: 22px;
  margin: 1px;
  background: linear-gradient(to right in hsl, var(--gradient-from), var(--gradient-to));
}

.gradient-popover--preview-preview[data-color=grey-01] {
  --gradient-from: rgba(220, 224, 246, 0);
  --gradient-to: #dce0f6;
}

.gradient-popover--preview-preview[data-color=grey-02] {
  --gradient-from: rgba(185, 189, 211, 0);
  --gradient-to: #b9bdd3;
}

.gradient-popover--preview-preview[data-color=grey-03] {
  --gradient-from: rgba(144, 149, 169, 0);
  --gradient-to: #9095a9;
}

.gradient-popover--preview-preview[data-color=grey-04] {
  --gradient-from: rgba(105, 109, 129, 0);
  --gradient-to: #696d81;
}

.gradient-popover--preview-preview[data-color=blue-01] {
  --gradient-from: rgba(42, 97, 237, 0);
  --gradient-to: #2a61ed;
}

.gradient-popover--preview-preview[data-color=blue-02] {
  --gradient-from: rgba(83, 129, 243, 0);
  --gradient-to: #5381f3;
}

.gradient-popover--preview-preview[data-color=blue-03] {
  --gradient-from: rgba(134, 169, 249, 0);
  --gradient-to: #86a9f9;
}

.gradient-popover--preview-preview[data-color=blue-04] {
  --gradient-from: rgba(174, 200, 254, 0);
  --gradient-to: #aec8fe;
}

.gradient-popover--preview-preview[data-color=cyan-01] {
  --gradient-from: rgba(8, 171, 188, 0);
  --gradient-to: #08abbc;
}

.gradient-popover--preview-preview[data-color=cyan-02] {
  --gradient-from: rgba(63, 195, 208, 0);
  --gradient-to: #3fc3d0;
}

.gradient-popover--preview-preview[data-color=cyan-03] {
  --gradient-from: rgba(117, 218, 227, 0);
  --gradient-to: #75dae3;
}

.gradient-popover--preview-preview[data-color=cyan-04] {
  --gradient-from: rgba(173, 242, 247, 0);
  --gradient-to: #adf2f7;
}

.gradient-popover--preview-preview[data-color=yellow-01] {
  --gradient-from: rgba(223, 157, 29, 0);
  --gradient-to: #df9d1d;
}

.gradient-popover--preview-preview[data-color=yellow-02] {
  --gradient-from: rgba(232, 179, 76, 0);
  --gradient-to: #e8b34c;
}

.gradient-popover--preview-preview[data-color=yellow-03] {
  --gradient-from: rgba(242, 202, 126, 0);
  --gradient-to: #f2ca7e;
}

.gradient-popover--preview-preview[data-color=yellow-04] {
  --gradient-from: rgba(251, 224, 172, 0);
  --gradient-to: #fbe0ac;
}

.gradient-popover--preview-preview[data-color=purple-01] {
  --gradient-from: rgba(126, 54, 234, 0);
  --gradient-to: #7e36ea;
}

.gradient-popover--preview-preview[data-color=purple-02] {
  --gradient-from: rgba(151, 92, 240, 0);
  --gradient-to: #975cf0;
}

.gradient-popover--preview-preview[data-color=purple-03] {
  --gradient-from: rgba(181, 137, 247, 0);
  --gradient-to: #b589f7;
}

.gradient-popover--preview-preview[data-color=purple-04] {
  --gradient-from: rgba(209, 181, 253, 0);
  --gradient-to: #d1b5fd;
}

.gradient-popover--preview-preview[data-color=purple-05] {
  --gradient-from: rgba(209, 181, 253, 0);
  --gradient-to: #d1b5fd;
}

.gradient-popover--preview-preview[data-color=pink-01] {
  --gradient-from: rgba(216, 33, 231, 0);
  --gradient-to: #d821e7;
}

.gradient-popover--preview-preview[data-color=pink-02] {
  --gradient-from: rgba(228, 90, 231, 0);
  --gradient-to: #e45ae7;
}

.gradient-popover--preview-preview[data-color=pink-03] {
  --gradient-from: rgba(239, 140, 231, 0);
  --gradient-to: #ef8ce7;
}

.gradient-popover--preview-preview[data-color=pink-04] {
  --gradient-from: rgba(250, 188, 230, 0);
  --gradient-to: #fabce6;
}

.gradient-popover--preview-preview[data-color=green-01] {
  --gradient-from: rgba(29, 223, 48, 0);
  --gradient-to: #1ddf30;
}

.gradient-popover--preview-preview[data-color=green-02] {
  --gradient-from: rgba(79, 232, 91, 0);
  --gradient-to: #4fe85b;
}

.gradient-popover--preview-preview[data-color=green-03] {
  --gradient-from: rgba(130, 241, 136, 0);
  --gradient-to: #82f188;
}

.gradient-popover--preview-preview[data-color=green-04] {
  --gradient-from: rgba(182, 251, 181, 0);
  --gradient-to: #b6fbb5;
}

.gradient-popover--preview-preview[data-color=red-01] {
  --gradient-from: rgba(223, 48, 29, 0);
  --gradient-to: #df301d;
}

.gradient-popover--preview-preview[data-color=red-02] {
  --gradient-from: rgba(232, 94, 78, 0);
  --gradient-to: #e85e4e;
}

.gradient-popover--preview-preview[data-color=red-03] {
  --gradient-from: rgba(241, 139, 128, 0);
  --gradient-to: #f18b80;
}

.gradient-popover--preview-preview[data-color=red-04] {
  --gradient-from: rgba(251, 187, 180, 0);
  --gradient-to: #fbbbb4;
}

.gradient-popover--preview-preview[data-color=blue-ocean-01] {
  --gradient-from: rgba(26, 48, 120, 0);
  --gradient-to: #1a3078;
}

.gradient-popover--preview-preview[data-color=blue-ocean-02] {
  --gradient-from: rgba(37, 66, 161, 0);
  --gradient-to: #2542a1;
}

.gradient-popover--preview-preview[data-color=blue-ocean-03] {
  --gradient-from: rgba(49, 143, 238, 0);
  --gradient-to: #318fee;
}

.gradient-popover--preview-preview[data-color=blue-ocean-04] {
  --gradient-from: rgba(89, 115, 222, 0);
  --gradient-to: #5973de;
}

.gradient-popover--preview-preview[data-color=blue-ocean-05] {
  --gradient-from: rgba(132, 151, 224, 0);
  --gradient-to: #8497e0;
}

.gradient-popover--preview-preview[data-color=blue-ocean-06] {
  --gradient-from: rgba(186, 194, 224, 0);
  --gradient-to: #bac2e0;
}

.gradient-popover--preview-preview[data-color=blue-ocean-07] {
  --gradient-from: rgba(254, 254, 254, 0);
  --gradient-to: #fefefe;
}

.gradient-popover--preview-preview[data-color=threshold-neutral-01] {
  --gradient-from: rgba(153, 170, 255, 0);
  --gradient-to: #99aaff;
}

.gradient-popover--preview-preview[data-color=threshold-neutral-02] {
  --gradient-from: rgba(124, 136, 195, 0);
  --gradient-to: #7c88c3;
}

.gradient-popover--preview-preview[data-color=threshold-neutral-03] {
  --gradient-from: rgba(66, 94, 130, 0);
  --gradient-to: #425e82;
}

.gradient-popover--preview-preview[data-color=threshold-negative-01] {
  --gradient-from: rgba(196, 62, 98, 0);
  --gradient-to: #c43e62;
}

.gradient-popover--preview-preview[data-color=threshold-negative-02] {
  --gradient-from: rgba(231, 95, 109, 0);
  --gradient-to: #e75f6d;
}

.gradient-popover--preview-preview[data-color=threshold-negative-03] {
  --gradient-from: rgba(240, 149, 158, 0);
  --gradient-to: #f0959e;
}

.gradient-popover--preview-preview[data-color=threshold-negative-04] {
  --gradient-from: rgba(242, 196, 200, 0);
  --gradient-to: #f2c4c8;
}

.gradient-popover--preview-preview[data-color=threshold-positive-01] {
  --gradient-from: rgba(26, 227, 155, 0);
  --gradient-to: #1ae39b;
}

.gradient-popover--preview-preview[data-color=threshold-positive-02] {
  --gradient-from: rgba(57, 187, 140, 0);
  --gradient-to: #39bb8c;
}

.gradient-popover--preview-preview[data-color=threshold-medium-01] {
  --gradient-from: rgba(246, 218, 96, 0);
  --gradient-to: #f6da60;
}

.gradient-popover--preview-preview[data-color=gradient-red-blue] {
  --gradient-from: #ff4d4d;
  --gradient-to: #6789ff;
}

.gradient-popover--preview-preview[data-color=gradient-red-green] {
  --gradient-from: #ff434e;
  --gradient-to: #44ff9a;
}

.gradient-popover--preview-preview[data-color=gradient-yellow-purple] {
  --gradient-from: #ffdd65;
  --gradient-to: #9659ff;
}

.gradient-popover--preview-preview[data-color=gradient-yellow-blue] {
  --gradient-from: #ffe96a;
  --gradient-to: #5044ff;
}

.gradient-popover--preview-preview[data-color=gradient-magenta-cyan] {
  --gradient-from: #f05cc9;
  --gradient-to: #44cdff;
}

.gradient-popover--preview-text {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
}

.gradient-popover--preview-text.high {
  grid-area: high;
}

.gradient-popover--opacity {
  display: grid;
  gap: 6px;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
}

.gradient-popover--opacity-value {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 4px;
  grid-auto-flow: column;
  color: var(--neutral-primary);
  background: var(--opacity-mild);
  width: 55px;
  border-radius: 4px;
  padding: 6px 8px;
}

.gradient-popover--opacity-number {
  text-align: right;
}

.gradient-popover--opacity-percent {
  color: var(--neutral-quaternary);
}

.comment-feed-date-header {
  isolation: isolate;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}
@supports not (isolation: isolate) {
  .comment-feed-date-header {
    transform: scale(1);
  }
}

.comment-feed-date-header-border {
  position: absolute;
  left: 0;
  right: 0;
  content: "";
  height: 1px;
  background: var(--white-10);
}

.comment-feed-date-header-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  padding: 5px 7px;
  border: 1px solid var(--white-10);
  background: var(--background-04);
  z-index: 1;
}

.comment-feed {
  display: grid;
  gap: 4px;
}

.comment-comment-image {
  margin-top: 8px;
}
.comment-comment-image:first-child {
  margin-top: 8px;
}
.comment-comment-image:last-child {
  margin-bottom: 0;
}

.comment ~ .comment-header {
  margin-top: 10px;
}

.comment-container ~ .comment-header {
  margin-top: 20px;
}

.comment-container:last-child {
  margin-bottom: 12px;
}

.comment-attachment {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: start;
}

.comment-attachment-icon {
  align-self: center;
  fill: var(--neutral-80);
}

.comment-attachment-content {
  padding: 6px 12px;
  color: var(--neutral-80);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--white-20);
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.comment-attachment-content-text {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.comment-attachment-content:hover .comment-attachment-download {
  opacity: 1;
}

.comment-attachment-content:active .comment-attachment-download {
  font-weight: bold;
}

.comment-attachment-download {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  transition: opacity 200ms ease;
  color: var(--neutral-80);
  opacity: 0;
  text-decoration: none;
}

.comment-attachment-remove-container {
  position: relative;
}

.comment-attachment-remove {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  border: 1px solid var(--background-04);
  border-radius: 50%;
  background-color: var(--neutral-40);
  fill: var(--background-04);
  color: var(--system-danger-red-base);
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.using-mouse) .comment-attachment-remove:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.comment-attachment-remove::-moz-focus-inner {
  border: 0;
}
.comment-attachment-remove:hover:not(:focus):not(:disabled) {
  background-color: var(--neutral-80);
}
.comment-attachment-remove:disabled {
  background-color: var(--neutral-30);
}
.comment-attachment-remove:focus {
  background-color: var(--neutral-40);
}

.comment-header {
  display: grid;
  grid-template: "avatar name"/24px minmax(0, 1fr);
  gap: 8px;
  padding-left: 16px;
  margin-bottom: -4px;
}

.comment-feed .comment-header:first-child {
  margin-top: 12px;
}

.comment-header-avatar {
  grid-area: avatar;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ccc;
}

.comment-header-avatar img {
  border-radius: 50%;
}

.comment-header-content {
  grid-area: name;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  justify-content: start;
  padding: 2px 0;
}

.comment-header-name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
}

.comment-header-timestamp {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
}

.comment-image .image {
  display: block;
  border-radius: 5px;
  max-width: 100%;
  height: auto;
}

.image-placeholder {
  background: #d8dcf0;
  border-radius: 5px;
  max-width: 100%;
  height: auto;
}

.comment {
  display: grid;
  gap: 4px;
  margin-left: 48px;
}

.comment--editor {
  flex-grow: 1;
  padding: 8px 0 8px 60px;
  background: var(--background-04);
}

.thread-edit--editor {
  padding-right: 32px;
}

.content-text-bubble {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  display: inline-block;
}

.comment-images {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: end;
}

.comment-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 4px;
  padding-right: 16px;
}

.comment-container[data-highlight],
.comment-container[data-editing],
.comment-container:hover {
  background: var(--background-04);
}

.comment-container:hover .comment-button-hiddenbox-secondary {
  opacity: 1;
}

.comment-button-hiddenbox-secondary[aria-expanded=false] {
  opacity: 0;
}

.comment-text-content--edited {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--neutral-40);
}

.date-time-picker--form {
  display: grid;
  gap: 8px;
  grid-auto-flow: row;
}

.date-time-picker--buttons {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
}

.time-range-popover--fieldset {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr max-content max-content;
}

.time-range-popover--date {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
  width: 84px;
  border-radius: 2px;
  padding: 6px 8px;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--neutral-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-range-popover--date:hover {
  box-shadow: inset 0 0 0 1px var(--neutral-30);
}
.time-range-popover--date:focus-visible {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.time-range-popover--date[data-size=small] {
  height: 28px;
}

.time-range-popover--date[data-size=medium] {
  height: 32px;
}

.time-range-popover--date:not([value]) {
  color: var(--neutral-50);
}

.time-range-popover--date-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  align-self: center;
}

.time-input {
  border-radius: 2px;
  outline: none;
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  box-shadow: inset 0 0 0 1px var(--neutral-10);
  padding: 6px 8px;
}
.time-input:hover {
  box-shadow: inset 0 0 0 1px var(--neutral-30);
}
.time-input:focus-within {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.time-input[data-size=small] {
  height: 28px;
}

.time-input[data-size=medium] {
  height: 32px;
}

.time-input--input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
  outline: none;
  min-width: 16px;
  height: 16px;
  border: none;
  padding: 0;
  background: none;
  padding: 0 2px;
}
.time-input--input:hover, .time-input--input:focus {
  border-radius: 2px;
  background: var(--neutral-30);
}

.time-input--separator {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
}

.time-input--meridiem {
  padding: 0 2px;
  margin-left: 1px;
  position: relative;
  display: flex;
}

.time-input--meridiem:hover,
.time-input--meridiem:focus-within {
  border-radius: 2px;
  background: var(--neutral-30);
}

.time-input--select-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
}

.time-input--select {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.subjects-listbox {
  display: flex;
  align-content: center;
  gap: 0px;
  box-shadow: var(--shadow-02), inset 0 0 0 1px var(--neutral-10);
  background: var(--background-04);
  width: 260px;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
}

.subjects-listbox--entries {
  flex-grow: 1;
  display: grid;
  grid-auto-rows: max-content;
  gap: 0px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.subjects-listbox--list-item {
  padding: 6px 12px;
  cursor: pointer;
}

.subjects-listbox--list-item[aria-selected=true],
.subjects-listbox--list-item:hover {
  background: var(--neutral-10);
}

.subjects-listbox-–non-ideal-state {
  height: 140px;
}

.document-roles-popover-token {
  height: 24px;
  box-shadow: inset 0 0 0 1px var(--white-07);
  color: var(--neutral-80);
  fill: var(--neutral-60);
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  padding: 2px 4px 2px 6px;
  gap: 2px;
  border-radius: 4px;
  outline: none;
}
.document-roles-popover-token:hover:not(:focus) {
  fill: var(--neutral-80);
  background: var(--white-07);
}
.document-roles-popover-token:focus, .document-roles-popover-token[aria-selected=true] {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
  background: var(--system-action-blue-base);
  color: var(--neutral-100);
  fill: var(--neutral-100);
}

.document-roles-popover-token--text {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.document-roles-popover-token--remove-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  height: 20px;
  width: 20px;
  display: grid;
  justify-items: center;
  align-content: center;
}

.document-roles-popover {
  width: 420px;
  display: grid;
  gap: 16px;
}

.document-roles-popover--header {
  display: grid;
  align-items: start;
  gap: 4px;
  grid-template-columns: 1fr max-content max-content;
}

.document-roles-popover--input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  border: none;
  outline: none;
  background: transparent;
  height: 16px;
  width: 120px;
  color: var(--neutral-100);
}
.document-roles-popover--input::placeholder {
  color: var(--neutral-40);
}
.document-roles-popover--input:not(:only-child) {
  padding: 4px 0;
  height: 24px;
}

.document-roles-popover--token-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px var(--neutral-10);
  border-radius: 4px;
}

.document-roles-popover--token-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.document-roles-popover--role-option[aria-selected=true] {
  background: red;
}

.document-roles-popover--document-roles {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.document-roles-popover--document-role {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
}

.document-roles-popover--backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.document-views-popover--entries {
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  gap: 0;
  padding: 0;
  margin: 0;
}

.document-views-popover--entry {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 8px 0 4px;
  height: 32px;
  align-items: center;
}

.document-views-popover--entry-name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  outline: none;
  position: relative;
  color: var(--neutral-80);
  flex-grow: 1;
}

body:not(.using-mouse) .document-views-popover--entry-name:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.document-views-popover--entry-name::-moz-focus-inner {
  border: 0;
}

.document-views-popover--entry-form {
  flex-grow: 1;
  position: relative;
  height: 100%;
}

.document-views-popover--entry-input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}

.document-views-popover--entry-reorder {
  display: flex;
  padding: 3px;
  fill: var(--neutral-40);
}

@media (hover: none) {
  .document-views-popover--entry-reorder {
    opacity: 1;
  }
}
@media (hover: hover) {
  .document-views-popover--entry-reorder {
    opacity: 0;
  }
  .document-views-popover--entry-reorder:focus {
    opacity: 1;
  }
}
.document-views-popover--entry:hover .document-views-popover--entry-reorder {
  opacity: 1;
}

.document-views-popover--placeholder {
  position: relative;
  height: 0;
}

.document-views-popover--placeholder::after {
  content: "";
  position: absolute;
  height: 1px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--system-action-blue-base);
}

.document-views-popover--placeholder:first-child::after {
  top: 0;
}

.document-views-popover--placeholder:last-child::after {
  top: -1px;
}

.document-views-popover--non-ideal-state {
  min-height: 140px;
}

.dropdown-list-item-default, .dropdown-list-item--visualization-item {
  list-style: none;
  padding: 4px 12px;
  height: 28px;
}

.dropdown-list-item-default:hover, .dropdown-list-item--visualization-item:hover {
  background: var(--white-10);
}

[data-highlighted].dropdown-list-item-default, [data-highlighted].dropdown-list-item--visualization-item {
  background: var(--white-10);
}

.dropdown-list {
  padding: 4px 0;
  margin: 0;
}

.dropdown-list-item-title-line {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.dropdown-list-item--visualization-item {
  display: grid;
  align-items: center;
  justify-content: start;
  grid-auto-flow: column;
  gap: 4px;
  grid-template-columns: 8px 1fr;
}

.dropdown-list-item-default {
  display: grid;
  align-items: center;
  justify-content: start;
  grid-auto-flow: column;
  gap: 8px;
}

.dropdown-list-item-default-title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
}

.dropdown-list-item-default-leading {
  display: flex;
}

.dropdown-list-item-default-leading img {
  width: 20px;
  height: 20px;
}

.dropdown-list-item-aux {
  padding: 6px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  gap: 6px;
  grid-auto-columns: max-content;
  align-items: center;
}

.dropdown-list-item-aux[data-highlighted],
.dropdown-list-item-aux:hover {
  background: var(--white-10);
}

.dropdown-list-item-aux--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-100);
}

.dropdown-list-item-aux--accessory {
  fill: var(--neutral-60);
}

.dropdown-list-item-aux--subtitle {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  border-radius: 4px;
  background: var(--white-10);
  padding: 2px 4px;
}

.flow-operations--empty-state {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  padding: 16px;
  max-width: 340px;
  display: grid;
  border-radius: 8px;
  border: 1px solid var(--opacity-medium);
  box-shadow: 0px 0px 4px 0px var(--overlay-01);
}

body:not(.using-mouse) .flow-operations--empty-state:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 8px;
}

.flow-operations--empty-state::-moz-focus-inner {
  border: 0;
}

.flow-main-header {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.flow-main-header--name {
  line-height: 40px;
  font-size: 28px;
  font-family: Roboto;
  font-weight: 600;
  color: var(--neutral-primary);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  outline: none;
}

.flow-main-header--description {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  margin: 0;
  padding: 4px 0;
  border: none;
  background: transparent;
  appearance: none;
  resize: none;
  outline: none;
}

.flow-content-main--add-section {
  width: 100% !important;
  justify-content: start;
}

.flow-content-main {
  overflow: auto;
  padding: 0 12px;
  flex-grow: 1;
}

.flow-content-operations {
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0 0 4px 0;
}

.flow-content-operation {
  list-style: none;
}

.flow-content-section {
  display: grid;
  border-radius: 4px;
  border: 1px solid var(--opacity-medium);
  background: var(--background-primary);
}

.flow-content-section--header {
  padding: 6px 8px;
  display: grid;
  height: 40px;
  grid-auto-flow: column;
  border-bottom: 1px solid var(--opacity-medium);
  align-items: center;
  gap: 4px;
  grid-template: "reorder text actions" auto/12px 1fr max-content;
}

.flow-content-section--header-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-primary);
  margin: 0;
}

.flow-content-section--icon-reorder {
  grid-area: reorder;
}

.flow-content-section--header-link-container {
  display: grid;
  grid-area: text;
}

.flow-content-section--header-link {
  text-decoration: none;
  margin: 0;
  padding: 0;
  justify-self: start;
}
.flow-content-section--header-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--neutral-primary);
}

.flow-content-section--header:hover .flow-content-section--icon-reorder {
  opacity: 1;
}
.flow-content-section--header:hover .flow-content-section--header-action {
  visibility: visible;
}

.flow-content-section--icon-reorder {
  display: flex;
  fill: var(--neutral-quaternary);
  height: 16px;
  cursor: grab;
}
@media (hover: none) {
  .flow-content-section--icon-reorder {
    opacity: 1;
  }
}
@media (hover: hover) {
  .flow-content-section--icon-reorder {
    opacity: 0;
  }
  .flow-content-section--icon-reorder:focus {
    opacity: 1;
  }
}
.flow-content-section--icon-reorder:hover {
  fill: var(--neutral-secondary);
}
.flow-content-section--icon-reorder:active {
  fill: var(--neutral-secondary);
}
.flow-content-section--icon-reorder:focus {
  fill: var(--neutral-quaternary);
  box-shadow: inset 0 0 0 1px var(--action-focus);
}

.flow-content-section--header-actions {
  grid-area: actions;
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 4px;
}

.flow-content-section--header-action {
  visibility: hidden;
}
.flow-content-section--header-action[aria-expanded=true] {
  visibility: visible;
}

.flow-content-plot {
  display: grid;
  height: 200px;
  position: relative;
  grid-template-rows: 1fr max-content;
}

.flow-steps-toolbar {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.flow-steps-toolbar--icon {
  margin: 4px;
  fill: var(--neutral-tertiary);
}

.flow-steps-toolbar--button-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  grid-template-columns: 3fr max-content 1fr;
  gap: 8px;
  padding: 2px 4px;
  margin: 0;
}

.flow-steps-toolbar--buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: start;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.flow-steps-toolbar--entry {
  list-style: none;
  display: grid;
}

.flow-steps-toolbar--hr {
  height: 16px;
  width: 1px;
  border: none;
  border-left: 1px solid var(--opacity-strong);
}

.flow-steps {
  padding: 0;
  margin: 0;
  display: grid;
  grid-auto-flow: row;
  gap: 4px;
}

.flow-steps-form {
  display: grid;
}

.flow-steps-step {
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--opacity-medium);
  background: var(--background-primary);
  counter-increment: input;
  list-style: none;
  display: flex;
  padding: 2px 4px;
  min-height: 32px;
}

.flow-steps-step[data-selected] {
  border: 1px solid var(--action-default);
}

.flow-steps-step--icon {
  fill: var(--neutral-tertiary);
  padding: 4px;
  display: grid;
}

.flow-steps-step--actions {
  margin-left: auto;
}

.flow-steps-step--counter {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-tertiary);
  padding: 0 4px;
}

.flow-steps-step--counter::before {
  content: counter(input);
}

.flow-steps-step--content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  width: 180px;
  padding: 0 6px;
  flex-shrink: 0;
}

.flow-steps-step--editor {
  width: 360px;
  flex-shrink: 0;
}

.flow-steps-comment {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  list-style: none;
  padding: 0;
}

.flow-steps-comment--form {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  padding: 0;
  border-radius: 4px;
  min-height: 26px;
}

.flow-steps-comment--form .editor {
  border-radius: 4px 4px 0 0;
}

.flow-steps-comment--form[data-mode=edit] {
  box-shadow: inset 0 0 0 1px var(--opacity-strong);
}

.flow-steps-comment--form .editor:focus-within {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.flow-steps-comment--form .ql-container {
  height: auto;
}

.flow-steps-comment--form .ql-editor {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  margin: 2px 0;
  padding: 8px 12px;
  color: var(--neutral-secondary);
}

.flow-steps-comment--form .ql-editor::selection,
.flow-steps-comment--form .ql-editor *::selection {
  background: var(--action-faded);
}

.flow-steps-comment--form .ql-editor.ql-blank:before {
  font-style: normal;
  color: var(--neutral-quaternary);
  left: 12px;
  right: 0;
}

.flow-steps-comment--buttons {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  gap: 4px;
  padding: 6px 12px;
  box-shadow: 0 -1px 0 0 var(--opacity-medium);
}

.flow-content-show {
  overflow: hidden;
  flex-grow: 1;
  display: grid;
  grid-template-rows: max-content 1fr;
}

.flow-content-show--content {
  overflow: auto;
  padding: 0 12px;
}

.flow-formula-editor {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  fill: red;
  gap: 2px;
  min-height: 26px;
}

.flow-formula-editor[data-type=outline] {
  box-shadow: inset 0 0 0 1px var(--opacity-medium);
}

.flow-formula-editor:focus-within {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.flow-formula-editor[data-validity=invalid]:not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--danger-default);
}

.flow-calculation-editor--content {
  display: grid;
  width: 12px;
  height: 12px;
}

.flow-calculation-editor--content-icon {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
}

.flow-calculation-editor--content-icon[data-intent=success] {
  fill: var(--system-success-green-base);
}

.flow-calculation-editor--content-icon[data-intent=invalid] {
  fill: var(--system-danger-red-base);
}

.flow-calculation-editor--content-icon[data-intent=neutral] {
  fill: var(--neutral-quaternary);
  color: var(--neutral-quaternary);
}

.flow-formula-editor .ql-container {
  height: auto;
}

.flow-formula-editor .ql-editor {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  margin: 2px 0;
  padding: 0;
  color: var(--neutral-secondary);
  max-height: 32px;
  overflow: auto;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.flow-formula-editor .ql-editor::selection,
.flow-formula-editor .ql-editor *::selection {
  background: var(--action-faded);
}

.flow-formula-editor .ql-editor.ql-blank:before {
  font-style: normal;
  color: var(--neutral-quaternary);
  left: 0;
  right: 0;
}

.flow-layout {
  display: grid;
  flex-grow: 1;
  background: var(--background-primary);
  overflow: hidden;
  grid-template: "toolbar toolbar" 41px "sidebar content" 1fr/240px 1fr;
}

.flow-layout[data-display-mode=content-only] {
  grid-template: "toolbar" 41px "content" 1fr/1fr;
}

.flow-layout--toolbar {
  grid-area: toolbar;
  border-bottom: 1px solid var(--opacity-medium);
}

.flow-layout--sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--opacity-medium);
  overflow: hidden;
  display: grid;
}

.flow-layout--content {
  grid-area: content;
  overflow: hidden;
  display: grid;
  grid-template: "toolbar" max-content "content" 1fr/1fr;
}

.flow-layout--content:has(.flow-layout--pane) {
  display: grid;
  grid-template: "toolbar pane" max-content "content pane" 1fr/1fr 360px;
}

.flow-layout--content-toolbars {
  grid-area: toolbar;
  display: grid;
}

.flow-layout--pane {
  grid-area: pane;
  border-left: 1px solid var(--opacity-medium);
  overflow: auto;
}

.flow-pane-header {
  display: grid;
  grid-template-columns: 12px 12px 1fr max-content;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  padding: 6px 12px;
  gap: 6px;
  fill: var(--neutral-tertiary);
  border-bottom: 1px solid var(--opacity-medium);
}

.flow-pane-header--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-pane-label-header {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  height: 24px;
  gap: 4px;
}

.flow-pane-label-header--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-pane-subheader {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 0;
  color: var(--neutral-secondary);
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Graph Colors */
/* Dimensions */
.flow-steps-parent-list,
.flow-steps-list {
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.flow-steps-parent-list {
  gap: 4px;
}

.flow-steps-header {
  display: grid;
  align-items: center;
  gap: 2px;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  list-style: none;
}

.flow-steps-column-header {
  display: grid;
  align-items: center;
  gap: 2px;
  grid-template-columns: max-content 1fr;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
}

.flow-steps-list-entry {
  display: grid;
  align-items: center;
  gap: 2px;
  grid-template-columns: max-content max-content 1fr 65px max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  list-style: none;
}

.flow-steps-list-entry--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-steps-list-entry--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-steps-list-entry--expand-button svg {
  transition: transform 150ms ease;
  transition-timing-function: spring(1 173 28 20);
}

.flow-steps-list-entry[aria-expanded=false] .flow-steps-list-entry--expand-button svg {
  transform: rotate(180deg);
}

.flow-steps-list-color-field {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  width: 28px;
  height: 28px;
  box-shadow: inset 0 0 0 1px var(--opacity-medium);
  border-radius: 4px;
  display: grid;
  align-items: center;
  justify-content: center;
}

.flow-steps-list-color-field:not(:focus-visible):hover {
  box-shadow: inset 0 0 0 1px var(--opacity-strong);
}

.flow-steps-list--cell {
  display: grid;
  height: 28px;
}

.flow-steps-list--cell:focus {
  outline: none;
  position: relative;
}

body:not(.using-mouse) .flow-steps-list--cell:focus:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 1px solid #4564fd;
  border-radius: 0;
}

.flow-steps-list--cell:focus::-moz-focus-inner {
  border: 0;
}

.flow-steps-list-color-field:focus {
  box-shadow: inset 0 0 0 1px var(--action-default);
}

.flow-steps-list-color-field:not(:focus):active {
  box-shadow: inset 0 0 0 1px var(--opacity-very-strong);
}

.flow-steps-list-color-field--color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.flow-steps-list-color-field--color[data-color=grey-01] {
  background-color: #dce0f6;
}

.flow-steps-list-color-field--color[data-color=grey-02] {
  background-color: #b9bdd3;
}

.flow-steps-list-color-field--color[data-color=grey-03] {
  background-color: #9095a9;
}

.flow-steps-list-color-field--color[data-color=grey-04] {
  background-color: #696d81;
}

.flow-steps-list-color-field--color[data-color=blue-01] {
  background-color: #2a61ed;
}

.flow-steps-list-color-field--color[data-color=blue-02] {
  background-color: #5381f3;
}

.flow-steps-list-color-field--color[data-color=blue-03] {
  background-color: #86a9f9;
}

.flow-steps-list-color-field--color[data-color=blue-04] {
  background-color: #aec8fe;
}

.flow-steps-list-color-field--color[data-color=cyan-01] {
  background-color: #08abbc;
}

.flow-steps-list-color-field--color[data-color=cyan-02] {
  background-color: #3fc3d0;
}

.flow-steps-list-color-field--color[data-color=cyan-03] {
  background-color: #75dae3;
}

.flow-steps-list-color-field--color[data-color=cyan-04] {
  background-color: #adf2f7;
}

.flow-steps-list-color-field--color[data-color=yellow-01] {
  background-color: #df9d1d;
}

.flow-steps-list-color-field--color[data-color=yellow-02] {
  background-color: #e8b34c;
}

.flow-steps-list-color-field--color[data-color=yellow-03] {
  background-color: #f2ca7e;
}

.flow-steps-list-color-field--color[data-color=yellow-04] {
  background-color: #fbe0ac;
}

.flow-steps-list-color-field--color[data-color=purple-01] {
  background-color: #7e36ea;
}

.flow-steps-list-color-field--color[data-color=purple-02] {
  background-color: #975cf0;
}

.flow-steps-list-color-field--color[data-color=purple-03] {
  background-color: #b589f7;
}

.flow-steps-list-color-field--color[data-color=purple-04] {
  background-color: #d1b5fd;
}

.flow-steps-list-color-field--color[data-color=purple-05] {
  background-color: #d1b5fd;
}

.flow-steps-list-color-field--color[data-color=pink-01] {
  background-color: #d821e7;
}

.flow-steps-list-color-field--color[data-color=pink-02] {
  background-color: #e45ae7;
}

.flow-steps-list-color-field--color[data-color=pink-03] {
  background-color: #ef8ce7;
}

.flow-steps-list-color-field--color[data-color=pink-04] {
  background-color: #fabce6;
}

.flow-steps-list-color-field--color[data-color=green-01] {
  background-color: #1ddf30;
}

.flow-steps-list-color-field--color[data-color=green-02] {
  background-color: #4fe85b;
}

.flow-steps-list-color-field--color[data-color=green-03] {
  background-color: #82f188;
}

.flow-steps-list-color-field--color[data-color=green-04] {
  background-color: #b6fbb5;
}

.flow-steps-list-color-field--color[data-color=red-01] {
  background-color: #df301d;
}

.flow-steps-list-color-field--color[data-color=red-02] {
  background-color: #e85e4e;
}

.flow-steps-list-color-field--color[data-color=red-03] {
  background-color: #f18b80;
}

.flow-steps-list-color-field--color[data-color=red-04] {
  background-color: #fbbbb4;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-01] {
  background-color: #1a3078;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-02] {
  background-color: #2542a1;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-03] {
  background-color: #318fee;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-04] {
  background-color: #5973de;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-05] {
  background-color: #8497e0;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-06] {
  background-color: #bac2e0;
}

.flow-steps-list-color-field--color[data-color=blue-ocean-07] {
  background-color: #fefefe;
}

.flow-steps-list-color-field--color[data-color=threshold-neutral-01] {
  background-color: #99aaff;
}

.flow-steps-list-color-field--color[data-color=threshold-neutral-02] {
  background-color: #7c88c3;
}

.flow-steps-list-color-field--color[data-color=threshold-neutral-03] {
  background-color: #425e82;
}

.flow-steps-list-color-field--color[data-color=threshold-negative-01] {
  background-color: #c43e62;
}

.flow-steps-list-color-field--color[data-color=threshold-negative-02] {
  background-color: #e75f6d;
}

.flow-steps-list-color-field--color[data-color=threshold-negative-03] {
  background-color: #f0959e;
}

.flow-steps-list-color-field--color[data-color=threshold-negative-04] {
  background-color: #f2c4c8;
}

.flow-steps-list-color-field--color[data-color=threshold-positive-01] {
  background-color: #1ae39b;
}

.flow-steps-list-color-field--color[data-color=threshold-positive-02] {
  background-color: #39bb8c;
}

.flow-steps-list-color-field--color[data-color=threshold-medium-01] {
  background-color: #f6da60;
}

.flow-layout--tabs {
  isolation: isolate;
  padding: 4px 12px;
  border-bottom: 1px solid var(--opacity-medium);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--background-primary);
}

@supports not (isolation: isolate) {
  .flow-layout--tabs {
    transform: scale(1);
  }
}
.flow-pane-checkbox {
  display: grid;
  gap: 2px;
  align-items: center;
  grid-template-columns: max-content 1fr;
}

.flow-pane-checkbox--label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-pane-fieldset--items {
  display: grid;
  gap: 8px;
  grid-template-columns: 108px max-content;
  align-items: center;
}

.flow-pane-fieldset--of {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
}

.operation-inputs--enums {
  display: grid;
  grid-template-columns: 108px;
  gap: 8px;
  align-items: center;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

.operation-inputs--enums-state {
  width: 108px;
}

.flow-pane-fields-duration {
  display: grid;
  gap: 4px;
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
}

.flow-pane-fields-duration--input {
  width: 34px;
}

.flow-pane-fields-duration--label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-tertiary);
}

.flow-pane-fields-duration--total {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-tertiary);
  text-align: right;
}

.flow-pane-section {
  padding: 8px 12px;
}

.flow-pane-fieldset {
  padding: 4px 12px 8px 12px;
  border: none;
  border-bottom: 1px solid var(--opacity-medium);
  display: grid;
  grid-auto-flow: row;
  gap: 4px;
}

.flow-pane-fieldset:last-child {
  border-bottom: none;
}

.flow-sidebar {
  overflow: auto;
  position: relative;
}

.flow-sidebar-tabs {
  isolation: isolate;
  padding: 4px 12px;
  border-bottom: 1px solid var(--opacity-medium);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--background-primary);
}
@supports not (isolation: isolate) {
  .flow-sidebar-tabs {
    transform: scale(1);
  }
}

.flow-sidebar-content {
  padding: 6px 12px;
}

.flow-sidebar-operations {
  padding: 0;
  margin: 0;
  display: grid;
}

.flow-sidebar--children {
  padding-left: 4px;
  display: grid;
  margin-top: 4px;
  margin-bottom: 8px;
}

.flow-sidebar--views {
  display: grid;
  padding: 0;
  margin: 0;
}

.flow-sidebar-child {
  margin-top: 4px;
}
.flow-sidebar-child:first-child {
  margin-top: 0;
}
.flow-sidebar-child:last-child {
  margin-bottom: 0;
}
.flow-sidebar-child:first-of-type {
  margin-top: 0;
}

.flow-sidebar-children--placeholder {
  position: relative;
  height: 0;
}

.flow-sidebar-children--placeholder::after {
  content: "";
  position: absolute;
  height: 1px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--system-action-blue-base);
}

.flow-sidebar-children--placeholder:first-child::after {
  top: 0;
}

.flow-sidebar-children--placeholder:last-child::after {
  top: -1px;
}

.flow-sidebar-entry {
  list-style: none;
}

.flow-sidebar-parent {
  outline: none;
  position: relative;
  list-style: none;
  height: 28px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px;
  padding: 4px;
  align-items: center;
  position: relative;
}
body:not(.using-mouse) .flow-sidebar-parent:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-parent::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-parent[data-over]::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--system-action-blue-base);
  border-radius: 2px;
  pointer-events: none;
}

.flow-sidebar-parent--button {
  z-index: 1;
}

.flow-sidebar-parent--text,
.flow-sidebar-parent--link {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-sidebar-parent--link {
  outline: none;
  position: relative;
  position: static;
  text-decoration: none;
}
body:not(.using-mouse) .flow-sidebar-parent--link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-parent--link::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-parent--link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.flow-sidebar-child {
  outline: none;
  position: relative;
  height: 28px;
  list-style: none;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 2px;
  padding: 4px 4px 4px 16px;
  fill: var(--neutral-quaternary);
  align-items: center;
  border-radius: 4px;
}
body:not(.using-mouse) .flow-sidebar-child:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-child::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-child:hover,
.flow-sidebar-child:active {
  background: var(--opacity-mild);
}

.flow-sidebar-child--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-sidebar-child--icon {
  margin: 4px;
}

.flow-sidebar-child--link {
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  position: static;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
body:not(.using-mouse) .flow-sidebar-child--link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-child--link::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-child--link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.flow-sidebar--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-primary);
  padding: 6px 0;
  margin: 0;
}

.flow-sidebar-operations--placeholder {
  position: relative;
  height: 0;
}

.flow-sidebar-operations--placeholder::after {
  content: "";
  position: absolute;
  height: 1px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--neutral-primary);
}

.flow-sidebar-operations--placeholder:first-child::after {
  top: 0;
}

.flow-sidebar-operations--placeholder:last-child::after {
  top: -1px;
}

.flow-sidebar-navigation-child {
  margin-top: 2px;
}
.flow-sidebar-navigation-child:first-child {
  margin-top: 0;
}
.flow-sidebar-navigation-child:last-child {
  margin-bottom: 0;
}
.flow-sidebar-navigation-child:first-of-type {
  margin-top: 0;
}

.flow-sidebar-navigation-child {
  outline: none;
  position: relative;
  height: 28px;
  list-style: none;
  display: flex;
  gap: 2px;
  padding: 4px 4px 4px 6px;
  fill: var(--neutral-quaternary);
  align-items: center;
  border-radius: 4px;
  max-width: 100%;
}
body:not(.using-mouse) .flow-sidebar-navigation-child:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-navigation-child::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-navigation-child:hover {
  background: var(--opacity-mild);
}

.flow-sidebar-navigation-child:has(.flow-sidebar-navigation-child--link.active) {
  background: var(--opacity-mild);
}

.flow-sidebar-navigation-child--link,
.flow-sidebar-navigation-child--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-grow: 1;
  margin-right: auto;
}

.flow-sidebar-navigation-child--link {
  outline: none;
  position: relative;
  position: static;
  text-decoration: none;
}
body:not(.using-mouse) .flow-sidebar-navigation-child--link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.flow-sidebar-navigation-child--link::-moz-focus-inner {
  border: 0;
}

.flow-sidebar-navigation-child--link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.flow-sidebar-navigation-child--entry-form {
  flex-grow: 1;
  position: relative;
  height: 100%;
}

.flow-sidebar-navigation-child--entry-input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-secondary);
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}

.flow-settings-form {
  display: grid;
}

.flow-settings-entry {
  display: grid;
  padding: 6px 0;
  gap: 4px;
}

.flow-toolbar {
  display: flex;
  height: 40px;
  background: var(--background-primary);
  padding: 0 12px;
}

.flow-toolbar--title {
  margin: 0 auto;
  flex-grow: 1;
}

.flow-toolbar--buttons {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  padding: 6px 0;
}

.flow-toolbar--button {
  align-self: center;
}

.flow-views-toolbar {
  display: grid;
  background: var(--background-primary);
  padding: 6px 12px;
  gap: 4px;
  border-bottom: 1px solid var(--opacity-medium);
}

.flow-time-bar {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  padding: 6px 12px;
  gap: 4px;
  border-bottom: 1px solid var(--opacity-medium);
}

.flow-time-bar--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-secondary);
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-operation-toolbar {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  padding: 6px 12px;
  gap: 4px;
}

.flow-operation-toolbar--header {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  margin: 0;
  padding: 0 6px;
}

.flow-operation-toolbar--input {
  max-width: 240px;
}

.bucket-shift-form {
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  gap: 8px 6px;
  align-items: center;
  grid-template: "value unit direction" auto "total total total" auto/60px 1fr 88px;
}

.bucket-shift-form--unit {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-tertiary);
  grid-area: unit;
}

.bucket-shift-form--total {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-tertiary);
  grid-area: total;
}

.forms-rollup {
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  justify-content: start;
  grid-auto-flow: column;
  gap: 2px;
}

.forms-rollup--value {
  width: 40px;
}

.time-zone-popover {
  max-height: 236px;
  padding: 4px 0 0 0;
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 0;
}

.time-zone-popover--list {
  border-top: 1px solid var(--white-10);
  overflow: auto;
  padding: 0;
  margin: 0;
}

.time-zone-popover--list .dropdown-item:last-child {
  margin-bottom: 2px;
}

.board-content-loading {
  display: grid;
  justify-content: stretch;
  align-items: center;
}

.board-content-loading {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  margin: 0;
  text-align: center;
  color: var(--neutral-60);
}

.board-error-warning-icon {
  fill: var(--system-alert-yellow-base);
}

.board-no-data {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  padding: 12px;
  background: var(--neutral-10);
  border-radius: 4px;
  color: var(--neutral-60);
  display: grid;
  gap: 8px;
  justify-content: center;
  grid-template-columns: max-content 1fr;
  fill: var(--neutral-60);
  align-items: center;
}

.board-error-state {
  max-width: 240px;
  border-radius: 4px;
  padding: 12px;
  border: 1px solid #202327;
  background: var(--background-03);
}

.board-visualization-legend {
  display: grid;
  justify-content: center;
  padding: 8px;
  margin: 0;
  gap: 12px;
  list-style: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, max-content);
  overflow: hidden;
}

.board-visualization-legend-item--button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  display: grid;
  grid-auto-flow: column;
  flex-shrink: 1;
  align-items: center;
  justify-content: start;
  gap: 4px;
  color: var(--neutral-60);
  padding: 6px 8px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--white-10);
  fill: var(--neutral-60);
}
body:not(.using-mouse) .board-visualization-legend-item--button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-visualization-legend-item--button::-moz-focus-inner {
  border: 0;
}

.board-visualization-legend-item--button:hover,
.board-visualization-legend-item--button[data-state=selected],
.board-visualization-legend-item--button:active {
  background: var(--white-10);
  box-shadow: none;
}

.board-visualization-legend-item {
  display: flex;
}

.board-visualization-legend-item--name {
  flex-shrink: 1;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.board-visualization-icon {
  flex-shrink: 0;
}

/* Graph Colors */
/* Dimensions */
.export-modal-input-time-container {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #ffffff;
  background: var(--white-10);
  padding: 0 8px;
  height: 32px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
.export-modal-input-time-container:focus {
  box-shadow: inset 0 0 0 2px #4564fd;
}
.export-modal-input-time-container:focus-within {
  box-shadow: inset 0 0 0 2px #4564fd;
}

.export-modal-input-time-data {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0;
  width: 100%;
}
.export-modal-input-time-data:hover {
  color: #ffffff;
}
.export-modal-input-time-data::placeholder {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #ffffff;
}
.export-modal-input-time-data:focus {
  outline: none;
  background-color: #4564fd;
}
.export-modal-input-time-data:active {
  color: #ffffff;
}
.export-modal-input-time-data:-moz-focusring {
  outline: none;
}

.export-modal-input-time {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}
.export-modal-input-time input[type=number]::-webkit-inner-spin-button,
.export-modal-input-time input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.export-modal-input-time input[type=number] {
  -moz-appearance: textfield;
}

.export-calendar-fieldset {
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  justify-content: start;
  border: none;
  padding: 0;
  margin: 0;
}

.export-calendar-input-date-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 49px;
  gap: 4px;
}

.export-modal-time-validate {
  line-height: 20px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 700;
  color: #edce45;
  padding: 0 12px;
}

.input-interval-value[data-focused] {
  box-shadow: inset 0 0 0 2px #4564fd;
}

.export-modal .dialogue--main-content {
  padding: 0;
}

.export-modal .dialog--header-container {
  padding: 0;
}

.export-modal .dialog--header-content {
  gap: 0;
}

.export-modal .dialog--content {
  padding: 0;
}

.export-modal .dialog--footer {
  padding: 7px 12px 8px 12px;
}

.export-modal[data-bordered] .dialog--footer {
  border-top: 1px solid var(--white-10);
}

.export-calendar-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: #cdcfd3;
  margin: 0;
  padding: 8px 0;
}

.export-footer-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
}

.export-items-selected {
  line-height: 20px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 700;
  color: #edce45;
  fill: #edce45;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
  justify-content: start;
  flex-grow: 1;
}

.export-items-selected[data-selected] {
  color: #cdcfd3;
}

.export-items-checkbox {
  gap: 4px;
  align-items: center;
  padding: 8px 16px;
  margin: 0 -16px;
  border-top: 1px solid var(--white-10);
}

.export-items-checkbox-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.export-modal--header {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 14px 12px;
}

.export-calendar-container {
  display: grid;
  gap: 1px;
  grid-auto-flow: row;
}

.export-footer-empty {
  padding: 2px;
}

.export--menu-tab {
  padding: 8px 0;
}

.export-items--container {
  overflow: auto;
  padding: 0 16px;
  display: grid;
  gap: 4px;
}

.export-modal[data-tab=image] .dialogue--footer {
  display: none;
}

.time-content-interval-fieldset {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  justify-content: start;
  gap: 8px;
  border: 0;
  padding: 8px 0;
}

.time-content-interval--input {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 40px auto;
  gap: 4px;
}

.time-content-interval-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #cdcfd3;
}

.export-items {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(auto, max-content);
  align-items: center;
  grid-auto-flow: row;
  gap: 4px;
}

.export-items-empty-signal {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: #aab2c8;
  fill: var(--system-alert-yellow-base);
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
  justify-content: start;
  padding: 2px 0;
}

.export-modal-visualization-unsupported {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: #aab2c8;
  fill: #edce45;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  justify-content: start;
  gap: 6px;
  padding: 2px 0;
}

.group-members-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-members-list--header {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 8px;
  padding: 12px 0;
}

.group-members-list {
  max-width: 340px;
  max-height: 512px;
}

.group-members--list-item {
  margin: 0;
  padding: 6px 0;
}

.group-members--list-item:first-child {
  padding-top: 0;
}

.group-members--list-item:last-child {
  padding-bottom: 0;
}

.keyword-filter-item {
  padding: 2px 12px 2px 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
}

.keyword-filter-empty {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  color: #bcbfc8;
  fill: #bcbfc8;
}

.keyword-filter-empty--text {
  line-height: 24px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
}

.keyword-filter-item-title {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  word-break: break-word;
}

.keyword-filter-item-title[data-checked] {
  font-weight: 700;
}

.keyword-filter-item-title[data-disabled] {
  color: #b5b6ba;
}

.keyword-filter-item-title-count {
  color: #b5b6ba;
}

.keyword-filter-category-header {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 700;
  padding: 4px 0;
  margin: 0;
  height: 24px;
}

.keyword-filter-item-children {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}

.keyword-filter-item--children-container {
  display: grid;
}

.keyword-filter-items {
  margin: 0 0 12px 0;
  padding: 0;
}

.keyword-filter-bar-input {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #152233;
  border: none;
  outline: none;
  background: transparent;
  height: 24px;
  margin-left: 4px;
}
.keyword-filter-bar-input::placeholder {
  color: #bcbfc8;
}

.keyword-filter-token-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
}

.keyword-filter-token-field-token,
.a-tag-filter[data-style=filter-text] {
  margin-left: 4px;
  height: 24px;
}

.board-label-group-filter {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr max-content;
  align-items: start;
}

.board-label-group-filter--tokens {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.board-label-group-filter--buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
}

/* Graph Colors */
/* Dimensions */
.m-user-tag-default {
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: #e6eafc;
  fill: #383a3d;
  background-color: #314163;
  border-radius: 40px;
  height: 32px;
}
body:not(.using-mouse) .m-user-tag-default:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 28px;
}
.m-user-tag-default::-moz-focus-inner {
  border: 0;
}

.m-user-tag-content {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
  padding: 3px 9px 3px 4px;
}

.m-user-tag-icon-p-remove-cross {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  outline: none;
  fill: #ffffff;
  opacity: 0.6;
}
.m-user-tag-icon-p-remove-cross:hover {
  opacity: 1;
  cursor: pointer;
}

.m-user-tag-p-user-info {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 0 9px 0 6px;
  word-wrap: break-word;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Graph Colors */
/* Dimensions */
.m-item-settings-card {
  max-width: 344px;
  margin-top: 8px;
}

.m-visualization-item-settings {
  width: 532px;
}

.m-visualization-item-info {
  width: 532px;
}

.m-item-settings--status-icon {
  width: 32px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid var(--white-15);
  display: flex;
  justify-content: center;
  align-items: center;
}

.m-item-settings--button-color[data-color=grey-01] .button-icon {
  fill: #dce0f6 !important;
}

.m-item-settings--button-color[data-color=grey-02] .button-icon {
  fill: #b9bdd3 !important;
}

.m-item-settings--button-color[data-color=grey-03] .button-icon {
  fill: #9095a9 !important;
}

.m-item-settings--button-color[data-color=grey-04] .button-icon {
  fill: #696d81 !important;
}

.m-item-settings--button-color[data-color=blue-01] .button-icon {
  fill: #2a61ed !important;
}

.m-item-settings--button-color[data-color=blue-02] .button-icon {
  fill: #5381f3 !important;
}

.m-item-settings--button-color[data-color=blue-03] .button-icon {
  fill: #86a9f9 !important;
}

.m-item-settings--button-color[data-color=blue-04] .button-icon {
  fill: #aec8fe !important;
}

.m-item-settings--button-color[data-color=cyan-01] .button-icon {
  fill: #08abbc !important;
}

.m-item-settings--button-color[data-color=cyan-02] .button-icon {
  fill: #3fc3d0 !important;
}

.m-item-settings--button-color[data-color=cyan-03] .button-icon {
  fill: #75dae3 !important;
}

.m-item-settings--button-color[data-color=cyan-04] .button-icon {
  fill: #adf2f7 !important;
}

.m-item-settings--button-color[data-color=yellow-01] .button-icon {
  fill: #df9d1d !important;
}

.m-item-settings--button-color[data-color=yellow-02] .button-icon {
  fill: #e8b34c !important;
}

.m-item-settings--button-color[data-color=yellow-03] .button-icon {
  fill: #f2ca7e !important;
}

.m-item-settings--button-color[data-color=yellow-04] .button-icon {
  fill: #fbe0ac !important;
}

.m-item-settings--button-color[data-color=purple-01] .button-icon {
  fill: #7e36ea !important;
}

.m-item-settings--button-color[data-color=purple-02] .button-icon {
  fill: #975cf0 !important;
}

.m-item-settings--button-color[data-color=purple-03] .button-icon {
  fill: #b589f7 !important;
}

.m-item-settings--button-color[data-color=purple-04] .button-icon {
  fill: #d1b5fd !important;
}

.m-item-settings--button-color[data-color=purple-05] .button-icon {
  fill: #d1b5fd !important;
}

.m-item-settings--button-color[data-color=pink-01] .button-icon {
  fill: #d821e7 !important;
}

.m-item-settings--button-color[data-color=pink-02] .button-icon {
  fill: #e45ae7 !important;
}

.m-item-settings--button-color[data-color=pink-03] .button-icon {
  fill: #ef8ce7 !important;
}

.m-item-settings--button-color[data-color=pink-04] .button-icon {
  fill: #fabce6 !important;
}

.m-item-settings--button-color[data-color=green-01] .button-icon {
  fill: #1ddf30 !important;
}

.m-item-settings--button-color[data-color=green-02] .button-icon {
  fill: #4fe85b !important;
}

.m-item-settings--button-color[data-color=green-03] .button-icon {
  fill: #82f188 !important;
}

.m-item-settings--button-color[data-color=green-04] .button-icon {
  fill: #b6fbb5 !important;
}

.m-item-settings--button-color[data-color=red-01] .button-icon {
  fill: #df301d !important;
}

.m-item-settings--button-color[data-color=red-02] .button-icon {
  fill: #e85e4e !important;
}

.m-item-settings--button-color[data-color=red-03] .button-icon {
  fill: #f18b80 !important;
}

.m-item-settings--button-color[data-color=red-04] .button-icon {
  fill: #fbbbb4 !important;
}

.m-item-settings--button-color[data-color=blue-ocean-01] .button-icon {
  fill: #1a3078 !important;
}

.m-item-settings--button-color[data-color=blue-ocean-02] .button-icon {
  fill: #2542a1 !important;
}

.m-item-settings--button-color[data-color=blue-ocean-03] .button-icon {
  fill: #318fee !important;
}

.m-item-settings--button-color[data-color=blue-ocean-04] .button-icon {
  fill: #5973de !important;
}

.m-item-settings--button-color[data-color=blue-ocean-05] .button-icon {
  fill: #8497e0 !important;
}

.m-item-settings--button-color[data-color=blue-ocean-06] .button-icon {
  fill: #bac2e0 !important;
}

.m-item-settings--button-color[data-color=blue-ocean-07] .button-icon {
  fill: #fefefe !important;
}

.m-item-settings-time-shift {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
  margin: 0;
}

/* Graph Colors */
/* Dimensions */
.time-shift--container {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 80px) 1fr;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  border: none;
  padding: 0;
  margin-top: 1px;
}

.time-shift--form {
  gap: 8px;
  display: grid;
}

.time-shift--actions {
  margin: 8px 0 0 0;
}

.time-shift--button-color[data-color=grey-01] .button-icon {
  fill: #dce0f6 !important;
}

.time-shift--button-color[data-color=grey-02] .button-icon {
  fill: #b9bdd3 !important;
}

.time-shift--button-color[data-color=grey-03] .button-icon {
  fill: #9095a9 !important;
}

.time-shift--button-color[data-color=grey-04] .button-icon {
  fill: #696d81 !important;
}

.time-shift--button-color[data-color=blue-01] .button-icon {
  fill: #2a61ed !important;
}

.time-shift--button-color[data-color=blue-02] .button-icon {
  fill: #5381f3 !important;
}

.time-shift--button-color[data-color=blue-03] .button-icon {
  fill: #86a9f9 !important;
}

.time-shift--button-color[data-color=blue-04] .button-icon {
  fill: #aec8fe !important;
}

.time-shift--button-color[data-color=cyan-01] .button-icon {
  fill: #08abbc !important;
}

.time-shift--button-color[data-color=cyan-02] .button-icon {
  fill: #3fc3d0 !important;
}

.time-shift--button-color[data-color=cyan-03] .button-icon {
  fill: #75dae3 !important;
}

.time-shift--button-color[data-color=cyan-04] .button-icon {
  fill: #adf2f7 !important;
}

.time-shift--button-color[data-color=yellow-01] .button-icon {
  fill: #df9d1d !important;
}

.time-shift--button-color[data-color=yellow-02] .button-icon {
  fill: #e8b34c !important;
}

.time-shift--button-color[data-color=yellow-03] .button-icon {
  fill: #f2ca7e !important;
}

.time-shift--button-color[data-color=yellow-04] .button-icon {
  fill: #fbe0ac !important;
}

.time-shift--button-color[data-color=purple-01] .button-icon {
  fill: #7e36ea !important;
}

.time-shift--button-color[data-color=purple-02] .button-icon {
  fill: #975cf0 !important;
}

.time-shift--button-color[data-color=purple-03] .button-icon {
  fill: #b589f7 !important;
}

.time-shift--button-color[data-color=purple-04] .button-icon {
  fill: #d1b5fd !important;
}

.time-shift--button-color[data-color=purple-05] .button-icon {
  fill: #d1b5fd !important;
}

.time-shift--button-color[data-color=pink-01] .button-icon {
  fill: #d821e7 !important;
}

.time-shift--button-color[data-color=pink-02] .button-icon {
  fill: #e45ae7 !important;
}

.time-shift--button-color[data-color=pink-03] .button-icon {
  fill: #ef8ce7 !important;
}

.time-shift--button-color[data-color=pink-04] .button-icon {
  fill: #fabce6 !important;
}

.time-shift--button-color[data-color=green-01] .button-icon {
  fill: #1ddf30 !important;
}

.time-shift--button-color[data-color=green-02] .button-icon {
  fill: #4fe85b !important;
}

.time-shift--button-color[data-color=green-03] .button-icon {
  fill: #82f188 !important;
}

.time-shift--button-color[data-color=green-04] .button-icon {
  fill: #b6fbb5 !important;
}

.time-shift--button-color[data-color=red-01] .button-icon {
  fill: #df301d !important;
}

.time-shift--button-color[data-color=red-02] .button-icon {
  fill: #e85e4e !important;
}

.time-shift--button-color[data-color=red-03] .button-icon {
  fill: #f18b80 !important;
}

.time-shift--button-color[data-color=red-04] .button-icon {
  fill: #fbbbb4 !important;
}

.time-shift--button-color[data-color=blue-ocean-01] .button-icon {
  fill: #1a3078 !important;
}

.time-shift--button-color[data-color=blue-ocean-02] .button-icon {
  fill: #2542a1 !important;
}

.time-shift--button-color[data-color=blue-ocean-03] .button-icon {
  fill: #318fee !important;
}

.time-shift--button-color[data-color=blue-ocean-04] .button-icon {
  fill: #5973de !important;
}

.time-shift--button-color[data-color=blue-ocean-05] .button-icon {
  fill: #8497e0 !important;
}

.time-shift--button-color[data-color=blue-ocean-06] .button-icon {
  fill: #bac2e0 !important;
}

.time-shift--button-color[data-color=blue-ocean-07] .button-icon {
  fill: #fefefe !important;
}

.m-visualization-settings-menu-content {
  display: flex;
  padding-top: 8px;
}

.m-visualization-settings-menu-content-title {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
  margin: 0;
}

.m-visualization-settings-display-type-d-flex {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 4px;
  justify-content: start;
}

.m-visualization-settings-display-type-control-item {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  padding: 9px 15px 0px 15px;
  padding-left: 14px;
  padding-right: 14px;
  min-width: 84px;
  height: 56px;
  color: #cfd4e8;
  border-radius: 2px;
  display: grid;
  align-content: start;
  justify-items: center;
  grid-gap: 4px;
  fill: #aab2c8;
}
.m-visualization-settings-display-type-control-item:not([data-selected]):hover {
  background: #c7d1fe;
  fill: #283443;
  color: #283443;
}
.m-visualization-settings-display-type-control-item:not([data-selected]):active {
  background: #c7d1fe;
  fill: #283443;
  color: #283443;
}
.m-visualization-settings-display-type-control-item[data-selected] {
  background-color: #c7d1fe;
  fill: #283443;
  color: #283443;
}

.m-visualization-settings-control-display-type-title {
  line-height: 16px;
  font-size: 11px;
  letter-spacing: 0.33px;
  font-family: Roboto;
  font-weight: 400;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.m-visualization-settings-menu-container {
  display: grid;
  gap: 8px;
}

.m-visualization-settings {
  width: 536px;
}

.m-visualization-settings[data-disabled=disabled] {
  opacity: 0.2;
}

.settings-field-label {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  align-items: center;
}

.settings-field-title {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
}

.line-chart-range-fieldset {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.line-chart-range-fieldset[disabled] {
  opacity: 0.5;
}

.visualization-settings-radio-group {
  margin-top: 1px;
  margin-left: 1px;
  display: grid;
  gap: 8px;
}

.visualization-settings-radio-button {
  height: 16px;
  gap: 6px;
}

.visualization-settings-radio-button--label {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  color: white;
}

.visualization-settings-fieldset-axis {
  display: grid;
  grid-template-columns: repeat(2, 140px);
  align-items: center;
  grid-auto-flow: column;
  gap: 4px;
}

.visualization-settings-fieldset-paragraph {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
  color: #aab2c8;
}

.mobile-upsell {
  background: #223680;
  color: #eef1fb;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(272px, 320px);
  align-content: center;
  padding: 24px 0;
  justify-content: center;
  min-height: 100vh;
}

.mobile-upsell--open-web-app {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-decoration-line: underline;
  padding: 10px 16px;
  color: #eef1fb;
}
body:not(.using-mouse) .mobile-upsell--open-web-app:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.mobile-upsell--open-web-app::-moz-focus-inner {
  border: 0;
}
.mobile-upsell--open-web-app:hover {
  color: #f7f9ff;
}
.mobile-upsell--open-web-app:active {
  color: #ffffff;
}

.mobile-upsell--header {
  display: grid;
  justify-self: stretch;
  justify-items: center;
  gap: 14px;
  padding: 24px 24px 14px 24px;
}

.mobile-upsell--details {
  display: grid;
  justify-self: stretch;
  justify-items: center;
  padding: 24px;
  gap: 12px;
}

.mobile-upsell--open-app {
  justify-self: stretch;
}

.mobile-upsell--app-logo {
  margin: 10px 0;
}

.mobile-upsell--store-link {
  outline: none;
  position: relative;
  padding: 10px;
}
body:not(.using-mouse) .mobile-upsell--store-link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.mobile-upsell--store-link::-moz-focus-inner {
  border: 0;
}

.mobile-upsell--text {
  line-height: 24px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.mobile-upsell--or {
  line-height: 24px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
}

.notification {
  padding: 12px;
  display: grid;
  gap: 8px;
  background: #1f2c3d;
  border: 1px solid #324052;
  box-shadow: var(--shadow-03);
  border-radius: 2px;
  grid-template-columns: 1fr max-content;
  max-width: 400px;
  fill: #eef1fb;
}

.notification--content {
  padding: 6px 0;
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

.notification--icon {
  margin-top: 2px;
}

.notification--text {
  margin: 0;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  letter-spacing: 0.01em;
  color: #eef1fb;
}

.notification--buttons {
  gap: 4px;
  display: grid;
  grid-auto-flow: column;
  align-content: center;
}

.notification--ruler {
  width: 1px;
  height: 100%;
  background: #455060;
}

.notification-provider {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  pointer-events: none;
  padding: 0;
  display: grid;
  justify-content: end;
  grid-template-columns: 1fr;
}

.notification-provider--container {
  display: flex;
  flex-direction: column-reverse;
  align-items: end;
  justify-content: end;
}

.notification-provider .notification {
  margin-right: 20px;
  margin-top: 8px;
  pointer-events: auto;
}

.onboarding-container {
  background: #223680;
  min-height: 100vh;
  grid-template-columns: minmax(0, 500px);
  display: grid;
  justify-content: center;
  align-items: center;
}
.onboarding-container[data-size=wide] {
  grid-template-columns: minmax(0, 566px);
}
.onboarding-container[data-size=extra-wide] {
  grid-template-columns: minmax(0, 611px);
}

.onboarding-content {
  padding: 40px;
  background: white;
  display: grid;
  grid-auto-flow: row;
  gap: 24px;
  margin: 16px;
}

.onboarding-fiedset {
  border: none;
  display: grid;
  grid-auto-flow: row;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.onboarding-fiedset--label {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #2e3a5e;
}

.p-user {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  background-color: inherit;
  gap: 8px;
  fill: var(--neutral-30);
}

.p-user-info-name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--neutral-100);
  margin: 0;
}

.p-user[aria-disabled=true] .p-user-info-name {
  color: var(--neutral-60);
}

.p-user-info-content,
.p-user-info-group-link {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--neutral-60);
  margin: 0;
}

.p-user-info-group-link {
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
.p-user-info-group-link:hover {
  text-decoration: underline;
}

.subject-auto-complete {
  background: #1a293b;
  width: 464px;
  max-height: 344px;
  overflow: auto;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.28);
  outline: none;
}

.subject-auto-complete-header {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 700;
  padding: 8px 16px;
  margin: 0;
  color: #aab2c8;
}

.subject-auto-complete-input {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  background: #22354b;
  border: 1px solid #22354b;
  color: #e6eafc;
  margin: 0;
  padding: 0 12px;
  height: 32px;
  outline: none;
}
.subject-auto-complete-input:hover {
  border-color: #7a839b;
  background: #313e50;
}
.subject-auto-complete-input:focus {
  background: #313e50;
  border-color: #364fc2;
}
.subject-auto-complete-input::placeholder {
  color: #aab2c8;
}

.subject-auto-complete-list-item:hover {
  background-color: #314163;
}
.subject-auto-complete-list-item:focus {
  background-color: #22354b;
}

.subject-auto-complete-list {
  padding: 0;
  margin: 0;
}

.subject-auto-complete-list-item {
  list-style: none;
  padding: 8px 16px;
  display: flex;
}

.subject-auto-complete-list-item[data-highlighted] {
  background: #22354b;
}

.subject-auto-complete-list-item-aux {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  color: #7a839b;
  align-self: center;
  margin-left: auto;
}

.subject-auto-complete-list-empty-state {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.13px;
  font-family: Roboto;
  font-weight: 400;
  color: #e6eafc;
  text-align: center;
  padding: 72px 0;
}

.editor--attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
  list-style: none;
  padding: 14px 12px 6px 12px;
  margin: 0;
}

.editor--attachments-remove-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -8px;
  top: -8px;
  fill: var(--neutral-40);
  border-radius: 4px;
}
body:not(.using-mouse) .editor--attachments-remove-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 4px;
}
.editor--attachments-remove-button::-moz-focus-inner {
  border: 0;
}
@supports selector(:focus-visible) {
  .editor--attachments-remove-button:focus-visible {
    fill: var(--neutral-80);
    background: var(--background-04);
  }
}
@supports not selector(:focus-visible) {
  body:not(.using-mouse) .editor--attachments-remove-button:focus {
    fill: var(--neutral-80);
    background: var(--background-04);
  }
}

.editor--attachments-remove-button:hover,
.editor--attachments-remove-button:active {
  fill: var(--neutral-80);
}

.editor--attachments-remove-button-icon {
  box-shadow: 0 0 0 1px var(--background-04);
  background: var(--background-04);
  border-radius: 50%;
}

.editor--attachments--attachment {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--neutral-20);
  padding: 8px 12px;
  display: grid;
  grid-auto-flow: row;
  position: relative;
  max-width: 200px;
}

.editor--attachments--attachment:hover,
.editor--attachments--attachment:active {
  border: 1px solid var(--neutral-30);
}

.editor--attachment--file-name {
  color: var(--neutral-80);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.editor--attachment--mime-type {
  color: var(--neutral-60);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.editor-image-attachment {
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--neutral-20);
  display: flex;
  position: relative;
}

.editor-image-attachment--image {
  height: 54px;
  border-radius: 4px;
  max-width: 108px;
  min-width: 26px;
  object-fit: cover;
}

.editor-image-attachment:hover,
.editor-image-attachment:active {
  border: 1px solid var(--neutral-30);
}

.thread-composer {
  display: grid;
  padding: 12px 16px;
  z-index: 1;
}
.thread-composer[data-shadow-visible]::before {
  opacity: 1;
}

.text-editor {
  display: grid;
  gap: 8px;
  flex-grow: 1;
}

.text-editor-content {
  display: flex;
  flex-direction: row;
}

.text-editor[data-active] .editor-container {
  box-shadow: inset 0 0 0 1px var(--white-40);
}

.text-editor[data-over] .editor-container {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
  background-color: #27388e;
}

.editor-container {
  box-shadow: inset 0 0 0 1px var(--white-10);
  border-radius: 4px;
  position: relative;
  background: var(--white-05);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.text-editor--loading {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-40);
  font-style: italic;
  height: 40px;
  padding: 8px 12px 12px 12px;
}

.text-editor .ql-editor {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  min-height: 40px;
  max-height: 320px;
  max-height: min(50vh, 320px);
  overflow: auto;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 8px 12px 12px 12px;
}

.text-editor .ql-editor::selection,
.text-editor .ql-editor *::selection {
  background: rgba(93, 120, 255, 0.3);
}

.text-editor .ql-editor.ql-blank:before {
  font-style: normal;
  color: var(--white-40);
  left: 12px;
  right: 12px;
}

.toolbar {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
}

.mention-item.context-menu-item {
  height: 32px;
  padding-left: 8px;
  color: #223680;
  transition: none;
}

.mention-item.context-menu-item[data-selected] {
  background-color: rgb(74, 104, 244);
  color: #ffffff;
}

.mention-item .context-menu-item-icon {
  height: 28px;
  margin-right: 16px;
}

.ql-auto-complete-token[data-type=user],
.ql-auto-complete-token[data-type=item] {
  color: var(--system-action-blue-base);
}

.editor-actions {
  display: flex;
  align-items: center;
  padding: 0 8px;
  justify-content: space-between;
}

.actions--btn-group {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.text-engine-auto-complete-dropdown-list {
  width: 220px;
  max-height: 186px;
  overflow: scroll;
  box-shadow: var(--shadow-03);
  border-radius: 2px;
  background: var(--neutral-10);
}

.text-engine-auto-complete-empty-state {
  width: 220px;
  height: 186px;
}

/* Graph Colors */
/* Dimensions */
.thread-error {
  top: 41px;
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 1000;
  background: var(--background-04);
}

.thread-feed--non-ideal-state {
  padding: 0 24px;
}

.thread-feed-thread-header {
  padding: 0 16px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 1fr max-content;
  gap: 4px;
}

.thread-feed-card {
  position: relative;
  display: grid;
  gap: 8px;
  background: var(--background-04);
  box-shadow: 0 1px 0px 0 var(--neutral-10);
  margin-top: 1px;
  padding: 11px 0 12px 0;
}

.thread-feed-card--content {
  text-decoration: none;
}

.thread-feed-card--content:hover::before {
  background: var(--white-05);
}

.thread-feed-card--content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.thread-feed-card--timestamp,
.thread-feed-card--actions {
  z-index: 1;
}

.thread-label {
  display: flex;
  align-items: start;
  padding: 2px 12px 12px 12px;
}

.thread-label--tag-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.thread-label--autocomplete-container {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  background: var(--background-04);
  color: var(--neutral-80);
  border: none;
  width: 140px;
  height: 28px;
  outline: none;
}

.thread-label-tag-list-container {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
  width: 220px;
  height: max-content;
  max-height: 186px;
  background: var(--neutral-10);
  overflow: auto;
}

.thread-label-tag-list-container[data-empty-style] {
  height: 200px;
}

/* Graph Colors */
/* Dimensions */
.thread-pane {
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 1000;
  background: var(--background-04);
  border-left: 1px solid var(--neutral-10);
  overflow: auto;
}

.thread-pane--sticky-header {
  background: var(--background-04);
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  border-bottom: 1px solid var(--neutral-10);
}

.thread-pane--header {
  display: grid;
  align-items: center;
  gap: 4px;
  grid-template-columns: max-content 1fr max-content;
  padding: 4px 16px 4px 8px;
}

.thread-pane--thread {
  isolation: isolate;
  padding-top: 24px;
}
@supports not (isolation: isolate) {
  .thread-pane--thread {
    transform: scale(1);
  }
}

.thread-pane--sentinel:not([data-in-view]) + .thread-pane--header::before {
  opacity: 1;
}

.thread-pane--sentinel-bottom {
  height: 1px;
  margin-top: -1px;
  flex-shrink: 0;
}

.thread-composer {
  background: var(--background-04);
  position: sticky;
  bottom: 0;
}

.thread-comment-feed-header {
  display: flex;
  padding: 6px 0;
  margin-top: 12px;
  position: relative;
  justify-content: start;
  align-items: center;
}

.thread-comment-feed-header-border {
  position: absolute;
  left: 0;
  right: 0;
  content: "";
  height: 1px;
  background: var(--neutral-10);
}

.thread-comment-feed-header-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.thread[data-style=normal] .thread-comment-feed-header-content {
  background: var(--background-04);
  color: var(--neutral-60);
  padding-left: 16px;
  padding-right: 8px;
  z-index: 1;
}

.thread[data-style=feed] .thread-comment-feed-header-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--system-action-blue-base);
  justify-content: flex-start;
}

.thread-feed-pane {
  display: flex;
  flex-direction: column;
  z-index: 2;
  padding: 0;
  background: var(--background-04);
  border-left: 1px solid var(--neutral-10);
}

.thread-feed-pane-header {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  padding: 4px 8px 3px 12px;
  height: 40px;
  border-bottom: 1px solid var(--neutral-10);
}

.thread-feed-pane-search-bar {
  padding: 8px 8px 8px 10px;
}

.thread-feed-pane-sort {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
  color: var(--neutral-60);
}
body:not(.using-mouse) .thread-feed-pane-sort:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.thread-feed-pane-sort::-moz-focus-inner {
  border: 0;
}

.thread-feed-pane-chevron {
  fill: var(--neutral-60);
  transition: transform 0.2s;
}

.thread-feed-pane-sort[aria-expanded=true] .thread-feed-pane-chevron {
  transform: rotate(180deg);
}

.thread-feed-pane-search {
  flex-grow: 1;
}

.thread-feed {
  overflow: auto;
}

.thread-feed-pane-popover .context-menu-item {
  transition: none;
  font-size: 13px;
  font-weight: 100;
  color: #646566;
}

.thread-feed-pane-popover .context-menu-item:hover {
  background-color: rgb(74, 104, 244);
  color: #ffffff;
}

.thread-feed-pane-popover .context-menu-item .context-menu-item-icon {
  width: 0;
  margin: 0;
}

.thread-timestamp {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content 1fr;
  gap: 4px;
  align-items: center;
  fill: var(--neutral-60);
}

.thread-timestamp--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-60);
}

.thread-timestamp--link-icon {
  transition: opacity 150ms ease-out;
  opacity: 0;
}

.thread-timestamp--link:hover,
.thread-timestamp--link:focus,
.thread-timestamp--link:focus-within {
  box-shadow: inset 0 0 0 1px var(--white-15);
}
.thread-timestamp--link:hover .thread-timestamp--link-icon,
.thread-timestamp--link:focus .thread-timestamp--link-icon,
.thread-timestamp--link:focus-within .thread-timestamp--link-icon {
  opacity: 1;
}

.thread-timestamp--link {
  outline: none;
  text-decoration: none;
  display: grid;
  border-radius: 2px;
  padding: 4px 8px;
}

.thread-initial-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.thread {
  display: grid;
  gap: 4px;
}

.thread-comment-feed-avatars {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  justify-items: start;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 16px 6px 32px;
}

.thread-comment-feed-header-avatars {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-60);
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.thread-comment-header-avatar {
  border-radius: 50%;
  border: 1px solid var(--neutral-10);
  margin-left: -9px;
}

.thread-comment-feed-header-timestamp {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
}

.thread-comment-feed {
  margin-right: 16px;
}

.m-thresholds {
  display: grid;
  gap: 16px;
  min-width: 412px;
}

/* Graph Colors */
/* Dimensions */
.m-thresholds-form-container {
  display: grid;
  grid-gap: 8px 0;
}

.m-thresholds--head {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
  margin: 0;
  text-align: left;
  width: 120px;
  padding-bottom: 1px;
}

.m-thresholds-add-button-icon {
  fill: #aab2c8;
}

.m-thresholds-text-dropdown {
  height: 24px;
  width: 112px;
}

.m-thresholds-checkbox-text {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.36px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
  margin: 6px;
}

.m-thresholds-action-buttons {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  align-content: end;
  justify-self: end;
}

.m-thresholds-select-container {
  width: 120px;
}

.m-thresholds-table-body-container {
  margin-bottom: 6px;
  height: 30px;
}

.m-thresholds--field-container {
  display: grid;
  grid-auto-flow: row;
  gap: 4px;
}

.m-thresholds--fieldset {
  display: grid;
  column-gap: 4px;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content max-content max-content 1fr;
  justify-content: start;
  border: 0;
  margin: 0;
  padding: 0;
}
.m-thresholds--fieldset:disabled {
  pointer-events: none;
}

.m-thresholds--fieldset-label {
  display: grid;
  gap: 3px;
  grid-auto-flow: column;
  width: 120px;
}

.m-thresholds--color-picker-container {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.m-thresholds--fieldset-labels {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  gap: 4px;
  grid-template-columns: max-content 120px auto;
  margin-left: 36px;
}

.input-edit-label:disabled, .input-edit-label[readonly=readonly] {
  color: #8c96b1;
  border-color: #525c6b;
}
.input-edit-label:hover:not([disabled]):not([data-is-invalid]) {
  background: #364a87;
  border-color: #7080b2;
}
.input-edit-label::placeholder {
  color: #8c96b1;
}

.input-edit-label[data-is-invalid] {
  border-color: #e75f6d;
  color: #e6eafc;
}

.m-thresholds--button-color[data-color=threshold-neutral-01] .button-icon {
  fill: #99aaff !important;
}

.m-thresholds--button-color[data-color=threshold-neutral-02] .button-icon {
  fill: #7c88c3 !important;
}

.m-thresholds--button-color[data-color=threshold-neutral-03] .button-icon {
  fill: #425e82 !important;
}

.m-thresholds--button-color[data-color=threshold-negative-01] .button-icon {
  fill: #c43e62 !important;
}

.m-thresholds--button-color[data-color=threshold-negative-02] .button-icon {
  fill: #e75f6d !important;
}

.m-thresholds--button-color[data-color=threshold-negative-03] .button-icon {
  fill: #f0959e !important;
}

.m-thresholds--button-color[data-color=threshold-negative-04] .button-icon {
  fill: #f2c4c8 !important;
}

.m-thresholds--button-color[data-color=threshold-positive-01] .button-icon {
  fill: #1ae39b !important;
}

.m-thresholds--button-color[data-color=threshold-positive-02] .button-icon {
  fill: #39bb8c !important;
}

.m-thresholds--button-color[data-color=threshold-medium-01] .button-icon {
  fill: #f6da60 !important;
}

.timeline-canvas-legend-settings-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.timeline-canvas-legend-settings-header--icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.timeline-canvas-legend-settings-header--input {
  width: 200px;
}

.timeline-canvas-legend-settings-header--buttons {
  margin-left: auto;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.timeline-canvas-legend-settings {
  display: flex;
  flex-direction: column;
  background-color: var(--background-04);
  box-shadow: var(--shadow-03);
  min-height: 116px;
  min-width: 412px;
}

.timeline-canvas-legend-settings--header {
  padding: 8px 12px;
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
}

.timeline-canvas-legend-settings--title {
  line-height: 16px;
  font-size: 11px;
  letter-spacing: 0.33px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
}

.timeline-canvas-legend-settings--content {
  max-width: 544px;
  max-height: 413px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  grid-auto-flow: row;
  padding: 8px 12px 12px 12px;
}

.timeline-canvas-actions {
  position: absolute;
  width: max-content;
  margin: 0 auto;
  bottom: 24px;
  right: var(--env-scrollbar-width);
  left: 0;
  z-index: 400;
}

.timeline-canvas-actions-above {
  background-color: var(--neutral-20);
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: var(--shadow-03);
}

.timeline-canvas-actions-toolbar {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  grid-auto-flow: row;
  gap: 12px;
}

.timeline-canvas-time-range-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.timeline-canvas-action--timestamp--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  text-align: center;
  color: var(--neutral-100);
  margin: 0;
}

/* Graph Colors */
/* Dimensions */
.timeline-canvas {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  touch-action: none;
}

.timeline-canvas * {
  touch-action: none;
}

.timeline-canvas-header {
  width: 100%;
  background: green;
  position: relative;
  z-index: 400;
}

.timeline-canvas-scrollable-shadow-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  touch-action: none;
}

.timeline-canvas-scrollable {
  overflow: scroll;
  position: relative;
  overflow-x: hidden;
  cursor: -webkit-grab;
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 1;
}

.timeline-canvas-scrollable:active {
  cursor: -webkit-grabbing;
}

.timeline-canvas-wrapper {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  outline: none;
  flex-shrink: 1;
  flex-grow: 1;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--background-02);
}

.timeline-canvas-scrollable-content {
  pointer-events: none;
  padding-bottom: 64px;
}

.visualization-comments-canvas {
  flex-shrink: 0;
  flex-grow: 0;
}

.timeline-canvas-scrollable-shadow-left {
  opacity: 0.48;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);
  width: 10px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.tick-bar {
  display: block;
}

.time-selection-bar {
  display: block;
}

@media (min-width: 1388px) {
  [data-items-menu-visible] .visualization-legend,
[data-items-menu-visible] .timeline-canvas--legend-item {
    padding-left: 640px;
  }
}
.filter {
  display: flex;
  flex-direction: row;
  position: absolute;
  isolation: isolate;
  will-change: transform;
  top: 0;
  bottom: 0;
  z-index: 800;
  background: #fafbff;
  width: calc(640px + var(--env-scrollbar-width));
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
}

.filter--non-ideal-state {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: max-content 1fr;
  grid-template-columns: 1fr;
  flex-grow: 1;
  align-items: center;
}

.timeline-filter-filte-bar:not([data-scrolled-to-top]) {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
}

.timeline-filter-content {
  margin: 0;
  overflow: auto;
  position: relative;
}

.timeline-filter-filte-bar {
  flex-shrink: 0;
  z-index: 100;
  background: #fafbff;
  top: 0;
  display: grid;
  justify-content: center;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  position: sticky;
}

.timeline-filter-search-bar {
  padding: 0 12px 8px 8px;
}

.timeline-filter-filter-bar-inner {
  border-bottom: 1px solid #e2e4ee;
  display: flex;
  flex-direction: row;
}

.timeline-filter-content-container {
  flex-basis: 0;
  flex-grow: 1;
  display: grid;
  justify-content: center;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(auto, 912px);
}

.timeline-filter-content-container-inner {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
}

.timeline-filter-content-container-timelines {
  flex-grow: 1;
  padding: 0 12px 0 8px;
}

.timeline-filter-content-container-timelines[data-is-loading] {
  opacity: 0.4;
}

.timeline-filter-content-filter-item {
  width: 224px;
  padding-right: 16px;
  padding-left: 16px;
  flex-shrink: 0;
}

.m-item-card-container {
  margin-top: 8px;
}
.m-item-card-container:first-child {
  margin-top: 0;
}
.m-item-card-container:last-child {
  margin-bottom: 0;
}

.m-item-card-container[draggable] {
  cursor: grab;
}

.m-item-card-container[data-dragging] {
  cursor: grabbing;
}

.timeline-filter-header {
  display: flex;
  padding: 8px 16px;
}

.timeline-filter-header--title {
  line-height: 24px;
  font-size: 16px;
  letter-spacing: 0.8px;
  font-family: Roboto;
  font-weight: 400;
  text-transform: uppercase;
  color: #3c4756;
  margin: 0;
  text-align: left;
  padding: 8px 0;
  flex-grow: 1;
}

.timeline-filter-header--actions {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 8px;
  flex-shrink: 0;
}

/* Graph Colors */
/* Dimensions */
.m-timeline-sharing-modal {
  display: flex;
  flex-direction: column;
  background: #1a293b;
  width: 496px;
  max-height: 512px;
  padding-bottom: 9px;
  z-index: 200;
  outline: none;
  background-color: #1a293b;
}

.m-timeline-sharing-modal-list-container {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 229px;
}

.m-timeline-sharing-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.m-list-item-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  height: 44px;
  margin-left: 16px;
  margin-right: 19px;
  background-color: #1a293b;
}

.m-timeline-sharing-header {
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
  padding: 0 16px 8px 16px;
  color: #aab2c8;
}

.m-timeline-sharing-header-title,
.m-timeline-sharing-header-disabled {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
  flex-grow: 1;
  padding: 10px 0 10px 0;
}

.m-timeline-sharing-header .m-timeline-sharing-header-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #3a4554;
}

.permission-invite-form {
  display: flex;
  align-items: center;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid #3a4554;
}

.permission-invite-form-permission {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 8px;
}

.permission-invite-form-subject {
  margin-right: 22px;
  display: flex;
}

.permission-invite-form-subject-input {
  width: 260px;
}

/* Graph Colors */
/* Dimensions */
/*Content*/
.timelines-content-filter-bar-inner {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #e6e8ed;
  display: grid;
  grid-template: "icon . " auto/24px 1fr;
  grid-auto-flow: column;
  gap: 8px;
  padding: 10px;
  align-content: center;
  isolation: isolate;
  margin-top: 24px;
}
.timelines-content-filter-bar-inner:focus-within {
  border-color: #9aabf5;
  background-color: #ffffff;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
}
.timelines-content-filter-bar-inner:hover {
  background: #ffffff;
}

.timelines-content-filter-bar-inner[data-selected] {
  background: #ffffff;
}

.timelines-content-filter-bar-label {
  grid-area: icon;
  height: 24px;
  width: 24px;
  pointer-events: none;
  margin-top: 2px;
}

.timelines-content-filter-bar-icon {
  fill: #152233;
  cursor: pointer;
}

.timelines-content-filter-bar-results {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.timelines-content-filter-bar-item {
  flex-shrink: 0;
  flex-grow: 1;
}

.timelines-content-filter-bar-item-header {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  color: #b5b6ba;
  padding: 6px 0;
  margin: 0;
  text-align: right;
}

.timelines-content-clear {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 700;
  color: #495578;
  outline: none;
  position: relative;
  padding: 6px 0;
  flex-shrink: 0;
  align-self: flex-start;
}
.timelines-content-clear:hover {
  color: #2e3575;
}
.timelines-content-clear:active {
  color: #2e3575;
}
body:not(.using-mouse) .timelines-content-clear:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.timelines-content-clear::-moz-focus-inner {
  border: 0;
}
.timelines-content-clear:active {
  text-decoration: underline;
}

table,
th,
td {
  border: none;
}

.stats-panel--header {
  display: flex;
  padding: 4px 12px;
  align-items: center;
  background-color: var(--background-04);
  position: sticky;
  flex-shrink: 0;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}

.stats-panel-header--actions {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 8px;
  flex-shrink: 0;
}

.stats-panel-header--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-60);
  margin: 0;
  text-align: left;
  flex-grow: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  fill: var(--neutral-60);
}

.stats-legend-item {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  grid-template-columns: 8px 1fr max-content;
  gap: 6px;
  background: var(--white-07);
  border-radius: 4px;
  padding: 6px 8px;
}

.stats-legend-item--name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.timeline-stats--table {
  width: 100%;
}

.timeline-stats--thead {
  background-color: var(--background-04);
  height: 32px;
  position: sticky;
  top: 38px;
  z-index: 1;
}

.timeline-stats--tbody {
  position: relative;
  white-space: nowrap;
  overflow: auto;
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  padding: 0 12px 8px 12px;
}

.timeline-stats--cell {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-60);
  text-align: right;
}
.timeline-stats--cell[data-is-scrubbing] {
  opacity: 0.4;
}

.timeline-stats--cell--eng-unit {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-60);
}

.timeline-stats--name-cell {
  padding: 0;
}

.timeline-stats--row,
.timeline-stats--header-row {
  display: grid;
  grid-template-columns: 260px repeat(5, 120px);
  gap: 8px;
  align-items: center;
}

.timeline-stats--header-row {
  border-bottom: 1px solid var(--neutral-10);
  padding: 0 12px;
}

.timeline-stats--header-cell {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-60);
  text-align: right;
  padding-bottom: 12px;
}

.timeline-stats--visualization-name-cell {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  padding: 8px 0 2px 0;
  max-width: 100%;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}
.timeline-stats--visualization-name-cell:not(:first-child) {
  border-top: 1px solid var(--neutral-10);
}

.stats-panel {
  border-radius: 0;
  padding: 0;
  width: 100%;
  margin: auto;
  height: 100%;
}
.stats-panel:focus {
  outline: none;
}

.stats-panel--content {
  background-color: var(--background-04);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.stats-panel--main-content {
  display: grid;
  grid-template-columns: 1fr;
}

.timeline-navigation {
  height: 41px;
  display: grid;
  gap: 12px;
  justify-content: space-between;
  grid-template: "main empty aux" auto/max-content 1fr max-content;
  background: var(--background-04);
  isolation: isolate;
  contain: size layout paint;
  border-bottom: 1px solid var(--neutral-10);
}

.timeline-navigation--main-button-cluster {
  display: grid;
  grid-auto-flow: column;
  gap: 0;
  grid-area: main;
  z-index: 200;
}

.timeline-navigation--aux-button-cluster {
  padding: 6px 8px;
  grid-area: aux;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  z-index: 200;
}

.timeline-navigation--aux-icon {
  display: grid;
  padding: 4px;
  fill: var(--neutral-50);
}

.timeline-navigation--title {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 1;
  z-index: 100;
}

.timeline-navigation--main-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 12px;
  fill: var(--white-80);
}
body:not(.using-mouse) .timeline-navigation--main-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.timeline-navigation--main-button::-moz-focus-inner {
  border: 0;
}

.timeline-navigation--main-button:hover {
  background: var(--white-10);
  fill: var(--neutral-80);
}

.timeline-navigation--main-button[aria-selected],
.timeline-navigation--main-button.active,
.timeline-navigation--main-button.ember-transitioning-in {
  background: var(--system-action-blue-base);
  fill: var(--white-100);
}

.timeline-navigation--main-button[disabled] {
  fill: var(--white-40);
}

.timeline-navigation--menu-button {
  border-right: 1px solid var(--white-20);
}

@media (max-width: 1023px) {
  .timeline-navigation--title {
    grid-column-start: 2;
    grid-column-end: 3;
  }
}
@media (max-width: 479px) {
  .timeline-navigation--title {
    display: none;
  }
}
.toolbar-file-name {
  display: grid;
  grid-template: "content";
  position: relative;
}

.toolbar-file-name--list {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 0;
  margin: 0;
  grid-area: content;
  justify-self: center;
  grid-template-columns: minmax(20px, 1fr);
}

.toolbar-file-name--input {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-primary);
  grid-area: content;
  border: none;
  background: transparent;
  text-align: center;
  outline: none;
  margin: 0;
  padding: 0;
  min-width: 80px;
}

.toolbar-file-name--input::selection {
  background: var(--action-faded);
}

.toolbar-file-name--entry-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  cursor: text;
  color: var(--neutral-secondary);
}

.toolbar-file-name--entry-button.hidden {
  opacity: 0;
}

.toolbar-file-name--list-entry {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--neutral-tertiary);
}

.toolbar-file-name--list-entry--link {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--neutral-tertiary);
  text-decoration: none;
}

.toolbar-file-name--list-entry--link:hover {
  text-decoration: underline;
}

/* Graph Colors */
/* Dimensions */
.visualization-item-line-chart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visualization-item-line-chart-icon::after {
  content: "";
  position: absolute;
  background-color: red;
  border-radius: 50%;
  width: var(--width);
  height: var(--height);
}

.visualization-item-line-chart-icon[data-color=grey-01]::after {
  background-color: #dce0f6;
}

.visualization-item-line-chart-icon[data-color=grey-02]::after {
  background-color: #b9bdd3;
}

.visualization-item-line-chart-icon[data-color=grey-03]::after {
  background-color: #9095a9;
}

.visualization-item-line-chart-icon[data-color=grey-04]::after {
  background-color: #696d81;
}

.visualization-item-line-chart-icon[data-color=blue-01]::after {
  background-color: #2a61ed;
}

.visualization-item-line-chart-icon[data-color=blue-02]::after {
  background-color: #5381f3;
}

.visualization-item-line-chart-icon[data-color=blue-03]::after {
  background-color: #86a9f9;
}

.visualization-item-line-chart-icon[data-color=blue-04]::after {
  background-color: #aec8fe;
}

.visualization-item-line-chart-icon[data-color=cyan-01]::after {
  background-color: #08abbc;
}

.visualization-item-line-chart-icon[data-color=cyan-02]::after {
  background-color: #3fc3d0;
}

.visualization-item-line-chart-icon[data-color=cyan-03]::after {
  background-color: #75dae3;
}

.visualization-item-line-chart-icon[data-color=cyan-04]::after {
  background-color: #adf2f7;
}

.visualization-item-line-chart-icon[data-color=yellow-01]::after {
  background-color: #df9d1d;
}

.visualization-item-line-chart-icon[data-color=yellow-02]::after {
  background-color: #e8b34c;
}

.visualization-item-line-chart-icon[data-color=yellow-03]::after {
  background-color: #f2ca7e;
}

.visualization-item-line-chart-icon[data-color=yellow-04]::after {
  background-color: #fbe0ac;
}

.visualization-item-line-chart-icon[data-color=purple-01]::after {
  background-color: #7e36ea;
}

.visualization-item-line-chart-icon[data-color=purple-02]::after {
  background-color: #975cf0;
}

.visualization-item-line-chart-icon[data-color=purple-03]::after {
  background-color: #b589f7;
}

.visualization-item-line-chart-icon[data-color=purple-04]::after {
  background-color: #d1b5fd;
}

.visualization-item-line-chart-icon[data-color=purple-05]::after {
  background-color: #d1b5fd;
}

.visualization-item-line-chart-icon[data-color=pink-01]::after {
  background-color: #d821e7;
}

.visualization-item-line-chart-icon[data-color=pink-02]::after {
  background-color: #e45ae7;
}

.visualization-item-line-chart-icon[data-color=pink-03]::after {
  background-color: #ef8ce7;
}

.visualization-item-line-chart-icon[data-color=pink-04]::after {
  background-color: #fabce6;
}

.visualization-item-line-chart-icon[data-color=green-01]::after {
  background-color: #1ddf30;
}

.visualization-item-line-chart-icon[data-color=green-02]::after {
  background-color: #4fe85b;
}

.visualization-item-line-chart-icon[data-color=green-03]::after {
  background-color: #82f188;
}

.visualization-item-line-chart-icon[data-color=green-04]::after {
  background-color: #b6fbb5;
}

.visualization-item-line-chart-icon[data-color=red-01]::after {
  background-color: #df301d;
}

.visualization-item-line-chart-icon[data-color=red-02]::after {
  background-color: #e85e4e;
}

.visualization-item-line-chart-icon[data-color=red-03]::after {
  background-color: #f18b80;
}

.visualization-item-line-chart-icon[data-color=red-04]::after {
  background-color: #fbbbb4;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-01]::after {
  background-color: #1a3078;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-02]::after {
  background-color: #2542a1;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-03]::after {
  background-color: #318fee;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-04]::after {
  background-color: #5973de;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-05]::after {
  background-color: #8497e0;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-06]::after {
  background-color: #bac2e0;
}

.visualization-item-line-chart-icon[data-color=blue-ocean-07]::after {
  background-color: #fefefe;
}

.visualization-item-status-icon {
  width: 8px;
  height: 8px;
}

.visualization-item-line-chart-icon[data-size=normal]::after {
  --width: 6px;
  --height: 6px;
}

.visualization-item-line-chart-icon[data-size=medium]::after {
  --width: 8px;
  --height: 8px;
}

.visualization-item-line-chart-icon[data-size=large]::after {
  --width: 10px;
  --height: 10px;
}

.board-add-section-icon-button, .board-add-section-button {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  outline: none;
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--neutral-60);
  fill: var(--neutral-60);
  border-radius: 5px;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-bottom: 12px;
  text-decoration: none;
  width: max-content;
  transition: background-color 100ms ease, color 100ms ease, fill 100ms ease;
}
body:not(.using-mouse) .board-add-section-icon-button:focus::after, body:not(.using-mouse) .board-add-section-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-add-section-icon-button::-moz-focus-inner, .board-add-section-button::-moz-focus-inner {
  border: 0;
}

.board-add-section-icon-button:disabled, .board-add-section-button:disabled {
  fill: var(--neutral-40);
}

.board-add-section-icon-button:not(:disabled):hover, .board-add-section-button:not(:disabled):hover {
  background: var(--background-04);
  color: var(--system-action-blue-base);
  fill: var(--system-action-blue-base);
}

.board-add-section-icon-button:not(:disabled):active, .board-add-section-button:not(:disabled):active {
  background: var(--neutral-10);
  color: var(--system-action-blue-base);
  fill: var(--system-action-blue-base);
}

.board-add-section-button {
  padding: 8px 10px;
  width: 100%;
  justify-content: start;
}

.board-add-section-icon-button {
  padding: 10px 5px;
  height: 100%;
}

.board-add-section-button[data-over]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--system-action-blue-base);
  border-radius: 2px;
  pointer-events: none;
}

.board-section-drop-zone {
  position: relative;
  height: 2px;
  margin: 5px 0;
}
.board-section-drop-zone[data-over] {
  background: var(--system-action-blue-dark-2);
}

.board-section-drop-zone--expanded {
  display: none;
}

.board-section-drop-zone[data-over-document] .board-section-drop-zone--expanded {
  display: block;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 0;
  right: 0;
}

.board-section {
  list-style: none;
  position: relative;
}

.board-section:hover .board-section--add-button {
  opacity: 1;
}

.board-section--button-entry {
  list-style: none;
  position: absolute;
  width: 32px;
  display: grid;
  justify-content: start;
  align-items: center;
  top: 0;
  bottom: 0;
  left: -32px;
}
@media (max-width: 600px) {
  .board-section--button-entry {
    display: none;
  }
}

@media (hover: none) {
  .board-section--add-button {
    opacity: 1;
  }
}
@media (hover: hover) {
  .board-section--add-button {
    opacity: 0;
  }
  .board-section--add-button:focus {
    opacity: 1;
  }
}

.board-section--visualizations {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--board-section-columns), 1fr);
  gap: 8px;
}

.board-section--visualization {
  display: grid;
}

.board-section--visualization[data-height=small] {
  height: 300px;
}

.board-section--visualization[data-height=large] {
  height: 400px;
}

.board-section--visualization[data-width="1"] {
  grid-column-end: span 1;
}

.board-section--visualization[data-width="2"] {
  grid-column-end: span 2;
}

.board-section--visualization[data-width="3"] {
  grid-column-end: span 3;
}

.board-section--visualization[data-width="4"] {
  grid-column-end: span 4;
}

.m-card-activity {
  border: 0;
  margin-top: 12px;
  padding: 16px;
  display: grid;
  gap: 8px;
}
.m-card-activity:hover {
  border: 0;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.12);
}

.m-card-activity-header {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  outline: none;
  position: relative;
  justify-self: start;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  display: inline-flex;
}
body:not(.using-mouse) .m-card-activity-header:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.m-card-activity-header::-moz-focus-inner {
  border: 0;
}
.m-card-activity-header:hover {
  color: rgba(0, 0, 0, 0.84);
}

.m-card-activity-header[data-untitled] {
  color: rgba(0, 0, 0, 0.2);
}
.m-card-activity-header[data-untitled]:hover {
  color: rgba(0, 0, 0, 0.34);
}

.m-card-activity-description {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 24px;
}

.m-card-activity-description--title {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.84);
  margin: 0;
}

.m-card-activity-description--timestamp {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  max-width: 200px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.4);
}

.m-card-activity--target {
  display: grid;
  gap: 8px;
}

.m-card-activity--content {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  color: rgba(0, 0, 0, 0.56);
}
.m-card-activity--content:hover {
  color: rgba(0, 0, 0, 0.84);
}

.m-card-activity--context-link {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  outline: none;
  position: relative;
  padding: 2px 0;
  display: inline-flex;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.56);
}
body:not(.using-mouse) .m-card-activity--context-link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.m-card-activity--context-link::-moz-focus-inner {
  border: 0;
}
.m-card-activity--context-link:hover {
  color: rgba(0, 0, 0, 0.84);
}

.dialog-image-comment-container {
  max-width: 88vw;
  height: 88vh;
  outline: none;
}

.dialog-image--content {
  align-items: center;
  padding: 26px 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  align-items: center;
  grid-gap: 32px;
  grid-template: "previous image next" auto/44px 1fr 44px;
}

.dialog-image--button-arrow-left {
  grid-area: previous;
}

.dialog-image--button-arrow-right {
  grid-area: next;
}

.dialog-image--content-wrapper {
  grid-area: image;
  display: grid;
  align-self: stretch;
  grid-template: "image";
}

.dialog-image--image {
  grid-area: image;
  display: grid;
  will-change: transform;
  justify-content: center;
  align-content: center;
}

.dialog-image--image-img {
  max-width: auto;
  height: auto;
}

.dialog-image--button-arrow-left,
.dialog-image--button-arrow-right {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-04);
  border-radius: 50%;
  height: 44px;
  width: 44px;
  fill: var(--neutral-60);
}
body:not(.using-mouse) .dialog-image--button-arrow-left:focus::after,
body:not(.using-mouse) .dialog-image--button-arrow-right:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #4564fd;
  border-radius: 50%;
}
.dialog-image--button-arrow-left::-moz-focus-inner,
.dialog-image--button-arrow-right::-moz-focus-inner {
  border: 0;
}

.export-items-downloadable--container {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 0;
}

.export-items-downloadable {
  padding: 7px 8px;
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  gap: 4px;
  border: 1px solid var(--neutral-10);
  border-radius: 4px;
}

.export-modal-visualization-downloadable-unsupported {
  fill: var(--neutral-80);
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  gap: 6px;
  padding: 8px;
  height: 28px;
  border-radius: 4px;
}
.export-modal-visualization-downloadable-unsupported:hover {
  background-color: var(--neutral-10);
}

.export-items--visualization-container {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 8px 1fr;
  padding: 6px;
}

.export-items--title-container {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-80);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 1px;
}

.export-items--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--white-80);
}

.export-items-downloadable--empty-signal {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--white-80);
  fill: var(--system-alert-yellow-base);
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
  justify-content: start;
  padding: 6px;
}

.export-modal-checkbox-container {
  margin-left: 2px;
}

.export-modal-visualization-container {
  padding: 2px 0;
}

.page-checkbox-icon {
  width: 8px;
  height: 8px;
}

.page-checkbox-signals {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.export-items-signals {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: max-content 1fr;
  gap: 4px;
  margin-left: 10px;
}

.dialog-board--settings-content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  grid-auto-flow: row;
  gap: 13px;
}

.dialog-board--settings-fieldset {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #b4b7bd;
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  border: none;
  padding: 0;
  margin: 0;
}

.dialog-board--settings-input-select {
  max-width: 140px;
}

.board-visualization-expand--visualizations {
  gap: 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.preview-dialogue {
  max-width: 80vw;
}

.preview-dialogue .board-seetings-main--content {
  height: 284px;
  padding: 12px 0;
  background: transparent;
}
.preview-dialogue .board-visualization-legend {
  justify-content: start;
  padding: 8px 0;
}

.preview-dialogue-header {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
}

.board-visualization-preview-time-bar {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
}

.board-visualization-preview-time-bar--button-group:first-child {
  gap: 10px;
}

.board-visualization-preview-time-bar--button-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
}

.board-visualization-preview-time-bar--header {
  line-height: 32px;
  font-size: 22px;
  font-family: Roboto;
  font-weight: 600;
  color: var(--neutral-90);
  padding: 0;
  margin: 0;
}

.board-visualization-preview-toolbar {
  display: grid;
  grid-template: "leading trailing" auto/max-content max-content;
  justify-content: space-between;
  gap: 4px;
}

.board-visualization-preview-toolbar--leading,
.board-visualization-preview-toolbar--trailing {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 2px;
}

.board-visualization-preview-toolbar--leading {
  grid-area: leading;
}

.board-visualization-preview-toolbar--trailing {
  grid-area: trailing;
}

.dialog-collection--move-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #cdcfd3;
  display: grid;
  grid-auto-flow: row;
  gap: 2px;
  margin-bottom: 16px;
}

.dialog-collection--move-fieldset {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  border: none;
  padding: 0;
}

.dialog-collection--move-fieldset-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #cdcfd3;
}

.dialog-collection--move-footer {
  color: #9a9fa5;
  display: grid;
  align-items: center;
  gap: 8px;
  grid-auto-flow: column;
  grid-template-columns: auto max-content;
}

.dialog-collection--move-footer[data-border-style=solid] {
  position: relative;
}
.dialog-collection--move-footer[data-border-style=solid]::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #2c3339;
  left: 0;
  top: -16px;
  position: absolute;
}

.dialog-collection--move-footer [data-text-style] {
  color: #cdcfd3;
}

.dialog-collection--move-text-solid {
  color: #cdcfd3;
  box-shadow: inset 0 0 0 1px #2c3339;
  padding: 6px;
}

.dialog-collection--move-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 4px;
}

.dialog-collection--move-list {
  margin: 0;
  padding: 0;
}

.dialog-collection--move-list-item {
  list-style: none;
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
}
.dialog-collection--move-list-item:focus-visible {
  box-shadow: inset 0 0 0 1px #4564fd;
}
.dialog-collection--move-list-item[aria-selected=true] {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dialog-collection--header {
  line-height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 600;
  color: white;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 8px;
}

.dialog-collection--content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  grid-auto-flow: row;
  gap: 14px;
}

.dialog-collection--fieldset {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  border: none;
  padding: 0;
}

.dialog-collection--fieldset-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #cdcfd3;
}

.dialog-collection--footer {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
}

.dialog-collection--settings-content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  grid-auto-flow: row;
  gap: 13px;
}

.dialog-collection--settings-fieldset {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #b4b7bd;
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  border: none;
  padding: 0;
  margin: 0;
}

.dialog-collection--settings-fieldset-button {
  justify-self: end;
}

.dialog-collection--content-settings {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #9a9fa5;
  display: grid;
  gap: 16px;
}

.avatar-settings--container {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #cdcfd3;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  align-items: center;
}

.avatar-settings {
  width: 24px;
  height: 24px;
}

.dialog-document-move--selected-collection-name {
  color: var(--neutral-80);
}

.dialog-document-move--move-text-solid {
  color: var(--neutral-80);
  box-shadow: inset 0 0 0 1px var(--neutral-10);
  padding: 6px;
}

.dialog-document-move--move-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 4px;
}

.dialog-document-move--collections {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.dialog-document-move--collection {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
}
.dialog-document-move--collection:focus-visible {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}
.dialog-document-move--collection[aria-selected=true] {
  background: var(--white-10);
  color: var(--neutral-100);
}

.dialog-document-move--footer {
  flex-grow: 1;
  color: var(--neutral-60);
  display: grid;
  align-items: center;
  gap: 8px;
  grid-auto-flow: column;
  grid-template-columns: auto max-content;
}

/* Graph Colors */
/* Dimensions */
.items-data-canvas-header {
  display: grid;
  gap: 14px;
  padding: 0 24px;
}

.items-header-title {
  font-weight: bold;
  font-size: 28px;
  line-height: 32px;
  color: var(--neutral-80);
  margin: 0;
  padding: 0;
}

.items-header-label {
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  margin-bottom: 16px;
}

.items-header-info-title {
  flex-wrap: wrap;
}

.items-header-info-title[data-theme=dark] {
  color: #ffffff;
}

.items-header-info-title .header-contextual--title {
  line-height: 24px;
  font-size: 16px;
  letter-spacing: 0.8px;
  font-family: Roboto;
  font-weight: 700;
  text-transform: uppercase;
}

.items-header-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.items-header-eng-unit {
  margin-left: 8px;
  color: var(--neutral-60);
}

.items-header-metadata {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.items-header-metadata-tag {
  margin: 0 4px 4px 0;
}

.item-data-canvas-visualization {
  padding: 16px 0;
}

.item-data-canvas-container {
  isolation: isolate;
  display: grid;
  gap: 12px;
  padding: 90px;
  height: 100vh;
  justify-content: center;
}
@supports not (isolation: isolate) {
  .item-data-canvas-container {
    transform: scale(1);
  }
}

.item-data-canvas {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "header" "canvas" "details";
  background-color: var(--background-03);
  box-shadow: var(--shadow-03);
  border-radius: 2px;
  padding: 16px 0;
  max-width: 912px;
}

.items-content {
  grid-area: canvas;
  overflow: hidden;
  margin: 0 24px;
  width: auto;
}

.item-data-canvas .timeline-canvas-scrollable {
  overflow: initial;
}

.item-data-canvas-scrollable-content {
  pointer-events: none;
}

.items-data-canvas--stats {
  padding: 0 24px;
}

.items-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
  margin-top: 16px;
}

.dialog-timeline--header {
  line-height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 600;
  color: white;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 8px;
}

.dialog-timeline--content {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: #9a9fa5;
  display: grid;
  grid-auto-flow: row;
  gap: 14px;
}

.dialog-timeline--fieldset {
  display: grid;
  gap: 4px;
  grid-auto-flow: row;
  border: none;
  padding: 0;
}

.dialog-timeline--fieldset-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: #cdcfd3;
}

.dialog-timeline--footer {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
}

/* Graph Colors */
/* Dimensions */
.login {
  width: 100vw;
  min-height: 100vh;
  background: #223680;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 40px 1fr minmax(200px, 1000px) 1fr 40px;
  grid-template-rows: 40px 1fr auto 1fr 40px;
}

.login-content {
  grid-column: 3;
  grid-row: 3;
}

.login-logo {
  width: 270px;
  height: 68px;
}

.login-description {
  margin-top: 45px;
  max-width: 715px;
  font-size: 24px;
  line-height: 1.25;
  color: white;
  font-family: Roboto;
  font-weight: 300;
  font-size: 28px;
}

.login-learn-more {
  margin-top: 27px;
  font-size: 20px;
  color: white;
  display: inline-block;
  text-decoration: none;
}

.login-learn-more:hover {
  text-decoration: underline;
}

.login-button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  transition: background-color 200ms ease, color 200ms ease, fill 200ms ease;
  transition-timing-function: spring(1 173 28 20);
  font-family: "Roboto";
  font-weight: 400;
  font-size: 22px;
  text-align: center;
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 0 18px 0 25px;
  height: 59px;
  border-radius: 29px;
  min-width: 227px;
  background-color: #ffffff;
  fill: #4564fd;
  color: #4564fd;
}
body:not(.using-mouse) .login-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.login-button::-moz-focus-inner {
  border: 0;
}

.login-button {
  margin-top: 74px;
  margin-left: auto;
  margin-right: auto;
}

.login-button:hover {
  background-color: #ffffff;
  fill: #0c3cbc;
  color: #0c3cbc;
}

.login-button:active {
  background-color: #dee3ff;
  fill: #223680;
  color: #223680;
}

.setup-header {
  display: grid;
  gap: 8px;
}

.setup-header--title {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.038em;
  color: #002040;
  padding: 0;
  margin: 0;
}

.setup-header--description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.038em;
  color: #002040;
  padding: 0;
  margin: 0;
}

.setup-panel--form {
  display: grid;
  gap: 12px;
  align-items: stretch;
  justify-content: stretch;
}

.setup-panel-form--password-description {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 0;
  color: #152233;
  margin: 0;
}
.setup-panel-form--password-description[data-validity=invalid] {
  color: #e75f6d;
}

.visualization-legend {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  cursor: pointer;
  pointer-events: auto;
  margin: 0 8px 4px 8px;
  z-index: 200;
  position: relative;
}

/*Accessible*/
.timeline-canvas--legend-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  pointer-events: auto;
  margin: 4px 7px;
  z-index: 200;
  position: relative;
}

.legend-entry {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  background-color: var(--white-10);
  border-radius: 2px;
  color: var(--neutral-80);
  display: grid;
  grid-template-columns: 8px max-content;
  align-items: center;
  grid-auto-flow: column;
  gap: 4px;
  padding: 6px 8px;
  margin: 1px;
}
body:not(.using-mouse) .legend-entry:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.legend-entry::-moz-focus-inner {
  border: 0;
}
.legend-entry:not([disabled]):not([data-is-active]):hover {
  background-color: var(--white-15);
}
.legend-entry:not([disabled]):not([data-is-active]):active {
  background-color: var(--white-20);
}
.legend-entry[data-is-active] {
  background-color: var(--white-20);
  color: var(--neutral-60);
}

.legend-entry[data-visibility] {
  color: var(--neutral-60);
  opacity: 0.5;
}
.legend-entry[data-visibility]:not([disabled]):not([data-is-active]):hover {
  background-color: var(--white-15);
}
.legend-entry[data-visibility][data-is-active] {
  background-color: var(--white-20);
}

.legend-entry--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-entry[disabled] {
  background-color: var(--white-20);
  color: var(--neutral-60);
  fill: var(--neutral-60);
}

.a-legend-visual-active {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  border-radius: 2px;
  display: grid;
  align-items: center;
  gap: 2px;
  grid-auto-flow: column;
  padding: 6px 8px;
  fill: var(--neutral-50);
  color: var(--neutral-80);
}
body:not(.using-mouse) .a-legend-visual-active:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.a-legend-visual-active::-moz-focus-inner {
  border: 0;
}
.a-legend-visual-active[data-untitled] {
  color: var(--neutral-60);
}
.a-legend-visual-active:not([disabled]):not([data-is-active]):hover {
  background-color: var(--white-10);
}
.a-legend-visual-active:not([disabled]):not([data-is-active]):active {
  background-color: var(--white-20);
}
.a-legend-visual-active[data-is-active] {
  background-color: var(--white-20);
}
.a-legend-visual-active[disabled] .visualization-legend--expand {
  display: none;
}

.timeline-toc-tree-entry {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 4px;
  height: 28px;
}

.timeline-toc-tree-entry[draggable] {
  cursor: grab;
}

.timeline-toc-tree-entry[data-dragging],
.timeline-toc-tree-entry:active {
  cursor: grabbing;
}

.timeline-toc-tree-entry[data-dragging] {
  background-color: var(--white-15);
}

.timeline-toc-tree-entry[data-over] {
  background-color: var(--white-15);
}

.timeline-toc-tree-entry:hover {
  box-shadow: inset 0 0 0 1px var(--white-10);
}

.timeline-toc-tree-entry--visualization-item {
  padding-left: 24px;
}

.timeline-toc-visualization-item-inaccessible--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-80);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.6;
}

.timeline-toc-tree-entry--button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  padding: 2px;
  flex: 1 1 0;
  width: 0;
  cursor: inherit;
  outline: none;
}
@supports selector(:focus-visible) {
  .timeline-toc-tree-entry--button:focus-visible::before {
    box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
  }
}
@supports not selector(:focus-visible) {
  body:not(.using-mouse) .timeline-toc-tree-entry--button:focus::before {
    box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
  }
}

.timeline-toc-tree-entry--button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.timeline-toc-tree-entry--button-visualization-item-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--white-80);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-toc-tree-entry--button-visualization-item-content[data-hidden] {
  color: var(--white-60);
}

.timeline-toc-tree-entry--button-visualization-content {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--white-80);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.timeline-toc-tree-entry--expand-button svg {
  transition: transform linear 0.1s;
}

.timeline-toc-tree-entry--expand-button[data-expanded] svg {
  transform: rotate(90deg);
}

@media (hover: none) {
  .timeline-toc-tree-entry--action-button {
    opacity: 1;
  }
}
@media (hover: hover) {
  .timeline-toc-tree-entry--action-button {
    opacity: 0;
  }
  .timeline-toc-tree-entry--action-button:focus {
    opacity: 1;
  }
}
.timeline-toc-tree-entry:hover .timeline-toc-tree-entry--action-button, .timeline-toc-tree-entry--action-button[aria-expanded=true] {
  opacity: 1;
}

.timeline-toc-tree-entry--expand-button,
.timeline-toc-tree-entry--visualization-icon,
.timeline-toc-tree-entry--action-button {
  flex-shrink: 0;
  z-index: 100;
}

.timeline-toc-tree-entry--visualization-icon {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.timeline-toc-tree-entry--visualization-icon[data-hidden] {
  opacity: 0.6;
}

.timeline-toc-tree-entry--visualization-icon .visualization-item-status-icon {
  width: 8px;
  height: 8px;
}

/* Graph Colors */
/* Dimensions */
.timeline-toc {
  width: 260px;
  height: calc(100vh - 41px);
  background-color: var(--background-04);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow: auto;
  flex-shrink: 0;
}

.timeline-toc--visualizations {
  padding: 0;
  margin: 0;
}

.timeline-toc--placeholder {
  position: relative;
  height: 0;
}

.timeline-toc--placeholder::after {
  content: "";
  position: absolute;
  height: 2px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--system-action-blue-base);
}

.timeline-toc--placeholder:first-child::after {
  top: 0;
}

.timeline-toc--placeholder:last-child::after {
  top: -2px;
}

.timeline-toc--visualization {
  padding: 0;
  margin: 0;
}

.timeline-toc--add-button {
  position: relative;
  padding: 0 4px;
}
.timeline-toc--add-button[data-over] {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.timeline-toc--visualization-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.board-aggregation {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--neutral-80);
  background: var(--neutral-10);
}

.board-visualization-bar-chart {
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 0;
}

.board-visualization-bar-chart--canvas-container {
  isolation: isolate;
  display: grid;
  position: relative;
}
@supports not (isolation: isolate) {
  .board-visualization-bar-chart--canvas-container {
    transform: scale(1);
  }
}

.board-visualization-bar-chart--canvas {
  position: absolute;
  inset: 0;
  z-index: 200;
}

.board-visualization-bar-chart--no-value {
  align-self: center;
  justify-self: center;
  z-index: 300;
  pointer-events: none;
}

.board-visualization-gauge-chart {
  display: flex;
  flex-direction: column;
  grid-template-rows: 1fr;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 12px;
}

.board-visualization-gauge-chart--current-state {
  line-height: 24px;
  font-size: 17px;
  font-family: Roboto;
  font-weight: 700;
  transition: color 120ms ease;
  flex-shrink: 0;
  color: var(--neutral-90);
  border-radius: 4px;
  padding: 0 2px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.board-visualization-gauge-chart--current-state-tooltip {
  background-color: var(--neutral-10);
  padding: 2px 8px;
}

.board-visualization-gauge-chart--canvas-container {
  flex-grow: 1;
  display: grid;
  position: relative;
}

.board-visualization-gauge-chart--canvas {
  position: absolute;
  inset: 0;
}

.board-visualization-gauge-chart-value {
  justify-content: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.board-visualization-gauge-chart-value--value {
  color: var(--neutral-90);
}

.board-visualization-gauge-chart-value--eng-unit {
  color: var(--neutral-60);
}

[data-height=large] .board-visualization-gauge-chart-value {
  line-height: 57.6000022888px;
  font-size: 48px;
  font-family: Roboto;
  font-weight: 700;
}

[data-height=small] .board-visualization-gauge-chart-value {
  line-height: 32px;
  font-size: 22px;
  font-family: Roboto;
  font-weight: 600;
}

.board-visualization-gauge-chart-value--label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  text-align: center;
  margin: 0;
}

.board-visualization-gauge-chart--aggregation {
  align-self: center;
}

.board-visualization-gauge-chart--no-value {
  align-self: center;
}

.board-visualization-gauge-chart--container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 20px;
  fill: var(--neutral-80);
}

.board-visualization-gauge--item-icon {
  width: 10px;
  height: 10px;
}

.board-visualization-gauge--item-icon[data-icon-style=rounded] {
  border-radius: 50%;
}

.board-item-icon {
  width: 10px;
  height: 10px;
}

.board-item-icon[data-icon-style=rounded] {
  border-radius: 50%;
}

.board-item-icon[data-icon-style=square] {
  border-radius: 0;
}

.board-visualization-line-chart {
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 0;
}

.board-visualization-line-chart--canvas-container {
  isolation: isolate;
  display: grid;
  position: relative;
}
@supports not (isolation: isolate) {
  .board-visualization-line-chart--canvas-container {
    transform: scale(1);
  }
}

.board-visualization-line-chart--no-value {
  align-self: center;
  justify-self: center;
  z-index: 300;
}

.board-visualization-line-chart--canvas {
  outline: none;
  position: absolute;
  inset: 0;
  z-index: 200;
}

.board-tooltip-popover {
  width: initial;
}

.board-line-chart-tooltips {
  display: flex;
  min-width: 200px;
  max-width: 280px;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-line-chart-tooltip {
  display: flex;
  gap: 4px;
}

.board-line-chart-tooltip--value {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-90);
}

.board-line-chart-tooltip--eng-unit {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
}

.board-line-chart-tooltip--icon {
  align-self: center;
}

.board-bar-chart-tooltip--icon {
  align-self: center;
}

.board-line-chart-tooltip--name {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
  flex-grow: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.board-line-chart-tooltip--group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.board-line-chart-tooltip--value-box {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--neutral-100);
  border-radius: 4px;
  background-color: var(--neutral-20);
  padding: 2px 4px;
}

.board-line-chart-tooltip--range {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
  margin: 0;
}

.board-visualization-polar {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 0;
}

.board-visualization-polar--canvas-container {
  isolation: isolate;
  display: grid;
  position: relative;
}
@supports not (isolation: isolate) {
  .board-visualization-polar--canvas-container {
    transform: scale(1);
  }
}

.board-visualization-polar--no-value {
  align-self: center;
  justify-self: center;
  z-index: 300;
}

.board-visualization-polar--canvas {
  position: absolute;
  inset: 0;
  z-index: 200;
}

.board-visualization-scatter {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 0;
}

.board-visualization-scatter--canvas-container {
  isolation: isolate;
  display: grid;
  position: relative;
}
@supports not (isolation: isolate) {
  .board-visualization-scatter--canvas-container {
    transform: scale(1);
  }
}

.board-visualization-scatter--canvas-container .board-visualization-line-chart--canvas {
  justify-self: center;
}

.board-visualization-scatter--no-value {
  align-self: center;
  justify-self: center;
  z-index: 300;
}

.board-visualization-scatter--canvas {
  position: absolute;
  inset: 0;
  z-index: 200;
}

.visualization-single-value {
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  justify-content: stretch;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.visualization-single-value--data {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 0;
  flex-direction: row;
  gap: 0 4px;
  justify-content: center;
}

.visualization-single-value--value {
  color: var(--neutral-100);
  text-align: center;
}

.visualization-single-value--value,
.visualization-single-value--eng-unit {
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
  text-overflow: ellipsis;
}

[data-height=large] .visualization-single-value--data {
  line-height: 57.6000022888px;
  font-size: 48px;
  font-family: Roboto;
  font-weight: 700;
}

[data-height=small] .visualization-single-value--data {
  line-height: 32px;
  font-size: 22px;
  font-family: Roboto;
  font-weight: 600;
}

.visualization-single-value--eng-unit {
  color: var(--neutral-40);
  text-align: center;
  margin: 0;
}

.visualization-single-value--label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  text-align: center;
  margin: 0;
}

.visualization-single-value--aggregation {
  justify-self: center;
}

.visualization-single-value--no-value {
  justify-self: center;
}

.m-card-activity-collapsed-comments {
  padding: 0;
  margin: 0;
}

.m-card-activity-collapsed-comment {
  display: flex;
  list-style: none;
  box-shadow: inset 0 -1px 0 0 #d3d6df;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.m-card-activity-collapsed-comment:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  box-shadow: none;
}

.m-card-activity-collapsed-replies {
  margin: 8px 0 0 10px;
  padding: 0 0 0 15px;
  border-left: 1px solid #d3d6df;
  list-style: none;
  display: grid;
  gap: 16px;
}

.comment-text-content, .m-card-activity-comment-text {
  overflow-wrap: break-word;
}

.comment-text-content .mentioned-user, .m-card-activity-comment-text .mentioned-user {
  color: var(--system-action-blue-base);
}

.comment-text-content .mentioned-item, .m-card-activity-comment-text .mentioned-item {
  color: var(--system-action-blue-base);
}

.comment-text-content .highlight, .m-card-activity-comment-text .highlight {
  background: #ecefff;
  font-weight: bold;
}

.m-card-activity-comment {
  outline: none;
  position: relative;
  display: flex;
  flex-grow: 1;
  align-content: center;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.56);
}
body:not(.using-mouse) .m-card-activity-comment:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.m-card-activity-comment::-moz-focus-inner {
  border: 0;
}
.m-card-activity-comment:hover {
  background: rgba(69, 100, 253, 0.16);
  color: rgba(0, 0, 0, 0.84);
}

.m-card-activity-comment-text {
  line-height: 16px;
  font-size: 13px;
  letter-spacing: 0.39px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
  padding-left: 8px;
  text-align: left;
}

.m-card-activity-comment-text[data-preview] {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}

.m-card-activity-comment-container {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
}

.m-card-activity-comment--avatar {
  align-self: start;
}

.m-card-activity-attachment .comment-attachment-content {
  margin-top: 8px;
  border-radius: 0;
  border-color: #a4aabb;
  color: #495578;
}

.item-stats--table {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

.item-stats--table-col-md {
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem;
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

[data-is-fluctuating] .item-stats--table-unit {
  opacity: 0.4;
}

.item-stats--table-title {
  color: #aab2c8;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin: 0;
}

.item-stats--table-unit {
  color: #f0f2ff;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.item-stats--table--loading {
  padding: 0 2px;
  display: flex;
  align-items: center;
  height: 16px;
}

.item-stats--text-info {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #aab2c8;
}

.item-stats--unsupported-icon {
  fill: #fbe16e;
  width: 24px;
  height: 24px;
  margin-right: 5px;
}

.item-stats--unsupported {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  display: flex;
  align-items: center;
  color: #aab2c8;
  margin: 5px;
}

.invitations-show {
  display: grid;
  gap: 20px;
  align-items: stretch;
  justify-content: stretch;
}

.invitations-show--title {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.038em;
  color: #002040;
  padding: 0;
  margin: 0;
}

.invitations-show--description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.038em;
  color: #002040;
  padding: 0;
  margin: 0;
}

.demo-data-card {
  display: grid;
  grid-template-rows: 134px auto;
  position: relative;
  outline: none;
}
.demo-data-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 1px #d3d6df;
}
.demo-data-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 4px rgba(21, 34, 51, 0.08), 0px 2px 12px rgba(21, 34, 51, 0.08);
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.demo-data-card:hover::before, .demo-data-card:focus::before {
  box-shadow: 0 0 0 1px #4564fd;
}
.demo-data-card:hover::after, .demo-data-card:focus::after {
  opacity: 1;
}
.demo-data-card[aria-checked=true]::before {
  box-shadow: 0 0 0 2px #4564fd;
}
.demo-data-card[aria-checked=true]::after {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(21, 34, 51, 0.12);
  opacity: 1;
}
.demo-data-card[aria-checked=true] .demo-data-card--checkmark {
  opacity: 1;
}

.demo-data-card--checkmark {
  position: absolute;
  right: 10px;
  top: 10px;
  opacity: 0;
  pointer-events: none;
}

.demo-data-card--image {
  width: 100%;
  object-fit: cover;
}

.demo-data-card--content {
  display: grid;
  padding: 12px;
  gap: 8px;
}

.demo-data-card--title {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-weight: bold;
  font-size: 17px;
  line-height: 28px;
  color: #2e3a5e;
}

.demo-data-card--description {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: #2e3a5e;
}

.onboarding-step-header {
  display: grid;
  gap: 8px;
}

.onboarding-step-header--progress {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  letter-spacing: 0.038em;
  text-transform: uppercase;
  color: #2e3a5e;
}

.onboarding-step-header--title {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  letter-spacing: 0.038em;
  padding: 0;
  margin: 0;
  color: #2e3a5e;
}

.onboarding-role-fieldset {
  line-height: 21px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  color: #3c4756;
  border: none;
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.organization-new-form-role--description {
  color: #717881;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0.01em;
  margin: 0;
}

.organization-new-form-role--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: #152233;
  margin: 0;
}

.onboarding-role-radio-button {
  height: 24px;
  gap: 4px;
}

.onboarding-role-radio-button-top {
  margin-top: 8px;
}

.organization-new-role-form--button {
  display: flex;
  justify-content: flex-end;
}

.organization-new-form {
  display: grid;
  gap: 12px;
}

.organization-new-form--description {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #495578;
}

.demo-data--card-container {
  display: grid;
  margin: 0;
  border: none;
  padding: 0;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Graph Colors */
/* Dimensions */
.timelines-content-activities-wrapper {
  overflow-x: auto;
  overflow-y: scroll;
  position: relative;
}

@media (max-width: 700px) {
  .timelines-content-activities-wrapper {
    height: calc(100vh - 64px);
  }
}
.timelines-content-activities-container {
  padding: 24px 16px 0 16px;
  flex-basis: 0;
  flex-grow: 1;
  display: grid;
  justify-content: center;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(auto, 560px);
}
@media (max-width: 700px) {
  .timelines-content-activities-container {
    padding-top: 0;
  }
}

.timelines-content-activities-container-inner {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-content: center;
}

.timelines-content-activities-container-inner[data-loading] {
  opacity: 0.4;
}

[data-display-mode=beside-content] .timelines-content-activities-wrapper {
  height: 100vh;
}

@media (max-width: 700px) {
  [data-display-mode=content-only] .timelines-content-activities-wrapper {
    height: calc(100vh - 44px);
    margin-top: 10px;
  }
}
.conversations {
  flex-grow: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(auto, 800px);
  grid-template-rows: 1fr max-content;
  padding: 0 20px;
  justify-content: center;
  background: var(--background-03);
}

.conversations-messages {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  align-content: start;
}

.conversations-message {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-white);
  margin: 0;
  list-style: none;
}

.conversations-message[data-role=user] {
  max-width: 600px;
  margin-left: 20px;
  place-self: end;
  padding: 0 12px;
  background-color: var(--opacity-mild);
  border-radius: 24px;
}

.conversations-form-wrapper {
  background: var(--background-03);
  position: sticky;
  display: grid;
  border-radius: 24px 24px 0 0;
  padding-bottom: 12px;
  bottom: 0;
}

.conversations-form {
  padding: 12px 12px 12px 16px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 12px;
  background-color: var(--opacity-mild);
  border-radius: 24px;
  align-items: center;
  bottom: 12px;
}

.conversations-input {
  line-height: 20px;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-white);
  border: 0;
  padding: 0;
  resize: none;
  outline: none;
  margin: 0;
  appearance: none;
  width: 100%;
  background: none;
}

.conversations-submit {
  display: grid;
  place-items: center;
  place-content: center;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--opacity-mild);
  fill: var(--opacity-very-strong);
  cursor: not-allowed;
}

.conversations-submit[data-validity=valid] {
  background: var(--neutral-white);
  fill: var(--neutral-black);
  cursor: pointer;
}

.conversations-tool--data-frame {
  display: grid;
  grid-template-rows: 1fr max-content;
  height: 360px;
}

.organization-creating {
  width: 100vw;
  min-height: 100vh;
  grid-template-columns: minmax(0, 700px);
  display: grid;
  justify-content: center;
  align-items: center;
  background: white;
}

.organization-creating--content {
  padding: 40px 50px;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.organization-creating-content--video {
  padding-bottom: 75%;
  position: relative;
  height: 0;
  width: 100%;
}

.organization-creating-content--video-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.organization-creating-content--header {
  line-height: 24px;
  font-size: 22px;
  letter-spacing: 0.7040000105px;
  font-family: Roboto;
  font-weight: 700;
  color: #223680;
  text-align: center;
  max-width: 328px;
  padding: 0;
  margin: 0;
}

.organization-creating-content--description {
  line-height: 24px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 400;
  color: #223680;
  max-width: 328px;
  text-align: center;
  padding: 0;
  margin: 0;
}

/* Graph Colors */
/* Dimensions */
.items-quest-container {
  margin: 0;
  height: calc(100vh - 32px);
  overflow: auto;
  position: relative;
  background: #fafbff;
  display: grid;
  justify-content: center;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(auto, 560px);
}

.layout--application--content .items-quest-container {
  height: auto;
}

@media (max-width: 700px) {
  .items-quest-container {
    height: calc(100vh - 64px);
  }
}
.items-quest-content-filter-bar {
  z-index: 100;
  background: #fafbff;
  top: 0;
  display: grid;
  position: sticky;
}
@media (max-width: 700px) {
  .items-quest-content-filter-bar {
    padding: 0 16px;
  }
}

.items-quest-filter-content-container {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(160px, 300px) 1fr;
  gap: 32px;
}
@media (max-width: 700px) {
  .items-quest-filter-content-container {
    grid-template-columns: 1fr;
  }
}

.items-quest-content-filter-item {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .items-quest-content-filter-item {
    display: none;
  }
}

.item-quest-content-container-timelines {
  flex-grow: 1;
  display: grid;
  gap: 8px;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  justify-items: stretch;
  grid-template-columns: 1fr;
  padding: 0 16px;
}

.item-quest-content-container-timelines[data-is-loading] {
  opacity: 0.4;
}

.items-quest-list-link {
  text-decoration: none;
  min-width: 340px;
}

@media (max-width: 700px) {
  [data-display-mode=beside-content] .items-quest-container {
    height: calc(100vh - 44px);
  }
  [data-display-mode=content-only] .items-quest-content-filter-bar {
    margin-top: 10px;
  }
}
.subscription-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.subscription-nav-header[data-style=light] {
  background: #f2f3f5;
}

.subscription-nav-header--link {
  margin: 16px 0;
}

.subscription-main-container {
  background-color: #f2f3f5;
  display: flex;
  flex-grow: 1;
  align-items: center;
  flex-direction: column;
  padding: 0 16px 94px 16px;
}

@media (max-width: 600px) {
  .subscription-main-container {
    padding-bottom: 32px;
  }
}
@media (min-width: 1024px) {
  .subscription-main-container {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width: 1120px) {
  .subscription-main-container {
    padding-right: 0;
    padding-left: 0;
  }
}

.plan-content--title {
  font-family: Roboto;
  font-style: normal;
  font-size: 48px;
  font-weight: bold;
  line-height: 58px;
  text-align: center;
  margin: 0;
  color: black;
}

.plan-content--context-grid-container {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  justify-items: center;
  grid-gap: 64px;
  margin: 64px 0;
}

.plan-content-context--grid-center {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  justify-items: center;
  text-align: center;
  max-width: 600px;
}

.plan-content-context--link {
  outline: none;
  position: relative;
  line-height: 24px;
  font-size: 20px;
  letter-spacing: 0.6px;
  font-family: Roboto;
  font-weight: 700;
  color: #4564fd;
  margin: 0;
  text-decoration: none;
  outline: 0;
}
body:not(.using-mouse) .plan-content-context--link:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.plan-content-context--link::-moz-focus-inner {
  border: 0;
}

.plan-content-context--text-description {
  line-height: 24px;
  font-size: 20px;
  letter-spacing: 0.6px;
  font-family: Roboto;
  font-weight: 400;
  color: #3c4756;
  margin: 0;
  outline: 0;
}

.plan-content-context--text-description a {
  text-decoration: underline;
  color: #3c4756;
}

.plan-card-content-grid--container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  justify-content: center;
}

.plan-card-content-grid--container[data-grid-column="1"] {
  grid-template-columns: 327px;
}

.plan-card-content-grid--container[data-grid-column="3"] {
  grid-template-columns: repeat(3, 327px);
}

.plan-card-content {
  display: flex;
}

.plan-content--divider {
  border-color: #c9ccd1 !important;
}

.plan-content--title-divider {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
}

.plan-content-context--center-spacing {
  padding-top: 52px;
}

@media (max-width: 600px) {
  .plan-content--context-grid-container {
    grid-gap: 40px;
    margin: 40px 16px 40px 16px;
  }
}
@media (min-width: 800px) {
  .plan-content--context-grid-container {
    margin-left: 25px;
    margin-right: 25px;
  }
}
@media (min-width: 600px) {
  .plan-content--context-grid-container {
    margin-left: 25px;
    margin-right: 25px;
  }
}

@media (max-width: 600px) {
  .plan-content-context--grid-center {
    grid-gap: 40px;
  }
}
@media (min-width: 800px) {
  .plan-content-context--grid-center {
    grid-gap: 64px;
  }
}
@media (min-width: 600px) {
  .plan-content-context--grid-center {
    grid-gap: 64px;
  }
}
@media (min-width: 1024px) {
  .plan-content-context--grid-center {
    grid-gap: 60px;
  }
}
@media (min-width: 1120px) {
  .plan-content-context--grid-center {
    grid-gap: 60px;
  }
}

@media (max-width: 600px) {
  .plan-content-context--link {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .plan-content-context--text-description {
    font-size: 17px;
  }
}

.plan-card-content-grid--container[data-grid-column="1"] .plan-card--container {
  grid-template-rows: auto auto;
}

@media (max-width: 600px) {
  .plan-card-content-grid--container[data-grid-column="1"] {
    grid-template-columns: 343px;
  }
}
@media (min-width: 800px) {
  .plan-card-content-grid--container[data-grid-column="1"] {
    grid-template-columns: repeat(1, 327px);
    grid-gap: 16px;
  }
}
@media (min-width: 600px) {
  .plan-card-content-grid--container[data-grid-column="1"] {
    grid-template-columns: repeat(1, 327px);
    grid-gap: 16px;
  }
}
@media (min-width: 1024px) {
  .plan-card-content-grid--container[data-grid-column="1"] {
    grid-template-columns: repeat(1, 327px);
    grid-gap: 16px;
  }
}
@media (min-width: 1120px) {
  .plan-card-content-grid--container[data-grid-column="1"] {
    grid-template-columns: repeat(1, 327px);
    grid-gap: 24px;
  }
}

@media (max-width: 600px) {
  .plan-card-content-grid--container[data-grid-column="3"] {
    grid-template-columns: 343px;
    grid-gap: 40px;
  }
}
@media (min-width: 800px) {
  .plan-card-content-grid--container[data-grid-column="3"] {
    grid-template-columns: repeat(1, 343px);
    grid-gap: 16px;
  }
}
@media (min-width: 600px) {
  .plan-card-content-grid--container[data-grid-column="3"] {
    grid-template-columns: repeat(1, 343px);
    grid-gap: 16px;
  }
}
@media (min-width: 1024px) {
  .plan-card-content-grid--container[data-grid-column="3"] {
    grid-template-columns: repeat(3, 300px);
    grid-gap: 16px;
  }
}
@media (min-width: 1120px) {
  .plan-card-content-grid--container[data-grid-column="3"] {
    grid-template-columns: repeat(3, 327px);
    grid-gap: 24px;
  }
}

@media (max-width: 600px) {
  .plan-content--title-container {
    margin-top: 36px;
    margin-bottom: 40px;
  }
}
@media (min-width: 800px) {
  .plan-content--title-container {
    margin-top: 40px;
    margin-bottom: 64px;
  }
}
@media (min-width: 600px) {
  .plan-content--title-container {
    margin-top: 40px;
    margin-bottom: 64px;
  }
}
@media (min-width: 1024px) {
  .plan-content--title-container {
    margin-top: 40px;
    margin-bottom: 64px;
  }
}
@media (min-width: 1120px) {
  .plan-content--title-container {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {
  .plan-content--subtitle-container {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (min-width: 800px) {
  .plan-content--subtitle-container {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (min-width: 600px) {
  .plan-content--subtitle-container {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
@media (min-width: 1024px) {
  .plan-content--subtitle-container {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
@media (min-width: 1120px) {
  .plan-content--subtitle-container {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

@media (max-width: 600px) {
  .plan-content--title {
    font-size: 22px;
    line-height: 24px;
  }
}
@media (min-width: 800px) {
  .plan-content--title {
    font-size: 34px;
    line-height: 56px;
  }
}
@media (min-width: 600px) {
  .plan-content--title {
    font-size: 34px;
    line-height: 56px;
  }
}
@media (min-width: 1024px) {
  .plan-content--title {
    font-size: 34px;
    line-height: 56px;
  }
}
@media (min-width: 1120px) {
  .plan-content--title {
    font-size: 48px;
    line-height: 58px;
  }
}

.plan-content-context--center-spacing {
  padding-top: 52px;
}
@media (max-width: 600px) {
  .plan-content-context--center-spacing {
    padding-top: 28px;
  }
}

.board-present-header {
  padding-top: 24px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.board-present-header--name {
  line-height: 48px;
  font-size: 36px;
  font-family: Roboto;
  font-weight: 600;
  color: var(--neutral-100);
  margin: 0;
  padding: 0;
  flex-grow: 1;
}

.board-present-header--actions {
  transition: opacity 150ms ease-out;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
}
@media (hover: none) {
  .board-present-header--actions {
    opacity: 1;
  }
}
@media (hover: hover) {
  .board-present-header--actions {
    opacity: 0;
  }
  .board-present-header--actions:focus {
    opacity: 1;
  }
}
.board-present-header:hover .board-present-header--actions {
  opacity: 1;
}

.board-present--container {
  padding: 0;
  margin: 0;
  position: relative;
  flex-grow: 1;
  background: var(--background-03);
  display: inline-grid;
  grid-template-rows: 1fr;
  align-content: start;
  max-height: 100%;
  height: 100vh;
}

.board-present--logo-container {
  pointer-events: none;
  position: sticky;
  display: grid;
  justify-items: center;
  align-items: center;
  bottom: 0;
  margin-left: calc(var(--board-container-padding) * -1);
  margin-right: calc(var(--board-container-padding) * -1);
  left: calc(var(--board-container-padding) * -1);
  right: calc(var(--board-container-padding) * -1);
  height: 84px;
  background: linear-gradient(180deg, rgba(15, 18, 21, 0) 0%, #0f1215 74.48%);
}

.board--card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  margin: 0;
  padding: 0;
}

.board--container {
  padding: 0;
  margin: 0;
  position: relative;
  flex-grow: 1;
  background: var(--background-03);
  display: inline-grid;
  align-content: start;
  max-height: 100%;
}

.board--main-container {
  --board-container-padding: 48px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  grid-auto-rows: max-content;
  justify-content: center;
  align-items: start;
  padding: 0 var(--board-container-padding);
  gap: 12px;
  overflow: auto;
}
@media (max-width: 600px) {
  .board--main-container {
    --board-container-padding: 16px;
  }
}

.board-main-container--filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  gap: 8px;
}

.document-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  outline: none;
  position: relative;
  color: var(--neutral-100);
  fill: var(--neutral-80);
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  justify-content: space-between;
  text-align: left;
  align-items: center;
  border: 1px solid var(--neutral-10);
}
body:not(.using-mouse) .document-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.document-button::-moz-focus-inner {
  border: 0;
}

.document-button:hover {
  background: var(--white-07);
}

.document-button:active {
  background: var(--white-07);
  border: 1px solid var(--system-action-blue-base);
}

.document-button--icon {
  margin: 4px;
}

.document-button--text {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
}

.document-button--icon,
.document-button--text {
  display: flex;
  align-items: center;
}

.collection-list-entry {
  line-height: 16px;
  font-size: 12px;
  letter-spacing: -0.12px;
  font-family: Roboto;
  font-weight: 400;
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--neutral-10);
  display: grid;
  gap: 4px;
  grid-template-columns: max-content 1fr max-content;
  border-radius: 2px;
  align-items: center;
}
.collection-list-entry:hover {
  background: var(--white-05);
}

.collection-list-entry--name {
  color: #d2d6df;
  text-decoration: none;
  outline: none;
}

.collection-list-entry--name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2px;
}

.collection-list-entry--name:focus::before {
  box-shadow: 0 0 0 1px var(--system-action-blue-dark-1);
}

.collection-list-entry--option-button {
  z-index: 100;
}
@media (hover: none) {
  .collection-list-entry--option-button {
    opacity: 1;
  }
}
@media (hover: hover) {
  .collection-list-entry--option-button {
    opacity: 0;
  }
  .collection-list-entry--option-button:focus {
    opacity: 1;
  }
}
.collection-list-entry:hover .collection-list-entry--option-button {
  opacity: 1;
}

.collection-list-entry--icon {
  fill: var(--neutral-100);
}

.collections-show-container {
  padding: 0 24px;
  margin: 0;
  position: relative;
  overflow: auto;
  flex-grow: 1;
  background: var(--background-03);
  display: grid;
  grid-template-columns: minmax(auto, 528px);
  align-items: start;
  align-content: start;
  justify-content: center;
  gap: 4px;
}

.collections-show-container--timelines {
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  align-self: stretch;
}

.collections-show-container--sort {
  line-height: 16px;
  font-size: 14px;
  letter-spacing: -0.14px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  display: grid;
  grid-auto-flow: row;
  margin: 0 0 12px 0;
  gap: 16px;
}

.collections-show-container--buttons {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.collections-show-container .non-ideal-inline-loading,
.collections-show-container .non-ideal-inline-error {
  align-self: stretch;
  max-width: 420px;
}

.collections-show-container--non-ideal-state {
  flex-grow: 1;
  align-self: stretch;
  display: grid;
  justify-content: center;
  align-content: center;
}

.collections-show-name {
  line-height: 48px;
  font-size: 36px;
  font-family: Roboto;
  font-weight: 600;
  display: block;
  color: white;
  margin: 0;
  text-align: left;
}

.collections-show-divider {
  border-color: #2c3339;
  border-top-style: solid;
  border-bottom-style: none;
  margin-bottom: 12px;
  margin-top: 0;
  position: relative;
  width: 100%;
}

.collections-show-sticky {
  display: grid;
  grid-auto-flow: row;
  gap: 24px;
  padding-top: 64px;
  background: var(--background-03);
  position: sticky;
  top: 0;
  z-index: 100;
}

.collections-show-container .non-ideal-inline-loading,
.collections-show-container .non-ideal-inline-error {
  align-self: stretch;
  max-width: 420px;
}

.collections-show-container--document-button {
  padding: 10px;
  gap: 4px;
  border-radius: 4px;
}

.timeline-canvas--container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.plan-card--container {
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-areas: "badge" "content";
}

@media (max-width: 600px) {
  .plan-card--container {
    grid-template-rows: auto auto;
  }
}

.plan-card {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  grid-area: content;
}

.plan-card--content {
  display: grid;
  flex-grow: 1;
  background: #f2f3f5;
}

.plan-card--header {
  background-color: white;
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  grid-gap: 16px;
  flex-shrink: 0;
  padding: 40px 16px 32px 16px;
  text-align: center;
}

.plan-card--header-title {
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  color: #223680;
}

.plan-card--header-subtitle {
  line-height: 24px;
  font-size: 17px;
  letter-spacing: 1.02px;
  font-family: Roboto;
  font-weight: 400;
  color: #3c4756;
  margin: 0;
}

.plan-card--content-list {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 12px;
  margin: 16px;
  padding: 0;
}

.plan-card--content-list li {
  list-style: none;
  position: relative;
  padding-left: 32px;
}

.plan-card--content-list li:before {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC41IDYuNDAxMzRMOC4wMzQ0NyAxM0w0LjUgOS4zOTI3Nkw1LjcwNjggNy45OTE0Mkw4LjAzNDQ3IDEwLjM2N0wxMy4yOTMyIDVMMTQuNSA2LjQwMTM0WiIgZmlsbD0iIzE1MjIzMyIvPgo8L3N2Zz4K");
  background-position: center;
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
}

.plan-card--content-list li {
  display: grid;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #152233;
}

.plan-card--content-list span {
  display: block;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #3c4756;
  margin: 0;
  padding: 0;
}

.plan-card--content-item-container {
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  grid-gap: 22px;
  background-color: white;
}

.plan-card--content-item-container[data-space=single-space] {
  padding: 30px 16px;
}

.plan-card--content-item-container[data-space=multiple-space] {
  padding: 16px 16px 30px 16px;
}

.plan-card--content-item {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  grid-gap: 4px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 53px;
  line-height: 64px;
  letter-spacing: 0.03em;
  color: var(--plan-card-text-color);
}

.plan-card--content-item-symbol {
  line-height: 24px;
  font-size: 22px;
  letter-spacing: 0.7040000105px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--plan-card-text-color);
}

.plan-card--content-item-price-date {
  line-height: 24px;
  font-size: 22px;
  letter-spacing: 0.7040000105px;
  font-family: Roboto;
  font-weight: 700;
  color: #a2a9b3;
}

.plan-card--content-item-footer-button small {
  line-height: 20px;
  font-size: 15px;
  letter-spacing: 0.45px;
  font-family: Roboto;
  font-weight: 700;
  text-transform: uppercase;
}

.plan-card--badge {
  padding: 16px;
  background: #344bbe;
}

.plan-card--badge-description {
  line-height: 20px;
  font-size: 17px;
  letter-spacing: 0.68px;
  font-family: Roboto;
  font-weight: 700;
  color: #ecefff;
  margin: 0;
  text-align: center;
}

.plan-card--badge-description span {
  margin-right: 7px;
}

.plan-card--content-item[data-style=primary] {
  --plan-card-text-color: #4564fd;
}

.plan-card--content-item[data-style=secondary] {
  --plan-card-text-color: #3c4756;
}

.board-header {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap-reverse;
}

.board-header--container {
  margin-top: 24px;
}

.board-header--actions-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
}

.time-zone--form-container {
  grid-template-columns: 1fr;
  padding: 0 12px;
}

.board-time-popover--buttons {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
}

.board-time-popover--fieldset {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

.board-time-popover--interval {
  width: 72px;
}

.board-time-popover--direction,
.board-time-popover--unit {
  width: 88px;
}

.board-time-popover--date {
  width: 100px;
}

.board-name {
  display: grid;
  justify-content: stretch;
  flex-grow: 1;
}

.board-name--input {
  line-height: 48px;
  font-size: 36px;
  font-family: Roboto;
  font-weight: 600;
  color: var(--neutral-100);
  margin: 0;
  padding: 0;
  border: none;
  appearance: none;
  background: transparent;
  outline: none;
  overflow: hidden;
}
.board-name--input::placeholder {
  color: var(--neutral-60);
}
.board-name--input::placeholder[disabled] {
  color: var(--neutral-100);
}
.board-name--input:-ms-input-placeholder {
  color: var(--neutral-60);
}
.board-name--input:-ms-input-placeholder[disabled] {
  color: var(--neutral-100);
}
.board-name--input[disabled]::placeholder {
  color: var(--neutral-100);
}
.board-name--input[disabled]:-ms-input-placeholder {
  color: var(--neutral-100);
}
.board-name--input::selection {
  background: var(--system-action-blue-dark-1);
}

.board-toolbar {
  display: flex;
  height: 40px;
  border-bottom: 1px solid var(--neutral-10);
  background: var(--background-03);
  padding: 0 12px;
}

.board-toolbar--title {
  margin: 0 auto;
  flex-grow: 1;
}

.board-toolbar--buttons {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  padding: 6px 8px;
}

.board-toolbar--button {
  align-self: center;
}

.board-views-toolbar {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
}

.board-views-toolbar--actions {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  grid-auto-columns: max-content;
}

.board-views-create-form {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  grid-template-columns: 224px;
  grid-auto-columns: max-content;
}

.inline-select {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  position: relative;
  display: grid;
  gap: 2px;
  align-items: center;
  grid-template-columns: max-content max-content;
  color: var(--neutral-80);
  fill: var(--neutral-80);
  width: max-content;
  padding: 8px;
  height: 32px;
}
.inline-select:hover {
  background: var(--white-10);
}

body:not(.using-mouse) .inline-select:focus-within {
  box-shadow: 0 0 0 1px var(--system-action-blue-dark-1);
}

.inline-select--select {
  position: absolute;
  outline: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: none;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  opacity: 0;
}

.board--show-container {
  padding: 0;
  margin: 0;
  flex-grow: 1;
  background: var(--background-03);
  display: grid;
  grid-template-rows: max-content 1fr;
  position: relative;
  overflow: hidden;
}

.board--main-show-container {
  display: grid;
  grid-template: "menu content" 1fr/280px 1fr;
  grid-auto-flow: column;
  gap: 9px;
  position: relative;
  overflow: auto;
  flex-grow: 1;
}

.board--main-show--sidebar {
  background-color: var(--background-04);
  grid-area: menu;
  overflow: auto;
  height: 100%;
}

.board--main-show--content {
  display: grid;
  grid-area: content;
  align-content: start;
  gap: 12px;
  padding: 0 7px 0 0;
  position: relative;
  overflow: auto;
}

.board-settings--sidebar-form-fieldset-content {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.text-dropdown-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 4px;
  background: var(--neutral-10);
  text-decoration: none;
  cursor: pointer;
}
body:not(.using-mouse) .text-dropdown-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.text-dropdown-button::-moz-focus-inner {
  border: 0;
}

.text-dropdown-button-text-container {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-100);
  display: flex;
  align-items: center;
  gap: 4px;
}

.text-dropdown-button-icon {
  display: flex;
  fill: var(--neutral-60);
}

.text-dropdown-button-leading-icon {
  fill: var(--neutral-100);
}

.board-visualization-header--container {
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  grid-auto-rows: max-content;
  justify-content: center;
  align-items: start;
  padding: 6px 12px;
  background-color: var(--background-04);
  border-bottom: 1px solid var(--neutral-10);
}

.board-visualization-header {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  grid-template-columns: 1fr max-content;
  align-items: center;
  justify-items: start;
}

.board-visualization-header--actions-left {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
}

.board-visualization-header--actions-left-expanded {
  display: grid;
  align-items: center;
}
@media (max-width: 600px) {
  .board-visualization-header--actions-left-expanded {
    display: none;
  }
}

.board-visualization-header--actions-left-resized {
  display: none;
}
@media (max-width: 600px) {
  .board-visualization-header--actions-left-resized {
    display: grid;
    grid-auto-flow: column;
    gap: 4px;
  }
}

.board-visualization-header--actions-right {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
}

.board-visualization-header--actions-right-expanded {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
}
@media (max-width: 600px) {
  .board-visualization-header--actions-right-expanded {
    display: none;
  }
}

.board-visualization-header--actions-right-resized {
  display: none;
}
@media (max-width: 600px) {
  .board-visualization-header--actions-right-resized {
    display: grid;
    grid-auto-flow: column;
    gap: 4px;
  }
}

.board-visualization-header--icon {
  fill: var(--neutral-60);
  margin-right: -4px;
}

.board-visualization-header--input-container {
  display: grid;
  grid-template: "content";
  position: relative;
}

.board-visualization-header--input {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-100);
  grid-area: content;
  border: none;
  background: transparent;
  text-align: left;
  outline: none;
  margin: 0;
  padding: 6px 4px;
  height: 28px;
}
.board-visualization-header--input:focus {
  box-shadow: 0 0 0 1px var(--system-action-blue-dark-1);
}

.board-visualization-header--input::selection {
  background: var(--system-action-blue-dark-1);
}

.board-visualization-header--input-name-entry-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-100);
  cursor: text;
  height: 28px;
}
body:not(.using-mouse) .board-visualization-header--input-name-entry-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-visualization-header--input-name-entry-button::-moz-focus-inner {
  border: 0;
}
.board-visualization-header--input-name-entry-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.board-visualization-header--input-name-entry {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  align-content: center;
  padding: 6px 4px;
  height: 28px;
  margin: 0;
  grid-area: content;
  justify-self: start;
}

.calculation-text-editor {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  fill: var(--neutral-80);
  gap: 2px;
  min-height: 28px;
  box-shadow: inset 0 0 0 1px var(--neutral-10);
}

.calculation-text-editor:focus-within {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

.calculation-text-editor[data-validity=invalid]:not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--system-danger-red-base);
}

.calculation-editor-validation {
  display: grid;
  padding: 2px 0;
  grid-template-columns: max-content 1fr;
  gap: 4px;
  justify-content: center;
}

.calculation-editor-validation[data-intent=success] {
  color: var(--system-success-green-base);
  fill: var(--system-success-green-base);
}

.calculation-editor-validation[data-intent=failure] {
  color: var(--system-danger-red-base);
  fill: var(--system-danger-red-base);
}

.calculation-editor-validation[data-intent=neutral] {
  color: var(--neutral-60);
  grid-template-columns: 1fr;
}

.calculation-editor-validation--text {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.calculation-editor--typing {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
}

.calculation-editor {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--neutral-10);
  background: var(--background-03);
  display: grid;
  grid-auto-flow: row;
}

.calculation-editor--content {
  display: grid;
  width: 12px;
  height: 12px;
}

.calculation-editor--content-icon {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
}

.calculation-editor--content-icon[data-intent=success] {
  fill: var(--system-success-green-base);
}

.calculation-editor--content-icon[data-intent=invalid] {
  fill: var(--system-danger-red-base);
}

.calculation-editor--content-icon[data-intent=neutral] {
  fill: var(--neutral-60);
  color: var(--neutral-60);
}

.calculation-editor--footer {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  grid-template-columns: max-content max-content;
  gap: 2px;
  padding: 8px 12px;
  border-top: 1px solid #2c3339;
}

.calculation-editor--actions {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
}

.calculation-editor--divider {
  margin: 4px 6px;
  border: 0;
  width: 1px;
  background: var(--neutral-10);
}

.calculation-text-editor .ql-container {
  height: auto;
}

.calculation-text-editor .ql-editor {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  margin: 4px 0;
  padding: 0;
  color: var(--neutral-80);
  max-height: 32px;
  overflow: auto;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.calculation-text-editor .ql-editor::selection,
.calculation-text-editor .ql-editor *::selection {
  background: var(--system-action-blue-dark-1);
}

.calculation-text-editor .ql-editor.ql-blank:before {
  font-style: normal;
  color: var(--neutral-40);
  left: 0;
  right: 0;
}

.calculation-text-editor .ql-container:has(.ql-editor.ql-blank) + .calculation-text-editor--clear {
  display: none;
}

.board-filter-fieldset {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--white-10);
  display: grid;
  grid-auto-flow: row;
  gap: 6px;
  margin: 0;
}

.board-filter-fieldset--legend {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
}

.main-rollup {
  padding-block: 2px;
}

.main-rollup--amount {
  width: 40px;
}

.time-shift-popover {
  width: 292px;
}

.time-shift-popover--form {
  display: grid;
  gap: 8px 4px;
  grid-template: "value unit direction" auto "apply apply apply" auto/60px 1fr 1fr;
}

.time-shift-popover--apply {
  grid-area: apply;
}

.time-shift-fixed-popover {
  width: auto;
}

.time-shift-popover--fixed-form {
  display: grid;
  gap: 8px;
}

.calculation-variable {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  width: 120px;
  border-radius: 4px;
  background: var(--white-10);
  padding: 6px 2px 6px 2px;
  text-indent: 6px;
  color: var(--neutral-80);
  outline: none;
  border: none;
}

.calculation-variable[data-validity=invalid] {
  box-shadow: inset 0 0 0 1px var(--system-danger-red-base);
}

.calculation-variable:focus-visible {
  box-shadow: inset 0 0 0 1px var(--system-action-blue-base);
}

/* Graph Colors */
/* Dimensions */
.board-settings-header {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: 28px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.board-settings-header--heading {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  position: sticky;
  left: 0;
}

.board-settings-header--actions {
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  justify-content: end;
  align-items: center;
  position: sticky;
  right: 0;
}

.board-settings--main-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.board-settings--main-data--entry {
  display: grid;
  grid-auto-flow: row;
  gap: 0;
}

.board-settings--divider {
  border-color: var(--neutral-10);
  border-top-style: solid;
  border-bottom-style: none;
  margin-top: -1px;
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

.board-settings--main-sticky {
  background-color: var(--background-03);
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 8px;
}

.board-settings--main-data-action {
  display: flex;
}

.board-settings--main-data-content {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
}

.board-seetings-main--metric-visibillity {
  overflow: auto;
}

.board-settings--main-data-content--data-source {
  list-style: none;
  display: flex;
  gap: 4px;
  flex-direction: row;
  align-items: start;
  padding: 0;
}

.data-source--vstack {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-settings-main-data-form-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-settings-main-data-form-item {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 2px;
  flex-grow: 1;
}

.board-settings--data-source--icon {
  padding: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  fill: var(--neutral-60);
}

.board-settings-main-data-form-color {
  flex-shrink: 0;
}

.board-settings--data-source--item-link {
  text-decoration: none;
  color: unset;
}

.board-settings--main-data-form-toggle-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  gap: 4px;
  align-items: center;
}

.board-settings-main-data-form-input-value {
  max-width: 236px;
}

.board-settings-main-data-form-items {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  outline: none;
  position: relative;
  max-width: 140px;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  text-decoration: none;
  color: var(--neutral-80);
  border-radius: 4px;
  background: var(--white-05);
  padding: 6px 8px;
  fill: var(--neutral-80);
}
body:not(.using-mouse) .board-settings-main-data-form-items:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-settings-main-data-form-items::-moz-focus-inner {
  border: 0;
}
.board-settings-main-data-form-items:hover {
  background: var(--white-10);
}
.board-settings-main-data-form-items[data-validity=invalid] {
  box-shadow: inset 0 0 0 1px var(--system-danger-red-base);
}

.board-settings-main-data-form-items--icon {
  opacity: 0;
}
.board-settings-main-data-form-items:hover .board-settings-main-data-form-items--icon {
  opacity: 1;
}

.board-settings--main-data-card-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-auto-columns: max-content minmax(auto, 354px);
  gap: 8px;
}

.board-settings--main-data-reorder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: var(--neutral-40);
  width: 16px;
  height: 20px;
  margin-top: 4px;
  cursor: grab;
}
@media (hover: none) {
  .board-settings--main-data-reorder-icon {
    opacity: 1;
  }
}
@media (hover: hover) {
  .board-settings--main-data-reorder-icon {
    opacity: 0;
  }
  .board-settings--main-data-reorder-icon:focus {
    opacity: 1;
  }
}
.board-settings--main-data-reorder-icon:hover {
  fill: var(--neutral-60);
}
.board-settings--main-data-reorder-icon:focus, .board-settings--main-data-reorder-icon:active {
  fill: var(--neutral-100);
}

.board-settings-visualization-items-grid--row:hover .board-settings--main-data-reorder-icon {
  opacity: 1;
}

.board-seetings-main--content {
  height: 312px;
  display: grid;
  background: var(--background-04);
  border-radius: 4px;
  padding: 16px;
}

.board-settings--main-data-content--placeholder {
  position: relative;
  height: 0;
}

.board-settings--main-data-content--placeholder::after {
  content: "";
  position: absolute;
  height: 1px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--system-action-blue-base);
}

.board-settings--main-data-content--placeholder:first-child::after {
  top: 0;
}

.board-settings--main-data-content--placeholder:last-child::after {
  top: -1px;
}

.data-source-visabillity-button {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 6px;
  fill: var(--neutral-80);
  background: var(--white-10);
  border-radius: 4px;
}
body:not(.using-mouse) .data-source-visabillity-button:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.data-source-visabillity-button::-moz-focus-inner {
  border: 0;
}

.data-source-aggregation-method {
  max-width: 180px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 100px;
  grid-auto-columns: auto;
  gap: 4px;
}

.board-settings--main-data--divider {
  border-top-style: solid;
  border-bottom-style: none;
  border-left-style: none;
  border-right-style: none;
  border-color: #2c3339;
  margin-top: 15px;
  margin-bottom: 16px;
  position: relative;
  width: 100%;
}

.board-settings--calculation-editor {
  max-width: 460px;
}

.board-settings--calculation-expression {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  color: var(--neutral-80);
  max-width: 354px;
  border-radius: 4px;
  background: var(--white-10);
  padding: 8px 12px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-columns: max-content;
  gap: 10px;
  grid-auto-flow: column;
}
body:not(.using-mouse) .board-settings--calculation-expression:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-settings--calculation-expression::-moz-focus-inner {
  border: 0;
}

.board-settings--calculation-expression--invalid {
  fill: var(--system-danger-red-base);
}

.board-settings--calculation-expression--edit {
  fill: var(--neutral-80);
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}
.board-settings--calculation-expression:hover .board-settings--calculation-expression--edit, .board-settings--calculation-expression:focus .board-settings--calculation-expression--edit {
  opacity: 1;
}

.board-settings-visualization-items-grid--row {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}
.board-settings-visualization-items-grid--row:first-of-type {
  margin-top: 0;
}
.board-settings-visualization-items-grid--row:last-of-type {
  margin-bottom: 0;
}

.board-settings-visualization-items-grid--header-row {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--white-10);
}

.board-settings-visualization-items-grid--cell-label {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  padding: 6px 0;
}

.board-settings-visualization-items-grid--cell {
  outline: none;
  position: relative;
  display: grid;
  grid-auto-flow: column;
}
body:not(.using-mouse) .board-settings-visualization-items-grid--cell:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.board-settings-visualization-items-grid--cell::-moz-focus-inner {
  border: 0;
}

.board-settings-visualization-items-grid--cell[role=columnheader] {
  justify-content: start;
  align-items: center;
  gap: 4px;
}

.board-settings-visualization-items-grid--cell-help {
  fill: var(--neutral-60);
}
.board-settings-visualization-items-grid--cell-help:hover {
  fill: var(--neutral-50);
}

.board-settings-visualization-items-grid--main {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.board-settings-visualization-items-grid--cell:nth-last-child(2) {
  flex-grow: 1;
}

.board-settings-visualization-items-grid--cell[data-size="16"] {
  width: 16px;
}

.board-settings-visualization-items-grid--cell[data-size=button] {
  width: 28px;
}

.board-settings-visualization-items-grid--cell[data-size="100"] {
  width: 100px;
}

.board-settings-visualization-items-grid--cell[data-size="120"] {
  width: 120px;
}

.board-settings-visualization-items-grid--cell[data-size="140"] {
  width: 140px;
}

.board-settings-visualization-items-grid--cell[data-size="160"] {
  width: 160px;
}

.board-settings-visualization-items-grid--cell[data-size="180"] {
  width: 180px;
}

.number-settings--container {
  display: grid;
}

.number-settings--fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  margin: 0;
}

.number-settings--fieldset-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
}

.board-settings--sidebar {
  display: flex;
  flex-direction: column;
}

.board-settings--sidebar-sticky {
  padding: 8px 12px;
  background-color: var(--background-04);
  position: sticky;
  top: 0;
  z-index: 100;
}

.board-settings--sidebar-radio-button-container {
  padding: 0 12px;
  margin-bottom: 8px;
}

.board-settings--sidebar-radio-button {
  width: 100%;
}

.board-settings--context-menu-toggle-button {
  width: 240px;
}

.time-range-popover {
  width: 280px;
}

.time-range-popover--optional-fieldset {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 4px;
  align-items: center;
  color: var(--neutral-60);
}

.time-range-popover--main-form {
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
}

.time-range-popover--backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}

.board-time-popver--suffix {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-60);
  align-self: center;
}

/* Graph Colors */
/* Dimensions */
.color-picker-hue--container {
  display: grid;
}

.color-picker-hue {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  box-shadow: inset 0 0 0 1px var(--white-10);
}
body:not(.using-mouse) .color-picker-hue:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.color-picker-hue::-moz-focus-inner {
  border: 0;
}

.color-picker-hue[data-color=grey-01] {
  background-color: #dce0f6;
}

.color-picker-hue[data-color=grey-02] {
  background-color: #b9bdd3;
}

.color-picker-hue[data-color=grey-03] {
  background-color: #9095a9;
}

.color-picker-hue[data-color=grey-04] {
  background-color: #696d81;
}

.color-picker-hue[data-color=blue-01] {
  background-color: #2a61ed;
}

.color-picker-hue[data-color=blue-02] {
  background-color: #5381f3;
}

.color-picker-hue[data-color=blue-03] {
  background-color: #86a9f9;
}

.color-picker-hue[data-color=blue-04] {
  background-color: #aec8fe;
}

.color-picker-hue[data-color=cyan-01] {
  background-color: #08abbc;
}

.color-picker-hue[data-color=cyan-02] {
  background-color: #3fc3d0;
}

.color-picker-hue[data-color=cyan-03] {
  background-color: #75dae3;
}

.color-picker-hue[data-color=cyan-04] {
  background-color: #adf2f7;
}

.color-picker-hue[data-color=yellow-01] {
  background-color: #df9d1d;
}

.color-picker-hue[data-color=yellow-02] {
  background-color: #e8b34c;
}

.color-picker-hue[data-color=yellow-03] {
  background-color: #f2ca7e;
}

.color-picker-hue[data-color=yellow-04] {
  background-color: #fbe0ac;
}

.color-picker-hue[data-color=purple-01] {
  background-color: #7e36ea;
}

.color-picker-hue[data-color=purple-02] {
  background-color: #975cf0;
}

.color-picker-hue[data-color=purple-03] {
  background-color: #b589f7;
}

.color-picker-hue[data-color=purple-04] {
  background-color: #d1b5fd;
}

.color-picker-hue[data-color=purple-05] {
  background-color: #d1b5fd;
}

.color-picker-hue[data-color=pink-01] {
  background-color: #d821e7;
}

.color-picker-hue[data-color=pink-02] {
  background-color: #e45ae7;
}

.color-picker-hue[data-color=pink-03] {
  background-color: #ef8ce7;
}

.color-picker-hue[data-color=pink-04] {
  background-color: #fabce6;
}

.color-picker-hue[data-color=green-01] {
  background-color: #1ddf30;
}

.color-picker-hue[data-color=green-02] {
  background-color: #4fe85b;
}

.color-picker-hue[data-color=green-03] {
  background-color: #82f188;
}

.color-picker-hue[data-color=green-04] {
  background-color: #b6fbb5;
}

.color-picker-hue[data-color=red-01] {
  background-color: #df301d;
}

.color-picker-hue[data-color=red-02] {
  background-color: #e85e4e;
}

.color-picker-hue[data-color=red-03] {
  background-color: #f18b80;
}

.color-picker-hue[data-color=red-04] {
  background-color: #fbbbb4;
}

.color-picker-hue[data-color=blue-ocean-01] {
  background-color: #1a3078;
}

.color-picker-hue[data-color=blue-ocean-02] {
  background-color: #2542a1;
}

.color-picker-hue[data-color=blue-ocean-03] {
  background-color: #318fee;
}

.color-picker-hue[data-color=blue-ocean-04] {
  background-color: #5973de;
}

.color-picker-hue[data-color=blue-ocean-05] {
  background-color: #8497e0;
}

.color-picker-hue[data-color=blue-ocean-06] {
  background-color: #bac2e0;
}

.color-picker-hue[data-color=blue-ocean-07] {
  background-color: #fefefe;
}

.color-picker-hue[data-color=threshold-neutral-01] {
  background-color: #99aaff;
}

.color-picker-hue[data-color=threshold-neutral-02] {
  background-color: #7c88c3;
}

.color-picker-hue[data-color=threshold-neutral-03] {
  background-color: #425e82;
}

.color-picker-hue[data-color=threshold-negative-01] {
  background-color: #c43e62;
}

.color-picker-hue[data-color=threshold-negative-02] {
  background-color: #e75f6d;
}

.color-picker-hue[data-color=threshold-negative-03] {
  background-color: #f0959e;
}

.color-picker-hue[data-color=threshold-negative-04] {
  background-color: #f2c4c8;
}

.color-picker-hue[data-color=threshold-positive-01] {
  background-color: #1ae39b;
}

.color-picker-hue[data-color=threshold-positive-02] {
  background-color: #39bb8c;
}

.color-picker-hue[data-color=threshold-medium-01] {
  background-color: #f6da60;
}

.color-picker-hue[data-color=gradient-red-blue] {
  background: linear-gradient(to right in hsl, #ff4d4d, #6789ff);
}

.color-picker-hue[data-color=gradient-red-green] {
  background: linear-gradient(to right in hsl, #ff434e, #44ff9a);
}

.color-picker-hue[data-color=gradient-yellow-purple] {
  background: linear-gradient(to right in hsl, #ffdd65, #9659ff);
}

.color-picker-hue[data-color=gradient-yellow-blue] {
  background: linear-gradient(to right in hsl, #ffe96a, #5044ff);
}

.color-picker-hue[data-color=gradient-magenta-cyan] {
  background: linear-gradient(to right in hsl, #f05cc9, #44cdff);
}

.reference-header {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--neutral-10);
}

.reference-header--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: white;
  margin: 0;
  padding: 0;
}

.reference-field {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr minmax(102px, max-content);
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--neutral-10);
  height: max-height;
}

.reference-field--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: white;
  margin: 0;
  padding: 0;
}

.reference-contextual {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  grid-auto-columns: max-content;
  gap: 4px;
}

.reference-contextual--title {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
  padding: 0;
}

.reference-contextual--actions {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 4px;
}

.reference {
  display: grid;
  grid-template-rows: max-content 1fr;
  width: 332px;
  height: 100%;
  background: var(--background-03);
  border-left: 1px solid var(--neutral-10);
}

.reference--header {
  display: grid;
  grid-auto-rows: max-content;
}

.reference-details--content {
  padding: 12px 0 24px 0;
}

.reference--content-inner summary::-webkit-details-marker,
.reference--content-inner summary::marker {
  display: none;
  content: "";
}

.reference--content-inner summary {
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
}

.reference-details-marker {
  margin: 6px;
  transition: transform 0.15s ease;
  fill: var(--neutral-90);
}
details[open] .reference-details-marker {
  transform: rotate(180deg);
}

.reference--content-inner h2 {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-90);
  padding: 0;
  margin: 0;
}

.reference--content-inner p {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  margin: 0;
}

.reference--content-inner p + p {
  margin-top: 12px;
}

.reference--content-inner hr {
  border-color: var(--neutral-10);
  border-top-style: solid;
  border-bottom-style: none;
  margin-top: 11px;
  margin-bottom: 12px;
  position: relative;
  width: 100%;
}

.reference--content {
  overflow: auto;
  color: var(--neutral-70);
}

.reference--content-inner {
  padding: 12px;
}

.reference--content-inner figure {
  display: grid;
  gap: 4px;
  margin: 12px 0;
}

.code-example {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--white-10);
  color: var(--neutral-80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.reference--content-inner ul {
  padding: 0;
  margin: 0;
}

.reference-list-entry {
  display: grid;
  gap: 4px;
  list-style: none;
}
.reference-list-entry:not(:last-child) {
  margin-bottom: 16px;
}

.reference--content-inner h3 {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-70);
  margin: 0;
}

.reference--content-inner .tokens {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 4px 2px;
  justify-content: start;
}

.reference--content-inner .variable {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  display: flex;
  padding: 2px 4px;
  color: var(--neutral-80);
  border-radius: 4px;
  background: var(--white-10);
}

.reference--content-inner .method {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  display: flex;
  padding: 6px 8px;
  color: var(--neutral-80);
  border-radius: 4px;
  background: var(--white-07);
}

.reference--content-inner figcaption {
  line-height: 14px;
  font-size: 11px;
  font-family: Roboto;
  font-weight: 400;
  text-align: center;
  color: var(--neutral-60);
}

.gauge-fieldset--color-button-container {
  display: flex;
  padding: 1px;
}

.gauge-fieldset--color-input-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.gauge-fieldset--container {
  display: grid;
  row-gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}

.gauge-fieldset--input-small-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  margin: 0;
  padding: 6px 0;
  text-align: right;
}

.gauge-fieldset--input-state-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 32px 70px;
  gap: 8px;
}

.gauge-fieldset--name-input {
  height: 28px;
}

.gauge-fieldset--range-state-content {
  display: grid;
  gap: 4px;
}

.gauge-fieldset--range-state-container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
}

.gauge-fieldset--range-state-fieldset {
  display: grid;
  grid-template-columns: repeat(2, 106px);
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
}

.gauge--container {
  display: grid;
}

.gauge--display-fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.gauge--fieldset-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
}

.gauge--input-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 32px 70px;
  gap: 8px;
}

.gauge--range-fieldset {
  display: grid;
  grid-template-columns: repeat(2, 106px);
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.gauge--range-fieldset-container,
.gauge--range-state-container {
  padding: 8px 12px;
}

.gauge--range-state {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gauge--range-state-label {
  display: flex;
  justify-content: space-between;
}

.gauge--text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
  padding: 6px 0;
}

.gauge--input-text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  margin: 0;
  padding: 6px 0;
  text-align: right;
}

.multiple-variable-settings--container {
  display: grid;
}

.source-fieldset--source-group {
  grid-template-columns: 1fr max-content;
}

.threshold-entry--color-button-container {
  display: flex;
  padding: 1px;
}

.threshold-entry--color-button-filled {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  position: relative;
  border-radius: 4px;
  width: 26px;
  height: 26px;
}
body:not(.using-mouse) .threshold-entry--color-button-filled:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  border: 1px solid #4564fd;
  border-radius: 0;
}
.threshold-entry--color-button-filled::-moz-focus-inner {
  border: 0;
}

.threshold-entry--color-input-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.threshold-entry--container {
  display: grid;
  row-gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}

.threshold-entry--input-small-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  color: var(--neutral-80);
  margin: 0;
  padding: 6px 0;
  text-align: right;
}

.threshold-entry--input-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: auto 104px;
  justify-content: end;
  gap: 8px;
}

.threshold-entry--name-input {
  height: 28px;
}

.threshold-entry--content {
  display: grid;
  gap: 4px;
}

.board-thresholds--container {
  padding: 8px 12px;
}

.board-threshold--content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.board-threshold--label {
  display: flex;
  justify-content: space-between;
}

.board-threshold--label-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
  padding: 6px 0;
}

.rollup--fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
}

.rollup--fieldset-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
}

.rollup--fieldset-bucket {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 64px 104px;
  justify-content: end;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
}

.entry-chart-settings--fields-container {
  display: grid;
  border-top: 1px solid var(--neutral-10);
}

.entry-chart-settings--fields-custom-container {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--neutral-10);
  padding: 8px 12px;
}

.entry-chart-settings--fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
}

.entry-chart-settings--no-space-fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  border: none;
}

.entry-chart-settings--custom-container {
  display: grid;
  grid-template-columns: repeat(2, 106px);
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.entry-chart-settings--custom-fieldset {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 32px 70px;
  justify-items: end;
  gap: 8px;
  border: none;
  margin: 0;
}

.entry-chart-settings--radius-fieldset {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: max-content 70px;
  padding-left: 10px;
  justify-items: end;
  gap: 8px;
  border: none;
  margin: 0;
}

.entry-chart-settings--fieldset-text {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
}

.color-opacity-entry--fields {
  display: grid;
  grid-template-columns: max-content;
  gap: 4px;
}

.source-fieldset {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: max-content 160px;
  border: none;
}

.sidebar--entry {
  gap: 6px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  padding: 8px 12px;
}

.sidebar--entry-header {
  line-height: 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  padding: 0;
  margin: 0;
}

.sidebar--entry-content {
  padding-left: 12px;
  gap: 6px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
}

.data-sources-show-content {
  padding: 8px 12px;
  display: grid;
  gap: 8px;
  grid-auto-columns: row;
}

.data-sources-show-header {
  display: grid;
  gap: 4px;
  align-items: center;
  grid-template-columns: 1fr;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
}

.data-sources-show-header--text {
  line-height: 16px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 500;
  color: var(--neutral-80);
  margin: 0;
}

.data-sources-show--items {
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.data-sources-show--entry {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr max-content;
  align-items: center;
}

.data-sources-show--non-ideal-state {
  padding: 12px;
  border-radius: 4px;
  border: 1px dashed var(--white-10);
}

* {
  box-sizing: border-box;
}

:root {
  --env-scrollbar-width: 0;
}

@media screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2) {
  :root {
    --unit-1-5-px: 1.5px;
  }
}
body {
  background: #fafbff;
  font-family: "Roboto";
  margin: 0;
  padding: 0;
}

a:not([draggable]) {
  -webkit-user-drag: none;
  -moz-window-dragging: no-drag;
}

button,
input {
  font-family: "Roboto";
}

button,
[role=button],
[role=menuitem],
[role=menuitemcheckbox],
[role=menuitemradio] {
  cursor: pointer;
}

.popover-container {
  z-index: 200;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

.main-application-container {
  isolation: isolate;
  min-height: 100vh;
  min-height: min(100vh, 100dvh);
  display: flex;
  flex-direction: column;
}
@supports not (isolation: isolate) {
  .main-application-container {
    transform: scale(1);
  }
}

.application {
  isolation: isolate;
}
@supports not (isolation: isolate) {
  .application {
    transform: scale(1);
  }
}

.application-loading,
.application-error {
  background: var(--background-04);
}

.main-modal-container {
  isolation: isolate;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
}
@supports not (isolation: isolate) {
  .main-modal-container {
    transform: scale(1);
  }
}

.main-modal-container-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-01);
}

.right-sidebar {
  height: calc(100vh - 41px);
  position: absolute;
  right: 0;
  top: 41px;
  isolation: isolate;
}

.bottom-anthor {
  z-index: 801;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

[data-cursor=grabbing] {
  cursor: grabbing;
}

[data-cursor=grab] {
  cursor: grab;
}

[data-cursor=ew-resize] {
  cursor: ew-resize;
}

[data-cursor=col-resize] {
  cursor: col-resize;
}

[data-cursor=ew-resize] {
  cursor: ew-resize;
}

.resizer {
  z-index: 2;
}