/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/

/* Form Element Properties Editor - section styling */
.props-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 4px;
    overflow: hidden;
}
.props-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}
.props-section__body {
    padding: 12px;
}
.props-section--data { border-color: rgba(0,172,193,0.35); }
.props-section--data .props-section__header { background: linear-gradient(135deg, rgba(0,172,193,0.12) 0%, transparent 100%); border-bottom-color: rgba(0,172,193,0.25); }
.props-section--element { border-color: rgba(var(--mud-palette-primary-rgb), 0.35); }
.props-section--element .props-section__header { background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.12) 0%, transparent 100%); border-bottom-color: rgba(var(--mud-palette-primary-rgb), 0.25); }
.props-section--style { border-color: rgba(255,111,0,0.35); }
.props-section--style .props-section__header { background: linear-gradient(135deg, rgba(255,111,0,0.12) 0%, transparent 100%); border-bottom-color: rgba(255,111,0,0.25); }
.props-section--action { border-color: rgba(67,160,71,0.35); }
.props-section--action .props-section__header { background: linear-gradient(135deg, rgba(67,160,71,0.12) 0%, transparent 100%); border-bottom-color: rgba(67,160,71,0.25); }
.props-section--feedback { border-color: rgba(251,140,0,0.35); }
.props-section--feedback .props-section__header { background: linear-gradient(135deg, rgba(251,140,0,0.12) 0%, transparent 100%); border-bottom-color: rgba(251,140,0,0.25); }

:root {
    --step-width: 50vw;
    --bs-body-bg: rgb(21, 21, 33);
    --bs-body-color: #fff;
    --bs-link-color-rgb: 89,74,226;
    --bs-link-opacity: 1;
    --bs-body-color-rgb:#fff;
}

/* Selected step. A ring rather than a border, so it stacks on top of the card's
   own border without disturbing the step-type accent, and the radius matches
   every other card in the product instead of turning into a pill.

   Deliberately NOT !important. The FlightRecorder marks the step it is sitting
   on by animating box-shadow on this very element (#step-{id} > *, see
   EditJobDefinitionPage). CSS animations outrank normal author declarations but
   lose to !important ones, so an !important box-shadow here silently kills that
   glow whenever the recorder's step is also the selected one. At (0,3,0) this
   still beats .new-design .step-card without needing the hammer. */
.new-design .outline-selection .step-with-container {
    border-radius: 12px;
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.5);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.step-with-container {
    cursor: pointer;
}

.new-design .step-with-container {
    transition: box-shadow 0.2s ease;
}

    .new-design .step-with-container .step-single:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
/*OLD DESIGN*/
/* 1. Style LOOP/WHILE STEPS */
.old-design .loop-while-step > .step-with-container {
    /*max-width: 600px;*/
    border: 1px solid #ff9800; /* Example: Green border */
    border-left: 3px solid #ff9800; /* Example: Green border */
    /*background: #e7f9f0;*/ /* Example: Subtle green background */
    box-shadow: 0 4px 16px rgba(11,125,67,0.06);
    position: relative;
    z-index: 1;
}

/* 2. Style IF STEPS */
.old-design .if-step > .step-with-container {
    /*max-width: 600px;*/
    border: 1px solid #776BE7;
    border-left: 3px solid #776BE7; /* Example: Blue border */
    /*background: #eaf3fc;*/ /* Example: Subtle blue background */
    box-shadow: 0 4px 16px rgba(22,95,167,0.06);
    position: relative;
    z-index: 1;
}

/* 3. Style ALL OTHER STEPS (single shared style) */
.old-design .step-with-container:not(.step-single):not(.step-theme-light) {
    /* Only applies if you want to EXCLUDE .step-single or similar variants,
     Otherwise, you can just style .step-with-container directly: */
    /*border: 2px solid #bbb;*/
    /*background: #faf9f7;*/
    box-shadow: 0 2px 8px rgba(150,150,150,0.06);
}

