@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
:root {
  --a-control: 48px;
  --a-action: 56px;
  --a-primary: 64px;
  --a-radius: 10px;
  --a-dialog-radius: 16px;
  --a-support: .875rem;
  --a-body: 1rem;
  --a-emphasis: 1.125rem;
  --a-title: 1.5rem;
  --a-amount: 1.75rem;
  --a-wait: #805000;
  --a-wait-bg: #fff1d4;
  --a-work: #225aa0;
  --a-work-bg: #e9f1fd;
  --a-ready: #186343;
  --a-ready-bg: #e3f3eb;
  --a-danger: #a42e32;
  --a-danger-bg: #ffebeb;
  --accos-accent: #2e54bd;
  --accos-accent-ink: var(--accos-accent);
  --cds-button-primary: var(--accos-accent);
  --cds-button-primary-hover: #0050e6;
  --cds-button-primary-hover: color-mix(in srgb, var(--accos-accent) 90%, #000);
  --cds-button-primary-active: #002d9c;
  --cds-button-primary-active: color-mix(in srgb, var(--accos-accent) 70%, #000);
  --cds-interactive: var(--accos-accent-ink);
  --cds-link-primary: var(--accos-accent-ink);
  --cds-focus: #7153a8;
}
.i { width: 20px; height: 20px; fill: currentColor; flex: none; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--cds-text-primary, #161616);
  background: var(--cds-background, #fff);
  overscroll-behavior-y: none;
}
html,
body {
  overflow: hidden;
}
.shell {
  height: 100vh;
  height: var(--accos-vh, 100vh);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}
.shell > main {
  min-height: 0;
  overflow-y: auto;
}
.scroll-area {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(var(--cds-background, #fff) 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--cds-background, #fff) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), transparent) bottom / 100% 10px no-repeat scroll;
  background-color: var(--cds-background, #fff);
}
.touch button,
.touch a,
.touch [role="button"] {
  min-height: var(--a-control);
  min-width: var(--a-control);
}
.touch a:not([class]) {
  display: inline-flex;
  align-items: center;
}
