@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
/* Third party Vendors */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Fonts */
/*
Noto Sans supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/*
  Noto Serif supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/* Noto Sans and Noto Serif */
/*
  See all icons at: https://lucide.dev/icons/
  Icons extracted from https://unpkg.com/lucide-static@0.473.0/font/lucide.css
  The CDN provided selectors did not use a prefix to avoid naming conflicts
  Current version: 0.473.0
*/
/* Lucide Icons */
@font-face {
  font-family: 'lucide';
  src: url('https://unpkg.com/lucide-static@0.473.0/font/lucide.eot?t=1737128053459'); /* IE9*/
  src:
    url('https://unpkg.com/lucide-static@0.473.0/font/lucide.eot?t=1737128053459#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('https://unpkg.com/lucide-static@0.473.0/font/lucide.woff2?t=1737128053459') format('woff2'),
    url('https://unpkg.com/lucide-static@0.473.0/font/lucide.woff?t=1737128053459') format('woff'),
    url('https://unpkg.com/lucide-static@0.473.0/font/lucide.ttf?t=1737128053459') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('https://unpkg.com/lucide-static@0.473.0/font/lucide.svg?t=1737128053459#lucide') format('svg'); /* iOS 4.1- */
}
.li {
  font-family: 'lucide' !important;
  font-size: var(--__op-icon-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
}
.li-a-arrow-down:before {
  content: '\e589';
}
.li-a-arrow-up:before {
  content: '\e58a';
}
.li-a-large-small:before {
  content: '\e58b';
}
.li-accessibility:before {
  content: '\e296';
}
.li-activity:before {
  content: '\e038';
}
.li-air-vent:before {
  content: '\e350';
}
.li-airplay:before {
  content: '\e039';
}
.li-alarm-clock-check:before {
  content: '\e1eb';
}
.li-alarm-clock-minus:before {
  content: '\e1ec';
}
.li-alarm-clock-off:before {
  content: '\e23a';
}
.li-alarm-clock-plus:before {
  content: '\e1ed';
}
.li-alarm-clock:before {
  content: '\e03a';
}
.li-alarm-smoke:before {
  content: '\e57f';
}
.li-album:before {
  content: '\e03b';
}
.li-align-center-horizontal:before {
  content: '\e26b';
}
.li-align-center-vertical:before {
  content: '\e26c';
}
.li-align-center:before {
  content: '\e03c';
}
.li-align-end-horizontal:before {
  content: '\e26d';
}
.li-align-end-vertical:before {
  content: '\e26e';
}
.li-align-horizontal-distribute-center:before {
  content: '\e03d';
}
.li-align-horizontal-distribute-end:before {
  content: '\e03e';
}
.li-align-horizontal-distribute-start:before {
  content: '\e03f';
}
.li-align-horizontal-justify-center:before {
  content: '\e271';
}
.li-align-horizontal-justify-end:before {
  content: '\e272';
}
.li-align-horizontal-justify-start:before {
  content: '\e273';
}
.li-align-horizontal-space-around:before {
  content: '\e274';
}
.li-align-horizontal-space-between:before {
  content: '\e275';
}
.li-align-justify:before {
  content: '\e040';
}
.li-align-left:before {
  content: '\e041';
}
.li-align-right:before {
  content: '\e042';
}
.li-align-start-horizontal:before {
  content: '\e26f';
}
.li-align-start-vertical:before {
  content: '\e270';
}
.li-align-vertical-distribute-center:before {
  content: '\e27d';
}
.li-align-vertical-distribute-end:before {
  content: '\e27e';
}
.li-align-vertical-distribute-start:before {
  content: '\e27f';
}
.li-align-vertical-justify-center:before {
  content: '\e276';
}
.li-align-vertical-justify-end:before {
  content: '\e277';
}
.li-align-vertical-justify-start:before {
  content: '\e278';
}
.li-align-vertical-space-around:before {
  content: '\e279';
}
.li-align-vertical-space-between:before {
  content: '\e27a';
}
.li-ambulance:before {
  content: '\e5bf';
}
.li-ampersand:before {
  content: '\e4a0';
}
.li-ampersands:before {
  content: '\e4a1';
}
.li-amphora:before {
  content: '\e61f';
}
.li-anchor:before {
  content: '\e043';
}
.li-angry:before {
  content: '\e2fb';
}
.li-annoyed:before {
  content: '\e2fc';
}
.li-antenna:before {
  content: '\e4e6';
}
.li-anvil:before {
  content: '\e584';
}
.li-aperture:before {
  content: '\e044';
}
.li-app-window-mac:before {
  content: '\e5d6';
}
.li-app-window:before {
  content: '\e42a';
}
.li-apple:before {
  content: '\e351';
}
.li-archive-restore:before {
  content: '\e2cc';
}
.li-archive-x:before {
  content: '\e510';
}
.li-archive:before {
  content: '\e045';
}
.li-armchair:before {
  content: '\e2bf';
}
.li-arrow-big-down-dash:before {
  content: '\e421';
}
.li-arrow-big-down:before {
  content: '\e1e0';
}
.li-arrow-big-left-dash:before {
  content: '\e422';
}
.li-arrow-big-left:before {
  content: '\e1e1';
}
.li-arrow-big-right-dash:before {
  content: '\e423';
}
.li-arrow-big-right:before {
  content: '\e1e2';
}
.li-arrow-big-up-dash:before {
  content: '\e424';
}
.li-arrow-big-up:before {
  content: '\e1e3';
}
.li-arrow-down-0-1:before {
  content: '\e417';
}
.li-arrow-down-1-0:before {
  content: '\e418';
}
.li-arrow-down-a-z:before {
  content: '\e419';
}
.li-arrow-down-from-line:before {
  content: '\e458';
}
.li-arrow-down-left:before {
  content: '\e047';
}
.li-arrow-down-narrow-wide:before {
  content: '\e048';
}
.li-arrow-down-right:before {
  content: '\e049';
}
.li-arrow-down-to-dot:before {
  content: '\e451';
}
.li-arrow-down-to-line:before {
  content: '\e459';
}
.li-arrow-down-up:before {
  content: '\e04a';
}
.li-arrow-down-wide-narrow:before {
  content: '\e04b';
}
.li-arrow-down-z-a:before {
  content: '\e41a';
}
.li-arrow-down:before {
  content: '\e046';
}
.li-arrow-left-from-line:before {
  content: '\e45a';
}
.li-arrow-left-right:before {
  content: '\e249';
}
.li-arrow-left-to-line:before {
  content: '\e45b';
}
.li-arrow-left:before {
  content: '\e04c';
}
.li-arrow-right-from-line:before {
  content: '\e45c';
}
.li-arrow-right-left:before {
  content: '\e41b';
}
.li-arrow-right-to-line:before {
  content: '\e45d';
}
.li-arrow-right:before {
  content: '\e04d';
}
.li-arrow-up-0-1:before {
  content: '\e41c';
}
.li-arrow-up-1-0:before {
  content: '\e41d';
}
.li-arrow-up-a-z:before {
  content: '\e41e';
}
.li-arrow-up-down:before {
  content: '\e380';
}
.li-arrow-up-from-dot:before {
  content: '\e452';
}
.li-arrow-up-from-line:before {
  content: '\e45e';
}
.li-arrow-up-left:before {
  content: '\e04f';
}
.li-arrow-up-narrow-wide:before {
  content: '\e050';
}
.li-arrow-up-right:before {
  content: '\e051';
}
.li-arrow-up-to-line:before {
  content: '\e45f';
}
.li-arrow-up-wide-narrow:before {
  content: '\e41f';
}
.li-arrow-up-z-a:before {
  content: '\e420';
}
.li-arrow-up:before {
  content: '\e04e';
}
.li-arrows-up-from-line:before {
  content: '\e4d8';
}
.li-asterisk:before {
  content: '\e1ee';
}
.li-at-sign:before {
  content: '\e052';
}
.li-atom:before {
  content: '\e3da';
}
.li-audio-lines:before {
  content: '\e55e';
}
.li-audio-waveform:before {
  content: '\e55f';
}
.li-award:before {
  content: '\e053';
}
.li-axe:before {
  content: '\e054';
}
.li-axis-3d:before {
  content: '\e2fd';
}
.li-baby:before {
  content: '\e2cd';
}
.li-backpack:before {
  content: '\e2c7';
}
.li-badge-alert:before {
  content: '\e479';
}
.li-badge-cent:before {
  content: '\e513';
}
.li-badge-check:before {
  content: '\e240';
}
.li-badge-dollar-sign:before {
  content: '\e47a';
}
.li-badge-euro:before {
  content: '\e514';
}
.li-badge-help:before {
  content: '\e47b';
}
.li-badge-indian-rupee:before {
  content: '\e515';
}
.li-badge-info:before {
  content: '\e47c';
}
.li-badge-japanese-yen:before {
  content: '\e516';
}
.li-badge-minus:before {
  content: '\e47d';
}
.li-badge-percent:before {
  content: '\e47e';
}
.li-badge-plus:before {
  content: '\e47f';
}
.li-badge-pound-sterling:before {
  content: '\e517';
}
.li-badge-russian-ruble:before {
  content: '\e518';
}
.li-badge-swiss-franc:before {
  content: '\e519';
}
.li-badge-x:before {
  content: '\e480';
}
.li-badge:before {
  content: '\e478';
}
.li-baggage-claim:before {
  content: '\e2c8';
}
.li-ban:before {
  content: '\e055';
}
.li-banana:before {
  content: '\e352';
}
.li-bandage:before {
  content: '\e621';
}
.li-banknote:before {
  content: '\e056';
}
.li-barcode:before {
  content: '\e537';
}
.li-baseline:before {
  content: '\e284';
}
.li-bath:before {
  content: '\e2aa';
}
.li-battery-charging:before {
  content: '\e058';
}
.li-battery-full:before {
  content: '\e059';
}
.li-battery-low:before {
  content: '\e05a';
}
.li-battery-medium:before {
  content: '\e05b';
}
.li-battery-plus:before {
  content: '\e642';
}
.li-battery-warning:before {
  content: '\e3af';
}
.li-battery:before {
  content: '\e057';
}
.li-beaker:before {
  content: '\e05c';
}
.li-bean-off:before {
  content: '\e393';
}
.li-bean:before {
  content: '\e392';
}
.li-bed-double:before {
  content: '\e2c1';
}
.li-bed-single:before {
  content: '\e2c2';
}
.li-bed:before {
  content: '\e2c0';
}
.li-beef:before {
  content: '\e3a8';
}
.li-beer-off:before {
  content: '\e5dd';
}
.li-beer:before {
  content: '\e2ce';
}
.li-bell-dot:before {
  content: '\e42f';
}
.li-bell-electric:before {
  content: '\e580';
}
.li-bell-minus:before {
  content: '\e1ef';
}
.li-bell-off:before {
  content: '\e05e';
}
.li-bell-plus:before {
  content: '\e1f0';
}
.li-bell-ring:before {
  content: '\e223';
}
.li-bell:before {
  content: '\e05d';
}
.li-between-horizontal-end:before {
  content: '\e595';
}
.li-between-horizontal-start:before {
  content: '\e596';
}
.li-between-vertical-end:before {
  content: '\e597';
}
.li-between-vertical-start:before {
  content: '\e598';
}
.li-biceps-flexed:before {
  content: '\e5ef';
}
.li-bike:before {
  content: '\e1d1';
}
.li-binary:before {
  content: '\e1f1';
}
.li-binoculars:before {
  content: '\e625';
}
.li-biohazard:before {
  content: '\e445';
}
.li-bird:before {
  content: '\e3c8';
}
.li-bitcoin:before {
  content: '\e05f';
}
.li-blend:before {
  content: '\e5a0';
}
.li-blinds:before {
  content: '\e3c3';
}
.li-blocks:before {
  content: '\e4fe';
}
.li-bluetooth-connected:before {
  content: '\e1b7';
}
.li-bluetooth-off:before {
  content: '\e1b8';
}
.li-bluetooth-searching:before {
  content: '\e1b9';
}
.li-bluetooth:before {
  content: '\e060';
}
.li-bold:before {
  content: '\e061';
}
.li-bolt:before {
  content: '\e590';
}
.li-bomb:before {
  content: '\e2fe';
}
.li-bone:before {
  content: '\e35b';
}
.li-book-a:before {
  content: '\e548';
}
.li-book-audio:before {
  content: '\e549';
}
.li-book-check:before {
  content: '\e54a';
}
.li-book-copy:before {
  content: '\e3f0';
}
.li-book-dashed:before {
  content: '\e3f1';
}
.li-book-down:before {
  content: '\e3f2';
}
.li-book-headphones:before {
  content: '\e54b';
}
.li-book-heart:before {
  content: '\e54c';
}
.li-book-image:before {
  content: '\e54d';
}
.li-book-key:before {
  content: '\e3f3';
}
.li-book-lock:before {
  content: '\e3f4';
}
.li-book-marked:before {
  content: '\e3f5';
}
.li-book-minus:before {
  content: '\e3f6';
}
.li-book-open-check:before {
  content: '\e384';
}
.li-book-open-text:before {
  content: '\e54e';
}
.li-book-open:before {
  content: '\e063';
}
.li-book-plus:before {
  content: '\e3f7';
}
.li-book-text:before {
  content: '\e54f';
}
.li-book-type:before {
  content: '\e550';
}
.li-book-up-2:before {
  content: '\e4aa';
}
.li-book-up:before {
  content: '\e3f8';
}
.li-book-user:before {
  content: '\e551';
}
.li-book-x:before {
  content: '\e3f9';
}
.li-book:before {
  content: '\e062';
}
.li-bookmark-check:before {
  content: '\e523';
}
.li-bookmark-minus:before {
  content: '\e23b';
}
.li-bookmark-plus:before {
  content: '\e23c';
}
.li-bookmark-x:before {
  content: '\e524';
}
.li-bookmark:before {
  content: '\e064';
}
.li-boom-box:before {
  content: '\e4f2';
}
.li-bot-message-square:before {
  content: '\e5d2';
}
.li-bot-off:before {
  content: '\e5e4';
}
.li-bot:before {
  content: '\e1ba';
}
.li-box:before {
  content: '\e065';
}
.li-boxes:before {
  content: '\e2cf';
}
.li-braces:before {
  content: '\e36d';
}
.li-brackets:before {
  content: '\e447';
}
.li-brain-circuit:before {
  content: '\e3ca';
}
.li-brain-cog:before {
  content: '\e3cb';
}
.li-brain:before {
  content: '\e3c9';
}
.li-brick-wall:before {
  content: '\e585';
}
.li-briefcase-business:before {
  content: '\e5d9';
}
.li-briefcase-conveyor-belt:before {
  content: '\e62f';
}
.li-briefcase-medical:before {
  content: '\e5da';
}
.li-briefcase:before {
  content: '\e066';
}
.li-bring-to-front:before {
  content: '\e4f3';
}
.li-brush:before {
  content: '\e1d2';
}
.li-bug-off:before {
  content: '\e511';
}
.li-bug-play:before {
  content: '\e512';
}
.li-bug:before {
  content: '\e20b';
}
.li-building-2:before {
  content: '\e28f';
}
.li-building:before {
  content: '\e1cb';
}
.li-bus-front:before {
  content: '\e4ff';
}
.li-bus:before {
  content: '\e1d3';
}
.li-cable-car:before {
  content: '\e500';
}
.li-cable:before {
  content: '\e4e7';
}
.li-cake-slice:before {
  content: '\e4bd';
}
.li-cake:before {
  content: '\e347';
}
.li-calculator:before {
  content: '\e1bb';
}
.li-calendar-1:before {
  content: '\e634';
}
.li-calendar-arrow-down:before {
  content: '\e602';
}
.li-calendar-arrow-up:before {
  content: '\e603';
}
.li-calendar-check-2:before {
  content: '\e2b7';
}
.li-calendar-check:before {
  content: '\e2b6';
}
.li-calendar-clock:before {
  content: '\e303';
}
.li-calendar-cog:before {
  content: '\e5f1';
}
.li-calendar-days:before {
  content: '\e2b8';
}
.li-calendar-fold:before {
  content: '\e5b8';
}
.li-calendar-heart:before {
  content: '\e304';
}
.li-calendar-minus-2:before {
  content: '\e5b9';
}
.li-calendar-minus:before {
  content: '\e2b9';
}
.li-calendar-off:before {
  content: '\e2ba';
}
.li-calendar-plus-2:before {
  content: '\e5ba';
}
.li-calendar-plus:before {
  content: '\e2bb';
}
.li-calendar-range:before {
  content: '\e2bc';
}
.li-calendar-search:before {
  content: '\e305';
}
.li-calendar-sync:before {
  content: '\e63a';
}
.li-calendar-x-2:before {
  content: '\e2be';
}
.li-calendar-x:before {
  content: '\e2bd';
}
.li-calendar:before {
  content: '\e067';
}
.li-camera-off:before {
  content: '\e069';
}
.li-camera:before {
  content: '\e068';
}
.li-candy-cane:before {
  content: '\e4be';
}
.li-candy-off:before {
  content: '\e395';
}
.li-candy:before {
  content: '\e394';
}
.li-cannabis:before {
  content: '\e5d8';
}
.li-captions-off:before {
  content: '\e5c5';
}
.li-captions:before {
  content: '\e3a7';
}
.li-car-front:before {
  content: '\e501';
}
.li-car-taxi-front:before {
  content: '\e502';
}
.li-car:before {
  content: '\e1d4';
}
.li-caravan:before {
  content: '\e53d';
}
.li-carrot:before {
  content: '\e259';
}
.li-case-lower:before {
  content: '\e3db';
}
.li-case-sensitive:before {
  content: '\e3dc';
}
.li-case-upper:before {
  content: '\e3dd';
}
.li-cassette-tape:before {
  content: '\e4ce';
}
.li-cast:before {
  content: '\e06a';
}
.li-castle:before {
  content: '\e3e3';
}
.li-cat:before {
  content: '\e38f';
}
.li-cctv:before {
  content: '\e581';
}
.li-chart-area:before {
  content: '\e4d7';
}
.li-chart-bar-big:before {
  content: '\e4ab';
}
.li-chart-bar-decreasing:before {
  content: '\e60b';
}
.li-chart-bar-increasing:before {
  content: '\e60c';
}
.li-chart-bar-stacked:before {
  content: '\e60d';
}
.li-chart-bar:before {
  content: '\e2a1';
}
.li-chart-candlestick:before {
  content: '\e4ac';
}
.li-chart-column-big:before {
  content: '\e4ad';
}
.li-chart-column-decreasing:before {
  content: '\e06b';
}
.li-chart-column-increasing:before {
  content: '\e2a3';
}
.li-chart-column-stacked:before {
  content: '\e60e';
}
.li-chart-column:before {
  content: '\e2a2';
}
.li-chart-gantt:before {
  content: '\e628';
}
.li-chart-line:before {
  content: '\e2a4';
}
.li-chart-network:before {
  content: '\e60f';
}
.li-chart-no-axes-column-decreasing:before {
  content: '\e06d';
}
.li-chart-no-axes-column-increasing:before {
  content: '\e06e';
}
.li-chart-no-axes-column:before {
  content: '\e06c';
}
.li-chart-no-axes-combined:before {
  content: '\e610';
}
.li-chart-no-axes-gantt:before {
  content: '\e4c8';
}
.li-chart-pie:before {
  content: '\e06f';
}
.li-chart-scatter:before {
  content: '\e48e';
}
.li-chart-spline:before {
  content: '\e611';
}
.li-check-check:before {
  content: '\e391';
}
.li-check:before {
  content: '\e070';
}
.li-chef-hat:before {
  content: '\e2ab';
}
.li-cherry:before {
  content: '\e353';
}
.li-chevron-down:before {
  content: '\e071';
}
.li-chevron-first:before {
  content: '\e242';
}
.li-chevron-last:before {
  content: '\e243';
}
.li-chevron-left:before {
  content: '\e072';
}
.li-chevron-right:before {
  content: '\e073';
}
.li-chevron-up:before {
  content: '\e074';
}
.li-chevrons-down-up:before {
  content: '\e227';
}
.li-chevrons-down:before {
  content: '\e075';
}
.li-chevrons-left-right-ellipsis:before {
  content: '\e623';
}
.li-chevrons-left-right:before {
  content: '\e292';
}
.li-chevrons-left:before {
  content: '\e076';
}
.li-chevrons-right-left:before {
  content: '\e293';
}
.li-chevrons-right:before {
  content: '\e077';
}
.li-chevrons-up-down:before {
  content: '\e210';
}
.li-chevrons-up:before {
  content: '\e078';
}
.li-chrome:before {
  content: '\e079';
}
.li-church:before {
  content: '\e3e4';
}
.li-cigarette-off:before {
  content: '\e2c6';
}
.li-cigarette:before {
  content: '\e2c5';
}
.li-circle-alert:before {
  content: '\e07b';
}
.li-circle-arrow-down:before {
  content: '\e07c';
}
.li-circle-arrow-left:before {
  content: '\e07d';
}
.li-circle-arrow-out-down-left:before {
  content: '\e3fb';
}
.li-circle-arrow-out-down-right:before {
  content: '\e3fc';
}
.li-circle-arrow-out-up-left:before {
  content: '\e3fd';
}
.li-circle-arrow-out-up-right:before {
  content: '\e3fe';
}
.li-circle-arrow-right:before {
  content: '\e07e';
}
.li-circle-arrow-up:before {
  content: '\e07f';
}
.li-circle-check-big:before {
  content: '\e080';
}
.li-circle-check:before {
  content: '\e225';
}
.li-circle-chevron-down:before {
  content: '\e4e1';
}
.li-circle-chevron-left:before {
  content: '\e4e2';
}
.li-circle-chevron-right:before {
  content: '\e4e3';
}
.li-circle-chevron-up:before {
  content: '\e4e4';
}
.li-circle-dashed:before {
  content: '\e4b4';
}
.li-circle-divide:before {
  content: '\e081';
}
.li-circle-dollar-sign:before {
  content: '\e481';
}
.li-circle-dot-dashed:before {
  content: '\e4b5';
}
.li-circle-dot:before {
  content: '\e348';
}
.li-circle-ellipsis:before {
  content: '\e349';
}
.li-circle-equal:before {
  content: '\e404';
}
.li-circle-fading-arrow-up:before {
  content: '\e61c';
}
.li-circle-fading-plus:before {
  content: '\e5c0';
}
.li-circle-gauge:before {
  content: '\e4e5';
}
.li-circle-help:before {
  content: '\e082';
}
.li-circle-minus:before {
  content: '\e083';
}
.li-circle-off:before {
  content: '\e405';
}
.li-circle-parking-off:before {
  content: '\e3cd';
}
.li-circle-parking:before {
  content: '\e3cc';
}
.li-circle-pause:before {
  content: '\e084';
}
.li-circle-percent:before {
  content: '\e51e';
}
.li-circle-play:before {
  content: '\e085';
}
.li-circle-plus:before {
  content: '\e086';
}
.li-circle-power:before {
  content: '\e554';
}
.li-circle-slash-2:before {
  content: '\e212';
}
.li-circle-slash:before {
  content: '\e406';
}
.li-circle-stop:before {
  content: '\e087';
}
.li-circle-user-round:before {
  content: '\e466';
}
.li-circle-user:before {
  content: '\e465';
}
.li-circle-x:before {
  content: '\e088';
}
.li-circle:before {
  content: '\e07a';
}
.li-circuit-board:before {
  content: '\e407';
}
.li-citrus:before {
  content: '\e378';
}
.li-clapperboard:before {
  content: '\e29a';
}
.li-clipboard-check:before {
  content: '\e218';
}
.li-clipboard-copy:before {
  content: '\e224';
}
.li-clipboard-list:before {
  content: '\e08a';
}
.li-clipboard-minus:before {
  content: '\e5c2';
}
.li-clipboard-paste:before {
  content: '\e3eb';
}
.li-clipboard-pen-line:before {
  content: '\e307';
}
.li-clipboard-pen:before {
  content: '\e306';
}
.li-clipboard-plus:before {
  content: '\e5c3';
}
.li-clipboard-type:before {
  content: '\e308';
}
.li-clipboard-x:before {
  content: '\e221';
}
.li-clipboard:before {
  content: '\e089';
}
.li-clock-1:before {
  content: '\e24a';
}
.li-clock-10:before {
  content: '\e24b';
}
.li-clock-11:before {
  content: '\e24c';
}
.li-clock-12:before {
  content: '\e24d';
}
.li-clock-2:before {
  content: '\e24e';
}
.li-clock-3:before {
  content: '\e24f';
}
.li-clock-4:before {
  content: '\e250';
}
.li-clock-5:before {
  content: '\e251';
}
.li-clock-6:before {
  content: '\e252';
}
.li-clock-7:before {
  content: '\e253';
}
.li-clock-8:before {
  content: '\e254';
}
.li-clock-9:before {
  content: '\e255';
}
.li-clock-alert:before {
  content: '\e62e';
}
.li-clock-arrow-down:before {
  content: '\e604';
}
.li-clock-arrow-up:before {
  content: '\e605';
}
.li-clock:before {
  content: '\e08b';
}
.li-cloud-alert:before {
  content: '\e637';
}
.li-cloud-cog:before {
  content: '\e309';
}
.li-cloud-download:before {
  content: '\e08d';
}
.li-cloud-drizzle:before {
  content: '\e08e';
}
.li-cloud-fog:before {
  content: '\e213';
}
.li-cloud-hail:before {
  content: '\e08f';
}
.li-cloud-lightning:before {
  content: '\e090';
}
.li-cloud-moon-rain:before {
  content: '\e2f9';
}
.li-cloud-moon:before {
  content: '\e214';
}
.li-cloud-off:before {
  content: '\e091';
}
.li-cloud-rain-wind:before {
  content: '\e093';
}
.li-cloud-rain:before {
  content: '\e092';
}
.li-cloud-snow:before {
  content: '\e094';
}
.li-cloud-sun-rain:before {
  content: '\e2fa';
}
.li-cloud-sun:before {
  content: '\e215';
}
.li-cloud-upload:before {
  content: '\e095';
}
.li-cloud:before {
  content: '\e08c';
}
.li-cloudy:before {
  content: '\e216';
}
.li-clover:before {
  content: '\e096';
}
.li-club:before {
  content: '\e49a';
}
.li-code-xml:before {
  content: '\e205';
}
.li-code:before {
  content: '\e097';
}
.li-codepen:before {
  content: '\e098';
}
.li-codesandbox:before {
  content: '\e099';
}
.li-coffee:before {
  content: '\e09a';
}
.li-cog:before {
  content: '\e30a';
}
.li-coins:before {
  content: '\e09b';
}
.li-columns-2:before {
  content: '\e09c';
}
.li-columns-3:before {
  content: '\e09d';
}
.li-columns-4:before {
  content: '\e58d';
}
.li-combine:before {
  content: '\e450';
}
.li-command:before {
  content: '\e09e';
}
.li-compass:before {
  content: '\e09f';
}
.li-component:before {
  content: '\e2ac';
}
.li-computer:before {
  content: '\e4e8';
}
.li-concierge-bell:before {
  content: '\e37b';
}
.li-cone:before {
  content: '\e527';
}
.li-construction:before {
  content: '\e3b7';
}
.li-contact-round:before {
  content: '\e467';
}
.li-contact:before {
  content: '\e0a0';
}
.li-container:before {
  content: '\e4d9';
}
.li-contrast:before {
  content: '\e0a1';
}
.li-cookie:before {
  content: '\e26a';
}
.li-cooking-pot:before {
  content: '\e588';
}
.li-copy-check:before {
  content: '\e3ff';
}
.li-copy-minus:before {
  content: '\e400';
}
.li-copy-plus:before {
  content: '\e401';
}
.li-copy-slash:before {
  content: '\e402';
}
.li-copy-x:before {
  content: '\e403';
}
.li-copy:before {
  content: '\e0a2';
}
.li-copyleft:before {
  content: '\e0a3';
}
.li-copyright:before {
  content: '\e0a4';
}
.li-corner-down-left:before {
  content: '\e0a5';
}
.li-corner-down-right:before {
  content: '\e0a6';
}
.li-corner-left-down:before {
  content: '\e0a7';
}
.li-corner-left-up:before {
  content: '\e0a8';
}
.li-corner-right-down:before {
  content: '\e0a9';
}
.li-corner-right-up:before {
  content: '\e0aa';
}
.li-corner-up-left:before {
  content: '\e0ab';
}
.li-corner-up-right:before {
  content: '\e0ac';
}
.li-cpu:before {
  content: '\e0ad';
}
.li-creative-commons:before {
  content: '\e3b5';
}
.li-credit-card:before {
  content: '\e0ae';
}
.li-croissant:before {
  content: '\e2ad';
}
.li-crop:before {
  content: '\e0af';
}
.li-cross:before {
  content: '\e1e4';
}
.li-crosshair:before {
  content: '\e0b0';
}
.li-crown:before {
  content: '\e1d5';
}
.li-cuboid:before {
  content: '\e528';
}
.li-cup-soda:before {
  content: '\e2d0';
}
.li-currency:before {
  content: '\e22f';
}
.li-cylinder:before {
  content: '\e529';
}
.li-dam:before {
  content: '\e60a';
}
.li-database-backup:before {
  content: '\e3ae';
}
.li-database-zap:before {
  content: '\e50f';
}
.li-database:before {
  content: '\e0b1';
}
.li-delete:before {
  content: '\e0b2';
}
.li-dessert:before {
  content: '\e4bf';
}
.li-diameter:before {
  content: '\e52a';
}
.li-diamond-minus:before {
  content: '\e5e5';
}
.li-diamond-percent:before {
  content: '\e51f';
}
.li-diamond-plus:before {
  content: '\e5e6';
}
.li-diamond:before {
  content: '\e2d1';
}
.li-dice-1:before {
  content: '\e286';
}
.li-dice-2:before {
  content: '\e287';
}
.li-dice-3:before {
  content: '\e288';
}
.li-dice-4:before {
  content: '\e289';
}
.li-dice-5:before {
  content: '\e28a';
}
.li-dice-6:before {
  content: '\e28b';
}
.li-dices:before {
  content: '\e2c4';
}
.li-diff:before {
  content: '\e30b';
}
.li-disc-2:before {
  content: '\e3fa';
}
.li-disc-3:before {
  content: '\e498';
}
.li-disc-album:before {
  content: '\e560';
}
.li-disc:before {
  content: '\e0b3';
}
.li-divide:before {
  content: '\e0b4';
}
.li-dna-off:before {
  content: '\e397';
}
.li-dna:before {
  content: '\e396';
}
.li-dock:before {
  content: '\e5d7';
}
.li-dog:before {
  content: '\e390';
}
.li-dollar-sign:before {
  content: '\e0b5';
}
.li-donut:before {
  content: '\e4c0';
}
.li-door-closed:before {
  content: '\e3d8';
}
.li-door-open:before {
  content: '\e3d9';
}
.li-dot:before {
  content: '\e453';
}
.li-download:before {
  content: '\e0b6';
}
.li-drafting-compass:before {
  content: '\e52b';
}
.li-drama:before {
  content: '\e525';
}
.li-dribbble:before {
  content: '\e0b7';
}
.li-drill:before {
  content: '\e591';
}
.li-droplet-off:before {
  content: '\e63c';
}
.li-droplet:before {
  content: '\e0b8';
}
.li-droplets:before {
  content: '\e0b9';
}
.li-drum:before {
  content: '\e561';
}
.li-drumstick:before {
  content: '\e25a';
}
.li-dumbbell:before {
  content: '\e3a4';
}
.li-ear-off:before {
  content: '\e386';
}
.li-ear:before {
  content: '\e385';
}
.li-earth-lock:before {
  content: '\e5d0';
}
.li-earth:before {
  content: '\e1f2';
}
.li-eclipse:before {
  content: '\e5a1';
}
.li-egg-fried:before {
  content: '\e354';
}
.li-egg-off:before {
  content: '\e398';
}
.li-egg:before {
  content: '\e25c';
}
.li-ellipsis-vertical:before {
  content: '\e0bb';
}
.li-ellipsis:before {
  content: '\e0ba';
}
.li-equal-approximately:before {
  content: '\e638';
}
.li-equal-not:before {
  content: '\e1bd';
}
.li-equal:before {
  content: '\e1bc';
}
.li-eraser:before {
  content: '\e28e';
}
.li-ethernet-port:before {
  content: '\e624';
}
.li-euro:before {
  content: '\e0bc';
}
.li-expand:before {
  content: '\e219';
}
.li-external-link:before {
  content: '\e0bd';
}
.li-eye-closed:before {
  content: '\e632';
}
.li-eye-off:before {
  content: '\e0bf';
}
.li-eye:before {
  content: '\e0be';
}
.li-facebook:before {
  content: '\e0c0';
}
.li-factory:before {
  content: '\e29e';
}
.li-fan:before {
  content: '\e37c';
}
.li-fast-forward:before {
  content: '\e0c1';
}
.li-feather:before {
  content: '\e0c2';
}
.li-fence:before {
  content: '\e586';
}
.li-ferris-wheel:before {
  content: '\e483';
}
.li-figma:before {
  content: '\e0c3';
}
.li-file-archive:before {
  content: '\e30c';
}
.li-file-audio-2:before {
  content: '\e30e';
}
.li-file-audio:before {
  content: '\e30d';
}
.li-file-axis-3d:before {
  content: '\e30f';
}
.li-file-badge-2:before {
  content: '\e311';
}
.li-file-badge:before {
  content: '\e310';
}
.li-file-box:before {
  content: '\e312';
}
.li-file-chart-column-increasing:before {
  content: '\e314';
}
.li-file-chart-column:before {
  content: '\e313';
}
.li-file-chart-line:before {
  content: '\e315';
}
.li-file-chart-pie:before {
  content: '\e316';
}
.li-file-check-2:before {
  content: '\e0c6';
}
.li-file-check:before {
  content: '\e0c5';
}
.li-file-clock:before {
  content: '\e317';
}
.li-file-code-2:before {
  content: '\e462';
}
.li-file-code:before {
  content: '\e0c7';
}
.li-file-cog:before {
  content: '\e318';
}
.li-file-diff:before {
  content: '\e319';
}
.li-file-digit:before {
  content: '\e0c8';
}
.li-file-down:before {
  content: '\e31a';
}
.li-file-heart:before {
  content: '\e31b';
}
.li-file-image:before {
  content: '\e31c';
}
.li-file-input:before {
  content: '\e0c9';
}
.li-file-json-2:before {
  content: '\e36f';
}
.li-file-json:before {
  content: '\e36e';
}
.li-file-key-2:before {
  content: '\e31e';
}
.li-file-key:before {
  content: '\e31d';
}
.li-file-lock-2:before {
  content: '\e320';
}
.li-file-lock:before {
  content: '\e31f';
}
.li-file-minus-2:before {
  content: '\e0cb';
}
.li-file-minus:before {
  content: '\e0ca';
}
.li-file-music:before {
  content: '\e562';
}
.li-file-output:before {
  content: '\e0cc';
}
.li-file-pen-line:before {
  content: '\e322';
}
.li-file-pen:before {
  content: '\e321';
}
.li-file-plus-2:before {
  content: '\e0ce';
}
.li-file-plus:before {
  content: '\e0cd';
}
.li-file-question:before {
  content: '\e323';
}
.li-file-scan:before {
  content: '\e324';
}
.li-file-search-2:before {
  content: '\e325';
}
.li-file-search:before {
  content: '\e0cf';
}
.li-file-sliders:before {
  content: '\e5a4';
}
.li-file-spreadsheet:before {
  content: '\e326';
}
.li-file-stack:before {
  content: '\e4a5';
}
.li-file-symlink:before {
  content: '\e327';
}
.li-file-terminal:before {
  content: '\e328';
}
.li-file-text:before {
  content: '\e0d0';
}
.li-file-type-2:before {
  content: '\e370';
}
.li-file-type:before {
  content: '\e329';
}
.li-file-up:before {
  content: '\e32a';
}
.li-file-user:before {
  content: '\e631';
}
.li-file-video-2:before {
  content: '\e32c';
}
.li-file-video:before {
  content: '\e32b';
}
.li-file-volume-2:before {
  content: '\e32e';
}
.li-file-volume:before {
  content: '\e32d';
}
.li-file-warning:before {
  content: '\e32f';
}
.li-file-x-2:before {
  content: '\e0d2';
}
.li-file-x:before {
  content: '\e0d1';
}
.li-file:before {
  content: '\e0c4';
}
.li-files:before {
  content: '\e0d3';
}
.li-film:before {
  content: '\e0d4';
}
.li-filter-x:before {
  content: '\e3b8';
}
.li-filter:before {
  content: '\e0d5';
}
.li-fingerprint:before {
  content: '\e2ca';
}
.li-fire-extinguisher:before {
  content: '\e582';
}
.li-fish-off:before {
  content: '\e3b3';
}
.li-fish-symbol:before {
  content: '\e4f8';
}
.li-fish:before {
  content: '\e3a9';
}
.li-flag-off:before {
  content: '\e291';
}
.li-flag-triangle-left:before {
  content: '\e236';
}
.li-flag-triangle-right:before {
  content: '\e237';
}
.li-flag:before {
  content: '\e0d6';
}
.li-flame-kindling:before {
  content: '\e53e';
}
.li-flame:before {
  content: '\e0d7';
}
.li-flashlight-off:before {
  content: '\e0d9';
}
.li-flashlight:before {
  content: '\e0d8';
}
.li-flask-conical-off:before {
  content: '\e399';
}
.li-flask-conical:before {
  content: '\e0da';
}
.li-flask-round:before {
  content: '\e0db';
}
.li-flip-horizontal-2:before {
  content: '\e361';
}
.li-flip-horizontal:before {
  content: '\e360';
}
.li-flip-vertical-2:before {
  content: '\e363';
}
.li-flip-vertical:before {
  content: '\e362';
}
.li-flower-2:before {
  content: '\e2d3';
}
.li-flower:before {
  content: '\e2d2';
}
.li-focus:before {
  content: '\e29d';
}
.li-fold-horizontal:before {
  content: '\e43f';
}
.li-fold-vertical:before {
  content: '\e440';
}
.li-folder-archive:before {
  content: '\e330';
}
.li-folder-check:before {
  content: '\e331';
}
.li-folder-clock:before {
  content: '\e332';
}
.li-folder-closed:before {
  content: '\e333';
}
.li-folder-code:before {
  content: '\e5ff';
}
.li-folder-cog:before {
  content: '\e334';
}
.li-folder-dot:before {
  content: '\e4c9';
}
.li-folder-down:before {
  content: '\e335';
}
.li-folder-git-2:before {
  content: '\e40e';
}
.li-folder-git:before {
  content: '\e40d';
}
.li-folder-heart:before {
  content: '\e336';
}
.li-folder-input:before {
  content: '\e337';
}
.li-folder-kanban:before {
  content: '\e4ca';
}
.li-folder-key:before {
  content: '\e338';
}
.li-folder-lock:before {
  content: '\e339';
}
.li-folder-minus:before {
  content: '\e0dd';
}
.li-folder-open-dot:before {
  content: '\e4cb';
}
.li-folder-open:before {
  content: '\e246';
}
.li-folder-output:before {
  content: '\e33a';
}
.li-folder-pen:before {
  content: '\e33b';
}
.li-folder-plus:before {
  content: '\e0de';
}
.li-folder-root:before {
  content: '\e4cc';
}
.li-folder-search-2:before {
  content: '\e33d';
}
.li-folder-search:before {
  content: '\e33c';
}
.li-folder-symlink:before {
  content: '\e33e';
}
.li-folder-sync:before {
  content: '\e4cd';
}
.li-folder-tree:before {
  content: '\e33f';
}
.li-folder-up:before {
  content: '\e340';
}
.li-folder-x:before {
  content: '\e341';
}
.li-folder:before {
  content: '\e0dc';
}
.li-folders:before {
  content: '\e342';
}
.li-footprints:before {
  content: '\e3bc';
}
.li-forklift:before {
  content: '\e3c4';
}
.li-forward:before {
  content: '\e228';
}
.li-frame:before {
  content: '\e290';
}
.li-framer:before {
  content: '\e0df';
}
.li-frown:before {
  content: '\e0e0';
}
.li-fuel:before {
  content: '\e2ae';
}
.li-fullscreen:before {
  content: '\e538';
}
.li-gallery-horizontal-end:before {
  content: '\e4d3';
}
.li-gallery-horizontal:before {
  content: '\e4d2';
}
.li-gallery-thumbnails:before {
  content: '\e4d4';
}
.li-gallery-vertical-end:before {
  content: '\e4d6';
}
.li-gallery-vertical:before {
  content: '\e4d5';
}
.li-gamepad-2:before {
  content: '\e0e2';
}
.li-gamepad:before {
  content: '\e0e1';
}
.li-gauge:before {
  content: '\e1be';
}
.li-gavel:before {
  content: '\e0e3';
}
.li-gem:before {
  content: '\e241';
}
.li-ghost:before {
  content: '\e20d';
}
.li-gift:before {
  content: '\e0e4';
}
.li-git-branch-plus:before {
  content: '\e1f3';
}
.li-git-branch:before {
  content: '\e0e5';
}
.li-git-commit-horizontal:before {
  content: '\e0e6';
}
.li-git-commit-vertical:before {
  content: '\e556';
}
.li-git-compare-arrows:before {
  content: '\e557';
}
.li-git-compare:before {
  content: '\e35c';
}
.li-git-fork:before {
  content: '\e28c';
}
.li-git-graph:before {
  content: '\e558';
}
.li-git-merge:before {
  content: '\e0e7';
}
.li-git-pull-request-arrow:before {
  content: '\e559';
}
.li-git-pull-request-closed:before {
  content: '\e35d';
}
.li-git-pull-request-create-arrow:before {
  content: '\e55b';
}
.li-git-pull-request-create:before {
  content: '\e55a';
}
.li-git-pull-request-draft:before {
  content: '\e35e';
}
.li-git-pull-request:before {
  content: '\e0e8';
}
.li-github:before {
  content: '\e0e9';
}
.li-gitlab:before {
  content: '\e0ea';
}
.li-glass-water:before {
  content: '\e2d4';
}
.li-glasses:before {
  content: '\e20c';
}
.li-globe-lock:before {
  content: '\e5d1';
}
.li-globe:before {
  content: '\e0eb';
}
.li-goal:before {
  content: '\e4a9';
}
.li-grab:before {
  content: '\e1e5';
}
.li-graduation-cap:before {
  content: '\e233';
}
.li-grape:before {
  content: '\e355';
}
.li-grid-2x2-check:before {
  content: '\e5e8';
}
.li-grid-2x2-plus:before {
  content: '\e62c';
}
.li-grid-2x2-x:before {
  content: '\e5e9';
}
.li-grid-2x2:before {
  content: '\e503';
}
.li-grid-3x3:before {
  content: '\e0ec';
}
.li-grip-horizontal:before {
  content: '\e0ed';
}
.li-grip-vertical:before {
  content: '\e0ee';
}
.li-grip:before {
  content: '\e3b4';
}
.li-group:before {
  content: '\e468';
}
.li-guitar:before {
  content: '\e563';
}
.li-ham:before {
  content: '\e5db';
}
.li-hammer:before {
  content: '\e0ef';
}
.li-hand-coins:before {
  content: '\e5bc';
}
.li-hand-heart:before {
  content: '\e5bd';
}
.li-hand-helping:before {
  content: '\e3bb';
}
.li-hand-metal:before {
  content: '\e22b';
}
.li-hand-platter:before {
  content: '\e5be';
}
.li-hand:before {
  content: '\e1d6';
}
.li-handshake:before {
  content: '\e5c4';
}
.li-hard-drive-download:before {
  content: '\e4e9';
}
.li-hard-drive-upload:before {
  content: '\e4ea';
}
.li-hard-drive:before {
  content: '\e0f0';
}
.li-hard-hat:before {
  content: '\e0f1';
}
.li-hash:before {
  content: '\e0f2';
}
.li-haze:before {
  content: '\e0f3';
}
.li-hdmi-port:before {
  content: '\e4eb';
}
.li-heading-1:before {
  content: '\e388';
}
.li-heading-2:before {
  content: '\e389';
}
.li-heading-3:before {
  content: '\e38a';
}
.li-heading-4:before {
  content: '\e38b';
}
.li-heading-5:before {
  content: '\e38c';
}
.li-heading-6:before {
  content: '\e38d';
}
.li-heading:before {
  content: '\e387';
}
.li-headphone-off:before {
  content: '\e62d';
}
.li-headphones:before {
  content: '\e0f4';
}
.li-headset:before {
  content: '\e5c1';
}
.li-heart-crack:before {
  content: '\e2d5';
}
.li-heart-handshake:before {
  content: '\e2d6';
}
.li-heart-off:before {
  content: '\e294';
}
.li-heart-pulse:before {
  content: '\e371';
}
.li-heart:before {
  content: '\e0f5';
}
.li-heater:before {
  content: '\e592';
}
.li-hexagon:before {
  content: '\e0f6';
}
.li-highlighter:before {
  content: '\e0f7';
}
.li-history:before {
  content: '\e1f4';
}
.li-hop-off:before {
  content: '\e39b';
}
.li-hop:before {
  content: '\e39a';
}
.li-hospital:before {
  content: '\e5dc';
}
.li-hotel:before {
  content: '\e3e5';
}
.li-hourglass:before {
  content: '\e295';
}
.li-house-plug:before {
  content: '\e5f4';
}
.li-house-plus:before {
  content: '\e5f5';
}
.li-house-wifi:before {
  content: '\e640';
}
.li-house:before {
  content: '\e0f8';
}
.li-ice-cream-bowl:before {
  content: '\e3aa';
}
.li-ice-cream-cone:before {
  content: '\e356';
}
.li-id-card:before {
  content: '\e61b';
}
.li-image-down:before {
  content: '\e540';
}
.li-image-minus:before {
  content: '\e1f5';
}
.li-image-off:before {
  content: '\e1bf';
}
.li-image-play:before {
  content: '\e5e3';
}
.li-image-plus:before {
  content: '\e1f6';
}
.li-image-up:before {
  content: '\e5cf';
}
.li-image-upscale:before {
  content: '\e63b';
}
.li-image:before {
  content: '\e0f9';
}
.li-images:before {
  content: '\e5c8';
}
.li-import:before {
  content: '\e22e';
}
.li-inbox:before {
  content: '\e0fa';
}
.li-indent-decrease:before {
  content: '\e0fb';
}
.li-indent-increase:before {
  content: '\e0fc';
}
.li-indian-rupee:before {
  content: '\e0fd';
}
.li-infinity:before {
  content: '\e1e6';
}
.li-info:before {
  content: '\e0fe';
}
.li-inspection-panel:before {
  content: '\e587';
}
.li-instagram:before {
  content: '\e0ff';
}
.li-italic:before {
  content: '\e100';
}
.li-iteration-ccw:before {
  content: '\e427';
}
.li-iteration-cw:before {
  content: '\e428';
}
.li-japanese-yen:before {
  content: '\e101';
}
.li-joystick:before {
  content: '\e358';
}
.li-kanban:before {
  content: '\e4e0';
}
.li-key-round:before {
  content: '\e4a7';
}
.li-key-square:before {
  content: '\e4a8';
}
.li-key:before {
  content: '\e102';
}
.li-keyboard-music:before {
  content: '\e564';
}
.li-keyboard-off:before {
  content: '\e5e2';
}
.li-keyboard:before {
  content: '\e283';
}
.li-lamp-ceiling:before {
  content: '\e2d8';
}
.li-lamp-desk:before {
  content: '\e2d9';
}
.li-lamp-floor:before {
  content: '\e2da';
}
.li-lamp-wall-down:before {
  content: '\e2db';
}
.li-lamp-wall-up:before {
  content: '\e2dc';
}
.li-lamp:before {
  content: '\e2d7';
}
.li-land-plot:before {
  content: '\e52c';
}
.li-landmark:before {
  content: '\e239';
}
.li-languages:before {
  content: '\e103';
}
.li-laptop-minimal-check:before {
  content: '\e636';
}
.li-laptop-minimal:before {
  content: '\e1d7';
}
.li-laptop:before {
  content: '\e1cc';
}
.li-lasso-select:before {
  content: '\e1ce';
}
.li-lasso:before {
  content: '\e1cd';
}
.li-laugh:before {
  content: '\e2ff';
}
.li-layers-2:before {
  content: '\e52e';
}
.li-layers:before {
  content: '\e52d';
}
.li-layout-dashboard:before {
  content: '\e1c0';
}
.li-layout-grid:before {
  content: '\e104';
}
.li-layout-list:before {
  content: '\e1d8';
}
.li-layout-panel-left:before {
  content: '\e474';
}
.li-layout-panel-top:before {
  content: '\e475';
}
.li-layout-template:before {
  content: '\e206';
}
.li-leaf:before {
  content: '\e2dd';
}
.li-leafy-green:before {
  content: '\e473';
}
.li-lectern:before {
  content: '\e5ed';
}
.li-letter-text:before {
  content: '\e609';
}
.li-library-big:before {
  content: '\e552';
}
.li-library:before {
  content: '\e105';
}
.li-life-buoy:before {
  content: '\e106';
}
.li-ligature:before {
  content: '\e43e';
}
.li-lightbulb-off:before {
  content: '\e207';
}
.li-lightbulb:before {
  content: '\e1c1';
}
.li-link-2-off:before {
  content: '\e109';
}
.li-link-2:before {
  content: '\e108';
}
.li-link:before {
  content: '\e107';
}
.li-linkedin:before {
  content: '\e10a';
}
.li-list-check:before {
  content: '\e5fe';
}
.li-list-checks:before {
  content: '\e1cf';
}
.li-list-collapse:before {
  content: '\e59f';
}
.li-list-end:before {
  content: '\e2de';
}
.li-list-filter-plus:before {
  content: '\e63d';
}
.li-list-filter:before {
  content: '\e464';
}
.li-list-minus:before {
  content: '\e23d';
}
.li-list-music:before {
  content: '\e2df';
}
.li-list-ordered:before {
  content: '\e1d0';
}
.li-list-plus:before {
  content: '\e23e';
}
.li-list-restart:before {
  content: '\e456';
}
.li-list-start:before {
  content: '\e2e0';
}
.li-list-todo:before {
  content: '\e4c7';
}
.li-list-tree:before {
  content: '\e40c';
}
.li-list-video:before {
  content: '\e2e1';
}
.li-list-x:before {
  content: '\e23f';
}
.li-list:before {
  content: '\e10b';
}
.li-loader-circle:before {
  content: '\e10d';
}
.li-loader-pinwheel:before {
  content: '\e5ea';
}
.li-loader:before {
  content: '\e10c';
}
.li-locate-fixed:before {
  content: '\e1da';
}
.li-locate-off:before {
  content: '\e281';
}
.li-locate:before {
  content: '\e1d9';
}
.li-lock-keyhole-open:before {
  content: '\e536';
}
.li-lock-keyhole:before {
  content: '\e535';
}
.li-lock-open:before {
  content: '\e10f';
}
.li-lock:before {
  content: '\e10e';
}
.li-log-in:before {
  content: '\e110';
}
.li-log-out:before {
  content: '\e111';
}
.li-logs:before {
  content: '\e5f8';
}
.li-lollipop:before {
  content: '\e4c1';
}
.li-luggage:before {
  content: '\e2c9';
}
.li-magnet:before {
  content: '\e2b4';
}
.li-mail-check:before {
  content: '\e364';
}
.li-mail-minus:before {
  content: '\e365';
}
.li-mail-open:before {
  content: '\e366';
}
.li-mail-plus:before {
  content: '\e367';
}
.li-mail-question:before {
  content: '\e368';
}
.li-mail-search:before {
  content: '\e369';
}
.li-mail-warning:before {
  content: '\e36a';
}
.li-mail-x:before {
  content: '\e36b';
}
.li-mail:before {
  content: '\e112';
}
.li-mailbox:before {
  content: '\e3d7';
}
.li-mails:before {
  content: '\e36c';
}
.li-map-pin-check-inside:before {
  content: '\e614';
}
.li-map-pin-check:before {
  content: '\e613';
}
.li-map-pin-house:before {
  content: '\e620';
}
.li-map-pin-minus-inside:before {
  content: '\e616';
}
.li-map-pin-minus:before {
  content: '\e615';
}
.li-map-pin-off:before {
  content: '\e2a5';
}
.li-map-pin-plus-inside:before {
  content: '\e618';
}
.li-map-pin-plus:before {
  content: '\e617';
}
.li-map-pin-x-inside:before {
  content: '\e61a';
}
.li-map-pin-x:before {
  content: '\e619';
}
.li-map-pin:before {
  content: '\e114';
}
.li-map-pinned:before {
  content: '\e541';
}
.li-map-plus:before {
  content: '\e643';
}
.li-map:before {
  content: '\e113';
}
.li-martini:before {
  content: '\e2e2';
}
.li-maximize-2:before {
  content: '\e116';
}
.li-maximize:before {
  content: '\e115';
}
.li-medal:before {
  content: '\e372';
}
.li-megaphone-off:before {
  content: '\e373';
}
.li-megaphone:before {
  content: '\e234';
}
.li-meh:before {
  content: '\e117';
}
.li-memory-stick:before {
  content: '\e449';
}
.li-menu:before {
  content: '\e118';
}
.li-merge:before {
  content: '\e443';
}
.li-message-circle-code:before {
  content: '\e566';
}
.li-message-circle-dashed:before {
  content: '\e567';
}
.li-message-circle-heart:before {
  content: '\e568';
}
.li-message-circle-more:before {
  content: '\e569';
}
.li-message-circle-off:before {
  content: '\e56a';
}
.li-message-circle-plus:before {
  content: '\e56b';
}
.li-message-circle-question:before {
  content: '\e56c';
}
.li-message-circle-reply:before {
  content: '\e56d';
}
.li-message-circle-warning:before {
  content: '\e56e';
}
.li-message-circle-x:before {
  content: '\e56f';
}
.li-message-circle:before {
  content: '\e119';
}
.li-message-square-code:before {
  content: '\e570';
}
.li-message-square-dashed:before {
  content: '\e40f';
}
.li-message-square-diff:before {
  content: '\e571';
}
.li-message-square-dot:before {
  content: '\e572';
}
.li-message-square-heart:before {
  content: '\e573';
}
.li-message-square-lock:before {
  content: '\e630';
}
.li-message-square-more:before {
  content: '\e574';
}
.li-message-square-off:before {
  content: '\e575';
}
.li-message-square-plus:before {
  content: '\e410';
}
.li-message-square-quote:before {
  content: '\e576';
}
.li-message-square-reply:before {
  content: '\e577';
}
.li-message-square-share:before {
  content: '\e578';
}
.li-message-square-text:before {
  content: '\e579';
}
.li-message-square-warning:before {
  content: '\e57a';
}
.li-message-square-x:before {
  content: '\e57b';
}
.li-message-square:before {
  content: '\e11a';
}
.li-messages-square:before {
  content: '\e411';
}
.li-mic-off:before {
  content: '\e11c';
}
.li-mic-vocal:before {
  content: '\e34c';
}
.li-mic:before {
  content: '\e11b';
}
.li-microchip:before {
  content: '\e61e';
}
.li-microscope:before {
  content: '\e2e3';
}
.li-microwave:before {
  content: '\e37d';
}
.li-milestone:before {
  content: '\e297';
}
.li-milk-off:before {
  content: '\e39d';
}
.li-milk:before {
  content: '\e39c';
}
.li-minimize-2:before {
  content: '\e11e';
}
.li-minimize:before {
  content: '\e11d';
}
.li-minus:before {
  content: '\e11f';
}
.li-monitor-check:before {
  content: '\e486';
}
.li-monitor-cog:before {
  content: '\e607';
}
.li-monitor-dot:before {
  content: '\e487';
}
.li-monitor-down:before {
  content: '\e425';
}
.li-monitor-off:before {
  content: '\e1db';
}
.li-monitor-pause:before {
  content: '\e488';
}
.li-monitor-play:before {
  content: '\e489';
}
.li-monitor-smartphone:before {
  content: '\e3a5';
}
.li-monitor-speaker:before {
  content: '\e20f';
}
.li-monitor-stop:before {
  content: '\e48a';
}
.li-monitor-up:before {
  content: '\e426';
}
.li-monitor-x:before {
  content: '\e48b';
}
.li-monitor:before {
  content: '\e120';
}
.li-moon-star:before {
  content: '\e414';
}
.li-moon:before {
  content: '\e121';
}
.li-mountain-snow:before {
  content: '\e231';
}
.li-mountain:before {
  content: '\e230';
}
.li-mouse-off:before {
  content: '\e5df';
}
.li-mouse-pointer-2:before {
  content: '\e1c2';
}
.li-mouse-pointer-ban:before {
  content: '\e5eb';
}
.li-mouse-pointer-click:before {
  content: '\e123';
}
.li-mouse-pointer:before {
  content: '\e122';
}
.li-mouse:before {
  content: '\e28d';
}
.li-move-3d:before {
  content: '\e2e4';
}
.li-move-diagonal-2:before {
  content: '\e1c4';
}
.li-move-diagonal:before {
  content: '\e1c3';
}
.li-move-down-left:before {
  content: '\e491';
}
.li-move-down-right:before {
  content: '\e492';
}
.li-move-down:before {
  content: '\e490';
}
.li-move-horizontal:before {
  content: '\e1c5';
}
.li-move-left:before {
  content: '\e493';
}
.li-move-right:before {
  content: '\e494';
}
.li-move-up-left:before {
  content: '\e496';
}
.li-move-up-right:before {
  content: '\e497';
}
.li-move-up:before {
  content: '\e495';
}
.li-move-vertical:before {
  content: '\e1c6';
}
.li-move:before {
  content: '\e124';
}
.li-music-2:before {
  content: '\e34d';
}
.li-music-3:before {
  content: '\e34e';
}
.li-music-4:before {
  content: '\e34f';
}
.li-music:before {
  content: '\e125';
}
.li-navigation-2-off:before {
  content: '\e2a6';
}
.li-navigation-2:before {
  content: '\e127';
}
.li-navigation-off:before {
  content: '\e2a7';
}
.li-navigation:before {
  content: '\e126';
}
.li-network:before {
  content: '\e128';
}
.li-newspaper:before {
  content: '\e34b';
}
.li-nfc:before {
  content: '\e3c6';
}
.li-notebook-pen:before {
  content: '\e59a';
}
.li-notebook-tabs:before {
  content: '\e59b';
}
.li-notebook-text:before {
  content: '\e59c';
}
.li-notebook:before {
  content: '\e599';
}
.li-notepad-text-dashed:before {
  content: '\e59e';
}
.li-notepad-text:before {
  content: '\e59d';
}
.li-nut-off:before {
  content: '\e39f';
}
.li-nut:before {
  content: '\e39e';
}
.li-octagon-alert:before {
  content: '\e12a';
}
.li-octagon-minus:before {
  content: '\e62b';
}
.li-octagon-pause:before {
  content: '\e21a';
}
.li-octagon-x:before {
  content: '\e12b';
}
.li-octagon:before {
  content: '\e129';
}
.li-omega:before {
  content: '\e61d';
}
.li-option:before {
  content: '\e1f7';
}
.li-orbit:before {
  content: '\e3ea';
}
.li-origami:before {
  content: '\e5e7';
}
.li-package-2:before {
  content: '\e343';
}
.li-package-check:before {
  content: '\e265';
}
.li-package-minus:before {
  content: '\e266';
}
.li-package-open:before {
  content: '\e2cb';
}
.li-package-plus:before {
  content: '\e267';
}
.li-package-search:before {
  content: '\e268';
}
.li-package-x:before {
  content: '\e269';
}
.li-package:before {
  content: '\e12c';
}
.li-paint-bucket:before {
  content: '\e2e5';
}
.li-paint-roller:before {
  content: '\e5a2';
}
.li-paintbrush-vertical:before {
  content: '\e2e7';
}
.li-paintbrush:before {
  content: '\e2e6';
}
.li-palette:before {
  content: '\e1dc';
}
.li-panel-bottom-close:before {
  content: '\e431';
}
.li-panel-bottom-dashed:before {
  content: '\e432';
}
.li-panel-bottom-open:before {
  content: '\e433';
}
.li-panel-bottom:before {
  content: '\e430';
}
.li-panel-left-close:before {
  content: '\e21b';
}
.li-panel-left-dashed:before {
  content: '\e434';
}
.li-panel-left-open:before {
  content: '\e21c';
}
.li-panel-left:before {
  content: '\e12d';
}
.li-panel-right-close:before {
  content: '\e436';
}
.li-panel-right-dashed:before {
  content: '\e437';
}
.li-panel-right-open:before {
  content: '\e438';
}
.li-panel-right:before {
  content: '\e435';
}
.li-panel-top-close:before {
  content: '\e43a';
}
.li-panel-top-dashed:before {
  content: '\e43b';
}
.li-panel-top-open:before {
  content: '\e43c';
}
.li-panel-top:before {
  content: '\e439';
}
.li-panels-left-bottom:before {
  content: '\e12e';
}
.li-panels-right-bottom:before {
  content: '\e58c';
}
.li-panels-top-left:before {
  content: '\e12f';
}
.li-paperclip:before {
  content: '\e130';
}
.li-parentheses:before {
  content: '\e448';
}
.li-parking-meter:before {
  content: '\e504';
}
.li-party-popper:before {
  content: '\e346';
}
.li-pause:before {
  content: '\e131';
}
.li-paw-print:before {
  content: '\e4f9';
}
.li-pc-case:before {
  content: '\e44a';
}
.li-pen-line:before {
  content: '\e133';
}
.li-pen-off:before {
  content: '\e5f2';
}
.li-pen-tool:before {
  content: '\e134';
}
.li-pen:before {
  content: '\e132';
}
.li-pencil-line:before {
  content: '\e4f4';
}
.li-pencil-off:before {
  content: '\e5f3';
}
.li-pencil-ruler:before {
  content: '\e4f5';
}
.li-pencil:before {
  content: '\e1f8';
}
.li-pentagon:before {
  content: '\e52f';
}
.li-percent:before {
  content: '\e135';
}
.li-person-standing:before {
  content: '\e21d';
}
.li-philippine-peso:before {
  content: '\e608';
}
.li-phone-call:before {
  content: '\e137';
}
.li-phone-forwarded:before {
  content: '\e138';
}
.li-phone-incoming:before {
  content: '\e139';
}
.li-phone-missed:before {
  content: '\e13a';
}
.li-phone-off:before {
  content: '\e13b';
}
.li-phone-outgoing:before {
  content: '\e13c';
}
.li-phone:before {
  content: '\e136';
}
.li-pi:before {
  content: '\e476';
}
.li-piano:before {
  content: '\e565';
}
.li-pickaxe:before {
  content: '\e5ca';
}
.li-picture-in-picture-2:before {
  content: '\e3b2';
}
.li-picture-in-picture:before {
  content: '\e3b1';
}
.li-piggy-bank:before {
  content: '\e13d';
}
.li-pilcrow-left:before {
  content: '\e5e0';
}
.li-pilcrow-right:before {
  content: '\e5e1';
}
.li-pilcrow:before {
  content: '\e3a6';
}
.li-pill-bottle:before {
  content: '\e5ee';
}
.li-pill:before {
  content: '\e3c0';
}
.li-pin-off:before {
  content: '\e2b5';
}
.li-pin:before {
  content: '\e258';
}
.li-pipette:before {
  content: '\e13e';
}
.li-pizza:before {
  content: '\e357';
}
.li-plane-landing:before {
  content: '\e3d0';
}
.li-plane-takeoff:before {
  content: '\e3d1';
}
.li-plane:before {
  content: '\e1dd';
}
.li-play:before {
  content: '\e13f';
}
.li-plug-2:before {
  content: '\e383';
}
.li-plug-zap:before {
  content: '\e460';
}
.li-plug:before {
  content: '\e382';
}
.li-plus:before {
  content: '\e140';
}
.li-pocket-knife:before {
  content: '\e4a4';
}
.li-pocket:before {
  content: '\e141';
}
.li-podcast:before {
  content: '\e1f9';
}
.li-pointer-off:before {
  content: '\e583';
}
.li-pointer:before {
  content: '\e1e7';
}
.li-popcorn:before {
  content: '\e4c2';
}
.li-popsicle:before {
  content: '\e4c3';
}
.li-pound-sterling:before {
  content: '\e142';
}
.li-power-off:before {
  content: '\e208';
}
.li-power:before {
  content: '\e143';
}
.li-presentation:before {
  content: '\e4b2';
}
.li-printer-check:before {
  content: '\e5f9';
}
.li-printer:before {
  content: '\e144';
}
.li-projector:before {
  content: '\e4b3';
}
.li-proportions:before {
  content: '\e5d3';
}
.li-puzzle:before {
  content: '\e29b';
}
.li-pyramid:before {
  content: '\e530';
}
.li-qr-code:before {
  content: '\e1de';
}
.li-quote:before {
  content: '\e238';
}
.li-rabbit:before {
  content: '\e4fa';
}
.li-radar:before {
  content: '\e49b';
}
.li-radiation:before {
  content: '\e446';
}
.li-radical:before {
  content: '\e5c6';
}
.li-radio-receiver:before {
  content: '\e1fa';
}
.li-radio-tower:before {
  content: '\e408';
}
.li-radio:before {
  content: '\e145';
}
.li-radius:before {
  content: '\e531';
}
.li-rail-symbol:before {
  content: '\e505';
}
.li-rainbow:before {
  content: '\e4c6';
}
.li-rat:before {
  content: '\e3ef';
}
.li-ratio:before {
  content: '\e4ec';
}
.li-receipt-cent:before {
  content: '\e5a9';
}
.li-receipt-euro:before {
  content: '\e5aa';
}
.li-receipt-indian-rupee:before {
  content: '\e5ab';
}
.li-receipt-japanese-yen:before {
  content: '\e5ac';
}
.li-receipt-pound-sterling:before {
  content: '\e5ad';
}
.li-receipt-russian-ruble:before {
  content: '\e5ae';
}
.li-receipt-swiss-franc:before {
  content: '\e5af';
}
.li-receipt-text:before {
  content: '\e5b0';
}
.li-receipt:before {
  content: '\e3d6';
}
.li-rectangle-ellipsis:before {
  content: '\e21e';
}
.li-rectangle-horizontal:before {
  content: '\e379';
}
.li-rectangle-vertical:before {
  content: '\e37a';
}
.li-recycle:before {
  content: '\e2e8';
}
.li-redo-2:before {
  content: '\e29f';
}
.li-redo-dot:before {
  content: '\e454';
}
.li-redo:before {
  content: '\e146';
}
.li-refresh-ccw-dot:before {
  content: '\e4b6';
}
.li-refresh-ccw:before {
  content: '\e147';
}
.li-refresh-cw-off:before {
  content: '\e49c';
}
.li-refresh-cw:before {
  content: '\e148';
}
.li-refrigerator:before {
  content: '\e37e';
}
.li-regex:before {
  content: '\e1fb';
}
.li-remove-formatting:before {
  content: '\e3b6';
}
.li-repeat-1:before {
  content: '\e1fc';
}
.li-repeat-2:before {
  content: '\e415';
}
.li-repeat:before {
  content: '\e149';
}
.li-replace-all:before {
  content: '\e3df';
}
.li-replace:before {
  content: '\e3de';
}
.li-reply-all:before {
  content: '\e22a';
}
.li-reply:before {
  content: '\e229';
}
.li-rewind:before {
  content: '\e14a';
}
.li-ribbon:before {
  content: '\e55c';
}
.li-rocket:before {
  content: '\e285';
}
.li-rocking-chair:before {
  content: '\e232';
}
.li-roller-coaster:before {
  content: '\e484';
}
.li-rotate-3d:before {
  content: '\e2e9';
}
.li-rotate-ccw-square:before {
  content: '\e5d4';
}
.li-rotate-ccw:before {
  content: '\e14b';
}
.li-rotate-cw-square:before {
  content: '\e5d5';
}
.li-rotate-cw:before {
  content: '\e14c';
}
.li-route-off:before {
  content: '\e543';
}
.li-route:before {
  content: '\e542';
}
.li-router:before {
  content: '\e3c2';
}
.li-rows-2:before {
  content: '\e43d';
}
.li-rows-3:before {
  content: '\e58e';
}
.li-rows-4:before {
  content: '\e58f';
}
.li-rss:before {
  content: '\e14d';
}
.li-ruler:before {
  content: '\e14e';
}
.li-russian-ruble:before {
  content: '\e14f';
}
.li-sailboat:before {
  content: '\e381';
}
.li-salad:before {
  content: '\e3ab';
}
.li-sandwich:before {
  content: '\e3ac';
}
.li-satellite-dish:before {
  content: '\e44c';
}
.li-satellite:before {
  content: '\e44b';
}
.li-save-all:before {
  content: '\e413';
}
.li-save-off:before {
  content: '\e5f7';
}
.li-save:before {
  content: '\e150';
}
.li-scale-3d:before {
  content: '\e2ea';
}
.li-scale:before {
  content: '\e211';
}
.li-scaling:before {
  content: '\e2eb';
}
.li-scan-barcode:before {
  content: '\e539';
}
.li-scan-eye:before {
  content: '\e53a';
}
.li-scan-face:before {
  content: '\e374';
}
.li-scan-heart:before {
  content: '\e63e';
}
.li-scan-line:before {
  content: '\e257';
}
.li-scan-qr-code:before {
  content: '\e5fa';
}
.li-scan-search:before {
  content: '\e53b';
}
.li-scan-text:before {
  content: '\e53c';
}
.li-scan:before {
  content: '\e256';
}
.li-school:before {
  content: '\e3e6';
}
.li-scissors-line-dashed:before {
  content: '\e4ed';
}
.li-scissors:before {
  content: '\e151';
}
.li-screen-share-off:before {
  content: '\e153';
}
.li-screen-share:before {
  content: '\e152';
}
.li-scroll-text:before {
  content: '\e463';
}
.li-scroll:before {
  content: '\e2ec';
}
.li-search-check:before {
  content: '\e4ae';
}
.li-search-code:before {
  content: '\e4af';
}
.li-search-slash:before {
  content: '\e4b0';
}
.li-search-x:before {
  content: '\e4b1';
}
.li-search:before {
  content: '\e154';
}
.li-section:before {
  content: '\e5ec';
}
.li-send-horizontal:before {
  content: '\e4f6';
}
.li-send-to-back:before {
  content: '\e4f7';
}
.li-send:before {
  content: '\e155';
}
.li-separator-horizontal:before {
  content: '\e1c7';
}
.li-separator-vertical:before {
  content: '\e1c8';
}
.li-server-cog:before {
  content: '\e344';
}
.li-server-crash:before {
  content: '\e1e8';
}
.li-server-off:before {
  content: '\e1e9';
}
.li-server:before {
  content: '\e156';
}
.li-settings-2:before {
  content: '\e244';
}
.li-settings:before {
  content: '\e157';
}
.li-shapes:before {
  content: '\e4b7';
}
.li-share-2:before {
  content: '\e159';
}
.li-share:before {
  content: '\e158';
}
.li-sheet:before {
  content: '\e15a';
}
.li-shell:before {
  content: '\e4fb';
}
.li-shield-alert:before {
  content: '\e1fd';
}
.li-shield-ban:before {
  content: '\e15c';
}
.li-shield-check:before {
  content: '\e1fe';
}
.li-shield-ellipsis:before {
  content: '\e51a';
}
.li-shield-half:before {
  content: '\e51b';
}
.li-shield-minus:before {
  content: '\e51c';
}
.li-shield-off:before {
  content: '\e15d';
}
.li-shield-plus:before {
  content: '\e51d';
}
.li-shield-question:before {
  content: '\e412';
}
.li-shield-x:before {
  content: '\e1ff';
}
.li-shield:before {
  content: '\e15b';
}
.li-ship-wheel:before {
  content: '\e506';
}
.li-ship:before {
  content: '\e3bd';
}
.li-shirt:before {
  content: '\e1c9';
}
.li-shopping-bag:before {
  content: '\e15e';
}
.li-shopping-basket:before {
  content: '\e4ee';
}
.li-shopping-cart:before {
  content: '\e15f';
}
.li-shovel:before {
  content: '\e160';
}
.li-shower-head:before {
  content: '\e37f';
}
.li-shrink:before {
  content: '\e21f';
}
.li-shrub:before {
  content: '\e2ed';
}
.li-shuffle:before {
  content: '\e161';
}
.li-sigma:before {
  content: '\e200';
}
.li-signal-high:before {
  content: '\e25f';
}
.li-signal-low:before {
  content: '\e260';
}
.li-signal-medium:before {
  content: '\e261';
}
.li-signal-zero:before {
  content: '\e262';
}
.li-signal:before {
  content: '\e25e';
}
.li-signature:before {
  content: '\e5f6';
}
.li-signpost-big:before {
  content: '\e545';
}
.li-signpost:before {
  content: '\e544';
}
.li-siren:before {
  content: '\e2ee';
}
.li-skip-back:before {
  content: '\e162';
}
.li-skip-forward:before {
  content: '\e163';
}
.li-skull:before {
  content: '\e220';
}
.li-slack:before {
  content: '\e164';
}
.li-slash:before {
  content: '\e521';
}
.li-slice:before {
  content: '\e2ef';
}
.li-sliders-horizontal:before {
  content: '\e299';
}
.li-sliders-vertical:before {
  content: '\e165';
}
.li-smartphone-charging:before {
  content: '\e22d';
}
.li-smartphone-nfc:before {
  content: '\e3c7';
}
.li-smartphone:before {
  content: '\e166';
}
.li-smile-plus:before {
  content: '\e300';
}
.li-smile:before {
  content: '\e167';
}
.li-snail:before {
  content: '\e4fc';
}
.li-snowflake:before {
  content: '\e168';
}
.li-sofa:before {
  content: '\e2c3';
}
.li-soup:before {
  content: '\e3ad';
}
.li-space:before {
  content: '\e3e0';
}
.li-spade:before {
  content: '\e49d';
}
.li-sparkle:before {
  content: '\e482';
}
.li-sparkles:before {
  content: '\e416';
}
.li-speaker:before {
  content: '\e169';
}
.li-speech:before {
  content: '\e522';
}
.li-spell-check-2:before {
  content: '\e49f';
}
.li-spell-check:before {
  content: '\e49e';
}
.li-spline:before {
  content: '\e38e';
}
.li-split:before {
  content: '\e444';
}
.li-spray-can:before {
  content: '\e499';
}
.li-sprout:before {
  content: '\e1ea';
}
.li-square-activity:before {
  content: '\e4b8';
}
.li-square-arrow-down-left:before {
  content: '\e4b9';
}
.li-square-arrow-down-right:before {
  content: '\e4ba';
}
.li-square-arrow-down:before {
  content: '\e42b';
}
.li-square-arrow-left:before {
  content: '\e42c';
}
.li-square-arrow-out-down-left:before {
  content: '\e5a5';
}
.li-square-arrow-out-down-right:before {
  content: '\e5a6';
}
.li-square-arrow-out-up-left:before {
  content: '\e5a7';
}
.li-square-arrow-out-up-right:before {
  content: '\e5a8';
}
.li-square-arrow-right:before {
  content: '\e42d';
}
.li-square-arrow-up-left:before {
  content: '\e4bb';
}
.li-square-arrow-up-right:before {
  content: '\e4bc';
}
.li-square-arrow-up:before {
  content: '\e42e';
}
.li-square-asterisk:before {
  content: '\e16b';
}
.li-square-bottom-dashed-scissors:before {
  content: '\e4ef';
}
.li-square-chart-gantt:before {
  content: '\e16c';
}
.li-square-check-big:before {
  content: '\e16d';
}
.li-square-check:before {
  content: '\e55d';
}
.li-square-chevron-down:before {
  content: '\e3d2';
}
.li-square-chevron-left:before {
  content: '\e3d3';
}
.li-square-chevron-right:before {
  content: '\e3d4';
}
.li-square-chevron-up:before {
  content: '\e3d5';
}
.li-square-code:before {
  content: '\e16e';
}
.li-square-dashed-bottom-code:before {
  content: '\e4c5';
}
.li-square-dashed-bottom:before {
  content: '\e4c4';
}
.li-square-dashed-kanban:before {
  content: '\e16f';
}
.li-square-dashed-mouse-pointer:before {
  content: '\e50d';
}
.li-square-dashed:before {
  content: '\e1ca';
}
.li-square-divide:before {
  content: '\e170';
}
.li-square-dot:before {
  content: '\e171';
}
.li-square-equal:before {
  content: '\e172';
}
.li-square-function:before {
  content: '\e22c';
}
.li-square-kanban:before {
  content: '\e173';
}
.li-square-library:before {
  content: '\e553';
}
.li-square-m:before {
  content: '\e507';
}
.li-square-menu:before {
  content: '\e457';
}
.li-square-minus:before {
  content: '\e174';
}
.li-square-mouse-pointer:before {
  content: '\e201';
}
.li-square-parking-off:before {
  content: '\e3cf';
}
.li-square-parking:before {
  content: '\e3ce';
}
.li-square-pen:before {
  content: '\e175';
}
.li-square-percent:before {
  content: '\e520';
}
.li-square-pi:before {
  content: '\e48c';
}
.li-square-pilcrow:before {
  content: '\e48f';
}
.li-square-play:before {
  content: '\e485';
}
.li-square-plus:before {
  content: '\e176';
}
.li-square-power:before {
  content: '\e555';
}
.li-square-radical:before {
  content: '\e5c7';
}
.li-square-scissors:before {
  content: '\e4f0';
}
.li-square-sigma:before {
  content: '\e48d';
}
.li-square-slash:before {
  content: '\e177';
}
.li-square-split-horizontal:before {
  content: '\e3b9';
}
.li-square-split-vertical:before {
  content: '\e3ba';
}
.li-square-square:before {
  content: '\e612';
}
.li-square-stack:before {
  content: '\e4a6';
}
.li-square-terminal:before {
  content: '\e209';
}
.li-square-user-round:before {
  content: '\e46a';
}
.li-square-user:before {
  content: '\e469';
}
.li-square-x:before {
  content: '\e178';
}
.li-square:before {
  content: '\e16a';
}
.li-squircle:before {
  content: '\e57e';
}
.li-squirrel:before {
  content: '\e4a3';
}
.li-stamp:before {
  content: '\e3be';
}
.li-star-half:before {
  content: '\e20a';
}
.li-star-off:before {
  content: '\e2af';
}
.li-star:before {
  content: '\e179';
}
.li-step-back:before {
  content: '\e3ec';
}
.li-step-forward:before {
  content: '\e3ed';
}
.li-stethoscope:before {
  content: '\e2f0';
}
.li-sticker:before {
  content: '\e301';
}
.li-sticky-note:before {
  content: '\e302';
}
.li-store:before {
  content: '\e3e7';
}
.li-stretch-horizontal:before {
  content: '\e27b';
}
.li-stretch-vertical:before {
  content: '\e27c';
}
.li-strikethrough:before {
  content: '\e17a';
}
.li-subscript:before {
  content: '\e25b';
}
.li-sun-dim:before {
  content: '\e298';
}
.li-sun-medium:before {
  content: '\e2b0';
}
.li-sun-moon:before {
  content: '\e2b1';
}
.li-sun-snow:before {
  content: '\e375';
}
.li-sun:before {
  content: '\e17b';
}
.li-sunrise:before {
  content: '\e17c';
}
.li-sunset:before {
  content: '\e17d';
}
.li-superscript:before {
  content: '\e25d';
}
.li-swatch-book:before {
  content: '\e5a3';
}
.li-swiss-franc:before {
  content: '\e17e';
}
.li-switch-camera:before {
  content: '\e17f';
}
.li-sword:before {
  content: '\e2b2';
}
.li-swords:before {
  content: '\e2b3';
}
.li-syringe:before {
  content: '\e2f1';
}
.li-table-2:before {
  content: '\e2f8';
}
.li-table-cells-merge:before {
  content: '\e5cb';
}
.li-table-cells-split:before {
  content: '\e5cc';
}
.li-table-columns-split:before {
  content: '\e5cd';
}
.li-table-of-contents:before {
  content: '\e622';
}
.li-table-properties:before {
  content: '\e4df';
}
.li-table-rows-split:before {
  content: '\e5ce';
}
.li-table:before {
  content: '\e180';
}
.li-tablet-smartphone:before {
  content: '\e50e';
}
.li-tablet:before {
  content: '\e181';
}
.li-tablets:before {
  content: '\e3c1';
}
.li-tag:before {
  content: '\e182';
}
.li-tags:before {
  content: '\e35f';
}
.li-tally-1:before {
  content: '\e4da';
}
.li-tally-2:before {
  content: '\e4db';
}
.li-tally-3:before {
  content: '\e4dc';
}
.li-tally-4:before {
  content: '\e4dd';
}
.li-tally-5:before {
  content: '\e4de';
}
.li-tangent:before {
  content: '\e532';
}
.li-target:before {
  content: '\e183';
}
.li-telescope:before {
  content: '\e5c9';
}
.li-tent-tree:before {
  content: '\e53f';
}
.li-tent:before {
  content: '\e226';
}
.li-terminal:before {
  content: '\e184';
}
.li-test-tube-diagonal:before {
  content: '\e40a';
}
.li-test-tube:before {
  content: '\e409';
}
.li-test-tubes:before {
  content: '\e40b';
}
.li-text-cursor-input:before {
  content: '\e264';
}
.li-text-cursor:before {
  content: '\e263';
}
.li-text-quote:before {
  content: '\e4a2';
}
.li-text-search:before {
  content: '\e5b1';
}
.li-text-select:before {
  content: '\e3e1';
}
.li-text:before {
  content: '\e3ee';
}
.li-theater:before {
  content: '\e526';
}
.li-thermometer-snowflake:before {
  content: '\e186';
}
.li-thermometer-sun:before {
  content: '\e187';
}
.li-thermometer:before {
  content: '\e185';
}
.li-thumbs-down:before {
  content: '\e188';
}
.li-thumbs-up:before {
  content: '\e189';
}
.li-ticket-check:before {
  content: '\e5b2';
}
.li-ticket-minus:before {
  content: '\e5b3';
}
.li-ticket-percent:before {
  content: '\e5b4';
}
.li-ticket-plus:before {
  content: '\e5b5';
}
.li-ticket-slash:before {
  content: '\e5b6';
}
.li-ticket-x:before {
  content: '\e5b7';
}
.li-ticket:before {
  content: '\e20e';
}
.li-tickets-plane:before {
  content: '\e627';
}
.li-tickets:before {
  content: '\e626';
}
.li-timer-off:before {
  content: '\e248';
}
.li-timer-reset:before {
  content: '\e235';
}
.li-timer:before {
  content: '\e1df';
}
.li-toggle-left:before {
  content: '\e18a';
}
.li-toggle-right:before {
  content: '\e18b';
}
.li-toilet:before {
  content: '\e639';
}
.li-tornado:before {
  content: '\e217';
}
.li-torus:before {
  content: '\e533';
}
.li-touchpad-off:before {
  content: '\e44e';
}
.li-touchpad:before {
  content: '\e44d';
}
.li-tower-control:before {
  content: '\e3bf';
}
.li-toy-brick:before {
  content: '\e34a';
}
.li-tractor:before {
  content: '\e508';
}
.li-traffic-cone:before {
  content: '\e509';
}
.li-train-front-tunnel:before {
  content: '\e50b';
}
.li-train-front:before {
  content: '\e50a';
}
.li-train-track:before {
  content: '\e50c';
}
.li-tram-front:before {
  content: '\e2a8';
}
.li-trash-2:before {
  content: '\e18d';
}
.li-trash:before {
  content: '\e18c';
}
.li-tree-deciduous:before {
  content: '\e2f2';
}
.li-tree-palm:before {
  content: '\e280';
}
.li-tree-pine:before {
  content: '\e2f3';
}
.li-trees:before {
  content: '\e2f4';
}
.li-trello:before {
  content: '\e18e';
}
.li-trending-down:before {
  content: '\e18f';
}
.li-trending-up-down:before {
  content: '\e629';
}
.li-trending-up:before {
  content: '\e190';
}
.li-triangle-alert:before {
  content: '\e192';
}
.li-triangle-dashed:before {
  content: '\e641';
}
.li-triangle-right:before {
  content: '\e4f1';
}
.li-triangle:before {
  content: '\e191';
}
.li-trophy:before {
  content: '\e376';
}
.li-truck:before {
  content: '\e193';
}
.li-turtle:before {
  content: '\e4fd';
}
.li-tv-minimal-play:before {
  content: '\e5f0';
}
.li-tv-minimal:before {
  content: '\e202';
}
.li-tv:before {
  content: '\e194';
}
.li-twitch:before {
  content: '\e195';
}
.li-twitter:before {
  content: '\e196';
}
.li-type-outline:before {
  content: '\e606';
}
.li-type:before {
  content: '\e197';
}
.li-umbrella-off:before {
  content: '\e547';
}
.li-umbrella:before {
  content: '\e198';
}
.li-underline:before {
  content: '\e199';
}
.li-undo-2:before {
  content: '\e2a0';
}
.li-undo-dot:before {
  content: '\e455';
}
.li-undo:before {
  content: '\e19a';
}
.li-unfold-horizontal:before {
  content: '\e441';
}
.li-unfold-vertical:before {
  content: '\e442';
}
.li-ungroup:before {
  content: '\e46b';
}
.li-university:before {
  content: '\e3e8';
}
.li-unlink-2:before {
  content: '\e19c';
}
.li-unlink:before {
  content: '\e19b';
}
.li-unplug:before {
  content: '\e461';
}
.li-upload:before {
  content: '\e19d';
}
.li-usb:before {
  content: '\e359';
}
.li-user-check:before {
  content: '\e19f';
}
.li-user-cog:before {
  content: '\e345';
}
.li-user-minus:before {
  content: '\e1a0';
}
.li-user-pen:before {
  content: '\e600';
}
.li-user-plus:before {
  content: '\e1a1';
}
.li-user-round-check:before {
  content: '\e46d';
}
.li-user-round-cog:before {
  content: '\e46e';
}
.li-user-round-minus:before {
  content: '\e46f';
}
.li-user-round-pen:before {
  content: '\e601';
}
.li-user-round-plus:before {
  content: '\e470';
}
.li-user-round-search:before {
  content: '\e57c';
}
.li-user-round-x:before {
  content: '\e471';
}
.li-user-round:before {
  content: '\e46c';
}
.li-user-search:before {
  content: '\e57d';
}
.li-user-x:before {
  content: '\e1a2';
}
.li-user:before {
  content: '\e19e';
}
.li-users-round:before {
  content: '\e472';
}
.li-users:before {
  content: '\e1a3';
}
.li-utensils-crossed:before {
  content: '\e2f6';
}
.li-utensils:before {
  content: '\e2f5';
}
.li-utility-pole:before {
  content: '\e3c5';
}
.li-variable:before {
  content: '\e477';
}
.li-vault:before {
  content: '\e593';
}
.li-vegan:before {
  content: '\e3a0';
}
.li-venetian-mask:before {
  content: '\e2a9';
}
.li-vibrate-off:before {
  content: '\e29c';
}
.li-vibrate:before {
  content: '\e222';
}
.li-video-off:before {
  content: '\e1a5';
}
.li-video:before {
  content: '\e1a4';
}
.li-videotape:before {
  content: '\e4cf';
}
.li-view:before {
  content: '\e1a6';
}
.li-voicemail:before {
  content: '\e1a7';
}
.li-volleyball:before {
  content: '\e633';
}
.li-volume-1:before {
  content: '\e1a9';
}
.li-volume-2:before {
  content: '\e1aa';
}
.li-volume-off:before {
  content: '\e62a';
}
.li-volume-x:before {
  content: '\e1ab';
}
.li-volume:before {
  content: '\e1a8';
}
.li-vote:before {
  content: '\e3b0';
}
.li-wallet-cards:before {
  content: '\e4d0';
}
.li-wallet-minimal:before {
  content: '\e4d1';
}
.li-wallet:before {
  content: '\e203';
}
.li-wallpaper:before {
  content: '\e44f';
}
.li-wand-sparkles:before {
  content: '\e35a';
}
.li-wand:before {
  content: '\e245';
}
.li-warehouse:before {
  content: '\e3e9';
}
.li-washing-machine:before {
  content: '\e594';
}
.li-watch:before {
  content: '\e1ac';
}
.li-waves-ladder:before {
  content: '\e63f';
}
.li-waves:before {
  content: '\e282';
}
.li-waypoints:before {
  content: '\e546';
}
.li-webcam:before {
  content: '\e204';
}
.li-webhook-off:before {
  content: '\e5bb';
}
.li-webhook:before {
  content: '\e377';
}
.li-weight:before {
  content: '\e534';
}
.li-wheat-off:before {
  content: '\e3a2';
}
.li-wheat:before {
  content: '\e3a1';
}
.li-whole-word:before {
  content: '\e3e2';
}
.li-wifi-high:before {
  content: '\e5fb';
}
.li-wifi-low:before {
  content: '\e5fc';
}
.li-wifi-off:before {
  content: '\e1ae';
}
.li-wifi-zero:before {
  content: '\e5fd';
}
.li-wifi:before {
  content: '\e1ad';
}
.li-wind-arrow-down:before {
  content: '\e635';
}
.li-wind:before {
  content: '\e1af';
}
.li-wine-off:before {
  content: '\e3a3';
}
.li-wine:before {
  content: '\e2f7';
}
.li-workflow:before {
  content: '\e429';
}
.li-worm:before {
  content: '\e5de';
}
.li-wrap-text:before {
  content: '\e247';
}
.li-wrench:before {
  content: '\e1b0';
}
.li-x:before {
  content: '\e1b1';
}
.li-youtube:before {
  content: '\e1b2';
}
.li-zap-off:before {
  content: '\e1b4';
}
.li-zap:before {
  content: '\e1b3';
}
.li-zoom-in:before {
  content: '\e1b5';
}
.li-zoom-out:before {
  content: '\e1b6';
}
/* Tokens */
:root {
  /* Color HSLs
    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
  */

  /* Basic Colors */

  /**
  * @tokens Basic Colors
  * @presenter Color
  */
  --op-color-white: hsl(0deg 100% 100%);
  --op-color-black: hsl(0deg 0% 0%);

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-h: 216;
  --op-color-primary-s: 58%;
  --op-color-primary-l: 48%;

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-h: var(--op-color-primary-h);
  --op-color-neutral-s: 4%;
  --op-color-neutral-l: var(--op-color-primary-l);

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */
  --op-color-alerts-warning-h: 47;
  --op-color-alerts-warning-s: 100%;
  --op-color-alerts-warning-l: 61%;

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 99%;
  --op-color-alerts-danger-l: 76%;

  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */
  --op-color-alerts-info-h: 216;
  --op-color-alerts-info-s: 58%;
  --op-color-alerts-info-l: 48%;

  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */
  --op-color-alerts-notice-h: 130;
  --op-color-alerts-notice-s: 61%;
  --op-color-alerts-notice-l: 64%;

  /**
  * @tokens Opacities
  * @presenter Opacity
  */
  --op-opacity-none: 0;
  --op-opacity-overlay: 0.2;
  --op-opacity-disabled: 0.4;
  --op-opacity-half: 0.5;
  --op-opacity-full: 1;

  /*
    Breakpoints
    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
    https://drafts.csswg.org/css-env-1/
    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

    Here is a list of breakpoints used throughout Optics:
  */

  /**
  * @tokens Breakpoints
  * @presenter Spacing
  */
  --op-breakpoint-x-small: 512px; /* vertical phone */
  --op-breakpoint-small: 768px; /* vertical ipad */
  --op-breakpoint-medium: 1024px; /* landscape ipad */
  --op-breakpoint-large: 1280px; /* small laptop */
  --op-breakpoint-x-large: 1440px; /* medium laptop */

  /* Border */

  /**
  * @tokens Border Radius
  * @presenter BorderRadius
  */
  --op-radius-small: 2px;
  --op-radius-medium: 4px;
  --op-radius-large: 8px;
  --op-radius-x-large: 12px;
  --op-radius-2x-large: 16px;
  --op-radius-circle: 50%;
  --op-radius-pill: 9999px;

  /**
  * @tokens Border Width
  * @presenter Spacing
  */
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;

  /**
  * @tokens Border Color
  * @presenter Color
  */
  --op-color-border: var(--op-color-neutral-plus-five);

  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */

  /**
  * @tokens Border Shadow
  * @presenter Shadow
  */
  --op-border-none: 0 0 0 0;
  --op-border-all: 0 0 0 var(--op-border-width);
  --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
  --op-border-right: var(--op-border-width) 0 0 0;
  --op-border-bottom: 0 var(--op-border-width) 0 0;
  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);

  /* Font */

  /**
  * @tokens Font Scale
  * @presenter FontSize
  */
  --op-font-scale-unit: 1rem; /* 10px; */
  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
  --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
  --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
  --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */

  /**
  * @tokens Font Weight
  * @presenter FontWeight
  */
  --op-font-weight-thin: 100;
  --op-font-weight-extra-light: 200;
  --op-font-weight-light: 300;
  --op-font-weight-normal: 400;
  --op-font-weight-medium: 500;
  --op-font-weight-semi-bold: 600;
  --op-font-weight-bold: 700;
  --op-font-weight-extra-bold: 800;
  --op-font-weight-black: 900;

  /**
  * @tokens Font Family
  * @presenter FontFamily
  */
  --op-font-family: 'Noto Sans', sans-serif;
  --op-font-family-alt: 'Noto Serif', serif;

  /* Text */

  /**
  * @tokens Line Height
  * @presenter LineHeight
  */
  --op-line-height-none: 0;
  --op-line-height-densest: 1;
  --op-line-height-denser: 1.15;
  --op-line-height-dense: 1.3;
  --op-line-height-base: 1.5;
  --op-line-height-loose: 1.6;
  --op-line-height-looser: 1.7;
  --op-line-height-loosest: 1.8;

  /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
  --op-letter-spacing-navigation: 0.01rem;
  --op-letter-spacing-label: 0.04rem;

  /* Transitions and Animations */

  /**
  * @tokens Transition
  */
  --op-transition-accordion: rotate 120ms ease-in;
  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
  --op-transition-input: all 120ms ease-in;
  --op-transition-sidebar: all 200ms ease-in-out;
  --op-transition-modal-time: 300ms;
  --op-transition-modal: all var(--op-transition-modal-time) ease-in;
  --op-transition-panel: right 400ms ease-in;
  --op-transition-tooltip: all 300ms ease-in 300ms;

  /**
  * @tokens Animation
  * @presenter Animation
  */
  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;

  /* Encoded Images */

  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow-width: calc(
    1.2 * var(--op-space-scale-unit)
  ); /* 12px No way to string interpolate */

  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');

  /* Spacing */

  /**
  * @tokens Size Scale
  * @presenter Spacing
  */
  --op-size-unit: 0.4rem; /* 4px */

  /**
  * @tokens Space Scale
  * @presenter Spacing
  */
  --op-space-scale-unit: 1rem; /* 10px; */
  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
  --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
  --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */

  /* Shadows */

  /**
  * @tokens Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);

  /* Z Index */

  /**
  * @tokens Z-Index
  */
  --op-z-index-header: 500;
  --op-z-index-footer: 500;
  --op-z-index-sidebar: 700;
  --op-z-index-dialog: 800;
  --op-z-index-dialog-backdrop: 801;
  --op-z-index-dialog-content: 802;
  --op-z-index-dropdown: 900;
  --op-z-index-alert-group: 950;
  --op-z-index-tooltip: 1000;

  /* Inputs */

  /*
    This should follow multiples of 4
    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
  */

  /**
  * @tokens Input Heights
  * @presenter Spacing
  */
  --op-input-height-small: 2.8rem; /* 28px */
  --op-input-height-medium: 3.6rem; /* 36px */
  --op-input-height-large: 4rem; /* 40px */
  --op-input-height-x-large: 8.4rem; /* 84px */

  /**
  * @tokens Input Focus
  * @presenter Shadow
  */
  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
  --op-input-focus-primary:
    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --op-input-focus-neutral:
    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
  --op-input-focus-danger:
    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
  --op-input-focus-warning:
    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
  --op-input-focus-info:
    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
  --op-input-focus-notice:
    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
}
/* Animations */
@keyframes rm-slide-in-out-flash {
  /*
    If an duration of 5s is set:
    Start off the Screen
  */
  0% {
    inset-inline-end: -100%;
  }

  /* Animate onto the screen for 0.5s */
  10% {
    inset-inline-end: var(--op-space-large);
  }

  /* Stay on the screen for 3s */
  70% {
    inset-inline-end: var(--op-space-large);
  }

  /* Animate off the screen for 1.5s */
  100% {
    inset-inline-end: -100%;
  }
}
:root {
  /* Enable light and dark mode switching */
  color-scheme: light dark;

  /*
    Semantic Scales: plus adds luminosity, minus removes luminosity
    This borrows from the photography concept of Aperture f-stops.
    https://www.adobe.com/creativecloud/photography/discover/f-stop.html
  */

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));

  /* Main Scale */
  --op-color-primary-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
  );
  --op-color-primary-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
  );
  --op-color-primary-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
  );
  --op-color-primary-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
  );
  --op-color-primary-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
  );
  --op-color-primary-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
  );
  --op-color-primary-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
  );
  --op-color-primary-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
  );
  --op-color-primary-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
  );
  --op-color-primary-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
  );
  --op-color-primary-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
  );
  --op-color-primary-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );

  /* On Scale */
  --op-color-primary-on-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-plus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
  );
  --op-color-primary-on-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-on-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
  );
  --op-color-primary-on-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-base-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
  );
  --op-color-primary-on-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
  );
  --op-color-primary-on-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-on-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-on-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
  );
  --op-color-primary-on-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
  );
  --op-color-primary-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-on-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
  );
  --op-color-primary-on-minus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));

  /* Main Scale */
  --op-color-neutral-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
  );
  --op-color-neutral-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
  );
  --op-color-neutral-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
  );
  --op-color-neutral-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
  );
  --op-color-neutral-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
  );
  --op-color-neutral-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
  );
  --op-color-neutral-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
  );
  --op-color-neutral-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
  );
  --op-color-neutral-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
  );
  --op-color-neutral-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
  );
  --op-color-neutral-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );

  /* On Scale */
  --op-color-neutral-on-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
  );
  --op-color-neutral-on-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
  );
  --op-color-neutral-on-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
  );
  --op-color-neutral-on-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-base-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
  );
  --op-color-neutral-on-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
  );
  --op-color-neutral-on-minus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
  );
  --op-color-neutral-on-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
  );
  --op-color-neutral-on-minus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-on-minus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-on-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-on-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-on-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
  );

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));

  /* Main Scale */
  --op-color-alerts-warning-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
  );
  --op-color-alerts-warning-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
  );
  --op-color-alerts-warning-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
  );
  --op-color-alerts-warning-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
  );
  --op-color-alerts-warning-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
  );
  --op-color-alerts-warning-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
  );
  --op-color-alerts-warning-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
  );
  --op-color-alerts-warning-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
  );
  --op-color-alerts-warning-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-warning-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
  );
  --op-color-alerts-warning-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
  );
  --op-color-alerts-warning-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
  );
  --op-color-alerts-warning-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
  );
  --op-color-alerts-warning-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
  );
  --op-color-alerts-warning-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
  );
  --op-color-alerts-warning-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));

  /* Main Scale */
  --op-color-alerts-danger-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
  );
  --op-color-alerts-danger-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
  );
  --op-color-alerts-danger-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
  );
  --op-color-alerts-danger-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
  );
  --op-color-alerts-danger-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
  );
  --op-color-alerts-danger-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
  );
  --op-color-alerts-danger-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
  );
  --op-color-alerts-danger-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
  );
  --op-color-alerts-danger-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
  );
  --op-color-alerts-danger-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
  );
  --op-color-alerts-danger-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-danger-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );
  --op-color-alerts-danger-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
  );
  --op-color-alerts-danger-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
  );
  --op-color-alerts-danger-on-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
  );
  --op-color-alerts-danger-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
  );
  --op-color-alerts-danger-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
  );
  --op-color-alerts-danger-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
  );
  --op-color-alerts-danger-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );

  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));

  /* Main Scale */
  --op-color-alerts-info-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
  );
  --op-color-alerts-info-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
  );
  --op-color-alerts-info-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
  );
  --op-color-alerts-info-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
  );
  --op-color-alerts-info-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );
  --op-color-alerts-info-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
  );
  --op-color-alerts-info-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
  );
  --op-color-alerts-info-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
  );
  --op-color-alerts-info-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
  );
  --op-color-alerts-info-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
  );
  --op-color-alerts-info-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-info-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );
  --op-color-alerts-info-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
  );
  --op-color-alerts-info-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
  );
  --op-color-alerts-info-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
  );
  --op-color-alerts-info-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
  );
  --op-color-alerts-info-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
  );
  --op-color-alerts-info-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
  );
  --op-color-alerts-info-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );

  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));

  /* Main Scale */
  --op-color-alerts-notice-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
  );
  --op-color-alerts-notice-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
  );
  --op-color-alerts-notice-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
  );
  --op-color-alerts-notice-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
  );
  --op-color-alerts-notice-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );
  --op-color-alerts-notice-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
  );
  --op-color-alerts-notice-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
  );
  --op-color-alerts-notice-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
  );
  --op-color-alerts-notice-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
  );
  --op-color-alerts-notice-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
  );
  --op-color-alerts-notice-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
  );
  --op-color-alerts-notice-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-notice-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );
  --op-color-alerts-notice-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
  );
  --op-color-alerts-notice-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
  );
  --op-color-alerts-notice-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
  );
  --op-color-alerts-notice-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
  );
  --op-color-alerts-notice-on-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
  );
  --op-color-alerts-notice-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
  );
  --op-color-alerts-notice-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
  );
  --op-color-alerts-notice-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
  );
  --op-color-alerts-notice-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
  );
  --op-color-alerts-notice-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
  );
  --op-color-alerts-notice-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
  );
  --op-color-alerts-notice-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );

  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-color-background: var(--op-color-neutral-plus-eight);
  --op-color-on-background: var(--op-color-neutral-on-plus-eight);
  --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
}
/* Force Light Mode */
:root[data-theme-mode='light'] {
  color-scheme: only light;
}
/* Force Dark Mode */
:root[data-theme-mode='dark'] {
  color-scheme: only dark;

  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);

  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode='light']) {
    /**
    * @tokens Dark Shadows
    * @presenter Shadow
    */
    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);

    /**
    * @tokens Encoded Images
    */
    --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
  }
}
/* Base styles and utilities */
/* After a reset, introduce base element styles specific to this system */
html {
  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
  font-family: var(--op-font-family);
  font-size: 62.5%; /* 1rem = 10px */
}
body {
  overflow: auto;
  background: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
}
button {
  background: none;
  cursor: pointer;
}
button,
input[type='submit'] {
  border: 0;
}
label {
  display: inline-block;

  &:hover {
    cursor: pointer;
  }
}
a {
  color: var(--op-color-primary-original);
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
pre {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--op-font-weight-normal);
  margin-block: 0 var(--op-space-small);
}
h1 {
  font-size: var(--op-font-3x-large);
}
h2 {
  font-size: var(--op-font-2x-large);
}
h3 {
  font-size: var(--op-font-large);
}
h4 {
  font-size: var(--op-font-medium);
}
h5 {
  font-size: var(--op-font-small);
}
h6 {
  font-size: var(--op-font-x-small);
}
p {
  font-size: var(--op-font-medium);
  margin-block-end: var(--op-space-small);
}
small {
  font-size: var(--op-font-small);
}
.app-with-sidebar {
  display: grid;
  block-size: 100vh;
  grid-template-columns: auto 1fr auto;
  inline-size: 100%;
}
.app-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
}
.app__header {
  position: sticky;
  z-index: var(--op-z-index-header);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-start: 0;
}
.app__content {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
  inline-size: 100%;
  max-inline-size: var(--op-breakpoint-medium);
}
.app__content-no-margin {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  inline-size: 100%;
  overflow-y: auto;
}
.app__footer {
  position: sticky;
  z-index: var(--op-z-index-footer);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-end: 0;
}
/*
  <html lang='en'>
    <head>...</head>
    <body class="op-page">
      <div class="op-page__sidebar">...</div>
      <div class="op-page__main">
        <div class="op-page__main-header">...</div>
        <div class="op-page__main-content">...</div>
        <div class="op-page__main-footer">...</div>
      </div>
      <div class="op-page__sidebar op-page__sidebar--right">...</div>
    </body>
  </html>
*/
:root:has(.op-page) {
  /* Reset existing Optics layout */
  overflow: unset;

  body {
    overflow: unset;
  }

  /* New Layout */
  html,
  body {
    padding: 0;
    margin: 0;
    block-size: 100%;
    min-block-size: 100%;
  }
}
.op-page {
  display: grid;
  grid-template-areas: 'sidebar-left main sidebar-right';
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  min-block-size: 100dvh;

  .op-page__sidebar {
    grid-area: sidebar-left;

    &.op-page__sidebar--right {
      grid-area: sidebar-right;
    }
  }

  .op-page__main {
    grid-area: main;
  }

  .op-page__sidebar {
    position: sticky;
    z-index: var(--op-z-index-sidebar);
    block-size: 100dvh;
    inset-block-start: 0;
    max-block-size: 100dvh;

    > * {
      block-size: 100%;
    }
  }

  .op-page__main {
    display: grid;
    grid-template-areas:
      'main-header'
      'main-content'
      'main-footer';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    min-block-size: 100%;

    .op-page__main-header {
      grid-area: main-header;
    }

    .op-page__main-content {
      grid-area: main-content;
    }

    .op-page__main-footer {
      grid-area: main-footer;
    }

    .op-page__main-header {
      position: sticky;
      z-index: var(--op-z-index-header);
      inset-block-start: 0;
    }

    .op-page__main-content {
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: var(--op-breakpoint-medium);
      padding-block: var(--op-space-medium);
      padding-inline: var(--op-space-large);
    }

    .op-page__main-footer {
      position: sticky;
      z-index: var(--op-z-index-footer);
      inset-block-end: 0;
    }
  }
}
/* Container Properties */
.container {
  inline-size: 100%;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: var(--op-breakpoint-medium);
  padding-block: 0;
  padding-inline: var(--op-space-large);
}
.container--sm {
  max-inline-size: var(--op-breakpoint-small);
}
.container--md-padding {
  padding: 0 var(--op-space-medium);
}
.container--sm-padding {
  padding: 0 var(--op-space-small);
}
.container--xs {
  max-inline-size: var(--op-breakpoint-x-small);
}
/* Width Properties */
.full-width {
  inline-size: 100%;
}
.half-width {
  inline-size: 50%;
}
.four-fifths-width {
  inline-size: calc(100% * 4 / 5);
}
.three-fifths-width {
  inline-size: calc(100% * 3 / 5);
}
.two-fifths-width {
  inline-size: calc(100% * 2 / 5);
}
.one-fifth-width {
  inline-size: calc(100% * 1 / 5);
}
.three-quarters-width {
  inline-size: calc(100% * 3 / 4);
}
.one-quarter-width {
  inline-size: calc(100% * 1 / 4);
}
.two-thirds-width {
  inline-size: calc(100% * 2 / 3);
}
.one-third-width {
  inline-size: calc(100% * 1 / 3);
}
/* Flex Properties */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-grow-1 {
  flex-grow: 1;
}
/* Gap Properties */
.gap-xxs {
  gap: var(--op-space-2x-small);

  --op-gap: var(--op-space-2x-small);
}
.gap-xs {
  gap: var(--op-space-x-small);

  --op-gap: var(--op-space-x-small);
}
.gap-sm {
  gap: var(--op-space-small);

  --op-gap: var(--op-space-small);
}
.gap-md {
  gap: var(--op-space-medium);

  --op-gap: var(--op-space-medium);
}
.gap-lg {
  gap: var(--op-space-large);

  --op-gap: var(--op-space-large);
}
.gap-xl {
  gap: var(--op-space-x-large);

  --op-gap: var(--op-space-x-large);
}
/* Justify Content */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
/* Align Items */
.items-stretch {
  align-items: stretch;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
/* Align Self */
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}
/* Text Alignment */
.text-left {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
/* Box Margin */
.margin-xl {
  margin: var(--op-space-x-large);
}
.margin-lg {
  margin: var(--op-space-large);
}
.margin-md {
  margin: var(--op-space-medium);
}
.margin-sm {
  margin: var(--op-space-small);
}
.margin-xs {
  margin: var(--op-space-x-small);
}
.margin-none {
  margin: 0;
}
.margin-auto {
  margin: auto;
}
/* Vertical Margin */
.margin-y-xl {
  margin-block: var(--op-space-x-large);
}
.margin-y-lg {
  margin-block: var(--op-space-large);
}
.margin-y-md {
  margin-block: var(--op-space-medium);
}
.margin-y-sm {
  margin-block: var(--op-space-small);
}
.margin-y-xs {
  margin-block: var(--op-space-x-small);
}
.margin-y-none {
  margin-block: 0;
}
/* Horizontal Margin */
.margin-x-xl {
  margin-inline: var(--op-space-x-large);
}
.margin-x-lg {
  margin-inline: var(--op-space-large);
}
.margin-x-md {
  margin-inline: var(--op-space-medium);
}
.margin-x-sm {
  margin-inline: var(--op-space-small);
}
.margin-x-xs {
  margin-inline: var(--op-space-x-small);
}
.margin-x-none {
  margin-inline: 0;
}
/* Top Margin */
.margin-top-xl {
  margin-block-start: var(--op-space-x-large);
}
.margin-top-lg {
  margin-block-start: var(--op-space-large);
}
.margin-top-md {
  margin-block-start: var(--op-space-medium);
}
.margin-top-sm {
  margin-block-start: var(--op-space-small);
}
.margin-top-xs {
  margin-block-start: var(--op-space-x-small);
}
.margin-top-none {
  margin-block-start: 0;
}
/* Bottom Margin */
.margin-bottom-xl {
  margin-block-end: var(--op-space-x-large);
}
.margin-bottom-lg {
  margin-block-end: var(--op-space-large);
}
.margin-bottom-md {
  margin-block-end: var(--op-space-medium);
}
.margin-bottom-sm {
  margin-block-end: var(--op-space-small);
}
.margin-bottom-xs {
  margin-block-end: var(--op-space-x-small);
}
.margin-bottom-none {
  margin-block-end: 0;
}
/* Right Margin */
.margin-right-xl {
  margin-inline-end: var(--op-space-x-large);
}
.margin-right-lg {
  margin-inline-end: var(--op-space-large);
}
.margin-right-md {
  margin-inline-end: var(--op-space-medium);
}
.margin-right-sm {
  margin-inline-end: var(--op-space-small);
}
.margin-right-xs {
  margin-inline-end: var(--op-space-x-small);
}
.margin-right-none {
  margin-inline-start: 0;
}
/* Left Margin */
.margin-left-xl {
  margin-inline-start: var(--op-space-x-large);
}
.margin-left-lg {
  margin-inline-start: var(--op-space-large);
}
.margin-left-md {
  margin-inline-start: var(--op-space-medium);
}
.margin-left-sm {
  margin-inline-start: var(--op-space-small);
}
.margin-left-xs {
  margin-inline-start: var(--op-space-x-small);
}
.margin-left-none {
  margin-inline-start: 0;
}
/*
  Accessibility
  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.sr-only {
  position: absolute !important;
  overflow: hidden;
  block-size: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
}
/* Advanced Layout Utilities */
/* Equivalent to .flex.flex-col.gap-md */
.op-stack {
  display: flex;
  flex-direction: column;
}
:where(.op-stack) {
  gap: var(--op-space-medium);
}
/* Equivalent to .flex.flex-wrap.items-center.gap-md */
.op-cluster {
  display: flex;
  flex-wrap: wrap;
}
:where(.op-cluster) {
  align-items: center;
  gap: var(--op-space-medium);
}
/* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
.op-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
:where(.op-split) {
  align-items: center;
  gap: var(--op-space-medium);
}
/* Components */
.accordion {
  /* Public API (customizable component options) */
  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */

  overflow: hidden;
  interpolate-size: allow-keywords;

  /* Elements */

  summary {
    display: grid;
    align-items: center;
    cursor: pointer;
    gap: var(--op-space-2x-small);
    grid-template-columns: auto 1fr auto;
    min-block-size: var(--_op-accordion-summary-min-height);

    &::marker,
    &::-webkit-details-marker {
      display: none;
      content: '';
    }

    .accordion__label {
      color: var(--op-color-neutral-on-plus-max);
      font-size: var(--op-font-x-small);
      font-weight: var(--op-font-weight-semi-bold);
    }

    .accordion__marker {
      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);

      justify-self: flex-end;
      transition: var(--op-transition-accordion);
      user-select: none;
    }
  }

  &::details-content {
    block-size: 0;
    transition: var(--op-transition-accordion-content);
  }

  &[open] {
    summary .accordion__marker {
      rotate: 0.25turn;
    }

    &::details-content {
      block-size: auto;
    }
  }

  /* Modifiers */

  &.accordion--disable-animation {
    summary .accordion__marker {
      transition: none;
    }

    &::details-content {
      transition: none;
    }
  }
}
.alert {
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  gap: var(--op-space-small);

  /* Elements */

  .alert__icon {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
    --__op-icon-weight: var(--_op-icon-weight-bold);

    line-height: var(--op-line-height-dense);
  }

  .alert__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-space-2x-small);
  }

  .alert__title {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
  }

  .alert__description {
    font-size: var(--op-font-small);
  }

  /* Modifiers */

  &.alert--flash {
    position: fixed;
    z-index: var(--op-z-index-alert-group);
    animation: var(--op-animation-flash);
    inset-block-start: var(--op-space-large);
    inset-inline-end: var(--op-space-large);
  }

  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-plus-eight);

    .alert__title {
      color: var(--op-color-alerts-warning-on-plus-eight-alt);
    }

    &.alert--muted {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-warning-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-base);

      .alert__title {
        color: var(--op-color-alerts-warning-on-base-alt);
      }
    }
  }

  /* alert--alert is an alias for alert--danger. See Alert.mdx for reasoning. */
  &.alert--danger,
  &.alert--alert {
    background-color: var(--op-color-alerts-danger-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-danger-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-danger-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-base);

      .alert__title {
        color: var(--op-color-alerts-danger-on-base-alt);
      }
    }
  }

  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-info-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-info-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-info-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-info-base);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-base);

      .alert__title {
        color: var(--op-color-alerts-info-on-base-alt);
      }
    }
  }

  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-notice-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-notice-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-notice-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-notice-base);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-base);

      .alert__title {
        color: var(--op-color-alerts-notice-on-base-alt);
      }
    }
  }
}
.avatar {
  /* Public API (customizable component options) */
  --_op-avatar-border-radius: var(--op-radius-circle);
  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
  --_op-avatar-outer-border-width: var(--op-border-width-large);
  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */

  /* Private API (component option defaults) */
  --__op-avatar-size: var(--_op-avatar-size-large);

  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--_op-avatar-border-radius);
  block-size: var(--__op-avatar-size);
  inline-size: var(--__op-avatar-size);
  min-block-size: var(--__op-avatar-size);
  min-inline-size: var(--__op-avatar-size);

  &::before {
    position: absolute;
    z-index: 2;
    content: '';
    inset: 0;
  }

  &::after {
    position: absolute;
    z-index: 3;
    border-radius: var(--_op-avatar-border-radius);
    box-shadow:
      inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
      inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
    content: '';
    inset: 0;
  }

  img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  /* Disabled State */
  &.avatar--disabled {
    opacity: var(--_op-avatar-disabled-opacity);
    pointer-events: none;
  }

  /* Focus State */
  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none;
  }

  /* Hover State */
  &:hover:not(div, .avatar--disabled) {
    --_op-avatar-inner-border-color: var(--op-color-primary-base);
    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);

    cursor: pointer;

    &::before {
      background-color: var(--op-color-primary-base);
      opacity: var(--_op-avatar-hover-opacity);
    }
  }

  &:focus-visible:not(.avatar--disabled) {
    --_op-avatar-outer-border-color: var(--op-color-primary-base);

    cursor: pointer;
  }

  /* Size Modifiers */
  &.avatar--small {
    --__op-avatar-size: var(--_op-avatar-size-small);
  }

  &.avatar--medium {
    --__op-avatar-size: var(--_op-avatar-size-medium);
  }

  &.avatar--large {
    --__op-avatar-size: var(--_op-avatar-size-large);
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-base);
  color: var(--op-color-neutral-on-base);
  cursor: inherit;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  gap: var(--op-space-x-small);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-x-small);
  user-select: none;
  white-space: nowrap;

  /* Elements */

  .material-symbols-outlined {
    font-size: var(--op-font-small);
  }

  /* Modifiers */

  &.badge--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
  }

  &.badge--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
  }

  &.badge--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
  }

  &.badge--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
  }

  &.badge--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
  }

  &.badge--pill {
    border-radius: var(--op-radius-pill);
  }

  &.badge--notification-right {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(50%);
  }

  &.badge--notification-left {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-50%);
  }
}
.breadcrumbs {
  /* Public API (customizable component options) */
  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
  --_op-breadcrumbs-font-size-large: var(--op-font-small);

  /* Private API (component option defaults) */
  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--op-space-x-small);

  /* Elements */
  .breadcrumbs__link {
    font-size: var(--__op-breadcrumbs-font-size);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .breadcrumbs__text {
    font-size: var(--__op-breadcrumbs-font-size);
    font-weight: var(--op-font-weight-bold);
  }

  /* Modifiers */
  &.breadcrumbs--small {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
  }

  &.breadcrumbs--large {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
  }
}
.btn {
  /* Public API (customizable component options) */
  --_op-btn-height-small: var(--op-input-height-small);
  --_op-btn-height-medium: var(--op-input-height-medium);
  --_op-btn-height-large: var(--op-input-height-large);
  --_op-btn-font-small: var(--op-font-x-small);
  --_op-btn-font-medium: var(--op-font-small);
  --_op-btn-font-large: var(--op-font-small);
  --_op-btn-padding-small: 0 var(--op-space-x-small);
  --_op-btn-padding-medium: 0 var(--op-space-small);
  --_op-btn-padding-large: 0 var(--op-space-small);

  /* Private API (component option defaults) */
  --__op-btn-height: var(--_op-btn-height-large);
  --__op-btn-font-size: var(--_op-btn-font-large);
  --__op-btn-padding: var(--_op-btn-padding-large);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--__op-btn-padding);
  border-radius: var(--op-radius-medium);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  font-size: var(--__op-btn-font-size);
  font-weight: var(--op-font-weight-normal);
  gap: var(--op-space-x-small);
  min-block-size: var(--__op-btn-height);
  text-align: center;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;

  /* Modifiers */

  /* Default Active State */
  &.btn--active {
    background-color: var(--op-color-primary-plus-five);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-five);
  }

  /* Default Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-eight);
  }

  /* Default Focus State */
  &:focus-visible {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-neutral-on-plus-eight);
  }

  /* Default Borderless State */
  &.btn--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);

    /* Default Borderless + Active State. */
    &.btn--active {
      background-color: var(--op-color-primary-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
      color: var(--op-color-primary-on-plus-five);
    }

    /* Default Borderless + Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
      color: var(--op-color-primary-on-plus-eight);
    }

    /* Default Borderless + Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-eight);
    }
  }

  /* Pill Modifier */
  &.btn--pill {
    border-radius: var(--op-radius-pill);
  }

  /* Icon Modifier */
  &.btn--icon {
    padding: 0;
    inline-size: var(--__op-btn-height);
    min-inline-size: var(--__op-btn-height);
  }

  /* Icon With Label Modifier */
  &.btn--icon-with-label {
    flex-direction: column;
    padding: var(--op-space-small);
    gap: var(--op-space-3x-small);
  }

  /* Size Modifiers */
  &.btn--small {
    --__op-btn-height: var(--_op-btn-height-small);
    --__op-btn-font-size: var(--_op-btn-font-small);
    --__op-btn-padding: var(--_op-btn-padding-small);
  }

  &.btn--medium {
    --__op-btn-height: var(--_op-btn-height-medium);
    --__op-btn-font-size: var(--_op-btn-font-medium);
    --__op-btn-padding: var(--_op-btn-padding-medium);
  }

  &.btn--large {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);
    --__op-btn-padding: var(--_op-btn-padding-large);
  }

  /* Disabled Modifier */
  &.btn--disabled,
  &:disabled {
    opacity: var(--op-opacity-disabled);
    pointer-events: none;
    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
    user-select: none;
  }

  /* Button with notification style badge */
  &.btn--with-badge {
    position: relative;
  }

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */

  /* --op-breakpoint-small */
  @media (width <= 768px) {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);

    &.btn--small,
    &.btn--medium,
    &.btn--large {
      --__op-btn-height: var(--_op-btn-height-large);
      --__op-btn-font-size: var(--_op-btn-font-large);
      --__op-btn-padding: var(--_op-btn-padding-large);
    }
  }

  /* Variant Modifiers */
  &.btn--primary {
    background-color: var(--op-color-primary-base);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-primary-minus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-minus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-one);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-base);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-base);
    }

    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-base);

      /* Borderless + Active State */
      &.btn--active {
        background-color: var(--op-color-primary-plus-five);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
        color: var(--op-color-primary-on-plus-five);
      }

      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
        color: var(--op-color-primary-on-plus-eight);
      }

      /* Borderless + Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }

  &.btn--destructive,
  &.btn--delete {
    background-color: var(--op-color-alerts-danger-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
      color: var(--op-color-alerts-danger-on-plus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-minus-two);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-base);
    }
  }

  &.btn--warning {
    background-color: var(--op-color-alerts-warning-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
      color: var(--op-color-alerts-warning-on-plus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-warning-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
      color: var(--op-color-alerts-warning-on-minus-two);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: var(--op-input-focus-warning);
      color: var(--op-color-alerts-warning-on-base);
    }
  }
}
.btn-group {
  --op-btn-group-hover-z-index: 1;
  --op-btn-group-active-z-index: 2;
  --op-btn-group-focus-z-index: 3;

  display: inline-flex;
  align-items: center;

  .btn {
    + .btn {
      margin-inline-start: calc(var(--op-border-width) * -1);
    }

    &:hover {
      z-index: var(--op-btn-group-hover-z-index);
    }

    &.btn--active {
      z-index: var(--op-btn-group-active-z-index);
    }

    &:focus,
    &:focus-within,
    &:focus-visible {
      z-index: var(--op-btn-group-focus-z-index);
    }

    &:not(:first-child, :last-child) {
      border-radius: 0;
    }

    &:first-child:not(:last-child) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }

    &:last-child:not(:first-child) {
      border-end-start-radius: 0;
      border-start-start-radius: 0;
    }
  }
}
.btn-group-toolbar {
  display: flex;
  flex-wrap: wrap;
}
.card {
  /* Public API (customizable component options) */
  --_op-card-padding: var(--op-space-medium);
  --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
  --_op-card-radius: var(--op-radius-medium);

  position: relative;
  border-radius: var(--_op-card-radius);
  background-color: var(--op-color-background);
  box-shadow: var(--_op-card-box-shadow);
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);

  /* Modifiers */

  &.card--condensed {
    --_op-card-padding: var(--op-space-x-small);
  }

  &.card--padded {
    padding: var(--_op-card-padding);
  }

  &.card--shadow-x-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
  }

  &.card--shadow-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
  }

  &.card--shadow-medium {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
  }

  &.card--shadow-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
  }

  &.card--shadow-x-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
  }

  /* Elements */
  .card__header,
  .card__body,
  .card__footer {
    padding: var(--_op-card-padding);
  }

  .card__header {
    border-start-end-radius: var(--_op-card-radius);
    border-start-start-radius: var(--_op-card-radius);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }
  }

  .card__footer {
    border-end-end-radius: var(--_op-card-radius);
    border-end-start-radius: var(--_op-card-radius);
  }
}
.confirm-dialog-wrapper {
  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;

  /* Elements */

  .confirm-dialog-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }

  /* Modifiers */

  &.confirm-dialog-wrapper--active {
    visibility: visible;

    .confirm-dialog {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }

    .confirm-dialog-wrapper__backdrop {
      opacity: var(--op-opacity-half);
      visibility: visible;
    }
  }
}
/* stylelint-disable no-descending-specificity */
.confirm-dialog {
  /* Public API (customizable component options) */
  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */

  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-confirm-dialog-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);

  .confirm-dialog__header,
  .confirm-dialog__body,
  .confirm-dialog__footer {
    padding: var(--op-space-medium);
  }

  .confirm-dialog__header {
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .confirm-dialog__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
  }

  .confirm-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* stylelint-enable no-descending-specificity */