.old-design .step-with-container {
    /* General shared styles */
    min-width: 600px;
    /*max-width: 100%;*/
    border-radius: 50px;
    border-left-width: 5px;
    /*margin-bottom: 16px;*/
    overflow: visible; /* So nested steps can overflow */
    position: relative;
    z-index: 0;
}

.old-design .mud-treeview {
    overflow: visible !important;
}
/* 4. Make nested steps overflow their parent */
.old-design .mud-card,
.old-design .step-with-container,
.old-design .mud-card-content,
.old-design .mud-collapse-wrapper-inner {
    overflow: visible !important;
}

/* 5. Optionally, give a visual cue for nesting (indent, border, etc) */
/* Example: indent nested steps a bit */
.old-design .mud-treeview-group > div > .mud-paper.step-with-container {
    margin-left: 32px;
}

/* 6. Remove margin on very first-level steps if needed */
.old-design > .mud-paper.step-with-container {
    margin-left: 0 !important;
}

/* NEW DESIGN ********************************************************************************************************************/

/* ===== New Step Card Design ===== */
.new-design .step-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    /* A hairline on three sides so the card reads as paper on the canvas; the
       left edge stays the step-type accent, set by the .step-type-* rules below. */
    border: 1px solid var(--mud-palette-divider);
    border-left: 3px solid var(--mud-palette-tertiary);
    background: var(--mud-palette-surface);
    overflow: visible;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

/* Only the three neutral edges move on hover — `border-color` shorthand here
   would take the step-type accent with it. */
.new-design .step-card:hover {
    border-top-color: var(--mud-palette-lines-inputs);
    border-right-color: var(--mud-palette-lines-inputs);
    border-bottom-color: var(--mud-palette-lines-inputs);
    box-shadow: var(--mud-elevation-2);
}

.new-design .step-card-header {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    cursor: pointer;
    width: 100%;
}

/* Fallback for direct children */
.new-design .step-card > .step-card-header {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
}

/* Also target via step-with-container */
.new-design .step-with-container > .step-card-header {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
}

.new-design .step-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Constrain all images/logos inside icon area */
.new-design .step-card .step-icon-area img,
.new-design .step-card .step-icon-area .mud-image,
.new-design .step-card-header .step-icon-area img,
.new-design .step-card-header .step-icon-area .mud-image {
    max-width: 36px !important;
    max-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    border-radius: 6px;
}

.new-design .step-card .step-icon-area .mud-avatar,
.new-design .step-card-header .step-icon-area .mud-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
}

.new-design .step-card .step-icon-area .mud-avatar .mud-icon-root,
.new-design .step-card-header .step-icon-area .mud-avatar .mud-icon-root {
    font-size: 20px !important;
}

/* Ensure avatar groups in step icon areas are constrained */
.new-design .step-card-header .step-icon-area .mud-avatar-group {
    max-width: 40px;
}

