@import '../_content/TimeToFly.Blazor.Components/TimeToFly.Blazor.Components.lbb33kuvbz.bundle.scp.css';

/* station/Pages/Index.razor.rz.scp.css */
/* The station is read at arm's length on a touchscreen, so everything here is deliberately larger
   than the equivalent in the phone app.

   The action screens are child components, so their rules go through ::deep. */
.station[b-ve83x6wi16] {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem 1.5rem 2rem;
}

/* --- Tabs --- */

.station-tabs[b-ve83x6wi16] {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

/* Tab targets are as big as the action buttons: this is touched, not clicked. */
.station-tab[b-ve83x6wi16] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: 0 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    background: #f6f6f6;
    color: #575445;
    font-size: 1.125rem;
    font-weight: 600;
}

.station-tab ion-icon[b-ve83x6wi16] {
    font-size: 1.5rem;
}

.station-tab.active[b-ve83x6wi16] {
    border-color: #b43c2f;
    background: #b43c2f;
    color: #fff;
}

.station-tab-badge[b-ve83x6wi16] {
    height: auto;
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
}

.station-tab.active .station-tab-badge[b-ve83x6wi16] {
    background: #fff;
    color: #b43c2f;
}

/* Everything on this page starts at the top of the same 900px column the lists use: the screen is
   read standing in front of it, and a block that floats in the middle jumps as its content grows. */
