/* Root variables */
:root {
    --primary-color: #4245a9;
    --dark-color: #0B1117;
    --light-color: #FFF;
    --danger-color: #b32121;
    --border-color: #2C3C49;
    --disable-border-color: #4A4F53;
    --disable-color: #1C2227;
    --highlight-cap: #597489;
    --dropdown-background: #1C2730;
    --dropdown-selected: #3C4F60;
    --dropdown-hover: #BFDFF90F;
    --link: #8487ED;
    --hint: #8EA9C0;
    --mud-palette-table-lines: #7bb0dc52;
    --border-default-button: #7BB0DC52;
    --hover-default-button-background: #7BB0DC14;
    --row-header-background: #1f2a34;
    --input-text-disabled: #ffffff4d;
    --deep-bg: #182029;
    --deepest-bg: #0C1117;

    --padding-block: 12px;
    
    --base-font-size: .875rem;
    --placeholder-color: #3C5164;
    
    --default-block-height: 2.25rem;
    --search-box-width: 20rem;
    --rz-splitter-bar-background-color: #222E3899;
    --rz-splitter-bar-color: #597489;

    --dialog-max-h: calc(100vh - 1rem);
    --dialog-title-h: 3.25rem;
    --dialog-actions-h: 4.5rem;
    --dialog-content-h: calc(100% - var(--dialog-actions-h) - var(--dialog-title-h));

    --button-disable-color: #17222B;
    --min-width-action-button: 126px;
    
    --default-tab-header-height: 48px;
    --border-panel-color: #1C2730;
    
    --app-bar-height: 3.125rem;
    --app-aside-width: 3.25rem;
    
    --mud-badge-success: #1AB756;
    --mud-badge-warning: #ffa800;

    --hover-selected: #555AAD;
    
    --column-update-type-new: #50CD82;
    --column-update-type-modified: #D29922;
    --column-update-type-delete: #EE5249;
    
    --core-link:#8487ED;
    --core-caption: #55768D;
    
    --background-high-fg-dropdown: #1D2830;
}
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
    
    circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
        
        &:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }
    }
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    
    &::after {
        content: var(--blazor-load-percentage-text, "Loading");
    }
}

/* spinner loading */
@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1turn);
    }
}

.loading-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-color);
}

.qtx-spinner {
    animation: rotator 1.4s linear infinite;
    animation-duration: 0.8s;
    color: var(--primary-color);
}

/* spinner loading */
.custom-snackbar .mud-snackbar {
    border-radius: 2px;
    column-gap: .5rem;
    padding: 0.75rem 1rem;
    margin-top: unset;
    opacity: 1 !important;
}

.custom-snackbar .mud-snackbar .mud-snackbar-icon {
    margin-right: unset;
    padding-block: unset;
    align-self: flex-start;
}
.custom-snackbar .mud-snackbar .mud-snackbar-content-message {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    padding-block: unset;
    white-space: pre-line;
}

.custom-snackbar .mud-snackbar .mud-snackbar-content-action {
    align-self: flex-start !important;
}

.custom-snackbar .mud-alert-filled-error {
    background-color: #5f1919;
}
/* Root scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background-color: #597489;
    border: 2px solid transparent;
    border-radius: 1.25rem;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6a8ca6;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    border: 1px;
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

/* Table scrollbar track */
.table-wrapper::-webkit-scrollbar-track,
.mud-table-container::-webkit-scrollbar-track {
    margin-top: 2.25rem;
}
.qtx-custom-container {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100vh;
}

