/**
 * GitHub Gist Theme
 * Author : Anthony Attard - https://github.com/AnthonyAttard
 * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
 */

.hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #d73a49;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #6f42c1;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

.hljs-number {
  color: #005cc5;
}

.hljs-string {
  color: #032f62;
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(../../static/media/73d88d2ca065037a4d55.woff2?v=3.15) format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url(../../static/media/e2e12d2e9288439ecb06.woff2?v=3.15) format("woff2");
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(../../static/media/cff684e59ffb052d72cb.woff2) format('woff2');
}
/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 */
/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com
 */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
	box-sizing: border-box;
}
/**
Use a more readable tab size (opinionated).
*/
html {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	   tab-size: 4;
}
/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
	margin: 0;
}
/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
	font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
	font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
	text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
	border-style: none;
	padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
	outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
	box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
	padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
	vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
	-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
	display: list-item;
}
/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */
/**
 * Removes the default spacing and border for appropriate elements.
 */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
button {
  background-color: transparent;
  background-image: none;
}
fieldset {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/**
 * Tailwind custom reset styles
 */
/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */
html {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}
/**
 * Inherit font-family and line-height from `html` so users can set them as
 * a class directly on the `html` element.
 */
body {
  font-family: inherit;
  line-height: inherit;
}
/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}
/*
 * Ensure horizontal rules are visible by default
 */
hr {
  border-top-width: 1px;
}
/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */
img {
  border-style: solid;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #8B939D;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  color: #8B939D;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #8B939D;
}
button,
[role="button"] {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */
a {
  color: inherit;
  text-decoration: inherit;
}
/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}
/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */
pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/**
 * 1. Make replaced elements `display: block` by default as that's
 *    the behavior you want almost all of the time. Inspired by
 *    CSS Remedy, with `svg` added as well.
 *
 *    https://github.com/mozdevs/cssremedy/issues/14
 * 
 * 2. Add `vertical-align: middle` to align replaced elements more
 *    sensibly by default when overriding `display` by adding a
 *    utility like `inline`.
 *
 *    This can trigger a poorly considered linting error in some
 *    tools but is included by design.
 * 
 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/**
 * Constrain images and videos to the parent width and preserve
 * their intrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */
img,
video {
  max-width: 100%;
  height: auto;
}
*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.dark *::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
}
.dark *::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
}
html {
        height: 100%;
    }
body {
        height: 100%;
        margin: 0px;
        font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 0.875rem;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
        color: rgba(18, 20, 23, var(--tw-text-opacity));
    }
