.link-text {
cursor: pointer;
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.link-text:hover {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
text-decoration-line: underline
}
.link-text:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity))
}
.link-text:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.link {
display: inline-flex;
align-items: center;
gap: 0.125rem;
cursor: pointer;
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.link:hover {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
text-decoration-line: underline
}
.link:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity))
}
.link:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.link--darkBlue:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.link--darkBlue:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.hover-row {
cursor: pointer;
border-radius: 0.5rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.hover-row:hover {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity))
}
.hover-row:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
.dialog-hover-row {
cursor: pointer;
border-radius: 0.5rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.dialog-hover-row:hover {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity))
}
.dialog-hover-row:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}
.dialog-hover-row-inside-row {
cursor: pointer;
border-radius: 0.5rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.dialog-hover-row-inside-row:hover {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity))
}
.dialog-hover-row-inside-row:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity))
}
.caret-color {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.caret-color:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity))
}
/* Header */
.shepherd-has-title .shepherd-content .shepherd-header {
background: var(--shepherd-background);
padding-bottom: 0;
}
/* Tour Steps */
.shepherd-theme-custom {
background: var(--shepherd-background, #1a1a1a);
/* border: 1px solid var(white); */
color: var(--shepherd-text, white);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 0.5rem 1rem;
border: 1px solid rgb(255, 255, 255, 0.65);
;
}
.shepherd-theme-custom .shepherd-title {
color: var(--shepherd-title);
font-size: 1.2rem;
font-weight: 800;
}
.shepherd-theme-custom .shepherd-text {
color: var(--shepherd-text-secondary, #e5e5e5);
font-size: 1.125rem;
}
.shepherd-element.shepherd-welcome .shepherd-cancel-icon {
position: absolute;
top: 1rem;
right: 1rem;
transform: none;
z-index: 10;
}
/* Footer Steps */
.shepherd-footer {
display: flex;
justify-content: space-between;
}
/* Step Count */
.shepherd-step-count {
background: transparent;
color: var(--shepherd-text-secondary, #ccc);
border: none;
cursor: default;
pointer-events: none;
text-transform: none;
margin: 0 1rem;
font-size: 0.875rem;
}
/* Step Progress Bar */
.shepherd-progress-container {
width: 100%;
background-color: var(--shepherd-border, #ccc);
height: 6px;
border-radius: 3px;
margin-bottom: 2rem;
/* Adds a nice space after progress bar */
overflow: hidden;
}
.shepherd-progress-bar {
height: 100%;
width: 0%;
background-color: var(--shepherd-button-primary, #007bff);
transition: width 0.3s ease;
}
/* Custom Welcome Step */
.shepherd .shepherd-welcome {
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 2560px) {
.shepherd-welcome.shepherd-theme-custom {
max-width: 600px;
}
}
.shepherd-welcome .shepherd-footer {
display: flex;
justify-content: center;
}
/* Primary Button */
.shepherd-button-primary {
background-color: var(--shepherd-button-primary);
color: var(--shepherd-button-primary-text);
text-transform: uppercase;
border: 2px solid var(--shepherd-button-primary);
font-size: 1rem;
line-height: 1rem;
}
.shepherd-button:not(:disabled):hover {
background-color: var(--shepherd-button-primary-hover);
border: 2px solid var(--shepherd-button-primary-hover);
font-size: 1rem;
}
/* Secondary Button */
.shepherd-button.shepherd-button-secondary {
background: var(--shepherd-button-secondary);
color: var(--shepherd-button-secondary-text);
border: 1px solid var(--shepherd-button-secondary-text);
text-transform: uppercase;
font-size: 1rem;
line-height: 1rem;
}
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
background: var(--shepherd-button-secondary);
border: 1px solid var(--shepherd-button-secondary-hover);
font-weight: 400;
color: var(--shepherd-button-secondary-hover);
font-size: 1rem;
line-height: 1rem;
}
/* Arrow */
.shepherd-arrow::before,
.shepherd-arrow::after {
background: var(--shepherd-background);
/* border: 1px solid var(--shepherd-border, #ccc); */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.densify-tour-right .shepherd-arrow::before {
border-left: 1px solid rgb(255, 255, 255, 0.65);
border-bottom: 1px solid rgb(255, 255, 255, 0.65);
}
.densify-tour-top .shepherd-arrow::before {
border-right: 1px solid rgb(255, 255, 255, 0.65);
border-bottom: 1px solid rgb(255, 255, 255, 0.65);
}
.densify-tour-bottom .shepherd-arrow::before {
border-left: 1px solid rgb(255, 255, 255, 0.65);
border-top: 1px solid rgb(255, 255, 255, 0.65);
}
.densify-tour-left .shepherd-arrow::before {
border-right: 1px solid rgb(255, 255, 255, 0.65);
border-top: 1px solid rgb(255, 255, 255, 0.65);
}
.button-hidden {
visibility: hidden;
}
.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before {
background: var(--shepherd-background);
}
.tour-highlight-cutout {
position: relative;
z-index: 10000;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7);
border-radius: 8px;
transition: box-shadow 0.3s ease;
}
/* Light mode specific styles */
[data-mui-color-scheme="light"] .shepherd-theme-custom {
--shepherd-background: #ffffff;
--shepherd-text: #000;
--shepherd-title: rgba(0, 0, 0, 0.87);
--shepherd-text-secondary: #4a4a4a;
--shepherd-border: #e5e5e5;
--shepherd-button-primary: #002F6C;
--shepherd-button-primary-text: #ffffff;
--shepherd-button-primary-hover: rgb(0, 32, 75);
--shepherd-button-secondary: #ffffff;
--shepherd-button-secondary-text: #002F6C;
--shepherd-button-secondary-hover: rgb(102 130 167);
}
/* Dark mode specific styles */
[data-mui-color-scheme="dark"] .shepherd-theme-custom {
--shepherd-background: #1f2937;
--shepherd-text: #ffffff;
--shepherd-title: #ffffff;
--shepherd-text-secondary: #e5e5e5;
--shepherd-border: #333333;
--shepherd-button-primary: #6682A7;
--shepherd-button-primary-text: #ffffff;
--shepherd-button-primary-hover: rgb(71, 91, 116);
--shepherd-button-secondary: #1f2937;
--shepherd-button-secondary-text: rgb(102 130 167);
--shepherd-button-secondary-hover: rgb(102 130 167 / 0.5);
}
.JWivsKMrFcbru5ol155EKg\=\= {
background-color: #008DD0;
box-sizing: border-box;
display: inline-block;
font-weight: bold;
font-family: Arial, serif;
font-size: 10px;
height: 15px;
width: 15px;
text-align: center;
margin: auto 5px;
vertical-align: middle;
border-radius: 15px;
color: #FFFFFF;
z-index: 1;
cursor: pointer;
padding-top: 0px;
padding-right: 1px;
font-style: italic;
}
.VpNV1103cm4c5pP6vuEKyw\=\= {
text-align: center;
float: right;
padding: 0px 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
border-left: 1px solid #d9d9d9;
}
.YtpTPhyQ0pGh\+DRvyhfq7Q\=\=  {
color: #808080;
font-size: 1.2rem;
padding: 0px 2px;
}
.fDIdlS7XS1U3FkItPPb7-w\=\= {
font-weight: bold;
color: #404040;
font-size: 1.5rem;
text-overflow: ellipsis;
white-space: nowrap;
}

.FUI6UXMhg1N9\+n3fGn8iFQ\=\= {
color: #808080;
font-size: 1.2rem;
white-space: nowrap;
}
.densify-react-no-data {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
color: #6DA9C0;
fill: #6DA9C0;
display: block;
text-align: center;
line-height: 1.5;
letter-spacing: 0.00938em;
width: 100%;
height: 18px;
margin: 0;
}
.densify-react-no-data-container {
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.XLwGnPrITTPM8B\+-ooFzig\=\= {
color: #404040;
font-size: 1.2rem;
}
.F-ejjd-Onh0wGD3aPpGfuA\=\= {
height:20px;
width:20px;
vertical-align:middle;
padding-right:5px;
}
.WqSiGBWM9oPPDfCq-Ajjfg\=\= {
height: auto;
width: 7em;
vertical-align:middle;
}
.NPhvDVHz1mh7gaFeeC8Gaw\=\={
text-Decoration: underline;
cursor: pointer;
color: blue;
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
/*
* Styling for the app's own AG Grids.
*
* Every theme-class rule is held off `.kx-grid`. Kubex grids carry the same
* `ag-theme-quartz*` class, and these selectors match theirs at equal
* specificity, so without the guard whichever stylesheet loads last decides how
* a widget table looks — which is how the Kubex tables ended up with Roboto,
* opaque row rules and a border down every column.
*/
.ag-root:not(.kx-grid .ag-root) {
font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
}
.ag-row-footer>div {
font-weight: bold;
}
.ag-body-horizontal-scroll>.ag-horizontal-left-spacer {
opacity: 0;
}
.ag-theme-quartz-dark:not(.kx-grid) .selected-row-legacy {
background-color: #1e3a5f;
}
.ag-theme-quartz:not(.kx-grid) .selected-row {
background-color: #dbf3ff;
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-root-wrapper {
--ag-background-color: var(--dark-bg-grid);
--ag-foreground-color: var(--dark-text-primary);
--ag-header-background-color: var(--dark-bg-grid);
--ag-header-foreground-color: var(--dark-text-primary);
--ag-odd-row-background-color: var(--dark-bg-grid);
--ag-row-hover-color: rgba(59, 130, 246, 0.10);
--ag-selected-row-background-color: rgba(59, 130, 246, 0.18);
--ag-border-color: var(--dark-border-subtle);
--ag-secondary-border-color: var(--dark-border-subtle);
--ag-row-border-color: var(--dark-border-subtle);
--ag-header-column-separator-color: var(--dark-border-default);
--ag-input-border-color: var(--dark-border-default);
--ag-panel-background-color: var(--dark-bg-grid);
--ag-popup-background-color: var(--dark-bg-elevated);
--ag-control-panel-background-color: var(--dark-bg-grid);
--ag-side-bar-background-color: var(--dark-bg-grid);
--ag-side-button-selected-background-color: rgba(59, 130, 246, 0.12);
--ag-modal-overlay-background-color: rgba(0, 0, 0, 0.8);
--ag-chip-background-color: var(--dark-bg-elevated);
--ag-range-selection-border-color: var(--dark-accent-primary);
--ag-range-selection-background-color: rgba(59, 130, 246, 0.25);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-header {
border-bottom: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-row {
border-bottom: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-row-hover {
background-color: rgba(59, 130, 246, 0.10);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-row-selected {
background-color: rgba(59, 130, 246, 0.18);
}
.ag-theme-quartz-dark:not(.kx-grid) .selected-row {
background-color: rgba(59, 130, 246, 0.22);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-paging-panel {
background-color: var(--dark-bg-grid);
border-top: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-status-bar {
background-color: var(--dark-bg-grid);
border-top: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-column-drop-horizontal {
background-color: var(--dark-bg-grid);
border-bottom: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-filter-toolpanel,
.ag-theme-quartz-dark:not(.kx-grid) .ag-column-panel {
background-color: var(--dark-bg-grid);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-header-cell {
border-right: 1px solid var(--dark-border-subtle);
}
.ag-theme-quartz-dark:not(.kx-grid) .ag-cell {
border-right: 1px solid var(--dark-border-subtle);
}
.ag-grid-full-screen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
.ag-header-cell-text {
word-break: normal;
}
.ag-root-wrapper:not(.kx-grid .ag-root-wrapper) {
font-size: 1rem;
}
.ag-column-drop-horizontal {
height: 30px;
}
.control-container,
.control-container-disabled {
display: flex;
align-items: center;
padding: 2px 4px;
gap: 4px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.control-container-disabled {
pointer-events: none;
}
.control-item {
margin: 0;
}
.control-item select {
padding: 4px 8px;
margin: 0;
}
.w-20 {
width: 75px;
min-width: 75px;
}
.filterSel {
height: 30px;
font-size: 1rem;
min-width: 285px;
/* Minimum width */
max-width: 285px;
/* Maximum width */
}
.condition {
font-size: 1rem;
min-width: 160px;
/* Minimum width */
max-width: 160px;
}
.delete-button,
.arrow-button {
border: none;
padding: 4px;
cursor: pointer;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
/* Selected state */
.control-container.selected {
background-color: rgba(0, 0, 0, 0.04);
}
.fade-message {
font-family: Arial, Verdana, Helvetica, sans-serif !important;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in {
opacity: 1;
}
.fade-out {
opacity: 0;
}
.filterNameInput {
margin: 0;
box-sizing: border-box;
border-radius: 4px;
transition: 0.3s;
}
.filterContainer {
flex: 0 0 100%;
width: 100%;
}
.filterLineContainer {
flex: 0 0 100%;
min-width: 0;
height: 270px;
overflow-x: hidden;
overflow-y: auto;
}
@media screen and (max-height: 560px) {
.filterLineContainer {
height: 150px;
}
}
.filterActionsContainerDisabled {
pointer-events: none;
}
.filterHeader {
display: flex;
width: 100%;
font-size: 1rem;
font-weight: 400;
text-align: center;
}
.parenthesisStart {
min-width: 155px;
max-width: 155px;
}
.parenthesisEnd {
min-width: 200px;
max-width: 200px;
}
.filterField {
min-width: 300px;
max-width: 300px;
}
.conditions {
min-width: 145px;
max-width: 145px;
}
.filterValue {
min-width: 150px;
max-width: 150px;
}
.filterActions div {
justify-content: center;
}
/**
* Quartz, mapped onto the Kubex palette.
*
* AG Grid's own themes are grey on grey and draw their own card: a background, a
* border and a header fill. Here the grid is transparent and the `Card` around it
* supplies all three, so a grid inside a widget and a table inside a card look
* like the same table.
*
* Both Quartz variants are matched because every value below is a `var(--kx-*)`
* that already follows the mode — `KxGrid` still swaps the class so AG Grid's own
* unmapped internals (icons, drag ghosts) come out the right way round.
*/
.kx-grid.ag-theme-quartz,
.kx-grid.ag-theme-quartz-dark,
.kx-grid.ag-theme-quartz .ag-root-wrapper,
.kx-grid.ag-theme-quartz-dark .ag-root-wrapper {
--ag-background-color: transparent;
/* One surface, not two. Banding a table this dense reads as noise, and the
row rule plus the hover fill already say where a row starts and stops. */
--ag-odd-row-background-color: transparent;
--ag-header-background-color: var(--kx-grid-surface);
/* Quartz draws a border down every column unless it is told not to. */
--ag-cell-horizontal-border: none;
--ag-control-panel-background-color: var(--kx-panel);
--ag-popup-background-color: var(--kx-menu);
--ag-foreground-color: var(--kx-text);
--ag-header-foreground-color: var(--kx-secondary);
--ag-secondary-foreground-color: var(--kx-muted);
--ag-data-color: var(--kx-text);
--ag-border-color: var(--kx-border);
/* The rule between rows is the only thing separating them — there is no
banding — so it is the inset rule rather than the fainter cell one. */
--ag-row-border-color: var(--kx-rule-inset);
--ag-header-column-separator-color: transparent;
--ag-row-hover-color: var(--kx-row-hover);
--ag-selected-row-background-color: var(--kx-hover);
--ag-input-border-color: var(--kx-border-strong);
--ag-input-focus-border-color: var(--kx-blue);
--ag-checkbox-checked-color: var(--kx-blue);
--ag-range-selection-border-color: var(--kx-blue);
--ag-font-family: Inter, system-ui, sans-serif;
--ag-font-size: 12.5px;
--ag-icon-size: 16px;
--ag-grid-size: 4px;
--ag-cell-horizontal-padding: 12px;
--ag-borders: none;
--ag-wrapper-border-radius: 0;
border: none;
}
/**
* The colour the grid is allowed to paint with, which it otherwise cannot know.
*
* Everything else here is transparent so the card behind supplies the surface,
* but two bands have to occlude what scrolls beneath them: the column header, and
* the master row AG Grid pins under it while you scroll through an open detail
* panel. Transparent, both show the rows passing behind — the header and the row
* you drilled into, printed over the panel's own.
*
* A `KxGrid` stands on a card, so that is the default; anywhere else it is set on
* an ancestor and inherited from there.
*/
.kx-grid {
--kx-grid-surface: var(--kx-card);
}
.kx-grid .ag-sticky-top,
.kx-grid .ag-sticky-bottom {
background: var(--kx-grid-surface);
}
/* What is pinned reads as pinned: the row keeps a rule under it, so the panel
scrolling below starts against a line rather than against nothing. */
.kx-grid .ag-sticky-top {
border-bottom: 1px solid var(--kx-rule-inset);
}
/* A nested grid has nothing to occlude — it is `autoHeight`, so the panel around
it scrolls rather than the grid, and its rows never pass under its own header —
and nothing to paint with either, a panel's surface being translucent. */
.kx-detail-panel .kx-grid {
--kx-grid-surface: transparent;
}
/* Headers are the same uppercase micro type as every other column label in the
system, not Quartz's sentence-case bold. */
.kx-grid .ag-header-cell-text {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
/* A heading over several columns says what they have in common, so it is dimmer
and lighter than the column labels under it — the group is the context, the
labels are what a reader is looking for. */
.kx-grid .ag-header-group-text {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--kx-dim);
}
/* How far a group reaches, since the header row has no column separators: the
rule runs the width of the columns it covers, which the label alone cannot
say — it is shorter than the group and starts wherever the group's first
column does. */
.kx-grid .ag-header-group-cell-label {
flex: 1 1 auto;
align-self: stretch;
align-items: center;
border-bottom: 1px solid var(--kx-rule-inset);
}
/* The inset rule, not the card's border: this line is drawn inside a surface
that gets lighter as grids nest, and a fixed grey tuned for the card inverts
against a panel two levels down. */
.kx-grid .ag-header {
border-bottom: 1px solid var(--kx-rule-inset);
}
/* Amber marks the column a table is sorted and scanned by — the same signal the
KPI above it uses. */
.kx-grid .ag-header-cell-sorted-asc .ag-header-cell-text,
.kx-grid .ag-header-cell-sorted-desc .ag-header-cell-text,
.kx-grid .ag-header-cell-sorted-asc .ag-sort-indicator-icon,
.kx-grid .ag-header-cell-sorted-desc .ag-sort-indicator-icon {
color: var(--kx-amber);
}
.kx-grid .ag-header-cell:hover .ag-header-cell-text {
color: var(--kx-secondary);
}
/* Cell text sits on the same baseline as the hand-built tables: the number is the
content, so nothing else in the cell may add a box around it. */
.kx-grid .ag-cell {
display: flex;
align-items: center;
line-height: 1.4;
}
.kx-grid .ag-cell-wrapper {
min-width: 0;
width: 100%;
}
/* A detail row is a panel, not a wide row, so it keeps neither the row's own
spacing nor its pointer. What the panel looks like belongs to the panel:
`DetailPanel` draws the surface, the rail and the closing border. */
.kx-grid .ag-full-width-row.ag-row-level-1 {
padding: 0;
background: transparent;
cursor: default;
}
/* AG Grid sets `white-space: nowrap` on every row so a cell's text clips at the
column edge instead of growing the row. A detail row is prose, which has to
wrap, and `white-space` inherits — left alone it runs a paragraph off the side
of the grid. Not scoped to level 1, because a nested grid's own rows set it
again for the panel inside them. */
.kx-grid .ag-full-width-row {
white-space: normal;
}
/* A panel inside a panel dims its rail. Full-strength blue at every tier turns
a drill-down into a stack of equally loud stripes and stops saying which one
you opened; the depth is in the surface, so the rail only has to mark the
edge. Nesting is read from the DOM rather than passed down as a `level`,
because no caller knows how deep it will be rendered. */
.kx-detail-panel .kx-detail-panel {
border-left-color: var(--kx-rail-muted);
}
.kx-grid .kx-grid-row-clickable:not(.ag-row-level-1) {
cursor: pointer;
}
.kx-grid .kx-grid-row-clickable.ag-row-level-1:not(.ag-full-width-row) {
cursor: pointer;
}
.kx-grid .kx-grid-row-clickable.kx-grid-detail-row {
padding: 0;
background: transparent;
cursor: default;
}
.kx-grid .kx-grid-group-row {
background-color: var(--kx-grid-surface);
}
.kx-grid .kx-grid-group {
padding-left: 8px;
}
/* A deep-linked row: an accent strong enough to find at a glance, but a tint
rather than the selected-row fill, since arriving at a row isn't the same
as having picked it. */
.kx-grid .kx-grid-row-highlighted {
background-color: var(--kx-hover);
box-shadow: inset 3px 0 0 var(--kx-blue);
}
/* The caret owns its whole cell — see `ExpandCell` — so the cell gives up the
padding every other one carries and lets the button centre itself. */
.kx-grid .kx-grid-expand {
padding-left: 0;
padding-right: 0;
}
.kx-grid .ag-row-hover .kx-grid-caret {
color: var(--kx-blue);
}
.kx-grid .ag-overlay-no-rows-center {
color: var(--kx-muted);
font-size: 12.5px;
}
/* The widget grids are dense: a medium widget's body is about 150px, so a row has
to cost near 30px for five clusters to fit. */
.kx-grid-dense {
--ag-cell-horizontal-padding: 10px;
--ag-font-size: 12px;
}
.kx-grid-dense .ag-header-cell-text {
font-size: 10px;
}
.search-container {
display: flex;
justify-items: start;
align-items: center;
padding-top: 4px;
padding-bottom: 4px;
transition: background-color 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.search-icon {
margin: 0 2px;
font-size: 14px;
}
.tree-search-hide {
opacity: 0;
animation: fadeInOut 1s ease-in-out;
display: none;
}
.tree-search-show {
opacity: 1;
animation: fadeInOut 0.5s ease-in-out;
/* display: block; */
}
.search-input {
background-color: transparent;
color: var(--text-color);
height: 36px;
padding: 5px 14px;
margin: 0;
box-sizing: border-box;
border: 1px solid var(--dark-border-subtle, #ccc);
border-radius: 6px;
transition: 0.2s;
outline: none;
font-size: 0.875rem;
}
.search-input::-moz-placeholder {
color: var(--dark-text-muted, #9ca3af);
}
.search-input::placeholder {
color: var(--dark-text-muted, #9ca3af);
}
.search-input:focus {
border-color: var(--dark-accent-primary, #3b82f6);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
@keyframes fadeInOut {
0% {
opacity: 0;
display: none;
}
50% {
opacity: 0.5;
display: block;
}
100% {
opacity: 1;
display: block;
}
}
/* Define a keyframe animation for attention */
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
/* Define a keyframe for pulse effect */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Button that will animate */
button.attention {
animation: shake 0.5s ease-in-out;
}
button.pulse {
background-color: #1a447b;
animation: pulse 1s infinite;
}
.hostTree {
width: 100%;
padding-left: 2px;
padding-top: 5px;
height: 100%;
min-height: 100%;
overflow-x: auto;
overflow-y: auto;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.hostTreeContainer {
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hostTreeToolBarRow {
margin: 0;
height: 38px;
overflow: hidden;
border-bottom: var(--chisel-line);
}
.hostTreeContent {
flex: 1;
overflow: auto;
}
.grid-notification {
background-color: white;
}
.dark .grid-notification {
background-color: #182230;
}
/* FIXME: This file is used in many different files. It is needed to split it in future or make common style folder and move it there */
/* Styles for the summary page */
.summary-cards {
padding: 1rem;
font-size: 1rem;
line-height: 1.5rem
}
.summary-cards-border {
border-radius: 0.375rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity))
}
.summary-cards-titles {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity))
}
.summary-cards-titles:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity))
}
.summary-cards-side-note {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity))
}
.summary-cards-side-note:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity))
}
.summary-cards-title-icons {
height: 1rem;
width: 1rem
}
.summary-cards-title-icons:is(.dark *) {
fill: #f3f4f6
}
@media (min-width: 1280px) {
.summary-cards-title-icons {
height: 1.25rem;
width: 1.25rem
}
}
@media (min-width: 1536px) {
.summary-cards-title-icons {
height: 1.5rem;
width: 1.5rem
}
}
.main-summary-values {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700
}
.optimization-breakdown-values {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600
}
.optimization-breakdown-sub-text {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 300
}
.optimization-breakdown-sub-text-values {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700
}
.main-summary-labels {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity))
}
.main-summary-labels:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity))
}
.main-summary-chart-labels {
text-align: right;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
line-height: 1.125;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity))
}
.main-summary-chart-labels:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity))
}
.efficiency-rating-tooltip-background {
visibility: hidden;
position: absolute;
bottom: 100%;
z-index: 10;
margin-bottom: 0.5rem;
width: 18rem;
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
padding: 0.5rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.group:hover .efficiency-rating-tooltip-background {
visibility: visible
}
.efficiency-rating-tooltip-text {
font-size: 0.875rem;
line-height: 1.25rem
}
.animated-bar {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 1000ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
span:hover {
/*cursor: pointer;*/
/*color: #4a85ba;*/
/*text-decoration: underline;*/
}
span.selected {
text-decoration-color: #8ab2e8;
font-weight: bold;
text-decoration: underline;
}
/* Cluster (parent) vs namespace (child) hierarchy */
.k8s-policy-assignments-grid .ag-row.k8s-policy-assignment-cluster-row {
font-weight: 500;
}
.k8s-policy-assignments-grid .ag-row.k8s-policy-assignment-cluster-row:not(.ag-row-selected) {
background-color: rgba(0, 0, 0, 0.03);
}
.ag-theme-quartz-dark
.k8s-policy-assignments-grid
.ag-row.k8s-policy-assignment-cluster-row:not(.ag-row-selected) {
background-color: rgba(255, 255, 255, 0.04);
}
.k8s-policy-assignments-grid .ag-row.k8s-policy-assignment-namespace-row {
font-weight: 400;
}
.k8s-policy-assignments-grid
.ag-row.k8s-policy-assignment-namespace-row:not(.ag-row-selected)
.ag-cell:not(.ag-cell-auto-group) {
color: rgb(75 85 99);
}
.ag-theme-quartz-dark
.k8s-policy-assignments-grid
.ag-row.k8s-policy-assignment-namespace-row:not(.ag-row-selected)
.ag-cell:not(.ag-cell-auto-group) {
color: rgb(156 163 175);
}
.k8s-policy-assignments-grid .ag-row-disabled.ag-row-hover:not(.ag-full-width-row)::before {
content: none !important;
}
.k8s-policy-assignments-grid .ag-row.ag-row-disabled {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
opacity: 0.6;
}
.k8s-policy-assignments-grid .ag-row.ag-row-disabled:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.k8s-policy-assignments-grid .ag-row.ag-row-disabled .ag-checkbox-input-wrapper {
cursor: not-allowed;
opacity: 0.5;
}
.k8s-policies-grid .ag-row.k8s-policy-row-highlighted {
background-color: rgba(59, 130, 246, 0.18);
}
.ag-theme-quartz-dark .k8s-policies-grid .ag-row.k8s-policy-row-highlighted {
background-color: rgba(96, 165, 250, 0.22);
}
/* Policy Name is autoHeight + pinned, so AG Grid wraps the renderer in a
flex .ag-cell-wrapper. Without an explicit width/min-width bound the
wrapper grows with the text and overflows into Description. */
.k8s-policies-grid .ag-cell[col-id="name"] {
overflow: hidden !important;
}
.k8s-policies-grid .ag-cell[col-id="name"] .ag-cell-wrapper,
.k8s-policies-grid .ag-cell[col-id="name"] .ag-cell-value {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
/* React Grid Layout Styles
Scoped to .pc-dashboard: react-grid-layout's own class names are shared with
the Kubex canvas, and these rules are `!important`, so unscoped they would
hide that canvas's resize handles and repaint its placeholder. */
.pc-dashboard.react-grid-layout {
position: relative;
width: 100%;
}
.widget-container {
height: 100%;
width: 100%;
}
/* Customize react-grid-layout's placeholder */
.pc-dashboard .react-grid-placeholder {
background: rgba(59, 130, 246, 0.2) !important;
border: 0.125rem dashed rgba(59, 130, 246, 0.4) !important;
border-radius: 0.5rem !important;
transition: all 200ms ease !important;
z-index: 2 !important;
}
.dark .pc-dashboard .react-grid-placeholder {
background: rgba(59, 130, 246, 0.15) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
/* Customize react-grid-layout's resize handles */
.pc-dashboard .react-resizable-handle {
opacity: 0 !important;
transition-property: opacity !important;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
transition-duration: 150ms !important;
}
.pc-dashboard.react-grid-layout.edit-mode .react-resizable-handle {
opacity: 1 !important;
}
.pc-dashboard .react-resizable-handle-se {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="m 6,6 L 6,4.5 L 4.5,6 Z M 6,3 L 3,6 Z M 6,1.5 L 1.5,6 Z" style="fill:%23999999;"/></svg>') no-repeat !important;
bottom: 0.25rem !important;
right: 0.25rem !important;
height: 0.75rem !important;
width: 0.75rem !important;
}
.dark .pc-dashboard .react-resizable-handle-se {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="m 6,6 L 6,4.5 L 4.5,6 Z M 6,3 L 3,6 Z M 6,1.5 L 1.5,6 Z" style="fill:%23666666;"/></svg>') no-repeat !important;
}
/* Widget Content Area - Full Height */
.widget-content-full {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0 !important; /* Remove default DensifyChildCard padding */
}
/* Floating Controls Overlay - Show based on edit mode */
.widget-controls-overlay {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
display: flex;
align-items: center;
gap: 0.25rem;
opacity: 0;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(0.25rem);
backdrop-filter: blur(0.25rem);
border-radius: 0.375rem;
padding: 0.125rem;
pointer-events: auto; /* Ensure controls can receive events */
}
/* Show controls when edit mode is active */
.widget-controls-overlay.edit-mode-visible {
opacity: 1;
}
.dark .widget-controls-overlay {
background: rgba(0, 0, 0, 0.7);
}
.widget-drag-handle {
cursor: pointer;
}
.widget-drag-handle:active {
cursor: pointer;
}
/* Widget Sidebar Animations */
@keyframes slideInFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.widget-controls-overlay {
opacity: 0; /* Hide controls by default on mobile too */
}

/* Show controls when edit mode is active on mobile */
.widget-controls-overlay.edit-mode-visible {
opacity: 1;
}
}

.subscriptions-grid .ag-row-disabled.ag-row-hover:not(.ag-full-width-row)::before {
content: none !important;
}
.subscriptions-grid .ag-row.ag-row-disabled {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.subscriptions-grid .ag-row.ag-row-disabled:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.ag-row .ag-action-buttons-cell.ag-cell .ag-action-buttons {
display: none;
justify-content: center;
align-items: center;
gap: 0.25rem;
height: 100%;
}
.ag-row.ag-row-hover .ag-action-buttons-cell.ag-cell .ag-action-buttons {
display: flex;
}
.ag-row .ag-action-buttons-cell.ag-cell-focus.ag-cell-range-single-cell {
box-shadow: none !important;
background-color: transparent !important;
border-color: transparent !important;
}
.connection-verification-info {
padding-top: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.connection-verification-info:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
@keyframes opacityPulse {
0% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0.4;
}
}
.animate-pulse-opacity {
animation: opacityPulse 2s ease-in-out infinite;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.animate-fade-in {
animation: fadeIn 1s ease-in forwards;
}
.animate-fade-out {
animation: fadeOut 1s ease-out forwards;
}
/**
* GENERATED FILE — DO NOT EDIT.
*
* Run `yarn tokens` to regenerate. The source of truth for colour is
* src/design-system/tokens/palette.js; for the rest, tokens/kubexTokens.json.
*
* Components should reach for a Tailwind `kx-*` class first. These variables are
* for the places Tailwind cannot go: AG Grid's theme, chart tooltips, the
* `.kx-prose` markdown styles, and the ECharts option builders that resolve them
* at runtime because canvas cannot read a `var()`.
*/
/* Light is the default so an un-themed host renders legibly. */
:root {
--kx-canvas: #ffffff;
--kx-panel: #f9fafb;
--kx-agent: #f9fafb;
--kx-card: #f3f4f6;
--kx-elevated: #ffffff;
--kx-menu: #ffffff;
--kx-dialog: #ffffff;
--kx-tooltip: #ffffff;
--kx-hover: rgba(37, 99, 235, 0.08);
--kx-hover-subtle: rgba(17, 24, 39, 0.05);
--kx-well: rgba(17, 24, 39, 0.07);
--kx-well-subtle: rgba(17, 24, 39, 0.035);
--kx-scrim: rgba(17, 24, 39, 0.45);
--kx-border: #e5e7eb;
--kx-border-strong: #d1d5db;
--kx-border-tooltip: #d1d5db;
--kx-border-menu: #d1d5db;
--kx-border-dialog: #d1d5db;
--kx-border-hover: #9ca3af;
--kx-border-active: #2563eb;
--kx-border-dashed: #d1d5db;
--kx-border-empty: #d1d5db;
--kx-text: #111827;
--kx-bright: #1f2937;
--kx-secondary: #374151;
--kx-muted: #4b5563;
--kx-faint: #5b6472;
--kx-dim: #6b7280;
--kx-on-accent: #ffffff;
--kx-blue: #2563eb;
--kx-blue-soft: #3b82f6;
--kx-blue-hover: #1d4ed8;
--kx-purple: #7c3aed;
--kx-purple-soft: #8b5cf6;
--kx-amber: #b45309;
--kx-red: #dc2626;
--kx-red-soft: #ef4444;
--kx-green: #15803d;
--kx-green-soft: #16a34a;
--kx-orange: #c2410c;
--kx-teal: #0f766e;
--kx-lens-cpu: #2563eb;
--kx-lens-gpu: #7c3aed;
--kx-amber-deep: #92400e;
--kx-amber-dark: #78350f;
--kx-role-allocatable: #9e9e9e;
--kx-role-requested: #d97706;
--kx-role-utilized: #2563eb;
--kx-role-current: #2563eb;
--kx-role-gpu: #7c3aed;
--kx-role-cost: #2563eb;
--kx-role-storage: #0f766e;
--kx-role-savings: #15803d;
--kx-role-optimal: #15803d;
--kx-role-waste: #b45309;
--kx-role-risk: #dc2626;
--kx-role-risk-soft: #ef4444;
--kx-role-caution: #b45309;
--kx-role-watch: #c2410c;
--kx-role-neutral: #6b7280;
--kx-role-allocatable-text: #4b5563;
--kx-role-requested-text: #b45309;
--kx-role-utilized-text: #2563eb;
--kx-role-current-text: #2563eb;
--kx-role-gpu-text: #7c3aed;
--kx-role-cost-text: #2563eb;
--kx-role-storage-text: #0f766e;
--kx-role-savings-text: #15803d;
--kx-role-optimal-text: #15803d;
--kx-role-waste-text: #b45309;
--kx-role-risk-text: #dc2626;
--kx-role-risk-soft-text: #ef4444;
--kx-role-caution-text: #b45309;
--kx-role-watch-text: #c2410c;
--kx-role-neutral-text: #111827;
--kx-chart-allocatable: #9e9e9e;
--kx-chart-requested: #d97706;
--kx-chart-utilized: #2563eb;
--kx-chart-gpu: #7c3aed;
--kx-chart-gridline: #e5e7eb;
--kx-chart-axis: #d1d5db;
--kx-chart-baseline: #9ca3af;
--kx-chart-savings-area: rgba(21, 128, 61, 0.16);
--kx-chart-saturation-band: rgba(220, 38, 38, 0.1);
--kx-chart-saturation-edge: rgba(220, 38, 38, 0.6);
--kx-chart-band: rgba(17, 24, 39, 0.04);
--kx-chart-band-edge: rgba(17, 24, 39, 0.1);
--kx-rail: #2563eb;
--kx-detail-backdrop: rgba(17, 24, 39, 0.04);
--kx-rail-muted: rgba(17, 24, 39, 0.22);
--kx-stripe: rgba(17, 24, 39, 0.015);
--kx-row-hover: rgba(37, 99, 235, 0.06);
--kx-cell: rgba(17, 24, 39, 0.09);
--kx-rule-inset: rgba(17, 24, 39, 0.11);
--kx-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
--kx-shadow-md: 0 4px 10px rgba(17, 24, 39, 0.08);
--kx-shadow-lg: 0 10px 24px rgba(17, 24, 39, 0.1);
--kx-shadow-xl: 0 16px 36px rgba(17, 24, 39, 0.14);
--kx-tone-neutral-bg: rgba(107, 114, 128, 0.12);
--kx-tone-neutral-border: rgba(107, 114, 128, 0.28);
--kx-tone-neutral-fg: #4b5563;
--kx-tone-info-bg: rgba(37, 99, 235, 0.1);
--kx-tone-info-border: rgba(37, 99, 235, 0.28);
--kx-tone-info-fg: #1d4ed8;
--kx-tone-success-bg: rgba(21, 128, 61, 0.1);
--kx-tone-success-border: rgba(21, 128, 61, 0.28);
--kx-tone-success-fg: #15803d;
--kx-tone-warning-bg: rgba(180, 83, 9, 0.1);
--kx-tone-warning-border: rgba(180, 83, 9, 0.28);
--kx-tone-warning-fg: #b45309;
--kx-tone-danger-bg: rgba(220, 38, 38, 0.1);
--kx-tone-danger-border: rgba(220, 38, 38, 0.28);
--kx-tone-danger-fg: #b91c1c;
--kx-tone-ai-bg: rgba(124, 58, 237, 0.1);
--kx-tone-ai-border: rgba(124, 58, 237, 0.28);
--kx-tone-ai-fg: #6d28d9;
/* Mode-independent: the design system owns these, not the app. */
--kx-radius-sm: 6px;
--kx-radius-md: 8px;
--kx-radius-lg: 10px;
--kx-radius-xl: 12px;
--kx-radius-pill: 999px;
/* Every metric bar, whatever it is measuring and wherever it sits: the gauge in
a widget, the bar under a KPI, the composition in a table cell. One value so
two bars on the same screen cannot be different objects. */
--kx-bar-h: 6px;
--kx-space-xs: 4px;
--kx-space-sm: 6px;
--kx-space-md: 8px;
--kx-space-lg: 12px;
--kx-space-xl: 16px;
--kx-space-2xl: 24px;
--kx-space-gutter: 26px;
--kx-nav-width: 200px;
--kx-agent-panel-width: 300px;
--kx-agent-bar-height: 42px;
--kx-gutter: 26px;
/* The application's own dark properties, read by its stylesheets and its
AG Grid theme. Not scoped to `.dark`, because that is how the app has
always declared them — they are referenced explicitly, not inherited. */
--dark-bg-default: #121212;
--dark-bg-paper: #1a1a1a;
--dark-bg-grid: #1e1e1e;
--dark-bg-navbar: #0f0f0f;
--dark-bg-card: #121212;
--dark-bg-card-child: #1a1a1a;
--dark-bg-elevated: #242424;
--dark-bg-surface: #2a2a2a;
--dark-bg-popup: #1a1a1a;
--dark-bg-dashboard: #1a1a1a;
--dark-bg-dashboard-card: #0f0f0f;
--dark-border-subtle: #2a2a2a;
--dark-border-default: #3a3a3a;
--dark-border-prominent: #4a4a4a;
--dark-border-accent: #3b82f6;
--dark-border-dashboard-card: #1a1a1a;
--dark-text-primary: #e5e5e5;
--dark-text-secondary: #a0a0a0;
--dark-text-muted: #6b6b6b;
--dark-accent-primary: #3b82f6;
--dark-accent-primary-hover: #2563eb;
--dark-accent-secondary: #60a5fa;
--dark-accent-success: #22c55e;
--dark-accent-warning: #f59e0b;
--dark-accent-danger: #ef4444;
}
/* The app puts `.dark` on <html> (see contexts/ThemeContext.tsx) and Tailwind
runs in `darkMode: "class"`, so this is the same switch both sides use. */
.dark {
--kx-canvas: #121212;
--kx-panel: #0f0f0f;
--kx-agent: #0f0f0f;
--kx-card: #1a1a1a;
--kx-elevated: #242424;
--kx-menu: #242424;
--kx-dialog: #242424;
--kx-tooltip: #2a2a2a;
--kx-hover: rgba(59, 130, 246, 0.1);
--kx-hover-subtle: rgba(255, 255, 255, 0.05);
--kx-well: rgba(255, 255, 255, 0.06);
--kx-well-subtle: rgba(255, 255, 255, 0.035);
--kx-scrim: rgba(0, 0, 0, 0.65);
--kx-border: #2a2a2a;
--kx-border-strong: #3a3a3a;
--kx-border-tooltip: #3a3a3a;
--kx-border-menu: #3a3a3a;
--kx-border-dialog: #3a3a3a;
--kx-border-hover: #4a4a4a;
--kx-border-active: #3b82f6;
--kx-border-dashed: #3a3a3a;
--kx-border-empty: #3a3a3a;
--kx-text: #e5e5e5;
--kx-bright: #d4d4d4;
--kx-secondary: #a0a0a0;
--kx-muted: #8a8a8a;
--kx-faint: #7a7a7a;
--kx-dim: #6b6b6b;
--kx-on-accent: #ffffff;
--kx-blue: #3b82f6;
--kx-blue-soft: #60a5fa;
--kx-blue-hover: #2563eb;
--kx-purple: #8b5cf6;
--kx-purple-soft: #a78bfa;
--kx-amber: #f59e0b;
--kx-red: #ef4444;
--kx-red-soft: #f87171;
--kx-green: #22c55e;
--kx-green-soft: #4ade80;
--kx-orange: #f97316;
--kx-teal: #14b8a6;
--kx-lens-cpu: #60a5fa;
--kx-lens-gpu: #a78bfa;
--kx-amber-deep: #b45309;
--kx-amber-dark: #78350f;
--kx-role-allocatable: #9e9e9e;
--kx-role-requested: #f59e0b;
--kx-role-utilized: #3b82f6;
--kx-role-current: #3b82f6;
--kx-role-gpu: #8b5cf6;
--kx-role-cost: #3b82f6;
--kx-role-storage: #14b8a6;
--kx-role-savings: #22c55e;
--kx-role-optimal: #22c55e;
--kx-role-waste: #f59e0b;
--kx-role-risk: #ef4444;
--kx-role-risk-soft: #f87171;
--kx-role-caution: #f59e0b;
--kx-role-watch: #f97316;
--kx-role-neutral: #6b6b6b;
--kx-role-allocatable-text: #9e9e9e;
--kx-role-requested-text: #f59e0b;
--kx-role-utilized-text: #60a5fa;
--kx-role-current-text: #60a5fa;
--kx-role-gpu-text: #a78bfa;
--kx-role-cost-text: #60a5fa;
--kx-role-storage-text: #14b8a6;
--kx-role-savings-text: #4ade80;
--kx-role-optimal-text: #4ade80;
--kx-role-waste-text: #f59e0b;
--kx-role-risk-text: #f87171;
--kx-role-risk-soft-text: #f87171;
--kx-role-caution-text: #f59e0b;
--kx-role-watch-text: #f97316;
--kx-role-neutral-text: #e5e5e5;
--kx-chart-allocatable: #9e9e9e;
--kx-chart-requested: #f59e0b;
--kx-chart-utilized: #3b82f6;
--kx-chart-gpu: #8b5cf6;
--kx-chart-gridline: #2a2a2a;
--kx-chart-axis: #3a3a3a;
--kx-chart-baseline: #6b6b6b;
--kx-chart-savings-area: rgba(34, 197, 94, 0.16);
--kx-chart-saturation-band: rgba(239, 68, 68, 0.1);
--kx-chart-saturation-edge: rgba(239, 68, 68, 0.6);
--kx-chart-band: rgba(255, 255, 255, 0.04);
--kx-chart-band-edge: rgba(255, 255, 255, 0.1);
--kx-rail: #3b82f6;
--kx-detail-backdrop: rgba(255, 255, 255, 0.045);
--kx-rail-muted: rgba(255, 255, 255, 0.18);
--kx-stripe: rgba(255, 255, 255, 0.015);
--kx-row-hover: rgba(59, 130, 246, 0.06);
--kx-cell: rgba(255, 255, 255, 0.07);
--kx-rule-inset: rgba(255, 255, 255, 0.09);
--kx-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
--kx-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
--kx-shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.5);
--kx-shadow-xl: 0 20px 46px rgba(0, 0, 0, 0.6);
--kx-tone-neutral-bg: rgba(138, 138, 138, 0.15);
--kx-tone-neutral-border: rgba(138, 138, 138, 0.26);
--kx-tone-neutral-fg: #8a8a8a;
--kx-tone-info-bg: rgba(59, 130, 246, 0.15);
--kx-tone-info-border: rgba(59, 130, 246, 0.32);
--kx-tone-info-fg: #60a5fa;
--kx-tone-success-bg: rgba(34, 197, 94, 0.15);
--kx-tone-success-border: rgba(34, 197, 94, 0.32);
--kx-tone-success-fg: #4ade80;
--kx-tone-warning-bg: rgba(245, 158, 11, 0.15);
--kx-tone-warning-border: rgba(245, 158, 11, 0.32);
--kx-tone-warning-fg: #f59e0b;
--kx-tone-danger-bg: rgba(239, 68, 68, 0.15);
--kx-tone-danger-border: rgba(239, 68, 68, 0.32);
--kx-tone-danger-fg: #f87171;
--kx-tone-ai-bg: rgba(139, 92, 246, 0.15);
--kx-tone-ai-border: rgba(139, 92, 246, 0.32);
--kx-tone-ai-fg: #a78bfa;
}
/**
* The design system's stylesheet: the generated tokens, plus the rules that have
* to be written in CSS rather than as utility classes — third-party overrides,
* pseudo-elements, and the markdown styles agent answers arrive without classes
* for.
*
* Every colour below goes through a `var(--kx-*)`, so these rules follow the
* light/dark switch along with everything else.
*/
/* Both faces are served from the bundle rather than a font CDN: deployments send
`font-src 'self'` and `style-src 'self'`, which blocks Google Fonts outright,
and the icons then render as their ligature names. */
.kx-root {
font-family: Inter, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
color: var(--kx-text);
}
/* Material Symbols render as ligature text until the font loads; keep them
from flashing full words across the layout. */
.kx-icon {
font-family: "Material Symbols Outlined", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
white-space: nowrap;
direction: ltr;
display: inline-block;
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 20;
}
/* The nav rail and agent panel scroll independently of the canvas. The gutter is
reserved whether or not the bar is showing, so the widget grid is not measured
6px wider than it ends up being. */
.kx-scroll {
scrollbar-gutter: stable;
}
.kx-scroll::-webkit-scrollbar {
width: 6px;
}
.kx-scroll::-webkit-scrollbar-track {
background: transparent;
}
.kx-scroll::-webkit-scrollbar-thumb {
background: var(--kx-border-hover);
border-radius: 3px;
}
/* Agent answers are markdown, so their elements arrive without classes. The
insight widgets and the agent panel style them here rather than each rendering
its own component map for a paragraph. */
.kx-prose {
color: var(--kx-secondary);
font-size: 12.5px;
line-height: 1.6;
}
.kx-prose > * + * {
margin-top: 9px;
}
.kx-prose strong {
color: var(--kx-text);
font-weight: 600;
}
.kx-prose h1,
.kx-prose h2,
.kx-prose h3 {
margin: 14px 0 6px;
color: var(--kx-text);
font-size: 13px;
font-weight: 700;
}
.kx-prose ul,
.kx-prose ol {
margin: 0;
padding-left: 18px;
}
.kx-prose li + li {
margin-top: 5px;
}
.kx-prose code {
padding: 1px 4px;
border-radius: 4px;
background: var(--kx-tone-neutral-bg);
font-family: var(--kx-font-mono, ui-monospace, monospace);
font-size: 11.5px;
}
.kx-prose a {
color: var(--kx-blue);
text-decoration: none;
}
.kx-prose a:hover {
text-decoration: underline;
}
/* Inputs that grow with their content — used by the editable view title.
Not yet in every browser, so a min/max width bounds the fallback. */
.kx-autosize {
field-sizing: content;
}
/* react-grid-layout, restyled. The library's own stylesheet supplies the
positioning; everything here is appearance, so the canvas reads as Kubex
rather than as the default grey grid. */
/* Widgets fill the cell they are given, so a card and the chart inside it stop
at the same edge instead of the card floating in a taller cell. */
.kx-widget,
.kx-widget > * {
height: 100%;
}
/* Edit mode floats a handle and a menu in every widget's top-right corner. That
is where headers already live, so the header yields the space and its text
truncates; the chrome never moves, because a grip you have to look for is
worse than a label one word shorter.
The chrome is 54px wide and sits 7px off the card's edge. A header laid out
inside the card's own padding is already clear of most of that, so it only
reserves the difference — reserving the full width would truncate labels
against 18px of blank padding. */
.kx-widget-editing .kx-chart-head,
.kx-widget-editing .kx-card-head {
padding-right: 46px;
}
/* A header that spans the card edge to edge, like a table's, has no padding of
its own to borrow from and reserves the whole width. */
.kx-widget-editing .kx-card-head-bleed {
padding-right: 64px;
}
/* Reaching for the dates says which cards will answer, by receding the ones that
will not. Left to CSS because the header and the canvas share an ancestor, so
neither needs to know the other is there.
Held while the calendar is open, or the answer would disappear the moment the
pointer moved into the popover. Excluded while editing, where the cards carry
drag chrome and arranging them is the job. */
.kx-untimed {
transition:
opacity 150ms ease,
filter 150ms ease,
transform 150ms ease;
}
.kx-board:has(.kx-range-picker:hover) .kx-untimed:not(.kx-widget-editing),
.kx-board:has(.kx-range-open) .kx-untimed:not(.kx-widget-editing) {
opacity: 0.2;
filter: grayscale(1);
transform: scale(0.97);
}
/* The trend widgets' date slider is two native ranges stacked on one track, so
both thumbs are real inputs and keep their keyboard behaviour. The track has to
pass clicks through to the layer below; only the thumbs take them. */
.kx-range {
-webkit-appearance: none;
appearance: none;
background: transparent;
pointer-events: none;
margin: 0;
}
.kx-range::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: var(--kx-blue);
cursor: grab;
}
.kx-range::-moz-range-thumb {
pointer-events: auto;
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: var(--kx-blue);
cursor: grab;
}
.kx-range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px var(--kx-tone-info-border);
}
.kx-canvas .react-grid-item.react-grid-placeholder {
background: var(--kx-tone-info-bg);
border: 1px dashed var(--kx-border-active);
border-radius: var(--kx-radius-md);
opacity: 1;
}
/* The card being dragged lifts rather than ghosting: you need to see what you
are placing, not just where the hole is. */
.kx-canvas .react-grid-item.react-draggable-dragging {
z-index: 20;
box-shadow: var(--kx-shadow-xl);
}
.kx-canvas .react-grid-item.react-draggable-dragging > * {
border-color: var(--kx-border-active);
}
/* Editing outlines every drop target, so the grid is legible before anything
moves. */
.kx-canvas-editing .react-grid-item:hover > * {
border-color: var(--kx-border-active);
}
/* The default handle is a light-on-light gradient that disappears on a dark
canvas and is invisible on a light one. */
.kx-canvas .react-resizable-handle::after {
border-color: var(--kx-border-hover);
}
.kx-canvas .react-grid-item:hover > .react-resizable-handle::after {
border-color: var(--kx-blue);
}
.kx-canvas .react-resizable-handle-e,
.kx-canvas .react-resizable-handle-s {
background-image: none;
}
/* index.css */
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--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-pan-x:  ;
--tw-pan-y:  ;
--tw-pinch-zoom:  ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position:  ;
--tw-gradient-via-position:  ;
--tw-gradient-to-position:  ;
--tw-ordinal:  ;
--tw-slashed-zero:  ;
--tw-numeric-figure:  ;
--tw-numeric-spacing:  ;
--tw-numeric-fraction:  ;
--tw-ring-inset:  ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur:  ;
--tw-brightness:  ;
--tw-contrast:  ;
--tw-grayscale:  ;
--tw-hue-rotate:  ;
--tw-invert:  ;
--tw-saturate:  ;
--tw-sepia:  ;
--tw-drop-shadow:  ;
--tw-backdrop-blur:  ;
--tw-backdrop-brightness:  ;
--tw-backdrop-contrast:  ;
--tw-backdrop-grayscale:  ;
--tw-backdrop-hue-rotate:  ;
--tw-backdrop-invert:  ;
--tw-backdrop-opacity:  ;
--tw-backdrop-saturate:  ;
--tw-backdrop-sepia:  ;
--tw-contain-size:  ;
--tw-contain-layout:  ;
--tw-contain-paint:  ;
--tw-contain-style:  ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--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-pan-x:  ;
--tw-pan-y:  ;
--tw-pinch-zoom:  ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position:  ;
--tw-gradient-via-position:  ;
--tw-gradient-to-position:  ;
--tw-ordinal:  ;
--tw-slashed-zero:  ;
--tw-numeric-figure:  ;
--tw-numeric-spacing:  ;
--tw-numeric-fraction:  ;
--tw-ring-inset:  ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur:  ;
--tw-brightness:  ;
--tw-contrast:  ;
--tw-grayscale:  ;
--tw-hue-rotate:  ;
--tw-invert:  ;
--tw-saturate:  ;
--tw-sepia:  ;
--tw-drop-shadow:  ;
--tw-backdrop-blur:  ;
--tw-backdrop-brightness:  ;
--tw-backdrop-contrast:  ;
--tw-backdrop-grayscale:  ;
--tw-backdrop-hue-rotate:  ;
--tw-backdrop-invert:  ;
--tw-backdrop-opacity:  ;
--tw-backdrop-saturate:  ;
--tw-backdrop-sepia:  ;
--tw-contain-size:  ;
--tw-contain-layout:  ;
--tw-contain-paint:  ;
--tw-contain-style:  ;
}
/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
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)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
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;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
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;
}
/*
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)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
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 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
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;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.\!container{
width: 100% !important;
}
.container{
width: 100%;
}
@media (min-width: 480px){
.\!container{
max-width: 480px !important;
}
.container{
max-width: 480px;
}
}
@media (min-width: 640px){
.\!container{
max-width: 640px !important;
}
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.\!container{
max-width: 768px !important;
}
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.\!container{
max-width: 1024px !important;
}
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.\!container{
max-width: 1280px !important;
}
.container{
max-width: 1280px;
}
}
@media (min-width: 1536px){
.\!container{
max-width: 1536px !important;
}
.container{
max-width: 1536px;
}
}
@media (min-width: 1920px){
.\!container{
max-width: 1920px !important;
}
.container{
max-width: 1920px;
}
}
@media (min-width: 2560px){
.\!container{
max-width: 2560px !important;
}
.container{
max-width: 2560px;
}
}
@media (min-width: 2880px){
.\!container{
max-width: 2880px !important;
}
.container{
max-width: 2880px;
}
}
@media (min-width: 3360px){
.\!container{
max-width: 3360px !important;
}
.container{
max-width: 3360px;
}
}
@media (min-width: 3840px){
.\!container{
max-width: 3840px !important;
}
.container{
max-width: 3840px;
}
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none{
pointer-events: none;
}
.pointer-events-auto{
pointer-events: auto;
}
.\!visible{
visibility: visible !important;
}
.visible{
visibility: visible;
}
.invisible{
visibility: hidden;
}
.collapse{
visibility: collapse;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: sticky;
}
.-inset-2\.5{
inset: -0.625rem;
}
.inset-0{
inset: 0px;
}
.inset-x-0{
left: 0px;
right: 0px;
}
.inset-y-0{
top: 0px;
bottom: 0px;
}
.-right-12{
right: -3rem;
}
.-top-3{
top: -0.75rem;
}
.-top-3\.5{
top: -0.875rem;
}
.-top-\[9px\]{
top: -9px;
}
.bottom-0{
bottom: 0px;
}
.bottom-10{
bottom: 2.5rem;
}
.bottom-2{
bottom: 0.5rem;
}
.bottom-3{
bottom: 0.75rem;
}
.bottom-4{
bottom: 1rem;
}
.bottom-\[16px\]{
bottom: 16px;
}
.bottom-\[3px\]{
bottom: 3px;
}
.bottom-\[4px\]{
bottom: 4px;
}
.bottom-kx-md{
bottom: 8px;
}
.left-0{
left: 0px;
}
.left-1{
left: 0.25rem;
}
.left-1\/2{
left: 50%;
}
.left-2{
left: 0.5rem;
}
.left-3{
left: 0.75rem;
}
.left-3\/4{
left: 75%;
}
.left-4{
left: 1rem;
}
.left-5{
left: 1.25rem;
}
.left-6{
left: 1.5rem;
}
.left-8{
left: 2rem;
}
.left-\[-3rem\]{
left: -3rem;
}
.left-\[10px\]{
left: 10px;
}
.left-\[16px\]{
left: 16px;
}
.left-\[1px\]{
left: 1px;
}
.left-\[30\%\]{
left: 30%;
}
.left-\[3px\]{
left: 3px;
}
.left-\[45\%\]{
left: 45%;
}
.left-\[50\%\]{
left: 50%;
}
.left-\[60\%\]{
left: 60%;
}
.left-\[7px\]{
left: 7px;
}
.left-kx-md{
left: 8px;
}
.right-0{
right: 0px;
}
.right-1\/4{
right: 25%;
}
.right-2{
right: 0.5rem;
}
.right-4{
right: 1rem;
}
.right-\[10px\]{
right: 10px;
}
.right-\[12px\]{
right: 12px;
}
.right-\[16px\]{
right: 16px;
}
.right-\[3px\]{
right: 3px;
}
.right-\[6px\]{
right: 6px;
}
.right-\[7px\]{
right: 7px;
}
.top-0{
top: 0px;
}
.top-1{
top: 0.25rem;
}
.top-1\/2{
top: 50%;
}
.top-11{
top: 2.75rem;
}
.top-2{
top: 0.5rem;
}
.top-4{
top: 1rem;
}
.top-5{
top: 1.25rem;
}
.top-\[12\%\]{
top: 12%;
}
.top-\[15px\]{
top: 15px;
}
.top-\[16px\]{
top: 16px;
}
.top-\[1px\]{
top: 1px;
}
.top-\[6px\]{
top: 6px;
}
.isolate{
isolation: isolate;
}
.z-10{
z-index: 10;
}
.z-20{
z-index: 20;
}
.z-30{
z-index: 30;
}
.z-40{
z-index: 40;
}
.z-50{
z-index: 50;
}
.z-\[100\]{
z-index: 100;
}
.z-\[1\]{
z-index: 1;
}
.z-\[200\]{
z-index: 200;
}
.z-\[220\]{
z-index: 220;
}
.z-\[250\]{
z-index: 250;
}
.z-\[2\]{
z-index: 2;
}
.z-\[40\]{
z-index: 40;
}
.z-\[60\]{
z-index: 60;
}
.z-\[6\]{
z-index: 6;
}
.z-\[70\]{
z-index: 70;
}
.z-\[80\]{
z-index: 80;
}
.z-\[90\]{
z-index: 90;
}
.z-\[95\]{
z-index: 95;
}
.order-1{
order: 1;
}
.order-2{
order: 2;
}
.col-span-1{
grid-column: span 1 / span 1;
}
.col-span-10{
grid-column: span 10 / span 10;
}
.col-span-12{
grid-column: span 12 / span 12;
}
.col-span-2{
grid-column: span 2 / span 2;
}
.col-span-3{
grid-column: span 3 / span 3;
}
.col-span-4{
grid-column: span 4 / span 4;
}
.col-span-5{
grid-column: span 5 / span 5;
}
.col-start-1{
grid-column-start: 1;
}
.col-start-3{
grid-column-start: 3;
}
.col-start-5{
grid-column-start: 5;
}
.row-span-1{
grid-row: span 1 / span 1;
}
.row-span-2{
grid-row: span 2 / span 2;
}
.row-start-1{
grid-row-start: 1;
}
.row-start-2{
grid-row-start: 2;
}
.m-0{
margin: 0px;
}
.m-2{
margin: 0.5rem;
}
.m-\[3px_0_0_14px\]{
margin: 3px 0 0 14px;
}
.m-\[3px_0_2px_14px\]{
margin: 3px 0 2px 14px;
}
.m-auto{
margin: auto;
}
.\!mx-0{
margin-left: 0px !important;
margin-right: 0px !important;
}
.-mx-kx-xl{
margin-left: -16px;
margin-right: -16px;
}
.-my-px{
margin-top: -1px;
margin-bottom: -1px;
}
.mx-1\.5{
margin-left: 0.375rem;
margin-right: 0.375rem;
}
.mx-2{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-4{
margin-left: 1rem;
margin-right: 1rem;
}
.mx-8{
margin-left: 2rem;
margin-right: 2rem;
}
.mx-\[3px\]{
margin-left: 3px;
margin-right: 3px;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.my-1{
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-4{
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-6{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-8{
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-\[5px\]{
margin-top: 5px;
margin-bottom: 5px;
}
.my-auto{
margin-top: auto;
margin-bottom: auto;
}
.-mb-\[14px\]{
margin-bottom: -14px;
}
.-mb-px{
margin-bottom: -1px;
}
.-ml-px{
margin-left: -1px;
}
.-mr-1{
margin-right: -0.25rem;
}
.-mt-1{
margin-top: -0.25rem;
}
.mb-0{
margin-bottom: 0px;
}
.mb-0\.5{
margin-bottom: 0.125rem;
}
.mb-1{
margin-bottom: 0.25rem;
}
.mb-2{
margin-bottom: 0.5rem;
}
.mb-3{
margin-bottom: 0.75rem;
}
.mb-4{
margin-bottom: 1rem;
}
.mb-5{
margin-bottom: 1.25rem;
}
.mb-6{
margin-bottom: 1.5rem;
}
.mb-\[14px\]{
margin-bottom: 14px;
}
.mb-\[3px\]{
margin-bottom: 3px;
}
.mb-\[5px\]{
margin-bottom: 5px;
}
.mb-\[9px\]{
margin-bottom: 9px;
}
.mb-kx-lg{
margin-bottom: 12px;
}
.mb-kx-md{
margin-bottom: 8px;
}
.mb-kx-sm{
margin-bottom: 6px;
}
.mb-kx-xl{
margin-bottom: 16px;
}
.mb-kx-xs{
margin-bottom: 4px;
}
.ml-0\.5{
margin-left: 0.125rem;
}
.ml-1{
margin-left: 0.25rem;
}
.ml-2{
margin-left: 0.5rem;
}
.ml-3{
margin-left: 0.75rem;
}
.ml-4{
margin-left: 1rem;
}
.ml-6{
margin-left: 1.5rem;
}
.ml-\[18px\]{
margin-left: 18px;
}
.ml-\[3px\]{
margin-left: 3px;
}
.ml-\[6px\]{
margin-left: 6px;
}
.ml-\[9px\]{
margin-left: 9px;
}
.ml-auto{
margin-left: auto;
}
.ml-kx-lg{
margin-left: 12px;
}
.ml-kx-md{
margin-left: 8px;
}
.ml-kx-xl{
margin-left: 16px;
}
.mr-1{
margin-right: 0.25rem;
}
.mr-1\.5{
margin-right: 0.375rem;
}
.mr-2{
margin-right: 0.5rem;
}
.mr-3{
margin-right: 0.75rem;
}
.mr-4{
margin-right: 1rem;
}
.mr-5{
margin-right: 1.25rem;
}
.mr-\[4px\]{
margin-right: 4px;
}
.mr-auto{
margin-right: auto;
}
.mr-kx-sm{
margin-right: 6px;
}
.mr-kx-xl{
margin-right: 16px;
}
.mt-0{
margin-top: 0px;
}
.mt-0\.5{
margin-top: 0.125rem;
}
.mt-1{
margin-top: 0.25rem;
}
.mt-10{
margin-top: 2.5rem;
}
.mt-2{
margin-top: 0.5rem;
}
.mt-3{
margin-top: 0.75rem;
}
.mt-4{
margin-top: 1rem;
}
.mt-5{
margin-top: 1.25rem;
}
.mt-60{
margin-top: 15rem;
}
.mt-9{
margin-top: 2.25rem;
}
.mt-\[10px\]{
margin-top: 10px;
}
.mt-\[11px\]{
margin-top: 11px;
}
.mt-\[14px\]{
margin-top: 14px;
}
.mt-\[18px\]{
margin-top: 18px;
}
.mt-\[1px\]{
margin-top: 1px;
}
.mt-\[2px\]{
margin-top: 2px;
}
.mt-\[3px\]{
margin-top: 3px;
}
.mt-\[4px\]{
margin-top: 4px;
}
.mt-\[5px\]{
margin-top: 5px;
}
.mt-\[9px\]{
margin-top: 9px;
}
.mt-auto{
margin-top: auto;
}
.mt-kx-lg{
margin-top: 12px;
}
.mt-kx-md{
margin-top: 8px;
}
.mt-kx-sm{
margin-top: 6px;
}
.mt-kx-xl{
margin-top: 16px;
}
.line-clamp-2{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block{
display: block;
}
.inline-block{
display: inline-block;
}
.\!inline{
display: inline !important;
}
.inline{
display: inline;
}
.\!flex{
display: flex !important;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.table{
display: table;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.list-item{
display: list-item;
}
.\!hidden{
display: none !important;
}
.hidden{
display: none;
}
.aspect-\[16\/9\]{
aspect-ratio: 16/9;
}
.size-3{
width: 0.75rem;
height: 0.75rem;
}
.size-4{
width: 1rem;
height: 1rem;
}
.\!h-\[20px\]{
height: 20px !important;
}
.\!h-\[22px\]{
height: 22px !important;
}
.h-0{
height: 0px;
}
.h-1{
height: 0.25rem;
}
.h-1\.5{
height: 0.375rem;
}
.h-1\/6{
height: 16.666667%;
}
.h-10{
height: 2.5rem;
}
.h-14{
height: 3.5rem;
}
.h-16{
height: 4rem;
}
.h-2\.5{
height: 0.625rem;
}
.h-2\/3{
height: 66.666667%;
}
.h-20{
height: 5rem;
}
.h-24{
height: 6rem;
}
.h-3{
height: 0.75rem;
}
.h-3\.5{
height: 0.875rem;
}
.h-32{
height: 8rem;
}
.h-4{
height: 1rem;
}
.h-44{
height: 11rem;
}
.h-48{
height: 12rem;
}
.h-5{
height: 1.25rem;
}
.h-6{
height: 1.5rem;
}
.h-7{
height: 1.75rem;
}
.h-72{
height: 18rem;
}
.h-8{
height: 2rem;
}
.h-96{
height: 24rem;
}
.h-\[1\.5rem\]{
height: 1.5rem;
}
.h-\[10px\]{
height: 10px;
}
.h-\[11px\]{
height: 11px;
}
.h-\[120px\]{
height: 120px;
}
.h-\[13px\]{
height: 13px;
}
.h-\[14px\]{
height: 14px;
}
.h-\[16px\]{
height: 16px;
}
.h-\[17px\]{
height: 17px;
}
.h-\[180px\]{
height: 180px;
}
.h-\[18px\]{
height: 18px;
}
.h-\[190px\]{
height: 190px;
}
.h-\[19px\]{
height: 19px;
}
.h-\[200px\]{
height: 200px;
}
.h-\[220px\]{
height: 220px;
}
.h-\[22px\]{
height: 22px;
}
.h-\[240px\]{
height: 240px;
}
.h-\[24px\]{
height: 24px;
}
.h-\[260px\]{
height: 260px;
}
.h-\[26px\]{
height: 26px;
}
.h-\[275px\]{
height: 275px;
}
.h-\[28px\]{
height: 28px;
}
.h-\[2rem\]{
height: 2rem;
}
.h-\[300px\]{
height: 300px;
}
.h-\[30px\]{
height: 30px;
}
.h-\[32px\]{
height: 32px;
}
.h-\[32rem\]{
height: 32rem;
}
.h-\[34px\]{
height: 34px;
}
.h-\[350px\]{
height: 350px;
}
.h-\[360px\]{
height: 360px;
}
.h-\[36px\]{
height: 36px;
}
.h-\[3px\]{
height: 3px;
}
.h-\[400px\]{
height: 400px;
}
.h-\[440px\]{
height: 440px;
}
.h-\[520px\]{
height: 520px;
}
.h-\[560px\]{
height: 560px;
}
.h-\[5px\]{
height: 5px;
}
.h-\[6px\]{
height: 6px;
}
.h-\[70vh\]{
height: 70vh;
}
.h-\[72px\]{
height: 72px;
}
.h-\[75\%\]{
height: 75%;
}
.h-\[8px\]{
height: 8px;
}
.h-\[9px\]{
height: 9px;
}
.h-\[calc\(100\%-2rem\)\]{
height: calc(100% - 2rem);
}
.h-fit{
height: -moz-fit-content;
height: fit-content;
}
.h-full{
height: 100%;
}
.h-kx-agent-bar{
height: 42px;
}
.h-px{
height: 1px;
}
.h-screen{
height: 100vh;
}
.max-h-24{
max-height: 6rem;
}
.max-h-64{
max-height: 16rem;
}
.max-h-80{
max-height: 20rem;
}
.max-h-\[300px\]{
max-height: 300px;
}
.max-h-\[360px\]{
max-height: 360px;
}
.max-h-\[400px\]{
max-height: 400px;
}
.max-h-\[90vh\]{
max-height: 90vh;
}
.max-h-full{
max-height: 100%;
}
.min-h-0{
min-height: 0px;
}
.min-h-32{
min-height: 8rem;
}
.min-h-4{
min-height: 1rem;
}
.min-h-52{
min-height: 13rem;
}
.min-h-6{
min-height: 1.5rem;
}
.min-h-8{
min-height: 2rem;
}
.min-h-96{
min-height: 24rem;
}
.min-h-\[150px\]{
min-height: 150px;
}
.min-h-\[200px\]{
min-height: 200px;
}
.min-h-\[250px\]{
min-height: 250px;
}
.min-h-\[3px\]{
min-height: 3px;
}
.min-h-\[40px\]{
min-height: 40px;
}
.min-h-\[420px\]{
min-height: 420px;
}
.min-h-\[500px\]{
min-height: 500px;
}
.min-h-\[560px\]{
min-height: 560px;
}
.min-h-\[56px\]{
min-height: 56px;
}
.min-h-\[72px\]{
min-height: 72px;
}
.min-h-\[96px\]{
min-height: 96px;
}
.min-h-\[min\(52vh\2c 400px\)\]{
min-height: min(52vh,400px);
}
.min-h-screen{
min-height: 100vh;
}
.w-0{
width: 0px;
}
.w-0\.5{
width: 0.125rem;
}
.w-1{
width: 0.25rem;
}
.w-1\.5{
width: 0.375rem;
}
.w-1\/2{
width: 50%;
}
.w-1\/3{
width: 33.333333%;
}
.w-1\/4{
width: 25%;
}
.w-10{
width: 2.5rem;
}
.w-12{
width: 3rem;
}
.w-14{
width: 3.5rem;
}
.w-16{
width: 4rem;
}
.w-2\.5{
width: 0.625rem;
}
.w-2\/3{
width: 66.666667%;
}
.w-2\/5{
width: 40%;
}
.w-20{
width: 5rem;
}
.w-24{
width: 6rem;
}
.w-3{
width: 0.75rem;
}
.w-3\.5{
width: 0.875rem;
}
.w-3\/4{
width: 75%;
}
.w-32{
width: 8rem;
}
.w-4{
width: 1rem;
}
.w-40{
width: 10rem;
}
.w-44{
width: 11rem;
}
.w-48{
width: 12rem;
}
.w-5{
width: 1.25rem;
}
.w-52{
width: 13rem;
}
.w-6{
width: 1.5rem;
}
.w-64{
width: 16rem;
}
.w-7{
width: 1.75rem;
}
.w-8{
width: 2rem;
}
.w-80{
width: 20rem;
}
.w-\[100px\]{
width: 100px;
}
.w-\[10px\]{
width: 10px;
}
.w-\[1100px\]{
width: 1100px;
}
.w-\[110px\]{
width: 110px;
}
.w-\[11px\]{
width: 11px;
}
.w-\[120px\]{
width: 120px;
}
.w-\[124px\]{
width: 124px;
}
.w-\[12px\]{
width: 12px;
}
.w-\[130px\]{
width: 130px;
}
.w-\[13px\]{
width: 13px;
}
.w-\[14px\]{
width: 14px;
}
.w-\[150px\]{
width: 150px;
}
.w-\[160px\]{
width: 160px;
}
.w-\[16px\]{
width: 16px;
}
.w-\[176px\]{
width: 176px;
}
.w-\[17px\]{
width: 17px;
}
.w-\[19px\]{
width: 19px;
}
.w-\[210px\]{
width: 210px;
}
.w-\[22px\]{
width: 22px;
}
.w-\[24px\]{
width: 24px;
}
.w-\[26px\]{
width: 26px;
}
.w-\[280px\]{
width: 280px;
}
.w-\[28px\]{
width: 28px;
}
.w-\[2px\]{
width: 2px;
}
.w-\[300px\]{
width: 300px;
}
.w-\[30px\]{
width: 30px;
}
.w-\[320px\]{
width: 320px;
}
.w-\[324px\]{
width: 324px;
}
.w-\[32px\]{
width: 32px;
}
.w-\[34px\]{
width: 34px;
}
.w-\[350px\]{
width: 350px;
}
.w-\[380px\]{
width: 380px;
}
.w-\[3px\]{
width: 3px;
}
.w-\[420px\]{
width: 420px;
}
.w-\[440px\]{
width: 440px;
}
.w-\[520px\]{
width: 520px;
}
.w-\[52px\]{
width: 52px;
}
.w-\[560px\]{
width: 560px;
}
.w-\[56px\]{
width: 56px;
}
.w-\[60px\]{
width: 60px;
}
.w-\[6px\]{
width: 6px;
}
.w-\[70px\]{
width: 70px;
}
.w-\[70vw\]{
width: 70vw;
}
.w-\[720px\]{
width: 720px;
}
.w-\[760px\]{
width: 760px;
}
.w-\[80px\]{
width: 80px;
}
.w-\[90\%\]{
width: 90%;
}
.w-\[900px\]{
width: 900px;
}
.w-\[90px\]{
width: 90px;
}
.w-\[9px\]{
width: 9px;
}
.w-\[min\(1200px\2c 92vw\)\]{
width: min(1200px,92vw);
}
.w-\[min\(460px\2c 100\%\)\]{
width: min(460px,100%);
}
.w-auto{
width: auto;
}
.w-fit{
width: -moz-fit-content;
width: fit-content;
}
.w-full{
width: 100%;
}
.w-kx-nav{
width: 200px;
}
.w-px{
width: 1px;
}
.w-screen{
width: 100vw;
}
.min-w-0{
min-width: 0px;
}
.min-w-\[120px\]{
min-width: 120px;
}
.min-w-\[160px\]{
min-width: 160px;
}
.min-w-\[214px\]{
min-width: 214px;
}
.min-w-\[34px\]{
min-width: 34px;
}
.min-w-\[82px\]{
min-width: 82px;
}
.min-w-\[8rem\]{
min-width: 8rem;
}
.min-w-\[90px\]{
min-width: 90px;
}
.min-w-\[96px\]{
min-width: 96px;
}
.max-w-3xl{
max-width: 48rem;
}
.max-w-4xl{
max-width: 56rem;
}
.max-w-6xl{
max-width: 72rem;
}
.max-w-9xl{
max-width: 100rem;
}
.max-w-\[120px\]{
max-width: 120px;
}
.max-w-\[380px\]{
max-width: 380px;
}
.max-w-\[420px\]{
max-width: 420px;
}
.max-w-\[560px\]{
max-width: 560px;
}
.max-w-\[60\%\]{
max-width: 60%;
}
.max-w-\[620px\]{
max-width: 620px;
}
.max-w-\[680px\]{
max-width: 680px;
}
.max-w-\[700px\]{
max-width: 700px;
}
.max-w-\[720px\]{
max-width: 720px;
}
.max-w-\[820px\]{
max-width: 820px;
}
.max-w-\[8rem\]{
max-width: 8rem;
}
.max-w-fit{
max-width: -moz-fit-content;
max-width: fit-content;
}
.max-w-full{
max-width: 100%;
}
.max-w-md{
max-width: 28rem;
}
.max-w-xl{
max-width: 36rem;
}
.flex-1{
flex: 1 1 0%;
}
.flex-\[1\]{
flex: 1;
}
.flex-\[1_0_auto\]{
flex: 1 0 auto;
}
.flex-\[2\]{
flex: 2;
}
.flex-auto{
flex: 1 1 auto;
}
.flex-none{
flex: none;
}
.flex-shrink{
flex-shrink: 1;
}
.flex-shrink-0{
flex-shrink: 0;
}
.shrink{
flex-shrink: 1;
}
.shrink-0{
flex-shrink: 0;
}
.flex-grow{
flex-grow: 1;
}
.flex-grow-0{
flex-grow: 0;
}
.grow{
flex-grow: 1;
}
.basis-1\/2{
flex-basis: 50%;
}
.basis-1\/3{
flex-basis: 33.333333%;
}
.basis-2\/3{
flex-basis: 66.666667%;
}
.basis-5\/12{
flex-basis: 41.666667%;
}
.basis-7\/12{
flex-basis: 58.333333%;
}
.basis-\[15\%\]{
flex-basis: 15%;
}
.basis-\[70\%\]{
flex-basis: 70%;
}
.basis-\[85\%\]{
flex-basis: 85%;
}
.basis-full{
flex-basis: 100%;
}
.border-collapse{
border-collapse: collapse;
}
.border-spacing-1{
--tw-border-spacing-x: 0.25rem;
--tw-border-spacing-y: 0.25rem;
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.origin-bottom{
transform-origin: bottom;
}
.-translate-x-1\/2{
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), 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));
}
.-translate-x-\[300\%\]{
--tw-translate-x: -300%;
transform: translate(var(--tw-translate-x), 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));
}
.-translate-y-1\/2{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), 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));
}
.translate-x-0{
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), 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));
}
.translate-x-1\/2{
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), 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));
}
.translate-x-\[10px\]{
--tw-translate-x: 10px;
transform: translate(var(--tw-translate-x), 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));
}
.translate-x-full{
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), 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));
}
.-rotate-45{
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), 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));
}
.rotate-180{
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), 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));
}
.rotate-45{
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), 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));
}
.rotate-90{
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), 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));
}
.transform{
transform: translate(var(--tw-translate-x), 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));
}
.transform-gpu{
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!transform-none{
transform: none !important;
}
@keyframes pulse{
50%{
opacity: .5;
}
}
.animate-pulse{
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.animate-spin{
animation: spin 1s linear infinite;
}
.cursor-col-resize{
cursor: col-resize;
}
.cursor-default{
cursor: default;
}
.cursor-ew-resize{
cursor: ew-resize;
}
.cursor-grab{
cursor: grab;
}
.cursor-help{
cursor: help;
}
.cursor-nesw-resize{
cursor: nesw-resize;
}
.cursor-not-allowed{
cursor: not-allowed;
}
.cursor-ns-resize{
cursor: ns-resize;
}
.cursor-nwse-resize{
cursor: nwse-resize;
}
.cursor-pointer{
cursor: pointer;
}
.cursor-row-resize{
cursor: row-resize;
}
.cursor-text{
cursor: text;
}
.touch-none{
touch-action: none;
}
.select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize-none{
resize: none;
}
.resize-y{
resize: vertical;
}
.resize{
resize: both;
}
.list-none{
list-style-type: none;
}
.appearance-none{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6{
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7{
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8{
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[0\.5fr\2c 1\.25fr\2c 1\.25fr\]{
grid-template-columns: 0.5fr 1.25fr 1.25fr;
}
.grid-cols-\[10fr_10fr_10fr_1fr\]{
grid-template-columns: 10fr 10fr 10fr 1fr;
}
.grid-cols-\[12fr_7fr_1fr\]{
grid-template-columns: 12fr 7fr 1fr;
}
.grid-cols-\[13fr_12fr_1fr\]{
grid-template-columns: 13fr 12fr 1fr;
}
.grid-cols-\[14px_minmax\(0\2c 1fr\)\]{
grid-template-columns: 14px minmax(0,1fr);
}
.grid-cols-\[15fr_7fr_1fr\]{
grid-template-columns: 15fr 7fr 1fr;
}
.grid-cols-\[16fr_12fr_1fr\]{
grid-template-columns: 16fr 12fr 1fr;
}
.grid-cols-\[1fr\2c 2fr\2c 2fr\]{
grid-template-columns: 1fr 2fr 2fr;
}
.grid-cols-\[1fr_10fr\]{
grid-template-columns: 1fr 10fr;
}
.grid-cols-\[1fr_20fr\]{
grid-template-columns: 1fr 20fr;
}
.grid-cols-\[1fr_2fr\]{
grid-template-columns: 1fr 2fr;
}
.grid-cols-\[1fr_3fr\]{
grid-template-columns: 1fr 3fr;
}
.grid-cols-\[2fr\2c 1fr\2c 1fr\2c 1fr\2c 2fr\]{
grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
}
.grid-cols-\[2fr_2fr_1fr\]{
grid-template-columns: 2fr 2fr 1fr;
}
.grid-cols-\[2fr_3fr\]{
grid-template-columns: 2fr 3fr;
}
.grid-cols-\[2fr_5fr\]{
grid-template-columns: 2fr 5fr;
}
.grid-cols-\[31fr_16fr_1fr\]{
grid-template-columns: 31fr 16fr 1fr;
}
.grid-cols-\[45\%\2c 5\%\2c 45\%\2c 5\%\]{
grid-template-columns: 45% 5% 45% 5%;
}
.grid-cols-\[7\.5rem_1fr\]{
grid-template-columns: 7.5rem 1fr;
}
.grid-cols-\[auto_1fr\]{
grid-template-columns: auto 1fr;
}
.grid-cols-\[minmax\(0\2c 1fr\)_2fr\]{
grid-template-columns: minmax(0,1fr) 2fr;
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(230px\2c 1fr\)\)\]{
grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}
.grid-rows-1{
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2{
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-4{
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5{
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-\[auto_auto\]{
grid-template-rows: auto auto;
}
.flex-row{
flex-direction: row;
}
.flex-col{
flex-direction: column;
}
.\!flex-wrap{
flex-wrap: wrap !important;
}
.flex-wrap{
flex-wrap: wrap;
}
.\!flex-nowrap{
flex-wrap: nowrap !important;
}
.flex-nowrap{
flex-wrap: nowrap;
}
.content-start{
align-content: flex-start;
}
.content-evenly{
align-content: space-evenly;
}
.\!items-start{
align-items: flex-start !important;
}
.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 !important;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.justify-around{
justify-content: space-around;
}
.justify-stretch{
justify-content: stretch;
}
.justify-items-end{
justify-items: end;
}
.gap-0\.5{
gap: 0.125rem;
}
.gap-1{
gap: 0.25rem;
}
.gap-1\.5{
gap: 0.375rem;
}
.gap-10{
gap: 2.5rem;
}
.gap-2{
gap: 0.5rem;
}
.gap-3{
gap: 0.75rem;
}
.gap-4{
gap: 1rem;
}
.gap-5{
gap: 1.25rem;
}
.gap-6{
gap: 1.5rem;
}
.gap-8{
gap: 2rem;
}
.gap-\[10px\]{
gap: 10px;
}
.gap-\[11px\]{
gap: 11px;
}
.gap-\[12px\]{
gap: 12px;
}
.gap-\[13px\]{
gap: 13px;
}
.gap-\[14px\]{
gap: 14px;
}
.gap-\[18px\]{
gap: 18px;
}
.gap-\[20px\]{
gap: 20px;
}
.gap-\[2px\]{
gap: 2px;
}
.gap-\[3px\]{
gap: 3px;
}
.gap-\[4px\]{
gap: 4px;
}
.gap-\[5px\]{
gap: 5px;
}
.gap-\[6px\]{
gap: 6px;
}
.gap-\[7px\]{
gap: 7px;
}
.gap-\[9px\]{
gap: 9px;
}
.gap-kx-2xl{
gap: 24px;
}
.gap-kx-lg{
gap: 12px;
}
.gap-kx-md{
gap: 8px;
}
.gap-kx-sm{
gap: 6px;
}
.gap-kx-xl{
gap: 16px;
}
.gap-kx-xs{
gap: 4px;
}
.gap-px{
gap: 1px;
}
.gap-x-1{
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-x-12{
-moz-column-gap: 3rem;
column-gap: 3rem;
}
.gap-x-2{
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-4{
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-x-7{
-moz-column-gap: 1.75rem;
column-gap: 1.75rem;
}
.gap-x-\[14px\]{
-moz-column-gap: 14px;
column-gap: 14px;
}
.gap-x-\[8px\]{
-moz-column-gap: 8px;
column-gap: 8px;
}
.gap-x-kx-lg{
-moz-column-gap: 12px;
column-gap: 12px;
}
.gap-y-1{
row-gap: 0.25rem;
}
.gap-y-2{
row-gap: 0.5rem;
}
.gap-y-4{
row-gap: 1rem;
}
.gap-y-6{
row-gap: 1.5rem;
}
.gap-y-\[2px\]{
row-gap: 2px;
}
.gap-y-\[3px\]{
row-gap: 3px;
}
.gap-y-kx-md{
row-gap: 8px;
}
.gap-y-kx-xs{
row-gap: 4px;
}
.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-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-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-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-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));
}
.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-gray-200 > :not([hidden]) ~ :not([hidden]){
--tw-divide-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}
.self-start{
align-self: flex-start;
}
.self-center{
align-self: center;
}
.self-stretch{
align-self: stretch;
}
.overflow-auto{
overflow: auto;
}
.overflow-hidden{
overflow: hidden;
}
.overflow-x-auto{
overflow-x: auto;
}
.overflow-y-auto{
overflow-y: auto;
}
.overflow-x-hidden{
overflow-x: hidden;
}
.overflow-y-scroll{
overflow-y: scroll;
}
.truncate{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-ellipsis{
text-overflow: ellipsis;
}
.whitespace-normal{
white-space: normal;
}
.whitespace-nowrap{
white-space: nowrap;
}
.whitespace-pre{
white-space: pre;
}
.whitespace-pre-line{
white-space: pre-line;
}
.whitespace-pre-wrap{
white-space: pre-wrap;
}
.text-nowrap{
text-wrap: nowrap;
}
.break-words{
overflow-wrap: break-word;
}
.break-all{
word-break: break-all;
}
.\!rounded-full{
border-radius: 9999px !important;
}
.rounded{
border-radius: 0.25rem;
}
.rounded-\[11px\]{
border-radius: 11px;
}
.rounded-\[14px\]{
border-radius: 14px;
}
.rounded-\[1px\]{
border-radius: 1px;
}
.rounded-\[20px\]{
border-radius: 20px;
}
.rounded-\[2px\]{
border-radius: 2px;
}
.rounded-\[4px\]{
border-radius: 4px;
}
.rounded-\[4px_12px_12px_12px\]{
border-radius: 4px 12px 12px 12px;
}
.rounded-\[5px\]{
border-radius: 5px;
}
.rounded-\[6px\]{
border-radius: 6px;
}
.rounded-\[7px\]{
border-radius: 7px;
}
.rounded-\[8px\]{
border-radius: 8px;
}
.rounded-\[9px\]{
border-radius: 9px;
}
.rounded-full{
border-radius: 9999px;
}
.rounded-kx-lg{
border-radius: 10px;
}
.rounded-kx-md{
border-radius: 8px;
}
.rounded-kx-pill{
border-radius: 999px;
}
.rounded-kx-sm{
border-radius: 6px;
}
.rounded-kx-xl{
border-radius: 12px;
}
.rounded-lg{
border-radius: 0.5rem;
}
.rounded-md{
border-radius: 0.375rem;
}
.rounded-none{
border-radius: 0px;
}
.rounded-sm{
border-radius: 0.125rem;
}
.rounded-xl{
border-radius: 0.75rem;
}
.rounded-l-lg{
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.rounded-r-lg{
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.rounded-t{
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.border{
border-width: 1px;
}
.border-0{
border-width: 0px;
}
.border-2{
border-width: 2px;
}
.border-\[1px\]{
border-width: 1px;
}
.border-b{
border-bottom-width: 1px;
}
.border-b-2{
border-bottom-width: 2px;
}
.border-l{
border-left-width: 1px;
}
.border-l-2{
border-left-width: 2px;
}
.border-l-4{
border-left-width: 4px;
}
.border-l-\[3px\]{
border-left-width: 3px;
}
.border-r{
border-right-width: 1px;
}
.border-r-\[1px\]{
border-right-width: 1px;
}
.border-t{
border-top-width: 1px;
}
.border-t-2{
border-top-width: 2px;
}
.border-solid{
border-style: solid;
}
.border-dashed{
border-style: dashed;
}
.border-dotted{
border-style: dotted;
}
.border-none{
border-style: none;
}
.\!border-kx-tone-warning-border{
border-color: var(--kx-tone-warning-border) !important;
}
.border-amber-300{
--tw-border-opacity: 1;
border-color: rgb(252 211 77 / var(--tw-border-opacity));
}
.border-amber-500\/30{
border-color: rgb(245 158 11 / 0.3);
}
.border-blue-200{
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.border-blue-300{
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.border-blue-500{
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.border-blue-500\/50{
border-color: rgb(59 130 246 / 0.5);
}
.border-blue-500\/70{
border-color: rgb(59 130 246 / 0.7);
}
.border-cyan-200{
--tw-border-opacity: 1;
border-color: rgb(165 243 252 / var(--tw-border-opacity));
}
.border-darkTheme-border{
--tw-border-opacity: 1;
border-color: rgb(58 58 58 / var(--tw-border-opacity));
}
.border-densifyBlueTints-400{
--tw-border-opacity: 1;
border-color: rgb(128 151 182 / var(--tw-border-opacity));
}
.border-emerald-400{
--tw-border-opacity: 1;
border-color: rgb(52 211 153 / var(--tw-border-opacity));
}
.border-gray-100{
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.border-gray-200{
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-300{
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-700{
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.border-green-400{
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / var(--tw-border-opacity));
}
.border-green-600{
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.border-indigo-200{
--tw-border-opacity: 1;
border-color: rgb(199 210 254 / var(--tw-border-opacity));
}
.border-kx-blue{
border-color: var(--kx-blue);
}
.border-kx-border{
border-color: var(--kx-border);
}
.border-kx-border-active{
border-color: var(--kx-border-active);
}
.border-kx-border-dashed{
border-color: var(--kx-border-dashed);
}
.border-kx-border-dialog{
border-color: var(--kx-border-dialog);
}
.border-kx-border-empty{
border-color: var(--kx-border-empty);
}
.border-kx-border-menu{
border-color: var(--kx-border-menu);
}
.border-kx-border-strong{
border-color: var(--kx-border-strong);
}
.border-kx-border-tooltip{
border-color: var(--kx-border-tooltip);
}
.border-kx-cell{
border-color: var(--kx-cell);
}
.border-kx-rule-inset{
border-color: var(--kx-rule-inset);
}
.border-kx-tone-ai-border{
border-color: var(--kx-tone-ai-border);
}
.border-kx-tone-danger-border{
border-color: var(--kx-tone-danger-border);
}
.border-kx-tone-info-border{
border-color: var(--kx-tone-info-border);
}
.border-kx-tone-neutral-border{
border-color: var(--kx-tone-neutral-border);
}
.border-kx-tone-success-border{
border-color: var(--kx-tone-success-border);
}
.border-kx-tone-warning-border{
border-color: var(--kx-tone-warning-border);
}
.border-orange-400\/50{
border-color: rgb(251 146 60 / 0.5);
}
.border-red-400{
--tw-border-opacity: 1;
border-color: rgb(248 113 113 / var(--tw-border-opacity));
}
.border-red-500{
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.border-red-500\/30{
border-color: rgb(239 68 68 / 0.3);
}
.border-teal-200{
--tw-border-opacity: 1;
border-color: rgb(153 246 228 / var(--tw-border-opacity));
}
.border-transparent{
border-color: transparent;
}
.border-yellow-400{
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.border-l-kx-blue{
border-left-color: var(--kx-blue);
}
.border-l-kx-rail{
border-left-color: var(--kx-rail);
}
.border-t-kx-blue{
border-top-color: var(--kx-blue);
}
.border-opacity-10{
--tw-border-opacity: 0.1;
}
.bg-amber-100{
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
.bg-amber-50{
--tw-bg-opacity: 1;
background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}
.bg-amber-500\/5{
background-color: rgb(245 158 11 / 0.05);
}
.bg-black\/10{
background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/30{
background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/60{
background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100{
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-blue-300\/10{
background-color: rgb(147 197 253 / 0.1);
}
.bg-blue-400{
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
.bg-blue-50{
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.bg-blue-50\/50{
background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-50\/60{
background-color: rgb(239 246 255 / 0.6);
}
.bg-blue-500{
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-blue-500\/10{
background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-600{
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-cyan-100{
--tw-bg-opacity: 1;
background-color: rgb(207 250 254 / var(--tw-bg-opacity));
}
.bg-darkTheme-bg-grid{
--tw-bg-opacity: 1;
background-color: rgb(30 30 30 / var(--tw-bg-opacity));
}
.bg-darkTheme-bg-surface{
--tw-bg-opacity: 1;
background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}
.bg-densifyBlueTints-100{
--tw-bg-opacity: 1;
background-color: rgb(204 213 226 / var(--tw-bg-opacity));
}
.bg-densifyBlueTints-600{
--tw-bg-opacity: 1;
background-color: rgb(77 109 152 / var(--tw-bg-opacity));
}
.bg-emerald-100{
--tw-bg-opacity: 1;
background-color: rgb(209 250 229 / var(--tw-bg-opacity));
}
.bg-gray-100{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-100\/10{
background-color: rgb(243 244 246 / 0.1);
}
.bg-gray-100\/50{
background-color: rgb(243 244 246 / 0.5);
}
.bg-gray-200{
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-200\/70{
background-color: rgb(229 231 235 / 0.7);
}
.bg-gray-300{
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.bg-gray-400{
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.bg-gray-50{
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-50\/60{
background-color: rgb(249 250 251 / 0.6);
}
.bg-gray-600{
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.bg-gray-700{
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-green-200{
--tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}
.bg-green-50{
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}
.bg-green-500{
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-green-600{
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
.bg-indigo-100{
--tw-bg-opacity: 1;
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
.bg-kx-agent{
background-color: var(--kx-agent);
}
.bg-kx-blue{
background-color: var(--kx-blue);
}
.bg-kx-border{
background-color: var(--kx-border);
}
.bg-kx-border-strong{
background-color: var(--kx-border-strong);
}
.bg-kx-canvas{
background-color: var(--kx-canvas);
}
.bg-kx-card{
background-color: var(--kx-card);
}
.bg-kx-detail-backdrop{
background-color: var(--kx-detail-backdrop);
}
.bg-kx-dialog{
background-color: var(--kx-dialog);
}
.bg-kx-dim{
background-color: var(--kx-dim);
}
.bg-kx-elevated{
background-color: var(--kx-elevated);
}
.bg-kx-faint{
background-color: var(--kx-faint);
}
.bg-kx-hover{
background-color: var(--kx-hover);
}
.bg-kx-hover-subtle{
background-color: var(--kx-hover-subtle);
}
.bg-kx-menu{
background-color: var(--kx-menu);
}
.bg-kx-on-accent{
background-color: var(--kx-on-accent);
}
.bg-kx-panel{
background-color: var(--kx-panel);
}
.bg-kx-red{
background-color: var(--kx-red);
}
.bg-kx-scrim{
background-color: var(--kx-scrim);
}
.bg-kx-stripe{
background-color: var(--kx-stripe);
}
.bg-kx-tone-ai-bg{
background-color: var(--kx-tone-ai-bg);
}
.bg-kx-tone-danger-bg{
background-color: var(--kx-tone-danger-bg);
}
.bg-kx-tone-danger-fg{
background-color: var(--kx-tone-danger-fg);
}
.bg-kx-tone-info-bg{
background-color: var(--kx-tone-info-bg);
}
.bg-kx-tone-neutral-bg{
background-color: var(--kx-tone-neutral-bg);
}
.bg-kx-tone-success-bg{
background-color: var(--kx-tone-success-bg);
}
.bg-kx-tone-success-fg{
background-color: var(--kx-tone-success-fg);
}
.bg-kx-tone-warning-bg{
background-color: var(--kx-tone-warning-bg);
}
.bg-kx-tooltip{
background-color: var(--kx-tooltip);
}
.bg-kx-well{
background-color: var(--kx-well);
}
.bg-kx-well-subtle{
background-color: var(--kx-well-subtle);
}
.bg-neutral-700\/70{
background-color: rgb(64 64 64 / 0.7);
}
.bg-orange-300\/10{
background-color: rgb(253 186 116 / 0.1);
}
.bg-pink-500{
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
}
.bg-red-100{
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-red-200{
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.bg-red-50{
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-red-500{
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-red-500\/5{
background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600{
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.bg-sky-100{
--tw-bg-opacity: 1;
background-color: rgb(224 242 254 / var(--tw-bg-opacity));
}
.bg-teal-100{
--tw-bg-opacity: 1;
background-color: rgb(204 251 241 / var(--tw-bg-opacity));
}
.bg-transparent{
background-color: transparent;
}
.bg-white{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-yellow-200{
--tw-bg-opacity: 1;
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}
.bg-yellow-400{
--tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}
.bg-yellow-50{
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-yellow-500{
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.bg-opacity-100{
--tw-bg-opacity: 1;
}
.bg-gradient-to-b{
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br{
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-kx-blue{
--tw-gradient-from: var(--kx-blue) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-kx-hover{
--tw-gradient-from: var(--kx-hover) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-kx-purple{
--tw-gradient-to: var(--kx-purple) var(--tw-gradient-to-position);
}
.to-transparent{
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-blue-400{
fill: #60a5fa;
}
.fill-current{
fill: currentColor;
}
.fill-densifyBlueTints-400{
fill: #8097b6;
}
.fill-gray-500{
fill: #6b7280;
}
.fill-red-400{
fill: #f87171;
}
.fill-white{
fill: #fff;
}
.fill-yellow-400{
fill: #facc15;
}
.fill-yellow-600{
fill: #ca8a04;
}
.stroke-densifyBlueTints-400{
stroke: #8097b6;
}
.stroke-gray-300{
stroke: #d1d5db;
}
.\!p-0{
padding: 0px !important;
}
.\!p-0\.5{
padding: 0.125rem !important;
}
.\!p-1{
padding: 0.25rem !important;
}
.p-0{
padding: 0px;
}
.p-1{
padding: 0.25rem;
}
.p-10{
padding: 2.5rem;
}
.p-2{
padding: 0.5rem;
}
.p-3{
padding: 0.75rem;
}
.p-4{
padding: 1rem;
}
.p-5{
padding: 1.25rem;
}
.p-6{
padding: 1.5rem;
}
.p-7{
padding: 1.75rem;
}
.p-8{
padding: 2rem;
}
.p-9{
padding: 2.25rem;
}
.p-\[13px\]{
padding: 13px;
}
.p-\[2px\]{
padding: 2px;
}
.p-\[32px\]{
padding: 32px;
}
.p-\[7px\]{
padding: 7px;
}
.p-\[9px\]{
padding: 9px;
}
.p-kx-2xl{
padding: 24px;
}
.p-kx-gutter{
padding: 26px;
}
.p-kx-lg{
padding: 12px;
}
.p-kx-sm{
padding: 6px;
}
.p-kx-xl{
padding: 16px;
}
.p-px{
padding: 1px;
}
.\!px-0{
padding-left: 0px !important;
padding-right: 0px !important;
}
.px-0{
padding-left: 0px;
padding-right: 0px;
}
.px-1{
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-10{
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-2{
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5{
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3{
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.px-5{
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8{
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[10px\]{
padding-left: 10px;
padding-right: 10px;
}
.px-\[11px\]{
padding-left: 11px;
padding-right: 11px;
}
.px-\[12px\]{
padding-left: 12px;
padding-right: 12px;
}
.px-\[13px\]{
padding-left: 13px;
padding-right: 13px;
}
.px-\[14px\]{
padding-left: 14px;
padding-right: 14px;
}
.px-\[15px\]{
padding-left: 15px;
padding-right: 15px;
}
.px-\[18px\]{
padding-left: 18px;
padding-right: 18px;
}
.px-\[20px\]{
padding-left: 20px;
padding-right: 20px;
}
.px-\[22px\]{
padding-left: 22px;
padding-right: 22px;
}
.px-\[4px\]{
padding-left: 4px;
padding-right: 4px;
}
.px-\[6px\]{
padding-left: 6px;
padding-right: 6px;
}
.px-\[7px\]{
padding-left: 7px;
padding-right: 7px;
}
.px-\[8px\]{
padding-left: 8px;
padding-right: 8px;
}
.px-\[9px\]{
padding-left: 9px;
padding-right: 9px;
}
.px-kx-gutter{
padding-left: 26px;
padding-right: 26px;
}
.px-kx-lg{
padding-left: 12px;
padding-right: 12px;
}
.px-kx-md{
padding-left: 8px;
padding-right: 8px;
}
.px-kx-sm{
padding-left: 6px;
padding-right: 6px;
}
.px-kx-xl{
padding-left: 16px;
padding-right: 16px;
}
.px-kx-xs{
padding-left: 4px;
padding-right: 4px;
}
.px-px{
padding-left: 1px;
padding-right: 1px;
}
.py-0\.5{
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5{
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5{
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5{
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6{
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[10px\]{
padding-top: 10px;
padding-bottom: 10px;
}
.py-\[11px\]{
padding-top: 11px;
padding-bottom: 11px;
}
.py-\[13px\]{
padding-top: 13px;
padding-bottom: 13px;
}
.py-\[14px\]{
padding-top: 14px;
padding-bottom: 14px;
}
.py-\[15px\]{
padding-top: 15px;
padding-bottom: 15px;
}
.py-\[18px\]{
padding-top: 18px;
padding-bottom: 18px;
}
.py-\[1px\]{
padding-top: 1px;
padding-bottom: 1px;
}
.py-\[26px\]{
padding-top: 26px;
padding-bottom: 26px;
}
.py-\[2px\]{
padding-top: 2px;
padding-bottom: 2px;
}
.py-\[3px\]{
padding-top: 3px;
padding-bottom: 3px;
}
.py-\[46px\]{
padding-top: 46px;
padding-bottom: 46px;
}
.py-\[48px\]{
padding-top: 48px;
padding-bottom: 48px;
}
.py-\[4px\]{
padding-top: 4px;
padding-bottom: 4px;
}
.py-\[5px\]{
padding-top: 5px;
padding-bottom: 5px;
}
.py-\[6px\]{
padding-top: 6px;
padding-bottom: 6px;
}
.py-\[7px\]{
padding-top: 7px;
padding-bottom: 7px;
}
.py-\[9px\]{
padding-top: 9px;
padding-bottom: 9px;
}
.py-kx-lg{
padding-top: 12px;
padding-bottom: 12px;
}
.py-kx-md{
padding-top: 8px;
padding-bottom: 8px;
}
.py-kx-sm{
padding-top: 6px;
padding-bottom: 6px;
}
.py-kx-xl{
padding-top: 16px;
padding-bottom: 16px;
}
.py-kx-xs{
padding-top: 4px;
padding-bottom: 4px;
}
.py-px{
padding-top: 1px;
padding-bottom: 1px;
}
.\!pb-4{
padding-bottom: 1rem !important;
}
.\!pb-6{
padding-bottom: 1.5rem !important;
}
.\!pt-2{
padding-top: 0.5rem !important;
}
.\!pt-4{
padding-top: 1rem !important;
}
.pb-1{
padding-bottom: 0.25rem;
}
.pb-12{
padding-bottom: 3rem;
}
.pb-2{
padding-bottom: 0.5rem;
}
.pb-20{
padding-bottom: 5rem;
}
.pb-3{
padding-bottom: 0.75rem;
}
.pb-4{
padding-bottom: 1rem;
}
.pb-6{
padding-bottom: 1.5rem;
}
.pb-8{
padding-bottom: 2rem;
}
.pb-\[10px\]{
padding-bottom: 10px;
}
.pb-\[13px\]{
padding-bottom: 13px;
}
.pb-\[14px\]{
padding-bottom: 14px;
}
.pb-\[180px\]{
padding-bottom: 180px;
}
.pb-\[18px\]{
padding-bottom: 18px;
}
.pb-\[5px\]{
padding-bottom: 5px;
}
.pb-\[9px\]{
padding-bottom: 9px;
}
.pb-kx-gutter{
padding-bottom: 26px;
}
.pb-kx-lg{
padding-bottom: 12px;
}
.pb-kx-md{
padding-bottom: 8px;
}
.pb-kx-sm{
padding-bottom: 6px;
}
.pb-kx-xs{
padding-bottom: 4px;
}
.pl-0{
padding-left: 0px;
}
.pl-1{
padding-left: 0.25rem;
}
.pl-16{
padding-left: 4rem;
}
.pl-2{
padding-left: 0.5rem;
}
.pl-4{
padding-left: 1rem;
}
.pl-6{
padding-left: 1.5rem;
}
.pl-8{
padding-left: 2rem;
}
.pl-\[13px\]{
padding-left: 13px;
}
.pl-\[14px\]{
padding-left: 14px;
}
.pl-\[18px\]{
padding-left: 18px;
}
.pl-\[24px\]{
padding-left: 24px;
}
.pl-\[3px\]{
padding-left: 3px;
}
.pl-\[calc\(12px\+1ch\+8px\)\]{
padding-left: calc(12px + 1ch + 8px);
}
.pl-kx-lg{
padding-left: 12px;
}
.pr-0{
padding-right: 0px;
}
.pr-1{
padding-right: 0.25rem;
}
.pr-2{
padding-right: 0.5rem;
}
.pr-4{
padding-right: 1rem;
}
.pr-8{
padding-right: 2rem;
}
.pr-\[10px\]{
padding-right: 10px;
}
.pr-\[12px\]{
padding-right: 12px;
}
.pr-\[32px\]{
padding-right: 32px;
}
.pr-\[42px\]{
padding-right: 42px;
}
.pr-\[52px\]{
padding-right: 52px;
}
.pr-\[7px\]{
padding-right: 7px;
}
.pr-\[8px\]{
padding-right: 8px;
}
.pr-kx-lg{
padding-right: 12px;
}
.pr-kx-sm{
padding-right: 6px;
}
.pr-kx-xl{
padding-right: 16px;
}
.pt-0\.5{
padding-top: 0.125rem;
}
.pt-1{
padding-top: 0.25rem;
}
.pt-2{
padding-top: 0.5rem;
}
.pt-3{
padding-top: 0.75rem;
}
.pt-4{
padding-top: 1rem;
}
.pt-5{
padding-top: 1.25rem;
}
.pt-6{
padding-top: 1.5rem;
}
.pt-8{
padding-top: 2rem;
}
.pt-\[13px\]{
padding-top: 13px;
}
.pt-\[18px\]{
padding-top: 18px;
}
.pt-\[3px\]{
padding-top: 3px;
}
.pt-\[6px\]{
padding-top: 6px;
}
.pt-\[9px\]{
padding-top: 9px;
}
.pt-kx-lg{
padding-top: 12px;
}
.pt-kx-md{
padding-top: 8px;
}
.pt-kx-sm{
padding-top: 6px;
}
.pt-kx-xl{
padding-top: 16px;
}
.pt-kx-xs{
padding-top: 4px;
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.text-start{
text-align: start;
}
.align-baseline{
vertical-align: baseline;
}
.align-middle{
vertical-align: middle;
}
.align-bottom{
vertical-align: bottom;
}
.align-\[-2px\]{
vertical-align: -2px;
}
.font-\[inherit\]{
font-family: inherit;
}
.font-mono{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.\!text-4xl{
font-size: 2.25rem !important;
line-height: 2.5rem !important;
}
.\!text-lg{
font-size: 1.125rem !important;
line-height: 1.75rem !important;
}
.\!text-xl{
font-size: 1.25rem !important;
line-height: 1.75rem !important;
}
.text-2xl{
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl{
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl{
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-\[0\.6875rem\]{
font-size: 0.6875rem;
}
.text-\[0\.9375rem\]{
font-size: 0.9375rem;
}
.text-\[10px\]{
font-size: 10px;
}
.text-\[11px\]{
font-size: 11px;
}
.text-\[12px\]{
font-size: 12px;
}
.text-\[13\.5px\]{
font-size: 13.5px;
}
.text-\[13px\]{
font-size: 13px;
}
.text-\[length\:inherit\]{
font-size: inherit;
}
.text-base{
font-size: 1rem;
line-height: 1.5rem;
}
.text-kx-body{
font-size: 12.5px;
line-height: 1.5;
letter-spacing: 0;
font-weight: 400;
}
.text-kx-body-lg{
font-size: 13px;
line-height: 1.5;
letter-spacing: 0;
font-weight: 400;
}
.text-kx-body-sm{
font-size: 11.5px;
line-height: 1.45;
letter-spacing: 0;
font-weight: 400;
}
.text-kx-caption{
font-size: 10.5px;
line-height: 1.3;
letter-spacing: 0;
font-weight: 700;
}
.text-kx-code{
font-size: 12.5px;
line-height: 1.65;
letter-spacing: 0;
font-weight: 400;
}
.text-kx-display{
font-size: 23px;
line-height: 1.15;
letter-spacing: -0.3px;
font-weight: 800;
}
.text-kx-heading{
font-size: 15px;
line-height: 1.25;
letter-spacing: 0;
font-weight: 600;
}
.text-kx-hero{
font-size: 32px;
line-height: 1;
letter-spacing: -0.5px;
font-weight: 700;
}
.text-kx-label{
font-size: 9px;
line-height: 1.2;
letter-spacing: 1px;
font-weight: 700;
}
.text-kx-meta{
font-size: 11px;
line-height: 1.4;
letter-spacing: 0;
font-weight: 400;
}
.text-kx-metric{
font-size: 27px;
line-height: 1;
letter-spacing: -0.5px;
font-weight: 700;
}
.text-kx-metric-lg{
font-size: 40px;
line-height: 1;
letter-spacing: -0.6px;
font-weight: 700;
}
.text-kx-metric-sm{
font-size: 21px;
line-height: 1.1;
letter-spacing: -0.4px;
font-weight: 700;
}
.text-kx-micro{
font-size: 8.5px;
line-height: 1.35;
letter-spacing: 0.9px;
font-weight: 700;
}
.text-kx-overline{
font-size: 11px;
line-height: 1.3;
letter-spacing: 0.3px;
font-weight: 600;
}
.text-kx-page-title{
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.4px;
font-weight: 800;
}
.text-kx-subtitle{
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
font-weight: 600;
}
.text-kx-title{
font-size: 16px;
line-height: 1.35;
letter-spacing: -0.2px;
font-weight: 600;
}
.text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs{
font-size: 0.75rem;
line-height: 1rem;
}
.\!font-medium{
font-weight: 500 !important;
}
.\!font-semibold{
font-weight: 600 !important;
}
.font-bold{
font-weight: 700;
}
.font-light{
font-weight: 300;
}
.font-medium{
font-weight: 500;
}
.font-normal{
font-weight: 400;
}
.font-semibold{
font-weight: 600;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
.normal-case{
text-transform: none;
}
.italic{
font-style: italic;
}
.not-italic{
font-style: normal;
}
.ordinal{
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums{
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-10{
line-height: 2.5rem;
}
.leading-6{
line-height: 1.5rem;
}
.leading-7{
line-height: 1.75rem;
}
.leading-\[1\.2\]{
line-height: 1.2;
}
.leading-\[1\.45\]{
line-height: 1.45;
}
.leading-\[1\.4\]{
line-height: 1.4;
}
.leading-\[1\.55\]{
line-height: 1.55;
}
.leading-\[1\.5\]{
line-height: 1.5;
}
.leading-\[1\.6\]{
line-height: 1.6;
}
.leading-\[100\%\]{
line-height: 100%;
}
.leading-none{
line-height: 1;
}
.leading-relaxed{
line-height: 1.625;
}
.leading-tight{
line-height: 1.25;
}
.tracking-\[-0\.3px\]{
letter-spacing: -0.3px;
}
.tracking-\[0\.03333em\]{
letter-spacing: 0.03333em;
}
.tracking-\[0\.3px\]{
letter-spacing: 0.3px;
}
.tracking-\[0\.5px\]{
letter-spacing: 0.5px;
}
.tracking-normal{
letter-spacing: 0em;
}
.tracking-wide{
letter-spacing: 0.025em;
}
.tracking-wider{
letter-spacing: 0.05em;
}
.\!text-kx-text{
color: var(--kx-text) !important;
}
.text-\[\#d32f2f\]{
--tw-text-opacity: 1;
color: rgb(211 47 47 / var(--tw-text-opacity));
}
.text-amber-400{
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity));
}
.text-amber-500{
--tw-text-opacity: 1;
color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-amber-700{
--tw-text-opacity: 1;
color: rgb(180 83 9 / var(--tw-text-opacity));
}
.text-amber-900{
--tw-text-opacity: 1;
color: rgb(120 53 15 / var(--tw-text-opacity));
}
.text-black{
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-blue-400{
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.text-blue-500{
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-blue-600{
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-700{
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.text-blue-800{
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-cyan-800{
--tw-text-opacity: 1;
color: rgb(21 94 117 / var(--tw-text-opacity));
}
.text-darkTheme-text-muted{
--tw-text-opacity: 1;
color: rgb(107 107 107 / var(--tw-text-opacity));
}
.text-densifyBlueTints-400{
--tw-text-opacity: 1;
color: rgb(128 151 182 / var(--tw-text-opacity));
}
.text-densifyBlueTints-700{
--tw-text-opacity: 1;
color: rgb(51 89 137 / var(--tw-text-opacity));
}
.text-densifyBlueTints-800{
--tw-text-opacity: 1;
color: rgb(26 68 123 / var(--tw-text-opacity));
}
.text-densifyBlueTints-900{
--tw-text-opacity: 1;
color: rgb(0 47 108 / var(--tw-text-opacity));
}
.text-emerald-400{
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity));
}
.text-emerald-500{
--tw-text-opacity: 1;
color: rgb(16 185 129 / var(--tw-text-opacity));
}
.text-emerald-600{
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity));
}
.text-emerald-900{
--tw-text-opacity: 1;
color: rgb(6 78 59 / var(--tw-text-opacity));
}
.text-gray-400{
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500{
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600{
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-700{
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800{
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-green-400{
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-green-500{
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-600{
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700{
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-indigo-700{
--tw-text-opacity: 1;
color: rgb(67 56 202 / var(--tw-text-opacity));
}
.text-inherit{
color: inherit;
}
.text-kx-amber{
color: var(--kx-amber);
}
.text-kx-blue{
color: var(--kx-blue);
}
.text-kx-blue-soft{
color: var(--kx-blue-soft);
}
.text-kx-bright{
color: var(--kx-bright);
}
.text-kx-dim{
color: var(--kx-dim);
}
.text-kx-faint{
color: var(--kx-faint);
}
.text-kx-green{
color: var(--kx-green);
}
.text-kx-green-soft{
color: var(--kx-green-soft);
}
.text-kx-muted{
color: var(--kx-muted);
}
.text-kx-on-accent{
color: var(--kx-on-accent);
}
.text-kx-orange{
color: var(--kx-orange);
}
.text-kx-purple{
color: var(--kx-purple);
}
.text-kx-purple-soft{
color: var(--kx-purple-soft);
}
.text-kx-red{
color: var(--kx-red);
}
.text-kx-red-soft{
color: var(--kx-red-soft);
}
.text-kx-role-allocatable-text{
color: var(--kx-role-allocatable-text);
}
.text-kx-role-caution-text{
color: var(--kx-role-caution-text);
}
.text-kx-role-cost-text{
color: var(--kx-role-cost-text);
}
.text-kx-role-current-text{
color: var(--kx-role-current-text);
}
.text-kx-role-gpu-text{
color: var(--kx-role-gpu-text);
}
.text-kx-role-neutral-text{
color: var(--kx-role-neutral-text);
}
.text-kx-role-optimal-text{
color: var(--kx-role-optimal-text);
}
.text-kx-role-requested-text{
color: var(--kx-role-requested-text);
}
.text-kx-role-risk-soft-text{
color: var(--kx-role-risk-soft-text);
}
.text-kx-role-risk-text{
color: var(--kx-role-risk-text);
}
.text-kx-role-savings-text{
color: var(--kx-role-savings-text);
}
.text-kx-role-storage-text{
color: var(--kx-role-storage-text);
}
.text-kx-role-utilized-text{
color: var(--kx-role-utilized-text);
}
.text-kx-role-waste-text{
color: var(--kx-role-waste-text);
}
.text-kx-role-watch-text{
color: var(--kx-role-watch-text);
}
.text-kx-secondary{
color: var(--kx-secondary);
}
.text-kx-teal{
color: var(--kx-teal);
}
.text-kx-text{
color: var(--kx-text);
}
.text-kx-tone-ai-fg{
color: var(--kx-tone-ai-fg);
}
.text-kx-tone-danger-fg{
color: var(--kx-tone-danger-fg);
}
.text-kx-tone-info-fg{
color: var(--kx-tone-info-fg);
}
.text-kx-tone-neutral-fg{
color: var(--kx-tone-neutral-fg);
}
.text-kx-tone-success-fg{
color: var(--kx-tone-success-fg);
}
.text-kx-tone-warning-fg{
color: var(--kx-tone-warning-fg);
}
.text-orange-400{
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity));
}
.text-red-400{
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.text-red-500{
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-600{
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}
.text-red-700{
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity));
}
.text-red-800{
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
}
.text-sky-900{
--tw-text-opacity: 1;
color: rgb(12 74 110 / var(--tw-text-opacity));
}
.text-sky-950{
--tw-text-opacity: 1;
color: rgb(8 47 73 / var(--tw-text-opacity));
}
.text-teal-800{
--tw-text-opacity: 1;
color: rgb(17 94 89 / var(--tw-text-opacity));
}
.text-transparent{
color: transparent;
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-yellow-400{
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.text-yellow-500{
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity));
}
.text-yellow-700{
--tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity));
}
.text-yellow-800{
--tw-text-opacity: 1;
color: rgb(133 77 14 / var(--tw-text-opacity));
}
.underline{
text-decoration-line: underline;
}
.overline{
text-decoration-line: overline;
}
.line-through{
text-decoration-line: line-through;
}
.no-underline{
text-decoration-line: none;
}
.decoration-dotted{
text-decoration-style: dotted;
}
.decoration-1{
text-decoration-thickness: 1px;
}
.underline-offset-\[3px\]{
text-underline-offset: 3px;
}
.caret-kx-text{
caret-color: var(--kx-text);
}
.opacity-0{
opacity: 0;
}
.opacity-100{
opacity: 1;
}
.opacity-30{
opacity: 0.3;
}
.opacity-35{
opacity: 0.35;
}
.opacity-40{
opacity: 0.4;
}
.opacity-50{
opacity: 0.5;
}
.opacity-60{
opacity: 0.6;
}
.opacity-70{
opacity: 0.7;
}
.shadow{
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
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 rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-kx-lg{
--tw-shadow: var(--kx-shadow-lg);
--tw-shadow-colored: var(--kx-shadow-lg);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-kx-md{
--tw-shadow: var(--kx-shadow-md);
--tw-shadow-colored: var(--kx-shadow-md);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-kx-sm{
--tw-shadow: var(--kx-shadow-sm);
--tw-shadow-colored: var(--kx-shadow-sm);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-kx-xl{
--tw-shadow: var(--kx-shadow-xl);
--tw-shadow-colored: var(--kx-shadow-xl);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
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 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
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 rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
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;
}
.outline{
outline-style: solid;
}
.outline-2{
outline-width: 2px;
}
.outline-offset-2{
outline-offset: 2px;
}
.outline-kx-blue{
outline-color: var(--kx-blue);
}
.ring{
--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);
}
.ring-1{
--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(1px + 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);
}
.ring-2{
--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(2px + 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);
}
.ring-inset{
--tw-ring-inset: inset;
}
.ring-gray-300{
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.ring-gray-600\/20{
--tw-ring-color: rgb(75 85 99 / 0.2);
}
.ring-green-600\/20{
--tw-ring-color: rgb(22 163 74 / 0.2);
}
.ring-kx-blue{
--tw-ring-color: var(--kx-blue);
}
.ring-kx-border-strong{
--tw-ring-color: var(--kx-border-strong);
}
.ring-kx-red{
--tw-ring-color: var(--kx-red);
}
.ring-red-600\/10{
--tw-ring-color: rgb(220 38 38 / 0.1);
}
.ring-red-600\/20{
--tw-ring-color: rgb(220 38 38 / 0.2);
}
.ring-yellow-600\/10{
--tw-ring-color: rgb(202 138 4 / 0.1);
}
.ring-yellow-600\/20{
--tw-ring-color: rgb(202 138 4 / 0.2);
}
.ring-opacity-35{
--tw-ring-opacity: 0.35;
}
.blur{
--tw-blur: blur(8px);
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);
}
.grayscale{
--tw-grayscale: grayscale(100%);
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);
}
.\!filter{
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) !important;
}
.filter{
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);
}
.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-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;
}
.transition-colors{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity{
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform{
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100{
transition-duration: 100ms;
}
.duration-1000{
transition-duration: 1000ms;
}
.duration-200{
transition-duration: 200ms;
}
.duration-300{
transition-duration: 300ms;
}
.duration-500{
transition-duration: 500ms;
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\[color\:inherit\]{
color: inherit;
}
.\[scrollbar-gutter\:auto\]{
scrollbar-gutter: auto;
}
.\[writing-mode\:vertical-rl\]{
writing-mode: vertical-rl;
}
/* The --dark-* and --kx-* properties come from the import above, which is
generated from src/constants/darkThemeColors.js. */
:root {
--body-font-family: Roboto, Arial, Verdana, Helvetica, sans-serif;
}
body {
font-family: var(--body-font-family);
}
.dark body,
body.dark,
.dark {
background-color: var(--dark-bg-default);
color: var(--dark-text-primary);
}
@media (min-width: 3840px) {
html {
font-size: 28px;
}
}
@media (max-width: 3839px) {
html {
font-size: 24px;
}
}
@media (max-width: 3360px) {
html {
font-size: 21px;
}
}
@media (max-width: 2880px) {
html {
font-size: 18px;
}
}
@media (max-width: 2560px) {
html {
font-size: 15px;
}
}
@media (max-width: 1920px) {
html {
font-size: 12px;
}
}
@media (max-width: 1536px) {
html {
font-size: 11px;
}
}
@media (max-width: 1280px) {
html {
font-size: 10px;
}
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
border: 2px solid transparent;
background-clip: content-box;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border: 2px solid transparent;
background-clip: content-box;
cursor: pointer;
}
.placeholder\:font-normal::-moz-placeholder{
font-weight: 400;
}
.placeholder\:font-normal::placeholder{
font-weight: 400;
}
.placeholder\:text-kx-dim::-moz-placeholder{
color: var(--kx-dim);
}
.placeholder\:text-kx-dim::placeholder{
color: var(--kx-dim);
}
.before\:pointer-events-none::before{
content: var(--tw-content);
pointer-events: none;
}
.before\:absolute::before{
content: var(--tw-content);
position: absolute;
}
.before\:-bottom-px::before{
content: var(--tw-content);
bottom: -1px;
}
.before\:-left-px::before{
content: var(--tw-content);
left: -1px;
}
.before\:-right-px::before{
content: var(--tw-content);
right: -1px;
}
.before\:-top-px::before{
content: var(--tw-content);
top: -1px;
}
.before\:rounded-md::before{
content: var(--tw-content);
border-radius: 0.375rem;
}
.before\:border-2::before{
content: var(--tw-content);
border-width: 2px;
}
.before\:border-blue-500::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.before\:border-emerald-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(52 211 153 / var(--tw-border-opacity));
}
.before\:border-red-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(248 113 113 / var(--tw-border-opacity));
}
.before\:border-yellow-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.before\:content-\[\'\'\]::before{
--tw-content: '';
content: var(--tw-content);
}
.first\:border-t-0:first-child{
border-top-width: 0px;
}
.last\:mb-0:last-child{
margin-bottom: 0px;
}
.last\:mr-0:last-child{
margin-right: 0px;
}
.last\:border-b-0:last-child{
border-bottom-width: 0px;
}
.last\:border-r-0:last-child{
border-right-width: 0px;
}
.hover\:w-1\.5:hover{
width: 0.375rem;
}
.hover\:scale-110:hover{
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), 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));
}
.hover\:border-solid:hover{
border-style: solid;
}
.hover\:border-blue-400:hover{
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.hover\:border-gray-500:hover{
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.hover\:border-kx-blue:hover{
border-color: var(--kx-blue);
}
.hover\:border-kx-blue-hover:hover{
border-color: var(--kx-blue-hover);
}
.hover\:border-kx-border-active:hover{
border-color: var(--kx-border-active);
}
.hover\:border-kx-border-hover:hover{
border-color: var(--kx-border-hover);
}
.hover\:border-kx-border-strong:hover{
border-color: var(--kx-border-strong);
}
.hover\:border-kx-purple:hover{
border-color: var(--kx-purple);
}
.hover\:border-kx-red:hover{
border-color: var(--kx-red);
}
.hover\:bg-blue-500:hover{
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.hover\:bg-blue-700:hover{
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-densifyBlueTints-400:hover{
--tw-bg-opacity: 1;
background-color: rgb(128 151 182 / var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-gray-50:hover{
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.hover\:bg-gray-500:hover{
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.hover\:bg-kx-blue-hover:hover{
background-color: var(--kx-blue-hover);
}
.hover\:bg-kx-hover:hover{
background-color: var(--kx-hover);
}
.hover\:bg-kx-hover-subtle:hover{
background-color: var(--kx-hover-subtle);
}
.hover\:bg-kx-tone-info-bg:hover{
background-color: var(--kx-tone-info-bg);
}
.hover\:bg-neutral-500\/80:hover{
background-color: rgb(115 115 115 / 0.8);
}
.hover\:bg-pink-700:hover{
--tw-bg-opacity: 1;
background-color: rgb(190 24 93 / var(--tw-bg-opacity));
}
.hover\:text-blue-300:hover{
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.hover\:text-gray-700:hover{
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.hover\:text-gray-900:hover{
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:text-kx-blue:hover{
color: var(--kx-blue);
}
.hover\:text-kx-lens-cpu:hover{
color: var(--kx-lens-cpu);
}
.hover\:text-kx-secondary:hover{
color: var(--kx-secondary);
}
.hover\:text-kx-text:hover{
color: var(--kx-text);
}
.hover\:text-white:hover{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:underline:hover{
text-decoration-line: underline;
}
.hover\:decoration-solid:hover{
text-decoration-style: solid;
}
.hover\:opacity-90:hover{
opacity: 0.9;
}
.hover\:ring-1:hover{
--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(1px + 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);
}
.hover\:ring-inset:hover{
--tw-ring-inset: inset;
}
.hover\:ring-kx-border-hover:hover{
--tw-ring-color: var(--kx-border-hover);
}
.hover\:brightness-125:hover{
--tw-brightness: brightness(1.25);
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);
}
.hover\:duration-300:hover{
transition-duration: 300ms;
}
.focus\:z-10:focus{
z-index: 10;
}
.focus\:border-kx-blue:focus{
border-color: var(--kx-blue);
}
.focus\:outline-none:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
.active\:cursor-grabbing:active{
cursor: grabbing;
}
.disabled\:cursor-default:disabled{
cursor: default;
}
.disabled\:cursor-not-allowed:disabled{
cursor: not-allowed;
}
.disabled\:opacity-40:disabled{
opacity: 0.4;
}
.disabled\:opacity-50:disabled{
opacity: 0.5;
}
.group:hover .group-hover\:border-2{
border-width: 2px;
}
.group:hover .group-hover\:border-blue-500{
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.group:hover .group-hover\:border-emerald-400{
--tw-border-opacity: 1;
border-color: rgb(52 211 153 / var(--tw-border-opacity));
}
.group:hover .group-hover\:border-green-400{
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / var(--tw-border-opacity));
}
.group:hover .group-hover\:border-red-400{
--tw-border-opacity: 1;
border-color: rgb(248 113 113 / var(--tw-border-opacity));
}
.group:hover .group-hover\:border-yellow-400{
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.group:hover .group-hover\:bg-blue-50{
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-green-50{
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-kx-blue{
background-color: var(--kx-blue);
}
.group:hover .group-hover\:bg-kx-muted{
background-color: var(--kx-muted);
}
.group:hover .group-hover\:bg-red-50{
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-yellow-50{
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:px-0{
padding-left: 0px;
padding-right: 0px;
}
.group:hover .group-hover\:text-blue-500{
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-emerald-400{
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-kx-blue{
color: var(--kx-blue);
}
.group:hover .group-hover\:text-red-400{
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-yellow-400{
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.group\/widget:hover .group-hover\/widget\:opacity-100{
opacity: 1;
}
.group:hover .group-hover\:before\:border-2::before{
content: var(--tw-content);
border-width: 2px;
}
.group:hover .group-hover\:before\:border-blue-500::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.group:hover .group-hover\:before\:border-emerald-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(52 211 153 / var(--tw-border-opacity));
}
.group:hover .group-hover\:before\:border-red-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(248 113 113 / var(--tw-border-opacity));
}
.group:hover .group-hover\:before\:border-yellow-400::before{
content: var(--tw-content);
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.group:focus-visible .group-focus-visible\:bg-kx-blue{
background-color: var(--kx-blue);
}
.group[data-open] .group-data-\[open\]\:hidden{
display: none;
}
.dark\:divide-darkTheme-border-subtle:is(.dark *) > :not([hidden]) ~ :not([hidden]){
--tw-divide-opacity: 1;
border-color: rgb(42 42 42 / var(--tw-divide-opacity));
}
.dark\:border-none:is(.dark *){
border-style: none;
}
.dark\:border-amber-400\/40:is(.dark *){
border-color: rgb(251 191 36 / 0.4);
}
.dark\:border-blue-400:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.dark\:border-blue-500\/30:is(.dark *){
border-color: rgb(59 130 246 / 0.3);
}
.dark\:border-blue-500\/40:is(.dark *){
border-color: rgb(59 130 246 / 0.4);
}
.dark\:border-cyan-500\/30:is(.dark *){
border-color: rgb(6 182 212 / 0.3);
}
.dark\:border-darkTheme-border-subtle:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(42 42 42 / var(--tw-border-opacity));
}
.dark\:border-densifyBlueTints-500:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(102 130 167 / var(--tw-border-opacity));
}
.dark\:border-gray-500\/40:is(.dark *){
border-color: rgb(107 114 128 / 0.4);
}
.dark\:border-gray-600:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.dark\:border-gray-700:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:border-indigo-500\/30:is(.dark *){
border-color: rgb(99 102 241 / 0.3);
}
.dark\:border-teal-400\/40:is(.dark *){
border-color: rgb(45 212 191 / 0.4);
}
.dark\:border-white:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.dark\:border-yellow-500\/60:is(.dark *){
border-color: rgb(234 179 8 / 0.6);
}
.dark\:border-opacity-10:is(.dark *){
--tw-border-opacity: 0.1;
}
.dark\:bg-amber-500\/15:is(.dark *){
background-color: rgb(245 158 11 / 0.15);
}
.dark\:bg-amber-900\/30:is(.dark *){
background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-black\/30:is(.dark *){
background-color: rgb(0 0 0 / 0.3);
}
.dark\:bg-blue-500\/20:is(.dark *){
background-color: rgb(59 130 246 / 0.2);
}
.dark\:bg-blue-500\/30:is(.dark *){
background-color: rgb(59 130 246 / 0.3);
}
.dark\:bg-blue-900\/20:is(.dark *){
background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-950\/30:is(.dark *){
background-color: rgb(23 37 84 / 0.3);
}
.dark\:bg-cyan-500\/20:is(.dark *){
background-color: rgb(6 182 212 / 0.2);
}
.dark\:bg-darkTheme-bg:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(18 18 18 / var(--tw-bg-opacity));
}
.dark\:bg-darkTheme-bg-paper:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(26 26 26 / var(--tw-bg-opacity));
}
.dark\:bg-darkTheme-bg-surface:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}
.dark\:bg-darkTheme-bg-surface\/20:is(.dark *){
background-color: rgb(42 42 42 / 0.2);
}
.dark\:bg-darkTheme-bg-surface\/30:is(.dark *){
background-color: rgb(42 42 42 / 0.3);
}
.dark\:bg-darkTheme-bg-surface\/50:is(.dark *){
background-color: rgb(42 42 42 / 0.5);
}
.dark\:bg-darkTheme-bg\/60:is(.dark *){
background-color: rgb(18 18 18 / 0.6);
}
.dark\:bg-darkTheme-border-subtle:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}
.dark\:bg-densifyBlueShades-400:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(0 28 65 / var(--tw-bg-opacity));
}
.dark\:bg-densifyBlueTints-800:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(26 68 123 / var(--tw-bg-opacity));
}
.dark\:bg-emerald-900\/30:is(.dark *){
background-color: rgb(6 78 59 / 0.3);
}
.dark\:bg-gray-50:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark\:bg-gray-600:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:bg-gray-800:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark\:bg-green-900\/20:is(.dark *){
background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-indigo-500\/20:is(.dark *){
background-color: rgb(99 102 241 / 0.2);
}
.dark\:bg-red-900\/20:is(.dark *){
background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-sky-900\/30:is(.dark *){
background-color: rgb(12 74 110 / 0.3);
}
.dark\:bg-teal-500\/25:is(.dark *){
background-color: rgb(20 184 166 / 0.25);
}
.dark\:bg-transparent:is(.dark *){
background-color: transparent;
}
.dark\:bg-white:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark\:bg-white\/5:is(.dark *){
background-color: rgb(255 255 255 / 0.05);
}
.dark\:bg-yellow-900\/20:is(.dark *){
background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-opacity-10:is(.dark *){
--tw-bg-opacity: 0.1;
}
.dark\:bg-opacity-20:is(.dark *){
--tw-bg-opacity: 0.2;
}
.dark\:fill-white:is(.dark *){
fill: #fff;
}
.dark\:stroke-gray-600:is(.dark *){
stroke: #4b5563;
}
.dark\:text-\[\#f44336\]:is(.dark *){
--tw-text-opacity: 1;
color: rgb(244 67 54 / var(--tw-text-opacity));
}
.dark\:text-amber-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(253 230 138 / var(--tw-text-opacity));
}
.dark\:text-amber-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(252 211 77 / var(--tw-text-opacity));
}
.dark\:text-black:is(.dark *){
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.dark\:text-blue-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(191 219 254 / var(--tw-text-opacity));
}
.dark\:text-blue-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.dark\:text-blue-400:is(.dark *){
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.dark\:text-cyan-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(103 232 249 / var(--tw-text-opacity));
}
.dark\:text-darkTheme-text-muted:is(.dark *){
--tw-text-opacity: 1;
color: rgb(107 107 107 / var(--tw-text-opacity));
}
.dark\:text-darkTheme-text-primary:is(.dark *){
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity));
}
.dark\:text-densifyBlueTints-100:is(.dark *){
--tw-text-opacity: 1;
color: rgb(204 213 226 / var(--tw-text-opacity));
}
.dark\:text-densifyBlueTints-100\/80:is(.dark *){
color: rgb(204 213 226 / 0.8);
}
.dark\:text-densifyBlueTints-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(153 172 196 / var(--tw-text-opacity));
}
.dark\:text-densifyBlueTints-500:is(.dark *){
--tw-text-opacity: 1;
color: rgb(102 130 167 / var(--tw-text-opacity));
}
.dark\:text-emerald-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(167 243 208 / var(--tw-text-opacity));
}
.dark\:text-gray-100:is(.dark *){
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:text-gray-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark\:text-gray-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark\:text-gray-400:is(.dark *){
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:text-gray-500:is(.dark *){
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark\:text-indigo-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(165 180 252 / var(--tw-text-opacity));
}
.dark\:text-red-400:is(.dark *){
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.dark\:text-red-500:is(.dark *){
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.dark\:text-sky-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity));
}
.dark\:text-sky-300:is(.dark *){
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity));
}
.dark\:text-teal-100:is(.dark *){
--tw-text-opacity: 1;
color: rgb(204 251 241 / var(--tw-text-opacity));
}
.dark\:text-white:is(.dark *){
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-yellow-100\/80:is(.dark *){
color: rgb(254 249 195 / 0.8);
}
.dark\:text-yellow-200:is(.dark *){
--tw-text-opacity: 1;
color: rgb(254 240 138 / var(--tw-text-opacity));
}
.dark\:text-yellow-400:is(.dark *){
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:ring-darkTheme-border-subtle:is(.dark *){
--tw-ring-opacity: 1;
--tw-ring-color: rgb(42 42 42 / var(--tw-ring-opacity));
}
.dark\:hover\:border-gray-500:hover:is(.dark *){
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.dark\:hover\:bg-darkTheme-bg:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(18 18 18 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-darkTheme-bg-elevated:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(36 36 36 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-darkTheme-bg-paper:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(26 26 26 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-darkTheme-bg-surface:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(42 42 42 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-densifyBlueTints-700:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(51 89 137 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-white\/5:hover:is(.dark *){
background-color: rgb(255 255 255 / 0.05);
}
.dark\:hover\:text-gray-200:hover:is(.dark *){
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark\:hover\:text-white:hover:is(.dark *){
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:dark\:text-blue-500:is(.dark *):hover{
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.group:hover .dark\:group-hover\:bg-blue-900\/20:is(.dark *){
background-color: rgb(30 58 138 / 0.2);
}
.group:hover .dark\:group-hover\:bg-green-900\/20:is(.dark *){
background-color: rgb(20 83 45 / 0.2);
}
.group:hover .dark\:group-hover\:bg-red-900\/20:is(.dark *){
background-color: rgb(127 29 29 / 0.2);
}
.group:hover .dark\:group-hover\:bg-yellow-900\/20:is(.dark *){
background-color: rgb(113 63 18 / 0.2);
}
@media (min-width: 480px){
.xs\:basis-1\/3{
flex-basis: 33.333333%;
}
.xs\:basis-2\/3{
flex-basis: 66.666667%;
}
}
@media (min-width: 640px){
.sm\:my-2{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.sm\:mt-1{
margin-top: 0.25rem;
}
.sm\:flex{
display: flex;
}
.sm\:basis-5\/12{
flex-basis: 41.666667%;
}
.sm\:basis-7\/12{
flex-basis: 58.333333%;
}
.sm\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:flex-row{
flex-direction: row;
}
.sm\:gap-1{
gap: 0.25rem;
}
.sm\:gap-8{
gap: 2rem;
}
.sm\:gap-x-2{
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.sm\:p-6{
padding: 1.5rem;
}
.sm\:px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sm\:text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
@media (min-width: 768px){
.md\:mb-5{
margin-bottom: 1.25rem;
}
.md\:mt-2{
margin-top: 0.5rem;
}
.md\:flex{
display: flex;
}
.md\:hidden{
display: none;
}
.md\:basis-1\/2{
flex-basis: 50%;
}
.md\:basis-5\/12{
flex-basis: 41.666667%;
}
.md\:basis-7\/12{
flex-basis: 58.333333%;
}
.md\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:gap-2{
gap: 0.5rem;
}
.md\:gap-3{
gap: 0.75rem;
}
.md\:gap-4{
gap: 1rem;
}
.md\:p-5{
padding: 1.25rem;
}
}
@media (min-width: 1024px){
.lg\:col-span-1{
grid-column: span 1 / span 1;
}
.lg\:col-span-2{
grid-column: span 2 / span 2;
}
.lg\:mb-6{
margin-bottom: 1.5rem;
}
.lg\:block{
display: block;
}
.lg\:w-1\/2{
width: 50%;
}
.lg\:w-auto{
width: auto;
}
.lg\:basis-5\/12{
flex-basis: 41.666667%;
}
.lg\:basis-7\/12{
flex-basis: 58.333333%;
}
.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\:grid-cols-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-5{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:flex-row{
flex-direction: row;
}
.lg\:p-6{
padding: 1.5rem;
}
.lg\:text-3xl{
font-size: 1.875rem;
line-height: 2.25rem;
}
.lg\:text-4xl{
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}
}
@media (min-width: 1280px){
.xl\:col-span-2{
grid-column: span 2 / span 2;
}
.xl\:col-span-5{
grid-column: span 5 / span 5;
}
.xl\:col-span-7{
grid-column: span 7 / span 7;
}
.xl\:block{
display: block;
}
.xl\:flex{
display: flex;
}
.xl\:hidden{
display: none;
}
.xl\:h-12{
height: 3rem;
}
.xl\:w-12{
width: 3rem;
}
.xl\:flex-1{
flex: 1 1 0%;
}
.xl\:flex-none{
flex: none;
}
.xl\:grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.xl\:grid-cols-12{
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.xl\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xl\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:grid-cols-5{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.xl\:grid-rows-\[auto_auto\]{
grid-template-rows: auto auto;
}
.xl\:flex-row{
flex-direction: row;
}
.xl\:flex-col{
flex-direction: column;
}
.xl\:items-start{
align-items: flex-start;
}
.xl\:justify-center{
justify-content: center;
}
.xl\:gap-12{
gap: 3rem;
}
.xl\:gap-kx-xl{
gap: 16px;
}
.xl\:p-2{
padding: 0.5rem;
}
.xl\:pl-4{
padding-left: 1rem;
}
}
@media (min-width: 1536px){
.\32xl\:p-2{
padding: 0.5rem;
}
.\32xl\:px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.\32xl\:py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
@media (min-width: 1920px){
.\33xl\:h-\[300px\]{
height: 300px;
}
}
.\[\&\:hover_\.kx-dest\]\:text-kx-secondary:hover .kx-dest{
color: var(--kx-secondary);
}
.\[\&\:hover_\.kx-vchev\]\:bg-kx-tone-info-bg:hover .kx-vchev{
background-color: var(--kx-tone-info-bg);
}
.\[\&\:hover_\.kx-vchev\]\:text-kx-blue:hover .kx-vchev{
color: var(--kx-blue);
}
.\[\&_\.MuiChip-icon\]\:\!ml-1\.5 .MuiChip-icon{
margin-left: 0.375rem !important;
}
.\[\&_\.MuiChip-icon\]\:\!mr-0 .MuiChip-icon{
margin-right: 0px !important;
}
.\[\&_\.MuiChip-icon\]\:\!h-\[13px\] .MuiChip-icon{
height: 13px !important;
}
.\[\&_\.MuiChip-icon\]\:\!w-\[13px\] .MuiChip-icon{
width: 13px !important;
}
.\[\&_\.MuiChip-icon\]\:\!text-\[13px\] .MuiChip-icon{
font-size: 13px !important;
}
.\[\&_\.MuiChip-icon\]\:\!text-amber-500 .MuiChip-icon{
--tw-text-opacity: 1 !important;
color: rgb(245 158 11 / var(--tw-text-opacity)) !important;
}
.\[\&_\.MuiChip-icon\]\:\!text-gray-500 .MuiChip-icon{
--tw-text-opacity: 1 !important;
color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
}
.dark\:\[\&_\.MuiChip-icon\]\:\!text-amber-400 .MuiChip-icon:is(.dark *){
--tw-text-opacity: 1 !important;
color: rgb(251 191 36 / var(--tw-text-opacity)) !important;
}
.dark\:\[\&_\.MuiChip-icon\]\:\!text-gray-400 .MuiChip-icon:is(.dark *){
--tw-text-opacity: 1 !important;
color: rgb(156 163 175 / var(--tw-text-opacity)) !important;
}
.\[\&_\.MuiChip-label\]\:\!px-1\.5 .MuiChip-label{
padding-left: 0.375rem !important;
padding-right: 0.375rem !important;
}
.\[\&_\.MuiChip-label\]\:\!px-2 .MuiChip-label{
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.\[\&_\.MuiChip-label\]\:\!text-\[0\.75rem\] .MuiChip-label{
font-size: 0.75rem !important;
}
.\[\&_\.MuiChip-label\]\:\!text-xs .MuiChip-label{
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.\[\&_\.MuiChip-label\]\:\!leading-tight .MuiChip-label{
line-height: 1.25 !important;
}
.\[\&_\.MuiSvgIcon-root\]\:\!h-3\.5 .MuiSvgIcon-root{
height: 0.875rem !important;
}
.\[\&_\.MuiSvgIcon-root\]\:\!w-3\.5 .MuiSvgIcon-root{
width: 0.875rem !important;
}
.\[\&_\.kx-icon\]\:\!text-kx-amber .kx-icon{
color: var(--kx-amber) !important;
}
.\[\&_\.kx-icon\]\:text-kx-blue .kx-icon{
color: var(--kx-blue);
}
.\[\&_\.kx-icon\]\:text-kx-muted .kx-icon{
color: var(--kx-muted);
}
.\[\&_\.kx-icon\]\:text-kx-on-accent .kx-icon{
color: var(--kx-on-accent);
}
.\[\&_\.kx-icon\]\:text-kx-red .kx-icon{
color: var(--kx-red);
}
.\[\&_\.kx-icon\]\:text-kx-teal .kx-icon{
color: var(--kx-teal);
}
.\[\&_b\]\:font-medium b{
font-weight: 500;
}
.\[\&_b\]\:font-semibold b{
font-weight: 600;
}
.\[\&_b\]\:text-kx-secondary b{
color: var(--kx-secondary);
}
.\[\&_b\]\:text-kx-text b{
color: var(--kx-text);
}
.group:not([data-open]) .\[\.group\:not\(\[data-open\]\)_\&\]\:hidden{
display: none;
}