.mud-simple-table {
    .mud-table-head * .mud-table-cell {
        background-color: var(--row-header-background);
    }

    tbody tr:last-child td {
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    td.mud-table-cell {
        .mud-input-control {
            &.mud-select {
                &, .mud-input {
                    margin: 0;
                }
            }

            .mud-input {
                &.mud-input-underline {
                    &, &:hover, &::before {
                        border: 0 !important;
                    }
                }

                .mud-input-slot::placeholder {
                    color: var(--highlight-cap) !important;
                }
            }
        }
    }
}

.mud-table {
    &.mud-table-sticky-header {
        .mud-table-container {
            overflow-y: auto;
        }
    }

    .mud-table-container {
        border-radius: 6px !important;

        table.mud-table-root {
            table-layout: fixed;
            
            .mud-table-sort-label-icon {
                display: none;
            }

            td:not(.table-actions) {
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            
            .mud-table-row {
                &:hover {
                    background-color: var(--mud-palette-table-hover);
                }

                &:nth-child(even) {
                    background-color: var(--mud-palette-surface);
                }

                &:nth-child(odd) {
                    background-color: var(--dark-color);
                    transition: all 100ms ease-in-out;
                }

                &:has(th.mud-table-loading) {
                    display: none;
                }

                & > td:first-child a,
                & > td a.link {
                    color: var(--link) !important;
                    text-decoration: none !important;
                    font-size: var(--base-font-size) !important;

                    b {
                        font-weight: 600;
                    }
                }

                .mud-table-cell {
                    white-space: nowrap;
                    padding: 0 0.5rem !important;
                    height: var(--default-block-height);

                    &:has(.mud-table-cell-checkbox) {
                        padding: 6px 8px !important;
                    }

                    .mud-table-cell-checkbox {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                    }
                }
            }

            .mud-table-head * .mud-table-cell {
                background-color: var(--row-header-background);
                color: var(--highlight-cap) !important;
                font-weight: 600;
                border-right: 2px solid var(--dark-color);

                .mud-table-sort-label {
                    &::after {
                        background: url("../images/sort.svg") no-repeat 0 0;
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        content: "";
                        margin-left: 8px;
                    }

                    &:has(.mud-direction-asc)::after {
                        background: url("../images/sort-asc.svg") no-repeat 0 0;
                    }

                    &:has(.mud-direction-desc)::after {
                        background: url("../images/sort-desc.svg") no-repeat 0 0;
                    }
                }
            }

            .mud-table-body {
                .mud-table-row {
                    .mud-table-cell:not(:last-child) {
                        border: 1px solid var(--mud-palette-surface);
                        color: var(--light-color) !important;
                        height: 2.5rem;
                    }

                    .mud-table-cell.invalid-cell{
                        border: 1px double #EE5249 !important;
                    }

                    .mud-table-cell.invalid-cell input::placeholder{
                        color: #EE5249 !important;
                    }
                    
                    .icon-remove-field{
                        path{
                            fill: #EE5249;
                        }
                        
                        &:hover path{
                            fill: #FF827A;
                        }
                    }

                    .icon-add-field{
                        &:hover path{
                            fill: #50CD82;
                        }
                    }
                }
            }
        }
    }

    .mud-table-pagination {
        .mud-table-pagination-display {
            min-width: 13.9375rem;

            .mud-table-pagination-caption {
                min-width: 6.875rem;
            }
        }

        .mud-table-pagination-actions{
            button:nth-child(1), button:nth-child(4) {
                svg > path {
                    color: #f7fafc
                }
                
                &:disabled{
                    svg {
                        opacity: 0.3;
                    }
                }
            }

            button:nth-child(2), button:nth-child(3) {

                svg path:last-child {
                    color: #f7fafc
                }

                &:disabled{
                    svg {
                        opacity: 0.3;
                    }
                }
            }
        }
    }
}

.mud-overlay div[role="progressbar"] {
    height: 2rem !important;
    width: 2rem !important;

    &.full-screen { /* Add .full-screen to show full overlay loading */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
    }
}

.list__description-section {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.long-text-overflow {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

table tbody .e-emptyrow {
    text-align: center;
}

.mud-table {
  .mud-table-container {
    border-radius: 6px 6px 0 0 !important;

    .mud-table-cell {
      border-width: 1px 0 0 1px !important;
      border-right: 0 !important;

      &:not(:last-child) {
        border-right: 0 !important;
      }

      &:first-child {
        border-left: 0 !important;
      }
    }

    td.mud-table-cell {
      border-color: var(--mud-palette-table-lines) !important;
    }

    th.mud-table-cell {
      border-color: #131B22 !important;
    }
  }

  .mud-table-empty-row {
    border: 0;
    background-color: transparent !important;
  }

  &.mud-table-custom {
    .mud-table-container {
      .mud-table-cell {
        border-bottom: 1px solid var(--mud-palette-table-lines) !important;

        &:first-child {
          border-left: 0 !important;
        }

        &:last-child {
          border-right: 0 !important;
        }
      }

      td.mud-table-cell {
        border-color: var(--mud-palette-table-lines) !important;
      }

      th.mud-table-cell {
        border-color: #131B22 !important;
      }
    }
  }

  &.table-full-border {
    .mud-table-container {
      .mud-table-cell {
        &:first-child {
          border-left: 1px solid var(--mud-palette-table-lines) !important;
        }

        &:last-child {
          border-right: 1px solid var(--mud-palette-table-lines) !important;
        }
      }
    }
  }
}

.data-source-metadata.mud-table,
mud-table {
  .mud-table-container {
    background-color: transparent !important;
    border-radius: 0 !important;
  }
}

.mud-table-pagination-toolbar {
  background-color: var(--mud-palette-surface);
}

.data-warehoure-table-field.mud-table, mud-table {
    .mud-table-container {
        flex: 1;
        background-color: transparent;
        border-radius: 0 !important;
    }
}

.data-warehoure-table-field .mud-table-pagination-toolbar,
.datasource-table-field .mud-table-pagination-toolbar {
    background-color: transparent !important;
}

.data-warehoure-table-field .mud-table-row:nth-child(even),
.datasource-table-field .mud-table-row:nth-child(even) {
    background-color: unset !important;
}

.mud-dialog-container {
    &.mud-dialog-center {
        /*height: calc(100% + var(--app-bar-height));*/
        left: calc(var(--app-aside-width) * -1 / 2);
        padding-top: unset;
    }

    .mud-dialog {
        border: 1px solid var(--border-color);
        background-color: var(--mud-palette-appbar-background);
        width: fit-content;
        min-width: 37rem;
        max-width: 90%;
        max-height: var(--dialog-max-h);
        overflow: hidden;
        animation: mud-open-dialog-center 250ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
        
        &.allow-spread-width {
            width: 100%;
        }

        div[tabindex="-1"]:has(div.mud-dialog-content) {
            display: contents !important;
        }

        .mud-dialog-title {
            height: 52px;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem !important;
            display: flex;
            align-items: center;
            column-gap: 8px;
            font-size: 18px !important;
            font-weight: 600;
            color: var(--light-color);

            h6 {
                font-size: 18px;
                font-weight: 600;
                color: var(--light-color);
            }

            .mud-button-close {
                position: unset !important;
                top: unset !important;
                right: unset !important;
                margin-left: auto;
                float: right;
            }
        }

        .mud-dialog-content {
            position: relative;
            flex: 1 1 auto;
            overflow: hidden auto;
            padding: 1.25rem;

            .table-heading-title {
                margin-bottom: 1rem;
            }
            
            .dialog-content-label {
                color: var(--light-color);
                font-size: var(--base-font-size);
                font-weight: normal;
            }
        }

        .mud-dialog-actions {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 1rem !important;
            border-top: 1px solid var(--border-color);

            button {
                min-width: var(--min-width-action-button) !important;
                min-height: 40px !important;
                font-size: var(--base-font-size);
                font-weight: 600;
            }
        }
    }
}


.cancel-btn,
.mud-dialog .mud-dialog-actions button.cancel-btn {
    border: 1px solid var(--border-color) !important;
    height: 40px;
    background-color: transparent;
}

.cancel-btn:hover,
.mud-dialog .mud-dialog-actions button.cancel-btn:hover {
    background-color: var(--hover-default-button-background);
}

/* Custom remove outline when focus MudDialog*/
div:has(> .mud-dialog-content) {
    outline: none;
}

.w-dialog-xl{
    width: 80rem !important;
}

.w-dialog-lg{
    width: 64rem !important;
}

.w-dialog-md{
    width: 48rem !important;
}

.w-dialog-sm{
    width: 40rem !important;
}

.w-dialog-xs{
    width: 32rem !important;
}

.mud-dialog-content:focus {
    outline: none;
    box-shadow: none;
}
.mud-popover {
    &.mud-popover-open {
        z-index: 1500 !important;
        background-color: var(--dropdown-background) !important;
        border: 1px solid #385063;
        padding: 4px;
        border-radius: 8px;

        .mud-list {
            &.mud-list-padding {
                overflow-y: unset;
            }

            &.mud-list-padding,
            .mud-list-item {
                padding: 2px 8px;
                margin: 2px 0;
            }
        }
    }
}

.mud-input-root-outlined.mud-select-input,
.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-block: var(--padding-block) !important;
}

.mud-input-root.mud-input-slot.mud-select-input {
    font-size: var(--base-font-size);
    color: var(--light-color);
    padding-block: 10px !important;
}

.mud-disabled .mud-input-root.mud-input-slot.mud-select-input {
    color: var(--mud-palette-text-disabled);
}

.mud-list .mud-list-item-clickable.mud-selected-item,
.mud-list .mud-list-item-clickable:not(.btn-create-dropdown):hover {
    background-color: var(--dropdown-selected) !important;
    color: var(--light-color) !important;
    border-radius: 4px;
}
:root {
    --button-disable-opacity: 0.35!important;
    --button-hover-bg: rgba(123, 176, 220, 0.08);
}

button {
    height: var(--default-block-height);
    text-transform: initial;
    
    &:disabled {
        opacity: var(--button-disable-opacity);
    }
}

.mud-button-root {
    &:disabled {
        cursor: not-allowed;
    }

    &.mud-button-filled {
        .mud-button-filled-error:hover {
            background-color: #ff4040 !important;
        }
    }
        
    &.mud-button-outlined {
        &.mud-button-outlined-error {
            color: #ff4a4a;
            
            &:hover {
                background-color: rgba(220, 123, 123, 0.1) !important;
            }
        }
    }

    .mud-button-label {
        text-transform: initial;
        line-height: 18px;
    }
}

button.mud-button-icon,
button.mud-icon-button {
    height: auto;
}

.auto-map-btn,
.format-sql-btn,
.next-btn,
.edit-btn,
.export-btn,
.test-connection {
    border-color: var(--mud-palette-primary-darken) !important;
    height: 40px;
    min-width: var(--min-width-action-button)!important;
    
    &:hover {
        background-color: var(--button-hover-bg);
    }
    
    &:disabled {
        opacity: var(--button-disable-opacity);
    }

    & > .mud-button-label {
        color: var(--link) !important;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.outline-btn {
    background-color: transparent;
    border: 1px solid var(--hover-selected) !important;
    color: var(--hover-selected) !important;
}

.reset-btn {
    background-color: transparent;
    border: 1px solid #F472FF !important;
    color: #F472FF !important;
}

.outline-btn:hover,
.reset-btn:hover {
    background-color: var(--button-hover-bg)!important;
}

button[aria-label="close"] {
    &:hover svg {
        fill: #354a78 !important;
    }

    svg {
        fill: var(--mud-palette-text-primary) !important;
        font-size: 1.5rem;
        transition: all 250ms linear;
    }
}

.small-btn {
    height: 1.75rem;
}

.middle-btn {
    height: 2rem;
}

.large-btn {
    height: var(--default-block-height);
}

.extra-large-btn {
    height: 2.5rem;
}
.mud-popover .mud-picker-paper {
    &[actionsclass="date-picker-actions"],
    &[actionsclass="time-picker-actions"] {
        margin-top: 0;
    }
    
    &[actionsclass="time-picker-actions"] {
        .mud-timepicker-hourminute .mud-button-text {
            height: 48px;
        }
    }
}
/* Resize bar */
.mud-tabs.mud-dynamic-tabs {
    overflow: auto;
}

.rz-splitter-bar { /* Common for both horizontal and vertical */
    transition: transform 250ms ease-in-out;
    pointer-events: none;
    margin: 0.5rem 0;

    &.rz-splitter-bar-resizable:active {
        background-color: #8ea9c0;

        .rz-resize {
            border: none !important;
        }
    }

    &.rz-splitter-bar-resizable,
    &.rz-splitter-bar-collapsed,
    &.rz-splitter-bar-lastresizable,
    &.rz-splitter-bar-resizable:hover,
    &.rz-splitter-bar-collapsed:hover,
    &.rz-splitter-bar-lastresizable:hover {
        background-color: #7bb0dc52;
        opacity: 1;
    }

    .rz-collapse,
    .rz-resize,
    .rz-expand {
        background-color: var(--mud-palette-background);
        pointer-events: auto;
    }

    .rz-resize,
    .rz-resize:active,
    .rz-resize:hover,
    &:active {
        border: none !important;
    }
}

.rz-splitter {
    &.rz-splitter-horizontal {
        & > .rz-splitter-bar {
            width: 6px;
            border: 2px solid var(--mud-palette-background);
            border-top: 0;
            border-bottom: 0;
            margin: 0 0.5rem;

            .rz-resize {
                margin: 0;
                height: 2rem;

                &:before {
                    content: url("../images/resize-frame-horizontal.svg");
                    display: inline-block;
                }

            }

            .rz-collapse {
                &:hover::before {
                    content: url("../images/arrow_solid-left-hover.svg");
                }

                &::before {
                    content: url("../images/arrow_solid-left.svg");
                }
            }

            .rz-expand {
                &:hover::before {
                    content: url("../images/arrow_solid-right-hover.svg");
                }

                &::before {
                    content: url("../images/arrow_solid-right.svg");
                }
            }
        }

        .rz-splitter-bar-resizable:active {
            width: 6px;
        }

        .rz-collapse,
        .rz-expand {
            padding: 4px 0;
        }

        & > .rz-splitter-bar > .rz-resize:active:before,
        & > .rz-splitter-bar > .rz-resize:hover:before,
        & > .rz-splitter-bar-resizable:active > .rz-resize:before {
            content: url("../images/resize-frame-horizontal-hover.svg");
            display: inline-block;
        }
    }

    &.rz-splitter-vertical {
        & > .rz-splitter-bar {
            height: 6px;
            border: 2px solid var(--mud-palette-background);
            border-left: 0;
            border-right: 0;

            .rz-resize {
                margin: 0;
                width: 2rem;
                height: 1rem;

                &::before {
                    content: url("../images/resize-frame-vertical.svg");
                    display: inline-block;
                }
            }

            .rz-collapse,
            .rz-expand {
                padding: 0 4px;
            }

            .rz-collapse {
                &:hover:before {
                    content: url("../images/arrow_solid-up-hover.svg");
                }

                &::before {
                    content: url("../images/arrow_solid-up.svg");
                }
            }

            .rz-expand {
                &:hover:before {
                    content: url("../images/arrow_solid-down-hover.svg");
                }
                
                &::before {
                    content: url("../images/arrow_solid-down.svg");
                }
            }

            &.rz-splitter-bar-resizable:active {
                height: 6px;
                width: 100%;
            }
        }

        & > .rz-splitter-bar > .rz-resize:active:before,
        & > .rz-splitter-vertical > .rz-splitter-bar > .rz-resize:hover:before,
        & > .rz-splitter-vertical > .rz-splitter-bar-resizable:active > .rz-resize:before {
            content: url("../images/resize-frame-vertical-hover.svg");
            display: inline-block;
        }
    }
}
.qtx-field-custom {
    .label-input {
        margin-bottom: 6px;
    }

    .mud-input > input.mud-input-root-outlined,
    .mud-input-slot.mud-input-root-outlined {
        padding: unset !important;
        padding-left: 10px !important;
        height: var(--default-block-height);
        align-items: center;
        font-size: var(--base-font-size);
    }

    textarea.mud-input-slot.mud-input-root-outlined {
        height: unset;
    }

    .mud-input-control.mud-input-input-control {
        height: auto;
    }

    .mud-input-root.mud-input-slot.mud-select-input {
        display: flex !important;
    }

    .mud-input-control-input-container {
        .mud-input-adorned-end {
            .mud-input-adornment .mud-icon-button .mud-icon-button-label {
                margin-right: 10px;

                svg {
                    font-size: 1rem;
                }
            }
        }
    }

    .mud-input.mud-input-adorned-start{
        .mud-input-adornment.mud-input-adornment-start{
            color: #3C5164;
            font-size: 14px;
            font-weight: 400;
            margin-right: 0;
        }

        .mud-input-slot{
            padding-left: 0 !important;
        }
    }
}
/* Grid General Styles */
.e-grid.sf-grid {
    font-family: "Titillium Web", sans-serif;
    border: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    
    /* hide the Grid spinner */
    .e-spinner-pane{    
        display: none !important;
    }
    
     /*Grid Header Styles */
    .e-gridheader {
        background-color: var(--row-header-background) !important;
        border: none !important;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        min-height: var(--default-block-height);
        /*padding-right: 0.5rem !important;*/
    
        .e-headercontent {
            border-color: transparent;
            /*border-right-width: 0 !important;*/
    
            table {
                background-color: var(--row-header-background) !important;
                
                thead tr th {
                    background-color: var(--row-header-background) !important;
                    color: var(--highlight-cap) !important;
                    font-weight: 600;
                    height: var(--default-block-height);
                    border-color: #131B22;
                    
                    &.e-freezerightborder{
                        border-color: var(--mud-palette-table-lines) !important;    
                    }
                    
                    .e-checkbox-wrapper {
                        line-height: 1;
                    }

                    .e-frame.e-uncheck{
                        border-color: #7BB0DC52;
                    }
                    
                    .e-frame.e-check{
                        background-color: #0d6efd;
                        border-color: transparent;

                        &::before{
                            color: #080B0D;
                            line-height: 15px;
                            font-size: 8px;
                        }
                    }

                    .e-frame.e-stop{
                        background-color: transparent;
                        border-color: #385063;

                        &::before{
                            content: '\e934';
                            background-color: #0d6efd;
                            line-height: 14px;
                            font-size: 6px;
                        }
                    }
                }
                
                .e-headercelldiv {
                    font-size: .875rem;
                    font-weight: 600;
                }
                
                th.e-headercell[aria-sort=ascending] .e-headertext,
                th.e-headercell[aria-sort=descending] .e-headertext {
                    color: unset !important;
                }
                
                .e-headercell .e-rhandler, 
                .e-headercell .e-rsuppress{
                    border-right: 0;    
                }
                
                .e-sortfilterdiv{
                    margin-top: -12px;
                }
                
                th[aria-sort] .e-sortfilterdiv:before {
                    content: url("../images/sort.svg");
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    /*content: "" !important;*/
                }
                
                .e-icon-ascending::before {
                    content: url("../images/sort-asc.svg") !important;
                    font-size: 0;
                    /*content: "" !important;*/
                }
                
                .e-icon-descending:before {
                    content: url("../images/sort-desc.svg") !important;
                    font-size: 0;
                    /*content: "" !important;*/
                }
                
                .e-headerchkcelldiv{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                }
            }
        }
    
        .e-rightfreeze.e-freezerightborder.e-focused:not(.e-menu-item,.e-xlsel-top-border,.e-xlsel-left-border,.e-xlsel-bottom-border,.e-xlsel-right-border){
            border-color: transparent;
        }
    }

    /* Grid Content Styles */

    .e-gridcontent {
    
        &,
        .e-content {
            background-color: transparent !important;
            flex-grow: 1;
        }
    
        .e-content {
            height: 100%;
            overflow-y: auto !important;
        }
        
        table.e-table{
            background-color: var(--dark-color);
            
            &:has(tr.e-emptyrow){
                height: 100%;
            }
        }
        
        table tbody tr {
            &.e-emptyrow:hover td{
                background-color: var(--dark-color) !important;
            }
            
            td {
                background-color: var(--dark-color) !important;
                border-color: var(--mud-palette-table-lines) !important;
                color: var(--light-color) !important;
                height: 2.5rem;
                overflow: hidden;
                padding-inline: 8px !important;
                text-overflow: ellipsis;
                white-space: nowrap;
                
                .e-input-group input{
                    color: #fff;
                }
                
                .e-checkbox-wrapper {
                    line-height: 1;
                }

                .e-frame.e-uncheck{
                    border-color: #7BB0DC52;
                }
                
                .e-frame.e-check{
                    background-color: #0d6efd;
                    border-color: transparent;

                    &::before{
                        color: #080B0D;
                        line-height: 15px;
                        font-size: 8px;
                    }
                }

                .e-frame.e-stop{
                    background-color: transparent;
                    border-color: #385063;

                    &::before{
                        content: '\e934';
                        background-color: #0d6efd;
                        line-height: 14px;
                        font-size: 6px;
                    }
                }
            }
            
            td.e-gridchkbox{
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            &:nth-child(even) td {
                background-color: var(--mud-palette-surface) !important;
            }
    
            &:hover td{
                background-color: var(--mud-palette-table-hover) !important;
            }
            
            td.e-rightfreeze.e-freezerightborder:not(.e-dragborder) {
                clip-path: none !important;
                background-color: #131B22 !important;
            }
        }
    }

    
    .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
        box-shadow: none;
    }
    
    /*&.e-lib:not(.e-rtl) .e-rightfreeze.e-freezerightborder,*/
    /*&:not(.e-rtl) .e-rightfreeze.e-freezerightborder {*/
    /*    border-left-color: var(--border-color) !important;*/
    /*}*/
    
    .e-checkbox-wrapper{
        width: 16px !important;
        height: 16px !important;
        top: 0 !important;
        
        & > span{
            width: 100%;
            height: 100%;
        }
        
        .e-frame{
            background-color: unset;
            /*border: 1px solid #385063;*/
            border-radius: 4px
        }
        
    }
    
    /*!* Sort Header Styles *!*/
    
    th.e-headercell[aria-sort~=cending]:not(.e-columnselection) .e-headertext {
        color: var(--highlight-cap) !important;
    }

    /* Pager Styles */
    .e-pager {
        background-color: var(--mud-palette-surface);
        border: 0;
        border-top: 1px solid var(--mud-palette-table-lines);
        color: var(--highlight-cap);
        font-size: var(--base-font-size);
        padding-block: 6px;

        /* Pager Container Styles */
        .e-pagercontainer {
            background-color: var(--mud-palette-surface) !important;
            border-color: var(--border-color) !important;

            .e-numericcontainer>a.e-currentitem {
                border: 3px solid var(--mud-palette-primary) !important;
            }

            &>div,
            .e-numericcontainer>a {
                background-color: var(--mud-palette-surface) !important;
                border-color: var(--border-color) !important;
                color: var(--light-color) !important;
            }

            .e-numericitem.e-currentitem,
            .e-pager .e-numericitem.e-currentitem:hover {
                padding: 5.4px 10.5px 6.4px 9.5px;
            }

            /* Pager Navigation Styles */

            .e-firstpage,
            .e-prevpage,
            .e-firstpagedisabled,
            .e-prevpagedisabled,
            .e-nextpage,
            .e-lastpage,
            .e-nextpagedisabled,
            .e-lastpagedisabled {
                padding: 12.2px 12.2px 10.7px 11.5px;
            }
        }

        .e-pagesizes {
            .e-pagerdropdown {
                margin-top: -19px;

                span[aria-label="Pagerdropdown"] {
                    background-color: var(--mud-palette-surface);
                    border-color: var(--border-color) !important;
                    overflow: hidden;

                    input {
                        color: var(--light-color) !important;
                    }

                    .e-ddl-icon::before {
                        color: var(--light-color);
                    }
                }
            }
        }

        .e-spacing,
        .e-numericitem:hover,
        .e-currentitem {
            padding: 8px 12.5px 9.5px;
        }

        .text-pagination {
            font-weight: 400;
            font-size: .875rem;
            color: var(--light-color);
        }

        .select-pagination .mud-input-text {
            margin-top: 0 !important;
        }

        .mud-select {
            flex-grow: unset;
        }

        .mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text {
            display: flex;
        }

        .mud-input-root.mud-input-slot.mud-select-input {
            padding-left: 8px;
            padding-right: 8px;
        }

        .mud-input-adornment-end {
            height: 24px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .mud-input.mud-input-underline:before {
            border: 0;
        }

        .mud-input.mud-input-underline:after {
            border: 0;
        }
    }
}

.e-popup.e-popup-open {
    border-color: var(--border-color) !important;
    border-radius: 6px;
    overflow: hidden;

    .e-filter-wrap {
        border: none;
    }

    .e-content.e-dropdownbase ul li {
        background-color: var(--mud-palette-surface) !important;
        color: var(--light-color);

        &:hover,
        &.e-active {
            background-color: var(--dropdown-background) !important;
        }
    }
}

.e-grid {
  .e-gridheader tr {
    th:first-child {
      border-left: 0 !important;
    }
  }

  &.sf-grid.e-default.e-bothlines {
    .e-headercell:last-child {
      border-right: 0;
    }
  }
}

td.e-rowcell.e-templatecell.e-leftalign:last-child {
  border-right: 1px solid var(--mud-palette-table-lines) !important;
}


/* Custom quill text editor */
.ql-toolbar {
    .ql-stroke {
        fill: none;
        stroke: var(--light-color);
    }

    .ql-fill {
        stroke: none;
        fill: var(--light-color);
    }

    .ql-picker {
        color: #fff;
    }
    
    &.ql-blank::before {
        color: var(--placeholder-color);
        font-weight: 400;
        font-style: normal;
        font-size: var(--base-font-size);
    }
    
    &.ql-snow {
        border-top-left-radius: var(--mud-default-borderradius);
        border-top-right-radius: var(--mud-default-borderradius);
        border-color: var(--border-color);
    }
}

.ql-picker-options .ql-picker-item {
    color: #0c1117;
}

.ql-container.ql-snow {
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
    border-color: var(--border-color);
}
.e-ddt.e-input-group.e-control-wrapper .e-ddt-icon::before {
    content: '\e900';
    font-family: ico-qtx !important;
    font-size: 1rem;
    color: var(--light-color);
    margin-right: .25rem;
}

/* Apply for all DDT (even non custom-dropdown-tree) */

.e-disabled.e-ddt.e-input-group.e-control-wrapper .e-ddt-icon::before {
    color: var(--input-text-disabled);
}

.e-ddt.custom-dropdown-tree {
    font-family: "Titillium Web", sans-serif !important;
    background-color: var(--mud-palette-appbar-background) !important;
    border-color: var(--border-color) !important;
    border-radius: 6px !important;
    overflow: hidden;
    
    &.dropdown-invalid:not(.e-popup){
        border-color: var(--mud-palette-error) !important;
    }
    
    > input {
        background-color: var(--mud-palette-appbar-background) !important;
        height: var(--default-block-height) !important;
        color: var(--light-color) !important;
        font-size: var(--base-font-size);
    }

    > input::placeholder {
        color: #1D2934 !important;
    }

    &.e-disabled {
        input {
            color: var(--input-text-disabled) !important;
        }
    }

    &.e-popup {
        background-color: var(--dropdown-background) !important;

        input {
            color: var(--light-color) !important;
            height: var(--default-block-height) !important;
            border-color: var(--border-color) !important;
            padding-left: 28px !important;
        }

        .e-input-group {
            background: none !important;
            border-color: var(--border-color) !important;
        }

        .e-list-item.e-has-child > .e-text-content > .e-list-text {
            color: var(--light-color);
            font-size: var(--base-font-size);
            font-weight: 600 !important;
        }

        .e-list-item > .e-text-content > .e-list-text {
            color: var(--light-color);
            font-size: var(--base-font-size);
            font-weight: 400;
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden !important;
            text-overflow: ellipsis;
            font-family: "Titillium Web", sans-serif !important;
        }

        .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
            box-shadow: none;
        }

        .e-treeview .e-list-item.e-hover > .e-fullrow,
        .e-treeview .e-list-item.e-node-focus > .e-fullrow {
            background-color: var(--mud-palette-primary-hover) !important;
            border: 0;
        }

        .e-treeview .e-list-item.e-active > .e-fullrow {
            background-color: var(--dropdown-selected) !important;
            border: 0
        }

        .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
            color: var(--light-color);
        }

        .e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
            color: #fff !important;
        }

        .e-filter-wrap {
            border: 0 !important;
        }

        .e-treeview .e-list-item div.e-icons.interaction {
            width: 1.75rem;
            height: 1.75rem;
        }

        .e-treeview .e-list-item div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before,
        .e-treeview .e-list-item div.e-icons:not(.e-icons-spinner).e-icon-expandable::before {
            font-size: 1.75rem;
            color: var(--light-color) !important;
        }

        .e-input-group.e-control-wrapper::before{
            background: url(../images/search.svg) no-repeat 0 0;
            width: 18px;
            height: 18px;
            position: absolute;
            top: 25%;
            left: 5px;
        }

        .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
        .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
            box-shadow: none !important;
        }

        .e-ddt-footer {
            border-top: 1px solid #385063;
        }

        .e-ddt-footer .btn-add {
            height: 48px;
            width: 100%;
            color: var(--light-color);
            font-weight: 400;
        }
        
        .e-fullrow-wrap{
            display: block;
        }

        .e-input-group.e-control-wrapper .e-clear-icon{
            color: #fff;
        }
    }
}
@font-face {
    font-family: 'ico-qtx';
    src:  url('../fonts/ico-qtx.eot?95lux9');
    src:  url('../fonts/ico-qtx.eot?95lux9#iefix') format('embedded-opentype'),
    url('../fonts/ico-qtx.ttf?95lux9') format('truetype'),
    url('../fonts/ico-qtx.woff?95lux9') format('woff'),
    url('../fonts/ico-qtx.svg?95lux9#ico-qtx') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'ico-qtx' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-chevron_down:before {
    content: "\e900";
    color: var(--highlight-cap);
}
.icon-connection:before {
    content: "\e901";
    color: var(--highlight-cap);
}
.icon-datasource:before {
    content: "\1f309";
    color: var(--highlight-cap);
}
.icon-datawarehouse:before {
    content: "\e902";
    color: var(--highlight-cap);
}

.icon-chevron-down {
    background: url("/images/chevron_down.svg") no-repeat center;
}

.icon-snackbar-success {
    background: url("/images/snackbar-success.svg") no-repeat center;
}

.icon-snackbar-error {
    background: url("/images/snackbar-error.svg") no-repeat center;
}

.icon-snackbar-warning {
    background: url("/images/snackbar-warning.svg") no-repeat center;
}

.icon-snackbar-info {
    background: url("/images/snackbar-info.svg") no-repeat center;
}
.icon-calendar {
    background: url("/images/calendar.svg") no-repeat center;
}
.icon-clock {
    background: url("/images/clock.svg") no-repeat center;
}
.icon-reset {
    background: url("/images/reset.svg") no-repeat center;
}
.icon-add {
    background: url("/images/add.svg") no-repeat center;
}
.icon-rounded-minus {
    background: url("/images/rounded-minus.svg") no-repeat center;
}

/* Customize MudBlazor classes */
.mud-list-item.mud-list-item-gutters {
    column-gap: 4px;
}
.mud-list-item-icon {
    min-width: unset!important;
}
.e-accordion {
    background-color: var(--mud-palette-surface);

    .e-acrdn-item {
        &.e-selected.e-select.e-active {
            background-color: var(--deep-bg);
        }

        &.e-selected.e-select > .e-acrdn-header {
            background-color: var(--mud-palette-surface);
        }

        &.e-select.e-active > .e-acrdn-header .e-acrdn-header-content,
        &.e-select.e-item-focus > .e-acrdn-header .e-acrdn-header-content {
            color: var(--light-color);
            font-size: 16px;
            font-weight: 600;
        }

        .sql-filter-wrapper{
            width: 100%;
            height: 100%;
        }
    }
}
.e-input-group, .e-input-group.e-control-wrapper {
    background-color: var(--mud-palette-appbar-background);
    border-color: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper.e-valid-input {
    background-color: var(--mud-palette-appbar-background);
    border-color: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.e-input-group .e-input[readonly], .e-input-group.e-control-wrapper .e-input[readonly] {
    color: #FFFFFF;
}

.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    color: #FFFFFF;
}

.e-ddl.e-popup .e-filter-parent .e-input-group, .e-ddl.e-popup .e-filter-parent {
    background-color: var(--dropdown-background);
    color: #FFFFFF;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--border-color);
}

.e-popup.e-ddl .e-dropdownbase {
    background-color: var(--dropdown-background);
}

.e-content.e-dropdownbase ul li {
    background-color: var(--dropdown-background) !important;
}

.e-popup.e-popup-open .e-content.e-dropdownbase ul li:hover {
    background-color: var(--dropdown-selected) !important;
    border-radius: 4px;
}

.e-popup.e-popup-open .e-content.e-dropdownbase ul li.e-active {
    background-color: var(--dropdown-selected) !important;
    border-radius: 4px;
}

.e-popup.e-popup-open .e-content.e-dropdownbase ul li {
    padding: 2px 8px;
    margin: 2px 0;
    background-color: var(--dropdown-background) !important;
}

.e-dropdownbase .e-list-parent {
    padding: 2px 8px;
    margin: 2px 0;
}

input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: 35px;
}


.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--border-color);
    box-shadow: unset;
}

.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border-color: var(--border-color);
}