.new-design .step-card-header .step-icon-area .mud-avatar-group .mud-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.new-design .step-content-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.new-design .step-content-area .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-design .step-actions-area {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.new-design .step-card-content {
    padding: 4px 12px 12px 12px;
}

/* Step type border colors */
.new-design .step-card.step-type-step {
    border-left-color: var(--mud-palette-tertiary);
}

.new-design .step-card.step-type-loop {
    border-left-color: var(--mud-palette-warning);
}

.new-design .step-card.step-type-while {
    border-left-color: var(--mud-palette-warning);
}

.new-design .step-card.step-type-if {
    border-left-color: var(--mud-palette-primary);
}

.new-design .step-card.step-type-elseif {
    border-left-color: var(--mud-palette-primary);
}

.new-design .step-card.step-type-webhook {
    border-left-color: var(--mud-palette-secondary);
}

.new-design .step-card.step-type-notification {
    border-left-color: var(--mud-palette-secondary);
}

.new-design .step-card.step-type-storage {
    border-left-color: var(--mud-palette-tertiary);
}

.new-design .step-card.step-type-database {
    border-left-color: var(--mud-palette-tertiary);
}

.new-design .step-card.step-type-convert {
    border-left-color: var(--mud-palette-secondary);
}

.new-design .step-card.step-type-csharp {
    border-left-color: var(--mud-palette-info);
}

.new-design .step-card.step-type-javascript {
    border-left-color: #f7df1e;
}

.new-design .step-card.step-type-sftp {
    border-left-color: #ff7043; /* Deep Orange - matches icon */
}

.new-design .step-card.step-type-arrayfilter {
    border-left-color: var(--mud-palette-secondary); /* matches Color.Secondary icon */
}

.new-design .step-card.step-type-join {
    border-left-color: var(--mud-palette-info); /* matches Color.Info icon */
}

.new-design .step-card.step-type-loopbreak {
    border-left-color: var(--mud-palette-warning); /* matches Color.Warning icon */
}

.new-design .step-card.step-type-runotherintegration {
    border-left-color: var(--mud-palette-tertiary); /* matches Color.Tertiary icon */
}

.new-design .step-card.step-type-dataobjectbuilder {
    border-left-color: var(--mud-palette-primary); /* matches Color.Primary icon */
}

.new-design .step-card.step-type-edifactory {
    border-left-color: var(--mud-palette-primary); /* matches Color.Primary icon */
}

.new-design .step-card.step-type-datashaper {
    border-left-color: var(--mud-palette-primary); /* matches Color.Primary icon */
}

.new-design .step-card.step-type-delay {
    border-left-color: var(--mud-palette-info); /* matches Color.Info icon */
}

/* Loop/While container styling - no extra border, just spacing */
.new-design .loop-container,
.new-design .while-container {
    border: none;
    padding: 8px 0;
    margin: 0;
    background: transparent;
}

.new-design .loop-container-header,
.new-design .while-container-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.new-design .loop-container-content,
.new-design .while-container-content {
    padding: 8px;
}

/* RunOtherIntegration nested steps container */
.new-design .run-integration-nested-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Ensure breakpoints and fab-row elements display properly inside RunOtherIntegration */
.new-design .run-integration-nested-steps .fab-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The included integration is covered by a transparent read-only overlay (z-index:1) that
       blocks editing its steps. Lift the breakpoint markers above it so they stay clickable.
       Applies to all fab-rows — the live debugger's "debug" rows AND the FlightRecorder's
       "after" rows (its bottom breakpoint), incl. the last nested step which has no trailing
       vline to shift it left. Step content isn't in a fab-row, so it stays read-only. */
    position: relative;
    z-index: 2;
}

.new-design .run-integration-nested-steps .fab-row.debug {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

.new-design .run-integration-nested-steps .fab-row .vline {
    width: 2px;
    min-height: 20px;
    flex-grow: 1;
    background: var(--mud-palette-text-primary);
}

.new-design .run-integration-nested-steps .fab-row.readonly-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.new-design .run-integration-nested-steps .fab-row.readonly-step .vline {
    min-height: 40px;
}

/* A Loop/While step nested inside an included integration establishes its own stacking context
   (position:relative; z-index:1 — see .loop-while-step / .loop-while-item below). That's the SAME
   level as the read-only overlay (z-index:1), which sits later in the DOM and therefore paints on
   top, trapping the breakpoint fab-rows inside the loop below it — their z-index:2 only counts
   within the loop's own context, so it can't escape above the overlay and the breakpoints can't be
   toggled. Lift the loop containers above the overlay so their nested markers stay clickable, the
   same way .if-step (already z-index:2) and the non-loop nested fab-rows already do. */
.new-design .run-integration-nested-steps .loop-while-step,
.new-design .run-integration-nested-steps .loop-while-item {
    z-index: 2;
}

/* Step number badge for HTTP steps with logo */
.new-design .step-number-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    z-index: 1;
}

.new-design .step-logo-container {
    position: relative;
    display: inline-flex;
    width: 36px;
    height: 36px;
}

.new-design .step-logo {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 6px;
    object-fit: contain !important;
}

.fab-row {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center; /* center horizontally inside parent */
}

    .fab-row.If-step.before {
        margin-left: 4px;
    }

