.chart-v3 {
    width: 100%;
    height: 100%;
}

.color-editor .color {
    align-self: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100%;
    margin: 0.25rem;
    display: inline-block;
    cursor: pointer;
}

.color-editor .color.green {
    background: var(--color-light-green);
}

.color-editor .color.green.selected {
    border: 0.25rem solid var(--color-green);
}

.color-editor .color.yellow {
    background: var(--color-light-yellow);
}

.color-editor .color.yellow.selected {
    border: 0.25rem solid var(--color-yellow);
}

.color-editor .color.red {
    background: var(--color-light-red);
}

.color-editor .color.red.selected {
    border: 0.25rem solid var(--color-red);
}

.color-editor .color.blue {
    background: var(--color-light-blue);
}

.color-editor .color.blue.selected {
    border: 0.25rem solid var(--color-blue);
}

.code-editor {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.code-editor textarea {
    background: #ffffff !important;
}

.codeflask--has-line-numbers pre.codeflask__flatten {
    width: auto;
}

.codeflask__lines {
    z-index: 3 !important;
    background: var(--body-bg);
}

.editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor .buttons {
    display: flex;
    flex-wrap: wrap;
    background: var(--main-ctrl-bg);
}

.editor .buttons .spacer {
    padding: 0.25rem;
}

.editor > div[role="textbox"] {
    flex: 1;
    outline: 0px solid transparent;
}

.editor > div[role="textbox"],
.editor > div[role="textbox"] * {
    cursor: text;
}

.editor > div[role="textbox"] {
    display: block;
    cursor: text !important;
    border: 1px solid var(--main-ctrl-bg);
    outline: none;
    background: var(--main-ctrl-bg);
    transition-duration: var(--transition);
    padding: 0.25rem;
    overflow: auto;
}

.editor > div[role="textbox"]:hover {
    border: 1px solid var(--main-ctrl-bg-hover);
    background: var(--main-ctrl-bg-hover);
}

.editor > div[role="textbox"]:active,
.editor > div[role="textbox"]:focus {
    border: 1px solid var(--main-ctrl-bg-pressed);
    background: var(--main-ctrl-bg-light);
}

.editor-document > h1 {
    margin: 0;
}

.editor > div[role="textbox"] .gallery,
.editor-document .gallery {
    position: relative;
    width: 100%;
    min-height: 2rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.editor > div[role="textbox"] .gallery.selected {
    border: 1px solid var(--color-1);
}

.editor > div[role="textbox"] .gallery > .icon {
    margin-right: 0.25rem;
}

.editor > div[role="textbox"] .gallery .toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.editor > div[role="textbox"] .gallery .toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    box-shadow: var(--default-shadow-sm);
}

.editor > div[role="textbox"] .gallery .toolbar button,
.editor .gallery .toolbar button * {
    cursor: pointer;
}

.editor > div[role="textbox"] .gallery .thumb,
.editor-document .gallery .thumb {
    width: 128px;
    height: 128px;
    position: relative;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.editor > div[role="textbox"] .gallery.large .thumb,
.editor-document .gallery.large .thumb {
    width: 192px;
    height: 192px;
}

.editor > div[role="textbox"] .gallery .thumb img,
.editor-document .gallery .thumb img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.editor > div[role="textbox"] .gallery .thumb img,
.editor > div[role="textbox"] .gallery .thumb button,
.editor > div[role="textbox"] .gallery .thumb button *,
.editor-document .gallery .thumb img,
.editor-document .gallery .thumb button,
.editor-document .gallery .thumb button * {
    cursor: pointer;
}

.editor > div[role="textbox"] .gallery .thumb button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    box-shadow: var(--default-shadow-sm);
}

.editor > div[role="textbox"] .image,
.editor-document .image {
    position: relative;
    width: 100%;
    min-height: 2rem;
    text-align: center;
}

.editor > div[role="textbox"] .image.selected {
    border: 1px solid var(--color-1);
}

.editor > div[role="textbox"] .image .toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.editor > div[role="textbox"] .image .toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    box-shadow: var(--default-shadow-sm);
}

.editor > div[role="textbox"] .image .toolbar button,
.editor > div[role="textbox"] .image .toolbar button * {
    cursor: pointer;
}

.editor > div[role="textbox"] .image img,
.editor-document .image img {
    width: 100%;
    max-height: 40vh;
    object-fit: contain;
    cursor: pointer;
}

.editor > div[role="textbox"] .image.half img,
.editor-document .image.half img {
    width: 50%;
    max-height: 25vh;
}

.editor > div[role="textbox"] .image.selected img {
    opacity: 0.5;
}

.image-zoomed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.editor > div[role="textbox"] a,
.editor-document a {
    color: var(--color-1);
}

.editor-document a,
.editor-document a * {
    cursor: pointer;
}

.editor > div[role="textbox"] .link button {
    cursor: pointer;
    padding: 0 0.1rem;
    margin: 0 0.1rem;
}

@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.adaptive-input:focus {
    animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.01s;
}

.adaptive-overlay {
    background: var(--container-bg);
    color: var(--container-text);
    position: fixed;
    z-index: 11000;
    top: 10vh;
    left: 20vw;
    width: 60vw;
    box-shadow: var(--default-shadow) !important;
    display: flex;
    box-shadow: var(--default-shadow);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    animation: var(--animation-slide-down);
}

.adaptive-overlay input {
    margin: 0;
    padding: 0.5rem !important;
    flex: 1;
}

.adaptive-overlay .content {
    display: flex;
    flex-direction: row;;
    margin: 0.25rem;
}

.adaptive-overlay .title {
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.adaptive-overlay .title h1 {
    margin: 0.5rem;
    font-size: 1.2rem;
}

.color-selector {
    position: relative;    
}

.color-selector .color,
.color-popup .color {
    width: 2rem;
    height: 2rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    border: 1px solid #000000;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-selector .color *,
.color-popup .color * {
    cursor: pointer !important;
}

.color-selector .color svg,
.color-popup .color svg {
    color: #808080;
}

.color-selector .color.selected,
.color-popup .color.selected {
    border: 2px dashed white;
    outline: 2px solid black;
}

.color-popup .colors {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.column-list {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.column-list .cl-menu {
    margin: 0.25rem;
    display: flex;
}

.column-list .cl-menu .search {
    flex: 1;
}

.column-list .cl-menu .reduce,
.column-list .cl-menu .hide {
    margin-left: 0.25rem;
}

.column-list .cl-menu .cancel,
.column-list .cl-menu .reduce,
.column-list .cl-menu .hide {
    padding: 0.25rem;
}

.column-list .table {
    padding-left: 0.25rem;
    background: var(--container-bg);
    position: sticky;
    top: 0;
    height: 29px;
    display: flex;
    align-items: center;
    transition-property: background, color;
    transition-duration: var(--transition);
}

.column-list .table:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.column-list .table:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.column-list .table .title {
    margin: 0.25rem;
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    margin-left: 0;
}

.column-list .table .icon {
    margin: 0 0.25rem;
}

.column-list .table,
.column-list .table * {
    cursor: pointer !important;
}

.column-list .column {
    height: 29px;
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
}

.column-list .column.indent {
    margin-left: 1rem;
}

.column-list .column .title .icon {
    margin-right: 0.25rem;
}

.column-list .column .title {
    padding: 0.25rem 0;
    flex: 1;
    display: flex;
    align-items: center;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    transition-property: background, color;
    transition-duration: var(--transition);
}

.column-list .column .title:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.column-list .column .title:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.column-list .column.draggable .title .text {
    flex: 1;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-list .column.draggable .title,
.column-list .column.draggable .title * {
    cursor: move !important;
}

.column-list .column.clickable .title,
.column-list .column.clickable .title * {
    cursor: pointer !important;
}

.column-list .column.draggable .title .indicator {
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
}

.column-list .column .buttons {
    display: none;
}

.column-list .column:hover .buttons {
    display: block;
}

.column-list .column .buttons button {
    padding: 0.25rem;
}

.column-list .column .toggle {
    padding: 0.25rem;
    transition-duration: var(--transition);
}

.column-list .column .toggle:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.column-list .column .toggle:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.column-list .column .toggle,
.column-list .column .toggle * {
    cursor: pointer !important;
}

.column-list .labels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 100px;
    position: relative;
    margin-top: 0.25rem;
}

.column-list .labels .spacer {
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    height: 15px;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.column-list .labels:hover {
    max-height: none;
}

.column-list .labels:hover .spacer {
    display: none;
}

.column-list .labels .badge,
.column-list .labels .badge * {
    cursor: pointer;
}

.column-list .labels .badge {
    margin-left: 0.25rem;
    margin-bottom: 0.25rem;
}

.datefields {
    display: flex;
    overflow: hidden;
    align-items: flex-end; /* Safari bug: baseline is broken */
    padding-top: 1rem;
    padding-bottom: 0.25rem;
}

.datefields input {
    flex: 1 1;
    min-width: 0;
    margin: 0 0.1rem;
    position: relative; /* Safari bug: move to baseline */
    top: 0.25rem;
}

.datefields input:first-child {
    margin-left: 0;
}

.datefields input:last-child {
    margin-right: 0;
}

.datefields .spacer {
    padding: 0.5rem;
}

.datefields .label {
    position: relative;
    width: 0;
    top: -1.75rem;
    left: 0.25rem;
}

.datefields input.invalid {
    border: 1px solid #ff0000 !important;
}

.datepicker {
    display: flex;
    flex-direction: column;
    max-width: 350px;
}

.datepicker.dashboard {
    max-width: calc(var(--vh) * 35);
}

.datepicker.daterow {
    max-width: unset;
    width: 100%;
}

.datepicker.expanded {
    padding: 0.25rem;
    box-shadow: var(--default-shadow-sm);
}

.datepicker.expanded.dashboard {
    padding: calc(var(--vh) * 0.5);
}

.datepicker select {
    text-align: center;
}

.datepicker .header {
    display: flex;
}

.datepicker .header select {
    flex: 1;
}

.datepicker table {
    width: 100%;
    margin: 0.5rem 0;
}

.datepicker.dashboard table {
    margin: calc(var(--vh)) 0;
}

.datepicker table * {
    text-align: center;
    min-width: 0;
}

.datepicker table th {
    width: 14.2857%;
}

.datepicker table td:not(:empty) {
    cursor: pointer;
    transition-duration: var(--transition);
}

.datepicker table td:empty::before {
    content: " ";
}

.datepicker table td:not(:empty):hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.datepicker table td.selected,
.datepicker table td:not(:empty):active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.datepicker table td.start {
    border-radius: 0.75rem 0 0 0.75rem;
}

.datepicker.dashboard table td.start {
    border-radius: calc(var(--vh) * 3) 0 0 calc(var(--vh) * 3);
}

.datepicker table td.inside {
    background: var(--main-ctrl-bg);
}

.datepicker table td.end {
    border-radius: 0 0.75rem 0.75rem 0;
}

.datepicker.dashboard table td.end {
    border-radius: 0 calc(var(--vh) * 3) calc(var(--vh) * 3) 0;
}

.datepicker .time {
    display: flex;
}

.datepicker .time button {
    padding: 0.5rem 0.75rem;
}

.datepicker.dashboard .time button {
    padding: calc(var(--vh)) calc(var(--vh) * 1.5);
}

.datepicker .time select {
    width: 4rem;
}

.datepicker.dashboard .time select {
    width: calc(var(--vh) * 8);
}

.datepicker .time > div {
    padding: 0.5rem;
    background: var(--main-ctrl-bg);
    text-align: right;
}

.datepicker.dashboard .time > div {
    padding: calc(var(--vh));
}

.datepicker .time > div:not(:first-child) {
    background: var(--main-ctrl-bg);
    flex: 1;
}

.datepicker .input {
    display: flex;
    margin-bottom: 0.25rem;
}

.datepicker.dashboard .input {
    margin-bottom: calc(var(--vh) * 0.5);
}

.datepicker .input input {
    flex: 1;
}

.datepicker .input input.start {
    text-align: right;
}

.datepicker .input input.invalid {
    border: 1px solid #ff0000 !important;
}

.rich-search {
    display: flex;
    background: var(--main-ctrl-bg);
}

.rich-search select {
    width: 10em;
}

.rich-search input {
    flex: 1;
}

.rich-search > .icon {
    padding: 0.25rem 0 0.25rem 0.5rem;
    align-self: center;
}

.container {
    margin: 1px;
    background: var(--container-bg);
    color: var(--container-text);
    overflow: hidden;
}

.container .container-title {
    background: var(--container-header-bg);
    color: var(--container-header-text);
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.container-title .placeholder {
    padding: 0.5rem;
}

.container-title select {
    display: inline-block;
    width: 10rem;
}

.container-title .select-group {
    display: flex;
    flex-wrap: wrap;
}

.container .container-title-inner {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container .container-collapse-icon {
    flex-shrink: 0;
    padding: 0.5rem;
    cursor: pointer !important;
}

.container .container-collapse-icon * {
    cursor: pointer !important;
}

.container .container-collapse-icon:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.container .container-collapse-icon:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.container-title h1 {
    font-size: 0.875rem;
    margin: 0.5rem 0.25rem;
}

.resizable {
    position: relative;
    height: 100%;
    width: 100%;
}

.resizable .r-divider {
    position: absolute;
    background-color: transparent;
}

.resizable .r-divider:hover {
    z-index: 10000;
    background-color: var(--main-ctrl-bg-pressed);
}

.resizable .r-divider:active {
    background-color: var(--main-ctrl-bg-pressed);
    opacity: 0.5;
}

.resizable .r-container {
    display: flex;
    overflow: hidden;
}

.dialog-container {
    background: rgba(25, 25, 25, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12000;
    animation: var(--animation-fade-in);
    margin: 0 !important;
}

.dialog {
    background: var(--container-bg);
    color: var(--container-text);
    position: fixed;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 70%;
    z-index: 12000;
    display: flex;
    flex-flow: column;
    box-shadow: var(--default-shadow);
    border-radius: 0.5rem;
    overflow: hidden;
    animation: var(--animation-fade-in);
}

.dialog.large {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
}

.dialog.small {
    left: 35%;
    width: 30%;
}

.dialog.tiny {
    top: 35%;
    left: 35%;
    width: 30%;
    height: 30%;
}

.dialog > .top,
.dialog > .buttons {
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.dialog > .top h1 {
    margin: 0.5rem;
    font-size: 1.2rem;
}

.dialog > .top h1:not(:last-child) {
    margin-bottom: 0;
}

.dialog > .top label,
.dialog > .top button {
    padding: 0.75rem;
}

.dialog > .buttons {
    display: flex;
    justify-content: end;
    padding-right: 0.25rem;
}

.dialog > .buttons button {
    padding: 0.75rem;
}

.dialog > .buttons input {
    flex: 1;
    margin: 0.25rem;
}

.dialog > .content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    position: relative;
    margin: 0.25rem;
}

.dialog > .menu button {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
}

.dialog > .menu button:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.dialog > .menu button:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.dialog > .menu button:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

.dialog > .menu button.selected {
    box-shadow: var(--menu-ctrl-bg-selected) inset 0px -2px;
}

.dialog > .menu label {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
}

.dialog > .menu label:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.dialog > .menu label:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.dialog > .menu label:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

.dialog .filelist {
    flex: 1;
    overflow-y: auto;
}

.dialog .filelist .file {
    display: flex;
    border-bottom: 1px solid var(--table-stripe-bg);
}

.dialog .filelist .file,
.dialog .filelist .file * {
    cursor: pointer !important;
}

.dialog .filelist .file:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dialog .filelist .file:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dialog .filelist .file .title {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    flex: 2;
    flex-shrink: 0;
    padding: 0.25rem;
}

.dialog .filelist .file .user,
.dialog .filelist .file .date {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    flex: 1;
    flex-shrink: 0;
    padding: 0.25rem;
}

.dialog .filelist .file .delete {
    flex-shrink: 0;
    padding: 0.25rem;
}

.dialog .filelist .file:hover .delete {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.dialog .filelist .file .delete:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dialog .filelist .file .delete:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dialog .columns {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.error {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    padding: 0.25rem;
}

.error h1 {
    display: flex;
    align-items: center;
}

.error h1 .icon {
    margin-right: 0.5rem;
}

.error .container {
    padding: 0.5rem;
}

.error button {
    margin-top: 0.5rem;
    margin-right: 0.25rem;
}

.error .error-details {
    margin-top: 0.5rem;
    flex: 1;
    overflow: auto;
    -webkit-user-select: text;
    user-select: text;
    cursor: text !important;
}

.error .error-details p {
    font-family: monospace;
    -webkit-user-select: text;
    user-select: text;
    cursor: text !important;
}

#hover {
    display: none;
    position: absolute;
    z-index: 15000;
}

#hover.visible {
    display: block;
}

#hover-inner {
    position: absolute;
    box-shadow: var(--default-shadow);
    max-width: 350px;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    border-radius: 0.25rem;
    white-space: pre;
}

#hover-inner.bottom {
    top: 25px;
}

#hover-inner.top {
    bottom: 25px;
}

#hover-inner.left {
    right: 25px;
}

#hover-inner.right {
    left: 25px;
}

.navigation {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: -1px;
    background: var(--nav-active-bg);
    color: var(--nav-text);
}

.navigation .navigation-spacer {
    margin-left: 0.75rem;
    margin-right: -0.75rem;
    font-size: 1rem;
    margin-top: -4px;
}

.navigation .navigation-item {
    display: flex;
    align-items: center;
    padding: 1rem 0.75rem;
    font-size: 1.2rem;
    transition-duration: var(--transition);
}

.navigation .navigation-item.inactive {
    opacity: 0.8;
}

.navigation .navigation-item:not(.inactive) div:first-child {
    border-bottom: 1px solid var(--color-1);
    margin-bottom: -1px;
}

.navigation .navigation-item .icon-container {
    margin-right: 0.25rem;
}

.navigation .navigation-item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.navigation .navigation-item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.navigation .navigation-item,
.navigation .navigation-item * {
    cursor: pointer !important;
}

.dashboard .container > .edit .settings .owner {
    display: flex;
    align-items: center;
}

.dashboard .container > .edit .settings .owner .name {
    flex: 1;
}

.dashboard .container > .edit .settings .owner .name .icon {
    margin-right: 0.25rem;
}

.dialog.setowner .content {
    overflow: auto;
}

.permissions {
    display: flex;
    flex-direction: column;
}

.permissions h1 {
    font-size: 0.875rem;
    margin: 0.25rem;
    margin-bottom: 0;
}

.permissions > button {
    margin: 0.25rem;
}

.permissions .group {
    margin: 0.25rem;
    padding: 0;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-align: left;
}

.permissions .group > .icon {
    padding: 0.5rem;
}

.permissions .group .title {
    padding: 0.5rem 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.permissions .group .remove {
    padding: 0.5rem;
}

.permissions .group .remove,
.permissions .group .remove * {
    cursor: pointer;
}

@keyframes alert {
    0% {
        opacity: 0.7;
    }

    60% {
        opacity: 0.7;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes alertProgress {
    0% {
        width: 100%;
    }

    60% {
        width: 25%;
    }

    80% {
        width: 0%;
    }

    100% {
        width: 0%;
    }
}

#alerts {
    position: fixed;
    z-index: 12500;
    bottom: 50px;
    right: 50px;
    width: 20%;
    pointer-events: none;
}

#alerts .alert {
    position: relative;
    width: 100%;
    animation-name: alert;
    animation-duration: 5s;
    animation-timing-function: linear;
    box-shadow: var(--default-shadow);
}

#alerts .alert .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    animation-name: alertProgress;
    animation-duration: 5s;
    animation-timing-function: linear;
}

.alert-fixed {
    position: fixed;
    z-index: 12500;
    bottom: 50px;
    right: 50px;
    width: 20%;
    box-shadow: var(--default-shadow);
}

.context-menu-container {
    background: rgba(25, 25, 25, 0.001);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12500;
    animation: var(--animation-slide-down);
}

.context-menu-anchor {
    position: fixed;
    height: 0;
}

.context-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    background: var(--dropdown-bg);
    color: var(--dropdown-text);
    top: 0;
    min-width: 100%;
    max-width: 100%;
    box-shadow: var(--default-shadow);
    overflow-y: auto;
    z-index: 13000;
    border-radius: 0.25rem;
}

.context-menu.up {
    top: auto;
    bottom: 0;
    max-height: 50vh;
}

.context-menu > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    text-align: left;
    flex-shrink: 0;
}

.context-menu > div {
    padding: 0.5rem;
    padding-bottom: 0;
    color: var(--main-ctrl-text-muted)
}

.context-menu button {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
}

.context-menu button:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.context-menu button:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.context-menu button:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

#drag-label {
    display: none;
    padding: 0.5rem;
    background: var(--container-bg);
    color: var(--container-text);
    position: fixed;
    z-index: 14000;
    box-shadow: var(--default-shadow);
}

.drag-target-available {
    transition-duration: var(--transition);
}

.drag-target {
    background: var(--drag-target-bg);
}

.drag-hover {
    background: var(--drag-target-bg-hover);
}

button.dropdown {
    position: relative;
}

button.dropdown::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: relative;
    top: -0.1em;
}

.dropdown-menu-container {
    background: rgba(25, 25, 25, 0.001);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12500;
    animation: var(--animation-slide-down);
}

.dropdown-menu-anchor {
    position: fixed;
    height: 0;
}

.dropdown-menu {
    display: block;
    position: absolute;
    background: var(--dropdown-bg);
    color: var(--dropdown-text);
    top: 0;
    min-width: 100%;
    box-shadow: var(--default-shadow);
    overflow-y: auto;
    z-index: 13000;
}

.dropdown-menu.up {
    top: auto;
    bottom: 0;
}

.dropdown-menu.right {
    left: 0;
}

.dropdown-menu.left {
    right: 0;
}

.dropdown-menu > *:first-child {
    margin-top: 0.25rem;
}

.dropdown-menu > *:last-child {
    margin-bottom: 0.25rem;
}

.dropdown-menu > .settings-label,
.dropdown-menu > .settings-label:first-child {
    margin-top: 0.5rem;
    margin-left: 0.25rem;
}

.dropdown-menu button {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
    display: block;
    width: 100%;
    text-align: left;
    transition-duration: var(--transition);
    padding: 0.5rem;
    margin: 0.25rem 0;
}

.dropdown-menu button:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.dropdown-menu button:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.dropdown-menu button:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

.dropdown-menu button.selected {
    box-shadow: var(--menu-ctrl-bg-selected) inset 0px -2px;
}

.dropdown-menu > input {
    width: 100%;
}

.dropdown-menu label:not(:first-child) {
    width: 100%;
    margin-top: 0.5rem;
}

.import-error .content {
    overflow: auto;
}

.import-error .content div {
    white-space: pre;
    font-family: monospace;
}

#help {
    width: 25%;
    display: flex;
    flex-direction: column;
    margin-left: 2px;
}

#help .header {
    display: flex;
    align-items: center;
}

#help .header .title {
    flex: 1;
}

#help .header .icon,
#help .header .link,
#help .header .close {
    margin: 0 0.25rem;
}