.e-filter-parent {
    box-shadow: unset;
    padding: 12px;
}

.e-dropdownbase .e-list-item {
    text-indent: 0px;
}

.e-ddl.e-popup {
    background-color: var(--dropdown-background);
}

.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--mud-palette-primary);
    box-shadow: unset;
}

.e-input-filter {
    padding-left: 28px !important;
}

.e-popup-open .e-filter-parent .e-input-group.e-input-focus::before {
    content: "";
    background: url(../images/search.svg) no-repeat 0 0;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 25%;
    left: 5px;
}

.e-popup.e-ddl {
    margin-top: 1px;
}

.e-ddl.e-input-group.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
    transform: rotate(180deg);
    transition: transform 300ms ease;
}

.e-ddl.custom-dropdown-list{
    &.e-popup {
        .e-ddl-footer {
            border-top: 1px solid #385063;
        }
        
        .e-ddl-footer .btn-add {
            height: 48px;
            width: 100%;
            color: var(--light-color);
            font-weight: 400;
        }
        
        .e-fullrow-wrap{
            display: block;
        }
        
        .e-input-group.e-control-wrapper .e-clear-icon{
            color: #fff;
        }
    }
}

.e-ddl .e-ddl-icon::before {
    transform: rotate(0deg);
    transition: transform 300ms ease;
}