.vline {
    width: 2px;
    flex-grow: 1; /* stretch line to fill available space */
    min-height: 20px; /* ensures it�s always visible */
    background: var(--mud-palette-text-primary);
}
/* ===== Layout Containers ===== */
.page-container {
    display: flex;
    width: 100%;
    transition: all 0.3s ease-in-out;
    overflow-x: auto;
    overflow-y: hidden;
}

.steps-container {
    flex-grow: 0;
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

    .steps-container.debugger-open {
        width: 65%;
        max-width: 65%;
        /*margin-top: 20px;*/
    }

/*.debugger-panel {
    width: 35%;
    flex-shrink: 0;
}*/

/* ===== Step Columns ===== */
.new-design .step-column-container {
    display: flex;
    flex-grow: 1;
    transition: width 0.3s ease-in-out;
}
.steps-container .step-column-container {
    overflow-x: scroll;
    justify-content: space-evenly !important;
}

/* ===== Step Blocks ===== */
.new-design .step,
.new-design .step-with-container,
.new-design .loop-while-step .step-with-container,
.new-design .loop-while-item .step-with-container,
.new-design .if-step .step-with-container,
.new-design .if-step-item .step-with-container {
    position: relative;
    margin: 0 auto;
    width: fit-content;
    max-width: none;
    overflow: visible;
    min-width: 300px; /*20250528*/
    z-index: 5;
}

/* Containers that are not themselves step cards still need an outline. */
.new-design .step-with-container:not(.step-card) {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.new-design .step {
    border-radius: 12px;
    border-width: 10px;
}

.new-design .loop-while-step .step-with-container,
.new-design .loop-while-item .step-with-container {
    min-width: 400px;
    z-index: 4;
}

.new-design .if-step .step-with-container {
    min-width: 800px;
}

.new-design .if-step .step-with-container {
    z-index: 2;
}

    .new-design .if-step .step-with-container.step-single {
        z-index: 5 !important;
    }



.new-design .if-step-item .step-with-container {
    min-width: 250px;
    /*z-index: 2;*/
}

/*.debugger-open .new-design .if-step-item .step-with-container {
    min-width: 600px;
}*/

/* If/Loop containers tint their neutral edges only. Setting `border-color`
   outright would take the left edge with it and cancel the .step-type-* accent,
   which is the one thing telling you what kind of step you are looking at. */
.new-design .step-with-container.if-nested {
    border-top-color: var(--mud-palette-lines-default);
    border-right-color: var(--mud-palette-lines-default);
    border-bottom-color: var(--mud-palette-lines-default);
    background: transparent;
}

.new-design .step-with-container.loop-nested {
    border-top-color: rgba(var(--mud-palette-warning-rgb), 0.45);
    border-right-color: rgba(var(--mud-palette-warning-rgb), 0.45);
    border-bottom-color: rgba(var(--mud-palette-warning-rgb), 0.45);
    background: transparent;
}

/* ===== Step Theming (Light/Dark) ===== */
.step-theme-dark {
    /*background-color: #27272f;*/
}

.step-theme-light {
    /* Was a hardcoded #f7f8f9, which is now almost exactly the canvas colour —
       the cards disappeared into the background. Paper, like every other card. */
    background-color: var(--mud-palette-surface);
}

/* Alternate coloring for child items */
.if-step-item .step-theme-dark,
.loop-while-item .step-theme-dark {
    /*background-color: #373740;*/
}

.if-step-item .step-theme-light,
.loop-while-item .step-theme-light {
    /*background-color: #fff;*/
}

/* ===== Row and Container Styling ===== */
.new-design .transform-row {
    /*margin-top: 25px;*/
}

.new-design .step-container,
.new-design .if-step-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0px;
    align-items: stretch;
    overflow: visible;
    position: relative;
    width: auto;
    max-width: none;
}

.new-design .step-with-container {
    margin-left: auto;
    margin-right: auto;
}



.new-design .step-container.error-flow {
    display: block;
}
/* ===== Treeview styling ===== */
.new-design .mud-treeview-item-label {
    min-width: 230px;
    display: flex;
    flex-grow: 1;
}

.new-design .mud-treeview-group {
    margin: 0 auto;
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
}

/* ===== Loop/While and If Step Item Borders ===== */
.new-design .if-step {
    z-index: 2;
}

    .new-design .if-step .if-step-item {
        border-top: none; /* remove real border */
        border-left: none;
        border-right: none;
        border-bottom: none;
        position: relative;
    }
        .new-design .if-step .if-step-item.left {
            background: linear-gradient( to right, transparent 0 calc(50% - 1px), var(--mud-palette-text-primary) calc(50% - 1px) 100% ) top no-repeat;
            background-size: 100% 2px; /* thickness of "border" */
        }

        .new-design .if-step .if-step-item.right {
            background: linear-gradient( to right, var(--mud-palette-text-primary) 0 calc(50% - 1px), transparent calc(50% - 1px) 100% ) top no-repeat;
            background-size: 100% 2px; /* thickness of "border" */
        }

        .new-design .if-step .if-step-item.middle {
            background: linear-gradient( to right, var(--mud-palette-text-primary) 0 100% ) top no-repeat;
            background-size: 100% 2px; /* full horizontal line */
        }

        .new-design .if-step .if-step-item.middle::after {
            content: "";
            position: absolute;
            left: calc(50% - 2px);
            top: 0;
            width: 2px;
            height: 40px;
            background: var(--mud-palette-text-primary);
            pointer-events: none;
            z-index: 1;
        }

        .new-design .if-step .if-step-item.left::after {
            content: "";
            position: absolute;
            left: calc(50% - 2px);
            top: 0; /* start just below the element */
            width: 2px; /* line thickness */
            height: 40px; /* line length */
            background: var(--mud-palette-text-primary);
            pointer-events: none; /* ensure it doesn't block clicks */
            z-index: 1; /* optional: draw above neighbors */
        }
        .new-design .if-step .if-step-item.right::after {
            content: "";
            position: absolute;
            left: calc(50% - 2px);
            top: 0; /* start just below the element */
            width: 2px; /* line thickness */
            height: 40px; /* line length */
            background: var(--mud-palette-text-primary);
            pointer-events: none; /* ensure it doesn't block clicks */
            z-index: 1; /* optional: draw above neighbors */
        }
.new-design .loop-while-step::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -1px;
    top: 0px; /* extend above to meet the + button */
    width: 2px;
    height: 80px; /* line from + button down into header */
    background: var(--mud-palette-text-primary);
    pointer-events: none;
    z-index: 99;
}