.content-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--op-space-medium);
  padding-block: var(--op-space-medium);

  .content-header__details {
    display: grid;
    gap: var(--op-space-3x-small);
  }

  .content-header__context {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-small);
  }

  .content-header__title {
    margin: 0;
    color: var(--op-color-on-background);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
  }

  .content-header__subline {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-medium);
  }

  .content-header__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: end;
    gap: var(--op-space-2x-small);
    margin-inline-start: auto;
  }
}
.divider {
  /* Public API (customizable component options) */
  --_op-divider-vertical-min-height: var(--op-space-large);
  --_op-divider-height-small: var(--op-border-width);
  --_op-divider-height-medium: var(--op-border-width-large);
  --_op-divider-height-large: var(--op-border-width-x-large);
  --_op-divider-padding-small: var(--op-space-2x-small);
  --_op-divider-padding-medium: var(--op-space-x-small);
  --_op-divider-padding-large: var(--op-space-medium);

  /* Private API (component option defaults) */
  --__op-divider-height: var(--_op-divider-height-small);
  --__op-divider-padding: 0;
  background-color: var(--op-color-border);
  block-size: var(--__op-divider-height);
  inline-size: 100%;
  margin-block: var(--__op-divider-padding);
  margin-inline: 0;
  min-block-size: var(--__op-divider-height);

  /* Size Modifiers */
  &.divider--small {
    --__op-divider-height: var(--_op-divider-height-small);
  }

  &.divider--medium {
    --__op-divider-height: var(--_op-divider-height-medium);
  }

  &.divider--large {
    --__op-divider-height: var(--_op-divider-height-large);
  }

  /* Spacing Modifiers */
  &.divider--spacing-small {
    --__op-divider-padding: var(--_op-divider-padding-small);
  }

  &.divider--spacing-medium {
    --__op-divider-padding: var(--_op-divider-padding-medium);
  }

  &.divider--spacing-large {
    --__op-divider-padding: var(--_op-divider-padding-large);
  }

  /* Direction Modifier */
  &.divider--vertical {
    block-size: 100%;
    inline-size: var(--__op-divider-height);
    margin-block: 0;
    margin-inline: var(--__op-divider-padding);
    min-block-size: var(--_op-divider-vertical-min-height);
    min-inline-size: var(--__op-divider-height);
  }
}
.form-control {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-input-height-small);
  --_op-form-control-height-medium: var(--op-input-height-medium);
  --_op-form-control-height-large: var(--op-input-height-large);
  --_op-form-control-font-small: var(--op-font-x-small);
  --_op-form-control-font-medium: var(--op-font-small);
  --_op-form-control-font-large: var(--op-font-small);

  /* Private API (component option defaults) */
  --__op-form-control-height: var(--_op-form-control-height-large);
  --__op-form-control-font-size: var(--_op-form-control-font-large);
  block-size: var(--__op-form-control-height);
  min-inline-size: var(--__op-form-control-height);

  /* Size Modifiers */
  &.form-control--small {
    --__op-form-control-height: var(--_op-form-control-height-small);
    --__op-form-control-font-size: var(--_op-form-control-font-small);
  }

  &.form-control--medium {
    --__op-form-control-height: var(--_op-form-control-height-medium);
    --__op-form-control-font-size: var(--_op-form-control-font-medium);
  }

  &.form-control--large {
    --__op-form-control-height: var(--_op-form-control-height-large);
    --__op-form-control-font-size: var(--_op-form-control-font-large);
  }

  /* Disabled State */
  &:disabled {
    cursor: not-allowed;
    opacity: var(--_op-form-control-opacity-disabled);
  }

  /* Readonly State */
  &[readonly] {
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: var(--op-color-on-background);
    pointer-events: none;
    user-select: none;

    /* stylelint-disable selector-no-vendor-prefix */
    &::-webkit-input-placeholder {
      color: var(--op-color-on-background);
    }
    /* stylelint-enable selector-no-vendor-prefix */
  }
}
/* Radio or Checkbox Form Control */
.form-control:is([type='radio'], [type='checkbox']) {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-space-medium);
  --_op-form-control-height-medium: var(--op-space-large);
  --_op-form-control-height-large: var(--op-space-x-large);

  align-self: center;
  margin: 0;
  accent-color: var(--op-color-primary-base);
  block-size: var(--__op-form-control-height);
  cursor: pointer;
  inline-size: var(--__op-form-control-height);

  & + label {
    align-self: center;
  }
}
/* Any Form Control that is not a radio or checkbox */
.form-control:not([type='radio'], [type='checkbox']) {
  /* Public API (customizable component options) */
  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);

  /* Private API (component option defaults) */
  --__op-form-control-border-color: var(--op-color-neutral-plus-four);

  display: block;
  border: none;
  border-radius: var(--op-radius-medium);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-form-control-height);
  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: text;
  font-size: var(--__op-form-control-font-size);
  inline-size: 100%;
  line-height: var(--op-line-height-base);
  min-inline-size: var(--__op-form-control-height);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-small) var(--op-space-x-small);

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* Hover State */
  &:hover:not(:disabled, [readonly]) {
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
  }

  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-primary-on-plus-seven);
  }

  /* Borderless State */
  &.form-control--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);

    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-primary-plus-seven);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-seven);
    }

    /* Borderless + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
}
/* Color Form Control */
.form-control[type='color'] {
  padding: var(--op-space-2x-small);
  cursor: pointer;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border: none;
    border-radius: var(--op-radius-medium);
  }
}
/* File Form Control */
.form-control[type='file'] {
  padding-block: 0;

  &::file-selector-button {
    --__op-btn-base-height: var(--op-input-height-small);
    --__op-btn-height: var(--__op-btn-base-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--op-radius-medium);
    appearance: none;
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
    color: var(--op-color-neutral-on-plus-eight);
    cursor: pointer;
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-normal);
    gap: var(--op-space-x-small);
    margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
    min-block-size: var(--__op-btn-height);
    padding-block: 0;
    padding-inline: var(--op-space-x-small);
    text-align: center;
    text-decoration: none;
    transition: var(--op-transition-input);
    white-space: nowrap;
  }

  &.form-control--small::file-selector-button {
    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
  }
}
select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
  appearance: none;
  background-image: var(--op-encoded-images-dropdown-arrow);
  background-position: center right;
  background-position-x: calc(
    100% - ((var(--op-space-3x-large) / 2) - (var(--op-encoded-images-dropdown-arrow-width) / 2))
  );
  background-repeat: no-repeat;
  cursor: pointer;
  padding-inline-end: var(--op-space-3x-large);
}
select.form-control[multiple] {
  min-block-size: calc(2 * var(--__op-form-control-height));
}
textarea.form-control:not([type='radio'], [type='checkbox']) {
  block-size: calc(2 * var(--__op-form-control-height));
  max-inline-size: 100%;
  min-block-size: var(--__op-form-control-height);
}
.form-label {
  color: var(--op-color-on-background);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-base);
}
.form-error {
  color: var(--op-color-alerts-danger-base);
  font-size: var(--op-font-x-small);
  inline-size: fit-content;
}
.form-hint {
  display: block;
  font-size: var(--op-font-small);
  font-style: italic;
}
.form-error-summary {
  padding: var(--op-space-large);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-alerts-danger-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
  color: var(--op-color-alerts-danger-on-plus-seven);
  margin-block-end: var(--op-space-large);

  h2 {
    font-size: var(--op-font-medium);
  }

  ul {
    margin-block-end: 0;
  }
}
.form-group {
  display: grid;
  align-content: baseline;
  gap: var(--op-space-x-small);
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  padding-block: var(--op-space-small);
  padding-inline: 0;

  /* Group Alignment */
  /* stylelint-disable no-descending-specificity */
  .form-label,
  .form-error,
  .form-hint,
  .form-control:not([type='radio'], [type='checkbox']),
  .segmented-control {
    grid-column: 1 / 3;
  }
  /* stylelint-enable no-descending-specificity */

  .form-control[type='radio'],
  .form-control[type='checkbox'] {
    grid-column: 1 / 1;

    & + .form-label {
      grid-column: 2 / 3;
      grid-row: 1;
    }
  }
}
.form-group--inline {
  align-items: center;

  /* Group Alignment */

  /* stylelint-disable no-descending-specificity */
  .form-label {
    grid-column: unset;
  }

  .form-error,
  .form-hint {
    grid-column: 1 / 3;
  }

  .form-control:not([type='radio'], [type='checkbox']),
  .switch {
    grid-column: unset;
  }
  /* stylelint-enable no-descending-specificity */
}
.form-group--error {
  /* stylelint-disable no-descending-specificity */
  .form-control {
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);

    &[type='radio'],
    &[type='checkbox'] {
      box-shadow: none;

      & + label {
        color: var(--op-color-alerts-danger-minus-three);
        font-weight: var(--op-font-weight-bold);
      }
    }

    /* Error + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }

    /* Readonly State */
    &[readonly] {
      box-shadow: none;
    }

    /* Error + Focus State */
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }

    /* Borderless State */
    &.form-control--no-border {
      border-radius: 0;
      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);

      /* Readonly State */
      &[readonly] {
        box-shadow: none;
      }

      /* Borderless + Focus State */
      &:focus-visible:not([readonly]) {
        background-color: var(--op-color-alerts-danger-plus-seven);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-seven);
      }

      /* Borderless + Hover State */
      &:hover:not(:disabled, [readonly]) {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
  /* stylelint-enable no-descending-specificity */
}
.icon {
  /* Public API (customizable component options) */

  /* Weight */
  --_op-icon-weight-light: var(--op-font-weight-light);
  --_op-icon-weight-normal: var(--op-font-weight-normal);
  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
  --_op-icon-weight-bold: var(--op-font-weight-bold);

  /* Fill */
  --_op-icon-fill-outlined: 0;
  --_op-icon-fill-filled: 1;

  /* Emphasis */
  --_op-icon-emphasis-low: -20;
  --_op-icon-emphasis-normal: 0;
  --_op-icon-emphasis-high: 200;

  /* Size */
  --_op-icon-font-size-small: var(--op-font-small);
  --_op-icon-font-size-medium: var(--op-font-medium);
  --_op-icon-font-size-large: var(--op-font-large);
  --_op-icon-font-size-x-large: var(--op-font-2x-large);
  --_op-icon-optical-size-small: 20;
  --_op-icon-optical-size-medium: 20;
  --_op-icon-optical-size-large: 40;
  --_op-icon-optical-size-x-large: 48;

  /* Private API (component option defaults) */
  --__op-icon-weight: var(--_op-icon-weight-normal);
  --__op-icon-fill: var(--_op-icon-fill-outlined);
  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  --__op-icon-font-size: var(--_op-icon-font-size-medium);
  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);

  display: inline-block;
  block-size: var(--__op-icon-font-size);
  font-size: var(--__op-icon-font-size);
  font-weight: var(--__op-icon-weight);
  inline-size: var(--__op-icon-font-size);
  line-height: var(--op-line-height-densest);
  vertical-align: middle;

  /* Fill Modifiers */
  &.icon--outlined {
    --__op-icon-fill: var(--_op-icon-fill-outlined);
  }

  &.icon--filled {
    --__op-icon-fill: var(--_op-icon-fill-filled);
  }

  /* Weight Modifiers */
  &.icon--weight-light {
    --__op-icon-weight: var(--_op-icon-weight-light);
  }

  &.icon--weight-normal {
    --__op-icon-weight: var(--_op-icon-weight-normal);
  }

  &.icon--weight-semi-bold {
    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
  }

  &.icon--weight-bold {
    --__op-icon-weight: var(--_op-icon-weight-bold);
  }

  /* Emphasis */
  &.icon--low-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
  }

  &.icon--normal-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  }

  &.icon--high-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
  }

  /* Size Modifiers */
  &.icon--small {
    --__op-icon-font-size: var(--_op-icon-font-size-small);
    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
  }

  &.icon--medium {
    --__op-icon-font-size: var(--_op-icon-font-size-medium);
    --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
  }

  &.icon--large {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
  }

  &.icon--x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-x-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
  }
}
/* Material Icons class provided by the Google Fonts CDN */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' var(--__op-icon-fill),
    'wght' var(--__op-icon-weight),
    'GRAD' var(--__op-icon-emphasis),
    'opsz' var(--__op-icon-optical-size);
  font-weight: unset;
}
/* Custom SVG Icons app specific */
.custom-icons {
  svg {
    block-size: 100%;
    inline-size: 100%;
  }
}
.modal-wrapper {
  /* Public API (customizable component options) */
  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);

  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;

  /* Elements */

  .modal-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }

  /* Modifiers */

  &.modal-wrapper--active {
    visibility: visible;

    .modal {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }

    .modal-wrapper__backdrop {
      opacity: var(--_op-modal-backdrop-active-opacity);
      visibility: visible;
    }
  }
}
.modal {
  /* Public API (customizable component options) */
  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */

  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-modal-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);

  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--op-space-medium);
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .modal__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
    max-block-size: var(--_op-modal-max-height);
    overflow-y: auto;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--op-space-small);
  }
}
dialog.modal {
  padding: 0;
  border: none;
  overscroll-behavior: contain;
  transform: scale(0.7);
  transition:
    display var(--op-transition-modal-time) allow-discrete,
    overlay var(--op-transition-modal-time) allow-discrete,
    transform var(--op-transition-modal-time),
    opacity var(--op-transition-modal-time);

  &::backdrop {
    overflow: hidden;
    background-color: var(--op-color-black);
    opacity: var(--op-opacity-none);
    overscroll-behavior: contain;
    transition:
      display var(--op-transition-modal-time) allow-discrete,
      overlay var(--op-transition-modal-time) allow-discrete,
      transform var(--op-transition-modal-time),
      opacity var(--op-transition-modal-time);
  }

  &[open] {
    opacity: var(--op-opacity-full);
    transform: scale(1);

    &::backdrop {
      opacity: var(--op-opacity-half);
    }
  }
}
@starting-style {
  dialog.modal[open] {
    transform: scale(0.7);

    &::backdrop {
      opacity: var(--op-opacity-none);
    }
  }
}
.navbar {
  /* Public API (customizable component options) */

  /* Normal */
  --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
  --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-navbar-border-color: var(--op-color-neutral-plus-four);
  --_op-navbar-brand-height: calc(12 * var(--op-size-unit)); /* 48px */

  /* Spacing */
  --_op-navbar-horizontal-spacing: var(--op-space-x-large);
  --_op-navbar-content-spacing: var(--op-space-x-small);
  --_op-navbar-content-item-spacing: var(--op-space-2x-small);

  display: flex;
  align-items: center;
  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
  background-color: var(--_op-navbar-background-color);
  box-shadow:
    var(--op-border-top) var(--_op-navbar-border-color),
    var(--op-border-bottom) var(--_op-navbar-border-color);
  color: var(--_op-navbar-text-color);
  gap: var(--_op-navbar-content-spacing);

  /* Elements */

  .navbar__brand {
    block-size: var(--_op-navbar-brand-height);
    margin-inline-end: var(--_op-navbar-horizontal-spacing);

    img {
      block-size: 100%;
    }
  }

  .navbar__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_op-navbar-content-item-spacing);

    &.navbar__content--justify-start {
      margin-inline-end: auto;
    }

    &.navbar__content--justify-center {
      margin-inline: auto;
    }

    &.navbar__content--justify-end {
      margin-inline-start: auto;
    }
  }

  /* Modifiers */

  &.navbar--primary {
    --_op-navbar-background-color: var(--op-color-primary-plus-six);
    --_op-navbar-text-color: var(--op-color-primary-on-plus-six);
    --_op-navbar-border-color: var(--op-color-primary-plus-four);
  }
}
.pagination {
  display: flex;
  align-items: center;
  gap: 0;

  /* Showing Dropdown */
  .form-group {
    align-items: center;

    .form-label {
      grid-column: 1;
    }

    .form-control {
      grid-column: 2;
    }
  }

  /* ... Gap */
  .pagination__divider {
    block-size: 100%;
    padding-inline: var(--op-space-x-small);
  }
}
.segmented-control {
  --op-input-inner-focus: 0 0 0 var(--op-border-width-large);
  --op-input-focus-primary:
    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);

  /* Public API (customizable component options) */
  --_op-segmented-control-height-small: var(--op-input-height-small);
  --_op-segmented-control-height-medium: var(--op-input-height-medium);
  --_op-segmented-control-height-large: var(--op-input-height-large);

  --_op-segmented-control-font-small: var(--op-font-x-small);
  --_op-segmented-control-font-medium: var(--op-font-small);
  --_op-segmented-control-font-large: var(--op-font-small);

  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
  --_op-segmented-control-label-padding-medium: var(--op-space-small);
  --_op-segmented-control-label-padding-large: var(--op-space-small);

  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);

  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
  --_op-segmented-control-color-icon-active: light-dark(
    var(--op-color-primary-plus-four),
    var(--op-color-primary-minus-six)
  );

  /* Private API (component option defaults) */
  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);

  position: relative;
  display: grid;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-segmented-control-height);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--__op-segmented-control-font-size);
  gap: var(--op-space-2x-small);
  grid-auto-flow: column;
  inline-size: fit-content;

  &.segmented-control--full-width {
    inline-size: 100%;
  }

  .icon {
    color: var(--__op-segmented-control-color-icon);
  }

  .segmented-control__input {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border-width: 0;
    margin: -1px;
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    white-space: nowrap;

    /* Selected Option */
    &:checked + .segmented-control__label {
      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);

      background-color: var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }

    &:focus-visible {
      + .segmented-control__label {
        box-shadow: var(--op-input-focus-primary);
      }
    }
  }

  .segmented-control__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--op-radius-small);
    gap: var(--__op-segmented-control-label-gap);
    padding-inline: var(--__op-segmented-control-label-padding);
    white-space: nowrap;

    &:hover {
      background-color: var(--op-color-neutral-plus-five);
      color: var(--op-color-neutral-on-plus-five);
    }
  }

  /* Size Modifiers */
  &.segmented-control--small {
    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-small);
      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
    }
  }

  &.segmented-control--medium {
    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }

  &.segmented-control--large {
    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }
}
.sidebar {
  /* Public API (customizable component options) */

  /* Normal */
  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);

  /* Width */
  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */

  /* Spacing */
  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
  --_op-sidebar-brand-spacing: var(--op-space-medium);
  --_op-sidebar-content-spacing: var(--op-space-x-small);
  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);

  /* Animation */
  --_op-sidebar-transition: var(--op-transition-sidebar);

  /* Private API (component option defaults) */
  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);

  z-index: var(--op-z-index-sidebar);
  display: flex;
  flex-direction: column;
  background-color: var(--_op-sidebar-background-color);
  box-shadow:
    var(--op-border-left) var(--_op-sidebar-border-color),
    var(--op-border-right) var(--_op-sidebar-border-color);
  color: var(--_op-sidebar-text-color);
  inline-size: var(--__op-sidebar-width);
  min-inline-size: var(--__op-sidebar-width);
  overflow-y: auto;
  transition: var(--_op-sidebar-transition);

  /* Elements */
  .sidebar__brand {
    padding: var(--_op-sidebar-brand-spacing);
    block-size: var(--__op-sidebar-brand-width);
    margin-inline: auto;

    img {
      block-size: 100%;
    }
  }

  .sidebar__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--_op-sidebar-content-item-spacing);
    padding-inline: var(--_op-sidebar-content-spacing);

    > * {
      justify-content: flex-start;

      .material-symbols-outlined {
        --__op-icon-font-size: var(--_op-icon-font-size-large);
        --__op-icon-optical-size: var(--_op-icon-optical-size-large);
        --__op-icon-weight: var(--_op-icon-weight-bold);
      }
    }

    &.sidebar__content--start {
      justify-content: start;
    }

    &.sidebar__content--center {
      justify-content: center;
    }

    &.sidebar__content--end {
      justify-content: end;
    }
  }

  /* Modifiers */
  &.sidebar--padded {
    padding-block: var(--_op-sidebar-spacing);
  }

  /* Drawer Modifier */
  &.sidebar--drawer {
    /* Private API */
    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
  }

  /* Compact Modifier */
  &.sidebar--compact {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-compact-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);

    /* Elements */
    .sidebar__content {
      > * {
        /* Need to get icon-with-label behavior */
        flex-direction: column;
        padding: var(--op-space-small);
        gap: var(--op-space-3x-small);
      }
    }
  }

  &.sidebar--rail {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-rail-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);

    /* Elements */
    .sidebar__content {
      align-items: center;

      > * {
        justify-content: center;
        padding: 0;
        font-size: 0;
        gap: 0;

        /* Need to get icon behavior */
        inline-size: var(--__op-btn-height);
        min-inline-size: var(--__op-btn-height);
      }
    }
  }

  /* Primary */
  &.sidebar--primary {
    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
  }
}
.side-panel {
  /* Public API (customizable component options) */
  --_op-side-panel-width: calc(54 * var(--op-size-unit)); /* 216px */
  --_op-side-panel-header-padding: var(--op-space-medium);
  --_op-side-panel-body-padding: var(--op-space-medium);
  --_op-side-panel-footer-padding: var(--op-space-medium);
  --_op-side-panel-section-padding: var(--op-space-medium);

  display: flex;
  flex-direction: column;
  background-color: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  inline-size: var(--_op-side-panel-width);
  max-block-size: 100%;
  min-inline-size: var(--_op-side-panel-width);

  /* Modifiers */
  &.side-panel--border-left {
    box-shadow: var(--op-border-left) var(--op-color-border);
  }

  &.side-panel--border-right {
    box-shadow: var(--op-border-right) var(--op-color-border);
  }

  &.side-panel--border-left.side-panel--border-right {
    box-shadow: var(--op-border-x);
  }

  /* Elements */
  .side-panel__header {
    &.side-panel__header--padded {
      padding: var(--_op-side-panel-header-padding);
    }

    &.side-panel__header--padded-x {
      padding-inline: var(--_op-side-panel-header-padding);
    }

    &.side-panel__header--padded-y {
      padding-block: var(--_op-side-panel-header-padding);
    }
  }

  .side-panel__body {
    flex: 1;
    overflow-y: auto;

    &.side-panel__body--padded {
      padding: var(--_op-side-panel-body-padding);
    }

    &.side-panel__body--padded-x {
      padding-inline: var(--_op-side-panel-body-padding);
    }

    &.side-panel__body--padded-y {
      padding-block: var(--_op-side-panel-body-padding);
    }
  }

  .side-panel__footer {
    &.side-panel__footer--padded {
      padding: var(--_op-side-panel-footer-padding);
    }

    &.side-panel__footer--padded-x {
      padding-inline: var(--_op-side-panel-footer-padding);
    }

    &.side-panel__footer--padded-y {
      padding-block: var(--_op-side-panel-footer-padding);
    }
  }

  .side-panel__section {
    &.side-panel__section--padded {
      padding: var(--_op-side-panel-section-padding);
    }

    &.side-panel__section--padded-x {
      padding-inline: var(--_op-side-panel-section-padding);
    }

    &.side-panel__section--padded-y {
      padding-block: var(--_op-side-panel-section-padding);
    }
  }
}
.spinner {
  /* Public API (customizable component options) */
  --_op-spinner-indicator-color: var(--op-color-primary-base);
  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
  --_op-spinner-track-width-x-small: var(--op-border-width);
  --_op-spinner-track-width-small: var(--op-border-width-large);
  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
  --_op-spinner-track-width-large: var(--op-border-width-x-large);
  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
  --_op-spinner-animation-duration: 0.8s;
  --_op-spinner-animation-timing-function: linear;

  /* Private API (component option defaults) */
  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
  --__op-spinner-track-width: var(--_op-spinner-track-width-large);

  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
  border-radius: var(--__op-spinner-diameter);
  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
  block-size: var(--__op-spinner-diameter);
  border-block-start-color: var(--_op-spinner-indicator-color);
  inline-size: var(--__op-spinner-diameter);

  &.spinner--x-small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
  }

  &.spinner--small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
  }

  &.spinner--medium {
    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
  }

  &.spinner--large {
    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
  }
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.switch {
  /* Public API (allowed to be overridden) */
  --_op-switch-height-small: calc(4 * var(--op-size-unit)); /* 16px */
  --_op-switch-height-large: calc(6 * var(--op-size-unit)); /* 24px */
  --_op-switch-width-small: calc(7 * var(--op-size-unit)); /* 28px */
  --_op-switch-width-large: calc(11 * var(--op-size-unit)); /* 44px */
  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
  --_op-switch-switch-padding: var(--op-space-2x-small);

  /* Private API (don't touch these) */
  --__op-switch-width: var(--_op-switch-width-large);
  --__op-switch-height: var(--_op-switch-height-large);
  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);

  position: relative;
  display: flex;
  align-items: center;

  label {
    position: relative;
    display: block;
    border-radius: var(--op-radius-pill);
    background: var(--op-color-neutral-base);
    block-size: var(--__op-switch-height);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
    inline-size: var(--__op-switch-width);
    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */

    &::after {
      position: absolute;
      border-radius: var(--op-radius-circle);
      background-color: var(--op-color-neutral-plus-eight);
      block-size: var(--__op-switch-switch-size);
      content: '';
      inline-size: var(--__op-switch-switch-size);
      inset-block-start: var(--__op-switch-half-switch-padding);
      inset-inline-start: var(--__op-switch-half-switch-padding);
      transition: var(--op-transition-input);
    }
  }

  /* Prevent labels after the toggle being full width */
  & + label {
    inline-size: fit-content;
  }

  input {
    block-size: 0;
    inline-size: 0;
    margin-inline-end: calc(-1 * var(--op-space-x-small));

    &:disabled {
      visibility: hidden;
    }

    &:disabled + label {
      cursor: not-allowed;
      opacity: var(--_op-switch-opacity-disabled);
    }

    &:checked + label {
      background-color: var(--op-color-primary-base);
      box-shadow: none;

      &::after {
        inset-inline-start: calc(100% - var(--__op-switch-half-switch-padding));
        transform: translateX(-100%);
      }
    }

    &:hover + label {
      &::after {
        background-color: var(--op-color-primary-plus-five);
      }
    }

    &:focus-visible + label {
      box-shadow:
        0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six),
        inset var(--op-border-all) var(--op-color-primary-minus-three);

      &::after {
        background-color: var(--op-color-neutral-plus-five);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
      }
    }

    &:focus-visible:checked + label {
      &::after {
        background-color: var(--op-color-primary-plus-six);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
      }
    }
  }

  /* Size Modifiers */
  &.switch--small {
    --__op-switch-width: var(--_op-switch-width-small);
    --__op-switch-height: var(--_op-switch-height-small);
  }

  &.switch--large {
    --__op-switch-width: var(--_op-switch-width-large);
    --__op-switch-height: var(--_op-switch-height-large);
  }
}
.tab-group {
  display: flex;
  align-items: center;
}
.tab {
  /* Public API */
  --_op-tab-font-small: var(--op-font-x-small);
  --_op-tab-font-large: var(--op-font-small);
  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
  --_op-tab-indicator-width-small: var(--op-border-width-large);
  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
  --_op-tab-disabled-opacity: var(--op-opacity-disabled);

  /* Private API */
  --__op-tab-font-size: var(--_op-tab-font-large);
  --__op-tab-padding: var(--_op-tab-padding-large);
  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  --__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;

  padding: var(--__op-tab-padding);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  font-size: var(--__op-tab-font-size);
  text-decoration: none;

  &.tab--active {
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
  }

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
    color: var(--op-color-primary-on-plus-seven);
  }

  /* Focus State */
  &:focus-visible:not(.tab--disabled) {
    z-index: 1;
    box-shadow: var(--op-input-focus-primary);

    &.tab--active {
      box-shadow:
        var(--__op-tab-indicator) var(--op-color-primary-plus-one),
        var(--op-input-focus-primary);
    }
  }

  /* Disabled State */
  &.tab--disabled {
    opacity: var(--_op-tab-disabled-opacity);
    pointer-events: none;
  }

  /* Size Modifiers */
  &.tab--small {
    --__op-tab-padding: var(--_op-tab-padding-small);
    --__op-tab-font-size: var(--_op-tab-font-small);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
  }

  &.tab--large {
    --__op-tab-padding: var(--_op-tab-padding-large);
    --__op-tab-font-size: var(--_op-tab-font-large);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  }
}
.table {
  /* Public API */

  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */

  /* Private API */

  /* These allow for overriding specific padding versions easier. */
  --__op-table-cell-height: var(--_op-table-cell-height-default);

  border-radius: var(--op-radius-medium);
  border-collapse: collapse;
  box-shadow: var(--op-border-all) var(--op-color-border);
  contain: paint;
  inline-size: 100%;
  table-layout: auto;

  /* Elements */

  thead {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-top) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-eight);

    &:has(th input[type='checkbox']:checked) {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }

  th {
    font-weight: var(--op-font-weight-semi-bold);
    text-align: start;
  }

  tbody,
  tfoot {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
  }

  th,
  td {
    block-size: var(--__op-table-cell-height);
    font-size: var(--op-font-small);
    padding-block: var(--op-space-2x-small);
    padding-inline: var(--op-space-small);
  }

  tfoot tr {
    box-shadow: var(--op-border-top) var(--op-color-border);
  }

  tr:not(:last-child) {
    box-shadow: inset var(--op-border-top) var(--op-color-border);
  }

  /* Modifiers */

  /* stylelint-disable no-descending-specificity */
  &.table--primary {
    thead {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }

  &.table--danger {
    thead {
      background-color: var(--op-color-alerts-danger-plus-seven);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
  }
  /* stylelint-enable no-descending-specificity */

  &.table--container {
    overflow-y: auto;
  }

  /* Layout Modifiers */
  &.table--auto-layout {
    table-layout: auto;
  }

  &.table--fixed-layout {
    table-layout: fixed;
  }

  /* Table Density Modifiers */
  &.table--default-density {
    --__op-table-cell-height: var(--_op-table-cell-height-default);
  }

  &.table--comfortable-density {
    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
  }

  &.table--compact-density {
    --__op-table-cell-height: var(--_op-table-cell-height-compact);
  }

  /* Striped Modifiers */
  &.table--even-striped {
    tbody tr:nth-child(even) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }

  &.table--odd-striped {
    tbody tr:nth-child(odd) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }

  /* Sticky Header Row Modifier */
  /* stylelint-disable no-descending-specificity */
  &.table--sticky-header thead {
    position: sticky;
    inset-block-start: 0;
  }
  /* stylelint-enable no-descending-specificity */

  /* Sticky Footer Row Modifier */
  &.table--sticky-footer tfoot {
    position: sticky;
    inset-block-end: 0;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-pill);
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  user-select: none;
  white-space: nowrap;

  /* Elements */

  .tag__label {
    padding-inline: var(--op-space-2x-small);
  }

  .btn--icon {
    --__op-btn-height: var(--op-font-medium);

    /* Hover State */
    &:hover {
      background-color: var(--op-color-neutral-minus-three);
      box-shadow: none;
      color: var(--op-color-neutral-on-minus-three);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-neutral-base);
      box-shadow: var(--op-input-focus-neutral);
      color: var(--op-color-neutral-on-base);
    }
  }

  /* Modifiers */

  &.tag--read-only {
    /* This is here for consistency */
  }

  &.tag--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);

    .btn--icon {
      color: var(--op-color-primary-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-primary-minus-three);
        box-shadow: none;
        color: var(--op-color-primary-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-base);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-base);
      }
    }
  }

  &.tag--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-danger-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-danger-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-base);
        box-shadow: var(--op-input-focus-danger);
        color: var(--op-color-alerts-danger-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-warning-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-warning-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-warning-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-warning-base);
        box-shadow: var(--op-input-focus-warning);
        color: var(--op-color-alerts-warning-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-info-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-info-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-info-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-info-base);
        box-shadow: var(--op-input-focus-info);
        color: var(--op-color-alerts-info-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-notice-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-notice-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-notice-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-notice-base);
        box-shadow: var(--op-input-focus-notice);
        color: var(--op-color-alerts-notice-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
}
.text-pair {
  /* Public API (customizable component options) */
  --_op-text-pair-font-size-small: var(--op-font-small);
  --_op-text-pair-font-size-medium: var(--op-font-medium);
  --_op-text-pair-font-size-large: var(--op-font-large);

  /* Private API (component option defaults) */
  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);

  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);

  &.text-pair--inline {
    flex-direction: row;
    align-items: baseline;
  }

  .text-pair__title {
    font-size: var(--__op-text-pair-title-font-size);
    font-weight: var(--op-font-weight-semi-bold);
    line-height: var(--op-line-height-dense);

    &.text-pair__title--small {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
    }

    &.text-pair__title--medium {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
    }

    &.text-pair__title--large {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
    }
  }

  .text-pair__subtitle {
    font-size: var(--__op-text-pair-subtitle-font-size);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-dense);

    &.text-pair__subtitle--small {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
    }

    &.text-pair__subtitle--medium {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
    }

    &.text-pair__subtitle--large {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
    }
  }
}
/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
[data-tooltip-text] {
  /* Public API (customizable component options) */
  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */
  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
  --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
  --_op-tooltip-tooltip-font-size: var(--op-font-small);

  position: relative;

  &::before,
  &::after {
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-tooltip);
    visibility: hidden;
  }

  &::before {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    display: block;
    padding: var(--_op-tooltip-padding);
    border-radius: var(--_op-tooltip-tooltip-radius);
    background-color: var(--_op-tooltip-background-color);
    color: var(--_op-tooltip-text-color);
    content: attr(data-tooltip-text);
    font-family: var(--op-font-family); /* Makes tooltips on icons work */
    font-size: var(--_op-tooltip-tooltip-font-size);
    inline-size: max-content;
    max-inline-size: var(--_op-tooltip-max-width);
    overflow-wrap: break-word;
    pointer-events: none;
    text-align: center;
    white-space: normal;
  }

  &::after {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
    content: '';
    pointer-events: none;
  }

  &:hover {
    &::before,
    &::after {
      opacity: var(--op-opacity-full);
      visibility: visible;
    }
  }

  &[data-tooltip-position='top'],
  &:not([data-tooltip-position]) {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    &::before {
      inset-block-end: 100%;
      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
      inset-block-end: 100%;
      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='left'] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }

    &::before {
      inset-inline-end: 100%;
      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
      inset-inline-end: 100%;
      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='bottom'] {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    &::before {
      inset-block-start: 100%;
      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
      inset-block-start: 100%;
      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='right'] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }

    &::before {
      inset-inline-start: 100%;
      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
      inset-inline-start: 100%;
      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }
}