html {
    --component-table-row-height: 1.5rem;
    --component-table-pagination-height: 1.5rem;
    --component-table-button-padding-lr: 1rem;
    --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 .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: 1.5em;
    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;
}

.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.with-subtotals .subtotals {
    display: none;
}

.component.table.with-subtotals .subtotals {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    height: var(--component-table-row-height);
    max-height: var(--component-table-row-height);
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
}

.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
{
    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 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 {
    display: none;
}

/*
    Line
*/

.component.line {
    overflow: hidden;
}

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


/*
    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;
}


/*
    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 > .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;
    }
}
*/