.e-ddl.e-lib.e-input-group input::placeholder{
    color: #1D2934 !important;
}

.e-ddl{
    font-family: "Titillium Web", sans-serif !important;
    
    &.e-popup li{
        font-family: "Titillium Web", sans-serif !important;
    }
}

.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled{
    background-color: var(--mud-palette-appbar-background) !important;    
}

.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly], 
.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly]{
    background-color: transparent;
}

.hidden-resizer.e-ddl.e-popup .e-resizer-right{
    display: none;
}
.custom-rich-text-editor{
    background: transparent;
    
    .e-rte-container{
        border-color: var(--border-color);
        border-radius: var(--mud-default-borderradius);
        overflow: hidden;

        .e-toolbar-container{
            border-color: var(--border-color);
            
            .e-toolbar{
                background: var(--row-header-background);
                
                .e-toolbar-items{
                    background: var(--row-header-background);
        
                    .e-toolbar-item.e-overlay{
                        background: transparent;
                        opacity: 0.3;
                    }
                    
                    .e-toolbar-item .e-tbar-btn{
                        color: #fff;
                        background: transparent;
        
                        &:hover{
                            background: rgba(123, 176, 220, 0.08);
                        }
        
                        .e-icons{
                            color: #fff;
                        }
                    }

                    .e-toolbar-item.e-separator{
                        opacity: 0.3;
                    }

                    .e-toolbar-item .e-outdent::before,
                    .e-toolbar-item .e-indent::before{
                        font-size: 18px;
                    }

                    .e-rte-fontcolor-dropdown:hover .e-rte-color-content:hover,
                    .e-rte-fontcolor-dropdown:hover .e-caret:hover,
                    .e-rte-backgroundcolor-dropdown:hover .e-rte-color-content:hover,
                    .e-rte-backgroundcolor-dropdown:hover .e-caret:hover{
                        background: rgba(123, 176, 220, 0.08);
                    }
                }
            }
        }
        
        .e-rte-content{
            color: #fff;
            background: var(--mud-palette-appbar-background);
        }
    }
}

