html {
    --component-table-row-height: 1.5rem;
    --component-table-pagination-height: 1.5rem;
    --component-table-button-padding-lr: 0.5rem;
    --component-table-cell-padding-lr: 1rem;
    --component-datasets-list-min-item-height: 1.5rem;
}

/*
    Root
*/

.workspace {
    transform-origin: top left;
    background-color: transparent !important;
}

/*
    Icons container
*/

.component-icons-container {
    display: none;
}

/*
    Common
*/

.component {
    background-color: rgb(217, 242, 252);
    position: absolute;
    /*width: 10rem;
    height: 5rem;*/
    box-sizing: border-box;
    transform-origin: top left;
}

.component.has-border:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    pointer-events: none;
}

.component.is-selected {
    -outline: 2px solid rgba(255,0,0,0.5);
    -box-shadow: 0 0 3rem rgba(255,255,255,0.2);

    animation-name: component-blink;
    animation-iteration-count: infinite;
    animation-duration: 0.25s;
    animation-direction: alternate;
    -animation-timing-function: steps(2);
}

@keyframes component-blink {
    0% {
        outline: 2px dashed rgba(255,255,255,1);
        opacity: 1;
    }
    100% {
        outline: 2px dashed rgba(255,255,255,0);
        opacity: 0.5;
    }
}

.component.is-locked * {
    pointer-events: none;
}

.component.is-disabled,
.component.is-disabled * {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     opacity: 0.75;
}

.component.is-disabled * {
    pointer-events: none;
}

.component.is-invisible {
    visibility: hidden;
    box-shadow: none !important;
}

.mode-viewer .component.is-invisible {
    pointer-events: none;
}

.mode-editor .component.is-invisible * {
    visibility: hidden;
}
.mode-editor .component.is-invisible,
.mode-editor .component.is-invisible .component {
    visibility: visible;
    background: transparent !important;
    color: transparent !important;
    border-color: transparent !important;
    outline: 2px dotted rgba(255,255,255,0.5);
}

.component > .wrapper {
    min-width: 100%;
    width: 0;
    min-height: 100%;
    height: 0;
}

.component > .wrapper > .component {
    position: static;
}

.component.is-filtered {
    display: none !important;
}


/*
    Experimental selection
    - problem with scrolled components
*/
/*.component.is-selected:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 20, 145, 0.5);
    position: fixed;
    z-index: 110000;
    -outline: 2px dashed rgba(255,255,255,1);
}
.component.text > * {
    position: absolute;
}
.component.image > * {
    position: absolute;
}*/ 


/*
    Common buttons
*/

@keyframes button-focused {
    /* from {
        text-decoration: none;        
    }
    to {
        text-decoration: underline;
    } */
    /* from {
        box-shadow: inset -1px -1px 0 1px var(--color-accent);
    }
    to {
        box-shadow: inset -1px -1px 0 1px transparent;
    } */
    0% {
        text-decoration: none;
    }
    50% {
        text-decoration: underline;
    }
    100% {
        text-decoration: none;
    }
}

.mode-viewer button.button.is-active,
.mode-viewer .button > button.is-active {
    filter: brightness(0.9);
}

/*.mode-viewer button.button:focus,
.mode-viewer .button > button:focus {
    animation: button-focused 1s infinite reverse;
}*/


/*
    Text
*/

.component.text > a,
.component.text > a:hover,
.component.text > a:visited {
    color: inherit;
}

.component.text.left {
    text-align: left;
}

.component.text.right {
    text-align: right;
}

.component.text.center {
    text-align: center;
}

.component.text.justify {
    text-align: justify;
}

/*
    Image
*/

.component.image {
    overflow: hidden;
}

.component.image img {
    position: absolute;
    transform-origin: top left;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.component.image.fit-to-size img {
    width: 100%;
    height: 100%;
}

.component.image.keep-aspect-ratio img {
    object-fit: cover;
}

.component.image .preloader {
    color: inherit;
    background: inherit;
    font-size: inherit;
    min-width: 0;
    min-height: 0;
}


/*
    Sprite Animation
*/

.component.sprite-animation > a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
        /* background-color: red; */
}

.component.sprite-animation.is-loading > a {
    display: none;
}


/*
    Audio
*/

.component.audio {
    overflow: hidden;
}

