@oliasoft-open-source/react-ui-library 3.1.28 → 3.1.29-beta-0

package/dist/gui-library.css

@@ -0,0 +1,1202 @@
+@import '../../../node_modules/normalize.css/normalize.css';
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-Italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-BoldItalic.woff2') format('woff2');
+}
+/* Border-Box */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  box-sizing: border-box;
+}
+/* iPad Input Shadows */
+input[type='text'],
+input[type='email'],
+input[type='search'],
+input[type='password'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* mobile firefox too! */
+}
+/* FF dotted border outlines */
+:focus {
+  outline: none !important;
+}
+::-moz-focus-inner {
+  border: 0 !important;
+}
+/* Strip native browser link styles */
+a {
+  color: inherit;
+}
+/*
+ This file has shared variables that are re-used:
+   - in other LESS files/modules
+   - in JavaScript, via https://www.npmjs.com/package/less-vars-to-js
+
+ Only use simple variables in this file
+ */
+/*
+  Allow the parent project to optionally override the primary colour palette
+  by having an `override.less` file in its root directory
+ */
+/*
+  Other shared variables
+ */
+:root {
+  --color-primary-0: hsl(0, 0%, 100%);
+  --color-primary-50: hsl(18.24742268, 82.90598291%, 97.5%);
+  --color-primary-100: hsl(18.24742268, 82.90598291%, 92.5%);
+  --color-primary-150: hsl(18.24742268, 82.90598291%, 87.5%);
+  --color-primary-200: hsl(18.24742268, 82.90598291%, 82.5%);
+  --color-primary-250: hsl(18.24742268, 82.90598291%, 77.5%);
+  --color-primary-300: hsl(18.24742268, 82.90598291%, 72.5%);
+  --color-primary-350: hsl(18.24742268, 82.90598291%, 67.5%);
+  --color-primary-400: hsl(18.24742268, 82.90598291%, 62.5%);
+  --color-primary-450: hsl(18.24742268, 82.90598291%, 57.5%);
+  --color-primary-500: hsl(18.24742268, 82.90598291%, 52.5%);
+  --color-primary-550: hsl(18.24742268, 82.90598291%, 47.5%);
+  --color-primary-600: hsl(18.24742268, 82.90598291%, 42.5%);
+  --color-primary-650: hsl(18.24742268, 82.90598291%, 37.5%);
+  --color-primary-700: hsl(18.24742268, 82.90598291%, 32.5%);
+  --color-primary-750: hsl(18.24742268, 82.90598291%, 27.5%);
+  --color-primary-800: hsl(18.24742268, 82.90598291%, 22.5%);
+  --color-primary-850: hsl(18.24742268, 82.90598291%, 17.5%);
+  --color-primary-900: hsl(18.24742268, 82.90598291%, 12.5%);
+  --color-primary-950: hsl(18.24742268, 82.90598291%, 7.5%);
+  --color-primary-1000: hsl(18.24742268, 82.90598291%, 2.5%);
+  --color-error-0: hsl(180, 100%, 100%);
+  --color-error-50: hsl(0, 71.29186603%, 97.5%);
+  --color-error-100: hsl(0, 71.29186603%, 92.5%);
+  --color-error-150: hsl(0, 71.29186603%, 87.5%);
+  --color-error-200: hsl(0, 71.29186603%, 82.5%);
+  --color-error-250: hsl(0, 71.29186603%, 77.5%);
+  --color-error-300: hsl(0, 71.29186603%, 72.5%);
+  --color-error-350: hsl(0, 71.29186603%, 67.5%);
+  --color-error-400: hsl(0, 71.29186603%, 62.5%);
+  --color-error-450: hsl(0, 71.29186603%, 57.5%);
+  --color-error-500: hsl(0, 71.29186603%, 52.5%);
+  --color-error-550: hsl(0, 71.29186603%, 47.5%);
+  --color-error-600: hsl(0, 71.29186603%, 42.5%);
+  --color-error-650: hsl(0, 71.29186603%, 37.5%);
+  --color-error-700: hsl(0, 71.29186603%, 32.5%);
+  --color-error-750: hsl(0, 71.29186603%, 27.5%);
+  --color-error-800: hsl(0, 71.29186603%, 22.5%);
+  --color-error-850: hsl(0, 71.29186603%, 17.5%);
+  --color-error-900: hsl(0, 71.29186603%, 12.5%);
+  --color-error-950: hsl(0, 71.29186603%, 7.5%);
+  --color-error-1000: hsl(0, 71.29186603%, 2.5%);
+  --color-success-0: hsl(0, 0%, 100%);
+  --color-success-50: hsl(120, 52.03252033%, 97.5%);
+  --color-success-100: hsl(120, 52.03252033%, 92.5%);
+  --color-success-150: hsl(120, 52.03252033%, 87.5%);
+  --color-success-200: hsl(120, 52.03252033%, 82.5%);
+  --color-success-250: hsl(120, 52.03252033%, 77.5%);
+  --color-success-300: hsl(120, 52.03252033%, 72.5%);
+  --color-success-350: hsl(120, 52.03252033%, 67.5%);
+  --color-success-400: hsl(120, 52.03252033%, 62.5%);
+  --color-success-450: hsl(120, 52.03252033%, 57.5%);
+  --color-success-500: hsl(120, 52.03252033%, 52.5%);
+  --color-success-550: hsl(120, 52.03252033%, 47.5%);
+  --color-success-600: hsl(120, 52.03252033%, 42.5%);
+  --color-success-650: hsl(120, 52.03252033%, 37.5%);
+  --color-success-700: hsl(120, 52.03252033%, 32.5%);
+  --color-success-750: hsl(120, 52.03252033%, 27.5%);
+  --color-success-800: hsl(120, 52.03252033%, 22.5%);
+  --color-success-850: hsl(120, 52.03252033%, 17.5%);
+  --color-success-900: hsl(120, 52.03252033%, 12.5%);
+  --color-success-950: hsl(120, 52.03252033%, 7.5%);
+  --color-success-1000: hsl(120, 52.03252033%, 2.5%);
+  --color-warning-0: hsl(240, 100%, 100%);
+  --color-warning-50: hsl(44.9197861, 76.32653061%, 97.5%);
+  --color-warning-100: hsl(44.9197861, 76.32653061%, 92.5%);
+  --color-warning-150: hsl(44.9197861, 76.32653061%, 87.5%);
+  --color-warning-200: hsl(44.9197861, 76.32653061%, 82.5%);
+  --color-warning-250: hsl(44.9197861, 76.32653061%, 77.5%);
+  --color-warning-300: hsl(44.9197861, 76.32653061%, 72.5%);
+  --color-warning-350: hsl(44.9197861, 76.32653061%, 67.5%);
+  --color-warning-400: hsl(44.9197861, 76.32653061%, 62.5%);
+  --color-warning-450: hsl(44.9197861, 76.32653061%, 57.5%);
+  --color-warning-500: hsl(44.9197861, 76.32653061%, 52.5%);
+  --color-warning-550: hsl(44.9197861, 76.32653061%, 47.5%);
+  --color-warning-600: hsl(44.9197861, 76.32653061%, 42.5%);
+  --color-warning-650: hsl(44.9197861, 76.32653061%, 37.5%);
+  --color-warning-700: hsl(44.9197861, 76.32653061%, 32.5%);
+  --color-warning-750: hsl(44.9197861, 76.32653061%, 27.5%);
+  --color-warning-800: hsl(44.9197861, 76.32653061%, 22.5%);
+  --color-warning-850: hsl(44.9197861, 76.32653061%, 17.5%);
+  --color-warning-900: hsl(44.9197861, 76.32653061%, 12.5%);
+  --color-warning-950: hsl(44.9197861, 76.32653061%, 7.5%);
+  --color-warning-1000: hsl(44.9197861, 76.32653061%, 2.5%);
+  --color-info-0: hsl(0, 0%, 100%);
+  --color-info-50: hsl(201.03092784, 82.90598291%, 97.5%);
+  --color-info-100: hsl(201.03092784, 82.90598291%, 92.5%);
+  --color-info-150: hsl(201.03092784, 82.90598291%, 87.5%);
+  --color-info-200: hsl(201.03092784, 82.90598291%, 82.5%);
+  --color-info-250: hsl(201.03092784, 82.90598291%, 77.5%);
+  --color-info-300: hsl(201.03092784, 82.90598291%, 72.5%);
+  --color-info-350: hsl(201.03092784, 82.90598291%, 67.5%);
+  --color-info-400: hsl(201.03092784, 82.90598291%, 62.5%);
+  --color-info-450: hsl(201.03092784, 82.90598291%, 57.5%);
+  --color-info-500: hsl(201.03092784, 82.90598291%, 52.5%);
+  --color-info-550: hsl(201.03092784, 82.90598291%, 47.5%);
+  --color-info-600: hsl(201.03092784, 82.90598291%, 42.5%);
+  --color-info-650: hsl(201.03092784, 82.90598291%, 37.5%);
+  --color-info-700: hsl(201.03092784, 82.90598291%, 32.5%);
+  --color-info-750: hsl(201.03092784, 82.90598291%, 27.5%);
+  --color-info-800: hsl(201.03092784, 82.90598291%, 22.5%);
+  --color-info-850: hsl(201.03092784, 82.90598291%, 17.5%);
+  --color-info-900: hsl(201.03092784, 82.90598291%, 12.5%);
+  --color-info-950: hsl(201.03092784, 82.90598291%, 7.5%);
+  --color-info-1000: hsl(201.03092784, 82.90598291%, 2.5%);
+  --color-neutral-0: hsl(0, 0%, 100%);
+  --color-neutral-50: hsl(210, 10%, 97.5%);
+  --color-neutral-100: hsl(210, 10%, 92.5%);
+  --color-neutral-150: hsl(210, 10%, 87.5%);
+  --color-neutral-200: hsl(210, 10%, 82.5%);
+  --color-neutral-250: hsl(210, 10%, 77.5%);
+  --color-neutral-300: hsl(210, 10%, 72.5%);
+  --color-neutral-350: hsl(210, 10%, 67.5%);
+  --color-neutral-400: hsl(210, 10%, 62.5%);
+  --color-neutral-450: hsl(210, 10%, 57.5%);
+  --color-neutral-500: hsl(210, 10%, 52.5%);
+  --color-neutral-550: hsl(210, 10%, 47.5%);
+  --color-neutral-600: hsl(210, 10%, 42.5%);
+  --color-neutral-650: hsl(210, 10%, 37.5%);
+  --color-neutral-700: hsl(210, 10%, 32.5%);
+  --color-neutral-750: hsl(210, 10%, 27.5%);
+  --color-neutral-800: hsl(210, 10%, 22.5%);
+  --color-neutral-850: hsl(210, 10%, 17.5%);
+  --color-neutral-900: hsl(210, 10%, 12.5%);
+  --color-neutral-950: hsl(210, 10%, 7.5%);
+  --color-neutral-1000: hsl(210, 10%, 2.5%);
+  --color-primary-muted-0: hsl(0, 0%, 100%);
+  --color-primary-muted-50: hsl(18.24742268, 57.90598291%, 97.5%);
+  --color-primary-muted-100: hsl(18.24742268, 57.90598291%, 92.5%);
+  --color-primary-muted-150: hsl(18.24742268, 57.90598291%, 87.5%);
+  --color-primary-muted-200: hsl(18.24742268, 57.90598291%, 82.5%);
+  --color-primary-muted-250: hsl(18.24742268, 57.90598291%, 77.5%);
+  --color-primary-muted-300: hsl(18.24742268, 57.90598291%, 72.5%);
+  --color-primary-muted-350: hsl(18.24742268, 57.90598291%, 67.5%);
+  --color-primary-muted-400: hsl(18.24742268, 57.90598291%, 62.5%);
+  --color-primary-muted-450: hsl(18.24742268, 57.90598291%, 57.5%);
+  --color-primary-muted-500: hsl(18.24742268, 57.90598291%, 52.5%);
+  --color-primary-muted-550: hsl(18.24742268, 57.90598291%, 47.5%);
+  --color-primary-muted-600: hsl(18.24742268, 57.90598291%, 42.5%);
+  --color-primary-muted-650: hsl(18.24742268, 57.90598291%, 37.5%);
+  --color-primary-muted-700: hsl(18.24742268, 57.90598291%, 32.5%);
+  --color-primary-muted-750: hsl(18.24742268, 57.90598291%, 27.5%);
+  --color-primary-muted-800: hsl(18.24742268, 57.90598291%, 22.5%);
+  --color-primary-muted-850: hsl(18.24742268, 57.90598291%, 17.5%);
+  --color-primary-muted-900: hsl(18.24742268, 57.90598291%, 12.5%);
+  --color-primary-muted-950: hsl(18.24742268, 57.90598291%, 7.5%);
+  --color-primary-muted-1000: hsl(18.24742268, 57.90598291%, 2.5%);
+  --color-error-muted-0: hsl(180, 100%, 100%);
+  --color-error-muted-50: hsl(0, 46.29186603%, 97.5%);
+  --color-error-muted-100: hsl(0, 46.29186603%, 92.5%);
+  --color-error-muted-150: hsl(0, 46.29186603%, 87.5%);
+  --color-error-muted-200: hsl(0, 46.29186603%, 82.5%);
+  --color-error-muted-250: hsl(0, 46.29186603%, 77.5%);
+  --color-error-muted-300: hsl(0, 46.29186603%, 72.5%);
+  --color-error-muted-350: hsl(0, 46.29186603%, 67.5%);
+  --color-error-muted-400: hsl(0, 46.29186603%, 62.5%);
+  --color-error-muted-450: hsl(0, 46.29186603%, 57.5%);
+  --color-error-muted-500: hsl(0, 46.29186603%, 52.5%);
+  --color-error-muted-550: hsl(0, 46.29186603%, 47.5%);
+  --color-error-muted-600: hsl(0, 46.29186603%, 42.5%);
+  --color-error-muted-650: hsl(0, 46.29186603%, 37.5%);
+  --color-error-muted-700: hsl(0, 46.29186603%, 32.5%);
+  --color-error-muted-750: hsl(0, 46.29186603%, 27.5%);
+  --color-error-muted-800: hsl(0, 46.29186603%, 22.5%);
+  --color-error-muted-850: hsl(0, 46.29186603%, 17.5%);
+  --color-error-muted-900: hsl(0, 46.29186603%, 12.5%);
+  --color-error-muted-950: hsl(0, 46.29186603%, 7.5%);
+  --color-error-muted-1000: hsl(0, 46.29186603%, 2.5%);
+  --color-success-muted-0: hsl(0, 0%, 100%);
+  --color-success-muted-50: hsl(120, 27.03252033%, 97.5%);
+  --color-success-muted-100: hsl(120, 27.03252033%, 92.5%);
+  --color-success-muted-150: hsl(120, 27.03252033%, 87.5%);
+  --color-success-muted-200: hsl(120, 27.03252033%, 82.5%);
+  --color-success-muted-250: hsl(120, 27.03252033%, 77.5%);
+  --color-success-muted-300: hsl(120, 27.03252033%, 72.5%);
+  --color-success-muted-350: hsl(120, 27.03252033%, 67.5%);
+  --color-success-muted-400: hsl(120, 27.03252033%, 62.5%);
+  --color-success-muted-450: hsl(120, 27.03252033%, 57.5%);
+  --color-success-muted-500: hsl(120, 27.03252033%, 52.5%);
+  --color-success-muted-550: hsl(120, 27.03252033%, 47.5%);
+  --color-success-muted-600: hsl(120, 27.03252033%, 42.5%);
+  --color-success-muted-650: hsl(120, 27.03252033%, 37.5%);
+  --color-success-muted-700: hsl(120, 27.03252033%, 32.5%);
+  --color-success-muted-750: hsl(120, 27.03252033%, 27.5%);
+  --color-success-muted-800: hsl(120, 27.03252033%, 22.5%);
+  --color-success-muted-850: hsl(120, 27.03252033%, 17.5%);
+  --color-success-muted-900: hsl(120, 27.03252033%, 12.5%);
+  --color-success-muted-950: hsl(120, 27.03252033%, 7.5%);
+  --color-success-muted-1000: hsl(120, 27.03252033%, 2.5%);
+  --color-warning-muted-0: hsl(240, 100%, 100%);
+  --color-warning-muted-50: hsl(44.9197861, 51.32653061%, 97.5%);
+  --color-warning-muted-100: hsl(44.9197861, 51.32653061%, 92.5%);
+  --color-warning-muted-150: hsl(44.9197861, 51.32653061%, 87.5%);
+  --color-warning-muted-200: hsl(44.9197861, 51.32653061%, 82.5%);
+  --color-warning-muted-250: hsl(44.9197861, 51.32653061%, 77.5%);
+  --color-warning-muted-300: hsl(44.9197861, 51.32653061%, 72.5%);
+  --color-warning-muted-350: hsl(44.9197861, 51.32653061%, 67.5%);
+  --color-warning-muted-400: hsl(44.9197861, 51.32653061%, 62.5%);
+  --color-warning-muted-450: hsl(44.9197861, 51.32653061%, 57.5%);
+  --color-warning-muted-500: hsl(44.9197861, 51.32653061%, 52.5%);
+  --color-warning-muted-550: hsl(44.9197861, 51.32653061%, 47.5%);
+  --color-warning-muted-600: hsl(44.9197861, 51.32653061%, 42.5%);
+  --color-warning-muted-650: hsl(44.9197861, 51.32653061%, 37.5%);
+  --color-warning-muted-700: hsl(44.9197861, 51.32653061%, 32.5%);
+  --color-warning-muted-750: hsl(44.9197861, 51.32653061%, 27.5%);
+  --color-warning-muted-800: hsl(44.9197861, 51.32653061%, 22.5%);
+  --color-warning-muted-850: hsl(44.9197861, 51.32653061%, 17.5%);
+  --color-warning-muted-900: hsl(44.9197861, 51.32653061%, 12.5%);
+  --color-warning-muted-950: hsl(44.9197861, 51.32653061%, 7.5%);
+  --color-warning-muted-1000: hsl(44.9197861, 51.32653061%, 2.5%);
+  --color-info-muted-0: hsl(0, 0%, 100%);
+  --color-info-muted-50: hsl(201.03092784, 57.90598291%, 97.5%);
+  --color-info-muted-100: hsl(201.03092784, 57.90598291%, 92.5%);
+  --color-info-muted-150: hsl(201.03092784, 57.90598291%, 87.5%);
+  --color-info-muted-200: hsl(201.03092784, 57.90598291%, 82.5%);
+  --color-info-muted-250: hsl(201.03092784, 57.90598291%, 77.5%);
+  --color-info-muted-300: hsl(201.03092784, 57.90598291%, 72.5%);
+  --color-info-muted-350: hsl(201.03092784, 57.90598291%, 67.5%);
+  --color-info-muted-400: hsl(201.03092784, 57.90598291%, 62.5%);
+  --color-info-muted-450: hsl(201.03092784, 57.90598291%, 57.5%);
+  --color-info-muted-500: hsl(201.03092784, 57.90598291%, 52.5%);
+  --color-info-muted-550: hsl(201.03092784, 57.90598291%, 47.5%);
+  --color-info-muted-600: hsl(201.03092784, 57.90598291%, 42.5%);
+  --color-info-muted-650: hsl(201.03092784, 57.90598291%, 37.5%);
+  --color-info-muted-700: hsl(201.03092784, 57.90598291%, 32.5%);
+  --color-info-muted-750: hsl(201.03092784, 57.90598291%, 27.5%);
+  --color-info-muted-800: hsl(201.03092784, 57.90598291%, 22.5%);
+  --color-info-muted-850: hsl(201.03092784, 57.90598291%, 17.5%);
+  --color-info-muted-900: hsl(201.03092784, 57.90598291%, 12.5%);
+  --color-info-muted-950: hsl(201.03092784, 57.90598291%, 7.5%);
+  --color-info-muted-1000: hsl(201.03092784, 57.90598291%, 2.5%);
+}
+:root {
+  color-scheme: initial;
+  --color-text: rgba(0, 0, 0, 0.87);
+  --color-text-muted: #7d7b7a;
+  --color-text-faint: #acabab;
+  --color-text-error: hsl(0, 40%, 50%);
+  --color-text-warning: var(--color-warning-700);
+  --color-text-success: hsl(120, 40%, 50%);
+  --color-text-info: hsl(201.03092784, 40%, 50%);
+  --color-text-primary: #eb6429;
+  --color-text-primary-hover: #ce4c13;
+  --color-text-primary-active: #9f3b0f;
+  --color-background: #f5f7f9;
+  --color-background-raised: white;
+  --color-background-disabled: rgba(0, 0, 0, 0.05);
+  --color-background-info: hsl(201.03092784, 40%, 90%);
+  --color-background-error: hsl(0, 40%, 90%);
+  --color-background-success: hsl(120, 40%, 90%);
+  --color-background-warning: var(--color-warning-100);
+  --color-background-primary: #eb6429;
+  --color-background-input: white;
+  --color-background-listitem-active: #fff0e4;
+  --color-background-listitem-hover: #f5f7f9;
+  --color-background-menuitem-active: #edf1f4;
+  --color-background-menuitem-hover: #f5f7f9;
+  --color-border: #ddd;
+  --color-border-hover: #bbb;
+  --color-border-focus: var(--color-info-muted-500);
+  --color-border-error: var(--color-error-muted-300);
+  --color-border-error-hover: var(--color-error-muted-400);
+  --color-border-warning: var(--color-warning-muted-300);
+  --color-border-warning-hover: var(--color-warning-muted-400);
+  --shadow-focus: 0 0 0 2px rgba(41, 167, 235, 0.25);
+}
+html[data-theme='dark'] {
+  color-scheme: dark;
+  --color-text: var(--color-neutral-200);
+  --color-text-muted: var(--color-neutral-400);
+  --color-text-faint: var(--color-neutral-600);
+  --color-text-primary: var(--color-primary-muted-500);
+  --color-text-primary-active: var(--color-primary-muted-400);
+  --color-text-primary-hover: var(--color-primary-muted-450);
+  --color-text-error: var(--color-error-muted-300);
+  --color-text-info: var(--color-info-muted-300);
+  --color-text-success: var(--color-success-muted-300);
+  --color-text-warning: var(--color-warning-muted-300);
+  --color-background: var(--color-neutral-900);
+  --color-background-raised: var(--color-neutral-800);
+  --color-background-disabled: rgba(0, 0, 0, 0.2);
+  --color-background-error: var(--color-error-muted-700);
+  --color-background-info: var(--color-info-muted-700);
+  --color-background-success: var(--color-success-muted-700);
+  --color-background-warning: var(--color-warning-muted-700);
+  --color-background-primary: var(--color-primary-muted-500);
+  --color-background-input: var(--color-neutral-750);
+  --color-background-listitem-active: var(--color-primary-muted-750);
+  --color-background-listitem-hover: var(--color-neutral-750);
+  --color-background-menuitem-active: var(--color-neutral-650);
+  --color-background-menuitem-hover: var(--color-neutral-700);
+  --color-border: var(--color-neutral-1000);
+  --color-border-hover: var(--color-neutral-500);
+  --color-border-focus: var(--color-info-500);
+  --color-border-error: var(--color-neutral-1000);
+  --color-border-warning: var(--color-neutral-1000);
+  --shadow-focus: 0 0 0 2px rgba(41, 167, 235, 0.5);
+}
+/*
+  LAYOUT
+*/
+/*
+  CARDS
+*/
+/*
+  INPUTS
+*/
+/*
+  Z-INDEX
+*/
+:root {
+  --shadow-topbar: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+[data-theme='dark'] {
+  --shadow-topbar: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+}
+.topbar {
+  top: 0;
+  left: 0;
+  z-index: 101;
+  width: 100%;
+  height: 60px;
+  box-shadow: var(--shadow-topbar);
+  background: var(--color-background-raised);
+  display: flex;
+  font-size: 13px;
+}
+.topbar.fixed {
+  position: fixed;
+}
+@media print {
+  .topbar {
+    display: none !important;
+  }
+}
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+.title img,
+.title svg {
+  max-height: 30px;
+  max-width: 300px;
+  height: auto;
+  width: auto;
+  color: var(--color-text);
+}
+.title .label {
+  color: var(--color-text);
+  margin-left: 5px;
+  white-space: nowrap;
+}
+.brand {
+  padding: 0;
+  position: relative;
+  flex-shrink: 0;
+}
+.title,
+.version,
+.link {
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.version {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 3px;
+  font-size: 10px;
+}
+.left,
+.right {
+  display: flex;
+  min-width: 0;
+}
+.left {
+  margin-right: 1.5rem;
+}
+.right {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.item,
+.link {
+  align-items: center;
+  display: flex;
+}
+.item {
+  line-height: 1;
+  margin-left: 1.5rem;
+  position: relative;
+  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
+  user-select: none;
+  vertical-align: middle;
+  min-width: 0;
+}
+.right .item {
+  margin-left: 0;
+  margin-right: 1.5rem;
+}
+.item.button,
+.item.menu {
+  flex-shrink: 0;
+}
+.label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  max-width: 100%;
+}
+.link {
+  text-decoration: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  line-height: 1;
+  max-width: 100%;
+}
+.link svg {
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+.link:hover {
+  color: var(--color-text-primary-hover);
+}
+.link:active {
+  color: var(--color-text-primary-active);
+}
+.link.active {
+  color: var(--color-text);
+}
+.link:hover,
+.link.active {
+  background-color: transparent;
+}
+.link:hover:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 2px solid var(--color-border);
+}
+.link.active:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 2px solid var(--color-text-primary-active);
+}
+.link[disabled] {
+  pointer-events: none;
+  color: var(--color-text-faint);
+}
+.alert {
+  background-color: var(--color-background-primary);
+  color: white;
+  text-align: center;
+  position: fixed;
+  top: 60px;
+  left: 0;
+  right: 0;
+  z-index: 98;
+  padding: 0.75rem;
+}
+.field {
+  margin-bottom: 14px;
+  color: var(--color-text);
+}
+.field.labelLeft {
+  display: flex;
+  align-items: center;
+}
+.field.labelLeft .fieldInput {
+  flex-grow: 1;
+}
+.formRow,
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+.formRow > *:not(:last-child),
+.form-row > *:not(:last-child) {
+  margin-right: 20px;
+}
+.formRow .button,
+.form-row .button {
+  margin-bottom: 14px;
+}
+.card {
+  color: var(--color-text);
+}
+.card.bordered {
+  background: var(--color-background-raised);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+.card.bordered.raised {
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.1);
+}
+.card.bordered .cardHeader {
+  background-color: var(--color-background);
+  padding: 10px 15px;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.card.bordered .cardContentBorderTop {
+  border-top: 1px solid var(--color-border);
+}
+.card.bordered .padding {
+  padding: 10px 15px;
+}
+.cardContent:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.cardContent:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+.cardHeader {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+}
+:root {
+  --color-background-button-default: var(--color-neutral-0);
+  --color-background-button-default-hover: var(--color-neutral-50);
+  --color-background-button-default-active: var(--color-neutral-100);
+  --color-background-button-primary: var(--color-primary-500);
+  --color-background-button-primary-hover: var(--color-primary-550);
+  --color-background-button-primary-active: var(--color-primary-600);
+  --color-background-button-success: var(--color-success-500);
+  --color-background-button-success-hover: var(--color-success-550);
+  --color-background-button-success-active: var(--color-success-600);
+  --color-background-button-error: var(--color-error-500);
+  --color-background-button-error-hover: var(--color-error-550);
+  --color-background-button-error-active: var(--color-error-600);
+  --color-border-button: rgba(0, 0, 0, 0.15);
+  --color-border-button-hover: rgba(0, 0, 0, 0.2);
+  --color-text-button-muted: rgba(0, 0, 0, 0.4);
+}
+html[data-theme='dark'] {
+  --color-background-button-default: var(--color-neutral-700);
+  --color-background-button-default-hover: var(--color-neutral-650);
+  --color-background-button-default-active: var(--color-neutral-600);
+  --color-background-button-primary: var(--color-primary-muted-500);
+  --color-background-button-primary-hover: var(--color-primary-muted-550);
+  --color-background-button-primary-active: var(--color-primary-muted-600);
+  --color-background-button-success: var(--color-success-muted-500);
+  --color-background-button-success-hover: var(--color-success-muted-550);
+  --color-background-button-success-active: var(--color-success-muted-600);
+  --color-background-button-error: var(--color-error-muted-500);
+  --color-background-button-error-hover: var(--color-error-muted-550);
+  --color-background-button-error-active: var(--color-error-muted-600);
+  --color-border-button: transparent;
+  --color-border-button-hover: transparent;
+  --color-text-button-muted: rgba(255, 255, 255, 0.4);
+}
+.button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  border: 1px solid var(--color-border-button);
+  vertical-align: baseline;
+  background: var(--color-background-button-default);
+  color: var(--color-text);
+  font-family: 'Lato', sans-serif;
+  padding: 9.5px 14px;
+  text-transform: none;
+  text-shadow: none;
+  font-weight: 700;
+  line-height: 1em;
+  font-style: normal;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 4px;
+  user-select: none;
+  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
+  max-width: 100%;
+  min-height: 38px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.button:hover {
+  background: var(--color-background-button-default-hover);
+  border-color: var(--color-border-button-hover);
+}
+.button:active {
+  background: var(--color-background-button-default-active);
+  box-shadow: none;
+}
+.button.active {
+  border-color: var(--color-background-button-primary);
+  color: var(--color-text-primary);
+  position: relative;
+  z-index: 2;
+}
+.button:hover,
+.button:focus,
+.button:active {
+  position: relative;
+  z-index: 1;
+}
+.button .icon {
+  margin: 0 8px 0 -4px;
+}
+.button .icon svg {
+  height: 14px;
+  width: 14px;
+}
+.iconOnly {
+  padding: 0.78571429em 0.78571429em 0.78571429em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.iconOnly .icon {
+  margin: 0;
+  line-height: 0;
+}
+.basic {
+  color: var(--color-text-primary);
+  background: transparent;
+  box-shadow: none !important;
+  border: none !important;
+}
+.basic.muted {
+  color: var(--color-text-button-muted);
+}
+.basic:hover,
+.basic:focus {
+  color: var(--color-text-primary-hover);
+  background: rgba(0, 0, 0, 0.05);
+}
+.basic:active,
+.basic.active {
+  color: var(--color-text-primary-active);
+  background: rgba(0, 0, 0, 0.1);
+}
+.disabled {
+  cursor: default;
+  pointer-events: none !important;
+  color: var(--color-text-faint) !important;
+  box-shadow: none !important;
+}
+.disabled:not(.active):not(.basic) {
+  background: var(--color-background-disabled) !important;
+  border: 1px solid var(--color-border) !important;
+}
+.small {
+  font-size: 12px;
+  min-height: 24px;
+  padding: 0 0.75rem;
+}
+.pill,
+.round {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 13px;
+  font-weight: bold;
+  border-radius: 19px;
+  display: inline-flex;
+  align-items: center;
+}
+.round {
+  padding: 0;
+  width: 38px;
+  line-height: 1;
+}
+.round.small {
+  width: 24px;
+}
+.orange {
+  background-color: var(--color-background-button-primary);
+}
+.orange:hover,
+.orange:focus {
+  background-color: var(--color-background-button-primary-hover);
+}
+.orange:active {
+  background-color: var(--color-background-button-primary-active);
+}
+.red {
+  background-color: var(--color-background-button-error);
+}
+.red:hover,
+.red:focus {
+  background-color: var(--color-background-button-error-hover);
+}
+.red:active {
+  background-color: var(--color-background-button-error-active);
+}
+.green {
+  background-color: var(--color-background-button-success);
+}
+.green:hover,
+.green:focus {
+  background-color: var(--color-background-button-success-hover);
+}
+.green:active {
+  background-color: var(--color-background-button-success-active);
+}
+.orange,
+.red,
+.green {
+  color: #fff;
+}
+.orange:hover,
+.red:hover,
+.green:hover,
+.orange:focus,
+.red:focus,
+.green:focus {
+  color: #fff;
+}
+.orange:active,
+.red:active,
+.green:active {
+  color: #fff;
+}
+.inverted {
+  background-color: transparent;
+  border-color: var(--color-text);
+  box-shadow: none;
+}
+.inverted:hover,
+.inverted:focus,
+.inverted:active {
+  box-shadow: none;
+}
+.inverted.orange {
+  color: var(--color-background-button-primary);
+  border-color: var(--color-background-button-primary);
+}
+.inverted.red {
+  color: var(--color-background-button-error);
+  border-color: var(--color-background-button-error);
+}
+.inverted.green {
+  color: var(--color-background-button-success);
+  border-color: var(--color-background-button-success);
+}
+.inverted.orange:hover,
+.inverted.red:hover,
+.inverted.green:hover,
+.inverted.orange:focus,
+.inverted.red:focus,
+.inverted.green:focus,
+.inverted.orange:active,
+.inverted.red:active,
+.inverted.green:active {
+  color: white;
+  box-shadow: none;
+}
+.groupOrderFirst,
+.groupOrderMiddle,
+.groupOrderLast {
+  margin-right: 0;
+}
+.groupOrderFirst,
+.groupOrderMiddle {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.groupOrderLast,
+.groupOrderMiddle {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.checkbox {
+  margin: 10px 0 11px 0;
+  position: relative;
+  display: inline-block;
+  backface-visibility: hidden;
+  vertical-align: baseline;
+  font-style: normal;
+  min-height: 17px;
+  font-size: inherit;
+  line-height: 17px;
+  min-width: 17px;
+  outline: 0px;
+}
+.checkbox.noLabel {
+  width: 17px;
+}
+.checkbox.small {
+  margin: 3px 0;
+  font-size: 12px;
+}
+.checkbox input {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 17px;
+  height: 17px;
+  opacity: 0 !important;
+  outline: 0px;
+  z-index: -1;
+}
+.checkbox label {
+  cursor: pointer;
+  user-select: none;
+  color: var(--color-text);
+  transition: color 0.1s ease 0s;
+  position: relative;
+  display: block;
+  padding-left: 1.85714em;
+  font-size: 1em;
+  outline: 0px;
+}
+.checkbox label .checkmark {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 17px;
+  height: 17px;
+  padding: 2px;
+  background: var(--color-background-input);
+  border-radius: 0.214286rem;
+  transition: border 0.1s ease 0s, opacity 0.1s ease 0s, transform 0.1s ease 0s, box-shadow 0.1s ease 0s;
+  border: 1px solid var(--color-border);
+  color: transparent;
+}
+.checkbox label .checkmark:hover {
+  border-color: var(--color-border-hover);
+}
+.checkbox input:checked ~ label .checkmark {
+  background: var(--color-background-primary);
+  border-color: transparent;
+  color: white;
+}
+.checkbox.disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.checkbox.disabled label {
+  color: var(--color-text-muted);
+}
+.checkbox.disabled .checkmark {
+  background: var(--color-background-disabled) !important;
+  border-color: var(--color-border) !important;
+}
+.checkbox.disabled input:checked ~ label .checkmark {
+  color: var(--color-text-faint);
+}
+.noMargin {
+  margin: 0;
+}
+.isInTable {
+  margin: 0;
+  position: relative;
+  top: 1px;
+}
+.inputInTable {
+  background-color: transparent;
+  border-radius: inherit !important;
+  height: 38px;
+  min-height: 100%;
+}
+.inputInTable:hover,
+.inputInTable:focus {
+  position: relative;
+}
+.inputInTable:hover {
+  z-index: 2;
+}
+.inputInTable:focus {
+  z-index: 3;
+}
+.inputFocus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.inputError,
+.inputWarning {
+  position: relative;
+}
+.inputError {
+  z-index: 2;
+  border-color: var(--color-border-error) !important;
+  color: var(--color-text-error) !important;
+  background-color: var(--color-background-error);
+}
+.inputError:hover {
+  border-color: var(--color-border-error-hover) !important;
+}
+.inputError:focus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.inputWarning {
+  z-index: 1;
+  border-color: var(--color-border-warning) !important;
+  color: var(--color-text-warning) !important;
+  background-color: var(--color-background-warning);
+}
+.inputWarning:hover {
+  border-color: var(--color-border-warning-hover) !important;
+}
+.inputWarning:focus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.inputDisabled {
+  pointer-events: none;
+  background-color: var(--color-background-disabled);
+  color: var(--color-text-muted);
+}
+.input {
+  margin: 0;
+  outline: 0;
+  text-align: left;
+  font-family: 'Lato', sans-serif;
+  padding: 9.5px 14px;
+  background: var(--color-background-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  border-radius: 4px;
+  transition: box-shadow 0.1s ease, border-color 0.1s ease;
+  box-shadow: none;
+  height: 38px;
+  width: 100%;
+  font-weight: 400;
+  font-style: normal;
+  position: relative;
+}
+.input::placeholder {
+  color: var(--color-text-faint);
+}
+.input.isInTable {
+  background-color: transparent;
+  border-radius: inherit !important;
+  height: 38px;
+  min-height: 100%;
+}
+.input.isInTable:hover,
+.input.isInTable:focus {
+  position: relative;
+}
+.input.isInTable:hover {
+  z-index: 2;
+}
+.input.isInTable:focus {
+  z-index: 3;
+}
+.input:hover,
+.input:focus {
+  z-index: 1;
+}
+.input:hover {
+  border-color: var(--color-border-hover);
+}
+.input:focus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.input.small {
+  font-size: 12px;
+  height: 24px;
+  padding: 0 7px;
+  line-height: 24px;
+}
+.input.error {
+  position: relative;
+  z-index: 2;
+  border-color: var(--color-border-error) !important;
+  color: var(--color-text-error) !important;
+  background-color: var(--color-background-error);
+}
+.input.error:hover {
+  border-color: var(--color-border-error-hover) !important;
+}
+.input.error:focus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.input.warning {
+  position: relative;
+  z-index: 1;
+  border-color: var(--color-border-warning) !important;
+  color: var(--color-text-warning) !important;
+  background-color: var(--color-background-warning);
+}
+.input.warning:hover {
+  border-color: var(--color-border-warning-hover) !important;
+}
+.input.warning:focus {
+  outline: none !important;
+  border: 1px solid var(--color-border-focus) !important;
+  box-shadow: var(--shadow-focus);
+}
+.input[disabled] {
+  pointer-events: none;
+  background-color: var(--color-background-disabled);
+  color: var(--color-text-muted);
+}
+.input.right {
+  text-align: right;
+}
+.groupOrderFirst,
+.groupOrderMiddle,
+.groupOrderLast {
+  flex: 1;
+}
+.groupOrderFirst .input:hover,
+.groupOrderMiddle .input:hover,
+.groupOrderLast .input:hover,
+.groupOrderFirst .input:focus,
+.groupOrderMiddle .input:focus,
+.groupOrderLast .input:focus {
+  z-index: 2;
+}
+.groupOrderFirst,
+.groupOrderMiddle {
+  margin-right: -1px;
+}
+.groupOrderFirst .input,
+.groupOrderMiddle .input {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.groupOrderLast .input,
+.groupOrderMiddle .input {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+:root {
+  --color-border-message: rgba(0, 0, 0, 0.1);
+}
+html[data-theme='dark'] {
+  --color-border-message: transparent;
+}
+.container {
+  padding: 10px 14px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: flex-start;
+  line-height: 20px;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  border: 1px solid var(--color-border-message);
+}
+.container::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+.container.block {
+  display: flex;
+}
+.container.info {
+  color: var(--color-text-info);
+  background-color: var(--color-background-info);
+}
+.container.success {
+  color: var(--color-text-success);
+  background-color: var(--color-background-success);
+}
+.container.warning {
+  color: var(--color-text-warning);
+  background-color: var(--color-background-warning);
+}
+.container.error {
+  color: var(--color-text-error);
+  background-color: var(--color-background-error);
+}
+.content {
+  flex: 1;
+  min-width: 0;
+}
+.heading {
+  font-weight: bold;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  line-height: 20px;
+  margin-bottom: 3px;
+}
+.icon,
+.dismiss {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+}
+.icon {
+  margin-right: 12px;
+}
+.dismiss {
+  margin-left: 12px;
+  color: var(--color-text);
+}
+.dismiss.absolute {
+  position: absolute;
+  top: 10px;
+  right: 14px;
+}
+.legendToggle,
+.dismiss {
+  opacity: 0.4;
+}
+.legendToggle:hover,
+.dismiss:hover {
+  opacity: 0.8;
+  cursor: pointer;
+}
+.legendToggle:active,
+.dismiss:active {
+  opacity: 1;
+}
+.legendToggle {
+  margin-top: 3px;
+}
+.detailsText {
+  margin-top: 3px;
+  word-break: break-word;
+}