/**
 * Rules for assigning CSS class names:
 * 1. Application classes start with "app-"
 * 2. View specific classes start with "app-" followed by the lower case view name. Classes of
 *    nested elements add a hyphen. E.g. the root element of the Order view should be assigned the
 *    class name "app-order" and all class names assigned to nested elements of the view should
 *    start with "app-order-".
 * 3. Component class names start with "cmp-" followed by the lower case component name or
 *    abbreviation. Class names of nested elements add a hyphen. E.g. for the Table component the
 *    root element should be assigned the class name "cmp-table" and nested elements should be
 *    assigned class names that start with "cmp-table-".
 */

:root {
    --app-icon-size: 1.5em;
    --app-color-select: #08add6;
    --app-color-select-hover: #078dae;
    --app-color-primary: #97c01e;
    --app-color-primary-hover: #88ad1b;
    --app-color-danger: #d11149;
    --app-color-warning: #f17105;
    --app-color-disabled: #808080;
    --app-border-color: #ced4da;
    --app-border: 1px solid var(--app-border-color);
    --app-border-radius: .25rem;
    --app-spacing: 10px;
    --app-spacing-double: 20px;
    --app-spacing-quadruple: 40px;
    --app-header-height: 50px;
    --app-aspect-default: 16/9;
    --app-list-width: clamp(350px, 100%, 1000px);
    --app-font-size-ws: 1.5em;
    --app-scrollbar-width: thin;
}

