._colorBox_z04in_1 {
  min-height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &:hover,
  &._active_z04in_13 {
    width: 1.1em;
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px #000;
    z-index: var(--mantine-z-index-popover);
  }
}
/*
 * Autodesk's viewer CSS resets box-sizing to content-box for every element inside the viewer
 * container (.adsk-viewing-viewer *). Our React portals need border-box so Mantine layout works
 * correctly. A wrapper div with this class is applied by useViewerPortals around every portal node,
 * and the selector's extra class gives it higher specificity (0,2,0) than Autodesk's (0,1,0).
 */
.adsk-viewing-viewer .evolve-viewer-portal,
.adsk-viewing-viewer .evolve-viewer-portal * {
  box-sizing: border-box;
}

#forgeViewer {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #f0f8ff;
}

.forge-header {
  height: 32px;
  border-bottom: 1px solid var(--mantine-color-gray-3);
}

.forge-container {
  overflow: hidden;
  /*height: calc(100% - 32px);*/
  & .adsk-control .clickoff {
    max-width: 100%;
  }
  & .adsk-toolbar {
    z-index: 1;
  }
}

.autodesk-prev-page-btn .adsk-button-icon {
  transform: translateY(-1px) rotate(180deg) scale(0.75);
}

.autodesk-next-page-btn .adsk-button-icon {
  transform: scale(0.75);
}