.station-idle[b-ve83x6wi16],
.station-centered[b-ve83x6wi16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.station-idle-icon[b-ve83x6wi16] {
    font-size: 5rem;
    color: #b43c2f;
}

.station-idle-title[b-ve83x6wi16] {
    margin: 1rem 0 0.25rem;
    font-size: 2.25rem;
    font-weight: 700;
}

.station-idle-hint[b-ve83x6wi16] {
    margin-bottom: 2rem;
    font-size: 1.125rem;
    color: #6c757d;
}

.station-search[b-ve83x6wi16] {
    width: 100%;
    max-width: 720px;
}

.station-search[b-ve83x6wi16]  .station-input {
    height: 4rem;
    font-size: 1.5rem;
    text-align: center;
}

.station-result ion-icon[b-ve83x6wi16] {
    font-size: 6rem;
}

.station-result h1[b-ve83x6wi16] {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.station-result-success ion-icon[b-ve83x6wi16] {
    color: #4caf50;
}

.station-back[b-ve83x6wi16] {
    min-width: 12rem;
    height: 3.5rem;
    margin-top: 1.5rem;
    font-size: 1.125rem;
}

.station-hits[b-ve83x6wi16] {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

/* Same head as the checked-out list: title left, its one button right, then a gap to the rows. */
.station-hits-head[b-ve83x6wi16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.station-hits-head h1[b-ve83x6wi16] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.station-hit-list li[b-ve83x6wi16] {
    font-size: 1.25rem;
    cursor: pointer;
}

/* The theme only lays .in out as a row inside .image-listview, so in the station's simple lists the
   trailing chevron would drop below the text instead of sitting at the right edge. */
.station-hit-list .in[b-ve83x6wi16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* --- Action screens (child components) --- */

.station[b-ve83x6wi16]  .station-item {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.station[b-ve83x6wi16]  .station-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.station[b-ve83x6wi16]  .station-item-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-item-subtitle {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    color: #6c757d;
}

.station[b-ve83x6wi16]  .station-badge {
    flex-shrink: 0;
    height: auto;
    padding: 0.5rem 0.875rem;
    font-size: 1rem;
}

.station[b-ve83x6wi16]  .station-item-note {
    margin-top: 1rem;
    font-size: 1.125rem;
}

.station[b-ve83x6wi16]  .station-item-warning {
    color: #e6b939;
}

.station[b-ve83x6wi16]  .station-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.station[b-ve83x6wi16]  .station-stat {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f6f6f6;
    border-radius: 0.75rem;
}

.station[b-ve83x6wi16]  .station-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Serial numbers, weight ranges and colours are text, not figures, so they get a size that fits. */
.station[b-ve83x6wi16]  .station-stat-value-sm {
    font-size: 1.375rem;
    text-align: center;
    word-break: break-word;
}

.station[b-ve83x6wi16]  .station-stat-label {
    font-size: 0.9375rem;
    color: #6c757d;
}

.station[b-ve83x6wi16]  .station-adjust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.station[b-ve83x6wi16]  .station-adjust-label {
    font-size: 1.125rem;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* The actions read as a row of equal choices rather than a stack, and only break onto a second line
   when a button would have to go below its own thumb width. */
.station[b-ve83x6wi16]  .station-actions > * {
    flex: 1 1 14rem;
}

/* Buttons are thumb targets, not mouse targets. */
.station[b-ve83x6wi16]  .station-action {
    height: 6rem;
    font-size: 1.5rem;
}

/* The detail screen's own row is the one somebody reaches for while holding the item, so both of
   its buttons share a target far bigger than anything else on the page. */
.station[b-ve83x6wi16]  .station-actions .station-action,
.station[b-ve83x6wi16]  .station-actions .station-action-secondary {
    height: 10rem;
    font-size: 1.5rem;
}

/* Beside a heading - Aktualisieren, the hit list's Abbrechen - the same secondary button belongs to
   that heading rather than to the screen, so it stays the size of a button you only sometimes want. */
.station[b-ve83x6wi16]  .station-action-secondary {
    height: 3.25rem;
    font-size: 1.0625rem;
}

.station[b-ve83x6wi16]  .station-action ion-icon {
    font-size: 1.75rem;
}

.station[b-ve83x6wi16]  .station-order-items li {
    font-size: 1.25rem;
    cursor: pointer;
}

/* Same as .station-hit-list .in above: keeps the chevron and the status badge on the right. */
.station[b-ve83x6wi16]  .station-order-items .in,
.station[b-ve83x6wi16]  .station-reservation-list .in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.station[b-ve83x6wi16]  .station-stats {
    flex-wrap: wrap;
}

.station[b-ve83x6wi16]  .station-stat {
    min-width: 8rem;
}

.station[b-ve83x6wi16]  .station-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.station[b-ve83x6wi16]  .station-tag {
    height: auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.9375rem;
    background: #575445;
}

.station[b-ve83x6wi16]  .station-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-alert ion-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.station[b-ve83x6wi16]  .station-alert-danger {
    background: rgba(180, 60, 47, 0.12);
    color: #b43c2f;
}

.station[b-ve83x6wi16]  .station-reservations {
    margin-top: 1.75rem;
}

.station[b-ve83x6wi16]  .station-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-reservation-list li {
    font-size: 1.125rem;
}

.station[b-ve83x6wi16]  .station-reservation-period {
    font-weight: 600;
}

/* A reservation covering today is the one that decides whether the item may leave. */
.station[b-ve83x6wi16]  .station-reservation-today {
    border-left: 4px solid #e6b939;
}

/* StarRating sets its own 1.25rem; the station reads from further away. */
.station[b-ve83x6wi16]  .station-stat .star-rating {
    font-size: 1.5rem;
}

/* --- Checked-out list (child component) --- */

.station[b-ve83x6wi16]  .station-list {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.station[b-ve83x6wi16]  .station-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.station[b-ve83x6wi16]  .station-list-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-list-subtitle {
    margin: 0.25rem 0 0;
    font-size: 1.0625rem;
    color: #6c757d;
}

.station[b-ve83x6wi16]  .station-list-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    text-align: center;
}

.station[b-ve83x6wi16]  .station-list-empty ion-icon {
    font-size: 4rem;
    color: #87a2a0;
}

.station[b-ve83x6wi16]  .station-list-empty p {
    margin: 0;
    font-size: 1.25rem;
    color: #6c757d;
}

.station[b-ve83x6wi16]  .station-checkedout-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.station[b-ve83x6wi16]  .station-checkedout-avatar {
    flex-shrink: 0;
}

.station[b-ve83x6wi16]  .station-checkedout-main {
    flex: 1;
    min-width: 0;
}

.station[b-ve83x6wi16]  .station-checkedout-name {
    font-size: 1.375rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-checkedout-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    color: #6c757d;
}

/* Whoever has the item is the one thing you look for in this list. */
.station[b-ve83x6wi16]  .station-checkedout-borrower {
    color: #575445;
    font-weight: 600;
}

/* Past its agreed return date: the counter should see that while the customer is still standing there. */
.station[b-ve83x6wi16]  .station-checkedout-late {
    color: #b43c2f;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-checkedout-since {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    min-width: 6rem;
}

.station[b-ve83x6wi16]  .station-checkedout-since-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.station[b-ve83x6wi16]  .station-checkedout-since-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.station[b-ve83x6wi16]  .station-checkedout-action {
    flex-shrink: 0;
    height: 3.25rem;
    padding: 0 1.25rem;
    font-size: 1.0625rem;
}

/* Below the counter's landscape width the row stacks instead of squeezing. */
@media (max-width: 700px) {
    .station[b-ve83x6wi16]  .station-checkedout-row {
        flex-wrap: wrap;
    }

    .station[b-ve83x6wi16]  .station-checkedout-action {
        width: 100%;
    }
}

/* --- Today's reservations under the scanner (child component) --- */

/* The idle screen centres its heading and hint; the list below it reads as a list. */
.station[b-ve83x6wi16]  .station-today {
    width: 100%;
    margin-top: 2.5rem;
    text-align: left;
}

.station[b-ve83x6wi16]  .station-today-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.station[b-ve83x6wi16]  .station-today-list li {
    cursor: pointer;
}

.station[b-ve83x6wi16]  .station-today-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.station[b-ve83x6wi16]  .station-today-avatar {
    flex-shrink: 0;
}

.station[b-ve83x6wi16]  .station-today-main {
    flex: 1;
    min-width: 0;
}

.station[b-ve83x6wi16]  .station-today-name {
    font-size: 1.25rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-today-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    color: #6c757d;
}

/* Who the item is held for is what the counter looks for in this list. */
.station[b-ve83x6wi16]  .station-today-holder {
    color: #575445;
    font-weight: 600;
}

/* The empty state shares the list placeholder, but here it sits under the scanner rather than
   filling a tab of its own, so it takes less room. */
.station[b-ve83x6wi16]  .station-today .station-list-placeholder {
    padding: 2rem 1rem;
}

/* Below the counter's landscape width the row stacks instead of squeezing. */
@media (max-width: 700px) {
    .station[b-ve83x6wi16]  .station-today-row {
        flex-wrap: wrap;
    }
}

/* Dialogs are sized for the kiosk in StationLayout.razor.css, so every station screen shares them. */

/* --- Baskets and the pickup screen (child components) ---

   A scan lands in a list instead of taking over the screen, so n labels become one handover or one
   batch check-in. The rows are read at arm's length and their buttons are pressed with a thumb, like
   everything else here. */

.station[b-ve83x6wi16]  .station-basket {
    width: 100%;
    margin-top: 2rem;
    text-align: left;
}

.station[b-ve83x6wi16]  .station-basket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.station[b-ve83x6wi16]  .station-basket-count {
    height: auto;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
}

.station[b-ve83x6wi16]  .station-basket-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.station[b-ve83x6wi16]  .station-basket-avatar {
    flex-shrink: 0;
}

.station[b-ve83x6wi16]  .station-basket-main {
    flex: 1;
    min-width: 0;
}

.station[b-ve83x6wi16]  .station-basket-name {
    font-size: 1.375rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-basket-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    color: #6c757d;
}

/* Somebody else has this piece booked: the counter has to see that before it walks out of the door. */
.station[b-ve83x6wi16]  .station-basket-warning {
    color: #b43c2f;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-basket-overruled {
    color: #575445;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-basket-blocked {
    border-left: 4px solid #e6b939;
}

.station[b-ve83x6wi16]  .station-basket-item-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.station[b-ve83x6wi16]  .station-basket-action {
    height: 3.25rem;
    padding: 0 1.25rem;
    font-size: 1.0625rem;
}

/* A button that is only its icon still has to be a thumb target, so it stays square at the height
   the other row buttons have. */
.station[b-ve83x6wi16]  .station-basket-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    padding: 0;
}

/* MobileKit gives every button icon a right margin to keep it off the label; there is no label here,
   so that margin only pushes the icon off centre. */
.station[b-ve83x6wi16]  .station-basket-action-icon ion-icon {
    margin: 0;
    font-size: 1.5rem;
}

.station[b-ve83x6wi16]  .station-basket-actions {
    display: flex;
    margin-top: 1rem;
}

.station[b-ve83x6wi16]  .station-basket-actions > * {
    flex: 1;
}

.station[b-ve83x6wi16]  .station-basket-hint {
    margin: 0.75rem 0 0;
    font-size: 1.0625rem;
    color: #b43c2f;
}

/* --- Checkout screen (child component) ---

   The form the basket leaves through. It is the only screen here that is typed into by hand, so its
   fields are the size of the ones in the station's dialogs rather than the phone app's. */

.station[b-ve83x6wi16]  .station-checkout {
    text-align: left;
}

.station[b-ve83x6wi16]  .station-checkout-list {
    margin-top: 1rem;
}

.station[b-ve83x6wi16]  .station-checkout-price {
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.station[b-ve83x6wi16]  .station-checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 1.25rem;
    border-top: 1px solid var(--colorLine);
    font-size: 1.375rem;
}

.station[b-ve83x6wi16]  .station-checkout .label {
    font-size: 1.125rem;
}

.station[b-ve83x6wi16]  .station-checkout .form-control {
    height: 3.5rem;
    font-size: 1.25rem;
}

.station[b-ve83x6wi16]  .station-pickup-section {
    margin-top: 1.75rem;
}

/* A settled line is out of the way; an open one is what still has to be answered for. */
.station[b-ve83x6wi16]  .station-pickup-done {
    opacity: 0.75;
}

.station[b-ve83x6wi16]  .station-pickup-state-done {
    color: #4caf50;
    font-weight: 600;
}

.station[b-ve83x6wi16]  .station-pickup-state-open {
    color: #e6b939;
    font-weight: 600;
}

/* What the pickup will cost, right above the button that hands it over. */
.station[b-ve83x6wi16]  .station-pickup-total {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colorLine);
}

.station[b-ve83x6wi16]  .station-pickup-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 1.25rem;
}

.station[b-ve83x6wi16]  .station-pickup-total-row strong {
    font-size: 1.5rem;
}

.station[b-ve83x6wi16]  .station-pickup-total-note {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: #6c757d;
}

/* The pickup screen keeps a box of its own, because scanning verifies items there. */
.station-pickup-scan[b-ve83x6wi16] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

.station-pickup-scan[b-ve83x6wi16]  .station-input {
    height: 3.5rem;
    font-size: 1.25rem;
    text-align: center;
}

/* Below the counter's landscape width the rows stack instead of squeezing. */
@media (max-width: 700px) {
    .station[b-ve83x6wi16]  .station-basket-row {
        flex-wrap: wrap;
    }

    .station[b-ve83x6wi16]  .station-basket-item-actions {
        width: 100%;
    }
}
/* station/Shared/StationLayout.razor.rz.scp.css */
/* The kiosk owns the whole viewport: brand bar on top, the page itself taking whatever is left. */
.station-page[b-p686hhxxor] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

.station-brand[b-p686hhxxor] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ececec;
    /* The four brand colours as a hairline under the bar. */
    background:
        linear-gradient(90deg, #b43c2f 0 25%, #575445 25% 50%, #87a2a0 50% 75%, #e6b939 75% 100%) bottom / 100% 4px no-repeat,
        #fff;
}

.station-brand-logo[b-p686hhxxor] {
    height: 3rem;
    width: auto;
}

.station-brand-text[b-p686hhxxor] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Who has the station unlocked, and the lock button, at the right end of the bar (issue #622). */
.station-user[b-p686hhxxor] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.station-user-name[b-p686hhxxor] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #575445;
}

.station-user-name ion-icon[b-p686hhxxor] {
    font-size: 1.6rem;
}

.station-lock-button[b-p686hhxxor] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0 1rem;
}

.station-brand-title[b-p686hhxxor] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #575445;
}

.station-brand-subtitle[b-p686hhxxor] {
    font-size: 0.9375rem;
    color: #6c757d;
}

/* --- Dialogs (shared components) ---

   The dialogs belong to the phone app and are sized for a hand. At the counter they are read
   standing in front of the screen and operated with a finger, so on every station screen they grow
   to match the rest of the kiosk. Here in the layout rather than on one page, so the scanner and
   Inventar get the same size. The selectors repeat the theme's own .dialogbox chain so they outweigh
   it, and the .station-page scope keeps the same dialogs phone-sized everywhere else. */

/* Bootstrap caps the dialog at 500px; the content below decides the width from here on. */
.station-page[b-p686hhxxor]  .dialogbox .modal-dialog {
    max-width: none;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content {
    width: calc(100% - 3rem);
    max-width: 40rem;
    max-height: 90vh;
    border-radius: 1.25rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-icon {
    margin-top: 2.25rem;
    margin-bottom: 0;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-icon .badge-indicator {
    height: 4.5rem;
    width: 4.5rem;
    font-size: 3.5rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-header {
    padding: 1.5rem 2rem 0.75rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 2.125rem;
    font-weight: 700;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body {
    padding: 0 2rem;
    margin-bottom: 2rem;
    font-size: 1.625rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body .label,
.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body .form-label {
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
}

/* The field is the one thing on the dialog that gets typed into, by finger or by scanner. */
.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body .form-control {
    height: 4.5rem;
    padding: 0 1rem;
    font-size: 1.75rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body small {
    font-size: 1.25rem;
}

.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .modal-body .alert {
    font-size: 1.375rem;
}

/* Confirm and cancel are thumb targets here, like every other button on the station. */
.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .btn-inline .btn,
.station-page[b-p686hhxxor]  .dialogbox .modal-dialog .modal-content .btn-list .btn {
    min-height: 5.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* "Barcode einem Produkt zuweisen": the code and the product rows, tapped with a finger. */
.station-page[b-p686hhxxor]  .dialogbox .assign-barcode-code {
    font-size: 1.75rem;
}

.station-page[b-p686hhxxor]  .dialogbox .assign-barcode-result {
    min-height: 4.5rem;
    padding: 0.75rem 0.25rem;
}

.station-page[b-p686hhxxor]  .dialogbox .assign-barcode-title {
    font-size: 1.5rem;
}

.station-page[b-p686hhxxor]  .dialogbox .assign-barcode-sku {
    font-size: 1.1rem;
}

/* The camera dialog, sized like the dialogs above. The overlay class is repeated so these outweigh
   the component's own phone-sized rules whatever order the stylesheets are bundled in. */
.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-container {
    max-width: 40rem;
    border-radius: 1.25rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-header {
    padding: 1.5rem 2rem 1rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-title {
    font-size: 2.125rem;
    font-weight: 700;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-close {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.5rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-video {
    min-height: 22rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-hint {
    padding: 1rem 2rem 1.25rem;
    font-size: 1.375rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-file-upload {
    padding: 0 2rem 1.5rem;
}

.station-page[b-p686hhxxor]  .qr-scanner-overlay .qr-scanner-file-label {
    min-height: 4rem;
    padding: 0.5rem 1.5rem;
    font-size: 1.375rem;
}

/* A touchscreen, not a phone: the menu button and its entries are sized for a finger at arm's length. */
.station-menu-button[b-p686hhxxor],
.station-menu-close[b-p686hhxxor] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 0.75rem;
    background: #f3f3f1;
    color: #575445;
    font-size: 2rem;
}

.station-menu-button:active[b-p686hhxxor],
.station-menu-close:active[b-p686hhxxor] {
    background: #e6e4df;
}

/* Something is waiting on another screen: a basket, or rentals that are late. */
.station-menu-dot[b-p686hhxxor] {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #b43c2f;
    border: 2px solid #fff;
}

.station-menu[b-p686hhxxor] {
    width: min(22rem, 85vw);
    border-right: none;
}

.station-menu-head[b-p686hhxxor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
}

.station-menu-list[b-p686hhxxor] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.station-menu-item[b-p686hhxxor] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    padding: 0 1.25rem;
    border: none;
    border-radius: 0.75rem;
    background: transparent;
    color: #575445;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
}

.station-menu-item ion-icon[b-p686hhxxor] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.station-menu-item:active[b-p686hhxxor] {
    background: #f3f3f1;
}

.station-menu-item.active[b-p686hhxxor] {
    background: #b43c2f;
    color: #fff;
}

.station-menu-badge[b-p686hhxxor] {
    margin-left: auto;
    min-width: 2rem;
    font-size: 1rem;
}

.station-menu-item.active .station-menu-badge[b-p686hhxxor] {
    background: #fff !important;
    color: #b43c2f !important;
}