.component.audio > .control {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.component.audio.is-loading > .control {
    display: none;
}

.component.audio video {
    display: none;
}

.component.audio > .control > .btn-play,
.component.audio > .control > .btn-pause {
    display: none;
}

.component.audio.is-played > .control > .btn-pause {
    display: block;
}

.component.audio.is-paused > .control > .btn-play {
    display: block;
}

.component.audio.fit-to-size > .control > * {
    width: 100%;
    height: 100%;
}


/*
    Video
*/

.component.video {
    overflow: hidden;
}

.component.video > video {
    position: absolute;
}

.component.video.fit-to-size video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.component.video.keep-aspect-ratio video {
    object-fit: cover;
}


/*
    Chart
*/

.component.chart {
    overflow: hidden;
}

.component.chart * {
    position: absolute;
    margin: 0;
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
}

/* .component.chart .trackpoint-tooltip {
    width: auto;
    position: absolute;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    box-sizing: border-box;
    transition: margin-left, margin-top 0.05s ease-out;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        background: var(--color-tooltip-background);
        color: var(--color-tooltip-foreground);
}

.component.chart .trackpoint-tooltip .text {
    position: static;
}

.component.chart .trackpoint-tooltip .arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.5rem;
    margin-top: calc(0.25rem - 1px);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
        border-top-color: var(--color-tooltip-background);
}

.component.chart.without-tolltips .trackpoint-tooltip {
    display: none;
}

.component.chart .trackpoint-tooltip,
.component.chart .trackpoint-tooltip * {
    pointer-events: none;
} */

.component.chart.out-of-viewport canvas {
    display: none;
}

.component.chart .controls,
.component.chart .engineering-levels {
    display: none;
    flex-direction: row;
    overflow: hidden;
}

.component.chart .controls {
    border-radius: var(--control-border-radius);
    height: 2.4rem;
    align-items: center;
    justify-content: end;
    margin-left: -0.5rem;
    margin-top: 0.5rem;
}

.component.chart .controls button {
    width: 2rem;
    height: 2rem;
    position: static;
    padding: 0;
    font-size: 1.5rem;
    min-width: 0;
    transition: all 0.3s ease-out;
    transition-property: background-color;
    display: none;
}

.component.chart .controls button:hover {
    background-color: var(--color-bg-3);
}

.component.chart .controls button.is-active {
    background-color: var(--color-accent);
}

.component.chart .controls button.is-shown {
    display: flex;
}

.component.chart .controls button * {
    width: auto;
    height: auto;
}

.component.chart .controls input[type=number] {
    width: 5rem;
    position: static;
    background-color: #fff;
    color: #000;
    border-color: currentColor;
    border-radius: var(--control-border-radius);
}

.component.chart .controls > * + * {
    margin-left: 0.25rem;
}

.component.chart .controls.is-shown {
    display: flex;
}

.component.chart .engineering-levels {
    position: static;
    height: 2rem;
    width: auto;
    align-items: center;
    background-color: var(--color-accent);
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    border-radius: var(--control-border-radius);
}

.component.chart .engineering-levels.is-shown {
    display: flex;
}

.component.chart .engineering-levels > * + * {
    margin-left: 0.25rem;
}

.component.chart .preloader {
    background: inherit;
    color: inherit;
}

.component.chart .preloader > * {
    width: auto;
    height: auto;
}

/*
    Button
*/

.component.button {
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
    border-radius: 0.25rem;
    /*box-shadow: 0 0 3rem;*/
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.component.button .preloader {
    color: inherit;
    background: none;
    font-size: inherit;
}

.component.button.is-loading {
    cursor: default !important;
}


/*
    Switch
*/

.component.switch {
    display: flex;
	align-items: stretch;
	justify-content: stretch;
    border-radius: 0.25rem;
    overflow: hidden;
}

.component.switch > .button {
    border-radius: 0 !important;
    position: static;
	width: 100% !important;
	height: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.component.switch.is-horizontal {
    flex-flow: row;
}

.component.switch.is-horizontal > .button:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.component.switch.is-horizontal > .button:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.component.switch.is-vertical {
    flex-flow: column;
}

.component.switch.is-vertical > .button:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.component.switch.is-vertical > .button:last-child {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* .component.switch > .button.is-active {
    filter: brightness(0.9);
} */


/*
    Parameters Tree
*/

.parameters-tree {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.parameters-tree > .actions,
.parameters-tree > .actions > .pick,
.parameters-tree > .actions > .cancel {
    display: none;
}

.parameters-tree.is-selectable > .actions,
.parameters-tree.is-cancelable > .actions {
    box-sizing: border-box;
    height: 4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

.parameters-tree.is-selectable > .actions > .pick {
    display: flex;
}

.parameters-tree.is-cancelable > .actions > .cancel {
    display: flex;
}

.parameters-tree > .tree {
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 1rem;
    min-width: 100%;
    width: 0;
    /* height: 100%; */
    min-height: 100%;
    height: 0;
}

.parameters-tree.is-selectable > .tree,
.parameters-tree.is-cancelable > .tree {
    min-height: calc(100% - 4rem);
    height: calc(100% - 4rem);
}

.parameters-tree > .actions > button {
    margin-left: 1rem;
}

.parameters-tree > .actions > button:last-child {
    margin-right: 1rem;
}

.parameters-tree > .actions > .pick {
    background-color: #0a62d4;
}

.parameters-tree > .actions > .pick > .id {
    display: inline-block;
    margin-left: 0.5rem;
}

.parameters-tree > .actions > .pick > .id::before {
    content: '(ID:';
    margin-right: 0.5rem;
    display: inline-block;
}

.parameters-tree > .actions > .pick > .id::after {
    content: ')';
    display: inline-block;
}

/* .parameters-tree.is-selectable > .tree .is-selected {
    background-color: var(--color-list-item-highlight);
} */

/* .parameters-tree > .tree .is-unavailable {
    display: none;
}

.parameters-tree.show-unavailable-nodes > .tree .is-unavailable {
    opacity: 0.5;
    display: flex;
} */

.parameters-tree .tree .is-selected {
    background-color: var(--color-parameters-tree-component-selected-item-bg);
    color: var(--color-parameters-tree-component-selected-item-fg);
    outline-color: var(--color-parameters-tree-component-selected-item-outline);
}


/*
    Table
*/

.component.table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --component-table-scrollbar-width: 0px;
}

.component.table .table {
    display: flex;
    flex-direction: row;
    /* width: 0;
    min-width: 100%;
    height: 0;
    min-height: 100%; */
    background-color: inherit;
}

.component.table .table-column {
    display: flex;
    flex-direction: row;
    background-color: inherit;
}

.component.table .table-column.is-fixed {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    --scroll-top: 0px;
}

.component.table .table-column.is-invisible {
    visibility: hidden;
}

.component.table .table-column.is-fixed .column-header {
    top: var(--scroll-top);
}

.component.table .table-column .column-container {
    display: flex;
    flex-direction: column;
    background-color: inherit;
}

.component.table .table-column .column-resize-control {
    width: 5px;
    margin-left: -5px;
    box-sizing: border-box;
    cursor: ew-resize;
    border-right: 1px solid var(--table-component-border-color);
    position: relative;
    z-index: 1;
}

.component.table .table-column .splitter + .column-resize-control {
    cursor: default;
    pointer-events: none;
}

.component.table .table-column .splitter .column-cell {
    padding: 0;
    background-color: var(--table-component-border-color);
}

.component.table .right-clip .column-cell {
    direction: rtl;
}

.component.table .column-cell {
    height: var(--component-table-row-height);
    line-height: 1;
    box-sizing: border-box;
    padding: 0 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end; */
    line-height: var(--component-table-row-height);
    text-align: right;
    border-bottom: 1px solid var(--table-component-border-color);
    flex-grow: 0;
    flex-shrink: 0;
}

.component.table .column-content .column-cell {
    background-color: inherit;
}

.component.table .column-cell.without-border {
    border-bottom-color: transparent;
}

.component.table .left .column-cell {
    /* justify-content: start; */
    text-align: left;
}

.component.table .center .column-cell {
    text-align: center;
}

.component.table .flex-center .column-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.component.table .column-header {
    background: rgba(0,0,0,0.2);
}

.component.table .column-subtotal {
    background: rgba(0,0,0,0.2);
}

.component.table .table-column button {
    min-width: auto;
    height: 1em;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: inline-flex;
}

.component.table .table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: inherit;
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 100%;
    max-height: calc(100% - var(--component-table-pagination-height));
    clip-path: inset(1px); /* dirty hack to prevent holes between fixed header and the top border of the component */
}

.component.table.with-subtotals .table-container {
    max-height: calc(100% - var(--component-table-pagination-height) - var(--component-table-row-height));
}

.component.table.is-scrollable .table-container {
    overflow-y: auto;
}

.component.table .column-cell.is-fixed {
    position: absolute;
    width: inherit;
    top: calc(var(--row-index) * var(--component-table-row-height) + var(--component-table-header-height));
    color: var(--table-component-header-fg-color);
    background-color: var(--table-component-header-bg-color);
}

.component.table .table-column.is-fixed .column-cell.is-fixed {
    top: calc(var(--scroll-top) + var(--row-index) * var(--component-table-row-height) + var(--component-table-header-height));
}

.component.table .table-column .column-header.column-cell.is-fixed:first-child {
    top: var(--scroll-top);
}

/*.component.table.is-scrollable .table-container::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(
        180deg,
        var(--scrollbars-color-bg) var(--component-table-fixed-rows-height),
        var(--scrollbars-color-thumb) var(--component-table-fixed-rows-height),
        var(--scrollbars-color-thumb)
    );
}*/

.component.table .pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--component-table-pagination-height);
    box-sizing: border-box;
    background: var(--table-component-pagination-bg-color);
    padding-left: 0.25em;
    padding-right: 0.25em;
    overflow: hidden;
    flex-shrink: 0;
}

.component.table.is-loading .table-container,
.component.table.is-loading .pagination {
    display: none !important;
}

.component.table.is-loading .preloader {
    flex: 1;
}

.component.table .pagination .group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.component.table .pagination .group * + * {
    margin-left: 0.25em;
}

.component.table .pagination .group + .group {
    margin-left: 0.25em;
}

.component.table .pagination button {
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    font-size: 1.25em;
    background: none;
    min-width: 0;
}

.component.table .pagination input {
    --color-inputs: rgba(255,255,255,0.2);
    padding: 0;
    height: 1.2em;
    line-height: 1;
    min-width: 0;
    width: 4em;
    margin-right: 0.5em;
    text-align: right;
    margin-left: 0.5em;
}

.component.table .color {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.15rem;
    overflow: hidden;
}

/*
    Sticky HTML table layout
*/

.component.table .table-container {
    overflow: auto;
    background-color: inherit;
}

.component.table .data-table-wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.component.table .data-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background-color: inherit;
}

.component.table .data-table tbody {
    background-color: inherit;
}

.component.table .data-table.with-subtotals {
    min-height: 100%;
}

.component.table .data-table .table-cell {
    height: var(--component-table-row-height);
    line-height: var(--component-table-row-height);
    box-sizing: border-box;
    padding: 0 var(--component-table-cell-padding-lr);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
    /* inset shadow instead of border: table cells ignore border-box and borders add to row height */
    border: none;
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color);
    background-color: inherit;
    position: relative;
}

