@mussonindustrial/pyro-mui-joy/lib/PerspectiveComponents.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

.ia-button {
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.ia-button > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.ia-button .center-wrapper,
.ia-button .text-center {
    position: relative;
}

.ia-button .text-center {
    z-index: 20;
}

.ia-button .text {
    margin: 4px;
    display: inline-block;
}

.ia_checkbox {
    display: flex;
    align-items: inherit;
    justify-content: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ia_checkbox--disabled {
    cursor: not-allowed;
}

.ia_checkbox input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.ia_checkbox svg * {
    pointer-events: none;
}

.ia_checkbox__checkedIcon,
.ia_checkbox__uncheckedIcon,
.ia_checkbox__indeterminateIcon {
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    user-select: none;
    flex-shrink: 0;
}

.contextMenuCommon {
    position: absolute;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    z-index: 50;
    min-height: 24px !important;
    min-width: 118px !important;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

.ia_progressBar {
    position: relative;
    z-index: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.ia_progressBar__bar {
    z-index: 1;
    transform-origin: left;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
}

.ia_progressBar__track {
    position: relative;
    z-index: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.ia_progressBar__bar--indeterminate {
    width: auto;
}

.ia_progressBar .ia_progressBar__display {
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}

.ia_radio {
    display: flex;
    align-items: inherit;
    justify-content: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ia_radio--disabled {
    cursor: not-allowed;
}

.ia_radio input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.ia_radio svg * {
    pointer-events: none;
}

.ia_radio__selectedIcon,
.ia_radio__unselectedIcon {
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    user-select: none;
    flex-shrink: 0;
}

.t {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.t .tc {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.t .tc .content {
    display: flex;
    width: 100%;
    position: relative;
    padding: 5px 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.t .tc .content > input {
    padding: 0;
    margin: 0;
}

.t .tr-group {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    flex: 1 0 auto;
    align-items: stretch;
    min-height: 30px;
    overflow: hidden;
}

.t .tr {
    display: inline-flex;
    flex-direction: row;
    flex: 1 0 auto;
    min-height: 30px;
    width: 100%;
}

.t .tr .tdc {
    cursor: default;
    overflow: hidden;
}

.t .th-container,
.t .tf-container {
    will-change: scroll-position;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.t .th-container .th,
.t .th-container .tf,
.t .tf-container .th,
.t .tf-container .tf {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 0 auto;
}

.t .th-container .th .header,
.t .th-container .th .footer,
.t .th-container .tf .header,
.t .th-container .tf .footer,
.t .tf-container .th .header,
.t .tf-container .th .footer,
.t .tf-container .tf .header,
.t .tf-container .tf .footer {
    flex: 1 0 auto;
    display: inline-flex;
}

.t .th-container .th .header :last-child,
.t .th-container .th .footer :last-child,
.t .th-container .tf .header :last-child,
.t .th-container .tf .footer :last-child,
.t .tf-container .th .header :last-child,
.t .tf-container .th .footer :last-child,
.t .tf-container .tf .header :last-child,
.t .tf-container .tf .footer :last-child {
    overflow: hidden;
}

.t .th-container .th .header .thc.sortable,
.t .th-container .th .footer .thc.sortable,
.t .th-container .tf .header .thc.sortable,
.t .th-container .tf .footer .thc.sortable,
.t .tf-container .th .header .thc.sortable,
.t .tf-container .th .footer .thc.sortable,
.t .tf-container .tf .header .thc.sortable,
.t .tf-container .tf .footer .thc.sortable {
    cursor: pointer;
}

.t .th-container .th .header .thc.filterable .filter-button,
.t .th-container .th .footer .thc.filterable .filter-button,
.t .th-container .tf .header .thc.filterable .filter-button,
.t .th-container .tf .footer .thc.filterable .filter-button,
.t .tf-container .th .header .thc.filterable .filter-button,
.t .tf-container .th .footer .thc.filterable .filter-button,
.t .tf-container .tf .header .thc.filterable .filter-button,
.t .tf-container .tf .footer .thc.filterable .filter-button {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    pointer-events: none;
    visibility: hidden;
}

.t .th-container .th .header .thc.filterable--always .filter-button,
.t .th-container .th .header .thc.filterable--active .filter-button,
.t .th-container .th .header .thc.filterable--on-hover:hover .filter-button,
.t .th-container .th .footer .thc.filterable--always .filter-button,
.t .th-container .th .footer .thc.filterable--active .filter-button,
.t .th-container .th .footer .thc.filterable--on-hover:hover .filter-button,
.t .th-container .tf .header .thc.filterable--always .filter-button,
.t .th-container .tf .header .thc.filterable--active .filter-button,
.t .th-container .tf .header .thc.filterable--on-hover:hover .filter-button,
.t .th-container .tf .footer .thc.filterable--always .filter-button,
.t .th-container .tf .footer .thc.filterable--active .filter-button,
.t .th-container .tf .footer .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .th .header .thc.filterable--always .filter-button,
.t .tf-container .th .header .thc.filterable--active .filter-button,
.t .tf-container .th .header .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .th .footer .thc.filterable--always .filter-button,
.t .tf-container .th .footer .thc.filterable--active .filter-button,
.t .tf-container .th .footer .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .tf .header .thc.filterable--always .filter-button,
.t .tf-container .tf .header .thc.filterable--active .filter-button,
.t .tf-container .tf .header .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .tf .footer .thc.filterable--always .filter-button,
.t .tf-container .tf .footer .thc.filterable--active .filter-button,
.t .tf-container .tf .footer .thc.filterable--on-hover:hover .filter-button {
    visibility: visible;
    pointer-events: all;
    cursor: pointer;
}

.t .th-container .th .header .thc.filterable--always .--with-filter,.t .th-container .th .header .thc.filterable--active .--with-filter,.t .th-container .th .header .thc.filterable--on-hover: hover .--with-filter,.t .th-container .th .footer .thc.filterable--always .--with-filter,.t .th-container .th .footer .thc.filterable--active .--with-filter,.t .th-container .th .footer .thc.filterable--on-hover:hover .--with-filter,.t .th-container .tf .header .thc.filterable--always .--with-filter,.t .th-container .tf .header .thc.filterable--active .--with-filter,.t .th-container .tf .header .thc.filterable--on-hover:hover .--with-filter,.t .th-container .tf .footer .thc.filterable--always .--with-filter,.t .th-container .tf .footer .thc.filterable--active .--with-filter,.t .th-container .tf .footer .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .th .header .thc.filterable--always .--with-filter,.t .tf-container .th .header .thc.filterable--active .--with-filter,.t .tf-container .th .header .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .th .footer .thc.filterable--always .--with-filter,.t .tf-container .th .footer .thc.filterable--active .--with-filter,.t .tf-container .th .footer .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .tf .header .thc.filterable--always .--with-filter,.t .tf-container .tf .header .thc.filterable--active .--with-filter,.t .tf-container .tf .header .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .tf .footer .thc.filterable--always .--with-filter,.t .tf-container .tf .footer .thc.filterable--active .--with-filter,.t .tf-container .tf .footer .thc.filterable--on-hover:hover .--with-filter {
    padding-right: 35px;
}

.t .th-container .th .header .thc,
.t .th-container .th .header .tfc,
.t .th-container .th .footer .thc,
.t .th-container .th .footer .tfc,
.t .th-container .tf .header .thc,
.t .th-container .tf .header .tfc,
.t .th-container .tf .footer .thc,
.t .th-container .tf .footer .tfc,
.t .tf-container .th .header .thc,
.t .tf-container .th .header .tfc,
.t .tf-container .th .footer .thc,
.t .tf-container .th .footer .tfc,
.t .tf-container .tf .header .thc,
.t .tf-container .tf .header .tfc,
.t .tf-container .tf .footer .thc,
.t .tf-container .tf .footer .tfc {
    overflow: visible;
    position: relative;
    line-height: normal;
}

.t .th-container .th .header .thc .thc-resize-handle,
.t .th-container .th .header .tfc .thc-resize-handle,
.t .th-container .th .footer .thc .thc-resize-handle,
.t .th-container .th .footer .tfc .thc-resize-handle,
.t .th-container .tf .header .thc .thc-resize-handle,
.t .th-container .tf .header .tfc .thc-resize-handle,
.t .th-container .tf .footer .thc .thc-resize-handle,
.t .th-container .tf .footer .tfc .thc-resize-handle,
.t .tf-container .th .header .thc .thc-resize-handle,
.t .tf-container .th .header .tfc .thc-resize-handle,
.t .tf-container .th .footer .thc .thc-resize-handle,
.t .tf-container .th .footer .tfc .thc-resize-handle,
.t .tf-container .tf .header .thc .thc-resize-handle,
.t .tf-container .tf .header .tfc .thc-resize-handle,
.t .tf-container .tf .footer .thc .thc-resize-handle,
.t .tf-container .tf .footer .tfc .thc-resize-handle {
    display: inline-block;
    position: absolute;
    width: 36px;
    top: 0;
    bottom: 0;
    right: -18px;
    cursor: col-resize;
    z-index: 10;
}

.t .th-container .th .header .thc .content div,
.t .th-container .th .header .tfc .content div,
.t .th-container .th .footer .thc .content div,
.t .th-container .th .footer .tfc .content div,
.t .th-container .tf .header .thc .content div,
.t .th-container .tf .header .tfc .content div,
.t .th-container .tf .footer .thc .content div,
.t .th-container .tf .footer .tfc .content div,
.t .tf-container .th .header .thc .content div,
.t .tf-container .th .header .tfc .content div,
.t .tf-container .th .footer .thc .content div,
.t .tf-container .th .footer .tfc .content div,
.t .tf-container .tf .header .thc .content div,
.t .tf-container .tf .header .tfc .content div,
.t .tf-container .tf .footer .thc .content div,
.t .tf-container .tf .footer .tfc .content div {
    display: inline-flex;
    align-items: center;
}

.t .th-container .th .header .thc .content div .sort,
.t .th-container .th .header .tfc .content div .sort,
.t .th-container .th .footer .thc .content div .sort,
.t .th-container .th .footer .tfc .content div .sort,
.t .th-container .tf .header .thc .content div .sort,
.t .th-container .tf .header .tfc .content div .sort,
.t .th-container .tf .footer .thc .content div .sort,
.t .th-container .tf .footer .tfc .content div .sort,
.t .tf-container .th .header .thc .content div .sort,
.t .tf-container .th .header .tfc .content div .sort,
.t .tf-container .th .footer .thc .content div .sort,
.t .tf-container .th .footer .tfc .content div .sort,
.t .tf-container .tf .header .thc .content div .sort,
.t .tf-container .tf .header .tfc .content div .sort,
.t .tf-container .tf .footer .thc .content div .sort,
.t .tf-container .tf .footer .tfc .content div .sort {
    display: flex;
    padding-left: 5px;
    flex-direction: column;
    justify-content: space-between;
    height: 15px;
    width: 15px;
}

.t .th-container .th .header .thc .content div .sort .sort-up,
.t .th-container .th .header .tfc .content div .sort .sort-up,
.t .th-container .th .footer .thc .content div .sort .sort-up,
.t .th-container .th .footer .tfc .content div .sort .sort-up,
.t .th-container .tf .header .thc .content div .sort .sort-up,
.t .th-container .tf .header .tfc .content div .sort .sort-up,
.t .th-container .tf .footer .thc .content div .sort .sort-up,
.t .th-container .tf .footer .tfc .content div .sort .sort-up,
.t .tf-container .th .header .thc .content div .sort .sort-up,
.t .tf-container .th .header .tfc .content div .sort .sort-up,
.t .tf-container .th .footer .thc .content div .sort .sort-up,
.t .tf-container .th .footer .tfc .content div .sort .sort-up,
.t .tf-container .tf .header .thc .content div .sort .sort-up,
.t .tf-container .tf .header .tfc .content div .sort .sort-up,
.t .tf-container .tf .footer .thc .content div .sort .sort-up,
.t .tf-container .tf .footer .tfc .content div .sort .sort-up {
    width: 0;
    height: 0;
    border-bottom: 5px solid currentColor;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
}

.t .th-container .th .header .thc .content div .sort .sort-down,
.t .th-container .th .header .tfc .content div .sort .sort-down,
.t .th-container .th .footer .thc .content div .sort .sort-down,
.t .th-container .th .footer .tfc .content div .sort .sort-down,
.t .th-container .tf .header .thc .content div .sort .sort-down,
.t .th-container .tf .header .tfc .content div .sort .sort-down,
.t .th-container .tf .footer .thc .content div .sort .sort-down,
.t .th-container .tf .footer .tfc .content div .sort .sort-down,
.t .tf-container .th .header .thc .content div .sort .sort-down,
.t .tf-container .th .header .tfc .content div .sort .sort-down,
.t .tf-container .th .footer .thc .content div .sort .sort-down,
.t .tf-container .th .footer .tfc .content div .sort .sort-down,
.t .tf-container .tf .header .thc .content div .sort .sort-down,
.t .tf-container .tf .header .tfc .content div .sort .sort-down,
.t .tf-container .tf .footer .thc .content div .sort .sort-down,
.t .tf-container .tf .footer .tfc .content div .sort .sort-down {
    width: 0;
    height: 0;
    border-top: 5px solid currentColor;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
}

.t .th-container .th .header .tfc,
.t .th-container .th .footer .tfc,
.t .th-container .tf .header .tfc,
.t .th-container .tf .footer .tfc,
.t .tf-container .th .header .tfc,
.t .tf-container .th .footer .tfc,
.t .tf-container .tf .header .tfc,
.t .tf-container .tf .footer .tfc {
    overflow: hidden;
}

.t .tb {
    width: 100%;
    height: 100%;
    flex: 99999 1 auto;
    position: relative;
    overflow: hidden;
    display: flex;
}

.t .tb .flexBody {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.t .tb .flexBody .flexBodyInnerScrollContainer {
    display: flex;
    flex-direction: column;
}

.t .tb .ReactVirtualized__Grid:focus {
    outline: none;
}

.t .tb.empty {
    display: flex;
    flex-direction: column;
}

.t .tb .empty-data-source {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.t .tb .empty-data-source .empty-icon {
    height: 30px;
    width: 30px;
}

.t .tb .column-group {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

.t .resize-guide {
    position: absolute;
    bottom: 0;
    z-index: 200;
}

.t .activeColumnOverlay {
    transition: all 0.3 linear;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    z-index: 200;
}

.t .draggingColumnPlaceholderOverlay {
    transition: all 0.3 linear;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    z-index: 200;
}

.ia_toggleSwitch {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 34px;
    cursor: pointer;
}

.ia_toggleSwitch input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.ia_toggleSwitch__track {
    position: relative;
    height: 14px;
    width: 34px;
}

.ia_toggleSwitch__thumb {
    position: absolute;
    display: block;
    height: 1.25rem;
    width: 1.25rem;
    top: -17px;
    left: 0;
}

.ia_toggleSwitch__thumb--selected {
    left: 14px;
}

.ia_toggleSwitch__thumbContainer {
    position: relative;
    height: 0px;
    width: 34px;
}

.ia_toggleSwitch__thumb--disabled,
.ia_toggleSwitch__track--disabled {
    cursor: not-allowed;
}

.contextMenuCommon {
    position: absolute;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    z-index: 50;
    min-height: 24px !important;
    min-width: 118px !important;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

.realtimeOrHistoricalRange {
    display: flex;
    flex-direction: column;
    width: 240px;
    align-items: center;
    overflow: hidden;
}

.realtimeOrHistoricalRange .realtimeOrHistoricalRangeTabContainer {
    display: flex;
    width: 100%;
}

.realtimeOrHistoricalRange .realtimeOrHistoricalRangeTabContainer .realtimeTab,
.realtimeOrHistoricalRange
    .realtimeOrHistoricalRangeTabContainer
    .historicalTab {
    width: 50%;
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.realtimeOrHistoricalRange .realtimeOrHistoricalRangeScrollableBody {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.realtimeOrHistoricalRange .realtimeContent {
    display: flex;
    padding: 8px;
    align-items: center;
}

.realtimeOrHistoricalRange .realtimeContent .realtimeMessage {
    flex: 1 0 auto;
}

.realtimeOrHistoricalRange .realtimeContent .realtimeContentInput {
    margin: 0 8px 0 8px;
    margin-bottom: 0;
    min-width: 0;
    width: 50px;
    height: 32px;
    border-radius: 4px;
}

.realtimeOrHistoricalRange .realtimeOrHistoricalRangeFooter {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;
}

.realtimeOrHistoricalRange
    .realtimeOrHistoricalRangeFooter
    .realtimeOrHistoricalRangeCancelButton {
    height: 34px;
    width: 80px;
}

.realtimeOrHistoricalRange
    .realtimeOrHistoricalRangeFooter
    .realtimeOrHistoricalRangeApplyButton {
    height: 34px;
    width: 80px;
    margin-left: 8px;
}

.ia_tagBrowser {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ia_tagBrowser .filter-bar {
    width: 100%;
    margin-bottom: 8px;
}

.ia_tagBrowser .filter-bar input {
    width: 100%;
    height: 30px;
}

.ia_tagBrowser .filter-bar--hidden {
    visibility: hidden;
    margin-bottom: 0px;
    height: 0px;
    overflow: hidden;
}

.ia_tagBrowser .filter-bar--hidden input {
    height: 0px;
}

.ia_tagBrowser .field-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 8px;
}

.ia_tagBrowser .field-container label {
    margin-bottom: 8px;
}

.ia_tagBrowser .field-container input {
    height: 30px;
}

.ia_tagBrowser .tree-container {
    flex-grow: 1;
    width: 100%;
    position: relative;
}

.ia_tagBrowser .tree-container .tree,
.ia_tagBrowser .tree-container .no-results,
.ia_tagBrowser .tree-container .loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ia_tagBrowser .tree-container .loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ia_tagBrowser .tree-container .no-results {
    display: flex;
    justify-content: center;
}

.ia_tagBrowser .tree-container .no-results span {
    margin-top: 16px;
}

.ia_tagBrowser button {
    margin-top: 8px;
    padding: 8px 0;
    flex-shrink: 0;
    width: 100%;
}

.temp-canvas-drag-image {
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    top: -100px;
    left: -200px;
    height: 100px;
    width: 200px;
    font-family: var(--font-NotoSans);
    font-size: 12px;
}

.tree {
    text-align: left;
    display: block;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.tree .node-wrapper {
    display: inline-block;
    min-width: 100%;
}

.tree .tree-row {
    position: relative;
}

.tree .tree-item {
    display: flex;
}

.tree .expand-icon,
.tree .terminal-expand-icon {
    flex: 0 0 1.5rem;
    pointer-events: unset;
    min-width: 1.5rem;
}

.tree .expand-icon:hover {
    cursor: pointer;
}

.tree .node-icon {
    width: 1.125rem;
    height: 1rem;
    pointer-events: unset;
}

.tree .tree-item-label {
    display: flex;
    flex: 1 0 auto;
    min-width: 0;
}

.tree .tree-item-label .label-wrapper {
    display: flex;
    align-items: center;
    user-select: none;
}

.tree .tree-item-label .label-wrapper.label-wrapper-icon {
    flex: 0 0 1.5rem;
    text-align: center;
    min-width: 1.5rem;
}

.tree .tree-item-label .label-wrapper.label-wrapper-text {
    min-width: 0;
}

.tree .tree-item-label .label-wrapper.label-wrapper-text div {
    white-space: nowrap;
    padding-right: 0.5rem;
}

.tree .tree-item-label .label-wrapper.label-wrapper-text div.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree .terminal-node {
    display: block;
    vertical-align: super;
}

.tree .parent-node {
    position: relative;
    margin: 0 0 0 0;
}

.tree .selection-highlight {
    position: absolute;
    display: none;
}

.tree .tree-alignment {
    position: absolute;
    border-left: solid currentColor 1px;
}

.tree .tree-alignment.vert-alignment {
    width: 1px;
    z-index: 10;
}

.tree .tree-alignment.terminal-alignment {
    width: 12px;
    height: 100%;
    top: 0;
}

.tree .tree-alignment.terminal-alignment .cross-alignment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border-bottom: solid currentColor 1px;
}

.tree .tree-alignment.terminal-alignment.last-child {
    height: 50%;
}

.tree .tree-alignment.terminal-alignment.last-child .cross-alignment {
    height: 100%;
}

.tree ul div span {
    vertical-align: super;
}

.tree .tree-row.mobile .tree-item-label .label-wrapper.label-wrapper-icon {
    flex: 0 0 3rem;
    min-width: 3rem;
}

.tree .tree-row.mobile .node-icon {
    width: 2.25rem;
    height: 2rem;
}

.tree .tree-row.mobile .expand-icon,
.tree .tree-row.mobile .terminal-expand-icon {
    flex: 0 0 3rem;
    min-width: 3rem;
}

.ia_colorPickerCommon {
    border: var(--containerBorder);
}

.ia_colorPickerCommon__dropdownIcon:after {
    border-top: 5px solid currentColor;
}

.ia_colorPickerCommon__modal {
    background-color: var(--neutral-10);
    font-size: 12px;
}

.ia_colorPickerCommon__ringPointer {
    box-shadow: var(--white) 0px 0px 0px 1.5px,
        var(--neutral-70) 0px 0px 1px 1px inset,
        var(--neutral-60) 0px 0px 1px 2px;
}

.ia_colorPickerCommon__circlePointer {
    box-shadow: var(--neutral-60) 0px 0px 1px 1px;
    background-color: var(--neutral-10);
}

.ia_colorPickerCommon {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    border-radius: 3px;
    cursor: pointer;
}

.ia_colorPickerCommon .color-value {
    flex-grow: 1;
    padding-left: 8px;
}

.ia_colorPickerCommon .icon {
    flex-shrink: 0;
    position: relative;
    pointer-events: none;
}

.ia_colorPickerCommon .icon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 52%;
    right: 0%;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    border-left: 5.04px solid rgba(0, 0, 0, 0);
    border-right: 5.04px solid rgba(0, 0, 0, 0);
}

.ia_colorPickerCommon.disabled {
    cursor: default;
}

.ia_colorPickerCommon.disabled .icon {
    display: none;
}

.ia_colorPickerCommon__modal {
    width: 250px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
    box-sizing: initial;
    overflow: auto;
}

.ia_colorPickerCommon__modal .ia_colorPickerCommon__ringPointer {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-5px, -5px);
}

.ia_colorPickerCommon__modal .ia_colorPickerCommon__circlePointer {
    margin-top: 1px;
    width: 14px;
    border-radius: 50%;
    height: 14px;
    transform: translate(-7px, -3px);
}

.ia_colorPickerCommon__modal .saturation-container {
    width: 100%;
    padding-bottom: 55%;
    position: relative;
    border-radius: 0 0 2px 2px;
    overflow: hidden;
}

.ia_colorPickerCommon__modal .controls-container {
    padding: 16px;
}

.ia_colorPickerCommon__modal .controls-container .hue-container {
    height: 10px;
    position: relative;
    margin-bottom: 16px;
}

.ia_colorPickerCommon__modal .controls-container .value-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ia_colorPickerCommon__modal .controls-container .value-container .swatch {
    height: 24px;
    width: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ia_colorPickerCommon__modal .controls-container .value-container label {
    flex-grow: 1;
    text-align: right;
    margin-right: 8px;
}

.ia_colorPickerCommon__modal .controls-container .value-container input {
    font-size: inherit;
    flex-shrink: 0;
    width: 80px;
    margin: 0;
}

.dataTypeFilter {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 280px;
}

.dataTypeFilter__actionsContainer {
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 17px;
}

.dataTypeFilter__actionsContainer__removeAction {
    text-decoration: underline;
    font-size: 12px;
    margin-right: 50px;
    cursor: pointer;
}

.dataTypeFilter__actionsContainer__applyAction {
    padding: 7px;
    min-width: 70px;
}

.dataTypeFilter__conditionsSelector {
    margin-bottom: 17px;
}

.dataTypeFilter__input__multiple__spacer {
    margin: 0 2px;
}

.dataTypeFilter__input {
    height: 32px;
}

.dataTypeFilter__input__multiple {
    width: 100px;
}

.dataTypeFilter__input__single {
    width: 100%;
}

.dataTypeFilter__content {
    overflow-y: auto;
    overflow-x: hidden;
    height: fit-content;
    padding: 17px;
    max-height: 90vh;
}

.iaDateRangePicker {
    width: 236px;
    height: 246px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-items: center;
}

.iaDateRangePicker * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.iaDateRangePicker.iaDateRangePicker--disabled {
    cursor: not-allowed;
}

.iaDateRangePicker.iaDateRangePicker--disabled * {
    pointer-events: none;
}

.iaDateRangePicker .monthAndYearSelectorContainer {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.iaDateRangePicker .monthAndYearSelectorContainer .navArrow {
    cursor: pointer;
}

.iaDateRangePicker .monthAndYearSelectorContainer .navArrow.disabled {
    cursor: not-allowed;
}

.iaDateRangePicker .yearSelectorContainer {
    margin-left: 8px;
}

.iaDateRangePicker .yearSelectorContainer .yearSelector {
    width: 65px;
}

.iaDateRangePicker .yearSelectorContainer .yearSelector > span {
    position: absolute;
    right: 0;
    top: 52%;
}

.iaDateRangePicker .yearSelectorContainer .yearSelector select {
    width: 100%;
}

.iaDateRangePicker .monthSelectorContainer .monthSelector {
    width: 100px;
}

.iaDateRangePicker .monthSelectorContainer .monthSelector select {
    width: 100%;
}

.iaDateRangePicker .calendarBar {
    display: grid;
    grid-template-columns: repeat(7, 30px);
    grid-template-rows: repeat(1, 30px);
}

.iaDateRangePicker .calendarBar .dayOfWeekTile {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    pointer-events: none;
}

.iaDateRangePicker .calendar {
    display: grid;
    grid-template-columns: repeat(7, 30px);
    grid-template-rows: repeat(5, 30px);
}

.iaDateRangePicker .calendar .dayTile {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.iaDateRangePicker .calendar .dayTile.active.outOfRange {
    cursor: not-allowed;
}

.iaDateRangePicker .calendar .dayTile.filler {
    cursor: default;
}

.dropDownIcon {
    position: relative;
}

.dropDownIcon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 52%;
    right: 0%;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    border-left: 5.04px solid rgba(0, 0, 0, 0);
    border-right: 5.04px solid rgba(0, 0, 0, 0);
    border-top: 5px solid currentColor;
}

.ia_dateTimePicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    margin: 8px;
}

.iaDatePicker__clearRange {
    cursor: pointer;
}

.iaDatePicker__clearRange--disabled {
    cursor: not-allowed;
}

.iaDatePicker__clearRange {
    margin-top: 8px;
}

.iaDateRangeTimePicker {
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-items: center;
    height: 435px;
    justify-content: flex-start;
}

.iaDateRangeTimePicker .rangeInfo {
    margin-top: 8px;
}

.iaDateRangeTimePicker .dateRangePickerContainer {
    margin-top: 8px;
}

.iaDateRangeTimePicker .dateRangePickerContainer {
    margin-bottom: 16px;
}

.iaDateRangeTimePicker .time-info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 0 30px;
    min-height: 32px;
}

.iaDateRangeTimePicker .time-info-container .timeInfo {
    flex-grow: 1;
    text-align: right;
    margin-right: 8px;
}

.iaDateRangeTimePicker .time-info-container .timeInputContainer {
    flex-shrink: 0;
}

.iaDateRangeTimePicker.show-spinners {
    height: auto;
}

.iaDateRangeTimePicker.show-spinners .rangeInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.iaDateRangeTimePicker.show-spinners .rangeInfo .clear-icon {
    height: 20px;
    cursor: pointer;
    margin-left: 8px;
}

.iaDateRangeTimePicker.show-spinners .dateRangePickerContainer {
    margin-bottom: 0px;
}

.iaDateRangeTimePicker.show-spinners
    .dateRangePickerContainer
    .iaDateRangePicker {
    height: auto;
}

.iaDateRangeTimePicker.show-spinners .time-info-container {
    margin: 0;
}

.iaDropdownCommon {
    -moz-box-align: center;
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    -moz-box-pack: justify;
    place-content: center space-between;
    min-height: 0px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.iaDropdownCommon > div {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.iaDropdownCommon > div > *:first-child {
    margin-left: 8px;
}

.iaDropdownCommon.iaDropdownCommon_wrap_multi-select_values
    > div
    > *:first-child {
    margin-left: 8px;
    margin-right: 4px;
}

.iaDropdownCommon.iaDropdownCommon_wrap_multi-select_values
    > div
    > *:last-child {
    margin-right: 8px;
}

.iaDropdownCommon .iaDropdownCommon_container {
    -moz-box-align: center;
    align-items: center;
    flex: 1 1 0%;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.iaDropdownCommon .iaDropdownCommon_value-container {
    display: flex;
    flex-wrap: nowrap;
}

.iaDropdownCommon .iaDropdownCommon_value-container > div {
    display: inline-flex;
    flex: 0 1 auto;
    max-width: calc(100% - 1px);
    justify-content: space-between;
}

.iaDropdownCommon.iaDropdownCommon_wrap_multi-select_values
    .iaDropdownCommon_value-container {
    flex-wrap: wrap;
    height: 100%;
}

.iaDropdownCommon .iaDropdownCommon_clear_value {
    width: 24px;
    height: 24px;
    padding: 4px;
}

.iaDropdownCommon .ia_dropdown__placeholder {
    display: inline-flex;
}

.iaDropdownCommon .ia_dropdown__placeholderIcon {
    margin-right: 4px;
}

.iaDropdownCommon input.iaDropdownCommon_search {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    display: inline-block;
    padding: 2px 0;
    margin: 2px;
    min-width: 5px;
    max-width: 100%;
}

.iaDropdownCommon input.iaDropdownCommon_search.empty {
    margin: 2px 0;
    width: 1px;
    min-width: 1px;
}

.iaDropdownCommon .iaDropdownCommon_remove_value {
    margin-left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.iaDropdownCommon .iaDropdownCommon_value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 4px;
}

.iaDropdownCommon .ia_dropdown__valuePill {
    margin: 2px;
}

.iaDropdownCommon .iaDropdownCommon_error-container > div {
    margin-left: 8px;
}

.iaDropdownCommon.ia_dropdown--textCenter .iaDropdownCommon_container {
    justify-content: center;
}

.iaDropdownCommon.ia_dropdown--textCenter .iaDropdownCommon_container input {
    text-align: center;
}

.iaDropdownCommon.ia_dropdown--textRight .iaDropdownCommon_container {
    justify-content: flex-end;
}

.iaDropdownCommon.ia_dropdown--textRight .iaDropdownCommon_container input {
    text-align: right;
}

.iaDropdownCommon_options_modal {
    overflow: auto;
}

.iaDropdownCommon_options_modal > div:first-child {
    display: block;
    width: 100%;
}

.iaDropdownCommon_options_modal .iaDropdownCommon_options {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.iaDropdownCommon_options_modal .iaDropdownCommon_option {
    flex: 0 1 auto;
    padding: 4px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.iaDropdownCommon_options_modal .iaDropdownCommon_option:first-child {
    margin-top: 4px;
}

.iaDropdownCommon_options_modal .iaDropdownCommon_option:last-child {
    margin-bottom: 4px;
}

.iaDropdownCommon_options_modal
    .iaDropdownCommon_option.iaDropdownCommon_no_results {
    text-align: center;
}

.iaDropdownCommon_options_modal.ia_dropdown__optionsModal--textCenter {
    text-align: center;
}

.iaDropdownCommon_options_modal.ia_dropdown__optionsModal--textRight {
    text-align: right;
}

.ia_inputField__spinner {
    display: none;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    right: 2px;
    top: 2px;
    height: calc(100% - 4px);
    width: 12px;
}

.ia_inputField__spinner_button {
    display: flex;
    border: none;
}

.ia_inputField__spinner_button:focus {
    outline: 0;
}

.ia_inputField__spinner_svg {
    flex: 1 1 auto;
}

.ia_inputField__wrapper {
    position: relative;
}

.ia_inputField__wrapper > input {
    width: 100%;
    height: 100%;
}

.ia_inputField__wrapper > input:focus {
    padding-right: 14px;
}

.ia_inputField__wrapper > input:focus + .ia_inputField__spinner {
    display: flex;
}

.ia_inputField[type='number'] {
    -moz-appearance: textfield;
}

.ia_inputField[type='number']::-webkit-inner-spin-button,
.ia_inputField[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.realtimeOrHistoricalRangeSelector {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
}

.realtimeOrHistoricalRangeSelector .realtimeOrHistoricalRangeSelectorToggle {
    height: 24px;
}

.realtimeOrHistoricalRangeSelector
    .realtimeOrHistoricalRangeSelectorToggle:hover
    > svg {
    filter: brightness(1.2);
}

.realtimeOrHistoricalRangeSelector .realtimeOrHistoricalRangeSelectorMessage {
    margin-left: 8px;
}

.realtimeOrHistoricalRangeSelectorModalHeader {
    height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
}

.realtimeOrHistoricalRangeSelectorModalHeader .closeIcon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.realtimeOrHistoricalRangeSelectorModal {
    overflow: hidden;
}

.gridCommon {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}

.gridCommon.--stretched {
    overflow: hidden;
}

.gridCommon .gridCommon__grid {
    position: relative;
    display: inline-grid;
}

.gridCommon .gridCommon__grid.--stretched {
    width: 100%;
    height: 100%;
}

.gridCommon .gridCommon__grid .gridCommon__grid__cell {
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.iaSelectCommon {
    display: flex;
    position: relative;
    overflow: hidden;
}

.iaSelectCommon_select {
    margin: 0;
    border: 0;
    cursor: pointer;
    text-align: left;
    height: 30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 16px;
    padding-left: 5px;
}

.iaSelectCommon_select:disabled {
    cursor: not-allowed;
}

.iaSelectCommon_select:focus {
    outline: none;
}

.iaSelectCommon_select--mobileIOS {
    padding-right: 10px;
    font-size: 16px;
}

.iaSelectCommon_dropdownIcon {
    position: relative;
    pointer-events: none;
    margin-left: 5px;
}

.iaSelectCommon_dropdownIcon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 52%;
    right: 0%;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    border-left: 5.04px solid rgba(0, 0, 0, 0);
    border-right: 5.04px solid rgba(0, 0, 0, 0);
    border-top: 5px solid currentColor;
}

.t {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.t .tc {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.t .tc .content {
    display: flex;
    width: 100%;
    position: relative;
    padding: 5px 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.t .tc .content > input {
    padding: 0;
    margin: 0;
}

.t .tr-group {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    flex: 1 0 auto;
    align-items: stretch;
    min-height: 30px;
    overflow: hidden;
}

.t .tr {
    display: inline-flex;
    flex-direction: row;
    flex: 1 0 auto;
    min-height: 30px;
    width: 100%;
}

.t .tr .tdc {
    cursor: default;
    overflow: hidden;
}

.t .th-container,
.t .tf-container {
    will-change: scroll-position;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.t .th-container .th,
.t .th-container .tf,
.t .tf-container .th,
.t .tf-container .tf {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 0 auto;
}

.t .th-container .th .header,
.t .th-container .th .footer,
.t .th-container .tf .header,
.t .th-container .tf .footer,
.t .tf-container .th .header,
.t .tf-container .th .footer,
.t .tf-container .tf .header,
.t .tf-container .tf .footer {
    flex: 1 0 auto;
    display: inline-flex;
}

.t .th-container .th .header :last-child,
.t .th-container .th .footer :last-child,
.t .th-container .tf .header :last-child,
.t .th-container .tf .footer :last-child,
.t .tf-container .th .header :last-child,
.t .tf-container .th .footer :last-child,
.t .tf-container .tf .header :last-child,
.t .tf-container .tf .footer :last-child {
    overflow: hidden;
}

.t .th-container .th .header .thc.sortable,
.t .th-container .th .footer .thc.sortable,
.t .th-container .tf .header .thc.sortable,
.t .th-container .tf .footer .thc.sortable,
.t .tf-container .th .header .thc.sortable,
.t .tf-container .th .footer .thc.sortable,
.t .tf-container .tf .header .thc.sortable,
.t .tf-container .tf .footer .thc.sortable {
    cursor: pointer;
}

.t .th-container .th .header .thc.filterable .filter-button,
.t .th-container .th .footer .thc.filterable .filter-button,
.t .th-container .tf .header .thc.filterable .filter-button,
.t .th-container .tf .footer .thc.filterable .filter-button,
.t .tf-container .th .header .thc.filterable .filter-button,
.t .tf-container .th .footer .thc.filterable .filter-button,
.t .tf-container .tf .header .thc.filterable .filter-button,
.t .tf-container .tf .footer .thc.filterable .filter-button {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    pointer-events: none;
    visibility: hidden;
}

.t .th-container .th .header .thc.filterable--always .filter-button,
.t .th-container .th .header .thc.filterable--active .filter-button,
.t .th-container .th .header .thc.filterable--on-hover:hover .filter-button,
.t .th-container .th .footer .thc.filterable--always .filter-button,
.t .th-container .th .footer .thc.filterable--active .filter-button,
.t .th-container .th .footer .thc.filterable--on-hover:hover .filter-button,
.t .th-container .tf .header .thc.filterable--always .filter-button,
.t .th-container .tf .header .thc.filterable--active .filter-button,
.t .th-container .tf .header .thc.filterable--on-hover:hover .filter-button,
.t .th-container .tf .footer .thc.filterable--always .filter-button,
.t .th-container .tf .footer .thc.filterable--active .filter-button,
.t .th-container .tf .footer .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .th .header .thc.filterable--always .filter-button,
.t .tf-container .th .header .thc.filterable--active .filter-button,
.t .tf-container .th .header .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .th .footer .thc.filterable--always .filter-button,
.t .tf-container .th .footer .thc.filterable--active .filter-button,
.t .tf-container .th .footer .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .tf .header .thc.filterable--always .filter-button,
.t .tf-container .tf .header .thc.filterable--active .filter-button,
.t .tf-container .tf .header .thc.filterable--on-hover:hover .filter-button,
.t .tf-container .tf .footer .thc.filterable--always .filter-button,
.t .tf-container .tf .footer .thc.filterable--active .filter-button,
.t .tf-container .tf .footer .thc.filterable--on-hover:hover .filter-button {
    visibility: visible;
    pointer-events: all;
    cursor: pointer;
}

.t .th-container .th .header .thc.filterable--always .--with-filter,.t .th-container .th .header .thc.filterable--active .--with-filter,.t .th-container .th .header .thc.filterable--on-hover: hover .--with-filter,.t .th-container .th .footer .thc.filterable--always .--with-filter,.t .th-container .th .footer .thc.filterable--active .--with-filter,.t .th-container .th .footer .thc.filterable--on-hover:hover .--with-filter,.t .th-container .tf .header .thc.filterable--always .--with-filter,.t .th-container .tf .header .thc.filterable--active .--with-filter,.t .th-container .tf .header .thc.filterable--on-hover:hover .--with-filter,.t .th-container .tf .footer .thc.filterable--always .--with-filter,.t .th-container .tf .footer .thc.filterable--active .--with-filter,.t .th-container .tf .footer .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .th .header .thc.filterable--always .--with-filter,.t .tf-container .th .header .thc.filterable--active .--with-filter,.t .tf-container .th .header .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .th .footer .thc.filterable--always .--with-filter,.t .tf-container .th .footer .thc.filterable--active .--with-filter,.t .tf-container .th .footer .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .tf .header .thc.filterable--always .--with-filter,.t .tf-container .tf .header .thc.filterable--active .--with-filter,.t .tf-container .tf .header .thc.filterable--on-hover:hover .--with-filter,.t .tf-container .tf .footer .thc.filterable--always .--with-filter,.t .tf-container .tf .footer .thc.filterable--active .--with-filter,.t .tf-container .tf .footer .thc.filterable--on-hover:hover .--with-filter {
    padding-right: 35px;
}

.t .th-container .th .header .thc,
.t .th-container .th .header .tfc,
.t .th-container .th .footer .thc,
.t .th-container .th .footer .tfc,
.t .th-container .tf .header .thc,
.t .th-container .tf .header .tfc,
.t .th-container .tf .footer .thc,
.t .th-container .tf .footer .tfc,
.t .tf-container .th .header .thc,
.t .tf-container .th .header .tfc,
.t .tf-container .th .footer .thc,
.t .tf-container .th .footer .tfc,
.t .tf-container .tf .header .thc,
.t .tf-container .tf .header .tfc,
.t .tf-container .tf .footer .thc,
.t .tf-container .tf .footer .tfc {
    overflow: visible;
    position: relative;
    line-height: normal;
}

.t .th-container .th .header .thc .thc-resize-handle,
.t .th-container .th .header .tfc .thc-resize-handle,
.t .th-container .th .footer .thc .thc-resize-handle,
.t .th-container .th .footer .tfc .thc-resize-handle,
.t .th-container .tf .header .thc .thc-resize-handle,
.t .th-container .tf .header .tfc .thc-resize-handle,
.t .th-container .tf .footer .thc .thc-resize-handle,
.t .th-container .tf .footer .tfc .thc-resize-handle,
.t .tf-container .th .header .thc .thc-resize-handle,
.t .tf-container .th .header .tfc .thc-resize-handle,
.t .tf-container .th .footer .thc .thc-resize-handle,
.t .tf-container .th .footer .tfc .thc-resize-handle,
.t .tf-container .tf .header .thc .thc-resize-handle,
.t .tf-container .tf .header .tfc .thc-resize-handle,
.t .tf-container .tf .footer .thc .thc-resize-handle,
.t .tf-container .tf .footer .tfc .thc-resize-handle {
    display: inline-block;
    position: absolute;
    width: 36px;
    top: 0;
    bottom: 0;
    right: -18px;
    cursor: col-resize;
    z-index: 10;
}

.t .th-container .th .header .thc .content div,
.t .th-container .th .header .tfc .content div,
.t .th-container .th .footer .thc .content div,
.t .th-container .th .footer .tfc .content div,
.t .th-container .tf .header .thc .content div,
.t .th-container .tf .header .tfc .content div,
.t .th-container .tf .footer .thc .content div,
.t .th-container .tf .footer .tfc .content div,
.t .tf-container .th .header .thc .content div,
.t .tf-container .th .header .tfc .content div,
.t .tf-container .th .footer .thc .content div,
.t .tf-container .th .footer .tfc .content div,
.t .tf-container .tf .header .thc .content div,
.t .tf-container .tf .header .tfc .content div,
.t .tf-container .tf .footer .thc .content div,
.t .tf-container .tf .footer .tfc .content div {
    display: inline-flex;
    align-items: center;
}

.t .th-container .th .header .thc .content div .sort,
.t .th-container .th .header .tfc .content div .sort,
.t .th-container .th .footer .thc .content div .sort,
.t .th-container .th .footer .tfc .content div .sort,
.t .th-container .tf .header .thc .content div .sort,
.t .th-container .tf .header .tfc .content div .sort,
.t .th-container .tf .footer .thc .content div .sort,
.t .th-container .tf .footer .tfc .content div .sort,
.t .tf-container .th .header .thc .content div .sort,
.t .tf-container .th .header .tfc .content div .sort,
.t .tf-container .th .footer .thc .content div .sort,
.t .tf-container .th .footer .tfc .content div .sort,
.t .tf-container .tf .header .thc .content div .sort,
.t .tf-container .tf .header .tfc .content div .sort,
.t .tf-container .tf .footer .thc .content div .sort,
.t .tf-container .tf .footer .tfc .content div .sort {
    display: flex;
    padding-left: 5px;
    flex-direction: column;
    justify-content: space-between;
    height: 15px;
    width: 15px;
}

.t .th-container .th .header .thc .content div .sort .sort-up,
.t .th-container .th .header .tfc .content div .sort .sort-up,
.t .th-container .th .footer .thc .content div .sort .sort-up,
.t .th-container .th .footer .tfc .content div .sort .sort-up,
.t .th-container .tf .header .thc .content div .sort .sort-up,
.t .th-container .tf .header .tfc .content div .sort .sort-up,
.t .th-container .tf .footer .thc .content div .sort .sort-up,
.t .th-container .tf .footer .tfc .content div .sort .sort-up,
.t .tf-container .th .header .thc .content div .sort .sort-up,
.t .tf-container .th .header .tfc .content div .sort .sort-up,
.t .tf-container .th .footer .thc .content div .sort .sort-up,
.t .tf-container .th .footer .tfc .content div .sort .sort-up,
.t .tf-container .tf .header .thc .content div .sort .sort-up,
.t .tf-container .tf .header .tfc .content div .sort .sort-up,
.t .tf-container .tf .footer .thc .content div .sort .sort-up,
.t .tf-container .tf .footer .tfc .content div .sort .sort-up {
    width: 0;
    height: 0;
    border-bottom: 5px solid currentColor;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
}

.t .th-container .th .header .thc .content div .sort .sort-down,
.t .th-container .th .header .tfc .content div .sort .sort-down,
.t .th-container .th .footer .thc .content div .sort .sort-down,
.t .th-container .th .footer .tfc .content div .sort .sort-down,
.t .th-container .tf .header .thc .content div .sort .sort-down,
.t .th-container .tf .header .tf