.show-error{
    .custom-rich-text-editor{
        .e-rte-container {
            border-color: var(--mud-palette-error) !important;
        }
    }
}

.e-rte-dropdown-items.e-dropdown-popup{
    ul .e-item:active{
        background: #fff;
        color: #212529;
    }
}
.custom-tooltip {
    &.e-tooltip-wrap{
        &.e-popup {
            background-color: #1c2730 !important;
            border: 1px solid var(--border-color) !important;
        }
    }
}

.e-tooltip-error{
    background-color: #f8d7da !important;
    overflow: unset !important;
    
    .e-tip-content{
        color: #dc3545;
    }
    
    .e-arrow-tip.e-tip-top{
        .e-arrow-tip-outer.e-tip-top{
            border-bottom: 8px solid #f8d7da;
        }
        
        .e-arrow-tip-inner.e-tip-top{
            color: #f8d7da;
        }
    }
}
.custom-tree-grid.sf-treegrid {
    .e-gridheader thead {
        tr {
            th {
                border-right: 2px solid var(--dark-color);
                
                .e-hierarchycheckbox {
                    display: none;
                }
            }

            th.e-lastcell {
                border-right: 0;
            }
        }
    }

    .e-gridcontent tbody {
        tr {
            &.hidden-row-checkbox .e-checkbox-wrapper{
                visibility: hidden;
            }
            
            td {
                height: 2.5rem !important;
                
                /* Disable checkbox*/
                &.e-rowcell.e-checkbox-disabled {
                    /*pointer-events: none;*/
                    cursor: not-allowed;
                }
                
                /*&.e-rowcell.e-checkbox-disabled .e-checkbox-wrapper {*/
                /*    visibility: hidden;*/
                /*    !*opacity: 0.35;*!*/
                /*    !*pointer-events: none;*!*/
                /*}*/

                /* Invalid cell */
                &.e-rowcell.invalid-cell{
                    border: 1px solid #EE5249 !important;
                }

                &.e-rowcell.invalid-cell input::placeholder,
                &.e-rowcell.invalid-cell p{
                    color: #EE5249 !important;
                }
                
                input{
                    color: #fff;
                    font-size: 14px;
                    font-weight: 400;

                    &::placeholder{
                        color: #fff;
                    }
                }

                .e-table.e-inline-edit .e-rowcell{
                    span.e-input-focus:not(.invalid){
                        border-color: #4245A9 !important;
                    }

                    span.e-success{
                        border-color: unset;
                        box-shadow: none !important;
                    }
                    
                    .e-input-group.e-disabled{
                        background-color: var(--mud-palette-appbar-background);
                    }
                    /*padding-inline-end: 0px !important;*/
                }
                
                .e-treecolumn-container{
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .e-checkbox-wrapper {
                        margin-right: 8px;
                        line-height: 1;
                    }

                    .e-treecell{
                        width: 80%;
                    }

                    .e-frame.e-uncheck{
                        border-color: #7BB0DC52;
                    }
                    
                    .e-frame.e-check{
                        background-color: #0d6efd;
                        border-color: transparent;

                        &::before{
                            color: #080B0D;
                            line-height: 15px;
                            font-size: 8px;
                        }
                    }

                    .e-frame.e-stop{
                        background-color: transparent;
                        border-color: #385063;

                        &::before{
                            content: '\e934';
                            background-color: #0d6efd;
                            line-height: 14px;
                            font-size: 6px;
                        }
                    }
                    
                    .e-treegridexpand{
                        margin-right: 4px;
                        transform: rotate(0deg);
                        border: 1px solid #385063;
                        border-radius: 4px;
                        position: relative;
                        width: 16px;
                        height: 16px;
    
                        &:before{
                            content: "\e87f";
                            font-size: 8px;
                            width: 14px;
                            line-height: 15px;
                            position: absolute;
                            color: #fff;
                            top: 0;
                            left: 0;
                        }
                    }

                    .e-treegridcollapse{
                        margin-right: 4px;
                        transform: rotate(0deg);
                        border: 1px solid #385063;
                        border-radius: 4px;
                        position: relative;
                        width: 16px;
                        height: 16px;

                        &:before{
                            content: "\e805";
                            font-size: 8px;
                            width: 15px;
                            line-height: 15px;
                            position: absolute;
                            color: #fff;
                            top: 0;
                            left: 0;
                        }
                    }
                }
            }
        }
    }
}
.custom-mud-grid.mud-data-grid{
    display: contents;
    
    .mud-table-container{
        flex: 1;
        overflow-x: hidden;
        
        table{
            table-layout: fixed;
            
            thead{
                tr{
                    th{
                        &:has(.mud-input-control-boolean-input){
                            width: 10% !important;
                        }

                        .column-header:has(.mud-input-control-boolean-input){
                            justify-content: center;
                        }
                        
                        .mud-input-control-boolean-input{
                            align-items: center;
                        }
                        
                        .mud-checkbox {
                            span.mud-ripple-checkbox{
                                border-radius: unset;
                                
                                svg{
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }

            thead.check-full{
                span.mud-ripple-checkbox{
                    &:before{
                        content: url("../images/check-full.svg");
                        display: inline-block;
                        width: 20px;
                        height: 22px;
                    }
                }
            }

            thead.check-empty{
                span.mud-ripple-checkbox{
                    &:before{
                        content: url("../images/check-empty.svg");
                        display: inline-block;
                        width: 20px;
                        height: 22px;
                    }
                }
            }
            
            thead.check-indeterminate{
                span.mud-ripple-checkbox{
                    &:before{
                        content: url("../images/check-indeterminate.svg");
                        display: inline-block;
                        width: 20px;
                        height: 22px;
                    }
                }
            }
            
            tbody{
                tr{
                    td{
                        &.invalid-cell .mud-input-control-helper-container{
                            display: none;
                        }
                        
                        .mud-input-control{
                            justify-content: center;
                        }
                        
                        .mud-input-control-boolean-input{
                            align-items: center;
                        }

                        .mud-checkbox {
                            span.mud-ripple-checkbox{
                                border-radius: unset;

                                svg{
                                    display: none;
                                }
                            }
                        }
                    }

                    &.selected-row {
                        span.mud-ripple-checkbox {
                            &:before {
                                content: url("../images/check-full.svg");
                                width: 20px;
                                height: 22px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }

                    &.unselected-row {
                        span.mud-ripple-checkbox {
                            &:before {
                                content: url("../images/check-empty.svg");
                                width: 20px;
                                height: 22px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }
        }
    }
}
.custom-monaco.monaco-editor-container {
    height: 100%;

    .monaco-editor {
        height: 100%;
        background-color: transparent;
        
        .margin, .monaco-editor-background {
            background: transparent;
        }

        .monaco-scrollable-element > .scrollbar.horizontal > .slider {
            background: #597388 !important;
            border-radius: 1.25rem;
            height: 0.5rem !important;
        }

        .monaco-scrollable-element > .scrollbar.vertical > .slider {
            background: #597388 !important;
            border-radius: 1.25rem;
            width: 0.5rem !important;
        }
        
        .overflow-guard {
            height: 100% !important;
            border: 1px solid var(--border-color);

            .margin-view-overlays {
                & > div{
                    border-right: 1px solid #597489
                }

                .active-line-number{
                    color: var(--link);
                }
            }
        }

        .lines-content .core-guide-indent{
            box-shadow: none;
        }

        .monaco-scrollable-element.editor-scrollable{
            left: 30px !important;
        }
    }
}

.monaco-editor-container {
    .monaco-editor{
        outline: 0;
    }
}
.custom-mud-select-extended {
    .hide-arrow-icon .mud-input-adornment {
        display: none;
    }
    
    .mud-select-extended,
    .mud-select {
        min-width: unset;
        height: var(--default-block-height);
    }

    .mud-select-input {
        margin-top: 0 !important;
        line-height: 18px;

        &::before, &::after, & > input {
            display: none;
        }
    }
    
    .selected.mud-input-control > .mud-input-control-input-container{
        border-color: var(--primary-color);
    }
    
    .mud-input-control {
        margin-top: 0 !important;
        
        .mud-input-control-input-container {
            margin-top: 0;
            flex-direction: row;
            border-radius: 6px;
            padding: 0 10px;
            border: 1px solid var(--border-default-button);
            cursor: pointer;

            &:hover {
                background-color: var(--hover-default-button-background);
            }

            .mud-input-text {
                margin-top: 0 !important;
            }

            .mud-input-label {
                position: static;
                order: -1;
                transform: none;
                line-height: 36px;
                font-weight: 600;
                font-size: var(--base-font-size);
                color: var(--light-color);
            }

            .mud-input-slot {
                margin-left: 4px;
                padding: 0;
                font-size: var(--base-font-size);
                font-weight: 600;
                color: var(--link);
            }
        }
    }
    
    .show-badge:before, .show-badge:after {
        display: none !important;
    }

    .mud-input-label-animated{
        transform: none !important;
        color: #fff !important;
    }

    .show-counter .mud-input-slot > div,
    .date-btn .counter {
        min-width: 20px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background-color: var(--primary-color);
        font-size: var(--base-font-size);
        line-height: 18px;
        color: var(--light-color);
        font-weight: 600;
    }
}

.custom-mud-select-extended-popup {
    &.mud-popover {
        max-height: unset !important;
        padding: 12px 0 12px 12px;
    }

    .mud-list,
    .mud-list-extended {
        padding: 0 6px 0 0;
        overflow-y: scroll;
    }

    .mud-list-extended {
        background-color: inherit !important;

        .mud-list-subheader-extended {
            background-color: inherit !important;
            padding: 0 !important;
            top: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 8px;

            .mud-list-item-extended {
                padding: 0;
            }
        }
    }

    .mud-list-item-extended {
        padding: 2px 8px;
        margin-bottom: 2px;
        border-radius: 6px;

        &:hover {
            background-color: var(--dropdown-hover) !important;
            color: var(--light-color) !important;
        }

        &.mud-selected-item {
            background-color: transparent !important;
            color: var(--light-color) !important;
        }

        .mud-list-item-multiselect-checkbox-extended {
            padding-right: 0;

            .mud-ripple-checkbox {
                margin-right: 0;
            }
        }
    }

    .mud-list-item-text-extended {
        margin-left: 0;
    }

    .mud-list-item .mud-list-item-text {
        margin: 2px 0;
    }
}
.custom-uploader.e-upload {
    border-color: #2C3D49;
    border-radius: 16px;
    overflow: hidden;

    .e-file-select-wrap {
        width: 270px;
        height: 160px;
        background-color: #182029;
        padding: 12px;
        display: flex;
        justify-content: center;
        
        .e-upload-browse-btn {
            width: 120px;
            height: 100%;
            background-color: transparent;
            border-color: transparent;
            outline: none;
            box-shadow: none;
            font-size: 18px;
            font-weight: 600;
            display: inline;
            white-space: normal;
        }

        .e-file-drop {
            display: none
        }
    }
    
    .e-upload-files{
        display: none;
    }
}

#drop-area-wrap{
    width: 255px;
    height: 160px;
    background-color: #182029;
    padding: 12px;
    border: 1px dashed #2C3D49;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
}

* {
    font-family: "Titillium Web", sans-serif;
}

/* Common element */
#app {
    position: fixed;
    inset: 0;
}

a,
.btn-link {
    color: #0071c1;
}

code {
    color: #c02d76;
}

textarea {
    margin-block: 8px !important;
}

.mud-input > textarea.mud-input-root-outlined {
    margin-left: unset !important;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.text-label {
    font-size: var(--base-font-size);
    color: var(--light-color);
    font-weight: normal;
}

.d-contents {
    display: contents !important;

}

.h-100 {
    height: 100%;
}

.text-placeholder {
    font-size: var(--base-font-size);
    font-weight: 400;
    color: #597489;
}

.is-disabled {
    opacity: var(--button-disable-opacity);
}

.font-700 {
    font-weight: 700;
}

.mud-input:hover .mud-input-outlined-border {
    outline: none;
}

.mud-input-slot.mud-input-root::placeholder {
    color: var(--placeholder-color) !important;
}

.mud-progress-circular.mud-progress-indeterminate {
    animation: none;
}

.mud-ripple.mud-ripple-icon {
    padding: 0;
}

/* Error boundary */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
    /* Should overlap the z-index of the aside part which is 1100 */
    color: var(--danger-color);

    & > a {
        color: var(--danger-color);
    }

    .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--dark-color);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;

    &::after {
        content: "An error has occurred.";
    }
}

.mud-container {
    padding: 8px;
    overflow-y: hidden;
    
    &.mud-container-maxwidth-false {
        padding-inline: 0.5rem;
    }
}

/* Checkbox */
.mud-checkbox > span {
    padding: unset !important;
}

.mud-checkbox > span > svg {
    font-size: 20px;
}

.mud-checkbox {
    width: fit-content;
}

/* Graph grid */
.graph-container .x6-graph-grid {
    opacity: 0.15;
}

.config-btn-container {
    display: flex;
    justify-content: center;
}

.config-btn {
    width: auto;
    white-space: normal;
    word-wrap: break-word;
}

/* Search box */
.search-input-wrapper {
    width: var(--search-box-width);
    
    & > .mud-input-control.mud-input-input-control {
        .mud-input-adorned-start {
            padding-left: 10px !important;
        }

        .mud-input-adornment-start svg {
            font-size: 20px;
            color: var(--highlight-cap);
        }
    }
}

.dropdown-wrapper .mud-select-extended,
.dropdown-wrapper input.mud-input-slot.mud-input-root,
.search-input-wrapper input.mud-input-slot.mud-input-root {
    font-size: var(--base-font-size);
    color: var(--light-color) !important;
    line-height: 18px;
    margin-top: unset;
    padding-block: unset !important;
    height: var(--default-block-height);
}

/* Custom toolbar in MudTable*/
.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    padding-inline: 0 !important;
    height: fit-content;
}

.dropdown-wrapper .mud-select.me-3,
.dropdown-wrapper .mud-select-extended .me-3,
.mud-input-control.mud-input-input-control {
    height: 100%;
    margin: 0 !important;
}

/* Activities */
.flowchart-diagram-designer .mud-badge-root .mud-paper p {
    color: var(--light-color);
    font-size: var(--base-font-size);
}

/* Table actions */
.text-primary,
button.text-primary .mud-button-label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    color: var(--link);
    font-weight: 600;
}

.mud-tooltip {
    border-radius: 0.375rem;
    color: var(--light-color);
    font-size: 0.875rem;
    line-height: 1.375rem;
    padding: 0.25rem 0.75rem !important;
    max-width: 21.875rem;

    &::after {
        border-color: var(--mud-palette-grey-darker) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
    }
}

/* Input */
.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 10px;
}

/* Workflow */
.workflow-tabs {
    .mud-tab {
        color: var(--highlight-cap);
        text-transform: capitalize;
        font-size: 16px;
        height: var(--default-tab-header-height);
    }

    .mud-tab.mud-tab-active {
        color: var(--light-color);
    }

    .mud-icon-button:disabled svg path {
        fill: var(--disable-color);
    }
}

.workflow-tab-header {
    .mud-tab.mud-tab-active {
        color: var(--light-color);
        text-transform: capitalize;
        font-size: 18px;
        padding: 0 0 0 16px;
        height: var(--default-tab-header-height);
    }

    .mud-tab.mud-tab-active:hover {
        background-color: var(--mud-palette-background);
    }

    .mud-tab-slider,
    .mud-tabs-scroll-button {
        display: none;
    }

    .mud-tab {
        justify-content: start;
    }
}

.mud-tabs-scroll-button {
    display: flex;
    align-items: center;
}

.mud-tabs-scroll-button button {
    height: auto;
    margin: auto;
}

.workflow-workspace .workflow-tab-header {
    border: 1px solid var(--border-panel-color);
    border-top: 0;
    border-bottom: 0;
}

.workflow-workspace,
.journal-wrapper {
    .mud-paper:has(.mud-toolbar) {
        margin: 0 !important;
        border-radius: 0;
        border-color: var(--border-panel-color);
        border-right: 0;
        border-left: 0;
    }

    .mud-toolbar-gutters {
        height: var(--default-block-height);
        gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/*Custom last field in form*/
.mud-form > div.mb-5:last-of-type {
    margin-bottom: 0 !important;
}

/*workflow properties*/
.workflow-section-title {
    font-size: 16px !important;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 12px;
}

.btn-create-dropdown {
    position: sticky;
    bottom: -4px;
    background: var(--dropdown-background);
    margin: 0 !important;
    border-top: 1px solid #385063;
    width: 100%;
    
    &:hover {
        background-color: var(--dropdown-background) !important;
    }

    button {
        padding-block: 0.5rem;

        .mud-button-label {
            color: #fff;
            font-size: var(--base-font-size);
            font-weight: 400;
        }

        &:hover {
            background-color: var(--dropdown-background) !important;
        }
    }
}

.field-mapped {
    background-color: var(--mud-palette-surface) !important;
}

tr.field-mapped:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

.disabled-auto-suggestion.e-popup-open {
    display: none !important;
}

.text-link{
    color: var(--link) !important;
    text-decoration: none !important;
    font-size: var(--base-font-size) !important;

    b {
        font-weight: 600;
    }
}

.color-check-icon{
    color: #1AB756 !important;
}

input::placeholder{
    color: var(--placeholder-color) !important;
}

.sql-editor{
    .mtk20{
        color: #EE5249;
    }
}

.w-100{
    width: 100%;
}

.icon-action{
    &:hover path{
        fill: #8EA9C0;
    }
}

.icon-remove-field{
    path{
        fill: #EE5249;
    }
    
    &:hover path{
        fill: #FF827A;
    }
}

.icon-add-field{
    &:hover path{
        fill: #50CD82;
    }
}

.icon-action.mud-icon-button{
    background-color: unset;
}

.text-capitalize{
    text-transform: capitalize
}

.w-fit{
    width: fit-content !important;
}


/*Custom css for mud select*/
.wrapper {
    .mud-input.custom-select-input {
        padding-right: 10px;

        &::after {
            content: "\e900";
            font-family: ico-qtx !important;
            font-size: 1rem;
            color: #FFFFFF;
            transition: all 250ms linear;
        }

    }

    &:has(.mud-overlay) .mud-select .mud-input.custom-select-input::after {
        transform: rotate(180deg);
    }

    .mud-disabled.mud-input.custom-select-input::after {
        color: var(--input-text-disabled);
    }
}

/*Custom css for row active in code editor*/
.active-line-number {
    color: var(--link) !important;
}

.mud-radio.mud-disabled, .mud-radio .mud-disabled:focus-visible, .mud-radio .mud-disabled:active {
    cursor: default;
    background-color: rgba(0, 0, 0, 0) !important;
}

.mud-radio.mud-disabled>.mud-radio-content, 
.mud-radio .mud-disabled:focus-visible>.mud-radio-content, 
.mud-radio .mud-disabled:active>.mud-radio-content
{
    color: #fff !important;
}

.mud-disabled .mud-icon-root, .mud-disabled .mud-svg-icon, .mud-disabled .mud-icon-default{
    color: unset !important;
    opacity: 0.35;
}

.mud-radio .mud-disabled:hover{
    color: unset;
}

.mud-radio.mud-disabled *, .mud-radio .mud-disabled:focus-visible *, .mud-radio .mud-disabled:active *{
    color: var(--mud-palette-primary) !important;
}

.overlay-dialog-content {
    height: var(--dialog-content-h);
    top: var(--dialog-title-h);

    .mud-overlay-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}