.component.table .data-table .left.table-cell {
    text-align: left;
}

.component.table .data-table .header-cell.table-cell {
    text-align: right;
}

.component.table .data-table .left.header-cell.table-cell {
    text-align: left;
}

.component.table .data-table .center.table-cell {
    text-align: center;
}

.component.table .data-table .flex-center.table-cell {
    text-align: center;
    vertical-align: middle;
}

.component.table .data-table .table-cell.button,
.component.table .data-table .table-cell:has(> button) {
    text-overflow: clip;
}

.component.table .data-table .header-cell {
    z-index: 4;
    color: var(--table-component-header-fg-color);
    background-color: var(--table-component-header-bg-color);
    font-weight: 700;
    text-align: right;
}

.component.table .data-table .left.header-cell {
    text-align: left;
}

.component.table .data-table .header-cell.is-sticky-top {
    position: sticky;
    top: 0;
}

.component.table .data-table .header-cell.has-header-lines {
    height: var(--component-table-header-height);
    min-height: var(--component-table-header-height);
    line-height: normal;
    padding: 0;
    overflow: visible;
    white-space: normal;
    vertical-align: top;
}

.component.table .data-table .header-cell-lines {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.component.table .data-table .header-cell-line {
    display: block;
    width: 100%;
    height: var(--component-table-row-height);
    min-height: var(--component-table-row-height);
    line-height: var(--component-table-row-height);
    box-sizing: border-box;
    padding: 0 var(--component-table-cell-padding-lr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 var(--component-table-row-height);
    text-align: right;
}

.component.table .data-table .left.header-cell .header-cell-line {
    text-align: left;
}

.component.table .data-table .header-cell-line-first {
    font-weight: 700;
}

.component.table .data-table .header-cell-line:not(.header-cell-line-first):not(.header-cell-line-empty) {
    font-weight: 400;
}

.component.table .data-table .header-cell.is-sticky-left {
    z-index: 5;
    background-color: var(--table-component-header-bg-color);
}

.component.table .data-table .is-sticky-left {
    position: sticky;
    background-clip: padding-box;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color);
}

.component.table .data-table .header-cell.is-last-sticky-left {
    box-shadow: inset -1px 0 0 var(--table-component-border-color), inset 0 -1px 0 var(--table-component-border-color);
}

.component.table .data-table tbody .table-cell.is-sticky-left {
    z-index: 2;
    background-color: var(--table-component-body-bg-solid-color, var(--table-component-body-bg-color));
}

.component.table .data-table tbody .table-cell.is-sticky-left.is-striped {
    background-color: var(--table-component-body-bg-solid-color, var(--table-component-body-bg-color));
    box-shadow: inset -1px 0 0 var(--table-component-border-color);
}

/* .component.table .data-table tbody .table-cell.is-last-sticky-left {
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color),
        4px 0 0 0 var(--sticky-cell-mask-color, var(--table-component-body-bg-solid-color, var(--table-component-body-bg-color))),
        2px 0 4px rgba(0, 0, 0, 0.08);
} */

.component.table .data-table tbody .table-cell.is-last-sticky-left.is-striped {
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        4px 0 0 0 var(--sticky-cell-mask-color, var(--table-component-body-bg-solid-color, var(--table-component-body-bg-color))),
        2px 0 4px rgba(0, 0, 0, 0.08);
}

.component.table .data-table tfoot .table-cell.is-sticky-left {
    z-index: 3;
    background-color: var(--table-component-header-bg-color);
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color),
        inset 0 1px 0 var(--table-component-border-color);
}