/* Generic styles */
.m-1x { margin: var(--app-spacing); }
.m-2x { margin: var(--app-spacing-double); }
.m-4x { margin: var(--app-spacing-quadruple); }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-fit { width: 1%; white-space: nowrap; }
.h-fit { height: fit-content; }
.spin { animation: spin 2s linear infinite }
.btn { white-space: nowrap; }
.btn-link { padding: 0 5px; vertical-align: baseline; }
.pointer-events-none { pointer-events: none; }
select[data-valid="0"],
input[data-valid="0"] { border: 2px solid var(--app-color-danger) !important; }
label.form-control { background-color: #e9ecef; }
button > i { border: none; }
.form-check-input { margin-top: 0.35em; }
.form-inline { display: flex; gap: var(--app-spacing); }
.form-label { margin-top: 0.4rem; }

.inline-box { padding: .375rem .75rem; border: var(--app-border); border-radius: var(--app-border-radius); white-space: nowrap; background-color: #fff; }
.input-group .btn .las { margin-bottom: 3px; }

.btn-success { background-color: var(--app-color-primary); border-color: var(--app-color-primary) }
.btn-success:focus,
.btn-success:hover { background-color: var(--app-color-primary-hover); border-color: var(--app-color-primary-hover); }
.btn-primary { background-color: var(--app-color-select); border-color: var(--app-color-select) }
.btn-primary:focus,
.btn-primary:hover { background-color: var(--app-color-select-hover); border-color: var(--app-color-select-hover); }
.btn-default { background-color: #fff; border: var(--app-border); border-radius: var(--app-border-radius); }
.btn-primary:focus,
.btn-primary:hover { background-color: var(--app-border-color); border-color: var(--app-border-color); }


.app-field-resource { display: flex; flex-wrap: wrap; gap: 0px 10px; }
.app-field-resource label { flex: 100%; }
.app-field-resource input.number { flex: 1; }
.app-field-resource input.name { flex: 4; }
.app-field-actions { padding: .375rem 0rem; }
.app-field-actions i { font-size: 1.5em; }

.cmp-modal { display: flex; flex-direction: column; width: clamp(50vw, 1200px, 100vw); height: clamp(50vh, 800px, 100vh); border: var(--app-border); }
.cmp-modal.w-narrow { width: clamp(25vw, 600px, 100vw); }
.cmp-modal.h-fit { height: fit-content; }
.cmp-modal header { display: flex; border-bottom: var(--app-border); margin-bottom: var(--app-spacing); }
.cmp-modal footer { margin-top: var(--app-spacing); }
.cmp-modal footer .actions { text-align: right; }
.cmp-modal > div { overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.cmp-modal h2 { padding: 0; font-size: 1.4rem; }
.cmp-modal::backdrop { opacity: 50%; background-color: #000; }
.cmp-modal .table-bordered > thead > tr { border-top: 1px solid #dee2e6; }
.cmp-modal .app-table-filters { padding: 0 0 var(--app-spacing) 0; line-height: 1em; }
.cmp-modal-body { flex: 1; }
.cmp-modal-close { position: absolute; right: 0; top: 0px; font-size: 1.6rem; }
.app-table-filters { display: flex; gap: var(--app-spacing); }
.app-v > .app-table-filters { padding: var(--app-spacing); border-bottom: 1px solid #dee2e6; }
.app-table-filters button,
.app-table-filters label { padding: .375rem .75rem; border: var(--app-border); border-radius: var(--app-border-radius); white-space: nowrap; background-color: #fff; }
.app-table-filters label { display: flex; align-items: center; gap: 10px; }
.app-table-filters select { background-color: #fff; border: var(--app-border); border-radius: var(--app-border-radius); padding-inline: var(--app-spacing); }
.app-table-filters .input-group { width: fit-content; min-width: fit-content; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 576px) {
    .app-login-actions button { width: 100%; }
}

.form-check.form-switch { margin-left: 0; padding-left: 0; }
.form-check-input { display: block; float: none !important; margin-left: 0 !important; padding-left: 0 !important; }

.paging { display: grid; grid-template-columns: repeat(3, 1fr); }
.paging-controls { grid-row: 1; grid-column: 2; text-align: center; }
.paging-info { grid-row: 1; grid-column: 3; text-align: right; margin-right: var(--app-spacing); line-height: 40px; }

.table { margin-bottom: 0; }
.table caption { padding: 0.5rem; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
.table-bordered > thead > tr { border-top: none; }
.table-row-select > tbody > tr { cursor: pointer; }
.table th,
.table td { padding-inline: .75rem; }
.table tr.disabled { background-color: #eee; color: var(--app-color-disabled); }
th.sortable { user-select: none; cursor: pointer; }
th.sortable[data-order="0-asc"]:after { content: " ▲"; }
th.sortable[data-order="0-desc"]:after { content: " ▼"; }
th.sortable[data-order="1-asc"]:after { content: " ▲2"; }
th.sortable[data-order="1-desc"]:after { content: " ▼2"; }
th.sortable[data-order="2-asc"]:after { content: " ▲3"; }
th.sortable[data-order="2-desc"]:after { content: " ▼3"; }
th.sortable[data-order="3-asc"]:after { content: " ▲4"; }
th.sortable[data-order="3-desc"]:after { content: " ▼4"; }


/* Workstation views - Layout */
.app-ws header { height: 20vh; display: flex; }
.app-ws-logo { display: flex; flex: 1; padding-left: 2vw; }
.app-ws-logo img { align-self: center; max-height: 20vh; max-width: 50vw; }
.app-ws-center { padding: var(--app-spacing-double); text-align: right; }
.app-ws-center label { margin: 0 var(--app-spacing); }
.app-ws-status { flex: 0; height: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; border-left: 1px solid #000; border-bottom: 1px solid #000; }
.app-ws-status > label { font-size: 2vh; text-align: center; display: block; }
.app-ws-status > .app-ws-status-id { font-size: 8vh; }
.app-ws main { height: 80vh; display: flex; }

.app-ws-view { width: 100%; height: 80vh; display: flex; flex-direction: column; gap: var(--app-spacing-double); padding-bottom: var(--app-spacing-double); padding-left: var(--app-spacing-quadruple); padding-right: var(--app-spacing-quadruple); }
.app-ws-body { flex: 1; overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.app-ws-body .las { vertical-align: sub; }
.app-ws-footer button { font-size: 1.5em; }
.app-ws-footer { display: grid; grid-template-columns: 1fr 1fr; }
.app-ws-footer > div { display: flex; gap: var(--app-spacing); }
.app-ws-footer > div:last-child { justify-content: flex-end; }
.app-ws-footer > div:first-child { justify-content: flex-start; }
.app-ws-footer button { min-width: 25%; font-size: 1.5em; padding-block: 0.5em; }
.app-ws-footer .btn-success { background-color: var(--app-color-primary); border-color: var(--app-color-primary); }
.app-ws-footer .btn-success:hover { background-color: #88ad1b; border-color: #88ad1b; }
.app-ws-title { font-size: 2em; }
.app-ws-subtitle { display: block; font-size: 1em; }

.app-ws-menu { width: 20vw; min-width: 320px; padding-left: 0; list-style: none; margin: auto; user-select: none; }
.app-ws-menu li { width: 100%; height: clamp(2em, 10vh, 4em); line-height: clamp(2em, 10vh, 4em); text-align: center; font-size: clamp(1em, 4vh, 2em); margin-bottom: var(--app-spacing); background-color: var(--app-color-select); color: #fff; }
.app-ws-menu li:hover { background-color: var(--app-color-primary); color: #fff; }
.app-ws-menu li.disabled { background-color: #f2f2f2; color: #aaa; }

/* Workstation views - Workers */
.app-ws-workers { flex: 1; display: flex; height: 100%; gap: var(--app-spacing-double); }
.app-ws-workers-sidebar { width: 30vw; max-width: 280px; min-width: 220px; }
.app-ws-workers-actions button,
.app-ws-workers-actions button:focus { background-color: var(--app-color-select); color: #fff; border: none; border-radius: 0; }
.app-ws-workers-actions button:hover { background-color: var(--app-color-primary); }
.app-ws-workers-actions button[disabled] { background-color: #f2f2f2; color: #aaa; }
.app-ws-workers-list { flex: 1; height: 100%; overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.app-ws-workers-none { text-align: center; }
.app-ws-workers-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--app-spacing); user-select: none; }
.app-ws-workers-item { display: flex; height: 50px; padding: var(--app-spacing); background-color: #f2f2f2; align-items: center; }
.app-ws-workers-item label { flex: auto; color: inherit; }
.app-ws-workers-item:hover { background-color: #ececec; }
.app-ws-workers-item i { flex: initial; }
.app-ws-workers-item-assigned { background-color: var(--app-color-primary); color: #fff; }
.app-ws-workers-item-assigned:hover { background-color: #88ad1b; }

/* Workstation views - Task queue */
.app-ws-tasks { flex: 1; max-height: 100%; overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.app-ws-tasks table { font-size: var(--app-font-size-ws); }
.app-ws-tasks thead { background-color: var(--app-color-primary); color: #fff; }
.app-ws-tasks tr.active { background-color: var(--app-color-select); }
.app-ws-tasks tr.active td { color: #fff; }

/* Workstation views - Task/production view */
.app-ws-pr { width: 100%; }
.app-ws-pr-step { display: grid; grid-template-columns: 20fr 4fr 0 0 0 auto; padding: var(--app-spacing); border: var(--app-border); border-radius: var(--app-border-radius); font-size: var(--app-font-size-ws); margin-bottom: var(--app-spacing); gap: var(--app-spacing); }
.app-ws-pr-running .app-ws-pr-step { grid-template-columns: 20fr 4fr 180px auto auto auto; }
.app-ws-pr-running .app-ws-pr-completed { grid-template-columns: 20fr 4fr 0 0 0 auto; }
.app-ws-pr-step label { margin-top: auto; margin-bottom: auto; }
.app-ws-pr-step button i { font-size: var(--app-icon-size); }
.app-ws-pr-step-quantities { text-align: right; }
.app-ws-pr-step-tracking { display: flex; }
.app-ws-pr .app-ws-footer .btn-primary { background-color: var(--app-color-select); border-color: var(--app-color-select); }
.app-ws-pr .app-ws-footer .btn-primary:hover { background-color: #079cc1; border-color: #079cc1; }
.app-ws-pr-step .btn-success { background-color: var(--app-color-primary); border-color: var(--app-color-primary); }
.app-ws-pr-step .btn-success:hover { background-color: var(--app-color-primary-hover); border-color: var(--app-color-primary-hover); }
.app-ws-pr-details .app-ws-body { display: flex; gap: var(--app-spacing-double); }
.app-ws-pr-details .app-ws-body div { flex: 1; }
.app-ws-pr-description { font-size: var(--app-font-size-ws); }
.app-ws-pr-media > img,
.app-ws-pr-media > video { object-fit: contain; object-position: center; width: 100%; height: 95%; }

/* Key pad compononent for entering workstation number and PIN */
.cmp-keypad-preview { height: 2em; border: 1px solid #767676; margin-bottom: .5em; line-height: 2em; font-size: 2em; text-align: center; }
.cmp-keypad-keys { width: 50%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--app-spacing); }
.cmp-keypad-keys .key { width: 100%; aspect-ratio: 1; }
.cmp-keypad-keys button { width: 100%; height: 100%; }
.cmp-keypad-keys .btn-primary { background-color: var(--app-color-primary); border-color: var(--app-color-primary); }
.cmp-keypad-keys .btn-primary:hover { background-color: var(--app-color-primary-hover); border-color: var(--app-color-primary-hover); }

/* Letter pad component for searching employees */
.app-cmp-lp-buttons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.app-cmp-lp-val { width: 100%; font-size: 1.5em; border: 1px solid #c0c0c0; margin-bottom: var(--app-spacing-double); }
.app-cmp-lp button { width: 100%; height: 8vh; border: none; min-height: 16px; max-height: 32px; border-radius: var(--app-border-radius); background-color: #f9fafb; }
.app-cmp-lp button:hover { background-color: #d0d0d0; }
.app-cmp-lp-cl { grid-column: 5/7; }

/* Quantity selector component */
.app-cmp-qs { display: flex; }

@media only screen and (max-width: 479px) {
    .app-ws-workers-sidebar { display: none; }
}


/* Manager views */
.app-m { height: 100vh; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: var(--app-header-height) 1fr; }
.app-m-collapsed { grid-template-columns: 44px 1fr; }
.app-m-showinghelp { grid-template-columns: 200px minmax(720px, 1fr) 1fr; }
.app-m-showinghelp.app-m-collapsed { grid-template-columns: 44px minmax(720px, 1fr) 1fr; }
.app-m-sidebar { grid-row: 1/3; grid-column: 1; display: flex; flex-direction: column; background-color: #fff; border-right: 1px solid #000; }
.app-m-collapsed .app-m-menu-subitem { padding-left: var(--app-spacing); }
.app-m-collapsed .app-m-user-name,
.app-m-collapsed .app-m-menu-item span,
.app-m-collapsed .app-m-menu-subitem span { display: none }
.app-m-logo { padding: var(--app-spacing); margin-bottom: var(--app-spacing); }
.app-m-menu { flex: 1; overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.app-m-menu-items { list-style: none; padding: 0; user-select: none; }
.app-m-menu-items .las { font-size: var(--app-icon-size); vertical-align: bottom; }
.app-m-menu-item { padding: var(--app-spacing) 0 var(--app-spacing) var(--app-spacing) }
.app-m-menu-subitem { padding: var(--app-spacing) 0 var(--app-spacing) 40px; }
.app-m-menu-item:hover,
.app-m-menu-subitem:hover { background-color: var(--app-color-primary); color: #fff; }
.app-m-menu-item.selected,
.app-m-menu-subitem.selected { background-color: var(--app-color-select); color: #fff; }
.app-m-user { text-align: center; padding: var(--app-spacing); user-select: none; border-top: 1px solid #000; }
.app-m-user:hover { background-color: var(--app-color-primary); color: #fff; }
.app-m-user .las { font-size: var(--app-icon-size); vertical-align: middle; }
.app-m-header { grid-row: 1; grid-column: 2; background-color: #fff; display: flex; border-bottom: var(--app-border); }
.app-m-showinghelp .app-m-header { grid-column: 2/4; }
.app-m-header-title { display: inline-block; margin: 0 var(--app-spacing-double); font-size: 1.5rem; line-height: var(--app-header-height); }
.app-m-header-actions { flex: 1; height: var(--app-header-height); line-height: var(--app-header-height); }
.app-m-header-actions button { vertical-align: baseline; }
.app-m-header-actions-default { float: left; }
.app-m-header-actions-right { float: right; margin-right: var(--app-spacing); }
.app-m-main,
.app-m-help { grid-row: 2; background-color: #fff; overflow-y: auto; scrollbar-width: var(--app-scrollbar-width); }
.app-m-main { grid-column: 2; }
.app-m-help { grid-column: 3; border-left: var(--app-border); padding: var(--app-spacing-double); }

.app-v-default { padding: var(--app-spacing-double); }
.app-v-index {}
.app-related {}
.app-related-header { display: flex; }
.app-related-header h3 { font-size: 1.4em; display: inline-block; margin-right: var(--app-spacing); }
.app-related-actions { flex: 1; text-align: right; }
.app-related-actions .las { vertical-align: baseline; }
.app-related table { border-top: 1px solid #dee2e6; }

.app-home-employees h2 { font-size: 1.5em; }

.app-process > fieldset { width: var(--app-list-width); }
.app-process-stepslist { }
.app-process-stepslist > label { width: 100%; }
.app-process-stepslist > label > .input-group { width: auto; float: right; }
.app-step { margin-bottom: var(--app-spacing-double); }
.app-step-header { display: flex; padding: var(--app-spacing) var(--app-spacing); border: var(--app-border); border-bottom: 2px solid var(--bs-secondary); }
.app-step-header h2 { flex: 1; padding-left: 20px; display: inline; margin: 0; font-size: 1rem; cursor: pointer; line-height: 30px }
.app-step-actions { text-align: right; width: auto; }
.app-step-body { padding: var(--app-spacing-double) var(--app-spacing-double) 0 var(--app-spacing-double); border: var(--app-border); border-top: none; }
.app-step.collapsed .app-step-body { display: none; }
.app-step-details { display: grid; grid-template-columns: 4fr 1fr; grid-gap: var(--app-spacing); margin-bottom: var(--app-spacing); }
.app-step-details fieldset { margin: 0; }
.app-step-details fieldset > div { display: grid; grid-template-columns: 1fr 5fr; }
.app-step-details fieldset > div.w25p { grid-template-columns: 4fr 5fr 15fr; }
@media only screen and (max-width: 1199px) {
    .app-step-details fieldset > div { display: grid; grid-template-columns: 1fr 4fr; }
    .app-step-details fieldset > div.w25p { grid-template-columns: 1fr 1fr 3fr; }
}
.app-step-details label { word-wrap: anywhere; }
.app-step-details input { height: fit-content; }
.app-step-details textarea { height: 150px; }
.app-step-media { display: flex; flex-direction: column; position: relative; cursor: pointer; }
.app-step-media span { margin: auto; }
.app-step-media img { width: 100%; aspect-ratio: var(--app-aspect-default); display: block; margin-left: auto; }
.app-step-media label { flex: 1; margin-top: var(--app-spacing); text-align: center; }
.app-step-media video { width: 100%; aspect-ratio: var(--app-aspect-default); }
.app-step-media button { position: absolute; right: 0; border: none; padding: 0 0.25em; background: #ffffff80; font-size: var(--app-icon-size); }
.app-params-header,
.app-param { display: grid; grid-template-columns: 100px 1fr 128px 100px 32px; grid-gap: var(--app-spacing); margin-bottom: var(--app-spacing); }
.app-param .input-group { flex-wrap: unset; }
.app-param input[type="text"] { width: 100%; }
.app-params { border-top: 1px solid #ccc; padding-top: var(--app-spacing); padding-bottom: var(--app-spacing); }
.app-param-actions { display: flex; align-items: center; }

.app-order fieldset { width: var(--app-list-width); }
.app-order-items-header,
.app-order-item-details { display: grid; grid-template-columns: 100px 120px 1fr 100px 100px 32px; grid-gap: var(--app-spacing); margin-bottom: var(--app-spacing); }
.app-order-items-header { border-bottom: 2px solid var(--bs-secondary); }
.app-order-items-header .las {}
.app-order-items-header div { display: flex; }
.app-order-items-header label { padding: .375rem .75rem; }
.app-order-item { border-bottom: 1px solid #808080; margin-bottom: var(--app-spacing); }
.app-order-item.canceled { filter: opacity(50%); }
.app-order-item-number,
.app-order-item-status { padding: .375rem .75rem; }
.app-order-item-actions { display: flex; align-items: center; }
.app-order-item-planning { display: flex; border-top: 1px solid #eee; margin-bottom: var(--app-spacing); gap: var(--app-spacing-double); padding: var(--app-spacing); padding-left: 110px; }
.app-order-item-planning div { flex: 1; }
.app-order-item-planning button { height: fit-content; margin-top: auto; }
.app-order-item-process { font-size: 12px; font-weight: bold; }
.app-order-item-progress > span { min-height: 48px; display: flex; align-items: center; }
.app-order-step-progress { display: flex; flex-wrap: wrap; gap: 0 var(--app-spacing); font-size: 12px; }
.app-order-step-untracked progress { accent-color: var(--app-color-disabled); }
.app-order-step-completed progress { accent-color: var(--app-color-primary); }
.app-order-step-name { flex: 1; margin: auto 0; }
.app-order-step-end { width: 100px; margin: auto 0; text-align: right; }
.app-order-step-progress progress { width: 100%; }

.app-orderitem {}
.app-orderitem-reqs-header,
.app-orderitem-req { display: grid; grid-template-columns: 1fr 10fr 3fr 3fr; }
.app-orderitem-steps-header,
.app-orderitem-step { display: grid; grid-template-columns: 48px 6fr 100px; grid-gap: var(--app-spacing); margin-bottom: var(--app-spacing); }
.app-orderitem-reqs-header,
.app-orderitem-steps-header { border-bottom: 2px solid var(--bs-secondary); }
.app-orderitem-req label,
.app-orderitem-reqs-header label,
.app-orderitem-step label,
.app-orderitem-steps-header label { padding: .375rem .75rem; }
.app-orderitem-step .form-check-input { margin-left: auto !important; margin-right: auto; }
.app-orderitem-details { display: flex; gap: var(--app-spacing-quadruple); font-size: 12px; }
.app-orderitem-details > label { display: inline-block; line-height: 30px; }
.app-orderitem-details > .link { cursor: pointer; }
.app-orderitem-details > label > span { display: block; font-size: 1.5em; white-space: pre; }
.app-orderitem-related > div { border: var(--app-border); }
.app-orderitem-related h6 { font-size: 0.8em; font-weight: bold; }

.app-pv > ul { margin: 0; padding-left: 20px; }
.app-pv > ul span { font-weight: bold; }
.app-pv > ul span button { background: none; border: none; }
.app-pv > ul ul { margin: 0; padding-left: 20px; }

.cmp-info { position: relative; }
.cmp-info-message { display: none; background-color: #6c757d; color: #fff; min-width: 200px; padding: var(--app-spacing) var(--app-spacing-double); border-radius: var(--app-border-radius); font-size: 13px; }
.cmp-info:hover .cmp-info-message,
.cmp-info-active .cmp-info-message { display: inline-block; position: absolute; }

.cmp-mb { font-family: var(--bs-body-font-family); }
.cmp-mb-add { flex: 1; }
.cmp-mb-dropzone { height: 100%; display: flex; align-items: center; border: 3px dashed #ced4da; }
.cmp-mb-instruction { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cmp-mb-instruction-primary { font-size: 1.5em; }
.cmp-mb-instruction-secondary { font-size: 0.8em; }
.cmp-mb-items { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-rows: max-content; gap: var(--app-spacing); }
.cmp-mb-item { aspect-ratio: 1; padding: 2px; cursor: pointer; }
.cmp-mb-item.selected { border: 2px solid var(--app-color-select); }
.cmp-mb-item img { display: block; width: 100%; aspect-ratio: var(--app-aspect-default); margin-bottom: var(--app-spacing); }
.cmp-mb-item label { display: block; text-align: center; word-wrap: anywhere; font-size: 0.8em; }
.cmp-mb footer { margin-top: var(--app-spacing); text-align: right; }

.cmp-fup { padding: var(--app-spacing); margin-bottom: var(--app-spacing); }
.cmp-fup-error { background-color: #f8d7da; }
.cmp-fup-name { font-weight: bold; }
.cmp-fup-size { float: right; }
.cmp-fup-status {}
.cmp-fup-progress { display: block; width: 100%; margin-top: var(--app-spacing); }


/* Help information */
.app-help { font-size: 0.8rem; line-height: 2rem; }
.app-help h2 { font-size: 1.5rem; }
.app-help h3 { font-size: 1.2rem; border-bottom: var(--app-border); font-weight: bold; }
.app-help h4 { font-size: 1rem; font-weight: bold; }
.app-help video { width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--app-spacing-double); }
.app-help table { margin-bottom: var(--app-spacing-double); }
.app-help-breadcrumbs { font-size: 0.7rem; margin-bottom: var(--app-spacing-double); }
.app-help .highlight { background-color: var(--app-color-select); color: #fff; }

.help-process { padding-left: var(--app-spacing-quadruple); }

.help-process-requirements,
.help-process-step { width: 100%; margin-bottom: var(--app-spacing-double); line-height: 1.2rem; }
.help-process-step th,
.help-process-step td { border: var(--app-border); padding: 5px 10px; }
.help-process-step th { border-bottom: 1px solid #000; }
.help-process-requirements { margin-left: var(--app-spacing-quadruple); width: calc(100% - var(--app-spacing-double)); }

.help-process-step-parameter { width: 100px; }
.help-process-step-product { width: 300px; }
.help-process-step-quantity {}