/* Ensure SfAppBar navbar always renders above scrolling content in side panes */
.e-appbar {
    position: relative;
    z-index: 1000 !important;
}

/* Pure CSS circular spinner — works inside accordions and any container */
.css-spinner {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 6px solid var(--color-bg-LightContainer, #b3cad4);
    border-top-color: var(--color-e-PrimaryContainer, #47a5ca);
    border-radius: 50%;
    animation: css-spin 0.9s linear infinite;
}
@keyframes css-spin {
    to { transform: rotate(360deg); }
}

/* Sidebar plain HTML tree — matches Syncfusion SfTreeView Material theme */
.plain-tree {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    overflow-y: auto;
    -webkit-tap-highlight-color: transparent;
}

.plain-tree .tree-item {
    user-select: none;
    position: relative;
}

.plain-tree .tree-item.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.plain-tree .tree-item.disabled > .tree-item-content .tree-text,
.plain-tree .tree-item.disabled > .tree-item-content .tree-icon {
    color: var(--color-Dark-Text, #666);
}

/* Selected state — full row background */
.plain-tree .tree-item.selected > .tree-item-content {
    background: var(--color-bg-LightContainer, #e0e0e0);
}

.plain-tree .tree-item.selected > .tree-item-content .tree-text {
    color: var(--color-e-PrimaryContainer, #1976d2);
}

.plain-tree .tree-item.selected > .tree-item-content .tree-icon {
    color: var(--color-ThemeContrast-Text, #333);
}

/* Row content — matches .e-text-content (padding-left: 20px) */
.plain-tree .tree-item-content {
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    min-height: 38px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover state — full row highlight */
.plain-tree .tree-item-content:hover {
    background: var(--color-bg-LightContainer, #e0e0e0);
}

/* Child items — matches .e-list-item .e-ul (padding: 0 0 0 20px, margin: 2px 0 0) */
.plain-tree .tree-children {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 2px 0 0;
}

/* Node icon — matches .e-list-icon (20x20, margin: 0 0 0 8px) */
.plain-tree .tree-icon {
    display: inline-block;
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 20px;
    margin: 0 0 0 8px;
    vertical-align: middle;
    color: var(--color-ThemeContrast-Text, #333);
}

/* Node text — matches .e-list-text (padding: 0 8px, line-height: 36px) */
.plain-tree .tree-text {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 8px;
    text-decoration: none;
    color: var(--color-ThemeContrast-Text, #333);
    vertical-align: middle;
}

/* Expand/collapse icon — matches .e-icon-collapsible (margin: 0 0 0 -20px, 20x20) */
.plain-tree .tree-expand-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin: 0 0 0 -20px;
    vertical-align: middle;
    color: var(--color-ThemeContrast-Text) !important;
    transition: transform 0.3s;
}

.plain-tree .tree-expand-icon::before {
    content: '\e748';
    font-family: 'e-icons';
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    padding: 0 0 0 4px;
    color: inherit;
}

.plain-tree .tree-expand-icon.expanded {
    transform: rotate(90deg);
}

/* Parent nodes — slightly darker/bolder than leaf nodes */
.plain-tree > .tree-item > .tree-item-content .tree-text {
    font-weight: 600;
    color: var(--color-ThemeContrast-Text, #222);
}

.page-title {
    display: none;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: bold;
    margin-right: 20px;
    margin-top: 20px;
}

.title-line {
    display: none;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-top: 10px;
}

.txtmaxwidtherror {
    border-color: red !important;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}
.txtmaxwidth {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}
    .txtmaxwidth:-webkit-autofill{
        background:red;
    }

    .cmbmaxwidth {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .cmbmaxwidtherror {
        border-color: red !important;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

/* CSV Download Page Styles */
.e-upload.e-control-wrapper {
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure uploader button is clickable */
.e-upload .e-file-select-wrap,
.e-upload .e-file-select-wrap .e-btn,
.e-upload .e-file-select-wrap button,
.e-upload .e-upload-files {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Make uploaded filename and extension on same line, centered */
.e-upload .e-file-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px 8px !important;
}

.e-upload .e-file-name {
    display: inline !important;
    max-width: none !important;
}

.e-upload .e-file-type {
    display: inline !important;
}

.e-upload .e-file-size {
    margin-left: 8px !important;
}

.e-upload .e-file-status {
    width: 100% !important;
    text-align: center !important;
}

.csv-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.csv-progress-wrap svg {
    width: 100% !important;
}

.csv-field-label {
    min-width: 130px;
    font-weight: 600;
    text-align: left;
}

.status-log-panel {
    width: 600px;
    max-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: transparent;
    border: none;
    padding: 10px 14px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    text-align: left;
    margin: 8px auto;
}

.status-log-line {
    padding: 2px 0;
    color: #333;
}

.status-log-line.status-info {
    color: #1976D2;
}

.status-log-line.status-success {
    color: #2E7D32;
}

.status-log-line.status-warning {
    color: #E65100;
}

.status-log-line.status-error {
    color: #C62828;
    font-weight: bold;
}
.e-time-wrapper {
    max-width: 450px;
    margin-left: auto !important;
    margin-right: auto !important;
}
span.e-time-wrapper.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-lib.e-keyboard,
span.e-time-wrapper.e-input-group.e-control-container.e-control-wrapper.e-valid-input {
   
}

.row1 {
    margin-top: 15px;
}

.row {
    margin-top: 20px;
    margin-bottom: 20px;
}

.subgroup.device-details {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 10px;
    border-radius: 15px;
    width: 80%;
}

@media only screen and (max-width: 767px) {
    .subgroup.device-details {
        width: 100%; /* Set width to 100% for mobile screens */
    }   
}

.subgroup1.device-details {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 15px;
    width: 80%;
}

@media only screen and (max-width: 767px) {
    .subgroup1.device-details {
        width: 100%; /* Set width to 100% for mobile screens */
    }
}

.buttonPosition {
    width: 80%;
}

@media only screen and (max-width: 767px) {
    .buttonPosition {
        width: 100%; /* Set width to 100% for mobile screens */
    }
}

.labelclass {
    width: 80%;
    margin-top: 30px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .labelclass {
        width: 100%; /* Set width to 100% for mobile screens */
    }
}

.lbl {
    font-size: large;
}

.n-space {
    padding-right: 0;
    padding-left: 0;
}

.separator {
    border-top: 1px solid #ccc; /* Sets the color and style of the line */
    margin-top: 10px; /* Adds space above the line */
    margin-bottom: 10px; /* Adds space below the line */
    height: 0px !important;
}

p {
    margin-bottom: 0px;
    font-size:small;
}

.container {
    padding-left:0px;
    padding-right:0px;
}

.container1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.e-checkbox-wrapper .e-label {
    font-size: 17px;
}

.e-checkbox-wrapper {
    margin-bottom: 5px;
}

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

.topbuttons {
    position: sticky;
    z-index: 1;
    width: 100%;
    bottom: 0px;
    height: max-content;
    padding-top: 5px;
    padding-bottom: 5px;
}

.e-btn {
    margin-bottom: 2px;
    margin-top: 2px;
}

.gridcss {
    margin-top: 10px;
    border-radius: 5px;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
}

/* PlainTable component — lightweight HTML table replacing Syncfusion SfGrid */
.plain-table-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.plain-table-wrapper {
    overflow: auto;
    border: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-radius: 4px;
    background: var(--color-bg-DarkContainer1, #fff);
    max-width: 100%;
    min-width: 0;
}

/* Fill-height mode: rows are explicitly sized by C# so the table exactly fills the panel.
   overflow:hidden on the wrapper clips any sub-pixel rounding excess — no scrollbars. */
.plain-table-container.fill-height {
    height: 100%;
}
.plain-table-container.fill-height .plain-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* Remove sticky thead — no scrolling occurs in fill-height mode */
.plain-table-container.fill-height .plain-table thead {
    position: static;
}
/* Match Syncfusion Material grid font — fixed sizes, not scaled with row height */
.plain-table-container.fill-height .plain-table th {
    font-size: 12px;
    font-weight: 500;
}
.plain-table-container.fill-height .plain-table td {
    font-size: 13px;
    font-weight: 400;
}
/* Remove vertical padding so it doesn't fight the explicit row height set by C#.
   overflow:hidden prevents cells expanding beyond their height when font is large.
   Horizontal padding kept for readability. */
.plain-table-container.fill-height .plain-table th,
.plain-table-container.fill-height .plain-table td {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* IGenericDevice panels: table fills container, rows distribute evenly via browser.
   overflow:auto on the wrapper so when the user shrinks the panel below the
   height needed for all rows at minimum font, content becomes scrollable
   instead of being clipped. */
.igeneric-fill .plain-table-container.fill-height .plain-table-wrapper {
    overflow: auto;
}
.igeneric-fill .plain-table-container.fill-height .plain-table {
    height: 100%;
    table-layout: fixed;
}
.igeneric-fill .plain-table-container.fill-height .plain-table th,
.igeneric-fill .plain-table-container.fill-height .plain-table td {
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Standard device ODD panels (TCG, ARC1C, CIM8, etc.): table must fit exactly within
   the panel width so long parameter names get truncated with ellipsis instead of
   overflowing and being clipped by the container's overflow:hidden.
   This does NOT touch row heights, padding, or font — only the width layout. */
.odd-std-panel .plain-table-container.fill-height .plain-table-wrapper {
    overflow: hidden;
}
.odd-std-panel .plain-table-container.fill-height .plain-table {
    table-layout: fixed;
    width: 100%;
}
.odd-std-panel .plain-table-container.fill-height .plain-table th,
.odd-std-panel .plain-table-container.fill-height .plain-table td {
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ODD side grids — the non-channel-based parameter grid and additional parameter grid
   in the right splitter panes. Adds horizontal padding around the grid and increases
   row padding so rows are taller and more readable than the default fill-height rows
   (which use padding-top/bottom: 0 to fit exact explicit pixel heights). */
.odd-side-grid {
    padding: 0 4px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
.odd-side-grid .plain-table-container.fill-height .plain-table {
    table-layout: fixed;
    width: 100%;
}
.odd-side-grid .plain-table-container.fill-height .plain-table th,
.odd-side-grid .plain-table-container.fill-height .plain-table td {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When toolbar is visible, remove top radius from wrapper */
.plain-table-container.has-toolbar .plain-table-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

/* When pager is visible, remove bottom radius from wrapper (pager has it) */
.plain-table-container.has-pager .plain-table-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

/* Toolbar */
.plain-table-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--color-bg-DarkContainer1, #fff);
    border: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-radius: 4px 4px 0 0;
}

.plain-table-toolbar-btn {
    padding: 4px 12px;
    border: 1px solid var(--color-bg-LightContainer, #ccc);
    border-radius: 4px;
    background: var(--color-bg-DarkContainer1, #fff);
    color: var(--color-ThemeContrast-Text, #333);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.plain-table-toolbar-btn:hover {
    background: var(--color-bg-LightContainer, #e0e0e0);
}

/* Search input in toolbar */
.plain-table-search-wrap {
    margin-left: auto;
}

.plain-table-search {
    padding: 4px 8px;
    border: 1px solid var(--color-bg-LightContainer, #ccc);
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    width: 200px;
    background: var(--color-bg-DarkContainer1, #fff);
    color: var(--color-ThemeContrast-Text, #333) !important;
}

.plain-table-search:focus {
    border-color: var(--color-e-PrimaryContainer, #1976d2);
}

/* Sortable header */
.plain-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.plain-table th.sortable:hover {
    background: var(--color-bg-LightContainer, #e0e0e0);
}

/* Column header layout: header text + sort icon inline (matches SfGrid) */
.plain-table-th-content {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: inherit;
    font-weight: 500;
    height: 100%;
}

.plain-table-th-text {
    flex-shrink: 0;
}

/* Sort icon — matches SfGrid .e-sortfilterdiv */
.sort-icon {
    float: right;
    height: 20px;
    width: 20px;
    margin: 0 -6px 0 4px;
    padding: 3px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-e-PrimaryContainer, #1976d2);
}

/* Filter bar row below headers — matches SfGrid .e-filterbarcell */
.plain-table-filter-row th {
    height: 32px;
    padding: 1px 2px;
    background: var(--color-bg-DarkContainer1, #fff);
    border-top: 2px solid var(--color-bg-LightContainer, #e0e0e0);
    border-bottom: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-right: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    font-weight: 400;
}

.plain-table-filter-row th:last-child {
    border-right: none;
}

.plain-table-filter-cell {
    display: flex;
    align-items: center;
    position: relative;
}

/* Filter input — matches SfGrid .e-filterbarcell input */
.plain-table-filter-input {
    width: 100%;
    height: 28px;
    padding: 0 24px 0 6px;
    border: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    background: var(--color-bg-DarkContainer1, #fff);
    color: var(--color-ThemeContrast-Text, #333);
    box-sizing: border-box;
}

.plain-table-filter-input:focus {
    border-color: var(--color-e-PrimaryContainer, #1976d2);
}

/* Filter clear button — positioned inside the input area */
.plain-table-filter-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 10px;
    opacity: 0.4;
    padding: 2px;
    flex-shrink: 0;
}

.plain-table-filter-clear:hover {
    opacity: 1;
}

/* Checkbox column */
.plain-table-checkbox-col {
    width: 40px;
    min-width: 40px;
    text-align: center !important;
    padding: 4px !important;
}

.plain-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    background: var(--color-bg-DarkContainer1, #fff);
    color: var(--color-ThemeContrast-Text, #333);
    table-layout: auto;
}

.plain-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Sticky thead only works correctly when the wrapper is actually scrolling.
   Without a constrained height the sticky header escapes to the viewport top
   and overlaps the navbar. Restrict stickiness to explicit-height wrappers. */
.plain-table-wrapper:not([style*="height"]) .plain-table thead {
    position: static;
}

.plain-table th,
.plain-table td {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plain-table th {
    background: var(--color-bg-DarkContainer1, #fff);
    color: var(--color-ThemeContrast-Text, #333);
    padding: 8px 8px;
    height: 32px;
    font-weight: 500;
    font-size: 10px;
    border-bottom: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-right: 1px solid var(--color-bg-LightContainer, #e0e0e0);
}

.plain-table th:last-child {
    border-right: none;
}

.plain-table td {
    padding: 6px 8px;
    font-size: 14px;
    line-height: 22px;
    vertical-align: middle;
    border-top: 1px solid var(--color-bg-LightContainer, #e0e0e0);
}

.plain-table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-bg-LightContainer, #e0e0e0);
}

.plain-table tbody tr.clickable {
    cursor: pointer;
}

.plain-table tbody tr:hover td {
    background: var(--color-bg-LightContainer, #e0e0e0);
    color: var(--color-ThemeContrast-Text, #333);
}

.plain-table tbody tr.row-selected td {
    background: var(--color-row-selected, #e1ecff) !important;
    color: var(--color-ThemeContrast-Text, #333);
    font-weight: 400;
}

.plain-table tbody tr.row-selected:hover td {
    background: var(--color-row-selected, #d0dffa);
    color: var(--color-ThemeContrast-Text, #333);
}

/* Empty state */
.plain-table-empty {
    height: 100%;
    vertical-align: middle !important;
    padding: 0 12px !important;
    text-align: center !important;
}

/* When empty, stretch table to fill wrapper so message is centered and no orphan border */
.plain-table-wrapper:has(.plain-table-empty) .plain-table {
    height: 100%;
}

.plain-table-wrapper:has(.plain-table-empty) .plain-table tbody tr:last-child td {
    border-bottom: none;
}

.plain-table-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* CSS-drawn table icon — no dependency on icon font */
.plain-table-empty-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 30px;
    opacity: 0.25;
    background-color: currentColor;
    color: var(--color-ThemeContrast-Text, #555);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v4H3V3zm0 5h8v4H3V8zm0 5h8v4H3v-4zm0 5h18v3H3v-3zm9-10h9v9h-9V8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v4H3V3zm0 5h8v4H3V8zm0 5h8v4H3v-4zm0 5h18v3H3v-3zm9-10h9v9h-9V8z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.plain-table-empty-text {
    font-size: 13px;
    font-style: italic;
    color: var(--color-Dark-Text, #aaa);
}

/* Skeleton loading rows */
.plain-table-skeleton-row td {
    padding: 6px 12px !important;
    border-bottom: 1px solid var(--color-bg-LightContainer, #e0e0e0);
}

.plain-table-skeleton-cell {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--color-bg-LightContainer, #e0e0e0) 25%,
        var(--color-bg-DarkContainer1, #f5f5f5) 50%,
        var(--color-bg-LightContainer, #e0e0e0) 75%);
    background-size: 200% 100%;
    animation: plain-table-shimmer 1.4s infinite;
    width: 80%;
}

@keyframes plain-table-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* PlainTable pager */
.plain-table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: var(--color-bg-DarkContainer1, #fff);
    border: 1px solid var(--color-bg-LightContainer, #e0e0e0);
    border-top: none;
    border-radius: 0 0 4px 4px;
    user-select: none;
}

.pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--color-ThemeContrast-Text, #333);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.pager-btn:hover:not(:disabled):not(.pager-active) {
    background: var(--color-bg-LightContainer, #e0e0e0);
}

.pager-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pager-btn.pager-active {
    background: var(--color-e-PrimaryContainer, #289dfc);
    color: #fff;
    border-color: var(--color-e-PrimaryContainer, #289dfc);
    font-weight: 600;
}

.pager-info {
    margin-left: auto;
    padding-left: 12px;
    font-size: 12px;
    color: var(--color-Dark-Text, #888);
}

.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox {
  
}

.comboboxcss {
    max-width: 400px;   
    padding-left: 10px;
    padding-right: 10px;
    height:min-content !important;
}
span.e-date-wrapper.e-date-container.e-valid-input.e-input-group.e-control-container.e-control-wrapper.datepickercss{
    margin:2px;
}

/* Custom tab navigation — project-owned prefix to avoid Syncfusion e-* namespace collisions */
.pt-tab-header {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 8px;
}

.pt-tab-btn, .e-tab-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
   /* color: var(--color-ThemeContrast-Text, #000) !important;*/
   color: var(--color-ThemeContrast-Text) !important;
    transition: color 0.2s, border-color 0.2s;
}

.pt-tab-btn.pt-active, .e-tab-btn.e-active {
    color: var(--primary-color, #0d6efd) !important;
    border-bottom: 2px solid var(--primary-color, #0d6efd);
}

.pt-tab-btn:disabled, .e-tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}