.component.table .data-table tr.is-pinned .table-cell {
    position: sticky;
    z-index: 3;
    color: var(--table-component-header-fg-color);
    background-color: var(--table-component-header-bg-color);
    box-shadow: inset -1px 0 0 var(--table-component-border-color), inset 0 -1px 0 var(--table-component-border-color);
}

.component.table .data-table tr.is-pinned[data-pinned-row-index="0"] .table-cell,
.component.table .data-table tr.is-pinned[data-pinned-row-index="0"] .table-cell.is-last-sticky-left {
    box-shadow:
        0 -2px 0 var(--table-component-header-bg-color),
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color);
}

.component.table .data-table tr.is-pinned .table-cell.is-sticky-left {
    z-index: 4;
}

.component.table .data-table tr.is-pinned .table-cell.is-last-sticky-left {
    box-shadow: inset -1px 0 0 var(--table-component-border-color), inset 0 -1px 0 var(--table-component-border-color);
}

.component.table .data-table tr.is-pinned .table-cell:not(.is-sticky-left) {
    top: calc(
        2px +
        var(--component-table-header-height)
        + var(--pinned-row-index) * var(--component-table-row-height)
    );
}

.component.table .data-table tr.is-pinned .table-cell.is-sticky-left {
    top: calc(
        2px +
        var(--component-table-header-height)
        + var(--pinned-row-index) * var(--component-table-row-height)
    );
}

.component.table .data-table .subtotal-cell {
    position: sticky;
    bottom: 0;
    z-index: 2;
    font-weight: 700;
    background-color: var(--table-component-header-bg-color);
    color: var(--table-component-header-fg-color);
    border: none;
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color),
        inset 0 1px 0 var(--table-component-border-color),
        0 -2px 6px rgba(0, 0, 0, 0.08);
}

.component.table .data-table .subtotal-cell.is-sticky-left {
    z-index: 3;
}

.component.table .data-table .subtotal-cell.is-last-sticky-left {
    box-shadow:
        inset -1px 0 0 var(--table-component-border-color),
        inset 0 -1px 0 var(--table-component-border-color),
        inset 0 1px 0 var(--table-component-border-color),
        0 -2px 6px rgba(0, 0, 0, 0.08);
}

.component.table .data-table .is-splitter.table-cell,
.component.table .table-cell.splitter {
    padding: 0;
    background-color: var(--table-component-border-color);
    box-shadow: none;
}

.component.table .data-table .is-striped.table-cell {
    box-shadow: inset -1px 0 0 var(--table-component-border-color);
    background-image: linear-gradient(
        to right,
        var(--table-component-border-color) 0,
        var(--table-component-border-color) 4px,
        transparent 4px,
        transparent 8px
    );
    background-size: 8px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

.component.table .data-table .header-object-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    overflow: hidden;
}

.component.table .data-table .left.header-cell .header-object-name {
    justify-content: flex-start;
}

.component.table .column-resize-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    pointer-events: none;
    z-index: 6;
}

.component.table .column-resize-overlay .column-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    height: auto;
    cursor: col-resize;
    pointer-events: auto;
    z-index: 1;
}

.component.table .column-resize-overlay .column-resize-handle:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.component.table .column-resize-overlay .column-resize-handle.is-sticky-resize {
    z-index: 2;
}

.component.table .data-table .column-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}

.component.table .data-table .column-resize-handle:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.component.table .data-table .is-splitter .column-resize-handle {
    display: none;
}

.component.table .data-table button {
    min-width: auto;
    height: 1.2em;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: inline-flex;
}

.component.table .object-name .color {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* .component.table .display-name,
.component.table .unit-name {
    margin-left: calc(0.8rem + 2 * 0.25rem);
} */

.component.table .column-header {
    color: var(--table-component-header-fg-color);
    background-color: var(--table-component-header-bg-color);
    flex-shrink: 0;
    flex-grow: 0;
}

.component.table .column-header.is-fixed {
    position: absolute;
    width: inherit;
    /* padding-right: var(--scrollbar-size); */
}

.component.table .column-content {
    width: inherit;
    background-color: inherit;
}

.component.table .column-header.is-fixed + .column-content {
    padding-top: var(--component-table-fixed-rows-height);
}

.component.table .column-cell button {
    width: 100%;
}

.component.table .column-cell button .preloader {
    color: inherit;
    background: none;
    font-size: inherit;
}

.component.table .column-cell button.is-loading {
    cursor: default !important;
}

.component.table .link {
    cursor: pointer;
    text-decoration: underline;
}

.component.table .preloader {
    background: inherit;
    color: inherit;
}

.component.table .subtotals {
    display: none;
}

.component.table.with-subtotals .subtotals {
    display: flex;
    flex-direction: row;
    width: calc(100% - var(--component-table-scrollbar-width));
    max-width: calc(100% - var(--component-table-scrollbar-width));
    height: var(--component-table-row-height);
    max-height: var(--component-table-row-height);
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
    box-shadow: var(--component-table-scrollbar-width) 0 0 var(--table-component-header-bg-color);
}

.component.table .column-cell.is-striped {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--table-component-border-color),
        var(--table-component-border-color) 2px,
        transparent 2px,
        transparent 8px
    );
}

/*
    Dropdown
*/

