/** Styles for the theme: Base */
.TcHmi_Controls_Beckhoff_TcHmiTreeView {
    --tchmi-background-header: #4794da;
    --tchmi-color-header: #ffffff;
    --tchmi-background-row-numbers: #4c6374;
    --tchmi-color-row-numbers: #ffffff;
    --tchmi-border-color: #ededed;
    --tchmi-background-focus: rgba(76, 99, 116, 0.05); /*#4c6374 + opacity*/
    --tchmi-background-placeholder: #4794da;
    --tchmi-background-cell: #ffffff;
    --tchmi-color-cell: #4c6374;
    --tchmi-background-data-scroll: rgba(76, 99, 116, 0.25); /*#4c6374 + opacity*/
    --tchmi-background-cell-dropdown: linear-gradient(to bottom right, #4994da, #4162b0);
    --tchmi-background-cell-checkbox: white;
    --tchmi-background-cell-checkbox-checked: linear-gradient(to bottom right, #2774ba, #4794da 20%);
    --tchmi-stroke-combobox: #ffffff;
    --tchmi-background-combobox-button: linear-gradient(to bottom right, #4994da, #4162b0);
    --tchmi-background-combobox-button-active: linear-gradient(to top left, #4994da, #4162b0);
    --tchmi-background-combobox-select: #ffffff;
    --tchmi-background-combobox-select-active: #ededed;
    --tchmi-color-combobox: #4c6374;
    --tchmi-background-spinbox-button: linear-gradient(to bottom right, #4994da, #4162b0);
    --tchmi-background-spinbox-button-pressed: linear-gradient(to top left, #4994da, #4162b0);
    --tchmi-spinbox-button-color: #ffffff;
    --tchmi-spinbox-button-color-pressed: #ffffff;
    --tchmi-background-textbox: inherit;
    --tchmi-color-textbox: #4c6374;
    --tchmi-toggleswitch-indicator: #ffffff;
    --tchmi-button-background: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-button-background-pressed: linear-gradient(135deg, #aeb9c2, #eff1f3);
    --tchmi-button-color: #4794da;
    --tchmi-button-color-pressed: #4c6374;
    --tchmi-radio-button-background: #ffffff;
    --tchmi-radio-button-background-checked: radial-gradient(
        circle closest-side at center,
        #4794da 0,
        #4794da 45%,
        white calc(45% + 1px),
        white 100%
    );
    --tchmi-toggleswitch-background: linear-gradient(to bottom right, #c0c0c5, #d7d7d9 70%);
    --tchmi-toggleswitch-background-checked: linear-gradient(to bottom right, #2774ba, #4794da 40%);
    --tchmi-userchanged-color-1: #d3b814;
    --tchmi-userchanged-color-2: #b39e1c;
    --tchmi-background-cell-checkbox-checked-user-input: linear-gradient(
        to bottom right,
        var(--tchmi-userchanged-color-2),
        var(--tchmi-userchanged-color-1) 20%
    );
    --tchmi-toggleswitch-background-checked-user-input: linear-gradient(
        to bottom right,
        var(--tchmi-userchanged-color-2),
        var(--tchmi-userchanged-color-1) 40%
    );
    --tchmi-radio-button-background-checked-user-input: radial-gradient(
        circle closest-side at center,
        var(--tchmi-userchanged-color-1) 0,
        var(--tchmi-userchanged-color-1) 45%,
        white calc(45% + 1px),
        white 100%
    );
    --tchmi-input-field-shadow-user-input: inset 0px 0px 7px 3px var(--tchmi-userchanged-color-1);
    --tchmi-input-field-background-user-input: var(--tchmi-userchanged-color-1);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-border {
    border-width: 0px;
    border-color: #000;
    border-style: solid;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header {
    background: var(--tchmi-background-header);
    color: var(--tchmi-color-header);
    /* table border **/
    border-right: 1px solid var(--tchmi-border-color);
    border-top: 0px;
    border-left: 0px;
    border-bottom: 0px;
    font-weight: normal;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-border {
    border-color: var(--tchmi-border-color);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element.sortable
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element-child::after {
    content: url('./Images/sort.svg');
    padding-left: 5px;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element.sortable
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element-child:empty::after {
    padding-left: unset;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element-child.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-sort-asc::after {
    content: url('./Images/sort_asc.svg');
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element-child.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-sort-desc::after {
    content: url('./Images/sort_desc.svg');
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-placeholder {
    background: var(--tchmi-background-placeholder);
}

td.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row-numbers {
    background: var(--tchmi-background-row-numbers);
    color: var(--tchmi-color-row-numbers);
    border-color: var(--tchmi-border-color);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell {
    background: var(--tchmi-background-cell);
    color: var(--tchmi-color-cell);
    border-color: var(--tchmi-border-color);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell select {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell select + label {
    background: url('Images/dropdown.svg') center center no-repeat, var(--tchmi-background-cell-dropdown);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='checkbox'] + label {
    background-color: var(--tchmi-background-cell-checkbox);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='checkbox']:checked + label {
    background: url(Images/checkbox.svg) center / 100% no-repeat, var(--tchmi-background-cell-checkbox-checked);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='checkbox']
    + label {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3),
        var(--tchmi-input-field-shadow-user-input);
    background: var(--tchmi-input-field-background-user-input);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='checkbox']:checked
    + label {
    background: url(Images/checkbox.svg) center / 100% no-repeat,
        var(--tchmi-background-cell-checkbox-checked-user-input);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='radio'] + label {
    background-color: var(--tchmi-radio-button-background);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='radio']:checked + label {
    background: var(--tchmi-radio-button-background-checked);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='radio']:checked
    + label {
    background: var(--tchmi-radio-button-background-checked-user-input);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell
    input[type='checkbox'].TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label {
    background: var(--tchmi-toggleswitch-background);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.05);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell
    input[type='checkbox']:checked.TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label {
    background: var(--tchmi-toggleswitch-background-checked);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.05);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='checkbox'].TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label {
    background: var(--tchmi-toggleswitch-background-checked-user-input);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.05);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='checkbox']:checked.TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label {
    background: var(--tchmi-toggleswitch-background-checked-user-input);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.05);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell
    input[type='checkbox'].TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label
    div {
    position: relative;
    background: var(--tchmi-toggleswitch-indicator);
    border-radius: calc(100% * 0.618);
    height: calc(100% * 0.618);
    width: calc(50% * 0.618);
    top: calc(100% * 0.382 / 2);
    left: calc(50% * 0.382 / 2);
    transition: left 0.25s ease;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell
    input[type='checkbox']:checked.TcHmi_Controls_Beckhoff_TcHmiTreeView-toggle-switch
    + label
    div {
    left: calc(50% + calc(50% * 0.382 / 2));
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='text'],
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='text']:disabled,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[inputmode='decimal'],
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[inputmode='decimal']:disabled,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='password'],
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='password']:disabled {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: var(--tchmi-color-textbox);
    background-color: var(--tchmi-background-textbox);
    text-align: inherit;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='text']:invalid,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='text']:disabled:invalid,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[inputmode='decimal']:invalid,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[inputmode='decimal']:disabled:invalid {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3),
        inset 0px 0px 7px 3px rgba(255, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='text'],
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='text']:disabled,
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='password'],
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value
    input[type='password']:disabled {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3),
        var(--tchmi-input-field-shadow-user-input);
    background: var(--tchmi-input-field-background-user-input);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll
    tbody:not(.single-column)
    tr.focused
    > td:not(.focused)::before {
    background: var(--tchmi-background-data-scroll);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll tbody.single-column tr.focused > td.focused::before {
    background: var(--tchmi-background-data-scroll);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-button {
    background: var(--tchmi-background-combobox-button);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-button polyline {
    stroke: var(--tchmi-stroke-combobox);
    fill: none;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template.active
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-button {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
    background: var(--tchmi-background-combobox-button-active);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template.active
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-button
    polyline {
    stroke: var(--tchmi-stroke-combobox);
    fill: none;
}

/*--------------------------------------------select--------------------------------------------------*/
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-select {
    background: var(--tchmi-background-combobox-select);
    color: var(--tchmi-color-combobox);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template.active
    .TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-select {
    background: var(--tchmi-background-combobox-select-active);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-select-content {
    color: var(--tchmi-color-combobox);
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-prepared-value .TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-select {
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3),
        var(--tchmi-input-field-shadow-user-input);
    background: var(--tchmi-input-field-background-user-input);
}

/*-----------------------table--------------------------------------*/

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown {
    --tchmi-background-combobox-dropdown: #ffffff;
    --tchmi-background-combobox-dropdown-active: rgba(128, 128, 128, 0.15);
    --tchmi-background-combobox-dropdown-hover: #4794da;
    --tchmi-color-combobox-dropdown: #4c6374;
    --tchmi-color-combobox-dropdown-active: #4c6374;
    --tchmi-color-combobox-dropdown-hover: #ffffff;
    box-shadow: inset -7px 0px 6px -7px rgba(0, 0, 0, 0.6), inset 7px 0px 6px -7px rgba(0, 0, 0, 0.6),
        inset 0px -7px 6px -7px rgba(0, 0, 0, 0.6);
    background: var(--tchmi-background-combobox-dropdown);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown.above-control {
    box-shadow: inset -7px 0px 6px -7px rgba(0, 0, 0, 0.6), inset 7px 0px 6px -7px rgba(0, 0, 0, 0.6),
        inset 0px 7px 6px -7px rgba(0, 0, 0, 0.6);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown.drop-down-style-mobile {
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.6);
    max-width: 60%;
    max-height: 60%;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown-element {
    color: var(--tchmi-color-combobox-dropdown);
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown-element.selected {
    background: var(--tchmi-background-combobox-dropdown-active);
    color: var(--tchmi-color-combobox-dropdown-active);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown-element:hover {
    background: var(--tchmi-background-combobox-dropdown-hover);
    color: var(--tchmi-color-combobox-dropdown-hover);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-button {
    background: var(--tchmi-button-background);
    color: var(--tchmi-button-color);
    border: none;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-button.down {
    background: var(--tchmi-button-background-pressed);
    color: var(--tchmi-button-color-pressed);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-button {
    background: var(--tchmi-background-spinbox-button);
    color: var(--tchmi-spinbox-button-color);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-button.down {
    background: var(--tchmi-background-spinbox-button-pressed);
    color: var(--tchmi-spinbox-button-color-pressed);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-date-time-button {
    background-image: url(Images/datetimepicker_normal.svg), linear-gradient(to bottom right, #4994da, #4162b0); /* Don't use var() next to url() because its buggy in current (Oct. 2021) iOS/Safari versions. */
    background-repeat: no-repeat;
    background-position: center;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-date-time-button.down {
    background-image: url(Images/datetimepicker_pressed.svg), linear-gradient(to top left, #4994da, #4162b0); /* Don't use var() next to url() because its buggy in current (Oct. 2021) iOS/Safari versions. */
    background-repeat: no-repeat;
    background-position: center;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-timespan-button {
    background-image: url(Images/timespanpicker_normal.svg), linear-gradient(to bottom right, #4994da, #4162b0); /* Don't use var() next to url() because its buggy in current (Oct. 2021) iOS/Safari versions. */
    background-repeat: no-repeat;
    background-position: center;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-timespan-button.down {
    background-image: url(Images/timespanpicker_pressed.svg), linear-gradient(to top left, #4994da, #4162b0); /* Don't use var() next to url() because its buggy in current (Oct. 2021) iOS/Safari versions. */
    background-repeat: no-repeat;
    background-position: center;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-button-disabled.down {
    background: var(--tchmi-button-background);
    color: var(--tchmi-button-color);
    box-shadow: none;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-button-disabled.down {
    background: var(--tchmi-background-spinbox-button);
    color: var(--tchmi-spinbox-button-color);
    box-shadow: none;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-cell-disabled::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 100;
    top: 0;
    left: 0;
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand {
    display: table;
    z-index: 101;
    height: var(--row-height);
    width: var(--row-height);
    min-width: var(--row-height);
    background-image: url(Images/expandIcon_no_children.svg);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon {
    background-image: url(Images/expandIcon.svg);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row.expanded
    > td
    > .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon {
    background-image: url(Images/expandIcon_expanded.svg);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon:hover {
    background-image: url(Images/expandIcon_hover.svg);
}

.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row.expanded
    > td
    > .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon:hover {
    background-image: url(Images/expandIcon_expanded_hover.svg);
}
