@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(--Grey-300);
    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;
}

.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-container-refresh {
    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;
}

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

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

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

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

.column-buffer {
    flex: 0.5;
}

.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-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-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);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

.icon-button-add {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--Icon-colour-icon-on-tertiarybutton, #0b0b0b);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.slice-form {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 2rem;
    width: 100%;
}

.file-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--Label-Medium-Size, 0.75rem);
    font-weight: var(--Label-Medium-Weight, 500);
    color: var(--Text-colour-text-primary, #0b0b0b);
    cursor: pointer;
}

.file-label input[type="file"] {
    max-width: 7rem;
    font-size: 0.7rem;
}

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

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

.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(42rem, calc(100vw - 2rem));
    max-height: calc(100svh - 2rem);
}

dialog.slicing-jobs-modal {
    width: min(52.5rem, calc(100vw - 2rem));
    max-height: calc(100svh - 2rem);
}

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

.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(10rem, 1fr) 7.5rem minmax(13rem, 1fr);
}

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

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

.stl-preview-trigger {
    cursor: help;
    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);
}

.base-badge {
    display: inline-flex;
    margin-left: var(--Gap-Gap-L, 0.5rem);
    padding: 0.125rem var(--Gap-Gap-L, 0.5rem);
    border-radius: 0.25rem;
    background: var(--Support-colour-Support-primary, #15a78e);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1rem;
}

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

.multi-density-base-control {
    display: flex;
    justify-content: flex-start;
}

.multi-density-settings {
    align-items: flex-start;
    background: transparent;
}

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

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

.set-base-button {
    min-width: 6.75rem;
}

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

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

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

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

.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-delete-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-delete-button:hover {
    background: var(--Button-colour-Button---tertiary---hover, #e2e2e2);
}

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

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

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

.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 {
    width: 6rem;
    height: 0.5rem;
    background: linear-gradient(90deg, #15a78e, #d0ede8);
}

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