.component.dropdown {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.component.dropdown select {
    width: 100%;
    height: 100%;
    padding: 0 0.75em;
    background-color: inherit;
    color: inherit;
    font-size: inherit;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
}

.component.dropdown select option {
    background: inherit;
}

.component.dropdown .control {
    margin-left: -2em;
    width: 2em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: inherit;
    background-color: inherit;
    color: inherit;
    pointer-events: none;
}


/*
    Input
*/

.component.input > label {
    width: 100%;
    height: 100%;
    display: flex;
	align-items: stretch;
	justify-content: stretch;
    flex-flow: column;
}

.component.input > label > input {
    width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
    background: #fff;
    color: #000;
    border-radius: 0.25rem;
}

.component.input > label > input:focus {
    outline: 0;
}

.component.input > .logical {
    flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
}

.component.input > .logical > input {
    width: 1rem;
	height: 1rem;
	margin-right: 0.25rem;
}

.component.input > label > span {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.component.input .inputLabel {
    display: none;
    height: 100%;
    border-radius: var(--control-border-radius);
    background-color: inherit;
    cursor: pointer;
}

.component.input .inputLabel .inputIcon {
    display: none;
}

.component.input .datetime-local .inputLabel,
.component.input .date .inputLabel,
.component.input .time .inputLabel,
.component.input .logical input:checked + .inputLabel
{
    display: flex;
}

.component.input .datetime-local .inputLabel .iconDate,
.component.input .date .inputLabel .iconDate,
.component.input .time .inputLabel .iconDate
{
    display: block;
}

.component.input .logical .inputLabel .iconCheck {
    display: none;
}

.component.input.is-checked .logical .inputLabel .iconCheck {
    display: block;
}

.component.input .logical .inputLabel {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.component.input .date input,
.component.input .time input,
.component.input .datetime-local input,
.component.input .float input,
.component.input .integer input,
.component.input .text input,
.component.input .logical input,
.component.input .textarea textarea
{
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin-bottom: 1rem;
    box-sizing: border-box;
    color: inherit;
    background-color: inherit;
    margin: 0;
    appearance: textfield;
}

.component.input > label.textarea > textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    resize: vertical;
    overflow: auto;
    background: #fff;
    color: #000;
    border-radius: 0.25rem;
}

.component.input > label.textarea > textarea:focus {
    outline: 0;
}

.component.input input::placeholder {
    padding-right: 5px;
    font-size: inherit;
}

/* TODO: hide the icon correctly */
::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;                
    visibility: hidden;
}

.component.input label span {
    display: none;
}

.component.input label .inputLabel {
    background-color: inherit;
    position: absolute;
    right: 0;
    top: 0;
    width: 2em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    border-radius: inherit;
}

.component.input .logical {
    cursor: pointer;
}

.component.input > .logical > input {
    display: none;
}

.component.input.is-checked {
    --border-color: currentColor !important;
}

.component.input input[type=number] + .inputLabel,
.component.input input[type=text] + .inputLabel,
.component.input input[type=url] + .inputLabel,
.component.input input[type=email] + .inputLabel,
.component.input input[type=tel] + .inputLabel,
.component.input input[type=password] + .inputLabel,
.component.input textarea + .inputLabel {
    display: none;
}

/*
    Line
*/

.component.line {
    overflow: hidden;
}

.component.line > a {
    display: block;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
}

/*
    Dimmer
*/

.component.dimmer {
    overflow: hidden;
    background-color: transparent !important;
}

.component.dimmer > a {
    display: block;
    position: relative;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
    outline: none;
    padding: 1rem;
}

.component.dimmer > a > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.component.dimmer .dimmer-scale-label,
.component.dimmer .dimmer-value-label,
.component.dimmer .dimmer-scale-tick-label {
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    color: inherit;
    font-weight: inherit;
}

.component.dimmer .dimmer-scale-label {
    display: none;
    font-size: 0.6em;
    text-align: center;
}

.component.dimmer.show-scale-limits .dimmer-scale-label--min,
.component.dimmer.show-scale-limits .dimmer-scale-label--max {
    display: block;
}

.component.dimmer .dimmer-scale-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.component.dimmer .dimmer-scale-tick-label {
    display: none;
    font-size: 0.6em;
    text-align: center;
}

.component.dimmer.show-scale-tick-labels .dimmer-scale-tick-label {
    display: block;
}

.component.dimmer .dimmer-value-label {
    display: none;
    top: 30%;
    left: 0;
    right: 0;
    font-size: 1em;
    text-align: center;
}

.component.dimmer.show-value .dimmer-value-label {
    display: block;
}

.component.dimmer.value-label-bottom .dimmer-value-label {
    top: auto;
    bottom: 30%;
}

.component.dimmer.is-disabled .dimmer-value-label {
    display: none !important;
}

/*
    Gauge
*/

.component.gauge {
    overflow: hidden;
    background-color: transparent !important;
}

.component.gauge > div {
    display: block;
    position: relative;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
    outline: none;
    padding: 1rem;
}

.component.gauge > div > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.component.gauge .gauge-scale-label,
.component.gauge .gauge-value-label,
.component.gauge .gauge-scale-tick-label {
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    color: inherit;
    font-weight: inherit;
}

.component.gauge .gauge-scale-label {
    display: none;
    font-size: 0.6em;
    text-align: center;
}

.component.gauge.show-scale-limits .gauge-scale-label--min,
.component.gauge.show-scale-limits .gauge-scale-label--max {
    display: block;
}

.component.gauge .gauge-scale-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.component.gauge .gauge-scale-tick-label {
    display: none;
    font-size: 0.6em;
    text-align: center;
}

.component.gauge.show-scale-tick-labels .gauge-scale-tick-label {
    display: block;
}

.component.gauge .gauge-value-label {
    display: none;
    top: 30%;
    left: 0;
    right: 0;
    font-size: 1em;
    text-align: center;
}

.component.gauge.show-value .gauge-value-label {
    display: block;
}

.component.gauge.value-label-bottom .gauge-value-label {
    top: auto;
    bottom: 30%;
}

.component.gauge.is-disabled .gauge-value-label {
    display: none !important;
}

/*
    IFrame
*/

.component.iframe > iframe {
    display: block;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
}

.component.iframe.is-loading > * {
    display: none;
}

.component.iframe.is-loading > .preloader {
    display: flex;
}

.mode-editor .component.iframe > iframe {
    pointer-events: none;
}

/*
    Dynamic form
*/

.component.dynamic-form {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--color-dynamic-form-component-foreground);
    background-color: var(--color-dynamic-form-component-background);
}