.help-button,
.help-button *,
#help .header .link,
#help .header .link *,
#help .header .close,
#help .header .close * {
    cursor: pointer !important;
}

button.help-button {
    margin-top: auto;
}

#help .help-page {
    flex: 1;
}

.feather {
    vertical-align: text-bottom;
}

.icon-container .feather {
    vertical-align: top;
}

.icon-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    overflow: auto;
    align-items: start;
    align-content: start;
}

.icon-list > div {
    padding: 0.5rem;
    margin: 0.25rem;
}

.icon-list > div,
.icon-list > div * {
    cursor: pointer;
}

.icon-list > div:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
    border-radius: 0.25rem;
}

.icon-list > div:active,
.icon-list > div.selected {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
    border-radius: 0.25rem;
}

.label-editor {
    display: flex;
    padding: 0 0.25rem;
    align-items: stretch;
}

.label-editor button {
    padding: 0.25rem;
}

.label-editor input {
    flex: 1;
}

.label-suggestions {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem;
    animation: var(--animation-slide-down);
}

.label-suggestions .badge {
    display: block;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
}

.label-suggestions * {
    cursor: pointer;
}

.li {
    position: relative;
    height: 128px;
}

.li.fullscreen {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 18000;
}

.li .inner {
    width: 128px;
    height: 128px;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.li .inner .img-loading {
    width: 96px;
    height: 96px;
    margin: auto;
    left: 16px;
    top: 16px;
    position: absolute;
}

.li .inner .progress {
    display: flex;
    align-items: center;
    left: 0;
    top: 114px;
    width: 128px;
    height: 24px;
    position: absolute;
}

.li .inner .progress button {
    padding: 0;
}

.li .inner .progress .progress-outer {
    flex: 1;
    height: 8px;
    margin: 0 0.25rem;
    background: var(--main-ctrl-bg);
}

.li .inner .progress .progress-inner {
    left: 0;
    top: 0;
    height: 100%;
    background: var(--main-ctrl-bg-pressed);
    transition-duration: var(--transition);
}

.slider {
    margin: 0.5rem 12px;
    height: 20px;
    position: relative;
}

.slider-outer {
    display: flex;
    align-items: center;
}

.slider-outer .slider {
    flex: 1;
}

.slider-outer .label {
    margin: 0.25rem;
}

.slider .background {
    position: absolute;
    top: 6px;
    height: 8px;
    border-radius: 3px;
    background-color: #eee;
}

.slider .background-fixed {
    position: absolute;
    left: 0;
    top: 6px;
    height: 8px;
    width: 100%;
    background-color: var(--main-ctrl-bg);
}

.slider .handle {
    position: absolute;
    margin-left: -5px;
    top: 0;
    width: 10px;
    height: 20px;
    background-color: var(--color-1);
}

table thead th {
    position: relative;
}

table.t-sortable thead th,
table.t-sortable thead th * {
    cursor: pointer;
    position: relative;
}

table.t-sortable thead th:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

table.t-sortable thead th:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

table th > .icon:first-child {
    margin-right: 0.25rem;
}

table th .search {
    display: inline;
    margin: -0.25rem 0.25rem;
    float: right;
    width: 50%;
}

table th .filter {
    margin: -0.25rem;
    float: right;
    position: absolute;
    right: 0;
    top: 1px;
}

.table-dialog .content {
    overflow: auto;
}

.table-dialog .content button,
.table-dialog label {
    margin: 0.25rem;
    text-align: left;
}

.table-dialog input {
    flex: 1;
}

.table-dialog .row {
    margin: 0.25rem;
    display: flex;
}

.table-tabs {
    display: flex;
    justify-content: center;
}

.table-tabs button {
    margin: 0.25rem;
    min-width: 2.3em;
}

.virtual-scroller {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.cdroid {
    display: flex;
    flex-direction: column;
}

.cdroid .selection:not(.fullscreen) {
    max-width: 50%;
    min-width: 500px;
    animation: var(--animation-slide-left);
    box-shadow: var(--default-shadow);
    display: flex;
    flex-direction: column;
}

.compoundroid-details .content {
    margin: 0;
}

.compoundroid-details .content .cdroid {
    flex: 1;
    overflow: hidden;
}

.compoundroid-details .content .cdroid .container {
    flex: 1;
    margin: 0;
}

.cdroid .selection.fullscreen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cdroid .selection .details {
    overflow: auto;
    flex: 1;
    padding: 0.25rem;
}

.cdroid .selection .details .marked {
    background: var(--color-light-yellow);
    color: var(--color-yellow);
}

.cdroid .selection table,
.cdroid .selection table * {
    cursor: text;
    user-select: text;
}

.cdroid .selection td,
.cdroid .selection th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.cdroid .selection td {
    min-width: 100px;
}

.cdroid .selection .details .masterbatch-separator-2 {
    background: var(--color-light-gray);
    padding: 0.25rem;
}

.cdroid .selection .details .masterbatch-separator-3 {
    background: var(--color-light-blue);
    padding: 0.25rem;
}

.cdroid .selection .details .masterbatch-separator-4 {
    background: var(--color-light-yellow);
    padding: 0.25rem;
}

.cdroid .selection .details .masterbatch-separator-5 {
    background: var(--color-light-green);
    padding: 0.25rem;
}

.cdroid .selection .details .masterbatch-title-2,
.cdroid .selection .details .level-2 {
    background: var(--color-light-gray);
}

.cdroid .selection .details .masterbatch-title-3,
.cdroid .selection .details .level-3 {
    background: var(--color-light-blue);
}

.cdroid .selection .details .masterbatch-title-4,
.cdroid .selection .details .level-4 {
    background: var(--color-light-yellow);
}

.cdroid .selection .details .masterbatch-title-5,
.cdroid .selection .details .level-5 {
    background: var(--color-light-green);
}

.cdroid .selection .details .masterbatch-title-2 th,
.cdroid .selection .details .masterbatch-title-3 th,
.cdroid .selection .details .masterbatch-title-4 th,
.cdroid .selection .details .masterbatch-title-5 th {
    padding: 0;
}

.cdroid .selection .details .masterbatch-title-2 th select,
.cdroid .selection .details .masterbatch-title-3 th select,
.cdroid .selection .details .masterbatch-title-4 th select,
.cdroid .selection .details .masterbatch-title-5 th select {
    cursor: pointer;
}

.cdroid .selection .details .masterbatch-menu {
    display: flex;
    overflow: hidden;
}

.cdroid .selection .details .masterbatch-menu button {
    float: none;
    padding: 0.25rem;
}

.cdroid .selection .details .masterbatch-menu>select {
    padding: 0.25rem;
    width: auto;
}

.cdroid .selection .details .masterbatch-menu>span {
    padding: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.cdroid .selection .details table button,
.cdroid .selection .details table button * {
    cursor: pointer;
}

.cdroid .selection .details .container-title {
    margin: -0.25rem;
    margin-bottom: 0.5rem;
}
.cdroid .filters {
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.cdroid .filters>* {
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.cdroid .filters .filter {
    display: flex;
    overflow: hidden;
}

.cdroid .filters .filter * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.cdroid .filters .filter>:first-child {
    flex: 1;
}

.cdroid .filters .filter * {
    text-align: left;
}

.cdroid-filter-dialog .row {
    display: flex;
    margin-bottom: 0.25rem;
}

.cdroid-filter-dialog .row .rich-search {
    flex: 1;
}

.cdroid-filter-dialog .content > select {
    display: flex;
    margin-bottom: 0.25rem;
}

.cdroid-filter-dialog .row input {
    flex: 1;
}

.cdroid-filter-dialog .scroller {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cdroid-filter-dialog .scroller > * {
    margin: 0.25rem 0;
}

.cdroid .list-host {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.cdroid .list-host .row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.cdroid .list-host .row > :first-child {
    flex: 1;
}

.cdroid .recipes {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cdroid .recipes > .list {
    flex: 1;
    overflow: auto;
}

.cdroid .title {
    padding: 0.5rem;
}

.cdroid .title .icon {
    margin-right: 0.25rem;
}

.cdroid .censored {
    filter: blur(4px);
}

.cdroid .columns {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.cdroid .columns > * {
    margin: 0.25rem;
}

.cdroid .recipes > .list table button {
    float: none;
    margin: -0.25rem;
    margin-right: 0.25rem;
}

.cdroid .recipes > .list table .spacer {
    margin-right: 2rem;
}

.cdroid .settings {
    overflow: auto;
    padding: 0.5rem;
}

.cdroid .settings > .group {
    margin: 0.25rem;
    padding: 0.5rem;
    max-width: 400px;
    box-shadow: var(--default-shadow-sm);
    display: flex;
    flex-direction: column;
}

.cdroid .settings > .group .row {
    display: flex;
    overflow: visible;
}

.cdroid .settings > .group .row input,
.cdroid .settings > .group .row select {
    flex: 1;
}

.dashboard2 .sidebar .structure .calculation {
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
    margin: 0.25rem;
}

.dashboard2 .sidebar .structure .calculation > .icon {
    margin-right: 0.25rem;
}

.dashboard2 .sidebar .structure .calculation .notification,
.dialog.edit-dialog .notification {
    border-radius: 0.5rem;
    margin-right: 0.5rem;
    background-color: var(--color-1);
    color: white;
    padding: 0 0.25rem;
}

.dashboard2 .sidebar .structure .calculation,
.dashboard2 .sidebar .structure .calculation * {
    cursor: pointer;
}

.dashboard2 .sidebar .structure .calculation:hover {
    background: var(--main-ctrl-bg-hover);
}

.dashboard2 .sidebar .structure .calculation .title {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.dialog.edit-dialog textarea {
    overflow: auto;
    white-space: pre;
}

.dialog.edit-dialog .logs {
    flex: 1;
    overflow: auto;
    white-space: pre;
    font-family: monospace;
    -webkit-user-select: text;
    user-select: text;
}

.dashboard2 .layout-component button {
    padding: calc(var(--vh));
}

.dashboard2 .layout-component button .icon:first-child:not(:last-child) {
    margin-right: calc(var(--vh) * 0.5);
}

.dashboard2 .layout-component td {
    padding: calc(var(--vh) * 0.5);
}

.dashboard2 .layout-component th {
    padding: calc(var(--vh) * 0.5);
    min-width: calc(var(--vh) * 5);
}

.dashboard2 .layout-component tr th:first-child,
.dashboard2 .layout-component tr td:first-child {
    padding-left: calc(var(--vh));
}

.dashboard2 .layout-component tr th:last-child,
.dashboard2 .layout-component tr td:last-child {
    padding-right: calc(var(--vh));
}

.dashboard2 .spread-edit-overlay {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dashboard2 .spread-edit-overlay>div {
    display: flex;
    align-items: center;
}

.dashboard2 .spread-edit-overlay>div>* {
    box-shadow: var(--default-shadow-sm);
}

.dashboard2 .spread-edit-overlay input {
    width: 2em;
    margin: 0.25rem;
    text-align: center;
}

.dashboard2 .spread-edit-overlay button {
    margin: 0.25rem;
}

.dashboard2 .spread-edit-overlay button.selected,
.dashboard2 .spread-edit-overlay button.selected * {
    color: var(--main-ctrl-text-selected);
    background: var(--main-ctrl-bg-selected);
}

.dashboard2 .surface .tabs {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.dashboard2 .surface .tabs .tab {
    text-align: center;
    font-size: calc(1.5 * var(--vh));
    padding: calc(var(--vh)) calc(var(--vh) * 4);
    white-space: pre;
    position: relative;
}

.dashboard2 .surface .tabs .tab .tab-edit {
    position: absolute;
    top: calc(var(--vh) * 0.25);
    left: calc(var(--vh) * 0.25);
    right: calc(var(--vh) * 0.25);
    bottom: calc(var(--vh) * 0.25);
    overflow: hidden;
    display: none;
    flex-direction: row;
}

.dashboard2 .surface .tabs .tab:hover .tab-edit {
    display: flex;
}

.dashboard2 .surface .tabs .tab .tab-edit input {
    flex: 1;
    margin-right: calc(var(--vh) * 0.5);
    text-align: center;
    min-width: 0;
    padding: var(--vh);
}

.dashboard2 .surface .tabs .tab .tab-edit button {
    padding: calc(var(--vh) * 0.5);
}

.dashboard2 .surface .tabs .tab.selected {
    background: var(--color-1);
    color: #ffffff;
}

.dashboard2 .surface .hidden-tab {
    position: relative;
    left: -10000px;
    top: -10000px;
    max-width: 200px;
    max-height: 200px;
}

.d-quality {
    position: absolute;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding-left: calc(var(--vh));
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}

.d-quality.blue {
    background: linear-gradient(135deg, var(--color-light-blue) 10%, rgba(0,0,0,0) 50%);
    color: var(--color-blue);
}

.d-quality.red {
    background: linear-gradient(135deg, var(--color-light-red) 10%, rgba(0,0,0,0) 50%);
    color: var(--color-red);
}

.d-quality.green {
    background: linear-gradient(135deg, var(--color-light-green) 10%, rgba(0,0,0,0) 50%);
    color: var(--color-green);
}

.d-quality.yellow {
    background: linear-gradient(135deg, var(--color-light-yellow) 10%, rgba(0,0,0,0) 50%);
    color: var(--color-yellow);
}

.dashboard .d-anomalies {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.dashboard .d-anomalies .anomalies-alert {
    background: var(--container-bg);
    margin: calc(var(--vh));
}

.aa-placeholder-simple {
    display: flex;
    align-items: center;
    padding: calc(var(--vh) * 2);
}

.aa-placeholder-simple > * {
    margin-right: 0.calc(var(--vh) * 0.5);
}

.aa-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--vh) * 4);
}

.dashboard .d-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.dashboard .d-bar .bar {
    flex: 1;
    position: relative;
    overflow: hidden;
    align-self: stretch;
}

.dashboard .d-bar>:not(.bar) {
    padding: 0 calc(var(--vh) * 0.5);
}

.dashboard .d-bar .bar>div:first-child {
    transition: var(--dashboard-transition);
}

.dashboard .d-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard .d-chart .legend {
    display: flex;
    flex-wrap: wrap;
    background: var(--dashboard-menu-bg);
}

.dashboard .d-chart .legend > button:first-of-type {
    margin-left: auto;
}

.dashboard .d-chart .legend > button:not(:active):not(:hover) {
    background: inherit;
}

.dashboard .d-chart .legend .column {
    padding: calc(var(--vh) * 0.5);
    margin: calc(var(--vh) * 0.5);
    display: flex;
    align-items: center;
}

.dashboard .d-chart .legend .indicator {
    width: calc(var(--vh) * 1.3);
    height: calc(var(--vh) * 1.3);
    margin-right: calc(var(--vh) * 0.5);
}

.dashboard .d-chart .legend .indicator.limit {
    background: inherit !important;
    border: 2px dashed;
}

.dashboard .d-chart .legend .annotation {
    padding: calc(var(--vh) * 0.5);
    margin: calc(var(--vh) * 0.5);
    display: flex;
    align-items: center;
}

.dashboard .d-chart .legend .annotation:first-of-type {
    margin-left: auto;
}

.dashboard .d-chart .legend .annotation .indicator {
    border-radius: 100%;
}

.dashboard .d-columnlist {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard .d-columnlist .items {
    margin-top: calc(var(--vh) * 0.5);
    flex: 1;
    display: flex;
    overflow: hidden;
}

.dashboard .d-columnlist.dark button:not(:hover):not(:active) {
    color: white;
}

.dashboard .d-columnlist .items .item {
    display: flex;
    align-items: center;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: calc(var(--vh));
    height: calc(var(--vh) * 4);
    flex-shrink: 0;
    transition-duration: var(--transition);
}

.dashboard .d-columnlist .items .item .icon {
    margin-right: calc(var(--vh) * 0.5);
}

.dashboard .d-columnlist .items .item,
.dashboard .d-columnlist .items .item * {
    cursor: pointer !important;
}

.dashboard .d-columnlist .items .item:hover {
    background: rgba(235, 235, 235, 0.45);
}

.dashboard .d-columnlist.dark .items .item:hover {
    background: rgba(20, 20, 20, 0.45);
}

.dashboard .d-columnlist .items .item:active {
    background: rgba(235, 235, 235, 0.8);
}

.dashboard .d-columnlist.dark .items .item:active {
    background: rgba(20, 20, 20, 0.8);
}

.dashboard .d-columnlist .menu {
    display: flex;
}

.dashboard .d-columnlist .menu button {
    flex: 1;
}

.dashboard .d-columnlist button:not(:hover):not(:active) {
    background: var(--dashboard-menu-bg);
}

.dashboard .d-columnlist .start {
    margin-right: auto;
}

.dashboard .d-columnlist .center {
    margin-right: auto;
    margin-left: auto;
}

.dashboard .d-columnlist .end {
    margin-left: auto;
}

.dashboard .d-dayfilter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard .d-dayfilter .datepicker {
    flex: 1;
    width: calc(var(--vh) * 35);
    max-width: calc(var(--vh) * 35);
    overflow: visible;
}

.dashboard .d-dayfilter .datepicker.daterow {
    max-width: unset;
    width: 100%;
}

.dashboard .d-dayfilter .datepicker table td {
    padding: calc(var(--vh) * 0.5);
}

.dashboard .d-dayfilter .datepicker table td.start {
    border-radius: 0;
}

.dashboard .d-endfilter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard .d-endfilter .datepicker {
    flex: 1;
    width: calc(var(--vh) * 35);
    max-width: calc(var(--vh) * 35);
    overflow: visible;
}

.dashboard .d-endfilter .datepicker input {
    padding: calc(var(--vh) * 0.5);
    text-align: left;
}

.dashboard .d-endfilter .datepicker table td {
    padding: calc(var(--vh) * 0.5);
}

.dashboard .d-endfilter .datepicker .time > div {
    padding: calc(var(--vh));
}

.dashboard .d-endfilter .datepicker .time select {
    width: calc(var(--vh) * 8);
}

.dashboard .d-endfilter .datepicker .time button {
    padding: calc(var(--vh)) calc(var(--vh) * 1.5);
}

.dashboard .d-widget .frame {
    flex: 1;
}

.dashboard .d-gantt {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.dashboard .d-widget .d-heading {
    flex: 1;
    display: flex;
    background: var(--dashboard-header-color);
    color: white;
    white-space: pre-wrap;
}

.dashboard .d-widget .d-heading .inner {
    margin: calc(var(--vh) * 0.5);
    padding: 0;
    flex: 1;
    white-space: pre-wrap;
}

.dashboard .d-widget .d-heading.center {
    align-items: center;
}

.dashboard .d-widget .d-heading.end {
    align-items: end;
}

.dashboard .d-widget .d-heading .text-center {
    text-align: center;
}

.dashboard .d-widget .d-heading .text-right {
    text-align: right;
}

.dashboard .d-widget .d-heading.link,
.dashboard .d-widget .d-heading.link * {
    cursor: pointer;
}

.dashboard .d-widget .image {
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.dashboard .d-light {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
}

.dashboard .d-light.background {
    transition: var(--dashboard-transition);
}

.dashboard .d-light svg {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.dashboard .d-light svg * {
    transition: var(--dashboard-transition);
}

.dashboard .d-light .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-dialog .d-light-stops {
    border-left: 1px solid black;
    margin-left: 0.25rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    display: flex;
    flex-flow: column;
}

.edit-dialog .d-light-stops > button {
    margin-top: 0.5rem;
}

.edit-dialog .d-light-stops .segment {
    margin: 1rem 0;
}

.edit-dialog .d-light-stops .segment .colors {
    margin-bottom: 0.25rem;
}

.edit-dialog .d-light-stops .stop {
    position: relative;
    display: flex;
}

.edit-dialog .d-light-stops .stop .linked {
    flex: 1;
}

.edit-dialog .d-light-stops .stop > button {
    margin-left: 0.5rem;
}

.edit-dialog .d-light-stops .stop::before {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(-0.5rem - 4px);
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: black;
}

.d-link {
    flex: 1;
    display: flex;
}

.d-link.v-start {
    align-items: start;
}

.d-link.v-center {
    align-items: center;
}

.d-link.v-end {
    align-items: end;
}

.d-link.h-start {
    justify-content: start;
}

.d-link.h-center {
    justify-content: center;
}

.d-link.h-end {
    justify-content: end;
}

.dashboard .d-metalist {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard .d-metalist.dark button:not(:hover):not(:active) {
    color: white;
}

.dashboard .d-metalist .item {
    display: flex;
    align-items: center;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: calc(var(--vh) * 0.5);
    flex-shrink: 0;
    transition-duration: var(--transition);
    height: calc(var(--vh) * 3.5);
}

.dashboard .d-metalist .item .icon {
    margin-right: calc(var(--vh) * 0.5);
}

.dashboard .d-metalist .item,
.dashboard .d-metalist .item * {
    cursor: pointer !important;
}

.dashboard .d-metalist .item:hover {
    background: rgba(235, 235, 235, 0.45);
}

.dashboard .d-metalist.dark .item:hover {
    background: rgba(20, 20, 20, 0.45);
}

.dashboard .d-metalist .item:active {
    background: rgba(235, 235, 235, 0.8);
}

.dashboard .d-metalist.dark .item:active {
    background: rgba(20, 20, 20, 0.8);
}

.dashboard .d-metalist .menu .m-row {
    display: flex;
}

.dashboard .d-metalist .menu .m-row input,
.dashboard .d-metalist .menu .m-row button {
    flex: 1;
}

.dashboard .d-metalist .menu .m-row input {
    margin-bottom: calc(var(--vh) * 0.5);
}

.dashboard .d-metalist button:not(:hover):not(:active) {
    background: var(--dashboard-menu-bg);
}

.dashboard .d-metalist .start {
    margin-right: auto;
}

.dashboard .d-metalist .center {
    margin-right: auto;
    margin-left: auto;
}

.dashboard .d-metalist .end {
    margin-left: auto;
}

.dashboard .d-stats.single {
    flex: 1;
    display: flex;
}

.dashboard .d-stats .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.dashboard .d-stats.table {
    flex: 1;
    overflow-y: auto;
}

.dashboard .d-stats.table table {
    width: 100%;
}

.dashboard .d-stats.table,
.dashboard .d-stats.table * {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}

.dashboard .d-table {
    flex: 1;
    overflow-y: auto;
}

.dashboard .d-table table {
    width: 100%;
}

.dashboard .d-table table td {
    position: relative;
}

.dashboard .d-table table th,
.dashboard .d-table table td {
    padding: calc(var(--vh));
}

.dashboard .d-table table td .specs {
    margin-left: calc(2 * var(--vh));
}

.dashboard .d-widget .d-text {
    flex: 1;
    display: flex;
    white-space: pre-wrap;
}

.dashboard .d-widget .d-text .inner {
    margin: calc(var(--vh) * 0.5);
    padding: 0;
    flex: 1;
    white-space: pre-wrap;
}

.dashboard .d-widget .d-text.center {
    align-items: center;
}

.dashboard .d-widget .d-text.end {
    align-items: end;
}

.dashboard .d-widget .d-text .text-center {
    text-align: center;
}

.dashboard .d-widget .d-text .text-right {
    text-align: right;
}

.dashboard .d-timefilter {
    flex: 1;
    display: flex;
    align-items: center;
}

.dashboard .d-timefilter > button {
    flex: 1;
}

.dashboard .d-timefilter .popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(210, 210, 210, 0.3);
    z-index: 12900;
}

.dashboard .d-timefilter .popup {
    position: fixed;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 70%;
    background: white;
    z-index: 13000;
    box-shadow: 0 calc(1.5 * var(--vh)) calc(7.5 * var(--vh)) 0 rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: calc(var(--vh));
    animation: var(--animation-fade-in);
}

.dashboard .d-timefilter .popup .presets {
    display: flex;
    flex-wrap: wrap;
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.dashboard .d-timefilter .popup .presets button.selected {
    box-shadow: none;
    background: var(--main-ctrl-bg-selected);
    color: var(--main-ctrl-text-selected);
}

.dashboard .d-timefilter .popup > .input {
    padding: calc(0.5 * var(--vh));
    flex: 1;
    display: flex;
    overflow: auto;
    align-items: start;
}

.dashboard .d-timefilter .popup > .input .datepicker {
    width: calc(35 * var(--vh));
    max-width: calc(35 * var(--vh));
    overflow: visible;
}

.dashboard .d-timefilter .popup > .input .datepicker input {
    padding: calc(0.5 * var(--vh));
}

.dashboard .d-timefilter .popup > .input .datepicker table td {
    padding: calc(0.5 * var(--vh));
}

.dashboard .d-timefilter .popup > .input .datepicker .time > div {
    padding: calc(var(--vh));
}

.dashboard .d-timefilter .popup > .input .datepicker .time select {
    width: calc(8 * var(--vh));
}

.dashboard .d-timefilter .popup > .input .datepicker .time button {
    padding: calc(var(--vh)) calc(1.5 * var(--vh));
}

.dashboard .d-timefilter .popup > .input .diff {
    padding: calc(0.5 * var(--vh));
    background: var(--main-ctrl-bg);
    border: 1px solid var(--main-ctrl-bg);
    flex: 0;
    font-weight: bold;
}

.dashboard .d-timefilter .popup .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.dashboard .d-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
}

.dashboard2 .layout-component.legacy {
    display: flex;
}

.dashboard2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: -1px;
}

.dashboard2 .main {
    flex: 1;
    overflow: auto;
}

.dashboard2 .sidebar {
    flex: 1;
    overflow-y: auto;
    animation: var(--animation-slide-left);
}

.dashboard2 .sidebar .structure .settings-label,
.dashboard2 .sidebar .components .settings-label {
    padding-left: 0.25rem;
}

.dashboard2 .sidebar .components .component {
    padding: 0.25rem 0.5rem;
}

.dashboard2 .sidebar .components .component:hover {
    background-color: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard2 .sidebar .components .component:active {
    background-color: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard2 .sidebar .components .component .icon {
    padding-right: 0.25rem;
}

.dashboard2 .row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.dashboard2 .surface {
    flex: 1;
    overflow: hidden;
    background: var(--dashboard-bg);
    position: relative;
}

.dashboard2 .surface .component-layer {
    position: absolute;
    font-size: calc(1.5 * var(--vh));
    background: var(--container-bg);
}

.dashboard2 .surface .component-layer.editing {
    box-shadow: var(--default-shadow);
}

.dashboard2 .surface .drag-layer {
    position: absolute;
    pointer-events: none;
    pointer-events: all;
}

.dashboard2 .surface .drag-parent-outline {
    position: absolute;
    border: 1px solid var(--color-blue);
    box-shadow: 0px 0px 5px 0px var(--color-blue);
}

.dashboard2 .surface .drag-hint-outline {
    position: absolute;
    border: 1px solid #a0a0a0;
    box-shadow: 0px 0px 5px 0px #a0a0a0;
}

.dashboard2 .surface .drag-parent-outline .gridline {
    position: absolute;
    background: rgba(128, 128, 128, 0.25);
}

.dashboard2 .surface .drag-parent-outline .gridline.major {
    position: absolute;
    background: rgba(128, 128, 128, 0.5);
}

.dashboard2 .surface .drag-preview {
    position: absolute;
    border: 1px solid var(--color-1);
    box-shadow: 0px 0px 5px 0px var(--color-1), inset 0px 0px 5px 0px var(--color-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard2 .surface .component-layer .layout-component {
    position: absolute;
    overflow: hidden;
}

.dashboard2 .surface .component-layer .child-host {
    position: absolute;
    top: 0;
    left: 0;
}

.dashboard2 .surface .component-layer .child-host.selected-component>* {
    opacity: 0.5;
}

.dashboard2 .surface .component-layer .value {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dashboard2 .surface .edit-layer {
    position: absolute;
    pointer-events: none;
    pointer-events: all;
}

.dashboard2 .surface .edit-layer:focus-visible {
    outline: none
}

.dashboard2 .surface .edit-layer .edit-component {
    position: absolute;
    box-shadow: 0px 0px 5px 0px var(--color-1);
    display: flex;
}

.dashboard2 .surface .edit-layer .edit-component * {
    pointer-events: auto;
}

.dashboard2 .surface .edit-layer .edit-component .drag-mark {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 2px solid #000000;
}

.dashboard2 .surface .edit-layer .edit-component .drag-mark.top-left {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}

.dashboard2 .surface .edit-layer .edit-component .drag-mark.top-right {
    right: -5px;
    top: -5px;
    cursor: ne-resize;
}

.dashboard2 .surface .edit-layer .edit-component .drag-mark.bottom-left {
    left: -5px;
    bottom: -5px;
    cursor: sw-resize;
}

.dashboard2 .surface .edit-layer .edit-component .drag-mark.bottom-right {
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
}

.dashboard2 .titlebar {
    background: var(--side-bg);
    color: var(--side-text);
    display: flex;
    align-items: center;
    width: 100%;
}

.dashboard2 .titlebar .img-logo-bw {
    width: 24px;
    height: 24px;
    margin: 0.25rem;
}

.dashboard2 .titlebar .title {
    text-align: center;
    flex: 1;
}

.dashboard2 .titlebar button {
    background: transparent;
    color: var(--side-text);
}

.dashboard2 .titlebar button:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.dashboard2 .titlebar button:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

@media (orientation: portrait) {
    .dashboard2 .titlebar .export {
        display: none;
    }
}

.dashboard .edit-dialog {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
}

.dashboard .edit-dialog > textarea {
    flex: 1;
    padding: 0.5rem;
    font-family: monospace;
}

.dashboard .edit-dialog .preview {
    flex: 1;
    position: relative;
}

.dashboard .edit-dialog .preview.dark {
    background: #303030;
    color: #ffffff;
}

.dashboard .edit-dialog .preview .preview-component {
    position: absolute;
    font-size: calc(1.5 * var(--vh));
}

.dashboard .edit-dialog .preview .d-widget {
    position: absolute;
    top: 0% !important;
    left: 0% !important;
    right: 0% !important;
    bottom: 0% !important;
    height: auto !important;
    width: auto !important;
}

.dashboard .edit-dialog h2 {
    padding-left: 0.25rem;
    padding-top: 0.25rem;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.dashboard .edit-dialog .type {
    padding-left: 0.25rem;
    display: flex;
    align-items: center;
}

.dashboard .edit-dialog .type .icon {
    margin-right: 0.25rem;
}

.dashboard .edit-dialog .section-title {
    padding: 0.5rem;
    margin: 0 -0.25rem;
    border-bottom: 1px solid var(--color-1);
    display: flex;
    margin-bottom: 0.5rem;
}

.dashboard .edit-dialog .section-title:hover {
    background: var(--main-ctrl-bg-hover);
}

.dashboard .edit-dialog .section-title:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .edit-dialog .section-title + :not(.section-title) {
    margin-top: 0;
}

.dashboard .edit-dialog .section-title:not(:first-child) {
    margin-top: 0.75rem;
}

.dashboard .edit-dialog .section-title div:not(.icon) {
    padding: 0 0.25rem;
    flex: 1;
}

.dashboard .edit-dialog .section-title,
.dashboard .edit-dialog .section-title * {
    cursor: pointer !important;
}

.dashboard .container > .edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: var(--animation-slide-left);
}

.dashboard .container > .edit .container-title-inner {
    flex-flow: column;
    align-items: start;
}

.dashboard .container > .edit .title {
    display: flex;
}

.dashboard .container > .edit .select-group {
    display: flex;
}

.dashboard .container > .edit .settings {
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.25rem;
}

.dashboard .container > .edit .link {
    display: flex;
}

.dashboard .container > .edit .link input {
    flex: 1;
}

.dashboard .container > .edit .link a,
.dashboard .container > .edit .link a * {
    cursor: pointer !important;
}

.dashboard .container > .edit .link a {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    transition-duration: var(--transition);
    padding: 0.25rem;
}

.dashboard .container > .edit .link a:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard .container > .edit .link a:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .container > .edit .settings > .item {
    display: flex;
    flex-direction: column;
    padding-left: 0.25rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-left: 1px solid var(--color-1);
}

.dashboard .container > .edit .settings .category-section {
    display: flex;
    padding: 0.25rem;
    padding-left: 0.5rem;
    margin: -0.25rem;
}

.dashboard .container > .edit .settings .category-section:hover {
    background: var(--main-ctrl-bg-hover);
}

.dashboard .container > .edit .settings .category-section:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .container > .edit .settings .category-section div:not(.icon) {
    padding: 0 0.25rem;
    flex: 1;
}

.dashboard .container > .edit .settings .category-section,
.dashboard .container > .edit .settings .category-section * {
    cursor: pointer !important;
}

.dashboard .container > .edit .settings .permissions {
    margin: -0.25rem;
}

.dashboard .container > .edit .components {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.dashboard .container > .edit .components .component {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    width: 123px;
    margin: 0.5rem 0;
    transition-duration: var(--transition);
}

.dashboard .container > .edit .components .component,
.dashboard .container > .edit .components .component * {
    cursor: pointer !important;
}

.dashboard .container > .edit .components .component:hover {
    color: var(--container-text-muted);
}

.dashboard .container > .edit .components .component .title {
    max-width: 90%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    display: block;
}

.dashboard .container > .edit .components .component > .icon {
    margin: 0.5rem;
}

.dashboard .container > .edit .settings > button {
    margin-top: 0.75rem;
}

.dashboard .container > .buttons {
    display: flex;
}

.dashboard .container > .buttons button {
    flex: 1;
}

.dashboard .edit-dialog .tabs {
    display: flex;
    flex-direction: column;
}

.dashboard .edit-dialog .tabs .tab {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.dashboard .edit-dialog .tabs .tab input {
    flex: 1;
}

.dashboard .edit .annotation {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0.25rem;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    transition-duration: var(--transition);
}

.dashboard .edit .annotation,
.dashboard .edit .annotation * {
    cursor: pointer !important;
}

.dashboard .edit .annotation:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard .edit .annotation:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .edit .colors {
    display: flex;
    flex-wrap: wrap;
}

.dashboard .edit .colors .color {
    width: 2rem;
    height: 2rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    border: 1px solid #000000;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard .edit .colors .color * {
    cursor: pointer !important;
}

.dashboard .edit .colors .color svg {
    color: #808080;
}

.dashboard .edit .colors .color.selected {
    border: 2px dashed white;
    outline: 2px solid black;
}

.dashboard .edit .dateformat {
    display: flex;
}

.dashboard .edit .dateformat input {
    flex: 1;
}

.dashboard .edit .fontsize {
    display: flex;
}

.dashboard .edit .fontsize input {
    flex: 1;
}

.dashboard .edit .linked {
    display: flex;
}

.dashboard .edit .linked .linksel {
    display: flex;
}

.dashboard .edit .linked .linksel .select-group {
    display: flex;
}

.dashboard .edit .linked .content,
.dashboard .edit .linked select,
.dashboard .edit .linked input {
    flex: 1;
    flex-shrink: 0;
}

.dashboard .edit .column {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    transition-duration: var(--transition);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}

.dashboard .edit .column,
.dashboard .edit .column * {
    cursor: pointer !important;
    overflow: hidden;
}

.dashboard .edit .column .title {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    display: block;
}

.dashboard .edit .column .subtitle {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    display: block;
    color: var(--main-ctrl-text-muted);
}

.dashboard .edit .column:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard .edit .column:hover .subtitle {
    color: var(--main-ctrl-text-muted);
}

.dashboard .edit .column:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .edit .column:active .subtitle {
    color: var(--main-ctrl-text-muted-pressed);
}

.dashboard .edit .array {
}

.dashboard .edit .array > button {
    width: 100%;
    display: block;
}

.dashboard .edit .array > .item {
    display: flex;
    margin-bottom: 0.25rem;
}

.dashboard .edit .array > .item > .content {
    flex: 1;
}

.dashboard .edit .array > .item > .drag {
    display: flex;
    align-items: center;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.dashboard .edit .array > .item > .drag,
.dashboard .edit .array > .item > .drag * {
    cursor: move !important;
}

.dashboard .edit .array > .item > .drag:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard .edit .array > .item > .drag:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard .edit .settings > :not(.settings-label) + :not(.settings-label) {
    margin-top: 0.25rem;
}

.dashboard2 .sidebar .settings {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    flex: 1;
}

.dashboard2 .sidebar .settings .link {
    display: flex;
    margin-top: 0.25rem;
}

.dashboard2 .sidebar .settings .link input {
    flex: 1;
}

.dashboard2 .sidebar .settings .link a {
    padding: 0.25rem;
}

.dashboard2 .sidebar .settings .link a,
.dashboard2 .sidebar .settings .link a * {
    cursor: pointer;
    color: var(--main-ctrl-text);
}

.dashboard2 .sidebar .settings .owner {
    display: flex;
    align-items: center;
}

.dashboard2 .sidebar .settings .owner .name {
    flex: 1;
}

.dashboard2 .sidebar .structure {
    display: flex;
    flex-direction: column;
}

.dashboard2 .sidebar .structure .component {
    display: flex;
    position: relative;
    white-space: pre;
}

.dashboard2 .sidebar .structure .component:hover,
.dashboard2 .sidebar .structure .component.hovered {
    background-color: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.dashboard2 .sidebar .structure .component:active,
.dashboard2 .sidebar .structure .component.selected {
    background-color: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.dashboard2 .sidebar .structure .component:active .typename,
.dashboard2 .sidebar .structure .component.selected .typename {
    color: var(--main-ctrl-text-pressed);
}

.dashboard2 .sidebar .structure .component .h-line {
    position: absolute;
    top: 15px;
    left: -5px;
    height: 1px;
    width: 10px;
    background-color: #a0a0a0;
}

.dashboard2 .sidebar .structure .children {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
}

.dashboard2 .sidebar .structure .children .v-line {
    position: absolute;
    top: -7px;
    left: 3px;
    height: calc(100% - 6px);
    width: 1px;
    background-color: #a0a0a0;
}

.dashboard2 .sidebar .structure .collapse {
    padding: 0.25rem;
    height: 29px;
    width: 24px;
}

.dashboard2 .sidebar .structure .collapse,
.dashboard2 .sidebar .structure .collapse * {
    cursor: pointer;
}

.dashboard2 .sidebar .structure .drag,
.dashboard2 .sidebar .structure .drag * {
    cursor: move;
}

.dashboard2 .sidebar .structure .drag {
    padding: 0.25rem;
}

.dashboard2 .sidebar .structure .component .title {
    flex: 1;
    display: flex;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard2 .sidebar .structure .component .title,
.dashboard2 .sidebar .structure .component .title * {
    cursor: pointer;
}

.dashboard2 .sidebar .structure .component .title>.icon {
    padding: 0.25rem;
}

.dashboard2 .sidebar .structure .title .text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem;
}

.dashboard2 .sidebar .structure .hover-buttons {
    display: none;
    position: absolute;
    right: 0;
    top: -0.25rem;
}

.dashboard2 .sidebar .structure .hover-buttons>div {
    display: inline-block;
    margin-right: 0.25rem;
    box-shadow: var(--default-shadow-sm);
}

.dashboard2 .sidebar .structure .component:hover .hover-buttons {
    display: block;
}

.dashboard2 .sidebar .structure>button {
    margin: 0.25rem;
}

.dashboard2 .sidebar .structure .typename {
    margin-left: 0.5rem;
    font-style: italic;
    color: var(--main-ctrl-text-muted);
}

.dashboard2 .sidebar .structure .c-hidden {
    opacity: 0.5;
}
.dashboard2 .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: repeating-linear-gradient(120deg,transparent,transparent calc(2 * var(--vh)),rgba(128,128,128,0.2) calc(2 * var(--vh)), rgba(128,128,128,0.2) calc(4 * var(--vh)));
    font-size: calc(4 * var(--vh));
    overflow: hidden;
    font-size: calc(1.2 * var(--vh));
}

.dashboard2 .empty :first-child {
    font-size: calc(1.4 * var(--vh));
}

.dashboard .error {
    flex: 1;
    overflow: auto;
    padding: calc(0.5 * var(--vh));
    display: block;
}

.dashboard .error h3 {
    display: flex;
    align-items: center;
    font-size: calc(1.7 * var(--vh))
}
.dashboard .error h3 .icon {
    margin-right: calc(0.5 * var(--vh));
}

.dashboard2 .layout-component .d-hover-link {
    position: absolute;
    bottom: calc(6 * var(--vh));
    right: calc(var(--vh));
    display: none;
    box-shadow: var(--default-shadow);
}

.dashboard2 .layout-component:hover .d-hover-link {
    display: block;
}

.dashboard .timeout {
    box-shadow: var(--default-shadow);
    position: absolute;
    right: calc(4 * var(--vh));
    bottom: calc(4 * var(--vh));
}

.dashboard .timeout,
.dashboard .timeout * {
    cursor: pointer !important;
}

.annotations-menu {
    display: flex;
}

.annotations {
    flex: 1;
    overflow-y: auto;
}

.annotations .filter {
    display: flex;
    padding: 0.25rem;
    align-items: center;
    transition-duration: var(--transition);
    border-bottom: 1px solid var(--table-stripe-bg);
}

.annotations .filter:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.annotations .filter .title {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.annotations .filter .annotation {
    padding: 0 0.25rem;
    margin: 0.25rem;
}

.annotations .filter .annotation,
.annotations .filter .annotation * {
    cursor: pointer !important;
}

.annotations .filter .annotation.white {
    color: white;
}

.annotations-menu .select-group {
    display: flex;
}

.explore .chartarea {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.explore .chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explore .charthost {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explore .chartarea .axis {
    display: flex;
    justify-content: center;
}

.explore .chartarea .axis select {
    width: 50%;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.explore .chartoptions {
    width: 200px;
    background: var(--container-insert-bg);
    color: var(--container-insert-text);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    animation: var(--animation-slide-left);
    overflow: auto;
}

.explore .chartoptions label,
.explore .chartoptions select {
    margin-bottom: 0.25rem;
}

.explore .chart .filters {
    display: flex;
    padding: 0.25rem;
}

.explore .chart .filters select {
    flex-shrink: 0;
    margin-left: auto;
    width: calc(200px - 0.5rem);
    align-self: start;
}

.explore .chart .table {
    flex: 1;
    overflow: auto;
}

.explore .curves {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explore .curves .title {
    padding: 0.25rem;
    flex-shrink: 0;
}

.explore .curves .empty {
    padding: 0.25rem;
    flex-shrink: 0;
}

.explore .curves>.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--container-insert-bg);
}

.explore .curves>.title>.spacer {
    flex: 1;
}

.explore .curves>.title button {
    padding: 0.25rem;
}

.explore .curves>.title button:not(:hover):not(:active) {
    background: transparent;
}

.explore .curves>.title>.icon {
    margin: 0.25rem;
}

.explore .curves>.title,
.explore .curves>.title * {
    cursor: pointer;
}

.explore .scrollable {
    flex: 1;
    overflow-y: auto;
}

.explore .metadata-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.explore .metadata-item .color {
    position: relative;
}

.explore .metadata-item .color-rect {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin: 0.25rem;
}

.explore .metadata-item .value {
    padding: 0.25rem;
    padding-left: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore .metadata-item .color .color-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
}

.explore .metadata-item .color:hover .color-inner {
    background: var(--container-bg);
    display: flex;
    flex-direction: row;
    width: auto;
    animation: var(--animation-slide-right-fast);
    box-shadow: var(--default-shadow-sm);
}

.explore .metadata-item .color-inner .color-rect,
.explore .metadata-item .color-inner .color-rect * {
    cursor: pointer;
}

.explore .metadata-item .color-rect>.icon {
    top: -8px;
    left: -1px;
    position: relative;
}
.deepdive .result.correlation {
    display: flex;
    align-items: center;
}

.deepdive .result.correlation div.indicator {
    height: 12px;
    width: 12px;
    margin-left: 0.25rem;
}

.deepdive .result.correlation div.label {
    flex: 1;
    padding: 0.25rem;
}

.deepdive .correlation .secondary {
    color: var(--main-ctrl-text-muted);
    padding: 0.25rem 0;
}

.deepdive .correlation .secondary .icon {
    margin-right: 0.25rem;
}

.deepdive .correlation .secondary,
.deepdive .correlation .secondary * {
    cursor: pointer;
}

.explore .deepdive {
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
}

.explore .deepdive .start button,
.explore .deepdive label {
    display: inline-block;
    margin-right: 0.25rem;
}

.deepdive-detail .content {
    flex-direction: row;
    margin: 0;
}

.deepdive-detail .detail {
    background: var(--container-insert-bg);
    width: 250px;
    padding: 0.25rem;
    overflow: auto;
}

.deepdive-detail .detail > * {
    min-height: 0.5rem;
}

.deepdive-detail .detail > h1 {
    font-size: 1.2em;
}

.deepdive .detail.hidden {
    display: none;
}

.deepdive .result {
    margin: 0.5rem;
    padding: 0.25rem;
    border: 1px solid var(--table-stripe-bg);
}

.deepdive .result.clustered {
    border: none;
}

.deepdive .result.clustered .result {
    margin: 0;
}

.deepdive .result.clustered .clusters {
    padding: 0.25rem;
    background: var(--container-insert-bg);
}

.deepdive .result.clustered .clusters span {
    margin-right: 0.5rem;
}

.deepdive .result .tree,
.deepdive .result .ttest {
    display: flex;
    align-items: center;
}

.deepdive .result .ttest div.label,
.deepdive .result .tree div.label {
    flex: 1;
    padding: 0.25rem;
}

.deepdive .result .score span:first-child {
    color: var(--main-ctrl-text-muted);
    display: none;
}

.deepdive .result .score:hover span:first-child {
    display: inline;
}

.deepdive .result .score .indicator {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin: 0 0.25rem;
    border-radius: 100%;
}

.deepdive .result .secondary {
    color: var(--main-ctrl-text-muted);
    padding: 0.25rem 0;
}

.deepdive .result .secondary .icon {
    margin-right: 0.25rem;
}

.deepdive .result .secondary,
.deepdive .result .secondary * {
    cursor: pointer;
}

.deepdive .result .ttest div.indicator,
.deepdive .result .tree div.indicator {
    height: 12px;
    width: 12px;
    margin-left: 0.25rem;
}

.deepdive .result button {
    padding: 0.25rem;
}

.deepdive .result button:not(:hover):not(:active) {
    background: transparent;
}

.deepdive-detail .chart {
    flex: 1;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
}

.deepdive-detail .charthost {
    height: 100%;
}

.deepdive-dialog > .content {
    margin: 0;
}

.deepdive-startpage {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.deepdive-startpage label {
    white-space: initial;
}

.deepdive-startpage > div:first-child {
    flex: 1;
    padding: 0.25rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.deepdive-startpage .chart {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.deepdive-startpage > div:last-child {
    padding: 0.25rem;
    width: 200px;
    flex-shrink: 0;
    background: var(--container-insert-bg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.deepdive-startpage > div:last-child label,
.deepdive-startpage > div:last-child button {
    margin-bottom: 0.25rem;
    display: block;
}

.deepdive-startpage .filters {
    display: flex;
    padding: 0.25rem;
}

.deepdive-startpage .state {
    padding: 0.25rem;
    margin-top: auto;
}

.explore .details {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.explore .details > .left {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
}

.explore .details > .left table > thead *,
.explore .details > .left table > tbody > :not(:last-child) * {
    cursor: text !important;
    -webkit-user-select: text;
    user-select: text;
}

.explore .details > .left .color {
    width: 12px;
    height: 12px;
    margin: 0.25rem;
    display: inline-block;
}

.explore .details > .left th,
.explore .details > .left td {
    padding: 0.25rem 1rem;
    min-width: 6rem;
}

.explore .details > .right {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.explore .details > .right .chart {
    flex: 1;
}

.explore-edit .content {
    overflow: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.25rem;
}

.explore-edit .value {
    display: flex;
}

.explore-edit .value input {
    flex: 1;
    padding: 0.5rem !important;
}

.explore-edit .content > button {
    margin-top: 1rem;
}

.export label {
    margin-top: 0.5rem;
}

.favorites .container {
    display: flex;
    flex-direction: row;
}

.favorites .container .columns {
    flex: 1;
    display: flex;
    padding: 0.25rem;
}

.favorites .container .selection {
    flex: 1;
    padding: 0.25rem;
}

.favorites .container .selection .column {
    display: flex;
    padding: 0.25rem;
    transition-duration: var(--transition);
}

.favorites .container .selection .column:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.favorites .container .selection .column:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.favorites .container .selection .column,
.favorites .container .selection .column * {
    cursor: pointer !important;
}

.favorites .container .selection .column .title {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.favorites .container .selection .column .icon {
    margin-left: 0.25rem;
}

.explore .main-column {
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.explore .main-column .menu {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}

.explore .main-column .menu {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}

.explore .main-column .menu button:last-child.selected {
    width: 200px;
    text-align: left;
}

.explore .main-column .menu .menu-right {
    margin-left: auto;
}

.explore .workarea {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
}

.explore .main-column > .hidden {
    display: none;
}

.explore .explore-tab .icon:nth-of-type(1) {
    pointer-events: all;
}

.explore .legend {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.explore .legend .pill {
    position: relative;
    max-width: 180px;
    font-size: 0.75rem;
    margin: 0.25rem;
}

.explore .legend .pill .info {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.explore .legend .pill .color {
    width: 10px;
    height: 10px;
    margin-left: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.explore .legend .pill .color-group {
    width: 10px;
    margin-left: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.explore .legend .pill .color-group .color {
    width: 10px;
    height: 10px;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

.explore .legend .pill .color-group .color-bar {
    width: 10px;
    height: 2px;
    margin-top: 1px;
    flex-shrink: 0;
}

.explore .legend .pill .header .color,
.explore .legend .pill .child .color {
    width: 10px;
    height: 10px;
    margin: 0.25rem 0;
}

.explore .legend .pill .color.limit {
    background: inherit !important;
    border: 2px dashed;
}

.explore .legend .pill .preview {
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

.explore .legend .pill .preview .title {
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.875rem;
}

.explore .legend .pill .hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.25rem;
    background: var(--container-bg);
    color: var(--container-text);
    width: 200px;
    z-index: 9000;
    box-shadow: var(--default-shadow);
}

.explore .legend .pill:hover .hover {
    display: block;
}

.explore .legend .pill .hover .header {
    display: flex;
    align-items: center;
}

.explore .legend .pill .hover .header .title {
    flex: 1;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}

.explore .legend .pill .hover .header .draggable {
    flex: 1;
    display: flex;
    align-items: center;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}

.explore .legend .pill .hover .header .draggable,
.explore .legend .pill .hover .header .draggable * {
    cursor: move;
}

.explore .legend .pill .hover .header .title * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.explore .legend .pill .hover .header .title div:first-child {
    font-size: 0.875rem;
}

.explore .legend .pill .hover button {
    padding: 0.5rem 0.25rem;
}

.explore .legend .pill .hover button:not(:hover):not(:active) {
    background: transparent;
}

.explore .legend .pill .hover .child {
    display: flex;
    align-items: center;
}

.explore .legend .pill .hover .child .title {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.explore .legend .group {
    position: relative;
    max-width: 180px;
    margin: 0.25rem;
}

.explore .legend .group .preview {
    padding: 0.25rem;
    display: flex;
    align-items: center;
    background: var(--filter-bg);
    color: var(--filter-text);
}

.explore .legend .group .preview .title {
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 0.25rem;
    margin-right: 0.5rem;
}

.explore .legend .group .preview .icon {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.explore .legend .group .hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.25rem;
    background: var(--container-bg);
    color: var(--container-text);
    width: 200px;
    z-index: 9000;
    box-shadow: var(--default-shadow);
}

.explore .legend .group:hover .hover {
    display: block;
}

.explore .legend .group .hover .header {
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.explore .legend .group .hover .header .draggable {
    flex: 1;
    display: flex;
    align-items: center;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}

.explore .legend .group .hover .header .draggable,
.explore .legend .group .hover .header .draggable * {
    cursor: move;
}

.explore .legend .group .hover .header * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.explore .legend .group .hover .header .draggable  > .icon:first-child {
    margin-right: 0.25rem;
}

.explore .legend .group .hover .header .title {
    flex: 1;
}

.explore .legend .group .hover .header .title div:last-child {
    font-size: 0.75rem;
}

.explore .legend .group .hover .header button {
    padding: 0.5rem 0.25rem;
    margin: 0;
    width: auto;
}

.explore .legend .group .hover .header button:not(:hover):not(:active) {
    background: transparent;
}

.explore .legend .group .hover button,
.explore .legend .group .hover select {
    width: 100%;
    margin-top: 0.25rem;
}

.explore .legend > button {
    margin-left: auto;
}

.explore .legend > button:not(:hover):not(:active) {
    background: transparent;
}

.explore .legend.legend-annotations {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 0.25rem;
}

.explore .legend.legend-annotations .color {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.explore .legend.legend-annotations .title {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.explore .legend.legend-annotations .preview {
    margin-right: 0.25rem;
}

.startpage .lru .explore-lru .selection,
.startpage .lru .explore-lru .filters {
    display: flex;
    flex-wrap: wrap;
}

.startpage .lru .explore-lru .pill {
    padding: 0.25rem 0;
    margin: 0;
    margin-bottom: 0.25rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
}

.startpage .lru .explore-lru .group {
    background: var(--filter-bg);
    color: var(--filter-text);
    padding: 0.25rem 0.5rem;
    margin: 0;
    margin-bottom: 0.25rem;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
}

.startpage .lru .explore-lru .group .icon {
    margin-right: 0.25rem;
}

.startpage .lru .explore-lru .pill .indicator {
    background: #000;
    width: 12px;
    height: 12px;
    margin-right: 0.25rem;
}

.startpage .lru .explore-lru .filters .filter {
    background: var(--filter-bg);
    color: var(--filter-text);
    padding: 0.25rem 0.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.startpage .lru .explore-lru .filters .filter .icon {
    margin-right: 0.25rem;
}

.explore .matrix {
    flex: 1;
    overflow: auto;
}

.explore .matrix td {
    cursor: pointer !important;
    min-width: 4em;
}

.explore .matrix tfoot th {
    min-width: 4em;
    height: 140px;
    white-space: nowrap;
    border: none;
}

.explore .matrix tfoot th > div {
    transform: rotate(45deg);
    width: 30px;
}

.explore .matrix tfoot th > div > span {
    padding: 5px 10px;
}

.explore .matrix td {
    width: 45px;
    height: 30px;
    text-align: right;
}

.explore .matrix .hover {
    background-color: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.explore .matrix .selected {
    background-color: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.explore .matrixmenu {
    width: 200px;
    display: flex;
    flex-flow: column;
    background: var(--container-insert-bg);
    color: var(--container-insert-text);
    padding: 0.25rem;
    overflow-y: auto
}

.explore .matrixmenu label {
    display: block;
    margin-bottom: 0.25rem;
    text-align: left;
}

.startpage {
    display: flex;
    overflow: hidden;
    padding: 2rem;
    flex: 1;
}

.startpage > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.startpage > div:first-child {
    display: flex;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--container-text-muted);
}

.startpage > div:last-child {
    border-left: 1px solid var(--table-stripe-bg);
    margin-left: 2rem;
    padding-left: 2rem;
}

.startpage h2 {
    color: var(--container-text-muted);
}

.startpage .lru {
    flex: 1;
    overflow-y: auto;
}

.startpage .lru .item {
    padding: 0.5rem 0.5rem;
    transition-duration: var(--transition);
    cursor: pointer !important;
}

.startpage .lru .item * {
    cursor: pointer !important;
}

.startpage .lru .item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.startpage .lru .item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.startpage .lru .header {
    display: flex;
    align-items: center;
}

.startpage .lru .header .app {
    margin-left: 0.25rem;
}

.startpage .lru .header .date {
    margin-left: 0.25rem;
    color: var(--main-ctrl-text-muted);
}

.startpage .lru .item:active .header .date {
    color: var(--main-ctrl-text-muted-pressed);
}

.startpage .lru .dashboard-lru,
.startpage .lru .explore-lru {
    display: flex;
}

.startpage .lru .dashboard-lru .title h4,
.startpage .lru .explore-lru .title h4 {
    margin-bottom: 0 !important;
}

.explore .statstable {
    flex: 1;
    overflow: auto;
    height: 100%;
}

.explore .statstable thead th {
    padding: 0.5rem;
}

.explore .statsmenu {
    width: 200px;
    display: flex;
    flex-flow: column;
    background: var(--container-insert-bg);
    color: var(--container-insert-text);
    padding: 0.25rem;
    overflow-y: auto
}

.explore .statsmenu button {
    display: block;
    margin-bottom: 0.25rem;
    text-align: left;
}

.explore .statstable table,
.explore .statstable table * {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}

.explore .statstable .sort {
    cursor: pointer !important;
}

.explore .color-hover-host {
    display: inline-block;
    position: relative;
    cursor: pointer !important;
    margin-left: 0.25rem;
}

.explore .color-hover-host,
.explore .color-hover-host * {
    cursor: pointer !important;
}

.explore .color-hover {
    background: var(--container-bg);
    display: none;
    position: absolute;
    top: 4px;
    right: 17px;
    background-color: white;
}

.explore .color-hover-host:hover .color-hover {
    display: flex;
}

.explore .color-hover .color-pill {
    width: 16px;
    height: 16px;
}

.explore .statsitem {
    background: var(--container-bg);
    color: var(--container-text);
}

.explore .statslist {
    display: flex;
    flex-wrap: wrap;
}

.explore .statslist .stat {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    display: flex;
    margin: 0.25rem;
}

.explore .statslist .stat .move {
    display: flex;
    align-items: center;
}

.explore .statslist .stat .move:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.explore .statslist .stat .move:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.explore .statslist .stat .move,
.explore .statslist .stat .move * {
    cursor: move !important;
}

.explore .statslist .stat .actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
}

.explore .statslist .stat .actions .color-hover-host {
    margin: 0;
}

.explore .statslist .stat .content {
    text-align: center;
    padding: 0.25rem;
    min-width: 7em;
}

.explore .statslist .stat .content h2 {
    font-size: 0.875rem;
}

.f-filters {
    display: flex;
    flex-wrap: wrap;
}

.f-filters.selecting {
    align-items: center;
}

.f-filters.selecting div {
    margin: 0.25rem;
}

.f-filters .filter:first-child {
    margin-left: 0.25rem;
}

.f-filters .filter,
.f-filters > button {
    background: var(--filter-bg);
    color: var(--filter-text);
    margin: 0.25rem;
    margin-left: 0;
    display: flex;
    transition-duration: var(--transition);
    border-radius: 14px;
    overflow: hidden;
}

.f-filters > input {
    margin: 0.25rem;
    margin-left: 0;
    border-radius: 14px;
    width: 150px;
}

.f-filters > button {
    display: inline-block;
    padding: 0.25rem 0.5rem;
}

.f-filters .filter,
.f-filters .filter * {
    cursor: pointer !important;
}

.f-filters .filter .table {
    margin-left: 0.25rem;
    font-style: italic;
}

.f-filters .filter .drag-handle,
.f-filters .filter .title,
.f-filters .filter .reset,
.f-filters .filter .close {
    padding: 0.25rem;
    transition-duration: var(--transition);
}

.f-filters .filter > *:first-child {
    padding-left: 0.5rem;
}

.f-filters .filter > *:last-child {
    padding-right: 0.5rem;
}

.f-filters > button:hover,
.f-filters .filter .drag-handle:hover,
.f-filters .filter .title:hover,
.f-filters .filter .reset:hover,
.f-filters .filter .close:hover {
    background: var(--filter-bg-hover);
    color: var(--filter-text-hover);
}

.f-filters .filter .drag-handle,
.f-filters .filter .drag-handle * {
    cursor: move !important;
}

.f-filters .filter.inactive {
    background: var(--filter-bg-inactive);
    color: var(--filter-text-inactive);
}

.f-filters .filter.inactive .drag-handle:hover,
.f-filters .filter.inactive .title:hover,
.f-filters .filter.inactive .reset:hover,
.f-filters .filter.inactive .close:hover {
    background: var(--filter-bg-hover-inactive);
    color: var(--filter-text-hover-inactive);
}

.f-dialog .content {
    margin: 0;
}

.f-header {
    display: flex;
    align-items: center;
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.f-header > * {
    flex-shrink: 0;
}

.f-header > .icon {
    margin-left: 0.5rem;
}

.f-header .label {
    padding: 0.25rem;
}

.f-header .select-group {
    display: flex;
}

.f-header .select-container {
    flex: 1;
    display: flex;
    align-self: stretch;
}

.f-header .select {
    flex: 1;
    display: flex;
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
    align-items: center;
    padding: 0 0.5rem;
    align-self: stretch;
    transition-duration: var(--transition);
}

.f-header .select::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: relative;
}

.f-header .select,
.f-header .select * {
    cursor: pointer !important;
}

.f-header .select:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.f-header .title {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.f-header .title > .icon {
    margin-right: 0.25rem;
}

.f-header .title .table {
    margin-left: 0.25rem;
    color: var(--menu-ctrl-text-muted);
}

.f-content {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.f-preview {
    flex: 1;
    align-self: center;
    padding: 0.75rem;
}

.f-dialog .warning {
    color: var(--color-red);
}

.f-dialog .warning > .icon {
    margin-right: 0.25rem;
}

.f-content .range {
    flex: 1;
}

.f-content .range .inputs {
    display: flex;
    margin: 0 0.25rem;
}

.f-content .range .inputs input {
    width: 30%;
}

.f-content .range .inputs input:last-child {
    margin-left: auto;
}

.f-content .date-range {
    flex: 1;
    overflow: auto;
    padding: 0.25rem;
}

.f-content .date-range .diff {
    padding: 0.25rem;
    background: var(--main-ctrl-bg);
    border: 1px solid var(--main-ctrl-bg);
    flex: 0;
    font-weight: bold;
}

.f-content .range > .presets {
    margin: 0.25rem;
}

.f-content .date-range .presets {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.f-content .date-range .presets > * {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.f-content .date-range .inputs {
    display: flex;
    align-items: start;
}

.f-content .date-range .inputs > .datepicker {
    flex: 1;
}

.f-header .select-container .fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.001);
    z-index: 12000;
}

.f-header .select-container .list {
    position: absolute;
    display: flex;
    flex-flow: column;
    background: var(--container-bg);
    color: var(--container-text);
    box-shadow: var(--default-shadow);
    overflow: hidden;
}

.f-header .select-container input {
    margin: 0.5rem 0.25rem;
}

.f-header .select-container .virtual-scroller {
    flex: 1;
}

.f-header .select-container .list .item {
    padding: 2px 5px;
    height: 25px;
}

.f-header .select-container .list .item > .icon {
    margin-right: 0.25rem;
}

.f-header .select-container .list .item,
.f-header .select-container .list .item * {
    cursor: pointer !important;
}

.f-header .select-container .list .item.selected {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.f-header .select-container .list .item.indent {
    margin-left: 0.5rem;
}

.f-header .select-container .list .item:hover,
.f-header .select-container .list .item.selected:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.f-header .select-container .list .item.full {
    margin-top: 0.5rem;
}

.f-content .values {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.f-content .values .half {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0.25rem;
}

.f-content .values .half input {
    margin-bottom: 0.25rem;
}

.f-content .values .value-list-item {
    display: flex;
    width: 100%;
    padding: 0 0.25rem;
}

.f-content .values .value-list-item,
.f-content .values .value-list-item * {
    cursor: pointer !important;
}

.f-content .values .value-list-item.muted {
    color: var(--container-text-muted);
}

.f-content .values .value-list-item .value-list-text {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.f-content .values .value-list-item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.f-content .values .value-list-item .value-list-hint {
    display: none;
}

.f-content .values .value-list-item:hover .value-list-hint {
    display: block;
    color: var(--main-ctrl-text-muted-hover);
}

.f-content .values .value-list-item .value-list-hint .icon {
    margin: 0 0.25rem;
}

.aggregation-add .content {
    margin: 0;
}

.aggregation-add .list {
    flex: 1;
    overflow-y: auto;
}

.aggregation-add .list .item {
    padding: 0.5rem;
}

.aggregation-add .list .item,
.aggregation-add .list .item * {
    cursor: pointer;
}

.aggregation-add .list .item .icon {
    margin-right: 0.25rem;
}

.aggregation-add .list .item > :first-child {
    font-weight: bold;
}

.aggregation-add .list .item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.aggregation-add .list .item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.aggregation {
    flex-direction: column;
}

.aggregation .row {
    flex-flow: row;
    display: flex;
    height: 100%;
    overflow: hidden;
}

.aggregations {
    flex: 1;
    overflow: auto;
}

.aggregations .aggregation {
    margin: 1rem;
    box-shadow: var(--default-shadow);
    max-width: 600px;
}

.aggregations .aggregation > .title {
    display: flex;
    font-weight: bold;
}

.aggregations .aggregation > .title > * {
    padding: 0.25rem;
}

.aggregations .aggregation > .title > .title {
    flex: 1;
}

.aggregations .aggregation > .title > button:not(:hover):not(:active) {
    background: none;
}

.aggregations .aggregation > .body {
    display: flex;
}

.aggregations .aggregation > .body > .icon {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.aggregations .aggregation > .body > div {
    flex: 1;
    padding: 0.25rem;
    overflow: hidden;
}

.aggregations .aggregation .input:not(:last-child),
.aggregations .aggregation .output:not(:last-child) {
    margin-bottom: 0.25rem;
}

.aggregations .aggregation .input > .title,
.aggregations .aggregation .output > .title {
    color: var(--main-ctrl-text-muted);
}

.aggregation .edit {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.aggregation .edit > label + label {
    margin-top: 0.25rem;
}

.aggregation .edit .alert {
    white-space: pre-wrap;
    margin: 0;
    margin-top: 1rem;
    font-family: monospace;
}

.aggregation .edit table td,
.aggregation .edit table th {
    text-align: left;
    vertical-align: middle;
    white-space: pre;
}

.aggregation .edit table select,
.aggregation .edit table button {
    margin: -0.25rem;
}

.aggregation .graph {
    position: relative;
}

.aggregation .graph .agg-container {
    position: absolute;
}

.aggregation .graph .agg-container .aggregation {
    width: 500px;
}

.aggregation .graph > svg * {
    stroke: black;
    stroke-width: 2px;
    fill: transparent;
}

.aggregation-input .search {
    margin: 0.25rem;
}

.aggregation-input .virtual-scroller {
    flex: 1;
    overflow-y: auto;
}

.aggregation-input .virtual-scroller .item {
    padding: 0.5rem;
    height: 58px;
    overflow: hidden;
}

.aggregation-input .virtual-scroller .item,
.aggregation-input .virtual-scroller .item * {
    cursor: pointer;
}

.aggregation-input .virtual-scroller .item .icon {
    margin-right: 0.25rem;
}

.aggregation-input .virtual-scroller .item > :first-child {
    font-weight: bold;
}

.aggregation-input .virtual-scroller .item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.aggregation-input .virtual-scroller .item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.agg-code .menu {
    background: var(--container-header-bg);
    color: var(--container-header-text);
}

.agg-code .content {
    margin: 0;
}

.agg-code .content-inner {
    flex: 1;
    flex-direction: column;
    display: flex;
    overflow: hidden;
    padding: 0.25rem;
}

.agg-code .content-inner.scroll {
    overflow-y: auto;
}

.agg-code .code-editor {
    flex: 1;
}

.aggregation .aggregations {
    flex: 1;
    overflow-y: auto;
}

.agg-value {
    background: #8a8b8c;
    color: white;
    padding: 0.25rem;
    height: calc(2rem + 3px);
    border-radius: 1rem;
    margin: 0.25rem;
    display: flex;
    align-items: center;
    padding-right: 1rem;
    box-shadow: var(--default-shadow-sm);
}

.agg-value.clickable,
.agg-value.clickable * {
    cursor: pointer;
}

.agg-value > .icon {
    margin-left: 0.25rem;
    margin-right: 0.5rem;
}

.agg-value .title {
    flex: 1;
}

.agg-value .remove {
    padding: 0.5rem;
    margin-right: -1rem;
}

.agg-value .remove,
.agg-value .remove * {
    cursor: pointer;
}

.agg-value input {
    flex: 1;
}

.agg-value div {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.agg-value.series,
.agg-value.series_arr {
    background: #5078B4;
}

.agg-value.scalar,
.agg-value.scalar_arr {
    background: #2D826E;
}

.agg-value-large {
    background: var(--container-insert-bg);
    padding: 0.5rem;
    border-radius: 1rem;
    margin: 0.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow-sm);
}

.agg-value-large .agg-value {
    margin: -0.5rem;
    box-shadow: none;
}

.agg-value-large .agg-value + * {
    margin-top: 1rem;
}

.import .editsource {
    flex: 1;
    display: flex;
    flex-flow: row;
    flex-shrink: 0;
    overflow: hidden;
}

.import .editsource {
    flex: 1;
    display: flex;
    flex-flow: row;
    flex-shrink: 0;
    overflow: hidden;
}

.import .edit {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.import .edit .container-title-inner {
    flex-flow: column;
    align-items: start;
}

.import .edit .title {
    display: flex;
}

.import .edit .extended {
    margin-top: 0.75rem;
    color: var(--container-text-muted);
}

.import .edit .extended,
.import .edit .extended * {
    cursor: pointer;
}

.import .edit h2 {
    padding: 0.25rem;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.import .edit .select-group {
    display: flex;
}

.import .edit .settings {
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.25rem;
}

.import .edit .settings > label,
.import .edit .settings > button {
    margin-top: 0.75rem;
}

.import .edit .settings > .settings-label + label {
    margin-top: 0;
}

.import .edit .settings .group {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    transition-duration: var(--transition);
}

.import .edit .settings .group:hover {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.import .edit .settings .group .title {
    flex: 1;
}

.import .edit .settings .input-group {
    display: flex;
}

.import .edit .settings .input-group .icon {
    align-self: center;
    margin-left: 0.5rem;
    margin-right: 0.25rem;
}

.import .edit .settings .input-group select,
.import .edit .settings .input-group input {
    flex: 1;
}

.import .edit .settings .input-group button {
    padding: 0.25rem;
}

.import .edit .settings .list {
    flex: 1;
    overflow-y: auto;
}

.import .edit .settings .transformation,
.import .edit .settings .limit {
    display: flex;
    margin: 0.25rem 0;
}

.import .edit .settings .transformation .title,
.import .edit .settings .limit .title {
    flex: 1;
    align-items: center;
    transition-duration: var(--transition);
}

.import .edit .settings .transformation .title:hover,
.import .edit .settings .limit .title:hover {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.import.limits input {
    width: 100%;
}

.import .edit .settings .calculation {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.import .edit .settings .calculation textarea {
    flex: 1;
}

.import .edit .settings .calculation .render {
    flex: 1;
    padding: 0.25rem;
    overflow-y: auto;
    color: var(--container-text-muted);
}

.import .edit .settings .calculation .function,
.import .edit .settings .calculation .reference,
.import .edit .settings .calculation .value {
    color: var(--container-text);
}

.import .edit .settings .calculation .render button {
    float: right
}

.import .grid {
    flex: 1;
    overflow: auto;
    position: relative;
    --table-border: #e0e0e0;
}

/* Spacers */

.import .grid .spacer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.import .grid .header-spacer {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3000;
}

.import .grid .header-spacer-inner {
    position: absolute;
    width: 100px;
    height: 40px;
    margin-top: -1px;
    margin-right: -1px;
    top: 0;
    left: 0;
    z-index: 3000;
    background: var(--container-bg);
    border-bottom: 1px solid var(--table-border);
    border-right: 1px solid var(--table-border);
}

/* Counter */

.import .grid .row-counters {
    position: sticky;
    left: 0;
    z-index: 1500;
    color: var(--container-text-muted);
}

.import .grid .row-counter {
    width: 100px;
    height: 26px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: -1px;
    margin-right: -1px;
    overflow: hidden;
    position: absolute;
    padding-right: 4px;
    text-align: right;
    left: 0;
    background: var(--container-bg);
    border-top: 1px solid var(--table-border);
    border-right: 1px solid var(--table-border);
}

.import .grid .row-counter.selected {
    background-color: #eaeded;
}

/* Header */

.import .grid .header-row {
    position: sticky;
    top: 0;
    display: flex;
    z-index: 2000;
}

.import .grid .header {
    width: 180px;
    height: 40px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: -1px;
    margin-right: -1px;
    overflow: hidden;
    padding-left: 4px;
    position: absolute;
    top: 0;
    background: var(--container-bg);
    border-left: 1px solid var(--table-border);
    border-right: 1px solid var(--table-border);
}

.import .grid .header .title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.import .grid .header .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    white-space: pre;
    color: #6c757d;
    margin-top: -5px;
}

.import .grid .header .header-tint-0 {
    position: absolute;
    background-color: #bbbbbb;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.import .grid .header .header-tint-1 {
    position: absolute;
    background-color: #5078B4;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.import .grid .header .header-tint-2 {
    position: absolute;
    background-color: #4BAF9B;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.import .grid .header .header-tint-3 {
    position: absolute;
    background-color: #EB232D;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.import .grid .header .header-tint-4 {
    position: absolute;
    background-color: #F0D25A;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}


.import .grid .header .header-tint-5 {
    position: absolute;
    background-color: #F0D25A;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}


.import .grid .header .header-tint-6 {
    position: absolute;
    background-color: #EB232D;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
}

.import .header-bg-0 {
    background-color: #bbbbbb;
}

.import .header-bg-1 {
    background-color: #5078B4;
}

.import .header-bg-2 {
    background-color: #4BAF9B;
}

.import .header-bg-3 {
    background-color: #EB232D;
}

.import .header-bg-4 {
    background-color: #F0D25A;
}

.import .header-bg-5 {
    background-color: #F0D25A;
}

.import .header-bg-6 {
    background-color: #EB232D;
}

.import .grid .header.selected {
    background-color: #eaeded;
}

.import .grid .header.selected .subtitle {
    color: #444;
}

/* Cells */

.import .grid .cells {
    display: flex;
}

.import .grid .cell {
    position: absolute;
    width: 180px;
    height: 26px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: -1px;
    margin-right: -1px;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
    display: flex;
    z-index: 1000;
    border: 1px solid var(--table-border);
}

.import .grid .cell .value {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.import .grid .cell .value.inactive {
    color: #aaa;
}

.import .grid .cell.selected .value.inactive {
    color: #666;
}

.import .grid .cell.disabled .value {
    text-decoration: line-through;
}

.import .grid .cell .edit {
    margin-top: -2px;
}

.import .grid .cell.selected {
    background-color: #eaeded;
}

.import .grid .tabs {
}

.import .list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.import .list > .header > label {
    background: transparent;
}

.import .list > .header {
    display: flex;
    align-items: center;
    background: var(--container-bg);
    font-weight: bold;
}

.import .list .column-dot {
    width: 12px;
    height: 12px;
}

.import .list .list-index {
    width: 3.5em;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.import .list .list-index .icon {
    margin-left: 0.25rem;
}

.import .list .list-index,
.import .list .list-index * {
    cursor: pointer !important;
}

.import .list .list-name {
    flex: 1;
    display: flex;
    align-items: center;
}

.import .list .list-name input {
    margin-left: 0.5rem;
    font-weight: normal;
    cursor: text !important;
    flex: 1;
}

.import .list .list-name .icon {
    margin-left: 0.25rem;
}

.import .list .list-name,
.import .list .list-name * {
    cursor: pointer !important;
}

.import .list .enabled-host {
    position: relative;
}

.import .list .enabled-host:hover .enabled-hover {
    display: block;
}

.import .list .enabled-hover {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 250px;
    display: none;
    background: var(--container-bg);
    color: var(--container-text);
    box-shadow: var(--default-shadow);
    z-index: 1000;
}

.import .list .enabled-hover div {
    margin: 0.25rem;
}

.import .list .enabled-hover label {
    display: flex !important;
    align-items: center;
    margin: 0.25rem 0;
}

.import .list .enabled-hover label .column-dot {
    margin-right: 0.25rem;
}

.import .list .list-preview {
    position: absolute;
    right: 2rem;
    top: 2rem;
    bottom: 2rem;
    width: 180px;
    pointer-events: none;
    display: flex;
    background: var(--container-bg);
    box-shadow: var(--default-shadow);
    overflow: hidden;
}

.import .list .list-preview .grid {
    overflow: hidden;
}

.import .list .items {
    flex: 1;
    overflow-y: auto;
}

.import .list .item {
    display: flex;
    align-items: center;
    overflow: hidden;
    transition-duration: var(--transition);
    height: 37px;
}

.import .list .item,
.import .list .item * {
    cursor: pointer !important;
}

.import .list .item * {
    flex-shrink: 0;
}

.import .list .item.selected {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.import .list .item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.import .list .item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.import .list .item > label {
    background: transparent;
}

.import .list .item .type,
.import .list .item .calculation {
    margin-left: 0.5rem;
}

.import .list .item .table,
.import .list .item .calculation,
.import .list .item .type,
.import .list .item .id {
    color: var(--main-ctrl-text-muted);
}

.import .list .item:hover .table,
.import .list .item:hover .calculation,
.import .list .item:hover .type,
.import .list .item:hover .id {
    color: var(--main-ctrl-text-muted-hover);
}

.import .list .item:active .table,
.import .list .item:active .calculation,
.import .list .item:active .type,
.import .list .item:active .id {
    color: var(--main-ctrl-text-muted-pressed-hover);
}

.import .list .item .title {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.import .list .item .title > .icon {
    margin: 0 0.25rem;
}

.delete-column .content {
    padding: 0.5rem;
    overflow: auto;
}

.delete-column .content ul {
    margin: 0.5rem 0;
}

.delete-column .content li {
    margin-bottom: 0.25rem;
}

.import-state .content {
    display: flex;
    flex-direction: column;
}

.import-state .content textarea {
    font-family: monospace;
    flex: 1;
}

.import {
    flex-flow: column;
}

.hexpol-custom-import {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.hexpol-custom-import .mt-2 {
    margin-top: 0.5rem;
}

.hexpol-custom-import .input-group {
    display: flex;
}

.hexpol-custom-import .input-group-prepend {
    padding: 0.25rem;
    width: 10rem;
}

.hexpol-custom-import .form-control {
    flex: 1;
}

.hexpol-custom-import .mt-1 {
    margin-top: 0.25rem;
}

.import .row {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.import > .row > div > .resizable {
    animation: var(--animation-slide-left);
}

.import .container > .sources,
.import .container > .sources .source {
    flex: 1;
    overflow-y: auto;
}

.import .sources .stats {
    margin: 0.25rem;
}

.import .sources .warning .icon {
    margin-right: 0.25rem;
}

.import .sources .change {
    width: 15em;
}

.import .sources .rows {
    width: 12em;
}

.import .sources .warning-active:not(:hover):not(:active):not(.selected) {
    background: #FAE6AA;
    color: #856404;
}

.import .sources .name {
    text-align: left;
    width: 50%;
}

.import .sources .name .icon {
    margin-right: 0.25rem;
}

.import .sources table .label {
    text-align: left;
    max-width: 10em;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.import .sources table .label .icon {
    margin-right: 0.25rem;
}

.import .source {
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
}

.import .source > .settings-label {
    margin-left: 0.25rem;
}

.import .source > button {
    margin: 0.25rem;
}

.import .source .meta {
    padding: 0.25rem;
    border-bottom: 1px solid var(--table-stripe-bg);
}

.import .source .meta .title {
    display: flex;
    align-items: center;
}

.import .source .meta .title > div:first-child {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.import .source .meta .title > select {
    width: auto;
}

.import .source .meta .connections {
    display: flex;
    flex-wrap: wrap;
}

.import .source .meta .connections .connection {
    display: flex;
    align-items: center;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

.import .source .meta .connections .connection.linked {
    background: var(--filter-bg);
    color: var(--filter-text);
}

.import .source .meta .connections .connection .title {
    margin: 0.25rem;
}

.import .source .meta .connections .connection .table {
    margin: 0.25rem;
    font-style: italic;
}

.import .source .meta .connections .connection button {
    padding: 0.25rem;
}

.import .source .meta .connections .connection.linked button:not(:active):not(:hover) {
    background: var(--filter-bg);
    color: var(--filter-text);
}

.import .source .meta .connections > button {
    padding: 0.25rem;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
}

.import .warning-settings {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    overflow: auto;
    flex: 1;
}

.import .warning-settings > div,
.import .warning-settings > select {
    margin-bottom: 0.25rem;
}

.import .warning-settings .empty {
    padding: 0.5rem;
}

.import .warning-settings .user {
    margin-top: 0.25rem;
    padding: 0;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-align: left;
}

.import .warning-settings .user > .icon {
    padding: 0.5rem;
}

.import .warning-settings .user .title {
    padding: 0.5rem 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.import .warning-settings .user .remove {
    padding: 0.5rem;
}

.import .warning-settings .user .remove,
.import .warning-settings .user .remove * {
    cursor: pointer;
}

.warning-users {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.warning-users button {
    text-align: left;
    margin-bottom: 0.25rem;
    display: flex;
}

.import.wizard .navigation-item {
    pointer-events: none;
}

.import.wizard .main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.import.wizard .preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.import.wizard .preview h1,
.import.wizard .preview p {
    margin-left: 0.25rem;
}

.import.wizard .preview .table {
    flex: 1;
    overflow: auto;
}

.import.wizard .preview .table table {
    min-width: 100%;
}

.import.wizard .side {
    background: var(--container-insert-bg);
    width: 300px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.25rem;
    transition-duration: var(--transition);
}

.import.wizard .side textarea {
    height: 200px;
}

.import.wizard .side select + input {
    margin-top: 0.25rem;
}

.import.wizard .side .select-group {
    flex-flow: column;
}

.import.wizard .side .input-group {
    display: flex;
}

.import.wizard .side .input-group input,
.import.wizard .side .input-group select {
    flex: 1;
}

.import.wizard .side .select-group label:not(:last-of-type) {
    margin-bottom: 0.25rem;
}

.import.wizard .side > label,
.import.wizard .side .buckets > label,
.import.wizard .side > button {
    margin-top: 0.25rem;
}

.import.wizard .side .buckets {
    flex: 1;
    overflow-y: auto;
}

.import.wizard .side > .value {
    border-left: 3px solid var(--main-ctrl-bg);
    padding-top: -0.25rem;
    margin-top: 0.25rem;
    padding-left: 3px;
}

.import.wizard .side .value > input {
    width: 100%;
}

.import.wizard .side .buttons {
    margin-top: auto;
    width: 100%;
    display: flex;
    padding-top: 0.25rem;
}

.import.wizard .side .buttons button {
    flex: 1;
}

.import.wizard .dot {
    width: 12px;
    height: 12px;
    margin-right: 0.25rem;
    display: inline-block;
    float: left;
    margin-top: 0.25rem;
}

.import.wizard .dots {
    display: flex;
    align-items: center;
}

.import.wizard .dots div {
    margin: 0 0.25rem;
}

.import.wizard .dot.value {
    background: #5078B4;
}

.import.wizard .dot.date {
    background: #4BAF9B;
}

.import.wizard td.value {
    background: #5078B4;
    color: white;
}

.import.wizard td.date {
    background: #4BAF9B;
    color: white;
}

.import.wizard td.value.date {
    background-image: linear-gradient(165deg, #5078B4 50%, #4BAF9B 50%);
    color: white;
}

.import.wizard .sources {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    flex: none;
}

.import.wizard .sources .source {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    width: 90px;
    margin: 0.5rem 0;
    transition-duration: var(--transition);
    flex: none;
}

.import.wizard .sources .source,
.import.wizard .sources .source * {
    cursor: pointer !important;
}

.import.wizard .sources .source.inactive {
    color: var(--container-text-muted);
}

.import.wizard .sources .source .title {
    max-width: 90%;
    overflow: hidden;
    text-align: center;
}

.import.wizard .sources .source > .icon {
    margin: 0.5rem;
}

.import .loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.import .loading h1 {
    text-align: center;
}

.jobs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobs .editor {
    position: relative;
    flex: 1;
    background: var(--body-bg);
    overflow: scroll;
    padding-bottom: 100px;
}

.jobs .editor .versions {
    flex: 1;
    overflow-y: auto;
}

.jobs .logs {
    flex: 1;
    overflow: auto;
}

.jobs-log-popup .content {
    overflow: auto;
}

.jobs-log-popup .content .message {
    white-space: pre;
    font-family: monospace;
}

.jobs-log-popup h1 {
    margin-left: 0.25rem;
}

.jobs .editor svg {
    overflow: visible;
}

.jobs .handle-target {
    position: absolute;
}

@keyframes target-pulse {
    from {
        box-shadow: 0px 0px 4px 0px #000000;
    }

    to {
        box-shadow: 0px 0px 10px 0px #000000;
    }
}

.jobs .handle-target::after {
    content: "";
    position: relative;
    top: -7px;
    height: 14px;
    left: -7px;
    width: 14px;
    background-color: white;
    border: 2px solid black;
    border-radius: 6px;
    display: block;
    animation: 0.5s infinite alternate target-pulse;
    cursor: pointer;
}

.jobs .editor .connecting-host {
    position: absolute;
    top: 0;
    left: 0;
    width: 5000px;
    height: 5000px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.jobs .connectors path {
    stroke: black;
    stroke-width: 2px;
    fill: none;
}

.jobs .editor > .add {
    position: fixed;
    top: 200px;
    right: 100px;
    height: 80px;
}

.jobs .editor > .add .hover {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: var(--container-bg);
    box-shadow: var(--default-shadow-sm);
}

.jobs .editor > .add .items {
    position: absolute;
    top: -20px;
    width: 150px;
    left: -43px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    opacity: 0;
}

.jobs .editor > .add:hover .hover {
    box-shadow: var(--default-shadow);
}

.jobs .editor > .add:hover .items {
    top: 80px;
    opacity: 1;
}

.jobs .editor > .add .items button {
    margin-bottom: 0.5rem;
    box-shadow: var(--default-shadow-sm);
    text-align: left;
    padding: 0.75rem
}

.jobs .editor > .add .items button .icon {
    margin: -0.5rem;
    padding: 0.5rem;
    margin-right: 0.5rem;
    color: #ffffff;
    border-radius: 0.5rem;
}

.jobs .editor > .add .items button.green .icon {
    background: var(--color-green);
}

.jobs .editor > .add .items button.blue .icon {
    background: var(--color-blue);
}

.jobs .editor > .add .items button.yellow .icon {
    background: var(--color-yellow);
}

.jobs-editor-popup .code {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.jobs-editor-popup .code .sidebar {
    width: 350px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.jobs-editor-popup .code .sidebar .input {
    display: flex;
    margin-top: 0.25rem;
}

.jobs-editor-popup .code .sidebar .input input,
.jobs-editor-popup .code .sidebar .input select {
    flex: 1;
}

.jobs-editor-popup .code .sidebar .input input,
.jobs-editor-popup .code .sidebar .input button,
.jobs-editor-popup .code .sidebar .input select {
    padding: 0.25rem;
}

.jobs-editor-popup .code .add {
    margin-top: 0.25rem;
    color: var(--main-ctrl-text-muted)
}

.jobs-editor-popup .code .add,
.jobs-editor-popup .code .add * {
    cursor: pointer;
}

.jobs-editor-popup .code .add .icon {
    margin-right: 0.25rem;
}

.jobs-editor-popup .code .debugger {
    width: 400px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.jobs-editor-popup .code .debugger .result {
    margin-bottom: 0.25rem;
    padding: 0.25rem;
    border-bottom: 1px solid var(--color-1);
}

.jobs-editor-popup .code .debugger .result .header {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    margin: -0.25rem;
}

.jobs-editor-popup .code .debugger .result .header,
.jobs-editor-popup .code .debugger .result .header * {
    cursor: pointer;
}

.jobs-editor-popup .code .debugger .result .header :first-child {
    flex: 1
}

.jobs-editor-popup .code .debugger td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    max-width: 100px;
}

.jobs-editor-popup .code .debugger .result .indicator {
    margin: 0.25rem
}

.jobs-editor-popup .code .debugger .message {
    max-height: 8rem;
    white-space: pre-wrap;
    overflow-y: auto;
    font-family: monospace;
}

.jobs-editor-popup .inputs,
.jobs-editor-popup .outputs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.jobs-editor-popup .inputs .input,
.jobs-editor-popup .outputs .output {
    padding: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: var(--default-shadow-sm);
    border-radius: 0.5rem;
    width: 250px;
    display: flex;
    flex-direction: column;
}

.jobs-editor-popup .inputs .input .row,
.jobs-editor-popup .outputs .output .row {
    display: flex;
    flex-direction: row;
}

.jobs-editor-popup .inputs .input input,
.jobs-editor-popup .outputs .output input {
    flex: 1;
}

.jobs-editor-popup .inputs > button,
.jobs-editor-popup .outputs > button {
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}

.jobs-editor-popup .sidebar .input .icon,
.jobs-editor-popup .sidebar .output .icon {
    margin-right: 0.25rem;
}

.jobs-static-table .search {
    margin-bottom: 0.25rem;
}

.jobs-static-table .virtual-scroller {
    flex: 1;
    overflow-y: auto;
}

.jobs-static-table .virtual-scroller .item {
    padding: 0.25rem;
    height: 50px;
    overflow: hidden;
}

.jobs-static-table .virtual-scroller .item,
.jobs-static-table .virtual-scroller .item * {
    cursor: pointer;
}

.jobs-static-table .virtual-scroller .item .icon {
    margin-right: 0.25rem;
}

.jobs-static-table .virtual-scroller .item > :first-child {
    font-weight: bold;
}

.jobs-static-table .virtual-scroller .item:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.jobs-static-table .virtual-scroller .item:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.jobs .trigger-editor {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.jobs .trigger-editor > select,
.jobs .trigger-editor > input,
.jobs .trigger-editor > button,
.jobs .trigger-editor > .label-editor,
.jobs .trigger-editor > .row,
.jobs .trigger-editor > .permissions {
    max-width: 500px;
}

.jobs .trigger-editor > .row {
    display: flex;
    margin-bottom: 0.25rem;
}

.jobs .trigger-editor .tables,
.jobs .trigger-editor .schedules {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.jobs .trigger-editor .tables > .table,
.jobs .trigger-editor .schedules > .timetable {
    padding: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: var(--default-shadow-sm);
    border-radius: 0.5rem;
    width: 500px;
    display: flex;
    flex-direction: column;
}

.jobs .trigger-editor .tables > .table {
    width: 250px;
}

.jobs .trigger-editor .tables > .table .row,
.jobs .trigger-editor .schedules > .timetable .row {
    display: flex;
    flex-direction: row;
}

.jobs .trigger-editor .tables > .table .row input,
.jobs .trigger-editor .schedules > .timetable .row input {
    flex: 1;
}

.jobs .trigger-editor .schedules > .timetable .entry {
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: row;
    align-items: start;
    border-left: 0.25rem solid var(--color-1);
    padding: 0.25rem;
}

.jobs .trigger-editor .schedules > .timetable .entry > button {
    margin-right: 0.5rem;
}

.jobs .trigger-editor .schedules > .timetable .entry .settings {
    flex: 1;
}

.jobs .trigger-editor .schedules > .timetable .text-row select,
.jobs .trigger-editor .schedules > .timetable .text-row label {
    width: auto;
    display: inline-block;
    margin: 0.1rem;
}

.jobs .trigger-editor .schedules > .timetable .text-row label:first-child {
    margin-left: 0;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
}

.jobs .trigger-editor .schedules > .timetable .text-row input:not([type=checkbox]) {
    display: inline-block;
    width: 3rem;
}

.jobs .trigger-editor .tables > button,
.jobs .trigger-editor .schedules > button {
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}

.jobs .trigger-editor .tables > .table > .row + button,
.jobs .trigger-editor .tables > .table > .row + .row {
    margin-top: 0.25rem;
}

.jobs .trigger-editor .annotation-info {
    margin-bottom: 0.25rem;
}

.jobs input.invalid {
    border: 1px solid #ff0000 !important;
}

.jobs-group-dialog .content {
    overflow-y: auto;
    padding: 0.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.jobs-group-dialog .content > * {
    margin-bottom: 0.25rem;
}

.jobs-group-dialog .row {
    display: flex;
}

.jobs-group-dialog .row input {
    flex: 1;
}

.jobs .container > .list {
    flex: 1;
    overflow: auto;
}

.jobs .container > .list table td > .icon {
    margin-right: 0.25rem;
}

.jobs .element {
    position: absolute;
}

.jobs .element .content {
    border-radius: 1rem;
    width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jobs .element .content {
    position: relative;
    border-radius: 1rem;
    width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0.5rem;
    background: var(--container-bg)
}

.jobs .element .content .head,
.jobs .element .content .head * {
    text-align: center;
    cursor: move;
    color: white;
}

.jobs .element .content .head {
    height: 45px;
}

.jobs .element .content .head .dots {
    margin: -0.25rem 0;
}

.jobs .element .content .head .title {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.jobs .element .content .head .title .icon {
    margin-right: 0.25rem;
}

.jobs .element .segment {
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: var(--main-ctrl-bg);
}

.jobs .element .input {
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 1rem;
    position: relative;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    width: 300px;
}

.jobs .element .output {
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 1rem;
    position: relative;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    width: 300px;
}

.jobs .element .input .icon,
.jobs .element .output .icon {
    margin-right: 0.25rem;
}

.jobs .element .input.muted,
.jobs .element .output.muted {
    color: var(--main-ctrl-text-muted);
}

.jobs .element .columns {
    width: 300px;
    display: flex;
    flex-direction: row;
}

.jobs .element .column {
    width: 150px;
    display: flex;
    flex-direction: column;
}

.jobs .element .column .input,
.jobs .element .column .output {
    width: 150px;
}

/* Handles */

.jobs .handle {
    position: absolute;
    width: 0;
    height: 0;
}

.jobs .handle::after {
    content: "";
    position: relative;
    top: -6px;
    height: 12px;
    left: -6px;
    width: 12px;
    background-color: white;
    border: 2px solid black;
    border-radius: 6px;
    display: block;
    cursor: pointer;
}

.jobs .handle:hover::after {
    top: -7px;
    height: 14px;
    left: -7px;
    width: 14px;
    border-radius: 7px;
}

.jobs .handle .in-buttons {
    position: absolute;
    right: 7px;
    top: -3rem;
    opacity: 0;
    width: 0;
    transition: var(--transition);
    overflow: hidden;
    white-space: pre;
    display: flex;
    align-items: center;
    padding: 0.25rem 0 0.25rem 0.25rem;
    height: 6rem;
}

.jobs .handle:hover .in-buttons {
    width: 200px;
    opacity: 1;
    z-index: 1000;
}

.jobs .handle:hover .in-buttons .spacer {
    width: 1rem;
    height: 2px;
    background: black;
}

.jobs .handle .in-buttons .stack {
    flex: 1;
    box-shadow: var(--default-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.jobs .handle .in-buttons button {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

/* Buttons */
.jobs .element .buttons {
    position: absolute;
    top: 0rem;
    right: 1rem;
    opacity: 0;
    transition: var(--transition);
}

.jobs .element:hover .buttons {
    position: absolute;
    top: -2.25rem;
    right: 1rem;
    opacity: 1;
    display: block;
    box-shadow: var(--default-shadow-sm);
}

.jobs .element .content {
    box-shadow: none;
    transition: var(--transition);
    box-shadow: var(--default-shadow-sm);
}

.jobs .element:hover .content {
    box-shadow: var(--default-shadow);
}

/* Styles */
.jobs .element.table .content .head {
    background: var(--color-green);
}

.jobs .element.report .content .head {
    background: var(--color-yellow);
}

.jobs .element.script .content .head {
    background: var(--color-blue);
}

/* Popup */
.jobs-editor-popup .content {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jobs-editor-popup .content .container {
    margin: 0;
}

.jobs-editor-popup .content .container .settings {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0.5rem;
}

.jobs .move-target {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    background: transparent;
    cursor: move;
}

.jobs .static {
    position: absolute;
    overflow: hidden;
    white-space: pre;
    display: flex;
    align-items: center;
    padding: 0.25rem 0 0.25rem 0.25rem;
    width: 201px;
    height: 40px;
}

.jobs .static .spacer {
    width: calc(1rem + 1px);
    height: 2px;
    background: black;
}

.jobs .static .value {
    flex: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    box-shadow: var(--default-shadow-sm);
    color: #ffffff;
    padding: 0.5rem;
}

.jobs .static .value .secondary {
    margin-left: 0.25rem;
    font-style: italic;
}

.jobs .static .value .icon {
    padding-right: 0.25rem;
}

.jobs .static.column .value,
.jobs .static.table .value {
    background: var(--color-green);
}

.jobs .static.value .value {
    background: var(--color-gray);
}

.login-form button,
.login-form input {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.login-form .alert {
    margin: 0;
    margin-bottom: 0.5rem;
}

.login-form .sso {
    margin-bottom: 1.5rem;
}

.loading .manual {
    color: var(--main-ctrl-text-muted);
    margin-bottom: 0.5rem;
    margin-top: -1.8rem;
}

.loading .manual .icon {
    margin-right: 0.25rem;
}

.loading .manual,
.loading .manual * {
    cursor: pointer;
}

.user-menu {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 0.5rem;
    background-color: var(--container-bg);
    border-bottom: 1px solid var(--body-bg);
}

.user-menu .profile {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
    background-color: var(--side-bg);
    color: var(--side-text);
    border-radius: 100%;
}

.user-menu .dropdown {
    display: none;
    position: absolute;
    background: var(--container-bg);
    width: 300px;
    top: 40px;
    right: 0px;
    overflow-y: auto;
    box-shadow: var(--default-shadow-sm);

    flex-direction: column;
    padding: 0.25rem;
}

.user-menu:hover .dropdown {
    z-index: 12000;
    display: flex;
    animation: var(--animation-slide-down);
}

.user-menu .name {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    max-width: 180px;
}

.user-menu .dropdown> :not(:last-child) {
    margin-bottom: 0.25rem;
}

.user-menu .dropdown .user {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
}

.user-menu .dropdown .user .profile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
    background-color: var(--side-bg);
    color: var(--side-text);
    border-radius: 100%;
}

.user-menu .dropdown .user .text {
    flex: 1;
    overflow: hidden;
}

.user-menu .dropdown .user .text .name {
    font-size: 1.2em;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.user-menu .dropdown .user .text .mail {
    color: var(--main-ctrl-text-muted);
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.user-menu .dropdown .labels {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
}

.user-menu .dropdown .labels .badge {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.user-menu .dropdown .labels .badge,
.user-menu .dropdown .labels .badge * {
    cursor: pointer;
}

.user-menu .label-preview {
    margin-left: 0.5rem;
}

.user-menu .label-preview .label-holder .badge {
    border: 1px solid var(--container-bg);
    max-width: 150px;
    display: inline-block;
    margin-top: 4px;
}

.user-menu .label-preview .label-holder:not(:last-child) {
    overflow: visible;
    display: inline-block;
    width: 14px;
}

.plan .catalog {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.plan .catalog .side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.plan .catalog .side:not(:last-child) {
    background: var(--container-insert-bg);
    max-width: 400px;
}

.plan .catalog .side:not(:last-child)::after {
    content: "";
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.catalog-popup .row .defaultvalue {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 50px;
}

.plan .catalog .side .scroll,
.catalog-popup .side .scroll {
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.plan .catalog .side .scroll table,
.catalog-popup .side .scroll table {
    margin-bottom: 0.25rem;
}

.catalog-popup .side .scroll textarea {
    height: 12rem;
    flex-shrink: 0;
}

.catalog-popup .side .scroll .row {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.25rem;
}

.catalog-popup .side .scroll .row>* {
    margin-top: 0;
}

.catalog-popup .side .scroll .row input,
.catalog-popup .side .scroll .row button.wide {
    flex: 1;
    text-align: left;
}

.catalog-popup .side .scroll .row button.wide span:not(.icon)+span {
    margin-left: 1rem;
}

.catalog-popup .side .scroll .row .drag {
    cursor: move !important;
    text-align: left;
}

.catalog-popup .side .scroll .row .drag * {
    cursor: move !important;
}

.catalog-popup .side .scroll input+label {
    margin-top: 0.25rem;
}

.catalog-popup .side .scroll label+button {
    margin-top: 0.25rem;
}

.catalog-popup .side .scroll .row button {
    padding: 0.25rem;
}

.catalog-popup .side .scroll .settings-label.select {
    position: relative;
}

.catalog-popup .side .scroll .settings-label.select>span {
    margin-top: 1rem;
}

.catalog-popup .side .scroll .settings-label.select .select-group {
    position: absolute;
    right: 0;
    top: -0.25rem;
}

.catalog-popup .side .scroll .row.sequence-test {
    align-items: start;
    background: var(--main-ctrl-bg);
}

.catalog-popup .side .scroll .row.sequence-test>button {
    align-self: stretch;
}

.catalog-popup .side .scroll .row.sequence-test button.wide {
    overflow: hidden;
}

.catalog-popup .side .scroll .row.sequence-test button.wide>div,
.catalog-popup .side .scroll .row.sequence-test .expanded,
.catalog-popup .side .scroll .row.sequence-test .expanded>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.catalog-popup .side .scroll .row.sequence-test .expanded>div {
    font-weight: bold;
}

.catalog-popup .side .scroll .row.sequence-test .expanded ul {
    margin: 0;
    padding-left: 1.5rem;
}

.catalog-popup .side .scroll .row.sequence-test select {
    width: auto;
}

.catalog-popup .side .scroll .row.sequence-test>input {
    flex: none;
    width: 3rem;
}

.catalog-popup .side .scroll select+select {
    margin-top: 0.25rem;
}

.catalog-popup .side .scroll .characteristic,
.catalog-popup .side .scroll .sequence {
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow);
    margin: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.25rem;
}

.catalog-popup .content {
    margin: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.catalog-popup .side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.catalog-popup .side:not(:last-child) {
    background: var(--container-insert-bg);
    max-width: 300px;
}

.catalog-popup .drag,
.catalog-popup .drag * {
    cursor: move !important;
}

.catalog-popup .drag+td {
    width: 100%;
}

.plan-save-dialog .content {
    overflow: auto;
}

.plan-save-dialog textarea {
    min-height: 15rem;
}

.select-test>span {
    display: flex;
}

.select-test-warning .warning {
    color: #BE0F19;
}

.select-test-warning .icon {
    margin: 0 0.25rem;
}

.select-test-dialog .content {
    overflow: auto;
    margin: 0;
}

.plan-save-dialog label {
    margin-bottom: 0.25rem;
}

.catalog-popup .user {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.catalog-popup .user .title {
    flex: 1;
}

.catalog-popup .user>.icon {
    margin-right: 0.25rem;
}

.catalog-popup.user .title :last-child {
    color: var(--container-text-muted);
}

.catalog-popup .user .title * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-popup .side .scroll label+label {
    margin-top: 0.25rem;
}

.anomalies-user-add td .icon {
    margin-right: 0.25rem;
}

.catalog-popup .settings-label.flex {
    display: flex;
    align-items: end;
    margin-bottom: 0.25rem;
}

.catalog-popup .side .scroll .row .id,
.catalog-popup .settings-label.flex .id {
    width: 30%;
    max-width: 150px;
    flex: none;
    color: var(--container-text-muted);
}

.catalog-popup .side .scroll .row .label,
.catalog-popup .settings-label.flex .label {
    flex: 1;
}

.catalog-popup .fielddefault.constraint {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.catalog-popup .fielddefault.constraint .values .row {
    margin: 0.25rem;
    display: flex;
    align-items: center;
}

.catalog-popup .fielddefault.constraint .values .row > .defaultvalue {
    margin: 0;
}

.catalog-popup .fielddefault.constraint .values .row > button:last-child {
    margin-left: 0.25rem;
}

.catalog-popup .fielddefault {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.catalog-popup .row .fielddefault {
    margin-left: 50px;
}

.catalog-popup .fielddefault .defaultvalue {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.catalog-popup .connection {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.catalog-popup .calculation {
    margin: 0.5rem;
    box-shadow: var(--default-shadow-sm);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
}

.catalog-popup .calculation .title {
    display: flex;
    flex-direction: row;
}

.catalog-popup .parameters {
    flex: 1;
    overflow: auto;
}

.catalog-popup .parameters .char-container {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
    margin-right: 2rem;
}

.catalog-popup .parameters .char-container .indicator > div {
    left: -30px;
}

.catalog-popup .parameters td {
    position: relative;
}

.catalog-popup .parameters .sticky th {
    z-index: 1000;
}

.catalog-popup .parameters td .reset {
    position: absolute;
    top: 4px;
    right: 0.5rem;
}

.catalog-popup .parameters td > button {
    float: none;
}

.catalog-popup .parameters th {
    max-width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan .indicator,
.catalog-popup .indicator {
    position: relative;
}

.plan .indicator > div,
.catalog-popup .indicator > div {
    position: absolute;
    top: 0;
    left: -40px;
}

.plan .indicator.missing .icon,
.plan .indicator.missing .icon *,
.catalog-popup .indicator.missing .icon,
.catalog-popup .indicator.missing .icon * {
    color: #BE0F19;
}

.plan .limits {
    display: flex;
    flex-direction: column;
}

.plan .limit,
.catalog-popup .limit {
    position: relative;
    margin-top: 0.25rem;
}

.plan .limit > .icon,
.catalog-popup .limit > div {
    position: absolute;
    top: 0;
    left: -25px;
}

.plan .limit.invalid ,
.plan .limit.invalid *,
.catalog-popup .limit.invalid,
.catalog-popup .limit.invalid * {
    color: #BE0F19;
}

.plan .file button {
    float: none;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.25rem;
}

.list-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.list-buttons button {
    padding: 1rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.list-buttons button.selected {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.plan-list .content {
    overflow: auto;
}

.plan-list .content > input {
    margin-bottom: 0.5rem;
}

.plan-list .content > button {
    margin-bottom: 0.25rem;
    text-align: left;
}

.list-popup {
    text-align: left;
}

.plan-list .check {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
}

.plan-list .check input {
    margin: 0;
}

.plan .thumbnails,
.catalog-popup .thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.plan .thumbnail,
.catalog-popup .thumbnail {
    position: relative;
    width: 128px;
    height: 128px;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan .thumbnail > img,
.catalog-popup .thumbnail > img {
    cursor: pointer;
}

.plan .thumbnail button,
.catalog-popup .thumbnail button {
    position: absolute;
    top: 0;
    right: 0;
}

.plan .thumbnails > button,
.catalog-popup .thumbnails > button {
    width: 128px;
    height: 128px;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.image-viewer .content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer .content img {
    max-height: 100%;
    max-width: 100%;
}

.plan {
    display: flex;
    flex-direction: column;
}

.plan .list {
    display: flex;
    flex-wrap: wrap;
}

.plan .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 115px;
    margin: 0.25rem;
}

.plan .list .item div {
    padding: 2px 4px;
    display: block;
}

.plan .list .item,
.plan .list .item * {
    cursor: pointer !important;
}

.plan .list .item .icon {
    padding: 0.5rem;
}

.plan .resultpage .edit {
    margin: -0.25rem;
}

.plan-edit-popup .form {
    padding-top: 3rem;
}

.plan-result-filters {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    overflow: auto;
}

.plan-result-filters > * {
    flex-shrink: 0;
}

.plan-result-filters > button:not(.list-popup) {
    margin-top: 1rem;
}

.plan-result-filters input.start {
    text-align: left !important;
}

.plan-results .container-title-inner .title {
    padding: 0.5rem;
}

.plan-results .container-title-inner .title .icon {
    margin-right: 0.25rem;
}

.plan-select-popup .content {
    padding: 0;
    margin: 0;
}

.plan-select-popup .content .row {
    margin: 0.25rem;
    display: flex;
}

.plan-select-popup .content .row input {
    flex: 1;
}

.plan-select-popup .content>.table {
    overflow-y: auto;
    flex: 1;
}

.plan-select-popup .check {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
}

.plan-select-popup .check input {
    margin: 0;
}

.plan .plan-results {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.plan .plan-results .side-list:not(:last-child) {
    max-width: 300px;
}

.plan .plan-results .side-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.plan .plan-results .results-list {
    flex: 1;
    overflow: hidden;
    box-shadow: var(--default-shadow);
    display: flex;
    flex-direction: column;
    animation: var(--animation-slide-left);
}

.plan .resultlist thead tr th:first-child,
.plan .resultlist tbody tr td:first-child {
    width: 4em;
}

.plan .resultpage table.horizontal thead tr th:first-child,
.plan .resultpage table.horizontal tbody tr td:first-child {
    width: 10em;
}

.plan .resultpage {
    padding-left: 0.5rem;
    overflow: auto;
    flex: 1;
    position: relative;
}

.plan .results-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.plan .run .form .results-list.tests h1 {
    margin: 0;
}

.plan .results-list.tests h1:not(:first-child),
.plan .run .form .results-list.tests h1:not(:first-child) {
    margin-top: 0.5rem;
}

.plan .results-list.tests .resultpage > div {
    margin-bottom: 0.25rem;
}

.plan table .state-1 {
    background: var(--color-light-green);
    color: var(--color-green);
}

.plan table .state-2 {
    background: var(--color-light-red);
    color: var(--color-red);
}

.plan table .modified {
    background: var(--color-light-blue);
    color: var(--color-blue);
}

.plan .run .form > .settings-label {
    display: block;
}

.plan .run .form .comment {
    position: relative;
    float: right;
    padding: 0.25rem;
    top: -0.25rem;
}

.plan .run .form .comment .icon {
    margin: 0;
}

.plan-comment textarea {
    flex: 1;
}

.embedded-results {
    width: 90% !important;
    max-height: 80%;
    box-shadow: var(--default-shadow);
    margin: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.embedded-results .title {
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.embedded-results .title > .text {
    flex: 1;
}

.embedded-results .title .badge {
    margin-right: 0.5rem;
}

.embedded-results .title .badge .icon {
    margin: 0;
}

.embedded-results .title,
.embedded-results .title * {
    cursor: pointer;
}

.embedded-results .content {
    position: relative;
    overflow: auto;
    flex: 1;
    border-top: 1px solid var(--container-header-bg)
}

.plan-start .content {
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.plan-start .content .field {
    padding-top: 0.5rem;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
}

.plan-start .content h1 {
    font-size: 1.5rem;
}

.plan-start .suggestion {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    text-align: left;
    border-left: 0.25rem solid var(--color-1);
}

.plan-start .suggestion > div > span:first-child {
    font-weight: bold;
    margin-right: 0.25rem;
}

.plan-start .test {
    margin-top: 0.25rem;
    text-align: left;
}

.plan .lots .select {
    padding: 0;
}

.plan .lots .select label {
    padding: 0.25rem;
    background: transparent;
}

.plan .lots .select label input {
    padding-top: 0.25rem;
}

.plan .run {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.plan .run .list {
    width: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.plan .run .list h1 {
    margin: 0.5rem;
    margin-bottom: 0;
}

.plan .run .list h2 {
    margin-left: 0.5rem;
    font-size: 1em;
    margin-bottom: 0.25rem;
    margin-top: -0.25rem;
    color: var(--main-ctrl-text-muted);
}

.plan .run .list .test {
    background: var(--main-ctrl-bg);
    padding: 0.5rem;
    margin: 0.5rem;
    margin-top: 0;
    border-radius: 0.5rem;
    position: relative;
}

.plan .run .list .test>.icon {
    margin-right: 0.25rem;
}

.plan .run .list .test.doing .characteristic {
    padding-left: 1rem;
}

.plan .run .list .test.doing .characteristic .icon {
    margin-right: 0.25rem;
}

.plan .run .list .test:not(.doing) .characteristic {
    opacity: 0.7;
    padding-left: 0.5rem;
}

.plan .run .list .test,
.plan .run .list .test * {
    cursor: pointer;
}

.plan .run .list .test.doing {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.plan .run .list .test.done {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.plan .run .form {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    padding-bottom: 3rem;
}

.plan .run .form>* {
    width: 400px;
    flex-shrink: 0;
}

.plan .run .form textarea {
    height: 5rem;
}

.catalog-popup .field .input-row,
.catalog-popup .char-container .input-row,
.catalog-popup .defaultvalue .input-row,
.plan .run .form .input-row {
    display: flex;
}

.catalog-popup .field .input-row input,
.catalog-popup .char-container .input-row input,
.catalog-popup .defaultvalue .input-row input,
.plan .run .form .input-row input {
    flex: 1;
}

.plan .run .input-row+button,
.catalog-popup .field .input-row+button,
.catalog-popup .field textarea+button,
.catalog-popup .char-container .input-row+button,
.catalog-popup .char-container textarea+button,
.catalog-popup .defaultvalue .input-row+button,
.catalog-popup .defaultvalue textarea+button,
.plan .run .form>textarea+button {
    margin-top: 0.25rem;
}

.plan .run .form>button+button {
    margin-top: 0.5rem;
}

.plan .run .form .description {
    color: #000000;
    margin-bottom: 0.25rem;
}

.plan .run .form h1 {
    margin: 0.5rem;
}

.plan .run .form h2 {
    font-size: 1em;
    margin-bottom: -0.75rem;
    margin-top: 0.25rem;
    color: var(--main-ctrl-text-muted);
}

.plan .run .form>.nav {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.plan .run .form .done .icon {
    margin-right: 0.25rem;
}

.plan .run .form .invalid {
    border-color: #BE0F19;
}

.plan .row {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.plan .row .lots {
    flex: 1;
    overflow: auto;
}

.plan .row .lots table th:first-child {
    padding-left: 1.25rem;
}

.plan .row .side {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    width: 300px;
    background: var(--container-insert-bg);
}

.plan .row .start {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.plan .row .side button {
    margin-top: 0.25rem;
    text-align: left;
}

.plan .row .side .workplace {
    display: flex;
    flex-direction: column;
}

.plan .list .fields {
    background: var(--main-ctrl-bg);
    padding: 0.5rem;
    margin: 0.5rem;
    margin-top: 0;
    border-radius: 0.5rem;
}

.plan .list .fields .field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan .list .fields .field span:first-child {
    padding-right: 0.25rem;
}

.plan h1.workplace-header {
    font-size: 1.25em;
    margin-left: 0.25rem;
}

.anomalies-alert {
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow);
}

.anomalies-alert .main {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.anomalies-alert .main,
.anomalies-alert .main *,
.anomalies-alert .metadata,
.anomalies-alert .metadata *,
.anomalies-alert.simplified,
.anomalies-alert.simplified * {
    cursor: pointer;
}

.anomalies-alert .metadata {
    padding: 0.5rem;
    padding-top: 0;
}

.anomalies-alert.aa-dashboard .metadata {
    padding: 1vh;
    padding-top: 0;
}

.anomalies-alert .metadata table {
    width: 100%;
}

.anomalies-alert .metadata table tr {
    border: none;
}

.anomalies-alert .metadata table td {
    padding: 0;
    width: 50%;
}

.anomalies-alert .metadata table td .icon {
    margin-right: 0.25rem;
}

.anomalies-alert .columns {
    white-space: pre-wrap;
    padding: 0.5rem;
    position: relative;
    font-weight: bold;
}

.anomalies-alert .columns .pipeline {
    font-weight: normal;
    color: var(--container-text-muted);
    margin-left: 0.5rem;
}

.anomalies-alert.aa-dashboard .columns {
    padding: 1vh;
}

.anomalies-alert .columns .level,
.alert-fullscreen .level {
    border-top: 2rem solid;
    border-right: 0;
    border-bottom: 0;
    border-left: 2rem solid transparent;
    position: absolute;
    top: 0;
    right: 0;
}

.anomalies-alert.aa-dashboard .columns .level {
    border-top: 3.4vh solid;
    border-left: 3.4vh solid transparent;
}

.alert-fullscreen .level {
    border-top: 5rem solid;
    border-left: 5rem solid transparent;
}

.anomalies-alert .columns .level.level-0,
.alert-fullscreen .level.level-0 {
    border-top-color: #2D826E;
}

.anomalies-alert .columns .level.level-1,
.alert-fullscreen .level.level-1 {
    border-top-color: #EBA019;
}

.anomalies-alert .columns .level.level-2,
.alert-fullscreen .level.level-2 {
    border-top-color: #BE0F19;
}

.anomalies-alert .active.level-0,
.alert-fullscreen .active.level-0 {
    background: #2D826E;
}

.anomalies-alert .active.level-1,
.alert-fullscreen .active.level-1 {
    background: #EBA019;
}

.anomalies-alert .active.level-2,
.alert-fullscreen .active.level-2 {
    background: #BE0F19;
}

.anomalies-alert .active.level-none {
    color: black;
}

.anomalies-alert .message {
    white-space: pre-wrap;
    padding: 0.5rem;
    padding-top: 0;
}

.anomalies-alert.aa-dashboard .message {
    padding: 1vh;
    padding-top: 0;
}

.anomalies-alert .active,
.alert-fullscreen .active {
    display: flex;
    padding: 0.5rem;
    align-items: center;
    color: white;
    overflow: hidden;
}

.anomalies-alert.aa-dashboard .active {
    padding: 1vh;
}

.anomalies-alert .active .title,
.alert-fullscreen .active .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.anomalies-alert .active .icon-container,
.alert-fullscreen .active .icon-container {
    margin-right: 0.5rem;
}

.anomalies-alert.aa-dashboard .active .icon-container {
    margin-right: 1vh;
}

.alert-preview {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.alert-preview .header {
    background: var(--container-insert-bg);
    width: 100%;
    padding: 0.25rem 3rem;
    display: flex;
    align-items: center;
}

.alert-preview .header .user {
    background: var(--container-header-bg);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.alert-preview .header .text {
    flex: 1;
    margin-left: 0.5rem;
}

.alert-preview .header .icon {
    margin-left: 1rem;
}

.alert-preview .header .text :first-child {
    font-size: 1.1rem;
}

.alert-preview .mail {
    background: var(--container-insert-bg);
    margin: 1rem;
}

.alert-preview .mail h1 {
    margin: 0.5rem
}

.alert-preview .mail .header {
    background: #404040;
    height: 4rem;
}

.alert-preview .mail .spacer {
    background: var(--color-1);
    height: 5px;
}

.alert-preview .anomalies-alert {
    width: 500px;
    margin: 1.5rem;
}

.alert-fullscreen .content {
    margin: 0;
}

.alert-fullscreen .content .main {
    flex: 1;
    overflow: auto;
    padding: 0.5rem;
    position: relative;
}

.alert-fullscreen .content .main .pipeline {
    color: var(--container-text-muted);
    margin-bottom: 1rem;
}

.alert-fullscreen .content .main .message {
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.alert-fullscreen .content table {
    width: 100%;
}
.alert-fullscreen .content td {
    width: 50%;
}

.alert-fullscreen .content .icon {
    margin-right: 0.25rem;
}

.alert-close textarea {
    flex: 1;
}

.predict .anomalies {
    flex: 1;
    overflow-y: auto;
}

.predict .anomalies .pipeline .state div {
    margin-left: 0.25rem;
    display: inline-block;
}

.predict .anomalies .pipeline .prediction {
    margin-right: 0.5rem;
}

.predict .anomalies .pipeline .prediction .icon {
    margin-right: 0.25rem;
}

.predict .anomalies .pipeline .prediction .table {
    margin-left: 0.25rem;
    color: var(--container-text-muted);
}

.predict .anomalies .pipeline .prediction:hover .table {
    color: var(--container-text-muted-hover);
}

.predict .anomalies .pipeline .prediction:active .table {
    color: var(--container-text-muted-pressed);
}

.predict .anomalies .notification {
    float: right;
    border-radius: 0.5rem;
    background-color: var(--color-1);
    color: white;
    padding: 0 0.25rem;
}

.predict.anomalies .analysis {
    flex: 1;
    display: flex;
    flex-flow: row;
    overflow: hidden;
}

.predict.anomalies .analysis .results {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
}

.predict.anomalies .analysis .results table {
    max-width: 1000px;
    white-space: pre;
}

.predict.anomalies .analysis .results table tbody tr:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict.anomalies .analysis .results table tbody tr:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.predict.anomalies .analysis .results table tbody tr,
.predict.anomalies .analysis .results table tbody tr * {
    cursor: pointer;
}

.predict.anomalies .analysis .results .block h2 {
    margin-top: 1rem;
    border-top: 1px solid #404040;
    color: #404040;
    padding-top: 0.25rem;
    font-size: 1.2rem;
}

.predict.anomalies .analysis .results .block .alerts {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.predict.anomalies .analysis .results .anomalies-alert,
.predict.anomalies .analysis .results .alert {
    margin: 1rem;
    width: 460px;
}

.predict.anomalies .analysis .menu {
    width: 300px;
    background: var(--container-insert-bg);
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.predict.anomalies .container-title-inner {
    display: flex;
}

.predict.anomalies .analysis .menu > * {
    margin-bottom: 0.25rem;
}

.predict.anomalies .edit-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.predict.anomalies .edit {
    flex: 1;
    overflow: auto;
}

.predict.anomalies .edit.single .section {
    max-width: 500px;
}

.predict.anomalies .edit.single .section .text-row  {
    margin-bottom: 0.25rem;
}

.predict.anomalies .edit.single .section .text-row label,
.predict.anomalies .edit.single .section .text-row select {
    display: inline-block;
    width: auto;
}

.predict.anomalies .edit.single .section .text-row label {
    margin-right: 0.25rem;
}

.predict.anomalies .edit .section {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.predict.anomalies .edit .section > label,
.predict.anomalies .edit .section > button {
    margin-top: 0.25rem;
}

.predict.anomalies .edit .section > .column {
    margin-top: 0.25rem;
    display: flex;
}

.predict.anomalies .edit .section > .column .title {
    flex: 1;
}

.predict.anomalies .edit .section > .column .title :last-child {
    color: var(--container-text-muted);
}

.predict.anomalies .edit .section > .column .title * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.predict.anomalies .edit .warning .icon {
    margin-right: 0.25rem;
}

.predict.anomalies .edit .section > .evaluation {
    padding: 0.25rem;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow);
    background: var(--container-bg);
}

.predict.anomalies .edit .section > .evaluation .title {
    display: flex;
}

.predict.anomalies .edit .section > .evaluation .toggle {
    padding: 0.25rem;
    margin: 0.25rem 0;
    color: var(--container-text-muted);
    cursor: pointer;
}

.predict.anomalies .edit .section > .evaluation .toggle + .settings-label {
    margin-top: 0;
}

.predict.anomalies .edit .section > .evaluation > :not(div:not(:first-child)) + select,
.predict.anomalies .edit .section > .evaluation > :not(div:not(:first-child)) + input,
.predict.anomalies .edit .section > .evaluation > :not(div:not(:first-child)) + button,
.predict.anomalies .edit .section > .evaluation > :not(div:not(:first-child)) + label {
    margin-top: 0.25rem;
}

.predict.anomalies .edit .section .output {
    margin: 1rem;
    padding: 0.25rem;
    box-shadow: var(--default-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
}

.predict.anomalies .edit .section .output label {
    margin-top: 0.25rem;
}

.predict.anomalies .edit .section .output .user {
    margin-bottom: 0.25rem;
    display: flex;
}

.predict.anomalies .edit .section .output .user .title {
    flex: 1;
}

.predict.anomalies .edit .section .output .user .title :last-child {
    color: var(--container-text-muted);
}

.predict.anomalies .edit .section .output .user .title * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.predict.anomalies .edit .section .output > .title {
    display: flex;
}

.anomalies-user-add .content {
    overflow: auto;
}

.predict.anomalies .edit .section > .rule {
    padding: 0.25rem;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow);
    background: var(--container-bg);
}

.predict.anomalies .edit .section > .rule .title {
    display: flex;
}

.predict.anomalies .edit .section > .rule .evaluation {
    margin-bottom: 0.25rem;
    display: flex;
}

.predict.anomalies .edit .section > .rule .default {
    margin: 0.5rem;
}

.predict.anomalies .edit .section > .rule textarea {
    height: 4rem;
}

.anomalies-details .content {
    margin: 0;
    overflow: auto;
}

.anomalies-details .content .anomalies-alert {
    margin: 1rem;
}

.predict.anomalies .edit-container .empty-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--container-text-muted);
}

.evaluation-preview {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.evaluation-preview .results {
    width: 300px;
    overflow: auto;
}

.evaluation-preview .results .result {
    margin: 0.5rem;
    padding: 0.5rem;
    background: var(--container-insert-bg);
    white-space: pre-wrap;
}

.evaluation-preview .results .result .position {
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.evaluation-preview .results .result .color {
    width: 0.9rem;
    height: 0.9rem;
    display: inline-block;
    margin-right: 0.25rem;
}

.predict .wizard .main.evaluations .label .icon,
.predict .edit-container .container-title .label .icon {
    padding: 0 0.25rem;
}

.predict .wizard {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.predict .wizard .navigation-item {
    pointer-events: none;
}

.predict .wizard .help-hover {
    margin-left: 0.25rem;
}

.predict .wizard .main {
    flex: 1;
}

.predict .wizard .buttons {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: end;
    padding: 0.5rem;
    background: var(--container-insert-bg);
}

.predict .wizard .main.inputs,
.predict .wizard .main.evaluations,
.predict .wizard .main.outputs {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    overflow: hidden;
}

.predict .wizard .main.inputs .resizable .settings-label {
    padding: 0.5rem;
    padding-bottom: 0;
}

.predict .wizard .main.inputs .settings {
    max-width: 600px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0.5rem;
}

.predict .wizard .main.inputs .settings label {
    margin-top: 0.25rem;
}

.predict .wizard .main.inputs .settings .column {
    margin-top: 0.25rem;
    display: flex;
}

.predict .wizard .main.inputs .settings .column .title {
    flex: 1;
}

.predict .wizard .main.inputs .settings .column .title :last-child {
    color: var(--container-text-muted);
}

.predict .wizard .main.inputs .settings .column .title * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.predict .wizard .main.inputs .warning .icon {
    margin-right: 0.25rem;
}

.predict .wizard .main.evaluations .settings {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
}

.predict .wizard .main.evaluations .settings .evaluation {
    padding: 0.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--default-shadow);
    background: var(--container-bg);
}

.predict .wizard .main.evaluations .settings .evaluation.selected {
    box-shadow: var(--color-shadow);
}

.predict .wizard .main.evaluations .settings .evaluation .title {
    display: flex;
}

.predict .wizard .main.evaluations .settings .evaluation .toggle {
    padding: 0.25rem;
    margin: 0.25rem 0;
    color: var(--container-text-muted);
    cursor: pointer;
}

.predict .wizard .main.evaluations .settings .evaluation .toggle + .settings-label {
    margin-top: 0;
}

.predict .wizard .main.evaluations .settings .evaluation > :not(div:not(:first-child)) + select,
.predict .wizard .main.evaluations .settings .evaluation > :not(div:not(:first-child)) + input,
.predict .wizard .main.evaluations .settings .evaluation > :not(div:not(:first-child)) + button,
.predict .wizard .main.evaluations .settings .evaluation > :not(div:not(:first-child)) + label {
    margin-top: 0.25rem;
}

.predict .wizard .main.evaluations .container-title-inner > div {
    margin: 0 0.25rem;
}

.predict .wizard .main.evaluations .container-title-inner > div:first-child {
    margin-left: 0.5rem;
}

.predict .wizard .main.evaluations .limit {
    width: 5rem;
    padding: calc(0.5rem - 1px);
}

.predict .wizard .main.outputs .list {
    flex: 1;
    overflow: auto;
}

.predict .wizard .main.outputs .output {
    margin: 1rem;
    padding: 0.25rem;
    box-shadow: var(--default-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
}

.predict .wizard .main.outputs .output label {
    margin-top: 0.25rem;
}

.predict .wizard .main.outputs .output .user {
    margin-bottom: 0.25rem;
    display: flex;
}

.predict .wizard .main.outputs .output .user .title {
    flex: 1;
}

.predict .wizard .main.outputs .output .user .title :last-child {
    color: var(--container-text-muted);
}

.predict .wizard .main.outputs .output .user .title * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anomalies-user-add .content {
    overflow: auto;
}

.predict .wizard .confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.predict .wizard .confirm h1 {
    text-align: center;
}

.predict .content {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.predict .content .menu {
    display: flex;
    flex-direction: column;
    width: 350px;
    padding: 0.25rem;
    background: var(--container-insert-bg);
    overflow: auto;
}

.predict .content .menu .select-group {
    margin-top: 1rem;
    display: flex;
}

.predict .content .menu .results {
    flex: 1;
    overflow-y: auto;
}

.predict .content .menu .results .run {
    padding: 0.25rem;
    transition-duration: var(--transition);
}

.p-run .content {
    flex: 1;
    overflow: auto;
    padding: 0.25rem;
}

.p-result .content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.p-result .chart-outer {
    flex: 1;
    display: flex;
}

.p-result .chart-outer .chart {
    width: 100%;
    height: 100%;
}

.p-result .chart-outer .chartoptions {
    width: 200px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    background: var(--container-insert-bg);
}

.p-result .infoboxes {
    display: flex;
}

.p-result .infoboxes > div {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
}

.predict .content .menu .results .run,
.predict .content .menu .results .run * {
    cursor: pointer !important;
}

.predict .content .menu .results .run .date,
.predict .content .menu .results .run .type {
    color: var(--main-ctrl-text-muted);
}

.predict .content .menu .results .run:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict .content .menu .results .run:hover .date,
.predict .content .menu .results .run:hover .type {
    color: var(--main-ctrl-text-muted-hover);
}

.predict .content .menu .results .run:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.predict .content .menu .results .run:active .date,
.predict .content .menu .results .run:active .type {
    color: var(--main-ctrl-text-muted-pressed);
}

.predict .content .pipeline {
    flex: 1;
    overflow: auto;
    display: flex;
}

.predict .content .pipeline .column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.predict .content .pipeline .card {
    padding: 0.25rem;
    width: 300px;
    box-shadow: var(--default-shadow);
    margin: 1rem;
    background: var( --container-insert-bg);
    display: flex;
    flex-direction: column;
}

.predict .content .pipeline > .icon {
    margin: 2rem 0.5rem;
}

.predict .content .pipeline .card > label,
.predict .content .pipeline .card > button {
    margin: 0.25rem 0;
}

.predict .content .pipeline .card > .table {
    display: flex;
    align-items: center;
    transition-duration: var(--transition);
}

.predict .content .pipeline .card > .table > div {
    padding: 0.25rem;
    flex: 1;
}

.predict .content .pipeline .card > .table * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.predict .content .pipeline .card > .table > .icon {
    margin-right: 0.25rem;
}

.predict .content .pipeline .card > .table:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict .content .pipeline .card > .table button {
    padding: 0.25rem;
    display: none;
    align-self: stretch;
}

.predict .content .pipeline .card > .table:hover button {
    display: inline-block;
}

.predict .content .pipeline .card .column {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
    transition-duration: var(--transition);
}

.predict .content .pipeline .card .column > div {
    padding: 0.25rem;
    flex: 1;
}

.predict .content .pipeline .card .column * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.predict .content .pipeline .card .column:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict .content .pipeline .card .column .table {
    color: var(--main-ctrl-text-muted);
}

.predict .content .pipeline .card .column:hover .table {
    color: var(--main-ctrl-text-muted-hover);
}

.predict .content .pipeline .card .column button {
    padding: 0.25rem;
    display: none;
    align-self: stretch;
}

.predict .content .pipeline .card .column:hover button {
    display: inline-block;
}

.p-input .content {
    overflow-y: auto;
}

.p-input .content .table {
    padding: 0.25rem;
    border-bottom: 1px solid var(--table-stripe-bg);
    transition-duration: var(--transition);
}

.p-input .content .table,
.p-input .content .table * {
    cursor: pointer !important;
}

.p-input .content .table:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.p-input .content .table:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.p-input .content .table .icon {
    margin-right: 0.25rem;
}

.p-tasks .content {
    overflow-y: auto;
}

.p-tasks .content .task {
    padding: 0.25rem;
    border-bottom: 1px solid var(--table-stripe-bg);
    transition-duration: var(--transition);
}

.p-tasks .content .task,
.p-tasks .content .task * {
    cursor: pointer !important;
}

.p-tasks .content .task:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.p-tasks .content .task:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.p-tasks .content .task .icon {
    margin-right: 0.25rem;
}

.predict .content .pipeline .split {
    display: flex;
    flex-direction: column;
    border-left: 0.25rem solid var(--main-ctrl-bg);
    padding-left: 0.25rem;
}

.predict .content .pipeline .split .title {
    display: flex;
    align-items: center;
}

.predict .content .pipeline .split .title > div {
    flex: 1;
}

.predict .content .pipeline .split > label,
.predict .content .pipeline .split > select,
.predict .content .pipeline .split > button {
    margin: 0.25rem 0;
}

.predict .content .pipeline .input-group {
    display: flex;
    margin: 0.25rem 0;
}

.predict .content .pipeline .input-group input,
.predict .content .pipeline .input-group select {
    flex: 1;
}

.predict .content .pipeline .card .eval-title {
    display: flex;
    align-items: center;
    transition-duration: var(--transition);
}

.predict .content .pipeline .card .eval-title > h6 {
    padding: 0.25rem;
    flex: 1;
}

.predict .content .pipeline .card .eval-title * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.predict .content .pipeline .card .eval-title > .icon {
    margin-right: 0.25rem;
}

.predict .content .pipeline .card .eval-title:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict .content .pipeline .card .eval-title button {
    padding: 0.25rem;
    display: none;
    align-self: stretch;
}

.predict .content .pipeline .card .eval-title:hover button {
    display: inline-block;
}

.p-outputs .content {
    overflow-y: auto;
}

.p-outputs .content .output {
    padding: 0.25rem;
    border-bottom: 1px solid var(--table-stripe-bg);
    transition-duration: var(--transition);
}

.p-outputs .content .output,
.p-outputs .content .output * {
    cursor: pointer !important;
}

.p-outputs .content .output:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.p-outputs .content .output:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.p-outputs .content .output .icon {
    margin-right: 0.25rem;
}

.predict .content .pipeline .card .output {
    display: flex;
    align-items: center;
    margin-bottom: -0.75rem;
    transition-duration: var(--transition);
}

.predict .content .pipeline .card .output > h6 {
    padding: 0.25rem;
    flex: 1;
}

.predict .content .pipeline .card .output * {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.predict .content .pipeline .card .output > .icon {
    margin-right: 0.25rem;
}

.predict .content .pipeline .card .output:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.predict .content .pipeline .card .output button {
    padding: 0.25rem;
    display: none;
    align-self: stretch;
}

.predict .content .pipeline .card .output:hover button {
    display: inline-block;
}

.predict .content .pipeline .card.outputs .alert {
    margin-top: 1rem;
}

.predict .pipelines {
    flex: 1;
    overflow-y: auto;
}

.predict .menu .state div,
.predict .pipelines .pipeline .state div {
    margin-left: 0.25rem;
    display: inline-block;
}

.predict .pipelines .pipeline .prediction {
    margin-right: 0.5rem;
}

.predict .pipelines .pipeline .prediction .icon {
    margin-right: 0.25rem;
}

.predict .pipelines .pipeline .prediction .table {
    margin-left: 0.25rem;
    color: var(--container-text-muted);
}

.predict .pipelines .pipeline .prediction:hover .table {
    color: var(--container-text-muted-hover);
}

.predict .pipelines .pipeline .prediction:active .table {
    color: var(--container-text-muted-pressed);
}

.predict {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings .display {
    display: flex;
    flex-flow: column;
    overflow: auto;
    padding: 0.25rem;
}

.settings .display h1:not(:first-child) {
    margin-top: 1rem;
}

.settings .display * {
    max-width: 500px;
}

.settings .display .alert {
    margin-top: 1rem;
}

.settings .display .limit {
    display: flex;
    flex-direction: column;
    padding-left: 0.25rem;
    border-left: 0.25rem solid var(--color-green);
    margin-bottom: 0.5rem;
}

.settings .display .limit.red {
    border-left-color: var(--color-red);
}

.settings .display .limit.blue {
    border-left-color: var(--color-blue);
}

.settings .display .limit.yellow {
    border-left-color: var(--color-yellow);
}

.settings .display .limit > * {
    margin-bottom: 0.25rem;
}

.settings .display .limit > .alert {
    margin-top: 0;
}

.settings .info {
    overflow-y: auto;
}

.settings .info .about {
    display: flex;
}

.settings .info .about .img-logo {
    margin: 1rem;
    width: 78px;
    height: 78px;
}

.settings .info .about h2:not(:first-of-type) {
    margin-top: 0.5rem;
}

.settings .keys {
    flex: 1;
    overflow-y: auto;
}

.settings .keys h1 {
    margin: 0.25rem;
    margin-bottom: 0;
}

.settings .keys table {
    width: 100%;
    margin-bottom: 0.5rem;
}

.settings .keys table .icon {
    margin-right: 0.25rem;
}

.settings .keys table .title {
    display: flex;
    align-items: center;
}

.settings .keys table .key {
    -webkit-user-select: text;
    user-select: text;
    cursor: text !important;
    text-align: left;
}

.settings .keys table .reset {
    width: 12em;
    text-align: left;
    transition-duration: var(--transition);
}

.settings .keys table .reset,
.settings .keys table .reset * {
    cursor: pointer !important;
}

.settings .keys table .reset:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

.settings .keys table .reset:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

.add-api .content {
    overflow: auto;
}

.add-api .content > * {
    margin-bottom: 0.25rem;
}

.log-filters {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    overflow: auto;
}

.log-filters > * {
    flex-shrink: 0;
}

.log-filters label {
    margin-top: 0.25rem;
}

.log-filters > button:last-child {
    margin-top: 1rem;
}

.settings .log-filters input.start {
    text-align: left !important;
}

.settings .container-title-inner .title {
    padding: 0.5rem;
}

.settings .container-title-inner .title .icon {
    margin-right: 0.25rem;
}

.settings .log {
    flex: 1;
    overflow: auto;
}

.log-text-more .content {
    white-space: pre;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    overflow: auto;
    font-family: monospace;
}

.log-text-short {
    cursor: pointer;
    font-family: monospace;
}

.settings {
    display: flex;
    flex-direction: column;
}

.settings .list {
    display: flex;
    flex-wrap: wrap;
}

.settings .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 115px;
    margin: 0.25rem;
}

.settings .list .item div {
    padding: 2px 4px;
    display: block;
}

.settings .list .item,
.settings .list .item * {
    cursor: pointer !important;
}

.settings .list .item .icon {
    padding: 0.5rem;
}

.settings-scrollable .content {
    margin: 0;
    overflow-y: auto;
    padding: 0.25rem;
}

.settings .store {
    flex: 1;
    overflow-y: auto;
}

.settings .store table {
    width: 100%;
}

.settings .store table .icon {
    margin-right: 0.25rem;
}

.settings .store table .key {
    -webkit-user-select: text;
    user-select: text;
    cursor: text !important;
    text-align: left;
}

.settings .store .row {
    flex: 1;
    display: flex;
}

.settings .store tr,
.settings .store tr * {
    cursor: pointer;
}

.settings .store-info {
    display: flex;
    flex-flow: column;
}

.settings .store-info * {
    margin: 0.25rem;
    margin-bottom: 0;
}

.settings .store-info input {
    margin-bottom: 0.25rem;
}

.settings .store-info h1 {
    margin-top: 0;
}

.system-register select + input,
.system-register button + select {
    margin-top: 0.25rem;
}

.system {
    flex: 1;
    overflow: auto;
    padding: 0.5rem;
}

.system .category {
    margin-top: 0.5rem;
    border: 1px solid #f0f1f2;
    padding: 0.5rem;
    background: #ffffff;
}

.system .category > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.system .category > h2 {
    background: #f0f1f2;
    margin: -0.5rem;
    margin-bottom: 0.5rem;
}

.system .category > h3 {
    font-size: 0.875rem;
}

.system .category > h3 .icon {
    margin-right: 0.25rem;
}

.system .category > div .status-tile {
    min-width: 125px;
    margin-right: 1rem;
    padding-left: 0.25rem;
    border-left: 0.25rem solid var(--color-light-green);
    position: relative;
    overflow: hidden;
}

.system .category > div .status-tile.warning {
    border-left: 0.25rem solid var(--color-light-yellow);
}

.system .category > div .status-tile.danger {
    border-left: 0.25rem solid var(--color-light-red);
}

.system .category > div .status-tile .title {
    color: #909090;
    position: relative;
}

.system .category > div .status-tile .value {
    font-size: 1.2rem;
    position: relative;
}

.system .category > div .status-tile > svg {
    position: absolute;
    right: 0;
    bottom: 0;
}

.system .category > div + h3 {
    margin-top: 0.5rem;
}

.settings .row {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.settings .users {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
}

.settings .users.edit {
    display: flex;
}

.settings .users.edit > .icon {
    margin: 0.5rem;
}

.settings .users.edit .settings {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.settings .users.edit .settings h2 {
    margin-top: 0.5rem;
}

.settings .users.edit .settings > .input-group,
.settings .users.edit .settings > button {
    margin-top: 0.5rem;
}

.settings .users.edit .settings > .input-group {
    display: flex;
}

.settings .users.edit .settings .setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings .users.edit .settings .setting button:not(:hover):not(:active) {
    background: transparent;
}

.settings .users.edit .settings label {
    margin-top: 0.25rem;
}

.settings .users.edit .settings .permissions {
    margin: -0.25rem;
    margin-top: 0.5rem;
}

.settings .users table {
    margin-bottom: 2rem;
}

.settings .users table .permission {
    margin-right: 0.5rem;
}

.settings .users table .permission button {
    float: none;
    padding: 0;
    margin-left: 0.25rem;
}

.settings .users table .icon {
    margin-right: 0.25rem;
}

.settings .users .inactive td {
    color: var(--main-ctrl-text-muted);
}

.alert {
    display: flex;
    align-items: center;
    margin: 0.25rem;
    padding: 1rem;
}

.alert > div {
    flex: 1;
}

.alert button {
    background: transparent;
    color: inherit;
}

.alert .icon:not(:last-child) {
    margin-right: 0.5rem;
}

.alert .icon:not(:first-child) {
    margin-left: 0.5rem;
}

.alert-warning {
    background: var(--color-light-yellow);
    color: var(--color-yellow);
}

.alert-danger {
    background: var(--color-light-red);
    color: var(--color-red);
}

.alert-success {
    background: var(--color-light-green);
    color: var(--color-green);
}

.alert-warning .progress {
    background: var(--color-yellow);
}

.alert-danger .progress {
    background: var(--color-red);
}

.alert-success .progress {
    background: var(--color-green);
}

body {
    --animation-slide-down: slide-down 0.25s ease;
    --animation-slide-left: slide-left 0.25s ease;
    --animation-slide-right-fast: slide-right-fast 0.15s ease;
    --animation-fade-in: fade-in 0.25s ease;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right-fast {
    0% {
        opacity: 0;
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.badge {
    border-radius: 1rem;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    white-space: pre;
    max-width: 10em;
    text-overflow: ellipsis;
    transition-duration: var(--transition);
    vertical-align: baseline;
}

.badge .icon:not(:last-child) {
    margin-right: 0.25rem;
}

.badge.red {
    background-color: var(--color-light-red);
    color: var(--color-red);
}

.badge.yellow {
    background-color: var(--color-light-yellow);
    color: var(--color-yellow);
}

.badge.green {
    background-color: var(--color-light-green);
    color: var(--color-green);
}

.badge.blue {
    background-color: var(--color-light-blue);
    color: var(--color-blue);
}

.badge.gray {
    background-color: var(--color-light-gray);
    color: var(--color-gray);
}
body {
    --vh: 1vh;
    --color-1: #2D826E;
    --color-2: var(--color-1);
    --color-3: #4BAF9B;
    --color-light-green: #AAE2D8;
    --color-green: #155724;
    --color-light-yellow: #FAE6AA;
    --color-yellow: #856404;
    --color-light-red: #FABEBE;
    --color-red: #721C24;
    --color-light-blue: #9BAECC;
    --color-blue: #274470;
    --color-light-gray: #D8D8D8;
    --color-gray: #303030;
    --body-bg: #F2F2F2;
    --body-text: #000000;
    --nav-bg: #F2F3F4;
    --nav-text: var(--body-text);
    --nav-text-muted: #C1C2C3;
    --nav-active-bg: var(--container-bg);
    --side-bg: #313233;
    --side-text: #FFFFFF;
    --container-bg: #FEFEFE;
    --container-text: var(--body-text);
    --container-text-muted: #808080;
    --container-header-bg: #EBECED;
    --container-header-text: var(--body-text);
    --container-insert-bg: #F8F9Fa;
    --container-insert-text: var(--container-text);
    --dashboard-bg: var(--container-insert-bg);
    --main-ctrl-bg: #EBECED;
    --main-ctrl-bg-unchecked: #CACBCC;
    --main-ctrl-text: var(--body-text);
    --main-ctrl-text-muted: #686868;
    --main-ctrl-bg-hover: #DBDCDD;
    --main-ctrl-text-hover: var(--main-ctrl-text);
    --main-ctrl-text-muted-hover: var(--main-ctrl-text-muted);
    --main-ctrl-bg-light: #F2F3F4;
    --main-ctrl-text-light: var(--main-ctrl-text);
    --main-ctrl-text-muted-light: var(--main-ctrl-text-muted);
    --main-ctrl-bg-pressed: var(--color-1);
    --main-ctrl-text-pressed: #FFFFFF;
    --main-ctrl-text-muted-pressed: #C8C8C8;
    --main-ctrl-bg-disabled: var(--main-ctrl-bg);
    --main-ctrl-bg-selected: var(--main-ctrl-bg-pressed);
    --main-ctrl-text-selected: var(--main-ctrl-text-pressed);
    --main-ctrl-text-disabled: #606060;
    --main-ctrl-text-muted-disabled: #808080;
    --menu-ctrl-bg: transparent;
    --menu-ctrl-text: var(--container-header-text);
    --menu-ctrl-text-muted: #686868;
    --menu-ctrl-bg-hover: #C5C6C7;
    --menu-ctrl-text-hover: var(--menu-ctrl-text);
    --menu-ctrl-text-muted-hover: var(--menu-ctrl-text-muted);
    --menu-ctrl-bg-light: #E5E5E5;
    --menu-ctrl-text-light: var(--menu-ctrl-text);
    --menu-ctrl-text-muted-light: var(--menu-ctrl-text-muted);
    --menu-ctrl-bg-pressed: var(--main-ctrl-bg-pressed);
    --menu-ctrl-text-pressed: var(--main-ctrl-text-pressed);
    --menu-ctrl-text-muted-pressed: var(--main-ctrl-text-muted-pressed);
    --menu-ctrl-bg-disabled: var(--menu-ctrl-bg);
    --menu-ctrl-text-disabled: var(--main-ctrl-text-disabled);
    --menu-ctrl-text-muted-disabled: var(--main-ctrl-text-muted-disabled);
    --menu-ctrl-bg-selected: var(--menu-ctrl-bg-pressed);
    --dropdown-bg: var(--container-bg);
    --dropdown-text: var(--body-text);
    --filter-bg: var(--color-light-green);
    --filter-text: var(--color-green);
    --filter-bg-hover: #77C4B6;
    --filter-text-hover: var(--color-green);
    --filter-bg-inactive: var(--color-light-gray);
    --filter-bg-hover-inactive: #B8B8B8;
    --filter-text-inactive: var(--color-gray);
    --filter-text-hover-inactive: var(--color-gray);
    --table-stripe-bg: #F0F1F2;
    --table-stripe-text: var(--body-text);
    --drag-target-bg: #C8DED9;
    --drag-target-bg-hover: #AECEC7;
    --transition: 0.25s;
    --dashboard-transition: 0.5s;
    --default-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.3);
    --default-shadow-sm: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
    --color-shadow: 0px 3px 15px 0px var(--color-1);
}

textarea {
    resize: none;
}

button,
select {
    text-transform: none;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

iframe {
    border: 0;
}

/*
 * Input
 */

textarea,
input:not([type=checkbox]):not([type=radio]):not([type=file]) {
    display: block;
    cursor: text !important;
    border: 1px solid var(--main-ctrl-bg);
    outline: none;
    background: var(--main-ctrl-bg);
    transition-duration: var(--transition);
    padding: 0.25rem;
}

textarea:hover,
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover {
    border: 1px solid var(--main-ctrl-bg-hover);
    background: var(--main-ctrl-bg-hover);
}

textarea:active,
textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):active,
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus {
    border: 1px solid var(--main-ctrl-bg-pressed);
    background: var(--main-ctrl-bg-light);
}

/*
 * File
 */

input[type=file] {
    display: none;
}

label.file {
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre;
}

/*
 * Checkbox
 */

label {
    display: block;
    border-radius: 0;
    border: none;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    padding: 0.5rem;
    transition-duration: var(--transition);
    white-space: pre;
}

label:not(:disabled),
label:not(:disabled) * {
    cursor: pointer;
}

label:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

label:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

label:disabled {
    pointer-events: none;
    background: var(--main-ctrl-bg-disabled);
    color: var(--main-ctrl-text-disabled);
}

.container-title label {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
}

.container-title label:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.container-title label:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.container-title label:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

label * {
    vertical-align: baseline !important;
}

label .icon {
    margin-right: 0.25rem;
}

input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
}

input[type=checkbox]::after,
input[type=radio]::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 0.25rem;
    background-color: var(--main-ctrl-bg-unchecked);
    transition-duration: var(--transition);
    display: block;
}

label.selected input[type=checkbox]::after,
label.selected input[type=radio]::after,
input[type=checkbox]:checked::after,
input[type=radio]:checked::after {
    background-color: var(--main-ctrl-bg-pressed);
}

input[type=radio]::after {
    border-radius: 100%;
}

input[type=checkbox]:checked::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jaGVjayI+PHBvbHlsaW5lIHBvaW50cz0iMjAgNiA5IDE3IDQgMTIiPjwvcG9seWxpbmU+PC9zdmc+);
    background-size: contain;
}

/*
 * Select
 */

select:not(:disabled),
select:not(:disabled) * {
    cursor: pointer;
}

select {
    width: 100%;
    display: block;
    border-radius: 0;
    border: none;
    outline: none;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    padding: 0.5rem;
    display: inline-block;
    transition-duration: var(--transition);
}

optgroup {
    background: var(--main-ctrl-bg-light);
    color: var(--main-ctrl-text-light);
}

select:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

select:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

select:disabled {
    pointer-events: none;
    background: var(--main-ctrl-bg-disabled);
    color: var(--main-ctrl-text-disabled);
}

select option {
    background: var(--main-ctrl-bg-light);
    color: var(--main-ctrl-text-light);
}

select option:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

/*
 * Buttons
 */

button {
    border-radius: 0;
    border: none;
    outline: none;
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
    padding: 0.5rem;
    display: inline-block;
    transition-duration: var(--transition);
    white-space: pre;
}

button.left {
    text-align: left;
}

button:not(:disabled),
button:not(:disabled) * {
    cursor: pointer;
}

button:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

button:focus-visible,
select:focus-visible {
    box-shadow: 0px 1px 7px 0px var(--color-green) !important;
}

button:active {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

button:disabled {
    pointer-events: none;
    background: var(--main-ctrl-bg-disabled);
    color: var(--main-ctrl-text-disabled);
}

button .icon {
    pointer-events: none;
}

button .icon:first-child:not(:last-child) {
    margin-right: 0.25rem;
}

button .icon:last-child:not(:first-child) {
    margin-left: 0.25rem;
}

button.selected {
    box-shadow: var(--main-ctrl-bg-selected) inset 0px -2px;
}

.container-title button {
    background: var(--menu-ctrl-bg);
    color: var(--menu-ctrl-text);
}

.container-title button:hover {
    background: var(--menu-ctrl-bg-hover);
    color: var(--menu-ctrl-text-hover);
}

.container-title button:active {
    background: var(--menu-ctrl-bg-pressed);
    color: var(--menu-ctrl-text-pressed);
}

.container-title button:disabled {
    background: var(--menu-ctrl-bg-disabled);
    color: var(--menu-ctrl-text-disabled);
}

.container-title button.selected {
    box-shadow: var(--menu-ctrl-bg-selected) inset 0px -2px;
}

.container-title button.danger {
    box-shadow: #F0555A inset 0px -2px;
}

.d-none,
.hidden {
    display: none !important;
}

@media (min-width: 576px) {
    .d-sm-block {
        display: block !important;
    }

    .d-sm-inline {
        display: inline !important;
    }

    .d-sm-none {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .d-md-block {
        display: block !important;
    }

    .d-md-inline {
        display: inline !important;
    }

    .d-md-none {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .d-lg-block {
        display: block !important;
    }

    .d-lg-inline {
        display: inline !important;
    }

    .d-lg-none {
        display: none !important;
    }
}

@media (min-width: 1350px) {
    .d-xl-block {
        display: block !important;
    }

    .d-xl-inline {
        display: inline !important;
    }

    .d-xl-none {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-none {
        display: none !important;
    }
}

@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: url(file/font/Oxygen-Regular.ttf);
}

body {
    font-family: 'Oxygen', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
}

h1, .h1 {
    font-size: 1.65rem;
}

h2, .h2 {
    font-size: 1.35rem;
}

h3, .h3 {
    font-size: 1.3rem;
}

h4, .h4 {
    font-size: 1.275rem;
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

p {
    margin: 0.25rem 0;
}

.settings-label {
    margin-top: 0.75rem;
    color: var(--container-text-muted);
    display: flex;
    align-items: center;
}

.settings-label:first-child {
    margin-top: 0;
}

.settings-label .icon,
.settings-label .help-button {
    margin-right: 0.25rem;
}

.settings-label .icon:not(:first-child),
.settings-label .help-button:not(:first-child) {
    margin-left: 0.25rem;
}

/*
 * Common styles
 */

* {
    cursor: default;
    box-sizing: border-box;
}

body {
    -webkit-user-select: none;
    user-select: none;
    height: 100%;
    overflow: hidden;
    margin: 0;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/*
 * Chart
 */

.chart2 {
    background: transparent;
    width: 100%;
    height: 100%;
}

/*
 * Top bar
 */

#navbar {
    background: var(--nav-bg);
    color: var(--nav-text);
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
}

#titlebar {
    flex: 2;
    height: 40px;
    display: flex;
    flex-flow: row;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 40px);
    mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 40px);
}

#titlebar .logo {
    width: calc(40px + 0.5rem);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.25rem;
    background: var(--side-bg);
}

#titlebar .logo div {
    width: 28px;
    height: 28px;
}

#tab-dropdown {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 0.5rem;
    padding-left: 2rem;
}

#tab-dropdown .list {
    display: none;
    max-height: 50vh;
    position: absolute;
    background: var(--nav-bg);
    width: 250px;
    top: 40px;
    right: 0px;
    overflow-y: auto;
    box-shadow: var(--default-shadow-sm);
    animation: var(--animation-slide-down);
}

#tab-dropdown:hover .list {
    z-index: 12000;
    display: block;
}

#navbar .title-tab {
    height: 40px;
    color: var(--nav-text);
    display: flex;
    flex-flow: row;
    align-items: center;
    transition-duration: var(--transition);
}

#tab-dropdown .list * {
    cursor: pointer !important;
}

#tab-dropdown .title-tab {
    padding: 0 0.5rem;
    display: flex;
}

#tab-dropdown .title-tab .title {
    margin: 0 0.25rem;
    flex: 1;
}

#titlebar .title-tab {
    max-width: 160px;
    text-overflow: ellipsis;
    white-space: pre;
    flex-shrink: 0;
    position: relative;
    margin-right: 0.25rem;
    padding: 0 0.5rem;
    animation: var(--animation-slide-right-fast);
}

#navbar .title-tab .title {
    white-space: pre;
    text-overflow: ellipsis;
    margin: 0 0.25rem;
    overflow: hidden;
}

#titlebar .title-tab .title {
    min-width: 60px;
}

#navbar .active,
#navbar .title-tab:hover {
    background-color: var(--nav-active-bg);
}

#navbar .title-tab:not(.active),
#navbar .title-tab:not(.active) * {
    cursor: pointer !important;
}

#navbar .close,
#navbar .close * {
    cursor: pointer;
}

.tab-host {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/*
 * Sidebar
 */

#nav-left {
    background: var(--side-bg);
    position: fixed;
    top: 40px;
    left: 0;
    width: calc(40px + 0.5rem);
    bottom: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
}

#nav-left .app {
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    color: var(--nav-text-muted);
    margin: 0.25rem;
    transition-property: color;
    transition-duration: var(--transition);
}

#nav-left .app,
#nav-left .app * {
    cursor: pointer !important;
}

#nav-left .app:hover {
    width: auto;
    color: var(--side-text);
}

#nav-left .app .logo {
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

#nav-left .app .logo .notification {
    position: absolute;
    top: -1px;
    right: -1px;
    border-radius: 0.5rem;
    background-color: var(--color-light-yellow);
    color: var(--color-yellow);
    padding: 0 0.25rem;
}

#nav-left .app .title {
    display: none;
    color: white;
    white-space: pre;
}

#nav-left.guide-labels .app .title,
#nav-left .app:hover .title {
    margin-left: 0.5rem;
    background-color: black;
    opacity: 0.9;
    padding: 0.25rem;
    display: block;
    animation: var(--animation-slide-right-fast);
}

#nav-left .logout {
    margin-top: auto;
}

/*
 * Content area
 */

body {
    background-color: var(--body-bg);
    color: var(--body-text);
}

main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: calc(40px + 0.5rem);
    padding-top: 40px;
    display: flex;
}

#content {
    flex: 1;
    overflow: hidden;
}

#content > .img-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

#content > div {
    height: 100%;
    overflow: hidden;
}

.chart2 {
    background: transparent;
    width: 100%;
    height: 100%;
}

#content > div > div > .app {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: hidden;
    display: flex;
    margin: -1px;
}

table,
table * {
    border-collapse: collapse;
    vertical-align: top;
}

table.wide {
    width: 100%;
}

td {
    padding: 0.25rem;
    text-align: right;
    white-space: pre;
}

th {
    padding: 0.25rem;
    text-align: left;
    white-space: pre;
    min-width: 6em;
}

table.ellipsis tr * {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

th.w-50 {
    width: 50%;
}

th.right {
    text-align: right;
}

td.left {
    text-align: left;
}

td.no-padding {
    padding: 0;
}

tr th:first-child,
tr td:first-child {
    padding-left: 0.5rem;
}

tr th:last-child,
tr td:last-child {
    padding-right: 0.5rem;
}

tr {
    border-bottom: 1px solid var(--table-stripe-bg);
}

table.sticky thead th {
    position: sticky;
    top: 0;
    background: var(--container-bg);
    z-index: 10;
}

table.sticky:not(.v-only) thead th:first-child {
    left: 0;
    z-index: 20;
}

table.sticky tbody th {
    position: sticky;
    left: 0;
    background: var(--container-bg);
}

table button {
    padding: 0.25rem;
    float: right;
    background: transparent;
}

table.hover tbody tr {
    transition-duration: var(--transition);
}

table.hover tbody tr:hover {
    background: var(--main-ctrl-bg-hover);
    color: var(--main-ctrl-text-hover);
}

table.hover tbody tr:hover button {
    background: var(--main-ctrl-bg);
    color: var(--main-ctrl-text);
}

table.pressed tbody tr:active,
table.pressed tbody tr.selected,
table.pressed tbody tr.selected button {
    background: var(--main-ctrl-bg-pressed);
    color: var(--main-ctrl-text-pressed);
}

table.pressed tbody tr.muted {
    color: var(--main-ctrl-text-muted);
}

table tbody button:hover {
    background: var(--main-ctrl-bg-hover) !important;
    color: var(--main-ctrl-text-hover) !important;
}

table tbody button:active {
    background: var(--main-ctrl-bg-pressed) !important;
    color: var(--main-ctrl-text-pressed) !important;
}

table.pressed tbody tr,
table.pressed tbody tr * {
    cursor: pointer !important;
}