@import "colors.css";
@import "text.css";
@import "variables.css";

.login-card {
    display: flex;
    width: 30rem;
    padding: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 2rem;

    border-radius: 0.5rem;
    border: 1px solid var(--Grey-300);
}

.login-card--scrollable {
    max-height: 60vh;
}

.text-input {
    border-radius: 0.25rem;
    border: 1px solid var(--Border-colour-border---default, #AEAEAE);
    background: var(--Field-colour-Field---1, #FFF);
    padding: var(--Padding-Padding-S, .5rem) var(--Padding-Padding-M, .75rem);
    width: 100%
}

.text-input:focus {
    border: 1px solid var(--Border-colour-border---interactive, #15A78E);
    outline: none;
}

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

.page {
    min-height: 100svh;
    min-width: 100svh;
    margin: 0;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.gap-4p { gap: 0.25rem; }
.gap-8p { gap: 0.5rem; }
.gap-16p { gap: 1rem; }
.gap-32p { gap: 2rem; }

.row-8p {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.divider {
    height: 1px;
    background: var(--Divider-colour-divider---00, #E2E2E2);
    align-self: stretch;
    width: 100%;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.btn--primary {
    padding: var(--padding-md) var(--padding-lg);
    border: 1px solid var(--Border-colour-border---buttonprimary, #15A78E);
    background: var(--Button-colour-Button---primary, #15A78E);
    color: var(--Text-colour-text-on-buttonprimary, #FFF);
}

.btn--primary:hover {
    background: var(--Button-colour-Button---primary---hover, #15A78E);
}

.btn--secondary {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttonsecondary, #15a78e);
    background: var(--Button-colour-Button---secondary, #fff);
    color: var(--Text-colour-text-on-buttonsecondary, #15a78e);
}

.btn--secondary:hover {
    background: var(--Button-colour-Button---secondary---hover, #d0ede8);
}

.btn--tertiary {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-on-buttontertiary, #0b0b0b);
}

.btn--tertiary:hover {
    background: var(--Button-colour-Button---tertiary---hover, #e2e2e2);
}

.btn--destructive {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttondestructive, #ff4040);
    background: var(--Button-colour-Button-destructive, #fff);
    color: var(--Text-colour-text-on-buttondestructive, #ff4040);
}

.btn--destructive:hover {
    background: var(--Button-colour-Button-destructive-hover, #cc3333);
    color: var(--Text-colour-text-on-buttonprimary, #fff);
}

.btn--disabled {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-on-buttondisbled, #AEAEAE);
}

.btn--stretch {
    align-self: stretch;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
}

.check-box {
    width: 1.125rem;
    height: 1.125rem;
}

.modal-backing {
    z-index: 1;
    height: 100svh;
    width: 100vw;

    opacity: 0.4;
    background: var(--black, #000);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    z-index: 1;
    display: flex;
    width: 37.5rem;
    padding: var(--Gap-Gap-XL, 1rem);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Gap-Gap-XL, 1rem);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Field-colour-Field---1, #FFF);

    position: fixed; 
    opacity: 1;
}

.modal-button-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
}

.no-margin {
    margin-block-start: 0;
    margin-block-end: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--Font-Brand, Inter), sans-serif;
}

body {
    background: var(--Background-colour-background, #fff);
    color: var(--Text-colour-text-primary, #0B0B0B);
    overflow: hidden;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100svh;
    background: var(--Background-colour-background, #fff);
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 3rem;
    padding: var(--Padding-Padding-M, 0.75rem) var(--Padding-Padding-L, 1rem);
    background: var(--Background-colour-background, #fff);
    flex-shrink: 0;
}

.header-logo {
    height: 1.5rem;
    width: auto;
}

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-L, 1rem);
    gap: var(--Gap-Gap-XXL, 1.5rem);
    background: var(--Background-colour-background, #fff);
    flex-shrink: 0;
}

.footer-item {
    font-size: var(--Body-Small-Size, 0.75rem);
    font-weight: var(--Body-Small-Weight, 400);
    line-height: var(--Body-Small-Height, 1rem);
    letter-spacing: var(--Body-Small-Spacing, 0.0125rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.horizontal-divider {
    height: 1px;
    width: 100%;
    background: var(--Divider-colour-divider---00, #E2E2E2);
    flex-shrink: 0;
}

.main-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    background: var(--Background-colour-background, #fff);
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 5rem;
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--Padding-Padding-M, 0.75rem);
    gap: var(--Gap-Gap-L, 0.5rem);
    text-decoration: none;
    color: var(--Icon-colour-Icon-secondary, #AEAEAE);
    transition: background-color 0.15s ease;
}

.info-button {
    width: 1.25rem;
    height: 1.25rem;
    fill: #19191B;

    border: none;
    background-color: var(--Background-colour-background, #fff);
}

.sidebar-item:hover {
    background: var(--Background-colour-hover, #E2E2E2);
    color: var(--Text-colour-text-active, #15A78E);
}

.sidebar-item.active {
    color: var(--Text-colour-text-active, #15A78E);
}

.sidebar-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--Icon-colour-Icon-secondary, #AEAEAE);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.sidebar-item:hover .sidebar-icon {
    background-color: var(--Icon-colour-icon-active-hover, #15A78E);
}

.sidebar-item.active .sidebar-icon {
    background-color: var(--Icon-colour-icon-active, #15A78E);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: sticky;
    bottom: 0;
}

.sidebar-divider {
    width: 1px;
    background: var(--Divider-colour-divider---00, #E2E2E2);
    flex-shrink: 0;
}

.content-area {
    flex: 1;
    padding: var(--Padding-Padding-L, 1rem);
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--Gap-Gap-L, 0.5rem);
    flex: 1;
    min-height: 0;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
}

.page-title h1 {
    font-size: var(--Title-Large-Size, 1.375rem);
    font-weight: 500;
    line-height: var(--Title-Large-Height, 1.75rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.page-title__leading {
    display: flex;
    align-items: center;
    gap: var(--Gap-Gap-XL, 1rem);
}

.section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 3rem;
    padding: 0.25rem 0.5rem;
    background: var(--Background-colour-title, #f4f4f4);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.section-title {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.section-count {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
}

.empty-state-text {
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-secondary, #aeaeae);
    margin: 0;
    text-align: center;
}

.list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    min-height: 5.5rem;
}

/* The printers page scrolls as one continuous view instead of per-status lists. */
.page-container--printers {
    flex: none;
}

.page-container--printers .list-container {
    overflow-y: visible;
}

.page-container--printers .column-headers {
    position: static;
}

.column-headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem;
    gap: var(--Gap-Gap-L, 0.5rem);
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--Background-colour-background, #fff);
}

.column-header-text {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 3rem;
    padding: 0.25rem 0.5rem;
    gap: var(--Gap-Gap-L, 0.5rem);
    overflow: hidden;
    flex-shrink: 0;
}

.queued-job-grid {
    display: grid;
    grid-template-columns: 2.5rem minmax(12rem, 1.5fr) minmax(8rem, 1fr) minmax(9rem, 1fr) 2.5rem;
}

#queued-list {
    overflow: visible;
}

.queued-job-row {
    overflow: visible;
}

#printing-list .list-row:nth-child(odd),
#queued-list .queued-job-row:nth-child(odd) {
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

#printing-list .list-row:nth-child(even),
#queued-list .queued-job-row:nth-child(even) {
    background: var(--Background-colour-background, #fff);
}

#printing-list > .column-headers,
#queued-list > .column-headers {
    position: static;
    background-color: var(--Background-colour-background---secondary, #f4f4f4);
}

.queue-section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--Divider-colour-divider---00, #E2E2E2);
    border-radius: 0;
    background: var(--Background-colour-background, #fff);
}

.queue-section-header + .list-container,
.queue-section-header + .empty-state {
    margin-top: var(--Gap-Gap-L, 0.5rem);
}

.queue-job-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.queue-job-actions__toggle {
    width: 2.5rem;
    flex: 0 0 2.5rem;
    border-color: var(--Border-colour-border---buttonsecondary, #15a78e);
    opacity: 0;
    pointer-events: none;
}

.queue-job-actions__toggle img {
    display: block;
    width: 0.25rem;
    height: 1rem;
}

.queued-job-row:hover .queue-job-actions__toggle,
.queued-job-row:focus-within .queue-job-actions__toggle {
    opacity: 1;
    pointer-events: auto;
}

.queue-job-actions__menu {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(100% + 0.25rem);
    width: 9.875rem;
    padding-block: var(--Padding-Padding-XS, 0.25rem);
    overflow: hidden;
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Field-colour-Field---1, #fff);
}

.queue-job-actions__menu button {
    display: block;
    width: 100%;
    min-height: 1.75rem;
    padding: var(--Padding-Padding-XS, 0.25rem) var(--Padding-Padding-S, 0.5rem);
    border: 0;
    background: transparent;
    color: var(--Text-colour-text-primary, #0b0b0b);
    cursor: pointer;
    font: inherit;
    font-size: var(--Body-Medium-Size, 0.875rem);
    line-height: var(--Body-Medium-Height, 1.25rem);
    text-align: left;
}

.queue-job-actions__menu button:hover,
.queue-job-actions__menu button:focus-visible {
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

@media (hover: none) {
    .queue-job-actions__toggle {
        opacity: 1;
        pointer-events: auto;
    }
}

.column-index {
    width: 2.5rem;
    flex-shrink: 0;
}

.column-print,
.column-printer,
.column-progress {
    flex: 1;
    min-width: 0;
}

.column-actions {
    width: 6.5rem;
    flex-shrink: 0;
}

.column-empty {
    width: 2.5rem;
    flex-shrink: 0;
}

.column-name {
    flex: 1;
    min-width: 0;
}

.column-status {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--Gap-Gap-M, 0.25rem)
}

.column-temp {
    flex: 1;
    min-width: 0;
}

.column-material {
    flex: 1;
    min-width: 0;
}

.column-print-job {
    flex: 2;
    min-width: 0;
}

.column-actions-wide {
    width: 11.5rem;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.cell-index {
    width: 2.5rem;
    flex-shrink: 0;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.cell-content {
    flex: 1;
    min-width: 0;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-content-fixed {
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-content-fixed.text-placeholder {
    color: var(--Text-colour-text-secondary, #aeaeae);
}

.cell-actions {
    width: 6.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.cell-actions-wide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--Padding-Padding-XS, 0.25rem) var(--Padding-Padding-S, 0.5rem);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    font-size: var(--Label-Medium-Size, 0.75rem);
    font-weight: var(--Label-Medium-Weight, 500);
    line-height: var(--Label-Medium-Height, 1rem);
    text-transform: capitalize;
}

.status-printing {
    background: var(--Support-colour-Support-success, #15a78e);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-standby {
    background: var(--Support-colour-Support-ready, #1376bd);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-failed {
    background: var(--Support-colour-Support-destructive, #ff4040);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-cancelled {
    background: var(--Support-colour-Support-destructive, #ff4040);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}


.status-paused {
    background: var(--Grey-500, #aeaeae);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.status-support {
    background: var(--Brand-Foundation-Lavender-Indigo, #8b52fc);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-superuser {
    background: var(--Support-colour-Support-warning, #e8a817);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-developer {
    background: var(--Support-colour-Support-info, #0ea5e9);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-mosaic {
    background: var(--Grey-900, #0b0b0b);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    border-radius: 0.25rem;
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Icon-colour-icon-on-tertiarybutton, #0b0b0b);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.icon-button:hover {
    background: var(--Background-colour-hover, #e2e2e2);
}

.download-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentcolor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn--sm {
    height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.0094rem);
}

.btn--fluid {
    height: 2.5rem;
    width: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem);
}

.btn--lg {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
}

.indent {
    margin-left: 1.5rem;
}

.progress-text-row {
    display: flex;
    justify-content: space-between;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background-color: var(--Background-colour-title, #f4f4f4);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--Support-colour-Support-success, #15a78e);
}

.progress-bar-fill-error {
    height: 100%;
    background-color: var(--Support-colour-Support-destructive, #ff4040);
}

@media (max-width: 56.25rem) {
    .column-progress,
    .cell-progress,
    .column-temp,
    .column-material {
        display: none;
    }
}

@media (max-width: 43.75rem) {
    .column-printer,
    .cell-printer,
    .column-print-job {
        display: none;
    }
}

.error-page-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-Spacing-250, 2.5rem);
    min-height: 100svh;
}

.error-page-image {
    flex-shrink: 0;
}

.error-page-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 12rem;
}

.password-input-wrapper {
    position: relative;
    align-self: stretch;
}

.password-input-wrapper .text-input {
    padding-right: 2.5rem;
}

.password-toggle-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-XL, 1rem);
    align-items: flex-start;
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.account-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

dialog {
    width: 42.5625rem;
    padding: var(--Gap-Gap-XL, 1rem);
    border: none;
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Field-colour-Field---1, #fff);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-XL, 1rem);
}

.file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-job-details-modal {
    width: min(34.125rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
}

.print-job-details {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-L, 0.5rem);
    width: 100%;
    overflow: auto;
}

.print-job-detail-row {
    display: grid;
    grid-template-columns: 11.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--Gap-Gap-XL, 1rem);
    min-height: 2.5rem;
}

.print-job-detail-label {
    display: flex;
    height: 100%;
    min-height: 2.5rem;
    align-items: center;
    padding-inline: var(--Padding-Padding-XS, 0.25rem);
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.print-job-profile-detail {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.print-job-profile-line {
    display: block;
    min-height: 1.5rem;
}

.print-job-profile-line strong {
    font-weight: 700;
}

.print-job-gcode-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--Gap-Gap-L, 0.5rem);
    min-width: 0;
}

.print-job-gcode-detail .icon-button {
    flex: 0 0 2.5rem;
}

.print-job-detail-row[data-job-detail-row="profile"] {
    align-items: start;
}

.print-job-detail-row[data-job-detail-row="profile"] .print-job-detail-label {
    min-height: 100%;
}

@media (max-width: 32rem) {
    .print-job-detail-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--Gap-Gap-M, 0.25rem);
    }
}

.toast-container {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.toast {
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    animation: toastFadeIn 0.3s ease;
}

.toast.toast-fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

.toast-error {
    background: var(--Coral-Red-500, #ff4040);
}

.toast-success {
    background: var(--Silken-Jade-500, #15a78e);
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-1rem); }
}

.modifier-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    width: 100%;
}
.modifier-row input[type="text"] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--Stroke-colour-Stroke-primary, #D1D1D1);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.875rem;
}
.modifier-row .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Icon-colour-Icon-primary, #0B0B0B);
    font-size: 1.25rem;
    line-height: 1;
}
.modifier-row .remove-btn:hover {
    color: #E53935;
}

.queue-actions {
    display: flex;
    align-items: stretch;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.delete-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--Icon-colour-icon-destructive, #FF4040);
    mask-image: url("../images/icons/Trash.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("../images/icons/Trash.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.filter-row {
    display: flex;
    align-items: center;
}

.filter-row select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    border-radius: 0.25rem;
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-primary, #0b0b0b);
    cursor: pointer;
    font-size: var(--Label-Large-Size, 0.875rem);
    font-weight: var(--Label-Large-Weight, 500);
    line-height: var(--Label-Large-Height, 1.25rem);
}

.upload-actions {
    position: relative;
    display: inline-flex;
}

.upload-actions__primary {
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem) 0 0
        var(--Corner-Radius-Corneradius-02, 0.25rem);
}

.upload-actions__toggle {
    width: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem);
    border-left-color: rgb(255 255 255 / 55%);
    border-radius: 0 var(--Corner-Radius-Corneradius-02, 0.25rem)
        var(--Corner-Radius-Corneradius-02, 0.25rem) 0;
}

.upload-actions__toggle img {
    display: block;
    width: 0.75rem;
    height: 0.5rem;
    filter: brightness(0) invert(1);
}

.upload-actions__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    right: 0;
    width: 12.5rem;
    padding: 0.25rem 0;
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Background-colour-background, #fff);
    box-shadow: 0 0 0.125rem rgb(0 0 0 / 8%), 0 0.25rem 0.5rem rgb(0 0 0 / 12%);
}

.upload-actions__menu button {
    display: flex;
    width: 100%;
    padding: var(--Padding-Padding-S, 0.5rem);
    border: 0;
    background: transparent;
    color: var(--Text-colour-text-primary, #0b0b0b);
    cursor: pointer;
    font: inherit;
    font-size: var(--Body-Medium-Size, 0.875rem);
    line-height: var(--Body-Medium-Height, 1.25rem);
    text-align: left;
}

.upload-actions__menu button:hover,
.upload-actions__menu button:focus-visible {
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.gcode-material-modal {
    width: min(36.25rem, calc(100vw - 2rem));
    height: min(25rem, calc(100vh - 2rem));
}

.gcode-material-modal__content {
    height: 100%;
}

.gcode-material-table {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: auto;
}

.gcode-material-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--Gap-Gap-XL, 1rem);
    min-height: 3rem;
    padding-inline: var(--Padding-Padding-XS, 0.25rem);
}

.gcode-material-row--header {
    min-height: 2.5rem;
    padding-block: var(--Padding-Padding-S, 0.5rem);
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.gcode-material-filename {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcode-material-select {
    width: 100%;
    min-width: 0;
    height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Background-colour-background, #fff);
    color: var(--Text-colour-text-primary, #0b0b0b);
    font: inherit;
}

@media (max-width: 36rem) {
    .gcode-material-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--Gap-Gap-L, 0.5rem);
        padding-block: var(--Padding-Padding-S, 0.5rem);
    }

    .gcode-material-row--header {
        display: none;
    }
}

.slice-jobs-button {
    display: inline-flex;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
    height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-L, 1rem)
        var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-primary, #0b0b0b);
    cursor: pointer;
    font: inherit;
}

.slice-jobs-button:hover {
    background: var(--Button-colour-Button---tertiary---hover, #e2e2e2);
}

.slice-jobs-button--failed {
    border-color: var(--Support-colour-Support-destructive, #ff4040);
    color: var(--Support-colour-Support-destructive, #ff4040);
}

.slice-jobs-button:disabled,
.slice-jobs-button:disabled:hover {
    border-color: var(--Border-colour-border---buttondisable, #e2e2e2);
    background: var(--Button-colour-Button-disabled, #e2e2e2);
    color: var(--Text-colour-text-on-buttondisabled, #aeaeae);
    cursor: not-allowed;
}

.slice-stack-icon {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.slice-stack-icon__layer {
    position: absolute;
    left: 0.0625rem;
    display: block;
    width: 1.375rem;
    height: 0.5rem;
    overflow: visible;
}

.slice-stack-icon__layer path {
    fill: var(--Support-colour-Support-primary-light, #d0ede8);
    stroke: var(--Support-colour-Support-primary, #15a78e);
}

.slice-stack-icon__layer--base {
    top: 0.8125rem;
}

.slice-stack-icon__layer--middle {
    top: 0.5rem;
}

.slice-stack-icon__layer--top {
    top: 0.1875rem;
}

.slice-stack-icon--failed.slice-stack-icon--active .slice-stack-icon__layer path {
    fill: var(--Coral-Red-100, #ffd9d9);
    stroke: var(--Support-colour-Support-destructive, #ff4040);
}

.slice-stack-icon--failed:not(.slice-stack-icon--active)::after {
    position: absolute;
    top: 0.1875rem;
    left: 0.0625rem;
    width: 1.375rem;
    height: 1.125rem;
    background: url("../images/icons/slice-stack-error.svg") center / 100% 100% no-repeat;
    content: "";
}

.slice-stack-icon--failed:not(.slice-stack-icon--active) .slice-stack-icon__layer {
    visibility: hidden;
}

.slice-jobs-button:disabled .slice-stack-icon::after {
    position: absolute;
    top: 0.1875rem;
    left: 0.0625rem;
    width: 1.375rem;
    height: 1.125rem;
    background-color: var(--Text-colour-text-on-buttondisabled, #aeaeae);
    content: "";
    mask: url("../images/icons/slice-stack-error.svg") center / 100% 100% no-repeat;
    -webkit-mask: url("../images/icons/slice-stack-error.svg") center / 100% 100% no-repeat;
}

.slice-jobs-button:disabled .slice-stack-icon__layer {
    visibility: hidden;
}

.slice-stack-icon--active .slice-stack-icon__layer--middle {
    animation: slice-stack-middle-opacity 3s step-end infinite;
    will-change: opacity;
}

.slice-stack-icon--active .slice-stack-icon__layer--top {
    animation: slice-stack-top-opacity 3s step-end infinite;
    will-change: opacity;
}

@keyframes slice-stack-middle-opacity {
    0% {
        opacity: 0;
    }

    33.333%,
    100% {
        opacity: 1;
    }
}

@keyframes slice-stack-top-opacity {
    0% {
        opacity: 0;
    }

    66.667%,
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slice-stack-icon--active .slice-stack-icon__layer {
        animation: none;
        opacity: 1;
        will-change: auto;
    }
}

dialog.orthotic-style-modal {
    width: 37.5rem;
    height: min(37.5rem, calc(100svh - 2rem));
}

dialog.slicer-settings-modal {
    width: min(47.5625rem, calc(100vw - 2rem));
    max-height: calc(100svh - 2rem);
}

dialog.custom-zone-modal {
    width: min(25rem, calc(100vw - 2rem));
}

dialog.slicing-jobs-modal {
    width: 52.5rem;
    height: 31.25rem;
    overflow: hidden;
}

dialog.slice-upload-overlay {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

dialog.slice-upload-overlay[open] {
    display: grid;
    place-items: center;
}

dialog.slice-upload-overlay::backdrop {
    background: rgb(11 11 11 / 60%);
}

.slice-upload-animation {
    position: relative;
    display: block;
    width: 25.0195px;
    height: 60px;
}

.slice-upload-animation__piece {
    position: absolute;
    display: block;
    background-color: #fff;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    will-change: background-color;
}

.slice-upload-animation__bottom {
    top: 31.9312px;
    left: 0;
    width: 24.9976px;
    height: 28.0688px;
    animation: slice-upload-bottom-colour 3.2s linear infinite;
    mask-image: url("../images/icons/slice-upload-bottom.svg");
    -webkit-mask-image: url("../images/icons/slice-upload-bottom.svg");
}

.slice-upload-animation__lower-right {
    top: 31.8838px;
    left: 17.4829px;
    width: 7.5366px;
    height: 19.3774px;
    animation: slice-upload-lower-right-colour 3.2s linear infinite;
    mask-image: url("../images/icons/slice-upload-lower-right.svg");
    -webkit-mask-image: url("../images/icons/slice-upload-lower-right.svg");
}

.slice-upload-animation__upper-left {
    top: 9px;
    left: 0;
    width: 7.5391px;
    height: 19.3799px;
    animation: slice-upload-upper-left-colour 3.2s linear infinite;
    mask-image: url("../images/icons/slice-upload-upper-left.svg");
    -webkit-mask-image: url("../images/icons/slice-upload-upper-left.svg");
}

.slice-upload-animation__top {
    top: 0;
    left: 0.022px;
    width: 24.9976px;
    height: 28.0688px;
    animation: slice-upload-top-colour 3.2s linear infinite;
    mask-image: url("../images/icons/slice-upload-top.svg");
    -webkit-mask-image: url("../images/icons/slice-upload-top.svg");
}

@keyframes slice-upload-bottom-colour {
    0%, 12.5%, 25%, 87.5%, 100% { background-color: #fff; }
    37.5%, 50%, 62.5%, 75% { background-color: var(--Support-colour-Support-primary, #15a78e); }
}

@keyframes slice-upload-lower-right-colour {
    0%, 12.5%, 75%, 87.5%, 100% { background-color: #fff; }
    25%, 37.5%, 50%, 62.5% { background-color: var(--Support-colour-Support-primary, #15a78e); }
}

@keyframes slice-upload-upper-left-colour {
    0%, 62.5%, 75%, 87.5%, 100% { background-color: #fff; }
    12.5%, 25%, 37.5%, 50% { background-color: var(--Support-colour-Support-primary, #15a78e); }
}

@keyframes slice-upload-top-colour {
    0%, 12.5%, 25%, 37.5%, 100% { background-color: var(--Support-colour-Support-primary, #15a78e); }
    50%, 62.5%, 75%, 87.5% { background-color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .slice-upload-animation__piece {
        animation: none;
        background-color: var(--Support-colour-Support-primary, #15a78e);
        will-change: auto;
    }
}

.slicing-workflow-modal {
    min-height: 100%;
}

.slicing-jobs-modal .slicing-workflow-modal {
    height: 100%;
    min-height: 0;
}

.slicing-jobs-modal .slicing-jobs-table {
    flex: 1;
    min-height: 0;
}

.slicing-workflow-modal [data-modal-initial-focus]:focus {
    outline: none;
}

#slicer-settings-modal .modal-button-row .btn--lg,
#gcode-material-modal .modal-button-row .btn--lg,
#custom-zone-modal .modal-button-row .btn--lg,
#orthotic-style-modal .modal-button-row .btn--lg {
    height: 3rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-L, 1rem);
}

.orthotic-style-description {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.orthotic-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.orthotic-warning > :first-child {
    color: var(--yellowDark-day, #fdb300);
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.orthotic-style-actions {
    display: flex;
    width: 21.8125rem;
    margin: 1rem auto 0;
    flex-direction: column;
    gap: var(--Gap-Gap-XL, 1rem);
}

.orthotic-style-actions .btn {
    min-height: 3rem;
    padding: var(--Padding-Padding-M, 0.75rem) var(--Padding-Padding-L, 1rem);
}

.orthotic-style-footer {
    margin-top: auto;
}

.slicer-settings-table,
.slicing-jobs-table {
    width: 100%;
    overflow: auto;
}

.slicer-setting-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(13rem, 1fr);
    align-items: center;
    gap: var(--Gap-Gap-XL, 1rem);
    min-height: 2.75rem;
    padding: var(--Padding-Padding-XS, 0.25rem);
}

.slicer-setting-row--multi {
    grid-template-columns: minmax(12rem, 17.5rem) 10rem minmax(13.5625rem, 1fr) 1rem;
}

.slicer-setting-row--single > .slicer-field-control {
    width: 100%;
    min-width: 0;
}

.slicer-setting-header,
.slicing-job-header {
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.slicer-setting-header + .slicer-setting-row {
    margin-top: var(--Gap-Gap-L, 0.5rem);
}

.slicer-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stl-preview-trigger {
    cursor: default;
    text-decoration: underline dotted;
    text-decoration-color: var(--Border-colour-border---default, #a3a3a3);
    text-underline-offset: 0.2rem;
}

.stl-preview-trigger:focus-visible {
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    outline: 2px solid var(--Support-colour-Support-primary, #15a78e);
    outline-offset: 2px;
}

.stl-preview-tooltip {
    position: fixed;
    z-index: 1100;
    width: 17.5rem;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-03, 0.5rem);
    background: var(--Background-colour-background, #fff);
    box-shadow: 0 0.75rem 2rem rgb(11 11 11 / 18%);
    color: var(--Text-colour-text-primary, #0b0b0b);
    pointer-events: none;
}

.stl-preview-tooltip__name {
    overflow: hidden;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    font-size: 0.875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stl-preview-tooltip__viewport {
    position: relative;
    display: grid;
    min-height: 11.5rem;
    place-items: center;
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.stl-preview-tooltip canvas {
    display: block;
    width: 17.5rem;
    height: 11.5rem;
}

.stl-preview-tooltip__status {
    position: absolute;
    color: var(--Text-colour-text-secondary, #686868);
    font-size: 0.875rem;
}

.slicer-base-file {
    color: var(--Text-colour-text-active, #15a78e);
}

.functional-settings,
.multi-density-settings {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-M, 0.25rem);
    padding: var(--Padding-Padding-XS, 0.25rem);
    border-radius: 0.125rem;
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.functional-settings .slicer-inline-field {
    gap: var(--Gap-Gap-L, 0.5rem);
}

.functional-settings .slicer-field-control {
    width: auto;
    min-width: 0;
    flex: 1;
}

.multi-density-job-name {
    display: grid;
    grid-template-columns: 17.5rem 1fr;
    align-items: center;
    gap: var(--Gap-Gap-XL, 1rem);
    min-height: 2.5rem;
    margin-bottom: var(--Gap-Gap-XL, 1rem);
}

.multi-density-job-name .slicer-field-control {
    width: 100%;
}

.multi-density-warning {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    margin-bottom: var(--Gap-Gap-L, 0.5rem);
    border-left: 0.25rem solid var(--yellowDark-day, #fdb300);
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.multi-density-warning--base {
    display: flex;
    align-items: center;
    gap: var(--Gap-Gap-M, 0.25rem);
    padding: 0;
    border-left: 0;
    background: transparent;
    color: var(--Support-colour-Support-destructive, #ff4040);
}

.multi-density-warning--base .slice-error-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.multi-density-base-label--error {
    color: var(--Support-colour-Support-destructive, #ff4040);
}

.multi-density-parts-divider {
    width: 100%;
    height: 1px;
    margin: var(--Gap-Gap-L, 0.5rem) 0;
    border: 0;
    background: var(--Divider-colour-divider---00, #e2e2e2);
}

.multi-density-settings {
    width: 100%;
    align-items: stretch;
    padding: 0;
    background: transparent;
}

.multi-density-settings-placeholder {
    color: var(--Text-colour-text-secondary, #aeaeae);
}

.slicer-more-info {
    color: var(--Brand-Foundation-Lavender-Indigo, #8b52fc);
    text-decoration: underline;
}

.shore-hardness-info-label {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.shore-hardness-info-icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    color: var(--Icon-colour-Icon-primary, #0b0b0b);
    place-items: center;
}

.shore-hardness-info-icon::before {
    width: 1.5rem;
    height: 1.5rem;
    background: currentcolor;
    content: "";
    mask: url("../images/icons/info.svg") center / contain no-repeat;
    -webkit-mask: url("../images/icons/info.svg") center / contain no-repeat;
}

.slicer-more-info:focus-visible,
.shore-hardness-info-icon:focus-visible {
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    outline: 2px solid var(--Support-colour-Support-primary, #15a78e);
    outline-offset: 2px;
}

.multi-density-remove-part {
    display: grid;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--Icon-colour-Icon-primary, #0b0b0b);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1rem;
    place-items: center;
}

.multi-density-remove-part:focus-visible {
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    outline: 2px solid var(--Support-colour-Support-primary, #15a78e);
    outline-offset: 2px;
}

.slicer-inline-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--Gap-Gap-L, 0.5rem);
    min-height: 2.5rem;
}

.slicer-field-control,
.slicer-number-control {
    min-height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Background-colour-background, #fff);
    color: var(--Text-colour-text-primary, #0b0b0b);
    font: inherit;
}

.slicer-field-control {
    width: 10rem;
}

select.slicer-field-control {
    height: 2.5rem;
    padding-right: 2rem;
    appearance: none;
    background-image: url("../images/icons/triangle-down.svg");
    background-position: right var(--Padding-Padding-M, 0.75rem) center;
    background-repeat: no-repeat;
    background-size: 0.375rem 0.2083rem;
    cursor: pointer;
    font-size: var(--Body-Large-Size, 1rem);
    font-style: normal;
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    letter-spacing: var(--Body-Large-Spacing, 0);
}

select.slicer-field-control option {
    padding: var(--Padding-Padding-XS, 0.25rem) var(--Padding-Padding-S, 0.5rem);
    background: var(--Background-colour-background, #fff);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

select.slicer-field-control option:checked {
    background: var(--Background-colour-hover, #e2e2e2);
    color: var(--Text-colour-text-active, #15a78e);
}

.slicer-number-control {
    width: 5rem;
}

.number-stepper {
    display: flex;
    width: 5.625rem;
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Background-colour-background, #fff);
}

.number-stepper output {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 var(--Padding-Padding-M, 0.75rem);
}

.number-stepper__steps {
    display: flex;
    width: 1.25rem;
    flex-direction: column;
    border-left: 1px solid var(--Border-colour-border---default, #e2e2e2);
}

.number-stepper__steps button {
    display: grid;
    flex: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--Icon-colour-Icon-primary, #0b0b0b);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    place-items: center;
}

.number-stepper__steps button + button {
    border-top: 1px solid var(--Border-colour-border---default, #e2e2e2);
}

.number-stepper__steps button:disabled {
    background: var(--Background-colour-disabled, #e2e2e2);
    color: var(--Icon-colour-icon-disabled, #aeaeae);
    cursor: not-allowed;
}

.number-stepper__steps button:hover,
.multi-density-remove-part:hover {
    background: var(--Background-colour-hover, #e2e2e2);
}

.number-stepper__steps button:disabled:hover {
    background: var(--Background-colour-disabled, #e2e2e2);
}

.custom-zone-name-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.custom-zone-name-field input {
    width: 100%;
    min-width: 0;
    height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    font: inherit;
}

.validated-name-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--Gap-Gap-M, 0.25rem);
}

.validated-name-field input[aria-invalid="true"] {
    border-color: var(--Support-colour-Support-destructive, #ff4040);
    border-width: 2px;
}

.validated-name-field input[aria-invalid="true"]:focus {
    outline: none;
}

.name-validation-error {
    color: var(--Support-colour-Support-destructive, #ff4040);
    font-size: var(--Body-Small-Size, 0.75rem);
    font-weight: var(--Body-Small-Weight, 400);
    line-height: var(--Body-Small-Height, 1rem);
    letter-spacing: var(--Body-Small-Spacing, 0.0125rem);
}

@media (max-width: 700px) {
    .slicer-setting-row.slicer-setting-row--multi {
        grid-template-columns: minmax(9rem, 1fr) minmax(13rem, 1fr) 1rem;
    }

    .slicer-setting-row--multi > :nth-child(2) {
        grid-column: 2;
    }

    .slicer-setting-row--multi > :nth-child(3) {
        grid-column: 2;
    }

    .slicer-setting-row--multi > :nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    .slicer-setting-header.slicer-setting-row--multi > :nth-child(3),
    .slicer-setting-header.slicer-setting-row--multi > :nth-child(4) {
        display: none;
    }

    .multi-density-job-name {
        grid-template-columns: 1fr;
    }
}

.slicing-jobs-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.slicing-job-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(10rem, 1.2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) 1.5rem;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
    min-height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-XS, 0.25rem);
}

.delete-slice-job-form {
    display: flex;
    margin: 0;
}

.slice-dismiss-button {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    border: 0;
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.slice-dismiss-button:hover {
    background: var(--Button-colour-Button---tertiary---hover, #e2e2e2);
}

.slice-dismiss-button:focus-visible {
    outline: 2px solid var(--Support-colour-Support-primary, #15a78e);
    outline-offset: 1px;
}

.slice-dismiss-button img {
    width: 1rem;
    height: 1rem;
}

.slicing-job-row:nth-child(odd):not(.slicing-job-header) {
    background: var(--Background-colour-background---secondary, #f4f4f4);
}

.slicing-job-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slicing-job-row > .slicing-job-profile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.slicing-job-profile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slice-job-details {
    position: relative;
    flex: 0 0 auto;
    overflow: visible;
    text-decoration: underline;
    text-underline-position: from-font;
}

.slice-job-details:focus-visible {
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    outline: 2px solid var(--Support-colour-Support-primary, #15a78e);
    outline-offset: 2px;
}

.slice-job-details-tooltip {
    position: fixed;
    inset: auto;
    z-index: 1100;
    margin: 0;
    padding: var(--Padding-Padding-S, 0.5rem);
    max-height: none;
    overflow: visible;
    visibility: hidden;
    border: 1px solid var(--Border-colour-border---default, #e2e2e2);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Background-colour-background---secondary, #f4f4f4);
    box-shadow: 0 0.125rem 0.125rem rgb(0 0 0 / 10%);
    color: var(--Text-colour-text-primary, #0b0b0b);
    opacity: 0;
    pointer-events: none;
}

.slice-job-details-tooltip:popover-open,
.slice-job-details-tooltip[data-visible="true"] {
    visibility: visible;
    opacity: 1;
}

.slice-job-angle-tooltip {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.slice-job-regions-tooltip {
    display: flex;
    width: 22.0625rem;
    max-width: calc(100vw - 1rem);
    flex-direction: column;
    gap: var(--Gap-Gap-L, 0.5rem);
    white-space: normal;
}

.slice-job-regions-tooltip > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.slice-job-details-tooltip > img {
    position: absolute;
    top: calc(100% - 1px);
    left: var(--slice-tooltip-caret-left, 50%);
    width: 0.558rem;
    height: 0.5rem;
    transform: translateX(-50%);
}

.slice-job-details-tooltip[data-placement="below"] > img {
    top: auto;
    bottom: calc(100% - 1px);
    transform: translateX(-50%) rotate(180deg);
}

.slice-status {
    display: flex;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.slicing-job-row--progress .slice-status {
    grid-column: 4 / 6;
}

.slice-status--failed {
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.slice-error-icon {
    position: relative;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.slice-error-icon__shape {
    position: absolute;
    inset: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
}

.slice-error-icon__mark {
    position: absolute;
    top: 0.375rem;
    left: 0.6875rem;
    width: 0.125rem;
    height: 0.6875rem;
}

.slice-status--succeeded {
    color: var(--Support-colour-Support-primary, #15a78e);
}

.slice-progress {
    position: relative;
    flex: 1 1 9.75rem;
    min-width: 4rem;
    height: 0.5rem;
    overflow: hidden;
    background: var(--Background-colour-disabled, #e2e2e2);
}

.slice-progress__fill {
    display: block;
    height: 100%;
    background: var(--Support-colour-Support-primary, #15a78e);
}

.slicing-jobs-empty {
    display: flex;
    justify-content: center;
    padding: 2rem;
    color: var(--Text-colour-text-secondary, #aeaeae);
}

.btn:disabled {
    border-color: var(--Border-colour-border---buttondisable, #e2e2e2);
    background: var(--Button-colour-Button-disabled, #e2e2e2);
    color: var(--Text-colour-text-on-buttondisabled, #aeaeae);
    cursor: not-allowed;
}

@media (max-width: 43.75rem) {
    dialog.orthotic-style-modal {
        width: calc(100vw - 2rem);
    }

    .orthotic-style-actions {
        width: 100%;
    }

    .slicer-setting-row {
        grid-template-columns: 1fr;
    }

    .slicing-job-row {
        grid-template-columns: 1.5rem minmax(8rem, 1fr) minmax(7rem, 1fr) 1.5rem;
    }

    .slicing-job-row > :nth-child(3) {
        display: none;
    }
}