.component.dynamic-form.has-border:after {
    content: none;
}

.component.dynamic-form .dynamic-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
}

.component.dynamic-form .dynamic-form-empty {
    padding: 1em 0.75em;
    opacity: 0.7;
}

.component.dynamic-form .dynamic-form-row {
    display: grid;
    grid-template-columns: minmax(8em, 1fr) minmax(8em, 1.2fr);
    align-items: center;
    min-height: 2.4em;
    padding: 0;
    border-bottom: var(--dynamic-form-row-border-width, 1px) solid var(--dynamic-form-row-border-color, color-mix(in srgb, var(--color-dynamic-form-component-border) 55%, transparent));
    border-left: var(--dynamic-form-row-border-width, 1px) solid var(--dynamic-form-row-border-color, color-mix(in srgb, var(--color-dynamic-form-component-border) 55%, transparent));
    border-right: var(--dynamic-form-row-border-width, 1px) solid var(--dynamic-form-row-border-color, color-mix(in srgb, var(--color-dynamic-form-component-border) 55%, transparent));
}

.component.dynamic-form.has-label-width .dynamic-form-row {
    grid-template-columns: var(--dynamic-form-label-width) minmax(8em, 1fr);
}

.component.dynamic-form .dynamic-form-column-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    margin-left: -3px;
    cursor: col-resize;
    z-index: 3;
    pointer-events: auto;
}

.component.dynamic-form .dynamic-form-column-resize-handle:hover,
.component.dynamic-form .dynamic-form-column-resize-handle.is-resizing {
    background-color: rgba(255, 255, 255, 0.2);
}