.autodesk-page_num_btn {
  width: 96px !important;
  margin: 4px 0px !important;
  padding: 6px 0px !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.autodesk-page_num_btn:hover {
  color: white !important;
  border: 1px solid #292929 !important;
}

.autodesk-page_num_btn .adsk-button-icon {
  display: none;
}

.autodesk-page_num_btn .adsk-page-num-input {
  width: 42px;
  height: 26px;
  text-align: center;
  color: white;
  background-color: rgba(48, 48, 48, 1);
  border-radius: 4px;
  border: 1px solid #cccccc;
  appearance: textfield;
  -moz-appearance: textfield;
}

.adsk-page-num-input::-webkit-outer-spin-button,
.adsk-page-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.autodesk-page_num_btn .adsk-page-num-text {
  margin: 0 !important;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.15px;
}

.autodesk-btn-disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.autodesk-btn-disabled .adsk-button-icon {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Used to style toolbar buttons using custom SVG icons as the inner HTML. */
.custom-icon-toolbar-button {
    svg {
        height: 32px;
        width: 32px;
        position: absolute;
        left: 50%;
        /* Autodesk's button styling does some hard coding of its own. */
        top: calc(50% - 2px);
        transform: translate(-50%, -50%);
    }
}

/* PDF markup styles: */

/* The properties panel displayed when creating or editing markup. */
.properties-panel {
    --input-border-radius: 4px;

    --input-bg: white;
    --input-color: black;
    --input-color-secondary: rgba(0, 0, 0, 0.8);
    --input-icon-color: rgba(0, 0, 0, 0.6);
    --input-border-color: transparent;
    --color-input-border-color: rgba(0, 0, 0, 0.6);
    --button-hover-bg: rgba(235, 235, 235);
    --button-active-bg: rgba(225, 225, 225);

    line-height: 1;

    /** Autodesk's panel container. */
    .docking-panel-scroll {
        background-color: rgba(40, 40, 40, 0.95);
        backdrop-filter: blur(2px);
    }

    /** Top-level content container. */
    .content-container {
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Wraps a field and its label. */
    .field-wrapper {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Wraps a collection of property fields. */
    .field-group {
        display: flex;
        flex-direction: column;
        gap: 12px;

        padding: 14px 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--input-border-radius);
    }

    p, h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-weight: unset;
    }

    h2 {
        font-size: 16px;
    }

    input[type="color"] {
        width: 20px;
        height: 20px;
        border-radius: var(--input-border-radius);
        padding: 0;
        cursor: pointer;

        /* Reset browser default styles. */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    /* Reset browser default styles. */
    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
        border: none;
    }

    /* Consistent styles for inputs except for color inputs. */
    input:not([type="color"]), select {
        height: 16px;
        padding: 8px 12px;
        border-radius: var(--input-border-radius);
        line-height: normal;
        background-color: var(--input-bg);
        color: var(--input-color);
    }

    /* Remove spinners from number inputs. */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

    .select-wrapper {
        position: relative;

        select {
            cursor: pointer;
            width: stretch;
            padding-right: 32px; /* Make space for the dropdown arrow icon. */

            /* Reset browser default styles. */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 1px solid var(--input-border-color);
        }

        .adsk-icon-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            pointer-events: none;
            color: var(--input-icon-color);
        }
    }

    /* Wraps a color input and its display value. */
    .color-input-container {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: var(--input-bg);
        color: var(--input-color);
        padding: 6px 12px 6px 6px;
        border-radius: var(--input-border-radius);
        cursor: pointer;
        min-width: 85px;
    }

    /* Wraps just the color input. */
    .color-input-wrapper {
        display: flex;
        box-shadow: 0 0 0 1px var(--color-input-border-color);
        border-radius: var(--input-border-radius);
    }

    .number-input-wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        cursor: text;
        background-color: var(--input-bg);
        border-radius: var(--input-border-radius);
        border: 1px solid var(--input-border-color);
        align-items: baseline;

        input {
            min-width: 1ch;
            /* Shrink the input to fit its value so the UOM label trails right behind it. */
            field-sizing: content;
            padding-right: 0;
            background-color: transparent;
        }

        /* The unit of measure for the number input (e.g. "pt" or "%"). */
        .number-input-uom {
            display: flex;
            align-items: center;
            padding: 0 6px 0 2px;
            color: var(--input-color-secondary);
            font-size: 12px;
            white-space: nowrap;
            line-height: normal;
        }

        .number-input-spinner-buttons {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 2px 2px 2px 0;
            align-self: stretch;

            .spinner-button {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                width: 20px;
                padding: 0;
                border-radius: var(--input-border-radius);
                background-color: transparent;
                color: var(--input-icon-color);
                border: none;
                cursor: pointer;
                user-select: none;

                .adsk-icon-arrow {
                    font-size: 10px;
                    display: flex;
                    justify-content: center;
                    pointer-events: none;
                }

                /* Increment arrow button. */
                &:first-child .adsk-icon-arrow {
                    transform: rotate(-90deg);
                }

                /* Decrement arrow button. */
                &:last-child .adsk-icon-arrow {
                    transform: rotate(90deg);
                }

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

                &:active {
                    background: var(--button-active-bg);
                }
            }
        }
    }

    /* Used to group related color and opacity fields. */
    .color-and-opacity-group {
        display: flex;
        align-items: center;
        gap: 2px;

        > :first-child {
            width: 100%;
        }

        .color-input-container {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: 1px solid var(--input-border-color);
        }

        .opacity-input {
            width: 80px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border: 1px solid var(--input-border-color);

            input {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    .adsk-button {
        font-size: 16px;
        margin: 0;
        padding: 0;
        background-color: var(--input-bg);
        color: var(--input-color);
        border: 1px solid var(--input-border-color);

        &.active, &:focus {
            box-shadow: unset !important;
        }
    }

    .button-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.forge-container {
    /* The main toolbar while editing markup. */
    & .markup-toolbar {
        z-index: 20;
    }

    & .adsk-toolbar {
        /* Override styles for Autodesk's label buttons. */
        .adsk-label-button {
            font-weight: 700;
            height: 100%;
        }
        .adsk-label-button.disabled {
            pointer-events: none;
            opacity: 0.7;

            label {
                background: var(--mantine-color-gray-7);
            }
        }
        .adsk-control-group .adsk-label-button {
            margin: 0 6px;
            padding: 7px 0 6px 0;
        }
        .adsk-control-group.toolbar-vertical-group .adsk-label-button {
            margin: 6px 0;
            padding: 0 6px;
        }

        /* If a label button follows another label button, don't add a left margin to keep the spacing even. */
        .adsk-control-group .adsk-label-button + .adsk-label-button {
            margin: 0 6px 0 0;
        }
        .adsk-control-group.toolbar-vertical-group .adsk-label-button + .adsk-label-button {
            margin: 0 0 6px 0;
        }

        .label-button-outline {
            label {
                background-color: unset;
                border: 1px solid #06A7DF;
                padding: 7px 10px;
            }

            &:hover {
                label {
                    background-color: rgba(6, 167, 223, 0.2);
                }
            }
        }

        .tooltip-label-button {
            /* Workaround for Autodesk's popover width calculation. */
            width: calc(100% - 14px);

            label {
                background-color: unset;
                border: 1px solid transparent;
                padding: 7px 10px;
                text-align: start;
                white-space: nowrap;
            }

            &:hover {
                label {
                    background-color: unset;
                    border: 1px solid #06A7DF;
                    color: #06A7DF;
                }
            }
        }
    }
}

/* The hovering toolbar shown when selecting markup. */
.markup-selection-toolbar {
    position: absolute;
    display: none;
    align-items: center;
    gap: 2px;
    /* Original background color from the mockup is #D9FAFB. */
    background: rgba(217, 250, 251, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
    /* The properties panel z-index is 20 by default. */
    z-index: 19;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(42, 55, 55, 0.45);
    user-select: none;
    backdrop-filter: blur(2px);

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: transparent;
        border: none;
        border-radius: 3px;
        color: #1C1B1F;
        cursor: pointer;
        font-size: 13px;
        flex-shrink: 0;

        &:hover {
            background: #B9EBEC;
        }
    }

    button.delete {
        color: #FA5252;

        &:hover {
            background: #FFCCCC;
        }
    }

    .separator {
        width: 1px;
        height: 12px;
        background: #7A7685;
        margin: 0 3px;
        flex-shrink: 0;
    }
}
.conduitBendSelectorPanel {
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  max-height: 700px;
}

.spoolSelectorPanel {
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  max-height: 700px;
}
.editable-cell-renderer {
  border: 1px solid transparent;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;

  .editable-clear-button {
    display: none;
  }

  &.editable {
    cursor: pointer;

    &:hover,
    &.active {
      border: 1px solid var(--mantine-color-gray-6);
      background-color: #fcfcfc !important;

      .editable-clear-button {
        display: inline-flex;
      }
    }
  }
}

.empty-background {
  background-color: transparent !important;
}
.detail-page-item-thin {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.detail-page-right-align {
  flex-direction: row-reverse;
}

.edit-description-button {
  transition: all 0.2s ease;
}

.editable-work-order-item {
  cursor: pointer;
  background-color: var(--mantine-color-gray-0) !important;

  &:hover {
    background-color: var(--mantine-color-gray-2) !important;
  }
}

.transparent-editable-cell {
  background-color: transparent !important;
}
@media print {
    /* Remove app content and modal siblings from layout to prevent blank pages.
       display: none is needed so they take up no page space; visibility: hidden alone still occupies layout. */
    body:has(._qrPrintContent_1rrmc_4) > *:not(:has(._qrPrintContent_1rrmc_4)),
    
    *[data-portal]:has(._qrPrintContent_1rrmc_4) > *:not(:has(._qrPrintContent_1rrmc_4)),
    
    .mantine-Modal-header,
    
    ._workOrderTraveler_1rrmc_10 > *:not(._qrPrintContent_1rrmc_4) {
        display: none !important;
        visibility: hidden;
    }

    /* Hide every element that doesn't contain .qrPrintContent. */
    body:has(._qrPrintContent_1rrmc_4) *:not(:has(._qrPrintContent_1rrmc_4)) {
        visibility: hidden;
    }

    /* Ensure the .qrPrintContent is visible */
    ._qrPrintContent_1rrmc_4,
    ._qrPrintContent_1rrmc_4 * {
        visibility: visible !important;
    }

    /* Modal.Inner is position: fixed by default, which causes it to repeat on every
       printed page. Reset it to static so print layout uses normal document flow. */
    .mantine-Modal-inner:has(._qrPrintContent_1rrmc_4) {
        position: static !important;
    }

    /* Ensure that all other modal containers have `block` display to
       let the browser's table paging algorithm work correctly. */
    .mantine-Modal-content:has(._qrPrintContent_1rrmc_4),
    .mantine-Modal-body:has(._qrPrintContent_1rrmc_4),
    .mantine-ScrollArea-root:has(._qrPrintContent_1rrmc_4),
    .mantine-ScrollArea-viewport:has(._qrPrintContent_1rrmc_4),
    ._tableContainer_1rrmc_38,
    ._workOrderTraveler_1rrmc_10 {
        display: block !important;
    }

    /* Remove overflow/height/spacing constraints so the table renders fully across pages. */
    .mantine-Modal-content:has(._qrPrintContent_1rrmc_4),
    .mantine-Modal-inner:has(._qrPrintContent_1rrmc_4),
    .mantine-Modal-body:has(._qrPrintContent_1rrmc_4),
    .mantine-ScrollArea-root:has(._qrPrintContent_1rrmc_4),
    .mantine-ScrollArea-viewport:has(._qrPrintContent_1rrmc_4),
    ._tableContainer_1rrmc_38,
    ._tableScroll_1rrmc_50,
    ._workOrderTraveler_1rrmc_10 {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Prevent data rows from being split across page boundaries. */
    ._qrPrintContent_1rrmc_4 tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    ._qrPrintContent_1rrmc_4 th {
        background: transparent !important;
    }

    /* Redraw the full border on every page fragment rather than slicing it once
       across the whole element. This makes the border reset on each page like the thead does. */
    ._tableContainer_1rrmc_38 {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    @page {
        /* Get rid of the browser default headers. */
        @top-left {content: "";}
        @top-center {content: "";}
        @top-right {content: "";}
        margin-bottom: 1.5cm; /* creates physical space for the margin box */
        /* Add our own logo at the bottom */
        @bottom-left {
            content: url('/assets/images/image-src/e-volve-logo.svg');
            color: black;
        }
        /* Add our page counter */
        @bottom-right {
            content: counter(page) " of " counter(pages);
            font-family: IBM Plex Sans, sans-serif;
            color: var(--mantine-color-gray-4);
        }
    }
}

/* qrPrintContent fills remaining space in the Stack (after ModalButtons) */
._qrPrintContent_1rrmc_4 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Outer container: the visible rounded border.
   overflow: clip (not hidden) clips content to the border-radius
   without becoming a scroll container, so sticky positioning still works. */
._tableContainer_1rrmc_38 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--mantine-color-gray-3);
    border-radius: var(--mantine-radius-sm);
    overflow: clip;
}

/* Inner scroll container — the sticky thead anchors to this element. */
._tableScroll_1rrmc_50 {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Remove the row divider from the tfoot so the logo row has no top border. */
._mainTable_1rrmc_127 tfoot tr td {
    border-top: none;
}