.new-design .if-step::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -1px;
    top: 0px; /* extend above to meet the + button */
    width: 2px;
    height: 70px; /* line from + button down into header */
    background: var(--mud-palette-text-primary);
    pointer-events: none;
    z-index: 99;
}


.new-design .if-step-item {
    flex-grow: 1;
    flex-basis: auto;
    min-width: 250px;
    width: auto;
    overflow: visible;
    position: relative;
}

.new-design .if-step-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers children horizontally */
}

.new-design .if-step-item {
    padding: 0 20px;
}

.new-design .loop-while-item {
    flex-grow: 1;
    flex-basis: auto;
    min-width: 300px;
    width: 50%;
    border-radius: 30px;
    /*border: 1px solid var(--mud-palette-lines-default);*/
    padding-left: 14px;
    padding-right: 14px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.new-design .error-flow .loop-while-item {
    width: 100%;
}

.new-design .loop-while-step {
    z-index: 1;
    position: relative;
}

/* ===== Utility overrides for specific cases ===== */
/*.steps-container.debugger-open .if-step-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.steps-container.debugger-open .if-step-item {
    width: 100%;
    max-width: 100%;
}

    .steps-container.debugger-open .if-step-item .step-with-container {
        margin-top: 5px;
    }*/

.steps-container.debugger-open .step-column-container {
    overflow-x: scroll;
    justify-content: space-evenly !important;
    
}

/* ===== Hide Scrollbars (optional) ===== */
/* Remove if you want scrollbars to show */
.page-container,
.steps-container {
    scrollbar-width: none;
}

    .page-container::-webkit-scrollbar,
    .steps-container::-webkit-scrollbar {
        display: none;
    }


/* NEW DESIGN ********************************************************************************************************************/

.mud-treeview-group {
    overflow: visible !important;
}
/*.if-step-container {
    overflow: visible !important;
    z-index: 1;
}*/
/*IF STEP, END*/

.action-buttons {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    transform: translateY(-40%);
}

.new-design .settings-button {
    display: none;
}

/*Step-Disabled-DarkMode*/
.disabled-step-dark .mud-typography-h6 {
    opacity: 0.3;
}

.disabled-step-dark .mud-typography-body1 {
    opacity: 0.3;
}

.disabled-step-dark .mud-typography-body2 {
    opacity: 0.3;
}

.disabled-step-dark .avatar {
    opacity: 0.3;
}

.disabled-step-dark .d-flex {
    opacity: 0.3;
}

.disabled-step-dark .mud-chip-color-warning {
    opacity: 0.4;
}

.disabled-step-dark .mud-icon-root {
    opacity: 0.3;
}

.new-design .disabled-step-dark {
    border-color: #59548f;
}

    .new-design .disabled-step-dark .step-with-container {
        border-color: #59548f;
    }


/*Step-Disabled-LightMode*/
.disabled-step-light .mud-typography-h6 {
    opacity: 0.3;
}

.disabled-step-light .mud-typography-body1 {
    opacity: 0.3;
}

.disabled-step-light .mud-typography-body2 {
    opacity: 0.3;
}

.disabled-step-light .avatar {
    opacity: 0.3;
}

.disabled-step-light .d-flex {
    opacity: 0.3;
}

.disabled-step-light .mud-icon-root {
    opacity: 0.4;
}

.disabled-step-light .mud-chip-color-warning {
    opacity: 0.4;
}

.new-design .disabled-step-light {
    border-color: #c1bcf3;
}

    .new-design .disabled-step-light .step-with-container {
        border-color: #c1bcf3;
    }

/*ZOOM-OUT-function*/
.zoom-container {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
    min-width: fit-content;
    margin: 0px;
}


.new-design .mud-card-content {
    padding: 4px !important;
}

/*NEW MENU TEST*/
/* Parent Menu */
.menu-open {
    z-index: auto !important;
}

.if-step-item:not(.menu-open) {
    z-index: 0 !important;
}

.if-step-container:not(.menu-open) {
    z-index: 0 !important;
}

.menu-open .if-step-item {
    z-index: auto !important;
}

.menu-open .if-step-container {
    z-index: auto !important;
}


.toolbox-menu {
    position: absolute !important;
    border: 2px solid;
    border-radius: 8px;
    z-index: 999999 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    padding: 14px;
    pointer-events: auto !important;
}

.system-logo {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    margin-right: 12px;
}

.system-navlink .mud-nav-link-text {
    margin: 0 auto;
}
/* API Menu */
.api-details-menu {
    position: relative;
    border: 2px solid;
    border-radius: 8px;
    left: 60%;
    top: 44.8%;
    z-index: 9999 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.system-container {
    max-height: 160px; /* Adjust this to fit exactly 4 items */
    overflow-y: auto; /* Enables vertical scrolling */
}


html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif!important;*/
    /*font-family: Roboto, Helvetica, Arial, "sans-serif";*/
    height: 100%;
}

.full-height {
    height: 100%;
}

code {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 0.8em;
    /*font-family: Roboto, Helvetica, Arial, "sans-serif";*/
}

/*h1:focus {
    outline: none;
}*/
.login-left {
    color: #c1c1c1;
    background-color: #27272fff !important;
    padding: 50px;
    height: 100vh;
    /*border-left: 2px solid #1ec8a5ff;*/
    /*border-start-start-radius: 10px;
    border-start-end-radius: 10px;*/
}

.login-right {
    color: #1ec8a5ff;
    background-color: #fff;
    padding: 50px;
    /*border-radius:15px;*/
    /*height: 100vh;*/
    border-left: 30px solid #1ec8a5ff;
    border-radius: 6px;
}
/*.form-control {
    background-color: #27272fff;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #1ec8a5ff !important;
    color: #fff !important;
}*/

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #1ec8a5ff !important;
    border-color: #1ec8a5ff !important;
}