.component.dynamic-form .dynamic-form-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.75em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0;
    border-left: var(--dynamic-form-row-border-width, 1px) solid var(--dynamic-form-row-border-color, color-mix(in srgb, var(--color-dynamic-form-component-border) 55%, transparent));
    border-radius: 0;
    background: var(--dynamic-form-input-bg-color, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value:focus-within {
    background: var(--dynamic-form-input-bg-color-focus, rgba(255, 255, 255, 0.28));
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent !important;
    font: inherit;
    box-shadow: none;
    overflow: hidden;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label:not(.logical) > input {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dynamic-form-input-fg-color, inherit) !important;
    border: 0;
    border-radius: 0;
    padding: 0.35em 0.75em;
    text-align: left;
    outline: none;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label:not(.logical) > input:focus {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.logical {
    justify-content: start;
    padding-left: 0.75em;
    border-radius: 3px;
    color: var(--dynamic-form-input-fg-color, inherit);
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.logical > .inputLabel {
    background: transparent;
    height: .9em;
    width: .9em;
    border: 2px solid currentColor;
    position: relative;
    z-index: 0;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.logical > input {
    /* Перебиваем display:none — иначе нет фокуса и :focus-within фона */
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label:not(.logical) {
    position: relative;
    width: 100%;
    height: 100%;
}


.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.datetime-local,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.date,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.time,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.integer,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.float {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    color: var(--dynamic-form-input-fg-color, inherit);
    width: 100%;
    justify-content: flex-start;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.datetime-local > input,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.date > input,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.time > input,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.integer > input,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.float > input {
    width: 100%;
    flex: 0 1 auto;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.integer > input,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.float > input {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: number-input;
    margin-right: 0;
    width: 100%;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.integer > input::-webkit-inner-spin-button,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.integer > input::-webkit-outer-spin-button,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.float > input::-webkit-inner-spin-button,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.float > input::-webkit-outer-spin-button {
    display: block;
    height: 1.2em;
    margin: 0;
    opacity: 1;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.datetime-local > .inputLabel,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.date > .inputLabel,
.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.time > .inputLabel {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    justify-content: center;
    padding-right: 11px;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input .inputLabel {
    background: transparent;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.textarea {
    height: 100%;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.textarea > textarea {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dynamic-form-input-fg-color, inherit) !important;
    border: 0;
    border-radius: 0;
    padding: 0.35em 0.75em;
    text-align: left;
    outline: none;
    resize: vertical;
    min-height: 4em;
    height: 4em;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input > label.textarea > textarea:focus {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
}

.component.dynamic-form .dynamic-form-row:has(> .dynamic-form-value > .component.input > label.textarea) {
    align-items: baseline;
    min-height: 4em;
}

.component.dynamic-form .dynamic-form-row:has(> .dynamic-form-value > .component.input > label.textarea) > .dynamic-form-value {
    height: auto;
}

.component.dynamic-form .dynamic-form-row .dynamic-form-value:has(> .component.input.is-disabled) {
    opacity: 0.65;
    cursor: default;
}

.component.dynamic-form .dynamic-form-row.is-dirty > .dynamic-form-value {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dynamic-form-component-foreground) 45%, transparent);
}

.component.dynamic-form.is-saving {
    pointer-events: none;
}

.mode-editor .component.dynamic-form .dynamic-form-row .dynamic-form-value > .component.input {
    pointer-events: none;
}


/*
    Map
*/

.component.map {
    overflow: hidden;
}

.component.map > .map-container {
    display: block;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
        cursor: default;
}

/* .component.map.is-disabled > .map-container {
    pointer-events: none;
} */

.component.map .custom-map-marker {
    box-sizing: border-box;
}

.component.map .custom-map-marker svg {
    display: block;
    position: relative;
    top: 7%; /* mdi:map-marker icon specific */
    width: 100%;
    height: 100%;
}

.component.map > .map-container .leaflet-popup-content-wrapper {
	box-shadow: 0 0 1rem rgb(0 0 0 / 20%);
	border-radius: 0.25rem;
}

/* .component.map ymaps[class*=copyright] {
	display: none !important;
} */

.mode-editor .component.map > .map-container {
    pointer-events: none;
}

.component.map.is-loading > * {
    display: none;
}

.component.map.is-loading > .preloader {
    display: flex;
}

.component.map .leaflet-popup-content {
	overflow-wrap: break-word;
}

/*
    Indicator
*/

.component.indicator {
    display: flex;
    overflow: hidden;
    --progress: 0;
}

.component.indicator.horizontal {
    flex-flow: row;
    align-items: flex-start;
}

.component.indicator.vertical {
    flex-flow: column;
    justify-content: flex-end;
}

.component.indicator > .thumb {
    box-sizing: border-box;
    background-color: currentColor;
}

.component.indicator.horizontal > .thumb {
    width: calc(100% * var(--progress));
    height: 100%;
}

.component.indicator.vertical > .thumb {
    width: 100%;
    height: calc(100% * var(--progress));
}

/*
    File storage
*/

.component.file-storage .listview {
    min-width: 100%;
    min-height: 100%;
    width: 0;
    height: 0;
    overflow: hidden;
    background-color: inherit;
    display: flex;
    flex-direction: column;
}

.component.file-storage .listview > .head > .actions > .item,
.component.file-storage .listview > .head > .path > .item,
.component.file-storage .listview .form .btn {
    color: var(--color-listview-component-head-item-foreground);
    background-color: var(--color-listview-component-head-item-background);
}

.component.file-storage .listview > .head > .actions > .item.is-disabled,
.component.file-storage .listview > .head > .actions > .item.is-disabled:hover {
    color: var(--color-listview-component-head-item-foreground);
    background-color: var(--color-listview-component-head-item-background);
}

.component.file-storage .listview > .head > .actions > .item.is-disabled > .btn,
.component.file-storage .listview > .head > .path > .item.is-disabled > .btn {
    cursor: default;
}

.component.file-storage .listview .form .btn.is-disabled {
    cursor: default;
    opacity: 0.5;
}

.component.file-storage .listview > .head,
.component.file-storage .listview > .list {
    background: none;
    box-shadow: none;
    width: 100%;
}

.component.file-storage .listview > .list > .message {
    color: var(--color-listview-component-message-foreground);
    background-color: var(--color-listview-component-message-background);
}

.component.file-storage .listview > .head,
.component.file-storage .listview > .list {
    overflow-y: scroll;
}

.component.file-storage .listview > .head > .actions > .item {
    background-color: var(--color-listview-component-head-item-background);
}

.component.file-storage .listview > .list > .item {
    background-color: var(--color-listview-component-item-background);
}

.component.file-storage .listview > .list > .item > .content > .filename {
    background-color: var(--color-listview-component-item-filename-background);
    opacity: 1;
}

.component.file-storage .listview > .head > .path > .path-content,
.component.file-storage .listview .form .name,
.component.file-storage .listview .form .url,
.component.file-storage .listview .form .question {
    background-color: var(--color-listview-component-item-background);
}

.component.file-storage .listview > .head {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.component.file-storage .listview > .list {
    /* flex-grow: 1; */
}


/*
    Composite state
*/

.component.composite-state {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.component.composite-state > * {
    width: 100%;
    height: 100%;
}

.mode-viewer .component.composite-state {
    display: none;
}


/*
    DatasetsList
*/

.component.datasets-list {
    display: flex;
    flex-direction: column;
}

.component.datasets-list .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    min-height: var(--component-datasets-list-min-item-height);
    box-sizing: border-box;
}

.component.datasets-list .item > * + * {
    margin-left: 0.5em;
}

.component.datasets-list .item > .color {
    width: 0.8em;
    height: 0.8em;
    border-radius: 0.15em;
    overflow: hidden;
}

.component.datasets-list .item > button {
    min-width: auto;
    height: 1.25em;
    display: inline-flex;
}

.component.datasets-list .item > span {
    flex: 1;
    line-height: 1;
}

.component.datasets-list.cut-titles .item > span {
    text-overflow: ellipsis;
    overflow: hidden;
    /* height: 1em; */
    width: 100%;
    box-sizing: border-box;
    text-wrap: nowrap;
}

.component.datasets-list > .datasets-list-wrapper {
    min-width: 100%;
    width: 0;
    min-height: 100%;
    height: 0;
}


/*
    Container
*/

.component.container.layout-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.component.container.layout-column-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.component.container.layout-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.component.container.layout-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* align-content: start; */
}

.component.container.layout-column > .component,
.component.container.layout-column-wrap > .component,
.component.container.layout-row > .component,
.component.container.layout-row-wrap > .component {
    position: static;
    margin: 0 !important;
    flex-shrink: 0;
}

.mode-viewer .component.container.fit-to-screen {
    position: absolute;
    margin: 0 !important;
    left: 0;
    top: 0;
    width: 100vw !important;
    height: 100vh !important;
}

.component.container.layout-column.flow-x-align-start,
.component.container.layout-column-wrap.flow-x-align-start {
    align-content: flex-start;
}

.component.container.layout-column.flow-x-align-center,
.component.container.layout-column-wrap.flow-x-align-center {
    align-content: center;
}

.component.container.layout-column.flow-x-align-stretch,
.component.container.layout-column-wrap.flow-x-align-stretch {
    align-content: stretch;
}
/*.component.container.layout-column.flow-x-align-stretch {
    align-items: stretch !important;
}*/

/*.component.container.layout-column.flow-x-align-stretch > .component,
.component.container.layout-column-wrap.flow-x-align-stretch > .component {
    width: auto !important;
}*/

.component.container.layout-column.flow-x-align-end,
.component.container.layout-column-wrap.flow-x-align-end {
    align-content: flex-end;
}

.component.container.layout-column.flow-x-align-space-around,
.component.container.layout-column-wrap.flow-x-align-space-around {
    align-content: space-around;
}

.component.container.layout-column.flow-x-align-space-between,
.component.container.layout-column-wrap.flow-x-align-space-between {
    align-content: space-between;
}

.component.container.layout-column.flow-x-align-space-evenly,
.component.container.layout-column-wrap.flow-x-align-space-evenly {
    align-content: space-evenly;
}

.component.container.layout-row.flow-x-align-start,
.component.container.layout-row-wrap.flow-x-align-start {
    justify-content: flex-start;
}

.component.container.layout-row.flow-x-align-center,
.component.container.layout-row-wrap.flow-x-align-center {
    justify-content: center;
}

.component.container.layout-row.flow-x-align-stretch,
.component.container.layout-row-wrap.flow-x-align-stretch {
    justify-content: stretch;
}

.component.container.layout-row.flow-x-align-stretch > .component,
.component.container.layout-row-wrap.flow-x-align-stretch > .component {
    width: auto !important;
    flex-grow: 1;
}

.component.container.layout-row.flow-x-align-end,
.component.container.layout-row-wrap.flow-x-align-end {
    justify-content: flex-end;
}

.component.container.layout-row.flow-x-align-space-around,
.component.container.layout-row-wrap.flow-x-align-space-around {
    justify-content: space-around;
}

.component.container.layout-row.flow-x-align-space-between,
.component.container.layout-row-wrap.flow-x-align-space-between {
    justify-content: space-between;
}

.component.container.layout-row.flow-x-align-space-evenly,
.component.container.layout-row-wrap.flow-x-align-space-evenly {
    justify-content: space-evenly;
}

.component.container.layout-column.flow-y-align-start,
.component.container.layout-column-wrap.flow-y-align-start {
    justify-content: flex-start;
}

.component.container.layout-column.flow-y-align-center,
.component.container.layout-column-wrap.flow-y-align-center {
    justify-content: center;
}

.component.container.layout-column.flow-y-align-stretch,
.component.container.layout-column-wrap.flow-y-align-stretch {
    justify-content: stretch;
}

.component.container.layout-column.flow-y-align-stretch > .component,
.component.container.layout-column-wrap.flow-y-align-stretch > .component {
    height: auto !important;
    flex-grow: 1;
}

.component.container.layout-column.flow-y-align-end,
.component.container.layout-column-wrap.flow-y-align-end {
    justify-content: flex-end;
}

.component.container.layout-column.flow-y-align-space-around,
.component.container.layout-column-wrap.flow-y-align-space-around {
    justify-content: space-around;
}

.component.container.layout-column.flow-y-align-space-between,
.component.container.layout-column-wrap.flow-y-align-space-between {
    justify-content: space-between;
}

.component.container.layout-column.flow-y-align-space-evenly,
.component.container.layout-column-wrap.flow-y-align-space-evenly {
    justify-content: space-evenly;
}

.component.container.layout-row.flow-y-align-start,
.component.container.layout-row-wrap.flow-y-align-start {
    align-content: flex-start;
}

.component.container.layout-row.flow-y-align-center,
.component.container.layout-row-wrap.flow-y-align-center {
    align-content: center;
}

.component.container.layout-row.flow-y-align-stretch,
.component.container.layout-row-wrap.flow-y-align-stretch {
    align-content: stretch;
}

/*.component.container.layout-row.flow-y-align-stretch > .component,
.component.container.layout-row-wrap.flow-y-align-stretch > .component {
    height: auto !important;
}*/

.component.container.layout-row.flow-y-align-end,
.component.container.layout-row-wrap.flow-y-align-end {
    align-content: flex-end;
}

.component.container.layout-row.flow-y-align-space-around,
.component.container.layout-row-wrap.flow-y-align-space-around {
    align-content: space-around;
}

.component.container.layout-row.flow-y-align-space-between,
.component.container.layout-row-wrap.flow-y-align-space-between {
    align-content: space-between;
}

.component.container.layout-row.flow-y-align-space-evenly,
.component.container.layout-row-wrap.flow-y-align-space-evenly {
    align-content: space-evenly;
}

.component.container.items-align-start {
    align-items: flex-start;
}

.component.container.items-align-center {
    align-items: center;
}

.component.container.items-align-stretch {
    align-items: stretch;
}

.component.container.layout-column.items-align-stretch > .component,
.component.container.layout-column-wrap.items-align-stretch > .component {
    width: auto !important;
}

.component.container.layout-row.items-align-stretch > .component,
.component.container.layout-row-wrap.items-align-stretch > .component {
    height: auto !important;
}

.component.container.items-align-end {
    align-items: flex-end;
}


/*
    SearchableSelect
*/

.component.searchableSelect .datalist {
    max-height: 0;
    overflow-y: auto;
    transition: all 0.2s ease-out;
    transition-property: max-height;
    position: relative;
    z-index: 100001;

        background-color: inherit;
        color: inherit;
        border-radius: 0 0 0.25rem 0.25rem;
        overflow-y: scroll;
}

.component.searchableSelect.is-shown .datalist {
    max-height: var(--datalist-max-height);
        box-shadow: 0 0 4rem rgba(0,0,0,0.2);
}

.component.searchableSelect > .label {
    width: 100%;
    height: 100%;
    display: flex;
	align-items: stretch;
	justify-content: stretch;
    flex-flow: column;
    background-color: inherit;
    color: inherit;
}

.component.searchableSelect > .label > input {
    width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
    border-radius: 0.25rem;
    transition: all 0.2s ease-out;
    transition-property: border-radius, border-bottom-left-radius, border-bottom-right-radius;
    position: relative;
}

.component.searchableSelect > .label > input:focus {
    outline: 0;
}

.component.searchableSelect > .label > span {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.component.searchableSelect.is-shown > .label > input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 100002;
}

.component.searchableSelect .option {
    cursor: pointer;
        padding: 0.4rem 0.5rem;
        display: flex;
        align-items: center;
}

.component.searchableSelect .option.is-selected,
.component.searchableSelect .option:hover {
    background-color: rgba(0,0,0,0.1);
}

.component.searchableSelect .option.is-invisible {
    display: none;
}

.component.searchableSelect .datalist-wrapper {
    height: 0;
    overflow: visible;
    background-color: inherit;
    color: inherit;
}


/*
    Disabled user selection when component is dragged
*/

.component.is-selected,
.component.is-selected * {
    user-select: none !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/*
    Disable native user selection is editor mode
*/

.mode-editor * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/*
@keyframes component-blink {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 3rem rgba(255,255,255,0);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 3rem rgba(255,255,255,0.5);
    }
}
*/

/*
.component.selected {
    -outline: 2px solid rgba(255,0,0,0.5);
    -box-shadow: 0 0 3rem rgba(255,255,255,0.2);

    outline-style: solid;
    outline-color: rgba(217, 242, 252, 0.5);
    animation-name: component-blink-outline;
    animation-iteration-count: infinite;
    animation-duration: 0.25s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
}

@keyframes component-blink-outline {
    0% {
        outline-width: 0px;
    }
    100% {
        outline-width: 5px;
    }
}
*/