.dark body {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
a {
  --tw-text-opacity: 1;
  color: rgba(48, 86, 202, var(--tw-text-opacity));
}
.dark a {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
a:focus {
        outline: none;
    }
button:focus {
        outline: none;
    }
input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
input[type=number] {
        -moz-appearance:textfield;
    }
/* The slider itself */
input[type=range] {
        -webkit-appearance: none;  /* Override default CSS styles */
        -moz-appearance: none;
             appearance: none;
        width: 100%; /* Full-width */
        height: 12px; /* Specified height */ --tw-bg-opacity: 1; background-color: rgba(222, 224, 227, var(--tw-bg-opacity));
    }
.dark input[type=range] {
  --tw-bg-opacity: 1;
  background-color: rgba(68, 75, 83, var(--tw-bg-opacity));
}
input[type=range] {
        outline: none; /* Remove outline */
        border-radius: 8px;
    }
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
input[type=range]::-moz-range-thumb,
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        -moz-appearance: none;
             appearance: none;
        width: 16px; /* Set a specific slider handle width */
        height: 16px; /* Slider handle height */ border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
    }
.dark input[type=range]::-moz-range-thumb, .dark input[type=range]::-webkit-slider-thumb {
  --tw-bg-opacity: 1;
  background-color: rgba(132, 160, 245, var(--tw-bg-opacity));
}
input[type=range]::-moz-range-thumb,
    input[type=range]::-webkit-slider-thumb {
        cursor: pointer; /* Cursor on hover */
    }
/**
 * Here we add custom base styles, applied after the tailwind-base
 * classes
 */
/**
 * This injects any component classes registered by plugins.
 *
 */
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
/* Heading styles

        Heading styles are often used combinations of font-size and weight for headings in light and dark mode
        */
.heading-1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-1 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.heading-2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-2 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.heading-3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-3 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.heading-4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-4 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.heading-5 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-5 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.heading-6 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .heading-6 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
/* Body text styles

        Body text styles are often used combinations of font-size and weight for body text in light and dark mode
        */
.body-small {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-small {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-small-emphasized {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-small-emphasized {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-small-italic {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-small-italic {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-default {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-default {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-default-emphasized {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-default-emphasized {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-default-italic {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-default-italic {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-large {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-large {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-large-emphasized {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-large-emphasized {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.body-large-italic {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .body-large-italic {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
/* AREA STYLES

          "Areas" are the combination of bg color, text color and border color + other stuff.
          Things like panels, popups and whole pages will assign an area-style and have all
          the proper border, text, etc. colors set.

          You will still manually have to specify where/if you want borders, e.g.

              class "border-r area-default"
          */
.area-default {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .area-default {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.area-secondary-dark {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.area-secondary {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .area-secondary {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.area-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .area-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.area-disabled {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.5;
}
.dark .area-disabled {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.5;
}
.area-highlight {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .area-highlight {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.area-highlight-faint {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-highlight-faint {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-highlight-faintest-dark {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-highlight-faintest {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-highlight-faintest {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-active {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .area-active {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.area-info {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 247, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-info {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-error {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 245, 245, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-error {
  --tw-bg-opacity: 1;
  background-color: rgba(48, 13, 13, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-warning {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 250, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(249, 180, 32, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-warning {
  --tw-bg-opacity: 1;
  background-color: rgba(50, 36, 6, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(249, 180, 32, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-success {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 255, 246, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-success {
  --tw-bg-opacity: 1;
  background-color: rgba(10, 39, 17, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.area-popup {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .area-popup {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
/**
 * Here we add custom component classes; stuff we want loaded
 * *before* the utilities so that the utilities can still
 * override them.
 *
 */
:root {
  /* ----DESIGN SYSTEM----
     Variables mirroring our design system: https://www.figma.com/file/tukdOQNTiwJvr3fJPdDbMZ/Design-System?node-id=1%3A3
     Any new variable introduced in this section should be present in the design system
  */
  --primary-color-01: #ede8ff;
  --primary-color-02: #d2bdfe;
  --primary-color-03: #b390fe;
  --primary-color-04: #9868fd;
  --primary-color-05: #7f43fd;
  --primary-color-06: #6228d5;
  --primary-color-07: #4e21a1;
  --primary-color-08: #3b1a75;
  --primary-color-09: #30155b;
  --primary-color-10: #241041;
  --base-color-01: #fff;
  --base-color-02: #fafafa;
  --base-color-03: #f0f0f0;
  --base-color-04: #e2e1e2;
  --base-color-05: #ccc;
  --base-color-06: #adadad;
  --base-color-07: #767676;
  --base-color-08: #575757;
  --base-color-09: #333;
  --base-color-10: #262626;
  --positive-action-color-01: #daf1e1;
  --positive-action-color-02: #7ecd96;
  --positive-action-color-03: #42ab62;
  --positive-action-color-04: #32814a;
  --positive-action-color-05: #235c35;
  --negative-action-color-01: #fbeaea;
  --negative-action-color-02: #e9a5a5;
  --negative-action-color-03: #d24848;
  --negative-action-color-04: #b82d2d;
  --negative-action-color-05: #8f2323;
  --warning-color-01: #fef5e2;
  --warning-color-02: #fadf9e;
  --warning-color-03: #f6c040;
  --warning-color-04: #32814a;
  --warning-color-05: #235c35;
  --info-action-color-01: #ebf3ff;
  --info-action-color-02: #85b9ff;
  --info-action-color-03: #3788f4;
  --info-action-color-04: #0a59c2;
  --info-action-color-05: #063779;
  --info-color-03: #4189ea;
  --link-color: #337ab7;
  --ui-font-size-medium: 24px;
  --ui-background-01: var(--base-color-01);
  --ui-background-02: var(--base-color-02);
  --ui-background-03: var(--base-color-03);
  --highlight-background-purple: var(--primary-color-01);
  --highlight-background-blue: #eaf0fd;
  --muted-text-color: var(--base-color-05);
  --legible-muted-text-color: var(--base-color-06);
  --attention-background-purple: var(--primary-color-03);
  --text-color-on-attention-purple: var(--base-color-01);
  --attention-background-green: #74e7a5;
  --primary-color-01-old: #e5d7fe;
  --primary-color-02-old: #c3aaf8;
  --primary-color-03-old: #a882ed;
  --primary-color-04-old: #885adc;
  --primary-color-05-old: #6b3ac6;
  --primary-color-06-old: #57339a;
  --primary-color-07-old: #483377;
  --primary-color-08-old: #332659;
  --primary-color-09-old: #211745;
  --primary-color-10-old: #1e1935;
  --primary-background-color: #1a203f;
  --dark-highlight-text-08: rgba(0, 0, 0, 0.08);

  /* ----DESIGN SYSTEM END---- */

  --color-border-default: rgb(144, 144, 144);
  --border-default: solid 1px var(--color-border-default);
  --border-faint: solid 1px #dadde2;
  --shadow-panel: 0 0 10px rgba(0, 0, 0, 0.2);
  --global-admin-content-max-width: 1300px;
  --tab-header-height: 25px;
}
/*
 Make Monaco suggestion Docs not look horrible on Linux.

 There does not seem to be an interface to set this without impacting
 all fonts in the monaco editor, so we have to dive into the structure of
 the component (yuck).

 It would be nicer if the IEditorOptions of monaco supported it.
*/
.monaco-editor .suggest-widget .docs.markdown-docs {
  font-family: Inter, -apple-system, system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
}
@-webkit-keyframes dropIn {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes dropIn {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.loading_eye {
  -webkit-animation: loading-eye 1s infinite ease-in-out;
          animation: loading-eye 1s infinite ease-in-out;
}
@-webkit-keyframes loading-eye {
  100%,
  0% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }
}
@keyframes loading-eye {
  100%,
  0% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }
}
.elm-overlay {
  z-index: 2 !important;
}
button,
[tabindex="0"] {
  outline: none;
}
/* ---- Styles according to our design system ---- */
:root {
  --primary-button-text-color: var(--base-color-01);
  --primary-button-color: var(--primary-color-07);
  --primary-button-hover-color: var(--primary-color-06);
  --primary-button-active-color: var(--primary-color-07);
  --primary-button-disabled-color: var(--base-color-04);
  --primary-button-text-disabled-color: var(--base-color-06);

  /* ----DEFAULT BUTTON---- */

  --default-button-text-color: var(--base-color-09);
  --default-button-border-color: var(--base-color-05);
  --default-button-background:
    linear-gradient(
      var(--base-color-01),
      var(--base-color-03)
    );
  --default-button-hover-background: var(--base-color-01);
  --default-button-active-background: var(--base-color-03);
  --default-button-disabled-background: var(--base-color-04);
  --default-button-disabled-text-color: var(--base-color-06);

  /* ----TOGGLE BUTTON---- */
  --toggle-button-off-text-color: var(--default-button-text-color);
  --toggle-button-off-border-color: var(--default-button-border-color);
  --toggle-button-off-background: var(--default-button-background);
  --toggle-button-off-hover-background: var(--default-button-hover-background);
  --toggle-button-off-active-background:
    var(
      --default-button-active-background
    );
  --toggle-button-on-background: var(--base-color-07);
  --toggle-button-on-text-color: var(--base-color-01);
  --toggle-button-on-hover-background: var(--base-color-08);
  --toggle-button-on-active-background: var(--base-color-09);
  --toggle-button-disabled-background:
    var(
      --default-button-disabled-background
    );
  --toggle-button-disabled-text-color:
    var(
      --default-button-disabled-text-color
    );

  /* ----NEW BUTTON---- */
  --new-button-background: linear-gradient(#67cb91, #48c17a);
  --new-button-text-color: var(--base-color-01);
  --new-button-hover-background: var(--positive-action-color-02);
  --new-button-active-background: var(--positive-action-color-03);
  --new-button-disabled-background: #acd2bc;

  /* ----DANGER BUTTON---- */
  --danger-button-text-color: var(--base-color-01);
  --danger-button-color: var(--negative-action-color-05);
  --danger-button-hover-color: var(--negative-action-color-04);
  --danger-button-active-color: var(--negative-action-color-05);
  --danger-button-disabled-color: #d2acac;

  /* ----REMOVE BUTTON---- */
  --remove-button-background:
    linear-gradient(
      var(--base-color-01),
      var(--base-color-03)
    );
  --remove-button-border-color: var(--base-color-05);
  --remove-button-color: var(--negative-action-color-04);

  /* ---- REMOVE BUTTON HOVER ---- */
  --remove-button-hover-background-color: var(--negative-action-color-04);
  --remove-button-hover-color: var(--base-color-01);

  /* ---- REMOVE BUTTON ACTIVE ---- */
  --remove-button-active-background-color: var(--negative-action-color-05);
  --remove-button-active-color: var(--base-color-01);

  /* ---- REMOVE BUTTON DISABLED ---- */
  --remove-button-disabled-color: #c99c9c;
  --remove-button-disabled-background-color: var(--base-color-04);
  --outline-button-text-color: var(--base-color-07);
  --outline-button-border-color: var(--base-color-07);
  --outline-button-hover-text-color: var(--base-color-01);
  --outline-button-hover-color: var(--base-color-07);
  --outline-button-active-color: var(--base-color-08);
  --outline-button-active-text-color: var(--base-color-01);
  --outline-button-disabled-text-color: var(--base-color-05);
  --outline-button-disabled-border-color: var(--base-color-05);

  /* ---- REMOVE BUTTON DISABLED ---- */
  --link-button-color: var(--info-action-color-04);
  --link-button-hover-color: var(--info-action-color-03);
}
details > summary {
  font-weight: bold;
  display: revert;
  font-size: 12px;
  margin-bottom: 10px;
}
.empty-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 64px;
  color: #4b4d59;
  text-align: center;
}
.empty-view__icon {
  padding: 16px; /* icons are centered with this for now */
  width: 80px;
  height: 80px;
  line-height: 1;
  border-radius: 50%;
}
.flat-table {
  width: 100%;
  margin-bottom: 10px;
  border-bottom: solid 1px #e5e5e5;
}
.flat-table td {
  padding: 0 12px 0;
  font-size: 12px;
}
.flat-table th {
  color: #666;
  font-weight: normal;
  font-size: 12px;
  text-align: left;
  border-top: solid 1px #e5e5e5;
  border-bottom: solid 1px #e5e5e5;
}
.flat-table th span {
  display: inline-block;
  margin: 4px;
  padding-left: 4px;
  border-left: solid 1px #e5e5e5;
}
.flat-table th:first-child span {
  border-left-color: transparent;
}
.flat-table--medium td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.flat-table tbody tr:nth-child(odd) td {
  background-color: whitesmoke;
}
.form-group {
  display: flex;
}
.grid__row {
  display: flex;
  flex-direction: row;
}
.grid__column {
  display: flex;
  flex-direction: column;
}
.grid__cell {
  display: flex;
  flex: 1;
  flex-basis: 100%;
}
.grid__item--shrink {
  flex: none;
}
.grid__item--left-padding {
  padding-left: 10px;
}
.grid__item--center-content {
  justify-content: center;
  max-width: 100%;
}
.grid__item--full-width {
  width: 100%;
}
@font-face {
  font-weight: 400;
  font-family: "Material Icons";
  font-style: normal;
  src: url(../../static/media/cff684e59ffb052d72cb.woff2) format("woff2");
}
:root {
  --font-family-sans:
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-heading:
    interui,
    -apple-system,
    blinkmacsystemfont,
    "Helvetica Neue",
    "Segoe UI",
    oxygen,
    ubuntu,
    cantarell,
    "Open Sans",
    sans-serif;
  --font-family-monospace:
    "SFMono-Regular",
    consolas,
    "Liberation Mono",
    menlo,
    courier,
    monospace;
}
/* Contains stuff that was generated from elm-css */
.vega-embed {
  padding: 0 !important;
}
.highcharts-value--shift,
.highcharts-shift-key .highcharts-value--no-shift {
  display: none;
}
.highcharts-shift-key .highcharts-value--shift {
  display: inline-block;
}
.notifications {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: white;
  border-left: solid 1px #d8d8d8;
  pointer-events: none;
}
.notification--bubble p {
  position: relative;
  margin-bottom: 0;
}
.notification--bubble .notification--nocountdown p {
  margin-top: 4px;
}
.notification__title {
  margin-bottom: 7px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
}
.notification__message {
  max-height: 500px;
  overflow: auto;
}
.notification--error .notification--bubble {
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 245, 245, var(--tw-bg-opacity));
}
.dark .notification--error .notification--bubble {
  --tw-bg-opacity: 1;
  background-color: rgba(89, 13, 13, var(--tw-bg-opacity));
}
.notification--info .notification--bubble {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.dark .notification--info .notification--bubble {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
}
.notification__reload-page-button {
  cursor: pointer;
}
.notification {
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}
.notification--current {
  position: fixed;
  bottom: 10px;
  z-index: 100;
  text-align: center;
}
.notification--current .notification--bubble {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}
.notification--bubble {
  position: relative;
  min-width: 200px;
  max-width: 460px;
  min-height: 60px;
  margin: 10px 10px 0;
  padding: 15px 20px;
  background-color: white;
  border: 1px solid;
  border-radius: 4px;
  pointer-events: all;
}
.settings-header {
  flex: 0 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 34px;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
  display: grid;
  grid-template: "t b" auto "d d" auto / 1fr auto;
}
.u-relative {
  position: relative;
  display: flex;
}
.hint-text {
  margin: 10px 0 20px;
  color: #828282;
  font-size: 12px;
}
.settings-header__widget {
  grid-area: b;
}
.settings-header__description {
  grid-area: d;
  margin: 10px 0;
}
.settings-header__description code {
  display: inline-block;
  padding: 1px 1px 2px;
  line-height: 1;
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.1;
}
.dark .settings-header__description code {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.15;
}
.settings-header__description code {

  border-radius: 2px;
}
.settings-header__description a {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.settings-header__description a:hover {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
.settings-header__text {
  grid-area: t;
  font-weight: 400;
  font-size: 24px;
}
.settings-description {
  display: flex;
  flex: 0 1 auto;
  margin-bottom: 30px;
}
.settings-box {
  background-color: #fff;
  border: solid 1px #d3d6dc;
  border-radius: 4px;
}
.settings-box--HACK-MARGIN {
  margin: 10px 0 20px;
}
.settings-box__header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  color: #676767;
  font-weight: 600;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: solid 1px #d3d6dc;
  border-radius: 4px 4px 0 0;
  -webkit-font-smoothing: subpixel-antialiased;
}
.settings-box__header > *:last-child {
  font-weight: 400;
  font-size: 12px;
}
.settings-box__segment {
  display: flex;
  padding: 15px;
}
.settings-box__segment:not(:last-child) {
  border-bottom: solid 1px #d3d6dc;
}
.settings-box__segment-description {
  margin-bottom: 15px;
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.dark .settings-box__segment-description {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
.settings-box__segment-description {

  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
.settings-box__segment-description > div > p {
  margin-top: 0;
}
.validation-errors {
  color: #6f0404;
  font-size: 14px;
  border: solid 1px #8a0000;
  border-radius: 2px;
}
.validation-errors__title {
  padding: 4px 13px;
  color: white;
  background-color: #c32727;
  border-bottom: solid 1px #8a0000;
}
.validation-errors__list {
  margin: 0;
  padding: 8px 15px;
  list-style-type: disc;
  background-color: #fff3f3;
}
.validation-errors__item {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  justify-content: start;
}
.validation-errors__item p {
  /* To remove margin from markdown descriptions in the errors. */
  margin: 0;
}
.validation-errors__item:not(:last-child) {
  margin-bottom: 10px;
}
.empty-state-popup {
  display: grid;
  grid-gap: 20px;
  justify-content: center;
  width: 400px;
  padding: 10px;
  font-size: 14px;
  white-space: normal;
  text-align: center;
}
/**
 * Include styles for individual pages
 *
 */
#root,
.root__content {
  position: relative;
  width: 100%;
  height: 100%;
}
.page-with-panel__alert-container {
  display: flex;
  flex: 1 1 auto;
  align-content: space-around;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.admin-page {
  z-index: 1;
  display: grid;
  grid-template: "menu content" 1fr / fit-content(200px) 1fr;
  height: 100%;
}
.admin-page__content {
  grid-area: content;
  overflow: hidden;
}
.page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.auth-lock-social-buttons-pane {
  display: flex;
  flex-direction: column;
}
.auth-lock-social-buttons-pane p {
  order: 4;
  margin-top: 16px !important;
}
.auth0-lock-header {
  display: none !important;
}
.auth0-lock.auth0-lock {
  z-index: 1 !important;
}
.auth0-lock.auth0-lock .auth0-lock-cred-pane {
  background: none !important;
}
.badge-container {
  display: flex;
  gap: 4px;
}
.icon-styleguide {
  display: grid;
  grid-template: "icon name" auto/ 64px auto;
}
.icon-styleguide__icon {
  grid-area: icon;
}
.icon-styleguide__name {
  grid-area: name;
}
.styleguide__notification-row {
  display: flex;
  direction: row;
}
.sk-three-bounce {
  width: 40px;
  margin: 5px;
  text-align: center;
}
.sk-three-bounce .sk-child {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
          animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-bounce1 {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.sk-bounce2 {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
@-webkit-keyframes sk-three-bounce {
  0%,
  100%,
  80% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}
@keyframes sk-three-bounce {
  0%,
  100%,
  80% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}
.pulse {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: #456CE3;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.progress-bar {
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 2px;
}
.progress-bar__progress {
  height: 2px;
  background-color: #456ce3;
  transition: width 0.2s, opacity 0.4s 1s;
}
.progress-bar--done .progress-bar__progress {
  opacity: 0;
}
.humio-badge--hover:hover {
  color: var(--base-color-01);
  background-color: rgb(162, 100, 200);
}
.humio-badge--success {
  background-color: var(--positive-action-color-04);
  color: var(--base-color-01);
}
.humio-badge--accent {
  border-radius: 100px;
  background-color: var(--warning-color-02);
  color: var(--base-color-09);
}
.banner {
  display: grid;
  grid-template:
    "icon header actions" 28px
    "empty-space body actions" auto /
    34px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 80px;
  padding-top: 16px;
  padding-right: 40px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-left-width: 8px;
  border-left-style: solid;
}
.banner__message {
  grid-area: body;
  word-break: break-word;
}
.banner__title {
  grid-area: header;
  font-weight: bold;
}
.banner__dismiss {
  right: 0;
  margin-top: 5px;
  margin-left: 16px;
  text-align: right;
}
.banner__dismiss-icon {
  width: 20px;
  cursor: pointer;
}
.banner__actions {
  display: flex;
  flex-direction: row;
  grid-area: actions;
  justify-content: flex-end;
  text-align: right;
}
.banner__actions i {
  opacity: 0.5;
}
.banner__actions i:hover {
  opacity: 0.25;
}
/* An aside that contains blobs. */
.blob-list {
  display: grid;
  grid-gap: 20px;
}
/* Blob
 *
 * A panel with information for asides.
 */
.blob {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 10px;
  padding: 16px;
  color: #6d6d6d;
  background-color: #f7f7f7;
  border: solid 1px #eaeaea;
  border-radius: 4px;
}
.blob__link-list {
  margin: 0 -16px;
}
.blob__link-list a:not(:first-child) {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .blob__link-list a:not(:first-child) {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.blob__link-list a:hover {
  background-color: var(--ui-background-03);
  cursor: pointer;
}
.blob__link-list a {
  display: block;
  padding: 7px 15px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tab {
  bottom: -1px;
  top: -1px;
  height: calc(100% + 2px);
}
.boundary {
  display: flex;
  align-items: center;
  font-size: 10px;
}
.boundary > div:first-child {
  margin-right: 6px;
  white-space: nowrap;
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: unset;
}
.CodeMirror pre.CodeMirror-line {
  font-family: var(--font-family-monospace) !important;
}
.CodeMirror--limited-height-short .CodeMirror-scroll {
  max-height: 150px;
}
.CodeMirror--limited-height-tall .CodeMirror-scroll {
  max-height: var(--height);
}
.CodeMirror--limited-height-tall {
  --height: 652px;
}
.CodeMirror--limited-height-tall .CodeMirror {
  height: var(--height);
}
.CodeMirror--shrink-height .CodeMirror {
  height: auto;
}
.CodeMirror--full-height .CodeMirror {
  height: 100%;
}
.CodeMirror--white-gutter .CodeMirror-gutters {
  background-color: initial;
}
.CodeMirror--bordered .CodeMirror {
  border: var(--border-default);
}
.CodeMirror--small-font .CodeMirror {
  font-size: 12px;
}
.community-button {
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  background-image:
    url(../../static/media/6bee87084e9cd8a9f915.svg),
    url(../../static/media/a5bbf2555ce9c49bc8d7.svg);
  background-repeat: no-repeat, repeat;
  background-position: 16px center, top left;
  background-size: 58px, cover;
  border-radius: 8px;
  box-shadow: 0 0 0 transparent;
  transition: all 0.2s 0.1s;
}
.community-button:hover:not(:active) {
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.community-button__text {
  padding-left: 90px;
  color: white;
  font-weight: 400;
  font-size: 21px;
}
.community-button__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.community-button__dismiss {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  color: white;
  font-weight: normal;
  font-size: 20px;
  font-family: "Material Icons", sans-serif;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: sub;
  word-wrap: normal;
  background-color: transparent;
  border: none;
  outline: none;
  opacity: 0.7;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.community-button__dismiss::before {
  content: "close";
}
.community-button__dismiss:hover {
  opacity: 1;
}
.content-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 100%;
  min-height: 0;
  border-radius: 3px;

  --content-list-padding: 10px;
  --content-list-border: 1px solid #e2e1e2;
}
.content-list__additional-filter-inputs {
  padding-top: var(--content-list-padding);
}
.content-list__items {
  flex: 1;
  overflow: auto;
}
.content-list__no-results {
  padding: 0 12px;
  color: var(--legible-muted-text-color);
}
.content-list__no-results:hover {
  background: inherit;
  cursor: inherit;
}
.dark-mode-toggle-sun {
  box-shadow: 0 1px 5px #d57107;
}
.dark-mode-toggle-moon {
  box-shadow: 0 1px 5px #13274e;
}
:root {
  --table-text-color: #333;
  --table-cell-border-color: rgba(0, 0, 0, 0.12);
  --row-bg-color--hover: #eee;
  --table-pagination-bg-color: var(--widget-bg-color);
  --table-footer-border-color: var(--widget-border-color);
}
.data-table {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.data-table__scroll-container {
  flex: 1 1 auto;
  overflow: auto;
}
.data-table__table {
  /* TODO: Is there a good reason why this is relative? Could hurt performance, Remove if possible. */
  position: relative;
  width: 100%;
  padding-bottom: 10px;
  font-size: 13px;
  border-collapse: collapse;
}
.data-table__icons-set {
  width: 0 !important;
}
.data-table__icons-set:last-child {
  padding: 0 8px 0 0;
}
.data-table__icon-cell:first-child {
  padding-right: 0 !important;
}
.data-table__icon {
  display: flex;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
}
.data-table__icon .material-icons {
  font-size: 20px !important;
  opacity: 0.6;
}
.data-table__icon .material-icons:hover {
  color: var(--primary-button-hover-color);
  opacity: 1;
}
.data-table__icon:disabled .material-icons,
.data-table__icon:disabled .material-icons:hover {
  color: rgb(128, 128, 128) !important;
  opacity: 0.6;
}
.data-table th {
  position: relative;
  box-sizing: border-box;
  height: 47px;
  padding: 0 18px 7px;
  color: var(--table-header-text-color);
  font-weight: 700;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.data-table td {
  position: relative;
  box-sizing: border-box;
  height: 22px;
  padding: 2px 16px;
  text-overflow: ellipsis;
  vertical-align: top;
  border-bottom-width: 1px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .data-table td {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table--expand-last td:last-child {
  width: 100%;
}
.data-table td:not(.data-table__cell--non-numeric),
.data-table th:not(.data-table__cell--non-numeric) {
  text-align: right;
}
.data-table__cell--non-numeric {
  text-align: left;
}
.data-table__cell--content {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.data-table__cell--empty,
.data-table__cell--non-numeric a.data-table__cell--empty {
  color: var(--muted-text-color);
}
.data-table__cell--non-numeric a {
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.dark .data-table__cell--non-numeric a {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.data-table__cell--non-numeric a {

  text-decoration: underline;
}
.data-table__cell--wrap {
  white-space: pre-wrap;
  word-break: break-all;
}
th.data-table__header--sortable:hover {
  color: var(--table-header-text-color--hover);
  cursor: pointer;
}
th.data-table__header--sorted-ascending,
th.data-table__header--sorted-descending {
  color: var(--table-header-text-color--sorted);
}
th.data-table__header:not(:empty)::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: "Material Icons", sans-serif;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: sub;
  word-wrap: normal;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
th.data-table__header--sorted-ascending::after {
  content: "\e5db";
}
th.data-table__header--sorted-descending::after {
  content: "\e5d8";
}
.data-table td.data-table .data-table__icon-cell {
  text-align: center;
}
.data-table td.data-table__icon-cell--empty {
  padding: 20px;
  color: #999;
  text-align: center;
}
.data-table--compact td:not(:last-child) {
  white-space: nowrap;
}
.data-table--compact td {
  text-overflow: ellipsis;
  max-width: inherit;
}
.data-table--compact td:last-child {
  width: 100%;
}
.data-table-v2 {
  position: relative;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .data-table-v2 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.data-table-v2__sticky-header {
  overflow: unset;
}
.data-table-v2__content {
  display: inline-block;
  min-width: 100%;
  min-height: calc(100% - 50px);
}
.data-table-v2__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 36px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .data-table-v2__header {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.data-table-v2--striped .data-table-v2__row:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .data-table-v2--striped .data-table-v2__row:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.data-table-v2__cell {
  display: flex;
  padding: 4px 16px;
}
.data-table-v2__footer {
  position: sticky;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: stretch;
  min-width: 100%;
  height: 50px;
  font-weight: 700;
}
.data-table-v2__footer-cell {
  display: inline-flex;
  align-items: flex-end;
  padding: 8px 16px 16px;
}
.data-table-v2__standard-empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--legible-muted-text-color);
}
.date-picker {
  display: inline-block;
  font-size: 12px;
}
.date-picker__navigation {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.date-picker__nav-button {
  flex: 0 0 auto;
  background-color: transparent;
  border: none;
}
.date-picker__days {
  flex-wrap: wrap;
  width: 208px;
  height: 176px;
  overflow: hidden;
}
.date-picker__day {
  float: left;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  padding: 0;
  font-weight: 400;
  background-color: transparent;
  border: solid 1px transparent;
  border-radius: 14px;
}
.date-picker__day--today {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.date-picker__day--selected {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.date-picker__day:focus {
  outline: none;
}
.date-picker__day:hover:not(.date-picker__day--empty) {
  --tw-bg-opacity: 1;
  background-color: rgba(39, 68, 155, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.date-picker__time-of-day {
  text-align: center;
}
.date-picker__time-input {
  display: inline-block;
  width: 110px;
  font-size: inherit;
  text-align: center;
}
.date-picker__weekdays {
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .date-picker__weekdays {
  --tw-border-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-border-opacity));
}
.date-picker__weekday {
  display: inline-block;
  width: 28px;
  font-weight: bold;
  font-size: 9px;
  text-align: center;
}
.date-picker__weekday:not(:last-child) {
  margin-right: 2px;
}
.date-picker__day:focus:not(.date-picker__day--selected) {
  position: relative;
  color: black;
  background-color: var(--base-color-08);
  outline: none;
}
.date-picker__day:not(:nth-child(7n)) {
  margin-right: 2px;
}
.date-picker__timestamp {
  margin-top: 5px;
  color: gray;
  font-size: 10px;
  text-align: center;
}
.detail-item--active .detail-item__caret {
  transform: rotate(180deg);
}
.detail-item--active .detail-item__content {
  opacity: 1;
}
.detail-item__header {
  display: flex;
  align-items: center;
  min-height: 35px;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.detail-item__content {
  display: flex;
  flex-direction: column;
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.2s ease-out, opacity 0.2s;
}
.detail-item__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-out;
}
.detail-item__menu {
  display: flex;
  flex: 1;
  flex-direction: row;
}
.detail-item__menu-right {
  flex: 1;
}
@-webkit-keyframes detail-item__menu-slideIn {
  from {
    width: 0;
  }

  to {
    width: 200px;
  }
}
@keyframes detail-item__menu-slideIn {
  from {
    width: 0;
  }

  to {
    width: 200px;
  }
}
.dialog {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
}
.dialog--shown {
  top: 0;
  opacity: 1;
  pointer-events: all;
}
.dialog__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
}
.dialog__window {
  min-width: 300px;
  max-width: 800px;
}
.dialog--shown .dialog__window {
  opacity: 0;
  -webkit-animation-name: dropIn;
          animation-name: dropIn;
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 16px;
}
.dialog__title {
  flex: 1;
}
.dialog__body {
  position: relative;
  max-height: 600px;
  overflow: auto;
  word-break: break-word;
}
.dialog__activity-indicator-wrapper {
  min-height: 100px;
}
.activity-indicator--centered {
  display: flex;
  justify-content: center;
}
.dropdown-menu__popup-items {
  max-height: 300px;
  overflow-y: auto;
  font-weight: 400;
  text-align: left;
}
.event-distribution-chart__tooltip {
  position: absolute;

  --offset: -16px;

  top: calc(100% + 2px);

  --muted-color: var(--base-color-07);

  /* These colors are referenced in the SVG in Elm */
  --color-bg: #ffffff;
}
.event-distribution-chart__tooltip--right .event-distribution-chart__tooltip-content {
  right: var(--offset);
  left: unset;
}
.event-distribution-chart__tooltip-content {
  left: var(--offset);
  grid-template:
    "from-label from"
    "to-label   to"
    "bucket     bucket"
    "count      count"
    "events     events"
    / -webkit-max-content auto;
  grid-template:
    "from-label from"
    "to-label   to"
    "bucket     bucket"
    "count      count"
    "events     events"
    / max-content auto;
  margin-top: -2px;
  position: absolute;
  display: grid;
  place-content: center;
  row-gap: 0.5rem;
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
  white-space: nowrap;
  border-radius: 0.125rem;
  border-width: 1px;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
}
.event-distribution-chart__tooltip-from-label {
  grid-area: from-label;
  color: var(--muted-color);
  text-align: right;
}
.event-distribution-chart__tooltip-from {
  grid-area: from;
  text-align: left;
}
.event-distribution-chart__tooltip-to-label {
  grid-area: to-label;
  color: var(--muted-color);
  text-align: right;
}
.event-distribution-chart__tooltip-to {
  grid-area: to;
  text-align: left;
}
.event-distribution-chart__tooltip-bucket {
  grid-area: bucket;
  color: var(--muted-color);
}
.event-distribution-chart__tooltip-events {
  grid-area: events;
}
.event-distribution-chart__tooltip-arrow {
  position: relative;
  z-index: 1;
  display: block;

  --color-border: #456CE3;
}
.dark .event-distribution-chart__tooltip {
  --color-bg: #121417;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.inset-24 {
  top: 6rem;
  right: 6rem;
  bottom: 6rem;
  left: 6rem;
}
.-inset-px {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-1 {
  top: 0.25rem;
}
.right-1 {
  right: 0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-1 {
  top: -0.25rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-0 {
  right: 0px;
}
.top-full {
  top: 100%;
}
.top-1\/2 {
  top: 50%;
}
.left-3 {
  left: 0.75rem;
}
.-left-0\.5 {
  left: -0.125rem;
}
.-left-0 {
  left: 0px;
}
.left-16 {
  left: 4rem;
}
.left-6 {
  left: 1.5rem;
}
.left-auto {
  left: auto;
}
.right-auto {
  right: auto;
}
.left-0 {
  left: 0px;
}
.top-0 {
  top: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.right-5 {
  right: 1.25rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.top-5 {
  top: 1.25rem;
}
.top-0\.5 {
  top: 0.125rem;
}
.bottom-full {
  bottom: 100%;
}
.right-3\.5 {
  right: 0.875rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.top-14 {
  top: 3.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-3 {
  top: 0.75rem;
}
.left-1 {
  left: 0.25rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.right-10 {
  right: 2.5rem;
}
.left-full {
  left: 100%;
}
.right-2\.5 {
  right: 0.625rem;
}
.z-devPanel {
  z-index: 60;
}
.z-40 {
  z-index: 40;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-30 {
  z-index: 30;
}
.z-20 {
  z-index: 20;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
.m-1 {
  margin: 0.25rem;
}
.m-3 {
  margin: 0.75rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-0 {
  margin: 0px;
}
.m-auto {
  margin: auto;
}
.m-4 {
  margin: 1rem;
}
.m-5 {
  margin: 1.25rem;
}
.m-10 {
  margin: 2.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.-mx-px {
  margin-left: -1px;
  margin-right: -1px;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.my-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-0 {
  margin-top: 0px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-0 {
  margin-left: 0px;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mt-4 {
  margin-top: 1rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-2\.5 {
  margin-left: 0.625rem;
}
.-ml-6 {
  margin-left: -1.5rem;
}
.-mt-px {
  margin-top: -1px;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mr-0 {
  margin-right: 0px;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.ml-4 {
  margin-left: 1rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}
.block {
  display: block;
}
.\!block {
  display: block !important;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.\!hidden {
  display: none !important;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.h-px {
  height: 1px;
}
.h-5 {
  height: 1.25rem;
}
.h-9 {
  height: 2.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-16 {
  height: 4rem;
}
.h-64 {
  height: 16rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-1 {
  height: 0.25rem;
}
.h-control {
  height: 36px;
}
.h-3 {
  height: 0.75rem;
}
.h-8 {
  height: 2rem;
}
.h-14 {
  height: 3.5rem;
}
.h-80 {
  height: 20rem;
}
.h-44 {
  height: 11rem;
}
.h-4 {
  height: 1rem;
}
.h-56 {
  height: 14rem;
}
.h-40 {
  height: 10rem;
}
.h-10 {
  height: 2.5rem;
}
.h-24 {
  height: 6rem;
}
.h-auto {
  height: auto;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-48 {
  height: 12rem;
}
.h-20 {
  height: 5rem;
}
.h-144 {
  height: 36rem;
}
.h-96 {
  height: 24rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-144 {
  max-height: 36rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-full {
  max-height: 100%;
}
.max-h-60 {
  max-height: 15rem;
}
.min-h-full {
  min-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.w-full {
  width: 100%;
}
.w-80 {
  width: 20rem;
}
.w-72 {
  width: 18rem;
}
.w-3\/4 {
  width: 75%;
}
.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.w-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.w-5 {
  width: 1.25rem;
}
.w-40 {
  width: 10rem;
}
.w-52 {
  width: 13rem;
}
.w-64 {
  width: 16rem;
}
.w-24 {
  width: 6rem;
}
.w-16 {
  width: 4rem;
}
.w-28 {
  width: 7rem;
}
.w-14 {
  width: 3.5rem;
}
.w-1\/5 {
  width: 20%;
}
.w-56 {
  width: 14rem;
}
.w-px {
  width: 1px;
}
.w-1 {
  width: 0.25rem;
}
.w-\[200px\] {
  width: 200px;
}
.w-8 {
  width: 2rem;
}
.w-144 {
  width: 36rem;
}
.w-96 {
  width: 24rem;
}
.w-3 {
  width: 0.75rem;
}
.w-48 {
  width: 12rem;
}
.w-1\/2 {
  width: 50%;
}
.w-6 {
  width: 1.5rem;
}
.w-2\/4 {
  width: 50%;
}
.w-centered-content {
  width: 900px;
}
.w-32 {
  width: 8rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2 {
  width: 0.5rem;
}
.w-4\/5 {
  width: 80%;
}
.w-12 {
  width: 3rem;
}
.w-192 {
  width: 48rem;
}
.w-20 {
  width: 5rem;
}
.w-36 {
  width: 9rem;
}
.min-w-full {
  min-width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-max {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.min-w-min {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}
.min-w-192 {
  min-width: 48rem;
}
.max-w-screen-md {
  max-width: 768px;
}
.max-w-min {
  max-width: -webkit-min-content;
  max-width: -moz-min-content;
  max-width: min-content;
}
.max-w-full {
  max-width: 100%;
}
.max-w-screen-lg {
  max-width: 1024px;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-max {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.table-fixed {
  table-layout: fixed;
}
.-translate-y-px {
  --tw-translate-y: -1px;
  transform: var(--tw-transform);
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: var(--tw-transform);
}
.translate-x-14 {
  --tw-translate-x: 3.5rem;
  transform: var(--tw-transform);
}
.translate-x-7 {
  --tw-translate-x: 1.75rem;
  transform: var(--tw-transform);
}
.-translate-x-14 {
  --tw-translate-x: -3.5rem;
  transform: var(--tw-transform);
}
.-translate-x-7 {
  --tw-translate-x: -1.75rem;
  transform: var(--tw-transform);
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: var(--tw-transform);
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: var(--tw-transform);
}
.scale-50 {
  --tw-scale-x: .5;
  --tw-scale-y: .5;
  transform: var(--tw-transform);
}
.scale-y-100 {
  --tw-scale-y: 1;
  transform: var(--tw-transform);
}
.scale-y-0 {
  --tw-scale-y: 0;
  transform: var(--tw-transform);
}
.transform {
  transform: var(--tw-transform);
}
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-auto {
  cursor: auto;
}
.cursor-default {
  cursor: default;
}
.cursor-x-resize {
  cursor: ew-resize;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-flow-row {
  grid-auto-flow: row;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-auto {
  grid-template-rows: auto;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-content-center {
  place-content: center;
}
.place-content-end {
  place-content: end;
}
.place-items-center {
  place-items: center;
}
.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-around {
  align-content: space-around;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-x-0\.5 {
  -moz-column-gap: 0.125rem;
       column-gap: 0.125rem;
}
.gap-x-0 {
  -moz-column-gap: 0px;
       column-gap: 0px;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-x-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-divide-opacity));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(237, 238, 239, var(--tw-divide-opacity));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-divide-opacity));
}
.place-self-center {
  place-self: center;
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-center {
  justify-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-medium {
  border-radius: 5px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-md {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-b-md {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-tr-none {
  border-top-right-radius: 0px;
}
.rounded-tl-none {
  border-top-left-radius: 0px;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-8 {
  border-left-width: 8px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-ultramarine-500 {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.border-green-700 {
  --tw-border-opacity: 1;
  border-color: rgba(35, 128, 63, var(--tw-border-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgba(214, 31, 31, var(--tw-border-opacity));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
}
.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgba(41, 163, 75, var(--tw-border-opacity));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.border-ultramarine-900 {
  --tw-border-opacity: 1;
  border-color: rgba(19, 39, 78, var(--tw-border-opacity));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgba(139, 147, 157, var(--tw-border-opacity));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgba(249, 180, 32, var(--tw-border-opacity));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgba(99, 107, 120, var(--tw-border-opacity));
}
.border-opacity-30 {
  --tw-border-opacity: 0.3;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-ultramarine-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 247, 255, var(--tw-bg-opacity));
}
.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 231, 179, var(--tw-bg-opacity));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.bg-ultramarine-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.bg-ultramarine-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(214, 31, 31, var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-ultramarine-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 178, 178, var(--tw-bg-opacity));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(222, 224, 227, var(--tw-bg-opacity));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 107, 120, var(--tw-bg-opacity));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(240, 64, 64, var(--tw-bg-opacity));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 255, 246, var(--tw-bg-opacity));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 250, 239, var(--tw-bg-opacity));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 245, 245, var(--tw-bg-opacity));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 180, 32, var(--tw-bg-opacity));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.bg-ultramarine-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(49, 196, 86, var(--tw-bg-opacity));
}
.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(170, 24, 24, var(--tw-bg-opacity));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(139, 147, 157, var(--tw-bg-opacity));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(41, 163, 75, var(--tw-bg-opacity));
}
.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}
.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}
.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-5 {
  --tw-bg-opacity: 0.05;
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-gray-50 {
  --tw-gradient-from: #FAFAFA;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 250, 250, 0));
}
.from-ultramarine-400 {
  --tw-gradient-from: #5E82ED;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(94, 130, 237, 0));
}
.from-red-600 {
  --tw-gradient-from: #D61F1F;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(214, 31, 31, 0));
}
.from-green-400 {
  --tw-gradient-from: #5CD676;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(92, 214, 118, 0));
}
.from-gray-200 {
  --tw-gradient-from: #DEE0E3;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(222, 224, 227, 0));
}
.to-gray-100 {
  --tw-gradient-to: #EDEEEF;
}
.to-ultramarine-500 {
  --tw-gradient-to: #456CE3;
}
.to-red-700 {
  --tw-gradient-to: #AA1818;
}
.to-green-500 {
  --tw-gradient-to: #31C456;
}
.to-green-400 {
  --tw-gradient-to: #5CD676;
}
.bg-contain {
  background-size: contain;
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.stroke-current {
  stroke: currentColor;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-none {
  -o-object-fit: none;
     object-fit: none;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-2 {
  padding: 0.5rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-0 {
  padding: 0px;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-px {
  padding: 1px;
}
.p-8 {
  padding: 2rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-20 {
  padding: 5rem;
}
.p-12 {
  padding: 3rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.px-medium {
  padding-left: 7px;
  padding-right: 7px;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pt-0 {
  padding-top: 0px;
}
.pb-9 {
  padding-bottom: 2.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-0 {
  padding-left: 0px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pb-11 {
  padding-bottom: 2.75rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pl-0\.5 {
  padding-left: 0.125rem;
}
.pr-0\.5 {
  padding-right: 0.125rem;
}
.pr-0 {
  padding-right: 0px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-baseline {
  vertical-align: baseline;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-xxs {
  font-size: 10px;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.font-light {
  font-weight: 300;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.ordinal {
  --tw-ordinal: ordinal;
}
.leading-tight {
  line-height: 1.25;
}
.leading-snug {
  line-height: 1.375;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-normal {
  line-height: 1.5;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-text-opacity));
}
.text-ultramarine-500 {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgba(35, 128, 63, var(--tw-text-opacity));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.text-current {
  color: currentColor;
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgba(49, 196, 86, var(--tw-text-opacity));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.text-ultramarine-600 {
  --tw-text-opacity: 1;
  color: rgba(48, 86, 202, var(--tw-text-opacity));
}
.text-green-900 {
  --tw-text-opacity: 1;
  color: rgba(18, 79, 40, var(--tw-text-opacity));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgba(170, 24, 24, var(--tw-text-opacity));
}
.text-ultramarine-900 {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
}
.text-gray-50 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgba(249, 180, 32, var(--tw-text-opacity));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.text-ultramarine-400 {
  --tw-text-opacity: 1;
  color: rgba(94, 130, 237, var(--tw-text-opacity));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgba(222, 224, 227, var(--tw-text-opacity));
}
.text-ultramarine-700 {
  --tw-text-opacity: 1;
  color: rgba(39, 68, 155, var(--tw-text-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgba(31, 36, 41, var(--tw-text-opacity));
}
.text-gray {
  --tw-text-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-text-opacity));
}
.text-ultramarine-100 {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgba(214, 31, 31, var(--tw-text-opacity));
}
.text-red {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.text-ultramarine-300 {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
.text-ultramarine-800 {
  --tw-text-opacity: 1;
  color: rgba(30, 55, 118, var(--tw-text-opacity));
}
.text-ultramarine-200 {
  --tw-text-opacity: 1;
  color: rgba(195, 212, 254, var(--tw-text-opacity));
}
.text-opacity-60 {
  --tw-text-opacity: 0.6;
}
.text-opacity-80 {
  --tw-text-opacity: 0.8;
}
.text-opacity-30 {
  --tw-text-opacity: 0.3;
}
.text-opacity-70 {
  --tw-text-opacity: 0.7;
}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-placeholder-opacity));
}
.placeholder-gray-400:-ms-input-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-placeholder-opacity));
}
.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-placeholder-opacity));
}
.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-placeholder-opacity));
}
.placeholder-gray-500:-ms-input-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-placeholder-opacity));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-placeholder-opacity));
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-0 {
  opacity: 0;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-filter);
}
.filter {
  filter: var(--tw-filter);
}
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* BACKGROUND COLOR STYLES

        Background color styles are often used combinations of colors for backgrounds in light and dark mode.
        */
.bg-default {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .bg-default {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.dark .bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
}
/* Divide color styles

      Divide color styles are often used combinations of colors for divides in light and dark mode.

      You will still manually have to specify where/if you want divides, e.g.

          class "divide-y divide-default"

      however, once applied, the divides will have the specified color.
      */
.divide-default > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-divide-opacity));
}
.dark .divide-default > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-divide-opacity));
}
.divide-default-faint > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-divide-opacity));
}
.dark .divide-default-faint > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-divide-opacity));
}
/* Border color styles

      Border color styles are often used combinations of colors for borders in light and dark mode.

      You will still manually have to specify where/if you want borders, e.g.

          class "border-r border-default"

      however, once applied, the border will have the specified color.
      */
.border-default {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .border-default {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.border-default-faint {
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
}
.dark .border-default-faint {
  --tw-border-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-border-opacity));
}
.border-active {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.dark .border-active {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.border-error {
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
}
.dark .border-error {
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
}
.border-warning {
  --tw-border-opacity: 1;
  border-color: rgba(249, 180, 32, var(--tw-border-opacity));
}
.dark .border-warning {
  --tw-border-opacity: 1;
  border-color: rgba(249, 180, 32, var(--tw-border-opacity));
}
.border-success {
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
}
.dark .border-success {
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
}
.border-info {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.dark .border-info {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
/* Text color styles

      Text color styles are often used combinations of colors for text in light and dark mode.
      */
.text-emphasized {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .text-emphasized {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.text-default-dark {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.text-default {
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .text-default {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.text-deemphasized {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.7;
}
.dark .text-deemphasized {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.7;
}
.text-disabled {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.5;
}
.dark .text-disabled {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.5;
}
.text-error {
  --tw-text-opacity: 1;
  color: rgba(214, 31, 31, var(--tw-text-opacity));
}
.dark .text-error {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgba(224, 155, 6, var(--tw-text-opacity));
}
.dark .text-warning {
  --tw-text-opacity: 1;
  color: rgba(249, 180, 32, var(--tw-text-opacity));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgba(35, 128, 63, var(--tw-text-opacity));
}
.dark .text-success {
  --tw-text-opacity: 1;
  color: rgba(49, 196, 86, var(--tw-text-opacity));
}
.text-link {
  --tw-text-opacity: 1;
  color: rgba(48, 86, 202, var(--tw-text-opacity));
}
.dark .text-link {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
/* Icon color styles

      Text color styles are often used combinations of colors for text in light and dark mode.
      */
.icon-default-dark {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.7;
}
.icon-default {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.6;
}
.dark .icon-default {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.7;
}
.icon-on-hover {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.dark .icon-on-hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.icon-active {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.dark .icon-active {
  --tw-text-opacity: 1;
  color: rgba(94, 130, 237, var(--tw-text-opacity));
}
.icon-disabled {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.3;
}
.dark .icon-disabled {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.4;
}
.icon-error {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.dark .icon-error {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.icon-success {
  --tw-text-opacity: 1;
  color: rgba(49, 196, 86, var(--tw-text-opacity));
}
.dark .icon-success {
  --tw-text-opacity: 1;
  color: rgba(49, 196, 86, var(--tw-text-opacity));
}
.icon-warning {
  --tw-text-opacity: 1;
  color: rgba(249, 180, 32, var(--tw-text-opacity));
}
.dark .icon-warning {
  --tw-text-opacity: 1;
  color: rgba(249, 180, 32, var(--tw-text-opacity));
}
.icon-info {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.dark .icon-info {
  --tw-text-opacity: 1;
  color: rgba(94, 130, 237, var(--tw-text-opacity));
}
/* Effect color styles

    Effects are combinations of styles used when interacting with elements for example when an element gains focus
    */
.active-text {
  --tw-text-opacity: 1;
  color: rgba(48, 86, 202, var(--tw-text-opacity));
}
.interactive-text {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.interactive-text:hover {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
.interactive-text {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.interactive-text-muted {
  --tw-text-opacity: 1;
  color: rgba(31, 36, 41, var(--tw-text-opacity));
}
.interactive-text-muted:hover {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.dark .interactive-text-muted {
  --tw-text-opacity: 1;
  color: rgba(237, 238, 239, var(--tw-text-opacity));
}
.interactive-text-muted {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.dark,
  .dark .border-gradient-to-b {
    --humio-gradient-gradient-top: #444B53;
    --humio-gradient-gradient-bottom: #2E353D;
  }
.dark .border-gradient-to-t {
    --humio-gradient-gradient-top: #2E353D;
    --humio-gradient-gradient-bottom: #444B53;
  }
.cursor-resize-ew {
    cursor: ew-resize;
  }
.cursor-resize-ns {
    cursor: ns-resize;
  }
.text-disabled {
  --tw-text-opacity: 1;
  color: rgba(19, 39, 78, var(--tw-text-opacity));
  --tw-text-opacity: 0.4;
}
.dark .text-disabled {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
  --tw-text-opacity: 0.4;
}
.text-shadow {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  }
.event-list {
  position: relative;
  z-index: 1;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .event-list {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.event-list {

  /* Ensures proper spacing on log lines. Consider moving this to the cells that contain raw logs and not things
     like formatted cells e.g. timestamp and gutters.
  */
  --gutter-width: 27px; /* 27px as in Elm + 1px for border */
  --gutter-border-color: var(--base-color-06);
  --gutter-border: solid 1px var(--gutter-border-color);
  --timestamp-width: 210px;
  --formatted-cell-text-color: #456ce3;
}
.result-view > .event-list {
  /* HACK: This fixes 100% height bug in safari */
  flex-grow: 1;
}
.record-list__selection-menu {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
.event-list__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.event-list__empty-view {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--legible-muted-text-color);
}
.record-list__header--interactive {
  cursor: pointer;
}
.record-list__header-content {
  /* TODO: This (left) should be calculated. It depends on the number of sticky columns to the left
     of this column. This magic number is the sum of their widths. */
  left: calc(var(--timestamp-width) + var(--gutter-width) + 1px);
}
.record-list__header--timestamp > .record-list__header-content,
.record-list__header-content--no-timestamp {
  /* This value is used in a calc(), and since calc need units on values to work, must says '0px' and not '0'. */
  --timestamp-width: 0px;
}
.record-list__cell {
  position: relative;
  padding: 0 6px;
  overflow: hidden;
  white-space: pre;
  vertical-align: top;
  border-right-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
}
.dark .record-list__cell {
  --tw-border-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-border-opacity));
}
.record-list__cell-controls {
  position: absolute;
  top: 1px;
  right: 4px;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 2px;
  opacity: 0;
}
.record-list__cell:hover > .record-list__cell-controls {
  opacity: 0.5;
}
.record-list__cell-controls:hover {
  /* this uses important because else the opacity from hovering the row will be move specific. */
  opacity: 1 !important;
}
.record-list--wrapped .record-list__cell {
  white-space: pre-wrap;
  word-break: break-all;
}
.record-list__header:hover {
  z-index: 4;
}
.empty-cell {
  color: var(--muted-text-color);
}
.record-list__cell--timestamp {
  position: sticky;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 7px 0 7px;

  /* this is inherit because it is above other cells when scrolling horizontally. Else you see the text through it. */
  background-color: inherit;
}
.record-list__cell--timestamp:nth-child(2) {
  /* This make the timestamp column have the right offset when there is a gutter. */
  left: var(--gutter-width);
}
.record-list__cell--formatted {
  color: var(--formatted-cell-text-color);
  white-space: nowrap !important;
}
.event-list__human-readable-timestamp {
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  font-size: 0.9em;
}
/*
|----------------------------------------------------------------------
| Record List CSS
|----------------------------------------------------------------------
|
| These are leftovers from the old RecordList module. They have not
| been renamed yet, but should in the future.
|
*/
.record-list {
  border-width: 1px 0 1px 0;
  border-spacing: 0;
  border-collapse: separate;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .record-list {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.record-list {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .record-list {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.record-list {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .record-list {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.record-list__item {
  --cell-border: solid 1px #DEE0E3;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .record-list__item {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.record-list__item {
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
}
.dark .record-list__item {
  --tw-border-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-border-opacity));
  --cell-border: solid 1px #2E353D;
}
.record-list__item:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.dark .record-list__item:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.record-list__item:hover {

  cursor: pointer;
}
.record-list__item--context-open > .record-list__cell--gutter {
  z-index: 4;
}
.record-list__item--highlighted {
  --tw-bg-opacity: 1;
  background-color: rgba(134, 234, 154, var(--tw-bg-opacity));
}
.record-list__item--highlighted:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(92, 214, 118, var(--tw-bg-opacity));
}
.dark .record-list__item--highlighted {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 79, 40, var(--tw-bg-opacity));
}
.dark .record-list__item--highlighted:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(29, 104, 54, var(--tw-bg-opacity));
}
.record-list__item__shadow {
  background-image: linear-gradient(to bottom, #1b1f2330, transparent);
  pointer-events: none;
  position: absolute;
}
/*
|----------------------------------------------------------------------
| Event Context
|----------------------------------------------------------------------
*/
.event-context {
  outline: none;
}
.event-context__container {
  position: absolute;
  top: 18px;
  width: 500px;
  font-family: var(--font-family-sans);
  cursor: default;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .event-context__container {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.event-context__container .dialog__body {
  max-height: 200px;
  padding-bottom: 0;
  overflow-y: auto;
}
.event-context__tag-column {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.event-context__tag-column:first-child {
  margin-left: 0;
}
.event-context__section {
  margin-bottom: 16px;
  margin-left: 0;
}
.event-context__time-interval-button {
  margin-right: 10px;
  margin-left: 10px;
}
.event-context__title {
  flex: 1;
}
.record-list__cell--gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  overflow: visible;
  background: inherit;
  padding-top: 1px;
}
.record-list__header {
  position: sticky;
  text-align: left;

  /* -top-px prevents Safari from having a gap pixel above the header where the boarder should be. */

  top: -1px;

  --tw-bg-opacity: 1;

  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .record-list__header {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.record-list__header {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .record-list__header {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.record-list__header {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .record-list__header {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.record-list__header {

  border-width: 0 1px 1px 0;
}
.record-list__header--timestamp {
  left: var(--gutter-width);
}
.infinite-scroll__container {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 8px;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
  color: rgb(158, 158, 158);
  white-space: nowrap;
  text-align: center;
}
.infinite-scroll__container--absolute-top {
  scroll-snap-align: start;
}
.infinite-scroll__container--absolute-bottom {
  scroll-snap-align: end;
}
.infinite-scroll__container .sk-three-bounce {
  filter: grayscale(100%) brightness(350%);
}
.infinite-scroll__more-button {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 13px;
  text-decoration: underline;
  background: transparent;
  border: none;
  outline: none;
}
.infinite-scroll__loading {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.infinite-scroll__icon {
  margin-bottom: -2px;
}
.event-list-fields-tab__cell-field-name-content {
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-list-fields-tab__popup-detail-header {
  display: grid;
  grid-auto-columns: -webkit-min-content;
  grid-auto-columns: min-content;
  grid-auto-flow: column;
  grid-gap: 10px;
  grid-template-columns: 80px repeat(auto-fill, 130px);
  margin-bottom: 8px;
  white-space: nowrap;
}
.event-list-fields-tab__popup-detail-description {
  padding: 8px 16px;
  color: var(--legible-muted-text-color);
  text-align: center;
}
.event-list-fields-tab__popup-functions {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;
  grid-template-columns: 58% auto;
  margin: 16px;
}
.event-list-fields-tab__popup-functions p {
  margin: 0;
}
.event-list-fields-tab__popup-function-warning {
  color: var(--negative-action-color-03);
}
.event-list-fields-tab__empty-not-done {
  padding: 30px;
  color: var(--legible-muted-text-color);
  text-align: center;
}
.filter-button {
  padding: 1px;
  width: 18px;
  height: 18px;
  line-height: 0;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.filter-button:hover {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
.filter-button:not(:last-child) {
  margin-right: 2px;
}
.filter-button--inverse {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.filter-button--inverse:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(132, 160, 245, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.feature-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 30px;
  overflow: auto;
}
.feature-panel__label {
  margin: 0 0 0 10px;
  text-transform: capitalize;
}
.field-group--radio-group {
  grid-area: input;
  display: flex;
  flex-direction: column;
}
.field-group--radio-button {
  display: flex;
}
@-webkit-keyframes findWithActionEnter {
  from {
    transform: scaleY(0);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes findWithActionEnter {
  from {
    transform: scaleY(0);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.find-with-action {
  -webkit-animation: findWithActionEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          animation: findWithActionEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.form-group {
  display: block;
}
.input-group2 {
  display: grid;
  grid-template:
    "label widget" auto
    "details details" auto
    "input input " 1fr
    "help  help" auto
    / 1fr auto;
}
.input-group2--horizontal {
  grid-template:
    "label input widget" auto
    "help  help  help" auto
    / auto minmax(100px, 1fr) auto;
  align-items: stretch;
}
.input-group2__content {
  grid-area: input;
}
.input-group2--horizontal > input-group2__help {
  text-align: center;
}
.input-group2--horizontal > .input-field-group__label {
  margin-bottom: 0;
  padding: 0 8px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  background-image: linear-gradient(to bottom, #efefef, #e6e6e6);
  border: var(--border-default);
  border-right: 0;
  border-radius: 3px 0 0 3px;
}
.input-group2--horizontal .text-input__input {
  min-width: 150px;
}
.input-group2 > input,
.input-group2 > textarea,
.input-group2 > select {
  grid-area: input;
  min-width: 200px;
  border: var(--border-faint);
  border-radius: 4px;
}
.input-group2 > button,
.input-group2 > .text-input {
  grid-area: input;
}
.input-group2 > .key-value-list {
  grid-area: input;
  min-width: 200px;
}
.input-group2--horizontal > select {
  padding-right: 1.5em !important;
  color: black !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: right 50%;
  border: var(--border-default);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.input-group2--horizontal > input {
  border: var(--border-default);
  border-radius: 0;
}
.input-group2--horizontal.input-group2--without-widget .text-input__input,
.input-group2--horizontal.input-group2--without-widget > select {
  border: var(--border-default);
  border-radius: 0 3px 3px 0;
}
.input-group2__details--small {
  font-size: 12px;
}
.input-group2__error {
  display: flex;
  grid-area: help;
  color: red;
}
.input-group2--full-width {
  width: 100%;
}
.input-group2--disabled .input-field-group__label {
  color: #ccc;
}
.input-group2__error-text {
  flex: 1;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.input-group2__help {
  grid-area: help;
  opacity: 0.6;
}
.input-group2__details {
  grid-area: details;
  margin-bottom: 4px;
}
.input-group2--sm .input-group2__help,
.input-group2--sm .input-group2__error {
  font-size: 11px;
}
.input-group2__error.input-group2__error--hidden {
  display: none;
}
.input-group2 input.input-checkbox {
  min-width: 0;
}
.input-checkbox__label {
  margin-left: 10px;
  font-weight: 400;
}
html .input-group2--sm > select,
html .input-group2--sm > input,
.text-input--sm .text-input__input {
  min-width: 30px;
  height: 26px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: unset;
}
.text-input__input {
  display: block;
  width: 100%;
  padding: 4px 5px 5px 15px;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  background-color: white;
  border: var(--border-faint);
  border-radius: 4px;
  outline: none;
}
/*******************************************************************************
 * Groups
 ******************************************************************************/
.input-field-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.input-field-group ~ .input-field-group {
  margin-top: 20px;
}
.input-field-group__field {
  display: flex;
  grid-area: input;
}
.input-field-group__label {
  display: flex;
  grid-area: label;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 12px;
}
.input-group2--highlighted > .input-field-group__label {
  color: var(--text-color-on-attention-purple);
  background: var(--attention-background-purple);
}
.input-field-group__label-text {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.input-field-group__label > * {
  text-transform: none;
}
.input-field-group__widget {
  grid-area: widget;
}
.input-group2--horizontal > .input-field-group__widget {
  border: var(--border-default);
  border-left: 0;
  border-radius: 0 3px 3px 0;
}
.text-input-form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}
.text-input-form-group:not(:last-child) {
  margin-bottom: 15px;
}
.text-input-form-group__hu-input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.text-input-form-group__label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.text-input {
  position: relative;
}
.text-input--full-width {
  width: 100%;
}
.text-input--full-width .text-input__suggestion {
  max-width: 100%;
}
.text-input__input {
  width: 100%;
  height: 45px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  line-height: 34px;
  background-image: none;
  border-radius: 1px;
  border-radius: 4px;
}
.input-group2--horizontal .text-input__input {
  border: var(--border-default);
  border-radius: 0;
}
.input-group2--horizontal.input-group2--without-widget .text-input__input {
  border-radius: 0 4px 4px 0;
}
.text-input__input:focus {
  outline: 0;
  box-shadow: none;
}
.text-input__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  max-height: 500px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: var(--border-faint);
  box-shadow: var(--shadow-panel);
  isolation: isolate;
}
.text-input__suggestion {
  position: relative;
  max-width: 600px;
  padding: 4px 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  cursor: pointer;
}
.text-input__suggestion--warning {
  color: gray;
  cursor: not-allowed;
}
.text-input__suggestion--outdated {
  color: gray;
}
.text-input__suggestions-loading {
  position: absolute;
  top: 2px;
  right: 10px;
}
.ctx-decorator--danger {
  border-color: red;
}
.text-input__input[type="search"] {
  box-sizing: border-box;
}
.deprecated-input-field-group {
  display: flex;
}
.deprecated-input-field-group__field {
  margin-right: 9px;
}
.access-management__scopes {
  margin-bottom: 16px;
}
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input:focus {
  outline: 0;
}
.tooltip {
  position: absolute;
  top: 20px;
  z-index: 1000;
  display: none;
  margin-top: 4px;
  padding: 10px !important;
  color: #fff;
  line-height: 22px;
  background-color: rgba(97, 97, 97, 0.9);
  border-radius: 2px;
  left: 0;
}
span.hu-form-group__tooltip-icon:hover + .tooltip {
  display: block;
}
.simple-gauge__title {
  padding: 0 20px;
  overflow: hidden;
  font-size: 30px;
  line-height: 40px;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1112px) {
  .simple-gauge__title {
    font-size: 20px;
  }
}
.simple-gauge__number {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 50px;
  line-height: 1em;
  white-space: nowrap;
}
:root {
  --group-list-bg-color: var(--ui-background-02);
  --group-list-item-active-color: var(--highlight-background-purple);
}
.dark {
  --group-list-bg-color: #333;
}
.group-list {
  --transition: 0.2 ease-in-out;
  --group-list-padding: 20px;
  --group-list-spacing: 16px;
  --group-list-item-padding: 10px;
  --group-list-border: solid 1px var(--base-color-03);
  --group-list-max-width: 800px;
}
.group-list__groups {
  max-width: 100%;
  padding: 0;
}
.group-list__group-icon {
  margin-left: 6px;
  align-items: center;
  display: flex;
  opacity: 0.5;
}
.group-list__group-icon:hover {
  opacity: 1;
}
.group-list__item {
  max-width: 100%;
  display: grid;
  grid-template:
    "     star        icon       title               labels       menu" 1fr
    / -webkit-max-content -webkit-max-content 1fr minmax(80px, 20%) 30px;
  grid-template:
    "     star        icon       title               labels       menu" 1fr
    / max-content max-content 1fr minmax(80px, 20%) 30px;
  align-items: stretch;
  justify-content: space-between;
  transition: background-color var(--transition);
}
.group-list__labels {
  grid-area: labels;
  grid-auto-flow: row;
  grid-gap: 1px;
  padding: var(--group-list-item-padding) 0;
  white-space: nowrap;
}
.group-list__item-title {
  grid-area: title;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-list__item-controls {
  grid-area: menu;
}
.group-list__item-star {
  grid-area: star;
}
.group-list__item-icon {
  grid-area: icon;
  -o-object-fit: contain;
     object-fit: contain;
}
.group-list__item-icon:empty {
  padding-left: none;
}
.group-list__item:hover .group-list__item-star {
  opacity: 1;
}
.group-list__item-star--filled {
  opacity: 1 !important;
}
.group-list__item-label {
  cursor: pointer;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.hint[data-balloon][data-balloon-pos="down"]::after {
  left: calc(50% + 2px);
}
.hint[data-balloon][data-balloon-pos="down"]::before {
  left: calc(50% + 2px);
}
.hint[data-balloon][data-balloon-pos="down-right"]::after {
  right: -7px;
}
.hint[data-balloon][data-balloon-pos="down-right"]::before {
  right: -2px;
}
.humio-editor {
  position: relative;
  display: block;
  background: white;
}
.humio-editor__content {
  position: absolute;
  top: 7px;
  right: 0;
  bottom: 7px;
  left: 0;
}
/* Because of the padding in the search field, some Monaco elements look strange.
   It would be nice to be able to set the padding within the editor, but we cannot
   figure out how. So instead we hide the ugly elements. Please help fix.
 */
.humio-editor--no-ruler .decorationsOverviewRuler {
  display: none;
}
.humio-editor .scroll-decoration {
  display: none;
}
.material-icons--sm {
  font-size: 18px !important;
}
.material-icons--xl {
  font-size: 48px !important;
}
.material-icons {
  display: inline-block;
  color: inherit;
  font-weight: normal;
  font-size: 24px;
  font-family: "Material Icons", sans-serif;
  font-style: normal;
  line-height: 1;
  direction: ltr;
  letter-spacing: normal;
  white-space: nowrap;
  text-transform: none;
  word-wrap: normal;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.close-icon {
  cursor: pointer;
}
.close-icon:hover {
  opacity: 0.7;
}
.close-icon-inverted {
  color: var(--base-color-01);
  background-color: var(--base-color-06);
  border-radius: 16px;
  padding: 2px;
}
.error {
  color: var(--negative-action-color-04);
}
.info {
  color: var(--info-action-color-04);
}
.warning {
  color: var(--warning-color-03);
}
.notification-icon {
  position: relative;
  width: 24px;
  height: 24px;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-inactive {
  opacity: 0.5;
}
.notification-wrapper {
  display: flex;
  align-items: center;
  color: var(--base-color-01);
}
.notification-wrapper:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  opacity: unset;
}
.notification-active {
  opacity: unset;
}
.notification-wrapper:active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.notification-modifier {
  position: absolute;
  left: 13px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: solid 2px var(--primary-color-09);
}
.release-notes-inactive {
  opacity: 0.5;
}
.release-notes-inactive:hover {
  cursor: pointer;
  opacity: unset;
}
.release-notes {
  margin-top: 3px;
}
.notification-modifier--error {
  background-color: var(--negative-action-color-04);
}
.notification-modifier--warning {
  background-color: var(--warning-color-03);
}
.infinite-progress-bar {
  --color: var(--primary-color-06);
  --color2: var(--primary-color-04);

  max-width: 100%;
  height: 14px;

  --bar-width: 24px;

  background-image:
    repeating-linear-gradient(
      -45deg,
      var(--color),
      var(--color) var(--bar-width),
      var(--color2) var(--bar-width),
      var(--color2) calc(var(--bar-width) * 2)
    );
  background-size: 200% 200%;
  border-radius: 5px;
  -webkit-animation: barberpole 20s linear infinite;
          animation: barberpole 20s linear infinite;
}
.infinite-progress-bar__bar {
  display: inline-block;
  box-sizing: border-box;
  border: solid 6px rgba(0, 0, 0, 0.09);
  border-radius: 100px;
}
@-webkit-keyframes barberpole {
  100% {
    background-position: 100% 100%;
  }
}
@keyframes barberpole {
  100% {
    background-position: 100% 100%;
  }
}
.inspector {
  --row-height: 26px;
  --margin: 10px;
  --box-size: 16px;
  --border-active-width: 2px;
  --focus-border: solid var(--border-active-width) #456ce3;

  display: grid;
  grid-auto-flow: row;
  grid-gap: 8px;
  color: #333;
  font-size: 12px;

  --spacing: 6px;
  --control-border-color: var(--base-color-04);
}
.inspector__title-row--inactive:not(:hover) {
  color: var(--base-color-06);
}
.inspector__title-row--inactive.inspector__title-row--clickable:hover {
  color: var(--base-color-09);
}
.inspector__title {
  grid-area: title;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(31, 36, 41, var(--tw-text-opacity));
}
.dark .inspector__title {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.inspector__label {
  margin-right: 12px;
  display: flex;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .inspector__label {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.inspector__label--no-wrap {
  white-space: nowrap;
}
.inspector__button {
  flex: 0 0 auto;
  min-width: var(--row-height);
  padding: 0;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inspector__button--row {
  height: 32px;
}
.inspector__button--row:active {
  background-color: transparent !important;
  border: var(--focus-border) !important;
}
.inspector__separator {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .inspector__separator {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.inspector__separator {

  margin: 8px calc(-1 * var(--margin));
}
.inspector__separator--hidden {
  opacity: 0;
}
.inspector__color-picker {
  --size: var(--box-size);

  display: grid;
  grid-gap: 6px;
  grid-template: "well input";
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.inspector__color-picker-input {
  grid-area: well;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  border: none;
  outline: none;
}
.inspector__color-picker-well {
  display: flex;
  grid-area: well;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  box-shadow: 0 0 1px inset rgba(0, 0, 0, 0.4);

  /* pointer-events: none. This is because the underlying color input should get the clicks */
  pointer-events: none;
  border-radius: 0.25rem;
}
.inspector__color-picker-value {
  grid-area: input;
  width: 58px;
  height: var(--size);
  text-transform: uppercase;
  border: none;
  outline: none;
  background: transparent;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .inspector__color-picker-value {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.inspector__checkbox-label {
  display: grid;
  grid-auto-flow: column;
  grid-gap: var(--spacing);
  grid-template: "checkbox label" / var(--box-size) 1fr;
  align-items: center;
  min-height: var(--row-height);
}
.inspector__checkbox-text {
  /* Labels wont align in Firefox. So either flex of set some sort of margin. */
  display: flex;
  grid-area: label;
  align-items: center;
}
.inspector__checkbox-input {
  grid-area: checkbox;
}
.inspector__label--muted {
  color: var(--base-color-06);
}
.inspector__label--error {
  color: var(--negative-action-color-04);
}
.inspector__label--warning {
  color: orange;
}
.inspector__dropdown {
  position: relative;
  display: flex;
  min-width: 100px;

  /* HACK: Prevents the toggle buttons from overflowing if they don't fit the container */
  max-width: 200px;
}
.inspector__dropdown-current-value {
  display: block;
  width: 100%;
  padding: 4px 24px 4px 6px !important;
  text-align: left;
}
.inspector__dropdown-current-value::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background-image: url(../../static/media/2c894b17ec09c5813364.svg);
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  pointer-events: none;
}
.inspector__dropdown-button {
  position: relative;
  padding: 8px 26px 8px 26px;
  color: white;
  line-height: 1;
  text-align: left;
  background-color: black;
  border: none;
  -webkit-appearance: none;
}
.inspector__dropdown-button-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inspector__dropdown-button--active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  background-image: url(../../static/media/a694cd23cf4d01c00fb0.svg);
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  pointer-events: none;
}
.inspector__dropdown-help {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26px;
  background-image: url(../../static/media/5dfee8d0c7cf687c2930.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.inspector__dropdown-button:hover {
  background-color: #456ce3;
}
.inspector__dropdown-items {
  position: absolute;
  right: -10px;
  z-index: 1;
  display: grid;
  grid-auto-flow: row;
  min-width: 150px;
  padding: 8px 0;
  background-color: black;
}
.inspector__slider {
  display: grid;
  grid-template:
    "min value max" auto
    "slider slider slider" auto /
    1fr 1fr 1fr;
  color: var(--legible-muted-text-color);
  font-size: 10px;
}
.inspector__slider-min {
  grid-area: min;
}
.inspector__slider-max {
  grid-area: max;
  text-align: right;
}
.inspector__slider-value {
  grid-area: value;
  text-align: center;
}
.inspector__slider-input-container {
  grid-area: slider;
}
.inspector__slider-input {
  width: 100%;
}
.login {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 260px;
  width: 100%;
  color: white;
  font-size: 14px;
  line-height: 22px;
  font-weight: bold;
  background-color: var(--color);
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.3s ease;
  height: 54px;
  padding: var(--padding);
}
.login:not(:last-child) {
  margin-bottom: 16px;
}
.login:hover {
  background-color: var(--hover-color);
}
.oidc {
  --color: var(--base-color-08);
  --hover-color: var(--base-color-07);
}
.google {
  /* Colors and icons are compliant with Google branding guidelines: https://developers.google.com/identity/branding-guidelines */
  --color: #4285f4;
  --hover-color: #3367d6;
}
.bitbucket {
  /* Colors and icons are compliant with Bitbucket branding guidelines: https://atlassian.design/guidelines/marketing/foundations/color-usage */
  --color: #0052cc;
  --hover-color: var(--info-action-color-05);
}
.github {
  --color: var(--base-color-09);
  --hover-color: var(--base-color-10);
}
.social-log-in-button__icon {
  width: 38px;
  height: 38px;
  margin-right: 10px;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
}
.oidc .social-log-in-button__icon {
  background-image: url(../../static/media/776bdbace433b2ff7816.svg);
}
.github .social-log-in-button__icon {
  background-image: url(../../static/media/c495e5d05711c7c1415b.svg);
}
.google .social-log-in-button__icon {
  background-image: url(../../static/media/14d4684a6cc6e04fd08b.svg);
}
.bitbucket .social-log-in-button__icon {
  background-image: url(../../static/media/645149de30f814a32d5b.svg);
}
.keybinding-table {
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 120px;
  background-color: white;
  border-top: 1px solid #bbb;
}
.keybinding-table__title {
  display: flex;
  align-items: center;
  height: 26px;
  margin-bottom: 8px;
  padding: 0 20px;
  border-bottom: 1px solid #bbb;
}
.keybinding-table__bindings {
  display: grid;
  grid-auto-columns: 400px;
  grid-auto-flow: dense;
  padding: 0 20px;
  background-color: white;
}
.keybinding-table__binding {
  display: flex;
  justify-content: space-between;
}
.keybinding-table__binding-keys {
  font-family: "curier", monospace;
}
.keybinding-table__binding-key {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.1em 0.5em;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
}
.keybinding-table__binding-text {
  font-weight: 700;
  text-align: right;
}
.loading-text {
  display: flex;
  flex-wrap: wrap;
  -webkit-animation-name: loading-text;
          animation-name: loading-text;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.loading-text__word {
  border-radius: 2px;
  display: inline-block;
  height: 1.2em;
  margin-right: 1ch;
  margin-bottom: 0.5em;
  --tw-bg-opacity: 1;
  background-color: rgba(222, 224, 227, var(--tw-bg-opacity));
}
.dark .loading-text__word {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
}
.loading-text--small {
  font-size: 10px;
}
.loading-text--medium {
  font-size: 14px;
}
.loading-text--large {
  font-size: 20px;
}
@-webkit-keyframes loading-text {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}
@keyframes loading-text {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}
@media all and (max-width: 768px) {
  .menu__content {
    padding: 0 20px;
  }

  #main-menu,
  #account-menu,
  #help-menu {
    display: none;
  }
}
@media all and (min-width: 769px) {
  #phone-menu {
    display: none;
  }
}
.release-list {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e7e7e7;
}
.release-list--failed {
  padding: 20px;
  text-align: center;
}
.release-list__selection {
  position: absolute;
  top: 0;
  padding-top: 3.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
}
.release-list__selection-details h2 {
  font-size: 20px !important;
  font-weight: 500;
}
.release-list__selection-details {
  flex: 1 1 auto;
  padding: 16px;
}
.release-list__selection-details hr {
  border-top-color: #bfbfbf;
  margin: 16px 0;
}
.main-menu__notification-subheader {
  display: flex;
  word-wrap: break-word;
}
.main-menu__notification-section {
  padding: 8px 16px;
}
.main-menu__notification-section:nth-child(3) {
  padding-top: 16px;
}
.main-menu__notification-subsection {
  padding-left: 16px;
}
.main-menu__notification-list {
  padding: 8px 0;
}
.title-bar__timestamp {
  grid-auto-flow: column;
  grid-gap: 8px;
  justify-content: end;
  font-size: 26px;
  white-space: nowrap;
}
.title-bar__timezone {
  font-size: 10px;
}
.title-bar__filter-button-wrapper {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
.title-bar__time {
  display: grid;
  grid-area: time;
  line-height: 1;
  text-align: right;
}
.message-body {
  display: grid;
  grid-template:
    "icon title" auto
    "paragraphs paragraphs" auto /
    24px 1fr;
  padding: 16px;
}
.message-body__buttons {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  justify-content: flex-start;
}
.message-body__paragraphs {
  grid-area: paragraphs;
}
.message-body__icon {
  grid-area: icon;
  height: 24px;
}
.message-body__icon--info * {
  color: var(--info-action-color-03);
}
.message-body__icon--success * {
  color: var(--positive-action-color-03);
}
.message-body__icon--warning * {
  color: var(--warning-color-03);
}
.message-body__icon--error * {
  color: var(--negative-action-color-03);
}
.message-body__title {
  display: flex;
  flex-direction: column;
  grid-area: title;
  justify-content: center;
  padding-left: 8px;
  font-weight: 700;
}
.no-selection-owls__title,
.no-selection-owls__description {
  margin-top: 0;
  margin-bottom: 0;
  color: #828282;
}
.nothing-here-yet {
  text-align: center;
  border-radius: 3px;
}
.nothing-here-yet.nothing-here-yet--list {
  margin: 0 12px;
  padding: 20px;
}
.nothing-here-yet.nothing-here-yet--page {
  display: inline-block;
  margin: 0 auto;
  padding: 20px 60px;
  padding-bottom: 7px;
}
.block__content--padded {
  margin-top: 20px;
}
.block-item {
  position: relative;
  display: grid;
  grid-template:
    "icon        title       title" auto
    "icon        description description" auto
    "icon        details     details" auto / 26px 1fr 1fr;
}
.block-item:first-child {
  margin-top: 30px;
}
.block-item__details {
  display: grid;
  grid-area: details;
  grid-auto-flow: column;
  grid-gap: 10px;
  justify-content: space-between;
  min-height: 18px;
}
.block-item__description {
  display: block;
  grid-area: description;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.block-item__title {
  grid-area: title;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.block-item__separator {
  display: inline-block;
  margin: 0 8px;
  color: #bbb;
}
.popup {
  --arrow-size: 10px;

  position: absolute;
  top: calc(100% + 13px);
  right: calc(50% - var(--arrow-size));
  z-index: 11;
  cursor: default;

  --bg: #ffffff;
}
.dark .popup {
  --bg: #121417;
}
.popup--flex {
  display: flex;
  flex-direction: column;
}
.popup--flat-right-side {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.popup__arrow {
  position: absolute;
  top: calc(-1 * var(--arrow-size) + 2px);
  right: calc(var(--arrow-size) * 2);

  --stroke: #456CE3;
}
.popup--right {
  right: unset;
  left: calc(var(--arrow-size) * -2);
}
.popup--center {
  right: initial;
  left: 50%;
  transform: translate(-50%);
}
.popup--center .popup__arrow {
  right: calc(50% - 2 * var(--arrow-size));
}
.popup--right .popup__arrow {
  right: unset;
  left: calc(var(--arrow-size) * 2);
}
.progress-bar2 {
  display: grid;
  grid-row-gap: 3px;
  grid-template: "label values" 20px "bar   bar" auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.progress-bar2__label {
  grid-area: label;
  font-weight: 500;
}
.progress-bar2__values {
  grid-area: values;
  justify-self: end;
}
.progress-bar2__bar {
  grid-area: bar;
  height: 16px;
  margin-top: 0.25rem;
}
.progress-bar2__fill {
  height: 100%;
}
.query-error {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}
.radio-list {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 16px;
  width: 100%;
  background-color: transparent;
}
.radio-list__item {
  background-color: transparent;
  border: 1px solid #c4c8cd;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0;
}
.radio-list__item--selected {
  border: 1px solid #456ce3;
}
.radio-list__item input[type="radio"] {
  margin-bottom: 2px;
}
.radio-list__label {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  align-items: center;
  justify-content: start;
  font-size: 14px;
  padding: 16px;
  padding-left: 40px;
  cursor: pointer;
}
.radio-list__item p {
  margin: 0;
}
/* Hide the browser's default radio button */
.radio-list__label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.radio-list__indicator {
  position: absolute;
  top: 18px;
  left: 16px;
  height: 16px;
  width: 16px;
  border: 1px solid #dee0e3;
  border-radius: 50%;
  background-color: white;
}
/* On mouse-over, add a grey background color */
.radio-list__label:hover input ~ .radio-list__indicator {
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-list__indicator::after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-list__label input:checked ~ .radio-list__indicator::after {
  display: block;
}
/* Style the indicator (dot/circle) */
.radio-list__label .radio-list__indicator::after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2d9cdb;
}
.resize__border {
  flex: 0 0 auto;
}
.resize__content {
  display: flex;
}
.resize__panel {
  display: flex;
}
humio-resize-observer {
  display: block;
}
.role-selector {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 410px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}
.role-selector__roles {
  flex: 1;
  padding-left: 5px;
}
.role-selector__header {
  margin-top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.role-selector__roles-list {
  margin-top: 10px;
  padding: 0;
}
.role-selector__role {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.role-selector__header strong {
  flex: 1;
}
.text-input__input:disabled {
  color: #8f8f8f;
  background-color: #f1f1f1;
  border-color: #cecece;
}
.settings-box__segment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.input-checkbox {
  display: flex;
  align-items: flex-start;
}
.input-checkbox__input {
  flex: 0 0 auto;
  width: 24px;
  margin-top: 4px;
}
.settings__row {
  height: 36px;
}
.settings-box__content {
  position: relative;
}
.side-nav-menu {
  max-width: 300px;
}
.side-nav-page__right-secondary {
  display: flex;
  flex-direction: column;

  /*
    TODO: Make this part of the grid layout instead...
          we probably need to restructure the page hierarchy
  */
  width: 380px;
  margin-top: 0;
}
.side-nav-page__right-secondary__content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.side-nav-page__right-secondary__header-text {
  font-size: 24px;
}
.side-nav-page__right {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  padding: 20px;
}
.side-panel {
  --width: 320px;
  --shadow-width: 20px;

  position: relative;
  top: 0;
  bottom: 0;
  width: var(--width);
  color: #333 !important;
  background-color: var(--ui-background-01);
  border: var(--border-default);
  border-width: 0;
  box-shadow: var(--shadow-panel);

  --collapse-button-size: 20px;
}
.side-panel::before {
  position: absolute;
  top: 0;
  right: var(--right);
  bottom: 0;
  left: var(--left);
  width: var(--shadow-width);
  background-image:
    linear-gradient(
      var(--shadow-direction),
      rgba(0, 0, 0, 0.23),
      rgba(0, 0, 0, 0)
    );
  content: "";
  pointer-events: none;
}
.side-panel--left {
  left: 0;

  --left: auto;
  --right: calc(var(--shadow-width) * -1);
  --shadow-direction: "to right";

  border-right-width: 1px;

  --collapse-left: auto;
  --collapse-right: calc(-1 * var(--collapse-button-size));
  --collapse-icon: "<";
  --collapse-border-radius: 0 2px 2px 0;
}
.side-panel--right {
  right: 0;

  --left: calc(var(--shadow-width) * -1);
  --right: auto;
  --shadow-direction: "to left";

  border-left-width: 1px;

  --collapse-left: calc(-1 * var(--collapse-button-size));
  --collapse-right: auto;
  --collapse-icon: ">";
  --collapse-border-radius: 2px 0 0 2px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .side-panel--right {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.side-panel__collapse-button::before {
  content: var(--collapse-icon);
}
.side-panel__collapse-button {
  position: absolute;
  top: 16px;
  right: var(--collapse-right);
  left: var(--collapse-left);
  width: var(--collapse-button-size);
  height: var(--collapse-button-size);
  color: var(--base-color-02);
  font-size: 10px;
  background-color: var(--base-color-08);
  border: none;
  border-radius: var(--collapse-border-radius);
}
.side-panel--collapsed {
  border: none;
  box-shadow: none;
}
.side-panel--collapsed.side-panel--left {
  --collapse-icon: ">";
}
.side-panel--collapsed.side-panel--right {
  --collapse-icon: "<";
}
.side-panel_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.top-menu {
  display: grid;
  grid-gap: 15px;
  grid-template: "logo left-nav center-nav right-nav right-nav" / 100px 2fr 1fr 2fr 100px;
  align-items: center;
  height: 50px;
  flex: 0 0 auto;
}
.top-menu--panel {
  grid-template: ". logo left-nav right-nav ." / 10px 100px auto 100px 10px;
}
.top-menu__title {
  grid-area: left-nav;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}
.top-menu__buttons {
  display: flex;
  grid-area: right-nav;
  justify-content: flex-end;
}
/*********************
*    AFTER TAILWIND  *
*********************/
.star-container__shown-on-hover {
  display: none;
}
.star-container:hover .star-container__shown-on-hover {
  display: inline-block;
}
.star-container__hidden-on-hover {
  display: inline-block;
}
.star-container:hover .star-container__hidden-on-hover {
  display: none;
}
/*********************
*   BEFORE TAILWIND  *
*********************/
.star {
  display: inline-block;
  background-color: transparent;
  background-image: url(../../static/media/37d228f8df59dcdfa65d.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: none;
}
.time-selector__content {
  width: 560px;
}
.time-selector__header {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}
.time-selector__preset-item {
  font-size: 11px;
}
.time-selector__section-button {
  display: flex;
  height: 1.5rem;
  width: 100%;
  align-items: center;
  border-bottom-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.time-selector__section--open .time-selector__section-body {
  height: 320px;
}
.time-selector__section-body {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: all 0.2s;
}
.time-selector__header-field {
  flex: 1 1 auto;
}
.time-selector__section-body::before {
  position: absolute;
  top: 0;
  right: -100px;
  bottom: 0;
  left: -100px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2) inset;
  content: " ";
  pointer-events: none;
}
.time-selector__field-group:not(:first-child) {
  margin-left: 10px;
}
.time-selector__time {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 5px;
}
.time-selector__time-label {
  display: block;
  margin-bottom: 3px;
  font-weight: bold;
  font-size: 11px;
}
.time-selector__time-value {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));

  font-weight: 400;
  font-size: 11px;
}
.time-selector__label {
  display: block;
  margin-bottom: 5px;
}
.time-selector__section-form {
  display: flex;
}
.time-selector__date-range {
  display: flex;
  justify-content: space-between;
}
.time-selector__presets {
  display: flex;
}
.time-selector__preset-column {
  flex: 0 0 auto;
  width: 50%;
}
.time-selector__preset-column:not(:last-child) {
  margin-right: 15px;
}
.time-selector__preset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toggle-switch {
  position: relative;
}
.toggle-switch__background {
  width: 20px;
  height: 10px;
  border-radius: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.toggle-switch__circle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-top: -1px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s linear;
}
.toggle-switch--on .toggle-switch__background {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
}
.toggle-switch--on .toggle-switch__circle {
  margin-left: 8px;
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.toggle-switch--off .toggle-switch__background {
  --tw-bg-opacity: 1;
  background-color: rgba(222, 224, 227, var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
}
.toggle-switch--off .toggle-switch__circle {
  margin-left: 0;
  --tw-bg-opacity: 1;
  background-color: rgba(99, 107, 120, var(--tw-bg-opacity));
}
.toggle-switch__wrapper {
  display: flex;
  flex-direction: row;
}
.toggle-switch__wrapper:hover {
  cursor: pointer;
}
.toggle-switch__inner {
  align-self: center;
  margin-right: 8px;
}
.humioTooltip:hover .humioTooltipPopup {
  display: block;
}
.humioTooltipIcon {
  display: block;
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
  outline: none;
}
.humioTooltipPopupContent {
  right: calc(50% - 33px);
  min-width: 300px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
.humioTooltipPopupContent::before {
  position: absolute;
  bottom: 100%;
  left: 15px;
  width: 300px;
  height: 25px;
  content: " ";
}
.humioTooltip--right .humioTooltipPopupContent {
  right: unset;
  left: calc(50% - 33px);
}
.humioTooltip--right .humioTooltipPopupContent::after {
  right: calc(100% - 33px);
  left: unset;
  margin-right: -15px;
  margin-left: unset;
}
.humioTooltipPopupContent::after {
  position: absolute;
  bottom: 100%;
  left: calc(100% - 33px);
  width: 0;
  height: 0;
  margin-left: -14px;
  border: 1px solid transparent;
  border-color: rgba(136, 183, 213, 0);
  border-width: 14px;
  border-bottom-color: #1f2429;
  content: " ";
}
.top-notification {
  padding-right: 25px;
  padding-left: 0;
}
:root {
  --top-panel-bg-color: var(--base-color-02);
  --top-panel-fg-color: var(--text-color);
  --top-panel-border-color: var(--base-color-03);
}
.top-panel__progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.top-panel__title {
  max-width: 400px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tutorial-image--welcome {
  background-image: url(../../static/media/f5feaa3df7920c6b9ef6.svg);
}
.tutorial-image--medal {
  background-image: url(../../static/media/98064aa5b3c87ce98bf8.svg);
}
.tutorial-pulse:not(:focus) {
  -webkit-animation-name: tutorial-pulse-animation;
          animation-name: tutorial-pulse-animation;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.tutorial-pulse-inset {
  position: relative;
}
.tutorial-pulse-inset:not(:focus)::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  -webkit-animation-name: tutorial-pulse-inset-animation;
          animation-name: tutorial-pulse-inset-animation;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: 5;
          animation-iteration-count: 5;
  content: "";
  pointer-events: none;
}
@-webkit-keyframes tutorial-pulse-animation {
  0%,
  100% {
    box-shadow: 0 0 2px #E1FEE6;
  }

  50% {
    box-shadow: 0 0 30px #31C456;
  }
}
@keyframes tutorial-pulse-animation {
  0%,
  100% {
    box-shadow: 0 0 2px #E1FEE6;
  }

  50% {
    box-shadow: 0 0 30px #31C456;
  }
}
@-webkit-keyframes tutorial-pulse-inset-animation {
  0%,
  100% {
    background-color: rgba(57, 42, 101, 0);
    box-shadow: inset 0 0 2px #E1FEE6;
  }

  50% {
    background-color: rgba(57, 42, 101, 0.1);
    box-shadow: inset 0 0 12px #31C456;
  }
}
@keyframes tutorial-pulse-inset-animation {
  0%,
  100% {
    background-color: rgba(57, 42, 101, 0);
    box-shadow: inset 0 0 2px #E1FEE6;
  }

  50% {
    background-color: rgba(57, 42, 101, 0.1);
    box-shadow: inset 0 0 12px #31C456;
  }
}
.chart {
  position: relative;
  display: grid;
  grid-template:
    "chart  right" 1fr "bottom right" auto /
    1fr auto;

  --dot-size: 10px;

  border-radius: 0.25rem;
}
.vega-bind {
  display: none;
}
.chart__tooltip {
  position: absolute;
  z-index: 1;
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .chart__tooltip {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.chart__tooltip {

  pointer-events: none;
}
.chart__tooltip-header {
  padding: 8px 16px 4px;
  font-size: 10px;
  white-space: pre-line;
  text-align: center;
}
.chart__tooltip-content {
  min-width: 200px;
  display: inline-block;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .chart__tooltip-content {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.chart__tooltip-footer {
  padding: 8px 16px 4px;
  font-size: 10px;
  white-space: pre-line;
  text-align: center;
  opacity: 0.6;
}
.chart__table {
  min-width: 100%;
  line-height: 1;
  table-layout: fixed;
}
.chart__plot {
  position: relative;
  grid-area: chart;
}
.chart__plot canvas {
  display: block;
}
.chart .vega-embed {
  padding-right: 0;
}
/* Chart Legend */
.chart__legend-cell {
  max-width: 160px;
  padding: 2px;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
  text-overflow: ellipsis;
}
.chart__legend-cell:first-child {
  padding-left: 16px;
}
.chart__legend-cell:last-child {
  padding-right: 16px;
}
.chart__legend-cell--left {
  text-align: left;
}
.chart__legend-cell--dot {
  --padding-right: 6px;
  --padding-left: 16px;

  width: calc(var(--padding-right) + var(--padding-left) + var(--dot-size));
  padding-right: var(--padding-right);
  padding-left: var(--padding-left);
}
.chart__legend {
  min-width: 80px;
  overflow: auto;
  white-space: nowrap;
}
.chart__legend-row {
  cursor: pointer;
}
.chart__legend-box {
  padding: 0;
}
.chart__legend--right {
  grid-area: right;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .chart__legend--right {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.chart__legend--right {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.chart__legend--bottom {
  grid-area: bottom;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .chart__legend--bottom {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.chart__legend--bottom {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  padding: 0.5rem;
}
.dark .chart__legend--bottom {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.chart__legend--bottom table {
  width: 100%;
}
.chart__legend--bottom tbody {
  display: flex;
  flex-wrap: wrap;
}
.chart__legend-circle {
  width: var(--dot-size);
  height: var(--dot-size);

  /* --background-color is set from Elm */
  background: var(--background-color);
  border: solid 1px var(--border-color);
  border-radius: 50%;

  --border-color: transparent;
}
.chart__legend-row--disabled {
  color: var(--muted-text-color);
}
.chart__legend-row--disabled .chart__legend-circle {
  background: #DEE0E3;

  --border-color: #C4C8CD;
}
.dark .chart__legend-row--disabled .chart__legend-circle {
  background: #2E353D;

  --border-color: #636B78;
}
.raw-widget {
  display: flex;
  flex-direction: column-reverse;
  align-content: flex-end;
  max-height: 100%;
  padding: 16px;
  overflow-y: auto;
  font-family: monospace;
}
.raw-widget__line {
  flex: 1 1 auto;
  margin-bottom: 5px;
  white-space: pre-wrap;
}
.raw-widget__line::before {
  display: inline-block;
  width: 12px;
  margin-right: 10px;
  color: purple;
  text-align: right;
  content: ">";
  pointer-events: none;
}
.no-match {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.no-match__figure {
  position: relative;
  top: 0;
  color: #484848;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 2px;
}
.no-match__figure div:first-child {
  margin-left: 12px;
}
.no-match__eye-closed {
  position: absolute;
  margin-left: 2px;
  line-height: 12px;
  -webkit-animation-name: owlblinkClosed;
          animation-name: owlblinkClosed;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  -webkit-animation-timing-function: step-end;
          animation-timing-function: step-end;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.no-match__eye-closed--left {
  top: 33px;
  left: 8px;
  line-height: 23px;
  letter-spacing: 0;
  opacity: 0;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.no-match__eye-closed--right {
  top: 36px;
  left: 46px;
  padding-left: 2px;
  line-height: 21px;
  opacity: 0;
}
.no-match__eye {
  -webkit-animation-name: owlblinkOpened;
          animation-name: owlblinkOpened;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  -webkit-animation-timing-function: step-end;
          animation-timing-function: step-end;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.no-match__eye-opened--left {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes owlblinkOpened {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes owlblinkOpened {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes owlblinkClosed {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes owlblinkClosed {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
.no-match__text {
  margin-top: 20px;
  color: #4c4e5a;
  font-size: 14px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
}
.result-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.result-view__progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
}
.result-view__error {
  --size: 37px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
  border-width: 0 0 var(--size) var(--size);
}
.result-view__error-text {
  padding: 10px;
}
.result-view__error > i {
  position: absolute;
  left: calc(var(--size) * -1);
  color: #ffe7e7;
}
.result-view__error .popup {
  top: 20px;
  left: -25px;
  display: none;
  min-width: 300px;
}
.result-view__error:hover .popup {
  display: block;
}
.result-view humio-sankey {
  align-self: center;
}
.table-view__page-sizes {
  display: flex;
  align-items: center;
}
.table-view__page-sizes > *:last-child {
  margin-left: 10px;
}
.table-view__alert {
  margin: 10px 20px;
}
.widget-view__editor {
  width: 300px;
  max-height: 100%;
  overflow: auto;
}
.widget-view__editor-content {
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.widget-view__editor-content--shown {
  display: flex;
  margin-left: 0;
}
.result-view humio-worldmap {
  align-self: center;
}
.clipboard__copy-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.clipboard__copy-input {
  position: absolute;
  top: 0;
  left: 0;
}
.jump-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
}
.jump-panel label {
  margin: 0 8px;
}
.jump-panel__search-field {
  margin: 0 8px 8px;
}
.jump-panel__search-field.input-field {
  width: auto;
}
.jump-panel__window {
  flex: 0 0 auto;
  width: 500px;
  margin-top: 170px;
}
.jump-panel__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 0;
  border-radius: 4px;
}
.jump-panel__items {
  max-height: 200px;
  overflow-y: scroll;
}
.jump-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jump-panel__item:hover {
  cursor: pointer;
}
.keybindings-dialog {
  padding: 20px;
  display: grid;
  width: 700px;
  grid-gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2fr;
  justify-content: center;
}
.permissions-management {
  display: flex;
  height: 100%;
  width: 100%;
  min-height: 0;
}
.permissions-management__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
#the-sandbox-explination {
  max-width: 900px;
  margin: 0 40px;
}
.explination {
  display: grid;
  grid-template:
    "i . t" auto
    "i . d" auto / 104px 40px auto;
}
.explination__title {
  grid-area: t;
}
.explination__icon {
  grid-area: i;
  width: 96px;
  height: 104px;
  background-image: url(../../static/media/fe8f91cb7ec7a3e29536.svg);
  background-repeat: no-repeat;
  background-size: 96px 104px;
}
.explination__description {
  grid-area: d;
}
.type-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.type-picker__items {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 40px;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}
@media screen and (max-width: 900px) {
  .type-picker__items {
    grid-auto-flow: row;
  }
}
.type-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 400px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}
.type-picker__item--disabled {
  opacity: 0.6;
  filter: grayscale(100%);
}
.overview__full {
  grid-row: 3 / -1;
  grid-column: 1 / -1;
}
.type-picker__item-icon {
  width: 100%;
  height: 240px;
  background-repeat: no-repeat;
  background-position: center center;
}
.type-picker__item--repo .type-picker__item-icon {
  background-image: url(../../static/media/aa26b759671df61f7c11.svg);
  background-size: 152px 152px;
}
.type-picker__item--view .type-picker__item-icon {
  background-image: url(../../static/media/28eb6b80bd35a0930882.svg);
  background-size: 152px 152px;
}
.page-new-dataspace__errors {
  margin-bottom: 20px;
}
.connection-table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}
.kafka-cluster__ledger {
  font-weight: 700;
}
.kafka-cluster__left-indent-1 {
  padding-left: 32px;
}
.kafka-cluster__left-indent-2 {
  padding-left: 64px;
}
.kafka-cluster__left-indent-3 {
  padding-left: 96px;
}
.kafka-cluster .settings-header {
  grid-template-columns: auto 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.kafka-cluster .kafka-topic-rows,
.kafka-cluster .kafka-partition-rows {
  margin-top: 35px;
  padding-top: 35px !important;
  border-top: solid black 2px;
}
.kafka-cluster .grid__row.settings__row {
  box-sizing: content-box;
  height: inherit;
  padding-top: 15px;
  padding-bottom: 15px;
}
.kafka-cluster .grid__row:nth-of-type(even) {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .kafka-cluster .grid__row:nth-of-type(even) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.kafka-cluster .kafka-node-rows ~ .grid__row.settings__row:hover, .kafka-cluster .kafka-topic-rows ~ .grid__row.settings__row:hover {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .kafka-cluster .kafka-node-rows ~ .grid__row.settings__row:hover, .dark .kafka-cluster .kafka-topic-rows ~ .grid__row.settings__row:hover {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.kafka-cluster .kafka-node-rows,
.kafka-cluster .kafka-topic-rows,
.kafka-cluster .kafka-partition-rows {
  margin-top: 25px;
  background: inherit !important;
  cursor: inherit !important;
}
.kafka-cluster .grid__cell {
  word-break: normal;
}
.admin-repository__details {
  margin-left: 5px;
  color: #777;
  font-size: 10px;
  word-break: break-all;
}
.organization-page {
  grid-area: main;
  padding-bottom: 160px;
  align-content: center;
}
.organization-table__row {
  min-height: 45px;
  align-items: center;
  border-top: solid 1px var(--base-color-05);
}
.organization-table__row_icon {
  display: flex;
}
.organization-table__search {
  max-width: 500px;
  min-width: 120px;
  flex-grow: 2;
  margin-right: 8px;
}
.organization-table__row_icon-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0.5;
}
.organization-table__row_icon-text {
  margin-left: 8px;
  display: grid;
}
.organization-table__row_icon-text-link {
  overflow: hidden;
  display: block;
}
.organizations__managing-text {
  margin-bottom: 16px;
}
.managed-orgs__search-and-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 8px;
}
.managed-orgs__pagination {
  margin-top: 32px;
}
.vertical-split-view {
  display: grid;
  grid-template:
    "h  h  h " -webkit-min-content
    "h2 h2 h2" -webkit-min-content
    "l  .  r " 1fr
    "l  .  d " auto / 1fr 4px var(--width);
  grid-template:
    "h  h  h " min-content
    "h2 h2 h2" min-content
    "l  .  r " 1fr
    "l  .  d " auto / 1fr 4px var(--width);
  width: 100%;
  height: 100%;

  --width: 450px;
}
.vertical-split-view-partition-page {
  --width: 350px;
}
.vertical-split-view--equal {
  --width: 50%;
}
.vertical-split-view__top2:not(:empty) {
  grid-area: h2;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .vertical-split-view__top2:not(:empty) {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.vertical-split-view__segment--left {
  grid-area: l;
}
.vertical-split-view__details {
  display: flex;
  flex-direction: column;
  grid-area: d;
  height: 400px;
  border-top: var(--border-default);
  border-left: var(--border-default);
}
.vertical-split-view__details-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: rgb(159, 159, 159);
}
.vertical-split-view__segment--right {
  grid-area: r;
}
.vertical-split-view__segment--wide {
  grid-row: 3 / -1;
  grid-column: 1 / -1;
}
.vertical-split-view__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}
.text-input__input--edited {
  border: var(--border-default);
  border-width: 1px;
}
.parser-editor__test-data--all-passed {
  padding: 16px;
}
.header-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 16px;
  font-size: 14px;
  border-bottom: var(--border-default);
}
.header-toolbar__group {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;
}
.vertical-split-view__header-buttons {
  display: grid;
  flex: 1 1 auto;
  grid-auto-flow: column;
  grid-gap: 20px;
  justify-content: end;
}
.table td,
.table th {
  padding: 8px;
}
.table th {
  padding: 16px 8px;
  white-space: nowrap;
  text-align: left;
}
.table td:first-child,
.table th:first-child {
  padding-left: 16px;
}
.table td:last-child,
.table th:last-child {
  padding-right: 16px;
}
.table tr:not(:last-child) {
  border-bottom: 1px solid var(--border-faint);
}
.table {
  width: 100%;
}
.table th ~ td {
  white-space: nowrap;
}
.vertical-split-view__toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 16px;
  border-bottom: var(--border-default);
}
.vertical-split-view__toolbar ~ .vertical-split-view__toolbar {
  border-top: none !important;
}
.vertical-split-view__toolbar:last-child {
  border-top: var(--border-default);
}
.vertical-split-view__toolbar-group {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
}
.pill-segments {
  --pill-segments-radius: 6px;
}
.pill-segments__segments {
  display: flex;
}
.pill-segments__segment {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pill-segments__segment-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 34px;
  padding: 16px;
  font-size: 20px;
}
.pill-segments__segment:first-of-type .pill-segments__segment-value {
  border-top-left-radius: var(--pill-segments-radius);
  border-bottom-left-radius: var(--pill-segments-radius);
}
.pill-segments__segment:last-of-type .pill-segments__segment-value {
  border-top-right-radius: var(--pill-segments-radius);
  border-bottom-right-radius: var(--pill-segments-radius);
}
.checklist__item--ok::before,
.checklist__item--error::before {
  display: inline-block;
  width: 10px;
}
.checklist {
  margin: 10px -12px;
  padding: 0;
  list-style: none;
}
.checklist__item--ok {
  color: rgb(31, 111, 218);
}
.checklist__item--ok::before {
  margin: 0 1em;
  content: "\2714";
}
.checklist__item--error {
  color: rgb(218, 31, 31);
}
.checklist__item--error::before {
  margin: 0 1em;
  content: "\2717";
}
.node__size-stats-container {
  position: relative;
}
.node__size-stats-container:hover .node__size-stats {
  display: block;
}
.node__size-stats {
  position: absolute;
  top: calc(100% - 5px);
  left: 10px;
  z-index: 1;
  display: none;
  min-width: 250px;
}
.admin-permissions__section:nth-of-type(2) {
  margin-top: 20px;
  padding-top: 8px;
  border-top: solid 1px var(--base-color-06);
}
.access-management__create-integration-footer-actions {
  float: right;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-grow: 1;
}
.access-management__create-integration-footer-info {
  max-width: 500px;
  display: flex;
  align-items: center;
  flex-grow: 4;
}
.access-management__create-integration-footer-info-icon {
  color: var(--info-action-color-03);
  margin-right: 16px;
}
.access-management--provisioning-token {
  margin-top: 16px;
}
.access_management__activity-indicator {
  display: flex;
}
.admin-page__content.admin-users {
  display: flex;
}
.user-identity--main {
  word-break: break-all;
}
.global-user-management__user-identity {
  display: flex;
  min-width: 0;
}
.user-identity__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.global-user-management__user__tab-content__details button {
  margin-top: 10px;
}
.global-user-management__user__tab-content__danger-zone {
  width: 400px;
}
@-webkit-keyframes tab-content-loaded {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes tab-content-loaded {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.global-user-management__user__tab-content__danger-zone,
.global-user-management__user__tab-content__details,
.global-user-management__user__tab-content__groups {
  display: grid;
  -webkit-animation: tab-content-loaded 0.2s;
          animation: tab-content-loaded 0.2s;
}
.global-user-management__user__tab-content__groups > h3:first-child {
  margin-top: 0;
}
.global-user-management__user__tab-content__groups__group-list {
  margin-top: 20px;
}
.global-user-management__user__tab-content__groups__group-list__pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.global-user-management__user__tab-content__groups__group-list__item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  word-break: break-all;
  cursor: pointer;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.readonly-alert {
  min-width: 0;
  padding: 15px;
  padding-bottom: 0;
}
.permissions-management__content .role-permission-item-list > div {
  border-bottom-width: 0;
}
.permissions-management__content .role-permission-item-list > div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.permissions-management__content .role-permission-item-list > div:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-width: 1px;
}
.permissions-management__content .role-permission-item-list .detail-item__header {
  padding-top: 0;
  padding-bottom: 0;
}
.permissions-management__content .role-permission-item-list .detail-item__header:hover {
  border-radius: 4px;
}
.query-quotas-page .qq-settings-box--bold,
.query-quotas-page .user-override--bold,
.query-quotas-page .bold {
  font-weight: bold;
}
.query-quotas-page h1,
.query-quotas-page h2,
.query-quotas-page h3,
.query-quotas-page h4,
.query-quotas-page p {
  font-family: var(--font-family-heading);
}
.query-quotas-page p {
  margin-bottom: 20px;
}
.query-quotas-page h3 {
  font-weight: bold;
}
.query-quotas-page .qq-settings-box--edit {
  max-height: inherit;
}
.query-quotas-page .qq-settings-box--edit__button-container {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
.query-quotas-page .qq-settings-box--edit__button-container > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.query-quotas-page .user-override {
  display: grid;
  grid-column-gap: 100px;
  grid-template-areas:
    "top ..."
    "left left"
    "right bottom";
  grid-template-rows: auto auto auto;
  grid-template-columns: 440px auto;
}
.query-quotas-page .user-override__top {
  grid-area: top;
}
.query-quotas-page .user-override__left {
  grid-area: left;
  padding-bottom: 20px;
}
.query-quotas-page .user-override__right {
  grid-area: right;
}
.query-quotas-page .user-override__bottom {
  grid-area: bottom;
}
.query-quotas-page .user-override__bottom h3 {
  margin-top: 0;
}
.query-quotas-page .user-override__user-info {
  display: flex;
  align-items: center;
}
.query-quotas-page .user-override .content-list {
  width: 500px;
  height: 650px;
}
.query-quotas-page .user-override__display-name {
  font-weight: bold;
}
.query-quotas-page .user-list__item {
  display: grid;
  grid-template-areas: "left right";
  grid-template-columns: auto -webkit-min-content;
  grid-template-columns: auto min-content;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  cursor: pointer;
}
.query-quotas-page .user-list__reset-to-default-quota-icon {
  transform: scaleX(-1);
}
.query-quotas-page .user-list__display-name {
  margin-right: 10px;
}
.query-quotas-page .user-list__username {
  font-size: 12px;
}
.admin-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  overflow-y: auto;
}
.admin-content > div {
  align-self: stretch;
}
.upgrade {
  grid-area: main;
  padding: 20px 20% 0 20%;
}
.upgrade__header {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 20px;
}
.upgrade__submit {
  float: right;
}
.upgrade__form {
  margin: 20px 0 10px 0;
}
.upgrade__link-to-home {
  text-align: center;
}
.upgrade__happy-owl {
  height: 150px;
  margin: 50px;
  background-image: url(../../static/media/7203581bc1556f6b0aa3.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: contain;
}
.zookeeper-cluster {
  height: 100%;
  overflow: auto;
}
.zookeeper-cluster .settings-header {
  grid-template-columns: auto 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.zookeeper-cluster__bold {
  font-weight: 700;
}
.zookeeper-cluster__node:nth-of-type(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__node:nth-of-type(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.zookeeper-cluster__node.zookeeper-cluster__available-node.zookeeper-cluster__active-node {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__node.zookeeper-cluster__available-node.zookeeper-cluster__active-node {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.zookeeper-cluster__node.zookeeper-cluster__available-node:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__node.zookeeper-cluster__available-node:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.zookeeper-cluster__node:first-of-type {
  margin-top: 25px;
}
.zookeeper-cluster__node {
  padding: 20px;
}
.zookeeper-cluster__node-details {
  margin-top: 20px;
  padding: 20px;
  border-top: 2px solid black;
}
.zookeeper-cluster__node-details > div {
  padding: 8px 8px 8px 16px;
}
.zookeeper-cluster__node-details > div:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__node-details > div:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.zookeeper-cluster__clients > div:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__clients > div:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.zookeeper-cluster__clients > div:first-child {
  padding-bottom: 0;
  padding-left: 0;
}
.zookeeper-cluster__clients > div {
  height: 36px;
  margin-bottom: 8px;
  padding: 8px 8px 8px 16px;
}
.zookeeper-cluster__dash-stats div.error {
  color: red;
}
.zookeeper-cluster__dash-stats div.warning {
  color: orange;
}
.zookeeper-cluster__dash-stats div.success {
  color: green;
}
.zookeeper-cluster__wbg {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .zookeeper-cluster__wbg {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.saml-signout__page {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 500px;
  height: 200px;
}
.saml-signout__background {
  background: var(--primary-background-color);
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saml-signout__page-content {
  font-size: 24px;
  color: var(--base-color-01);
  padding-bottom: 16px;
}
.saml-signout__page-logo {
  background-image: url(../../static/media/36d3c4fa3813b23ce73b.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: var(--primary-background-color);
  background-position: center;
  pointer-events: none;
  border: none;
  height: 48px;
  width: 100%;
  margin-bottom: 24px;
}
#dashboard-list {
  padding-top: 30px;
}
:root {
  --dashboard-bg-color: var(--base-color-02);
  --widget-header-bg-color: #f5f5f5;
  --widget-border-color: var(--default-button-border-color);
  --widget-header-text-color: var(--text-color);
  --widget-bg-color: var(--ui-background-01);
}
.dashboard-page {
  display: grid;
  flex: 1 1 auto;
  grid-template:
    "breadcrumbs  breadcrumbs " auto
    "top-panel    top-panel   " auto
    "active-panel active-panel" auto
    "widgets      inspector   " 1fr
    / 1fr auto;
}
.dashboard-page__breadcrumbs {
  grid-area: breadcrumbs;
}
.dashboard-page__save-filter-popup {
  padding: 10px;
}
.dashboard-page--shared {
  height: 100%;
}
.dashboard__top-panel {
  z-index: 3;
  grid-area: top-panel;
}
.dashboard-page__body-panel {
  z-index: 2;
  grid-area: active-panel;
}
.dashboard-page__body-widgets-area {
  grid-area: widgets;
  overflow-x: hidden;
  overflow-y: hidden;
}
.dashboard-page__inspector {
  grid-area: inspector;
  z-index: 2;
  position: relative;
  display: flex;
  align-items: stretch;
}
.dashboard-page__prefix-panel {
  display: grid;
  flex: 0 0 auto;
  grid-template: "d . b" auto ". . ." 4px "i i i" 1fr / auto auto auto;
  padding: 8px 20px;
}
.dashboard-page__parameters-panel {
  display: grid;
  grid-template: "title params" / auto 1fr;
  align-items: start;
  padding: 8px 20px;
}
.dashboard-page__parameters-title {
  display: inline-flex;
  grid-area: title;
  align-items: center;
  height: 32px;
}
.dashboard-page__prefix-dropdown {
  display: flex;
  grid-area: d;
  align-items: center;
}
.dashboard-page__prefix-buttons {
  display: grid;
  grid-area: b;
  grid-auto-flow: column;
  grid-gap: 10px;
  justify-content: end;
}
.dashboard-page__prefix-input {
  grid-area: i;
}
.dashboard-note {
  flex: 1 1;
  padding: 0 16px;
  overflow: auto;
}
.dashboard-note-textfield {
  flex: 1 1;
  padding: 16px;
  border: none;
  resize: none;
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.widget-box__time {
  display: block !important;
  flex: 1 1 auto;
  grid-area: time;
  overflow: hidden;
  color: var(--widget-header-text-color) !important;
  white-space: nowrap;
  text-align: right;
  text-overflow: ellipsis;
}
.widget-box__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.widget-box__content {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;

  /* If we do not include a min-height the flex basis will not work and items can overflow the container. */
  min-height: 1px;
  padding: 0;
  cursor: default;
}
.widget-box__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 4px 16px;
}
.widget-box__footer-help {
  display: inline-block;
  margin-left: 16px;
  color: #999;
  font-size: 10px;
}
.widget-box--editable {
  cursor: move;
}
.widget-box__menu-icon {
  position: relative;
  margin-left: 10px;
}
.widget-box__menu-icon a {
  color: #000;
}
.widget-box__edit-button {
  flex: 1 1 auto;
  padding: 0;
  font-size: 11px;
  background: none;
  border: none;
  outline: none;
}
.widget-box__menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  outline: none;
}
.widget-box__menu-button:hover {
  opacity: 1;
}
.widget-box__menu-button i {
  color: var(--widget-header-text-color);
}
.widget-container__with-menu-open {
  z-index: 1000 !important;
}
.title-bar__dashboard-settings-dropdown {
  margin-right: 5px;
  cursor: pointer;
}
.dashboard-page__parameter-popup-content {
  width: 300px;
  max-height: 500px;
  padding: 20px;
  overflow: auto;
}
.variable-header__parameters {
  grid-area: params;
  padding-left: 10px;
}
.variable-header__parameters > * {
  margin: 4px;
}
.variable-header__parameters--non-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.variable-header__parameters--empty {
  font-size: 12px;
  opacity: 0.6;
}
.variable-header__controls {
  margin-left: 8px;
}
.edit-table {
  table-layout: fixed;
  border-collapse: collapse;
}
.edit-table__cell {
  display: table-cell;
  padding: 0;
  text-align: left;
  border: 1px solid #ddd;
}
.edit-table__container {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.edit-table__table-container {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
}
.edit-table__table-subcontainer {
  position: absolute;
  display: flex;
  flex: 1 1 auto;
}
.edit-table__no-cell {
  border: none;
}
.edit-table__editable-cell-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 37px;
  padding: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.edit-table__readonly-cell-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 37px;
  padding: 4px;
}
.edit-table__editable-cell-container:hover, .edit-table__editable-cell-container--active {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.edit-table__cell-input {
  align-self: stretch;
  width: 100%;
}
.edit-table__header-cell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.edit-table__column-resize-control {
  display: flex;
  flex: 0 0 auto;
  width: 4px;
  cursor: ew-resize;
}
.edit-table__pagination-container {
  display: flex;
  flex: 0 0 auto;
}
.edit-table__header-cell-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}
.edit-table__col-edit-btn-container {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
}
.edit-table__row-number-container {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
.edit-table__row-number-text {
  position: relative;
  z-index: 1;
  padding: 0 4px;
}
.edit-table__row-drag {
  position: absolute;
  top: 0;
  display: flex;
  bottom: 0;
  width: 100%;
  z-index: 2;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  visibility: hidden;
  cursor: move;
}
.edit-table__row-drag i {
  position: absolute;
  margin-left: -7px;
}
.edit-table__row-number-container:hover .edit-table__row-drag {
  visibility: visible;
}
.edit-table__row-about-to-swap .edit-table__row-number-container:hover .edit-table__row-drag {
  visibility: hidden;
}
.edit-table__row-about-to-swap td:not(:last-child) {
  background-color: #ccc;
}
.dark .edit-table__row-about-to-swap td:not(:last-child) {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
}
.files-page {
  display: flex;
  flex: 1;
}
.files-page__content-container {
  display: flex;
  flex: 1;
}
#fileUploadInput {
  display: none;
}
.parser-editor-layout {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: auto;

  --header-height: 84px;

  width: 100%;
  height: 100%;
}
.parser-editor__top-bar {
  display: flex;
  align-items: center;
}
.parser-editor-layout__body {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--header-height));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .parser-editor-layout__body {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.parser-editor-layout__body--padded {
  padding: 16px;
}
.parser-editor-layout__header-tabs {
  grid-area: tabs;
  min-height: 40px;
}
.parser-editor__main .query-input {
  height: 100%;
}
.parser-editor__parser-error {
  padding: 20px;
  color: rgb(52, 0, 0);
  white-space: pre-wrap;
  background-color: rgb(251, 175, 175);
  border-top: solid 1px rgb(89, 0, 0);
}
.test-case {
  align-items: stretch;

  --status-color: rgb(199, 199, 199);
  --selection-indicator-width: 4px;

  position: relative;
  display: grid;
  grid-template:
    "s t" auto
    "s e" auto / 10px 1fr;
}
.test-case__errors {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 6px;
  color: rgb(102, 0, 0);
  background-color: rgb(255, 244, 244);
}
.test-case__errors:not(:empty) {
  padding: 10px;
  border-top: solid 1px rgb(179, 115, 115);
}
.test-case--active {
  position: relative;
  z-index: 1;
}
.test-case--active .test-case__textarea,
.test-case__textarea:hover {
  grid-area: t;
  outline: none;
}
.test-case__textarea:hover:not(:focus) {
  cursor: pointer;
}
.test-case__status {
  flex: 0 0 auto;
  grid-area: s;
  width: 10px;
  background-color: var(--status-color);
  border-right: var(--border-default);
}
.test-case--failure {
  --status-color: rgb(165, 65, 86);
}
.test-case--success {
  --status-color: rgb(70, 164, 65);
}
.test-result-label {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 4px;
  align-content: center;
  align-items: center;
  color: rgb(129, 129, 129);
  font-size: 12px;
}
.test-case__textarea {
  flex: 1 1 auto;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  font-family: monospace;
}
.export-wizard__duplicate-warning {
  padding-top: 10px;
}
.export-wizard__section {
  max-width: 600px;
}
.export-wizard__icon {
  display: grid;
  grid-template-columns: [icon-text] 85% [icon-img] auto;
}
.export-wizard__icon-text {
  grid-area: icon-text;
}
.export-wizard__icon-img {
  grid-area: icon-img;
  justify-self: center;
  align-self: center;
}
.installation-error__name-conflicts-header {
  font-weight: 700;
}
.installation-error__code-block {
  padding: 8px;
  color: white;
  font-weight: 700;
  font-family: monospace;
  background-color: rgb(185, 47, 47);
  border-radius: 2px;
  margin-top: 8px;
}
.installation-error__code-block code {
  white-space: pre-line;
}
.installation-error__code-block p {
  padding: 0;
  margin: 0;
}
.install-wizard__section {
  display: flex;
  flex-direction: column;
  width: 800px;
  margin: 16px;
}
.install-wizard__installing-title {
  font-size: 20px;
  color: #666;
}
.install-wizard__logo {
  -o-object-fit: contain;
     object-fit: contain;
  width: 32px;
  margin-right: 16px;
}
.install-wizard__title {
  font-weight: 700;
  font-size: 24px;
}
.install-wizard__subsequent-warning {
  margin-top: 16px;
}
.install-wizard__component-category--faded-out {
  opacity: 0.5;
}
.install-wizard__assign-tokens-checkbox {
  grid-area: checkbox;
  margin-right: 16px;
}
.install-wizard__assign-tokens-title {
  grid-area: title;
  font-weight: 700;
}
.install-wizard__assign-tokens-description {
  grid-area: text-body;
  font-style: italic;
}
.install-wizard__updated-component {
  margin-left: 8px;
  color: var(--base-color-06);
  font-weight: 700;
  font-style: italic;
}
.install-wizard__removed-component {
  margin-left: 8px;
  color: var(--negative-action-color-05);
  font-weight: 700;
  font-style: italic;
}
.install-wizard__back-button-container button {
  margin: 0;
}
.install-wizard__new-component {
  margin-left: 8px;
  color: var(--positive-action-color-04);
  font-weight: 700;
  font-style: italic;
}
.install-wizard__back-button-container {
  display: flex;
  flex: 1;
  justify-content: left;
  margin: 0;
}
.install-wizard__component-title {
  margin-bottom: 8px;
  font-weight: 700;
}
.install-wizard__component-description {
  color: #666;
}
.install-wizard__component-no-description {
  color: #ccc;
}
.install-wizard__assign-tokens-link {
  grid-area: text-link;
  margin-top: 16px;
  font-style: italic;
}
.install-wizard__assign-tokens-box {
  display: grid;
  grid-template:
    "checkbox title" auto
    "checkbox text-body" auto
    "checkbox text-link" auto
    / auto 1fr;
  padding: 16px;
  background-color: var(--base-color-02);
}
.install-wizard__assign-ingest-tokens-title {
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 18px;
}
.install-wizard__footer {
  display: flex;
  justify-content: flex-end;
}
.install-wizard__footer-content {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}
.install-wizard__secondary-button-container {
  margin-right: 16px;
}
.upgrade-wizard {
  width: 100%;
  overflow: auto;
}
.upgrade-wizard__section {
  display: flex;
  flex-direction: column;
  width: 800px;
  margin: 16px;
}
.upgrade-wizard__upgrading-title {
  font-size: 20px;
  color: #666;
}
.upgrade-wizard__header {
  display: flex;
  padding-top: 10px;
}
.upgrade-wizard__logo {
  -o-object-fit: contain;
     object-fit: contain;
  width: 32px;
  margin-right: 16px;
}
.upgrade-wizard__title {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: flex-start;
  height: 100%;
  font-weight: 700;
  font-size: 24px;
}
.upgrade-wizard__component-description {
  color: #666;
}
.upgrade-wizard__version {
  display: flex;
  font-weight: 400;
  font-size: 24px;
}
.upgrade-wizard__body {
  justify-content: center;
  padding-top: 16px;
}
.upgrade-wizard__issue-collection {
  margin-top: 16px;
}
.upgrade-wizard__issue-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 16px;
  min-height: 48px;
  line-height: 1;
  border-radius: 3px;
}
.upgrade-wizard__issue {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.upgrade-wizard__issue--conflict {
  background: var(--highlight-background-purple);
}
.dark .upgrade-wizard__issue--conflict {
  background-color: var(--primary-color-02);
}
.upgrade-wizard__issue--added {
  background: var(--positive-action-color-01);
}
.upgrade-wizard__issue--removed {
  background: var(--negative-action-color-01);
}
.upgrade-wizard__issue--changed {
  background: var(--warning-color-02);
}
.upgrade-wizard__issue:first-child {
  margin-top: 0;
}
.upgrade-wizard__issue-type {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
}
.upgrade-wizard__issue-type--conflict {
  color: var(--primary-color-05);
}
.upgrade-wizard__issue-type--added {
  color: var(--positive-action-color-04);
}
.upgrade-wizard__issue-type--changed {
  color: var(--warning-color-03);
}
.upgrade-wizard__issue-type--removed {
  color: var(--negative-action-color-04);
}
.upgrade-wizard__buttons {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  gap: 8px;
}
.upgrade-wizard__footer {
  display: flex;
  justify-content: flex-end;
}
.upgrade-wizard__footer-content {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}
.upgrade-wizard__secondary-button-container {
  margin-right: 16px;
}
.upload-dialog__error-banner {
  margin-bottom: 16px;
}
.upload-dialog__upload-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 512px;
}
.upload-dialog__upload-box {
  height: 256px;
  transition: all 0.3s;
}
#connection-view .validation-errors {
  margin-bottom: 40px;
}
.datasource__item {
  padding: 1rem;
}
.datasource__item:first-child {
  padding-left: 0px;
}
.datasource__item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dataspace-status--no-datasources {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  text-align: center;
}
.event-forwarding__rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.event-forwarding__top {
  display: flex;
  justify-content: space-between;
}
.event-forwarding__bottom {
  display: flex;
}
.event-forwarding__forwarder-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 40%;
}
.event-forwarding__buttons {
  display: flex;
  flex: 1;
  align-self: flex-end;
  justify-content: flex-end;
  gap: 16px;
}
/** DEV VIEW */
.event-forwarding__dev-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ingest-listener-endpoints__content .data-table__table {
  height: 100%;
}
.ingest-listener-endpoints__dialog-content .input-group2 select {
  min-width: 0;
}
.ingest-listener-endpoints__dialog-content .input-group2 input {
  min-width: 0;
}
.ingest-listener-endpoints__dialog-content form {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: 16px;
  grid-template-columns: 400px;
}
.user-item__name {
  flex: 1;
  margin-left: 10px;
  word-break: break-all;
}
.user-item__username {
  display: inline-block;
  margin-left: 5px;
  color: var(--legible-muted-text-color);
}
.user-item__permissions {
  flex: 1;
  padding: 10px 12px;
}
.user-item__edit-button {
  margin-bottom: 10px;
}
.user-item__groups-link {
  display: block;
  margin-bottom: 10px;
}
.user-item__roles {
  display: flex;
  margin-right: 10px;
}
.repo-simple-permissions {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.choose-org__info {
  margin-bottom: 20px;
}
.choose-org__org {
  margin: 0 10px 10px 0;
}
.members-view__add-user {
  margin-left: 10px;
}
.settings-retention-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.retention-dataspace__warn-message-newline {
  line-height: 8px;
}
.s3-archiving__activity-indicator-container {
  margin-bottom: 10px;
}
.queries-dropdown {
  --row-height: 20px;
  --lower-row-height: 16px;
}
.queries-dropdown__default-icon {
  display: flex;
  flex-direction: column;
  grid-area: default-icon;
  justify-content: center;
  margin-left: 8px;
  padding-right: 2px;
  padding-left: 8px;
  border-left: 1px solid #808080;
}
.queries-dropdown__type-icon {
  grid-area: type-icon;
}
.queries-dropdown__saved-query-default {
  display: flex;
  flex-direction: column;
  grid-area: default-query;
  justify-content: center;
  padding-right: 8px;
  text-align: left;
}
.queries-dropdown__extra {
  color: #403e3e;
}
.queries-dropdown__star-container {
  grid-area: star;
  height: var(--lower-row-height);
}
.queries-dropdown__query--saved {
  grid-template:
    "query     query query        query         query query       run-button" var(
      --row-height
    )
    "type-icon type star  default-icon default-query empty-space run-button" var(
      --lower-row-height
    )
    /
    auto auto auto auto 1fr auto;
}
.queries-dropdown__query-text {
  grid-area: query;
  height: var(--row-height);
}
.queries-dropdown__active-query {
  position: absolute;
  top: -1px;
  left: 100%;
  bottom: -1px;
  width: 520px;
  text-align: left;
}
.queries-dropdown__active-query-header {
  display: grid;
  padding: 8px 16px;
  box-shadow: 0 1px var(--arrow-size) rgba(0, 0, 0, 0.3);
}
.queries-dropdown__active-query-header--recent {
  grid-row-gap: 2px;
  grid-template:
    "time-boundary save-button" auto
    / 1fr auto;
}
.queries-dropdown__active-query---saved {
  grid-row-gap: 2px;
  grid-template:
    "query-name query-name star"
    "time-boundary edit-buttons edit-buttons"
    / 1fr auto auto;
}
.queries-dropdown__active-query-name {
  grid-area: query-name;
}
.queries-dropdown__active-query-star {
  grid-area: star;
}
.queries-dropdown__query--recent {
  grid-row-gap: 2px;
  grid-template:
    "query     query query query       run-button" var(--row-height)
    "type-icon type  time  empty-space run-button" var(--lower-row-height) /
    auto       auto  auto  1fr         auto;
}
.queries-dropdown__query {
  display: grid;
  grid-row-gap: 2px;
  width: 100%;
  padding: 8px 16px;
}
.queries-dropdown__query-time {
  grid-area: time-boundary;
}
.queries-dropdown__type {
  grid-area: type;
}
.search {
  margin: 10px;
}
.query-input {
  position: relative;
  z-index: 1;
}
/* end of HACK */
.search__completion-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px 0 0 0;
  color: white;
  padding: 2px 4px;
  line-height: 1;
  font-size: 10px;
  z-index: 3;
}
.search__suggestions {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 200px;
  background-color: white;
  border: solid 1px #d4d4d4;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.search__no-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}
.search__suggestions-items {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  font-size: 12px;
}
.search__suggestion {
  padding: 5px 10px;
  border-bottom: solid 1px #ededed;
}
.search__suggestion:hover {
  background-color: #b5c6ed;
  cursor: pointer;
}
.search__suggestion-header {
  padding: 2px 10px;
  font-weight: 700;
  text-shadow: 0 -1px 0 white;
  background-color: #f2f1f3;
  border-bottom: solid 1px #e0e0e0;
}
.search__suggestion--active {
  background-color: #dae5ff;
}
.search__documentation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 300px;
  overflow: auto;
  background-color: white;
  border-left: solid 1px #d4d4d4;
}
.documentation {
  padding: 10px 20px;
}
.documentation__title {
  margin: 0 0 10px;
  padding: 0;
  line-height: 1;
}
.documentation__table {
  margin-top: 10px;
}
.documentation__subtitle {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.documentation__example-description {
  margin-bottom: 8px;
  font-style: italic;
}
.documentation__example-code {
  display: inline-block;
  margin-bottom: 15px;
  font-family: monospace;
}
.documentation__docs-link {
  float: right;
}
.save-dialog__input-label {
  font-weight: 600;
  font-size: 12px;
}
.save-dialog__textarea {
  resize: none;
}
/* ------------General----------- */
.sso-page__background {
  width: 100%;
  height: 100%;
  align-content: center;
  display: flex;
  justify-content: center;
  overflow: auto;
  position: absolute;
}
.sso-login-page__rounded-border,
.sso-login-page__hr {
  border-top: 1px solid #ddd;
  border-radius: 1px;
  margin-bottom: 24px;
  margin-top: 24px;
}
.sso-login-page__rounded-border {
  width: 50%;
  margin-bottom: 16px;
  margin-top: 16px;
}
.sso-login-page__rounded-border-text {
  width: 10%;
  display: flex;
  justify-content: center;
  font-weight: bold;
  color: var(--base-color-07);
  margin-top: 8px;
}
.sso-login-page__humio-version-wrapper {
  display: flex;
  justify-content: center;
}
.sso-login-page__humio-version-background {
  margin-top: 16px;
  background-color: var(--dark-highlight-text-08);
  border-radius: 24px;
  padding: 8px 16px;
  color: var(--base-color-01);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.sso-login-page__humio-version {
  opacity: 0.6;
  text-align: center;
  word-break: break-all;
}
.sso-login-page__enterprise-login-header {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
}
/* -------------Log in header------------ */
.sso-login-page__header-logo {
  background-image: url(../../static/media/36d3c4fa3813b23ce73b.svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  border: none;
  height: 32px;
  width: 145px;
  position: relative;
}
.sso-login-page__header-title {
  display: flex;
  font-size: 24px;
  font-weight: bold;
  color: var(--base-color-01);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
/* --------------Log in wrapper---------- */
.sso-login-page__wrapper {
  flex-grow: 1;
  padding: 32px;
  border-radius: 4px;
  background-color: var(--base-color-01);
  flex-direction: column;
  justify-content: center;
}
.sso-login-page__signup__account-option {
  vertical-align: middle;
}
.sso-login-page__signup-option {
  display: flex;
  flex-direction: column;
  align-self: center;
}
.sso-login-page__signup-option-button {
  align-self: center;
  font-weight: bold;
}
.sso-page__content {
  width: 100%;
}
.sso-page__content-wrapper {
  display: flex;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 480px;
}
.sso-page__content::after,
.sso-page__content::before {
  height: 10%;
  content: "";
  display: block;
}
@media only screen and (max-width: 480px) {
  .sso-page__content-wrapper {
    width: 100%;
  }

  .sso-login-page__wrapper {
    border-radius: unset;
  }

  .sso-page__content::after,
  .sso-page__content::before {
    height: 5%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 600px) {
  .sso-page__content-wrapper {
    width: 80%;
  }

  .sso-page__content::after,
  .sso-page__content::before {
    height: 5%;
  }
}
.sso-login-page__enterprise-login-address-field {
  margin-bottom: 8px;
}
.sso-login-page__signup-option-text {
  align-self: center;
}
.sso-login-page__login-border {
  display: flex;
  margin-top: 16px;
  margin-bottom: 16px;
}
.sso-login-page__enterprise-login-error {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.sso-login-page__enterprise-login-error-icon {
  color: var(--negative-action-color-03);
}
.sso-login-page__account-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
#auth0 {
  overflow: hidden;
}
#auth0 .auth0-lock-cred-pane-internal-wrapper {
  height: auto;
}
.stream-download-page__info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
}
.stream-download-page__info-value {
  max-width: 60%;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stream-download-page__actions {
  margin-top: 30px;
}
.dark {
    color-scheme: dark;
}
.light {
    color-scheme: light;
}
/* TODO: Move these to separate files */
/* Monaco */
.monaco-editor .margin, .humio-editor, .monaco-editor-background {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .monaco-editor .margin, .dark .humio-editor, .dark .monaco-editor-background {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
/* Highlight.js */
.dark .hljs-number {
  --tw-text-opacity: 1;
  color: rgba(189, 121, 5, var(--tw-text-opacity));
}
.dark .hljs-string {
  --tw-text-opacity: 1;
  color: rgba(41, 163, 75, var(--tw-text-opacity));
}
.dark .hljs-attr {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.itemListSubtitle {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.dark .itemListSubtitle {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 */
/**
 * Include vendor css.
 *
 */
button[data-balloon] {
  overflow: visible;
}
[data-balloon] {
  position: relative;
}
[data-balloon]::after {
  position: absolute;
  z-index: 10;
  padding: 0.5em 1em;
  color: #fff;
  font-weight: normal !important;
  font-size: 12px !important;
  font-family: sans-serif !important;
  font-style: normal !important;
  white-space: nowrap;
  text-align: center;
  text-shadow: none !important;
  background: rgba(17, 17, 17, 0.9);
  border-radius: 4px;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  transition: all 0.18s ease-out 0.5s;
  content: attr(data-balloon);
  pointer-events: none;
  pointer-events: none;
}
[data-balloon]::before {
  position: absolute;
  z-index: 10;
  width: 18px;
  height: 6px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  transition: all 0.18s ease-out 0.5s;
  content: "";
  pointer-events: none;
  pointer-events: none;
}
[data-balloon]:hover::before,
[data-balloon]:hover::after,
[data-balloon][data-balloon-visible]::before,
[data-balloon][data-balloon-visible]::after {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  pointer-events: none;
}
[data-balloon].font-awesome::after {
  font-family: FontAwesome;
}
[data-balloon][data-balloon-break]::after {
  white-space: pre;
}
[data-balloon][data-balloon-blunt]::before,
[data-balloon][data-balloon-blunt]::after {
  transition: none;
}
[data-balloon][data-balloon-pos="up"]::after {
  bottom: 100%;
  left: 50%;
  margin-bottom: 11px;
  transform: translate(-50%, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]::before {
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  transform: translate(-50%, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]:hover::after,
[data-balloon][data-balloon-pos="up"][data-balloon-visible]::after {
  transform: translate(-50%, 0);
}
[data-balloon][data-balloon-pos="up"]:hover::before,
[data-balloon][data-balloon-pos="up"][data-balloon-visible]::before {
  transform: translate(-50%, 0);
}
[data-balloon][data-balloon-pos="up-left"]::after {
  bottom: 100%;
  right: 0;
  margin-bottom: 11px;
  transform: translate(0, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up-left"]::before {
  bottom: 100%;
  right: 5px;
  margin-bottom: 5px;
  transform: translate(0, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up-left"]:hover::after,
[data-balloon][data-balloon-pos="up-left"][data-balloon-visible]::after {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="up-left"]:hover::before,
[data-balloon][data-balloon-pos="up-left"][data-balloon-visible]::before {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="up-right"]::after {
  bottom: 100%;
  left: 0;
  margin-bottom: 11px;
  transform: translate(0, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up-right"]::before {
  bottom: 100%;
  left: 5px;
  margin-bottom: 5px;
  transform: translate(0, 10px);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up-right"]:hover::after,
[data-balloon][data-balloon-pos="up-right"][data-balloon-visible]::after {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="up-right"]:hover::before,
[data-balloon][data-balloon-pos="up-right"][data-balloon-visible]::before {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="down"]::after {
  top: 100%;
  left: 50%;
  margin-top: 11px;
  transform: translate(-50%, -10px);
}
[data-balloon][data-balloon-pos="down"]::before {
  top: 100%;
  left: 50%;
  width: 18px;
  height: 6px;
  margin-top: 5px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  transform: translate(-50%, -10px);
}
[data-balloon][data-balloon-pos="down"]:hover::after,
[data-balloon][data-balloon-pos="down"][data-balloon-visible]::after {
  transform: translate(-50%, 0);
}
[data-balloon][data-balloon-pos="down"]:hover::before,
[data-balloon][data-balloon-pos="down"][data-balloon-visible]::before {
  transform: translate(-50%, 0);
}
[data-balloon][data-balloon-pos="down-right"]::after {
  top: 100%;
  left: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 11px;
  transform: translate(0, -10px);
}
[data-balloon][data-balloon-pos="down-right"]::before {
  top: 100%;
  left: 5px;
  width: 18px;
  height: 6px;
  margin-top: 5px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  transform: translate(0, -10px);
}
[data-balloon][data-balloon-pos="down-right"]:hover::after,
[data-balloon][data-balloon-pos="down-right"][data-balloon-visible]::after {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="down-right"]:hover::before,
[data-balloon][data-balloon-pos="down-right"][data-balloon-visible]::before {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="down-left"]::after {
  top: 100%;
  right: 0;
  margin-top: 11px;
  transform: translate(0, -10px);
}
[data-balloon][data-balloon-pos="down-left"]::before {
  top: 100%;
  right: 5px;
  width: 18px;
  height: 6px;
  margin-top: 5px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  transform: translate(0, -10px);
}
[data-balloon][data-balloon-pos="down-left"]:hover::after,
[data-balloon][data-balloon-pos="down-left"][data-balloon-visible]::after {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="down-left"]:hover::before,
[data-balloon][data-balloon-pos="down-left"][data-balloon-visible]::before {
  transform: translate(0, 0);
}
[data-balloon][data-balloon-pos="left"]::after {
  top: 50%;
  right: 100%;
  margin-right: 11px;
  transform: translate(10px, -50%);
}
[data-balloon][data-balloon-pos="left"]::before {
  top: 50%;
  right: 100%;
  width: 6px;
  height: 18px;
  margin-right: 5px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  transform: translate(10px, -50%);
}
[data-balloon][data-balloon-pos="left"]:hover::after,
[data-balloon][data-balloon-pos="left"][data-balloon-visible]::after {
  transform: translate(0, -50%);
}
[data-balloon][data-balloon-pos="left"]:hover::before,
[data-balloon][data-balloon-pos="left"][data-balloon-visible]::before {
  transform: translate(0, -50%);
}
[data-balloon][data-balloon-pos="right"]::after {
  top: 50%;
  left: 100%;
  margin-left: 11px;
  transform: translate(-10px, -50%);
}
[data-balloon][data-balloon-pos="right"]::before {
  top: 50%;
  left: 100%;
  width: 6px;
  height: 18px;
  margin-left: 5px;
  background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
  background-size: 100% auto;
  transform: translate(-10px, -50%);
}
[data-balloon][data-balloon-pos="right"]:hover::after,
[data-balloon][data-balloon-pos="right"][data-balloon-visible]::after {
  transform: translate(0, -50%);
}
[data-balloon][data-balloon-pos="right"]:hover::before,
[data-balloon][data-balloon-pos="right"][data-balloon-visible]::before {
  transform: translate(0, -50%);
}
[data-balloon][data-balloon-length="small"]::after {
  width: 80px;
  white-space: normal;
}
[data-balloon][data-balloon-length="medium"]::after {
  width: 150px;
  white-space: normal;
}
[data-balloon][data-balloon-length="large"]::after {
  width: 260px;
  white-space: normal;
}
[data-balloon][data-balloon-length="xlarge"]::after {
  width: 380px;
  white-space: normal;
}
@media screen and (max-width: 768px) {
  [data-balloon][data-balloon-length="xlarge"]::after {
    width: 90vw;
    white-space: normal;
  }
}
[data-balloon][data-balloon-length="fit"]::after {
  width: 100%;
  white-space: normal;
}
/**
 * There are serious speed issue with compiling tailwinds 2.0 in webpack.
 * This requires the additional indirection of importing the local files above
 * this ensures webpack only compiles what is needed when changes are made during development.
 *
 * Read more about the speed issues with Tailwinds 2.0:
 * https://nystudio107.com/blog/speeding-up-tailwind-css-builds
 */
.first\:border-t:first-child {
  border-top-width: 1px;
}
.first\:pl-0:first-child {
  padding-left: 0px;
}
.last\:border-b:last-child {
  border-bottom-width: 1px;
}
.last\:font-semibold:last-child {
  font-weight: 600;
}
.last\:text-emphasized:last-child {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .last\:text-emphasized:last-child {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.odd\:area-secondary:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .odd\:area-secondary:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.odd\:bg-gray-100:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.even\:area-secondary:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .even\:area-secondary:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.focus-within\:effect-focus:focus-within {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(69, 108, 227, var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.hover\:area-highlight:hover {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .hover\:area-highlight:hover {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.hover\:area-highlight-faint:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .hover\:area-highlight-faint:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.hover\:area-highlight-faintest:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .hover\:area-highlight-faintest:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.hover\:area-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .hover\:area-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.hover\:z-20:hover {
  z-index: 20;
}
.hover\:cursor-default:hover {
  cursor: default;
}
.hover\:cursor-pointer:hover {
  cursor: pointer;
}
.hover\:overflow-visible:hover {
  overflow: visible;
}
.hover\:border-ultramarine-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.hover\:border-red-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(240, 64, 64, var(--tw-border-opacity));
}
.hover\:border-gray-500:hover {
  --tw-border-opacity: 1;
  border-color: rgba(99, 107, 120, var(--tw-border-opacity));
}
.hover\:border-gray-900:hover {
  --tw-border-opacity: 1;
  border-color: rgba(18, 20, 23, var(--tw-border-opacity));
}
.hover\:border-opacity-100:hover {
  --tw-border-opacity: 1;
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(222, 224, 227, var(--tw-bg-opacity));
}
.hover\:bg-ultramarine-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
}
.hover\:bg-ultramarine-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(240, 64, 64, var(--tw-bg-opacity));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
}
.hover\:bg-gray-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 107, 120, var(--tw-bg-opacity));
}
.hover\:bg-ultramarine-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
}
.hover\:bg-ultramarine-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 247, 255, var(--tw-bg-opacity));
}
.hover\:bg-ultramarine-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}
.hover\:bg-opacity-5:hover {
  --tw-bg-opacity: 0.05;
}
.hover\:from-gray-50:hover {
  --tw-gradient-from: #FAFAFA;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 250, 250, 0));
}
.hover\:from-ultramarine-400:hover {
  --tw-gradient-from: #5E82ED;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(94, 130, 237, 0));
}
.hover\:from-red-600:hover {
  --tw-gradient-from: #D61F1F;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(214, 31, 31, 0));
}
.hover\:to-gray-50:hover {
  --tw-gradient-to: #FAFAFA;
}
.hover\:to-ultramarine-400:hover {
  --tw-gradient-to: #5E82ED;
}
.hover\:to-red-600:hover {
  --tw-gradient-to: #D61F1F;
}
.hover\:to-green-400:hover {
  --tw-gradient-to: #5CD676;
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.hover\:text-ultramarine-500:hover {
  --tw-text-opacity: 1;
  color: rgba(69, 108, 227, var(--tw-text-opacity));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.hover\:text-ultramarine-600:hover {
  --tw-text-opacity: 1;
  color: rgba(48, 86, 202, var(--tw-text-opacity));
}
.hover\:text-ultramarine-700:hover {
  --tw-text-opacity: 1;
  color: rgba(39, 68, 155, var(--tw-text-opacity));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.hover\:underline:hover {
  text-decoration: underline;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:bg-highlight-faintest:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.dark .hover\:bg-highlight-faintest:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
}
.hover\:border-default:hover {
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
}
.dark .hover\:border-default:hover {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.hover\:icon-on-hover:hover {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.dark .hover\:icon-on-hover:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.focus\:area-highlight-faint:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .focus\:area-highlight-faint:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.focus\:area-active:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .focus\:area-active:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.focus\:border-ultramarine-500:focus {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ultramarine-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(132, 160, 245, var(--tw-ring-opacity));
}
.focus\:ring-ultramarine-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(69, 108, 227, var(--tw-ring-opacity));
}
.focus\:ring-opacity-50:focus {
  --tw-ring-opacity: 0.5;
}
.focus\:effect-focus:focus {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(69, 108, 227, var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.active\:area-highlight:active {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .active\:area-highlight:active {
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.active\:border:active {
  border-width: 1px;
}
.active\:border-ultramarine-500:active {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.active\:bg-ultramarine-100:active {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.active\:bg-gray-500:active {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 107, 120, var(--tw-bg-opacity));
}
.active\:bg-ultramarine-500:active {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
}
.active\:from-gray-100:active {
  --tw-gradient-from: #EDEEEF;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(237, 238, 239, 0));
}
.active\:from-ultramarine-700:active {
  --tw-gradient-from: #27449B;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(39, 68, 155, 0));
}
.active\:from-red-700:active {
  --tw-gradient-from: #AA1818;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(170, 24, 24, 0));
}
.active\:to-gray-100:active {
  --tw-gradient-to: #EDEEEF;
}
.active\:to-ultramarine-700:active {
  --tw-gradient-to: #27449B;
}
.active\:to-red-700:active {
  --tw-gradient-to: #AA1818;
}
.active\:text-white:active {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.active\:-text-shadow:active {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  }
.group:hover .group-hover\:visible {
  visibility: visible;
}
.group:hover .group-hover\:invisible {
  visibility: hidden;
}
.group:hover .group-hover\:block {
  display: block;
}
.group:hover .group-hover\:flex {
  display: flex;
}
.group:hover .group-hover\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-text-opacity));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-100 {
  --tw-text-opacity: 1;
  color: rgba(237, 238, 239, var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.group:hover .group-hover\:underline {
  text-decoration: underline;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:focus .group-focus\:visible {
  visibility: visible;
}
.group:focus .group-focus\:invisible {
  visibility: hidden;
}
.group:focus .group-focus\:effect-focus {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(69, 108, 227, var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.current\:area-default[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .current\:area-default[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.current\:area-secondary[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .current\:area-secondary[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.current\:area-tertiary[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(237, 238, 239, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(196, 200, 205, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .current\:area-tertiary[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.current\:area-highlight-faint[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.dark .current\:area-highlight-faint[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.current\:bg-ultramarine-500[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.current\:bg-gray-800[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.current\:bg-gray-900[aria-current] {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.current\:text-white[aria-current] {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.current\:text-gray-900[aria-current] {
  --tw-text-opacity: 1;
  color: rgba(18, 20, 23, var(--tw-text-opacity));
}
.group[aria-current].group-current\:bg-ultramarine-500, .group[aria-current] .group-current\:bg-ultramarine-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.group[aria-current].group-current\:bg-red-500, .group[aria-current] .group-current\:bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(240, 64, 64, var(--tw-bg-opacity));
}
.group[aria-current].group-current\:text-white, .group[aria-current] .group-current\:text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.group[aria-current].group-current\:opacity-100, .group[aria-current] .group-current\:opacity-100 {
  opacity: 1;
}
.group[aria-current].group-current\:bg-highlight-faint, .group[aria-current] .group-current\:bg-highlight-faint {
  --tw-bg-opacity: 1;
  background-color: rgba(195, 212, 254, var(--tw-bg-opacity));
}
.dark .group[aria-current].group-current\:bg-highlight-faint, .dark .group[aria-current] .group-current\:bg-highlight-faint {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
}
.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-divide-opacity));
}
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-divide-opacity));
}
.dark .dark\:border-none {
  border-style: none;
}
.dark .dark\:border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgba(18, 20, 23, var(--tw-border-opacity));
}
.dark .dark\:border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgba(49, 196, 86, var(--tw-border-opacity));
}
.dark .dark\:border-ultramarine-500 {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.dark .dark\:border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgba(46, 53, 61, var(--tw-border-opacity));
}
.dark .dark\:border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.dark .dark\:border-ultramarine-100 {
  --tw-border-opacity: 1;
  border-color: rgba(224, 234, 255, var(--tw-border-opacity));
}
.dark .dark\:border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgba(99, 107, 120, var(--tw-border-opacity));
}
.dark .dark\:border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgba(250, 250, 250, var(--tw-border-opacity));
}
.dark .dark\:border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgba(222, 224, 227, var(--tw-border-opacity));
}
.dark .dark\:border-opacity-40 {
  --tw-border-opacity: 0.4;
}
.dark .dark\:bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 53, 61, var(--tw-bg-opacity));
}
.dark .dark\:bg-ultramarine-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.dark .dark\:bg-ultramarine-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.dark .dark\:bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(89, 13, 13, var(--tw-bg-opacity));
}
.dark .dark\:bg-ultramarine-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
}
.dark .dark\:bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(49, 196, 86, var(--tw-bg-opacity));
}
.dark .dark\:bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 180, 32, var(--tw-bg-opacity));
}
.dark .dark\:bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(240, 64, 64, var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(18, 20, 23, var(--tw-bg-opacity));
}
.dark .dark\:bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(35, 128, 63, var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 107, 120, var(--tw-bg-opacity));
}
.dark .dark\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.dark .dark\:bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.dark .dark\:bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(92, 214, 118, var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(68, 75, 83, var(--tw-bg-opacity));
}
.dark .dark\:bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.dark .dark\:bg-opacity-15 {
  --tw-bg-opacity: 0.15;
}
.dark .dark\:bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}
.dark .dark\:from-gray-600 {
  --tw-gradient-from: #444B53;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(68, 75, 83, 0));
}
.dark .dark\:from-gray-900 {
  --tw-gradient-from: #121417;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(18, 20, 23, 0));
}
.dark .dark\:to-gray-700 {
  --tw-gradient-to: #2E353D;
}
.dark .dark\:text-gray-50 {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.dark .dark\:text-gray-200 {
  --tw-text-opacity: 1;
  color: rgba(222, 224, 227, var(--tw-text-opacity));
}
.dark .dark\:text-gray-400 {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
.dark .dark\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.dark .dark\:text-green-500 {
  --tw-text-opacity: 1;
  color: rgba(49, 196, 86, var(--tw-text-opacity));
}
.dark .dark\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(99, 107, 120, var(--tw-text-opacity));
}
.dark .dark\:text-current {
  color: currentColor;
}
.dark .dark\:text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark .dark\:text-ultramarine-400 {
  --tw-text-opacity: 1;
  color: rgba(94, 130, 237, var(--tw-text-opacity));
}
.dark .dark\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.dark .dark\:text-green-400 {
  --tw-text-opacity: 1;
  color: rgba(92, 214, 118, var(--tw-text-opacity));
}
.dark .dark\:text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgba(249, 180, 32, var(--tw-text-opacity));
}
.dark .dark\:text-red-500 {
  --tw-text-opacity: 1;
  color: rgba(240, 64, 64, var(--tw-text-opacity));
}
.dark .dark\:text-gray-100 {
  --tw-text-opacity: 1;
  color: rgba(237, 238, 239, var(--tw-text-opacity));
}
.dark .dark\:text-ultramarine-100 {
  --tw-text-opacity: 1;
  color: rgba(224, 234, 255, var(--tw-text-opacity));
}
.dark .dark\:text-ultramarine-200 {
  --tw-text-opacity: 1;
  color: rgba(195, 212, 254, var(--tw-text-opacity));
}
.dark .dark\:text-gray-700 {
  --tw-text-opacity: 1;
  color: rgba(46, 53, 61, var(--tw-text-opacity));
}
.dark .dark\:text-opacity-80 {
  --tw-text-opacity: 0.8;
}
.dark .dark\:bg-secondary-dark {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.dark .dark\:last\:text-emphasized-dark:last-child {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.dark .dark\:odd\:bg-gray-800:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.dark .dark\:hover\:border-gray-600:hover {
  --tw-border-opacity: 1;
  border-color: rgba(68, 75, 83, var(--tw-border-opacity));
}
.dark .dark\:hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(68, 75, 83, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-ultramarine-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(224, 234, 255, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 36, 41, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-ultramarine-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-ultramarine-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(30, 55, 118, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-ultramarine-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 39, 78, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-ultramarine-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(39, 68, 155, var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}
.dark .dark\:hover\:from-gray-500:hover {
  --tw-gradient-from: #636B78;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 107, 120, 0));
}
.dark .dark\:hover\:to-gray-500:hover {
  --tw-gradient-to: #636B78;
}
.dark .dark\:hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-ultramarine-300:hover {
  --tw-text-opacity: 1;
  color: rgba(132, 160, 245, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgba(222, 224, 227, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gray-50:hover {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgba(68, 75, 83, var(--tw-text-opacity));
}
.dark .dark\:active\:border-ultramarine-500:active {
  --tw-border-opacity: 1;
  border-color: rgba(69, 108, 227, var(--tw-border-opacity));
}
.dark .dark\:active\:bg-ultramarine-500:active {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.active\:dark:active .active\:dark\:bg-ultramarine-500:active {
  --tw-bg-opacity: 1;
  background-color: rgba(69, 108, 227, var(--tw-bg-opacity));
}
.dark .dark\:active\:bg-opacity-15:active {
  --tw-bg-opacity: 0.15;
}
.dark .dark\:active\:from-gray-600:active {
  --tw-gradient-from: #444B53;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(68, 75, 83, 0));
}
.dark .dark\:active\:to-gray-600:active {
  --tw-gradient-to: #444B53;
}
.dark .dark\:active\:text-white:active {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark .group:hover .dark\:group-hover\:text-gray-400 {
  --tw-text-opacity: 1;
  color: rgba(139, 147, 157, var(--tw-text-opacity));
}
.dark .group:hover .dark\:group-hover\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgba(196, 200, 205, var(--tw-text-opacity));
}
.dark .dark\:current\:text-white[aria-current] {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark .dark\:current\:text-gray-50[aria-current] {
  --tw-text-opacity: 1;
  color: rgba(250, 250, 250, var(--tw-text-opacity));
}
@media (min-width: 640px) {
  .sm\:static {
    position: static;
  }
  .sm\:mt-8 {
    margin-top: 2rem;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:pb-0 {
    padding-bottom: 0px;
  }
  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 768px) {
  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-start-8 {
    grid-column-start: 8;
  }
  .md\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .md\:row-start-1 {
    grid-row-start: 1;
  }
  .md\:row-end-bottom {
    grid-row-end: -1;
  }
  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .md\:mt-24 {
    margin-top: 6rem;
  }
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:w-6\/12 {
    width: 50%;
  }
  .md\:grid-flow-col {
    grid-auto-flow: column;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }
  .md\:border-r {
    border-right-width: 1px;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:pb-8 {
    padding-bottom: 2rem;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
@media (min-width: 1024px) {
  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .lg\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:border-r {
    border-right-width: 1px;
  }
  .lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}



@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(../../static/media/73d88d2ca065037a4d55.woff2?v=3.15) format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url(../../static/media/e2e12d2e9288439ecb06.woff2?v=3.15) format("woff2");
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(../../static/media/cff684e59ffb052d72cb.woff2) format('woff2');
}

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}

.CodeMirror-linenumbers {}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }

.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}

/* Shown when moving in bi-directional text */

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}

@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */

.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}

.cm-s-default .cm-quote {color: #090;}

.cm-negative {color: #d44;}

.cm-positive {color: #292;}

.cm-header, .cm-strong {font-weight: bold;}

.cm-em {font-style: italic;}

.cm-link {text-decoration: underline;}

.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}

.cm-s-default .cm-atom {color: #219;}

.cm-s-default .cm-number {color: #164;}

.cm-s-default .cm-def {color: #00f;}

.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}

.cm-s-default .cm-variable-2 {color: #05a;}

.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}

.cm-s-default .cm-comment {color: #a50;}

.cm-s-default .cm-string {color: #a11;}

.cm-s-default .cm-string-2 {color: #f50;}

.cm-s-default .cm-meta {color: #555;}

.cm-s-default .cm-qualifier {color: #555;}

.cm-s-default .cm-builtin {color: #30a;}

.cm-s-default .cm-bracket {color: #997;}

.cm-s-default .cm-tag {color: #170;}

.cm-s-default .cm-attribute {color: #00c;}

.cm-s-default .cm-hr {color: #999;}

.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}

.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}

div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}

.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }

.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}

.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}

.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}

.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}

.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}

.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-gutter-wrapper ::selection { background-color: transparent }

.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */ border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  font-variant-ligatures: contextual;
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}

.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}

div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }

.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }

.CodeMirror-crosshair { cursor: crosshair; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */

.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */

.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */

span.CodeMirror-selectedtext { background: none; }

/* Based on Sublime Text's Monokai theme */

.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }

.cm-s-monokai div.CodeMirror-selected { background: #49483E; }

.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }

.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }

.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }

.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }

.cm-s-monokai .CodeMirror-guttermarker { color: white; }

.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }

.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }

.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }

.cm-s-monokai span.cm-comment { color: #75715e; }

.cm-s-monokai span.cm-atom { color: #ae81ff; }

.cm-s-monokai span.cm-number { color: #ae81ff; }

.cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; }

.cm-s-monokai span.cm-comment.cm-def { color: #bc9262; }

.cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; }

.cm-s-monokai span.cm-comment.cm-type { color: #5998a6; }

.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }

.cm-s-monokai span.cm-keyword { color: #f92672; }

.cm-s-monokai span.cm-builtin { color: #66d9ef; }

.cm-s-monokai span.cm-string { color: #e6db74; }

.cm-s-monokai span.cm-variable { color: #f8f8f2; }

.cm-s-monokai span.cm-variable-2 { color: #9effff; }

.cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #66d9ef; }

.cm-s-monokai span.cm-def { color: #fd971f; }

.cm-s-monokai span.cm-bracket { color: #f8f8f2; }

.cm-s-monokai span.cm-tag { color: #f92672; }

.cm-s-monokai span.cm-header { color: #ae81ff; }

.cm-s-monokai span.cm-link { color: #ae81ff; }

.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }

.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }

.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.CodeMirror {
  font-size: 16px;
  line-height: 1.5em;
}

.dark .CodeMirror {
  background-color: rgba(24, 24, 27, var(--tw-bg-opacity));
  color: #4970a0;
}

.cm-s-humio div.CodeMirror-selected {
  background: rgba(141, 61, 255, 0.2);
}

.dark .cm-s-humio div.CodeMirror-selected {
  background: rgba(141, 61, 255, 0.2);
}

.cm-s-humio .CodeMirror-line::-moz-selection, .cm-s-humio .CodeMirror-line > span::-moz-selection, .cm-s-humio .CodeMirror-line > span > span::-moz-selection {
  background: rgba(141, 61, 255, 0.2);
}

.cm-s-humio .CodeMirror-line::selection,
.cm-s-humio .CodeMirror-line > span::selection,
.cm-s-humio .CodeMirror-line > span > span::selection {
  background: rgba(141, 61, 255, 0.2);
}

.dark .cm-s-humio .CodeMirror-line::-moz-selection, .dark .cm-s-humio .CodeMirror-line > span::-moz-selection, .dark .cm-s-humio .CodeMirror-line > span > span::-moz-selection {
  background: rgba(141, 61, 255, 0.2);
}

.dark .cm-s-humio .CodeMirror-line::selection,
.dark .cm-s-humio .CodeMirror-line > span::selection,
.dark .cm-s-humio .CodeMirror-line > span > span::selection {
  background: rgba(141, 61, 255, 0.2);
}

.CodeMirror-gutters {
  padding: 0 3px;
  background: rgb(240, 240, 240);
  border-right: 0;
}

.dark .CodeMirror-gutters {
  background: rgb(240, 240, 240);
}

.cm-s-humio .CodeMirror-guttermarker {
  color: white;
}

.dark .cm-s-humio .CodeMirror-guttermarker {
  color: white;
}

.cm-s-humio .CodeMirror-guttermarker-subtle {
  color: #8f938f;
}

.dark .cm-s-humio .CodeMirror-guttermarker-subtle {
  color: #8f938f;
}

.cm-s-humio .CodeMirror-linenumber {
  color: #8f938f;
}

.dark .cm-s-humio .CodeMirror-linenumber {
  color: #8f938f;
}

.cm-s-humio .CodeMirror-cursor {
  border-left: 1px solid #a7a7a7;
}

.cm-s-humio span.cm-comment {
  color: #6b6b6b;
}

.dark .cm-s-humio span.cm-comment {
  color: #6b6b6b;
}

.cm-s-humio span.cm-atom {
  color: #de8e30;
}

.dark .cm-s-humio span.cm-atom {
  color: #de8e30;
}

.cm-s-humio span.cm-operator {
  color: #717171;
}

.dark .cm-s-humio span.cm-operator {
  color: #717171;
}

.cm-s-humio span.cm-number {
  color: #ccc;
}

.dark .cm-s-humio span.cm-number {
  color: #ccc;
}

.cm-s-humio span.cm-property {
  color: #8f938f;
}

.dark .cm-s-humio span.cm-property {
  color: #8f938f;
}

.cm-s-humio span.cm-attribute {
  color: #a6e22e;
}

.dark .cm-s-humio span.cm-attribute {
  color: #a6e22e;
}

.cm-s-humio span.cm-keyword {
  color: #12a061;
}

.dark .cm-s-humio span.cm-keyword {
  color: #c1d0ff;
}

.cm-s-humio span.cm-string {
  color: #0e559f;
}

.dark .cm-s-humio span.cm-string {
  color: #89ffb4;
}

.cm-s-humio span.cm-variable {
  color: #aeb2f8;
}

.dark .cm-s-humio span.cm-variable {
  color: #d6edfc;
}

.cm-s-humio span.cm-variable-2 {
  color: #510b71;
}

.dark .cm-s-humio span.cm-variable-2 {
  color: #9f9cff;
}

.cm-s-humio span.cm-variable-3,
.cm-s-humio span.cm-type {
  color: rgb(214, 129, 0);
}

.dark .cm-s-humio span.cm-variable-3,
.dark .cm-s-humio span.cm-type {
  color: #fdc361;
}

.cm-s-humio span.cm-variable-4 {
  padding: 0 2px;
  color: rgb(214, 129, 0);
  border: dashed 1px rgba(0, 0, 0, 0.15);
}

.dark .cm-s-humio span.cm-variable-4 {
  color: rgb(214, 129, 0);
  border-color: rgba(0, 0, 0, 0.15);
}

.cm-s-humio span.cm-variable-5 {
  color: rgb(171, 83, 28);
}

.dark .cm-s-humio span.cm-variable-5 {
  color: rgb(243, 117, 37);
}

.cm-s-humio span.cm-eval {
  color: rgb(30, 94, 148);
  background: rgba(93, 107, 255, 0.1);
}

.dark .cm-s-humio span.cm-eval {
  color: rgb(30, 94, 148);
  background: rgba(93, 107, 255, 0.1);
}

.cm-s-humio span.cm-def {
  color: #a635ec;
}

.dark .cm-s-humio span.cm-def {
  color: #a635ec;
}

.cm-s-humio span.cm-bracket {
  color: #f8f8f2;
}

.dark .cm-s-humio span.cm-bracket {
  color: #f8f8f2;
}

.cm-s-humio span.cm-tag {
  color: #c1c144;
}

.dark .cm-s-humio span.cm-tag {
  color: #c1c144;
}

.cm-s-humio span.cm-link {
  color: #ae81ff;
}

.dark .cm-s-humio span.cm-link {
  color: #ae81ff;
}

.cm-s-humio span.cm-qualifier,
.cm-s-humio span.cm-builtin {
  color: #c1c144;
}

.dark .cm-s-humio span.cm-qualifier,
.dark .cm-s-humio span.cm-builtin {
  color: #effbff;
}

.cm-s-humio span.cm-error {
  color: #f8f8f0;
  background: #757ad8;
}

.dark .cm-s-humio span.cm-error {
  color: #f8f8f0;
  background: #757ad8;
}

.cm-s-humio .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.031);
}

.dark .cm-s-humio .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.031);
}

.cm-s-humio .CodeMirror-matchingbracket {
  color: #a635ec !important;
  border-bottom: 1px solid rgba(0, 89, 223, 0.61);
}

.dark .cm-s-humio .CodeMirror-matchingbracket {
  color: #a635ec !important;
  border-bottom-color: rgba(0, 89, 223, 0.61);
}

.cm-s-humio .cm-whitespace::before {
  color: #dfdfdf;
}

.dark .cm-s-humio .cm-whitespace::before {
  color: #dfdfdf;
}

.cm-s-humio .CodeMirror-code > div > pre > span::after,
.CodeMirror-line > span::after {
  color: #dfdfdf;
}

.dark .cm-s-humio .CodeMirror-code > div > pre > span::after,
.dark .CodeMirror-line > span::after {
  color: #dfdfdf;
}

.lsp-diagnostic-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
  background-repeat: repeat-x;
  background-position: left bottom;
  cursor: help;
}

.code-mirror-widget__tooltip {
  position: fixed;
  z-index: 10;
  max-width: 300px;
  padding: 6px 10px;
  color: white;
  font-size: 12px;
  font-family: sans-serif;
  background: #334;
  border: var(--border-default);
  border-radius: 4px;
  -webkit-animation-name: drop-in;
          animation-name: drop-in;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}

@-webkit-keyframes drop-in {
  0% {
    margin-top: -10px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes drop-in {
  0% {
    margin-top: -10px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
  }
}

humio-editor .hover-row.status-bar {
  display: none !important;
}