a.text-dark {
    color: #1ec8a5ff !important;
}

.body-bg {
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-color: #32333dff;*/
    /*color:white;
    background-color: rgb(21, 21, 33);*/
    overflow: hidden; /* Hide scrollbars */
}

a, .btn-link {
    /*color: #1ec8a5ff !important;*/
    text-decoration: none;
}

@media (max-width: 1180px) {
    html, body {
        overflow-x: hidden;
        width: 100vw !important;
    }

    .step-with-container {
        width: auto !important;
        max-width: 500px !important;
    }

    .if-step .step-with-container {
        min-width: 800px !important;
        max-width: 1000px !important;
        width: fit-content;
    }

    .loop-while-step .step-with-container {
        min-width: 600px !important;
        max-width: 1000px !important;
        width: fit-content;
    }

    .if-step-item .step-with-container {
        min-width: 250px !important;
        max-width: 100% !important;
    }

    .loop-while-item .step-with-container {
        min-width: 250px !important;
        max-width: 100% !important;
    }

    .if-step-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        align-items: stretch;
    }

    .step-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        align-items: stretch;
    }
}

@media (max-width: 960px) {
    .help-btn {
        display: none;
    }

    .mud-breadcrumbs {
        font-size: 0.8rem !important;
    }

    .step-container {
        flex-direction: column;
    }

    .if-step-container {
        flex-direction: column;
    }

    .loop-while-step .step-with-container {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .if-step .step-with-container {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .loop-while-item {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .if-step-item {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 530px) {
    html, body {
        overflow-x: hidden; /* Prevents horizontal scrolling */
        width: 100vw !important;
    }

    .step-with-container {
        min-width: auto !important;
        max-width: 400px !important;
        flex-grow: 1;
    }

    .if-step-container {
        flex-direction: column;
        gap: 5px; /* Add more space between steps for better readability */
    }

    .step-container {
        flex-direction: column;
        gap: 5px; /* Add more space between steps for better readability */
    }

    .loop-while-step .step-with-container {
        min-width: auto !important;
        max-width: 400px !important;
        padding: 5px; /* Reduce padding if needed */
    }

    .if-step .step-with-container {
        min-width: auto !important;
        max-width: 400px !important;
        padding: 5px; /* Reduce padding if needed */
    }

    .if-step-item {
        min-width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .loop-while-item {
        min-width: 70% !important;
        max-width: 100% !important;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .mud-treeview-item-label {
        min-width: auto; /* Allow labels to shrink properly */
        font-size: 0.9rem; /* Reduce font size for better fit */
    }

    .mud-card-content {
        padding: 2px !important; /* Reduce padding for small screens */
    }
}

@media (max-width: 390px) {
    html, body {
        overflow-x: hidden; /* Prevents horizontal scrolling */
        width: 100vw !important;
    }

    .step-with-container {
        min-width: 40% !important;
        max-width: 360px !important;
        margin: 0 auto;
    }

    .if-step-container {
        flex-direction: column;
        gap: 5px; /* Keeps spacing consistent */
    }

    .step-container {
        flex-direction: column;
        gap: 5px; /* Keeps spacing consistent */
    }

    .if-step .step-with-container {
        min-width: 40% !important;
        max-width: 360px !important;
        padding: 3px; /* Reduce padding for better fit */
        margin: 0 auto;
    }

    .loop-while-step .step-with-container {
        min-width: 40% !important;
        max-width: 360px !important;
        padding: 3px; /* Reduce padding for better fit */
        margin: 0 auto;
    }

    .if-step-item .loop-while-step {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .if-step-item {
        min-width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    .loop-while-item {
        min-width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    .mud-treeview-item-label {
        min-width: auto; /* Allows labels to shrink */
        font-size: 0.8rem; /* Adjusts font size for small screens */
    }

    .mud-card-content {
        padding: 1px !important; /* Reduces padding even further */
    }
}

/*.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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: 1000;
}

    #blazor-error-ui .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, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
*/