html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Font selector: the choice is stored in localStorage (app_font) and set on <html data-font> by js/fontHelper.js.
   MudBlazor takes every font from these variables, so overriding them here changes the whole app.
   "html:root" is more specific than the ":root" rule written by MudThemeProvider. Manrope is the default. */
html:root {
    --app-font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mud-typography-default-family: var(--app-font-family);
    --mud-typography-h1-family: var(--app-font-family);
    --mud-typography-h2-family: var(--app-font-family);
    --mud-typography-h3-family: var(--app-font-family);
    --mud-typography-h4-family: var(--app-font-family);
    --mud-typography-h5-family: var(--app-font-family);
    --mud-typography-h6-family: var(--app-font-family);
    --mud-typography-subtitle1-family: var(--app-font-family);
    --mud-typography-subtitle2-family: var(--app-font-family);
    --mud-typography-body1-family: var(--app-font-family);
    --mud-typography-body2-family: var(--app-font-family);
    --mud-typography-button-family: var(--app-font-family);
    --mud-typography-caption-family: var(--app-font-family);
    --mud-typography-overline-family: var(--app-font-family);
}

html:root[data-font="plus-jakarta-sans"] {
    --app-font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html:root[data-font="inter"] {
    --app-font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html:root[data-font="roboto"] {
    --app-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Interface size (70-100%): js/zoomHelper.js writes data-zoom and --app-zoom on <html> (nothing at 100%).
   A CSS zoom scales px and rem alike, but viewport units are scaled too, so a "100vh" box would end up
   shorter than the window. Never write 100vw/100vh/100dvh in the styles: use var(--app-vw) and var(--app-vh),
   which divide by the zoom (for a fraction or an offset: calc(var(--app-vh) * 0.9 - 200px)).
   The dvh value goes in a second rule so that old browsers without dvh keep the vh one. */
html:root {
    --app-vw: 100vw;
    --app-vh: 100vh;
}

@supports (height: 100dvh) {
    html:root {
        --app-vh: 100dvh;
    }
}

html:root[data-zoom] {
    zoom: var(--app-zoom);
    --app-vw: calc(100vw / var(--app-zoom));
    --app-vh: calc(100vh / var(--app-zoom));
}

@supports (height: 100dvh) {
    html:root[data-zoom] {
        --app-vh: calc(100dvh / var(--app-zoom));
    }
}

/* MudBlazor limits a dialog to "100dvh - appbar": with the zoom that would be too short */
html:root[data-zoom] .mud-dialog {
    max-height: calc(var(--app-vh) - var(--mud-appbar-height));
}

/* Dark theme: the "page with a note" strip under a thumbnail gets a slightly stronger warning tint (light theme keeps 22%) */
.app-dark {
    --app-note-tint: 28%;
}

/* Company mark on the login page: its squares are dark, so in the dark themes it sits on a light rounded plate */
.app-dark .login-logo {
    box-sizing: content-box;
    padding: 10px;
    border-radius: 12px;
    background-color: #FFFFFF;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.btn-compact-text {
    padding: 6px !important; /* Riduce il padding interno per pareggiare l'hover con la variante Filled */
}

    /* Opzionale: per ridimensionare precisamente il cerchio di hover/ripple */
    .btn-compact-text .mud-button-root {
        width: 36px;
        height: 36px;
    }

.notifications-dialog-overlay-only {
    overflow: hidden !important;
}

    .notifications-dialog-overlay-only .mud-dialog-container {
        overflow: hidden !important;
    }

/* Global blur for all MudBlazor dialog overlays */
.mud-overlay-dialog {
    background-color: rgba(15, 23, 42, 0.40) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Dialog buttons: when they do not fit (very narrow screens, longer languages and fonts) they wrap onto a second line instead of leaving the dialog */
.mud-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Dialogs with more air (Denis, 22/10/2026): wider, more room around the content and between its parts, taller rows in the tables.
   The page and signature viewers (full screen) and the progress dialog have their own rules. */
.mud-dialog.mud-dialog-width-sm {
    max-width: 720px;
}

.mud-dialog.mud-dialog-width-lg {
    max-width: 1360px;
}

/* Small confirmation dialogs wrap their text: give them a comfortable minimum width */
.mud-dialog:not(.mud-dialog-width-full) {
    min-width: min(440px, calc(var(--app-vw) - 32px));
}

.mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-title {
    padding: 22px 72px 10px 32px;
}

.mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-content {
    padding: 16px 32px 12px;
}

.mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-actions {
    padding: 12px 32px 24px;
    column-gap: 12px;
    row-gap: 8px;
}

.mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.operation-progress-dialog-host) .mud-table-dense .mud-table-cell {
    padding: 10px 16px;
}

/* Notifications dialog (almost full screen): a bit more room around the three sections; phones keep the tight layout */
@media (min-width: 601px) {
    .mud-dialog.notifications-dialog-root .mud-dialog-content {
        padding: 16px 24px 8px;
    }

    .mud-dialog.notifications-dialog-root .mud-dialog-actions {
        padding: 12px 24px 20px;
    }
}

/* A long name without spaces (file names) may break anywhere, so a phone table never grows wider than its box */
.app-break-anywhere {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A line of text that must not break (names of pages in a table); phones stack the cells and need it to wrap */
@media (min-width: 601px) {
    .app-nowrap {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    /* Phones: 16px of margin on each side instead of 32px, so the content gets the room */
    .mud-dialog.mud-dialog-width-full:not(.mud-dialog-fullscreen) {
        width: calc(100% - 32px);
    }

    /* Stacked table cells (label + value): a little less side padding, so "Nom d'utilisateur" + value fit at 320px */
    .mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.operation-progress-dialog-host) .mud-table-dense .mud-table-cell {
        padding: 8px 12px;
    }

    .mud-dialog:not(.mud-dialog-width-full):not(.mud-dialog-fullscreen) {
        max-width: calc(var(--app-vw) - 32px);
    }

    .mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-title {
        padding: 16px 56px 8px 20px;
    }

    .mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-content {
        padding: 12px 20px 8px;
    }

    .mud-dialog:not(.approval-preview-dialog):not(.sv-dialog):not(.notifications-dialog-root):not(.operation-progress-dialog-host) .mud-dialog-actions {
        padding: 8px 20px 16px;
    }
}

.appbar-theme-popover .appbar-theme-item-selected,
.appbar-culture-popover .appbar-culture-item-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    color: var(--mud-palette-primary) !important;
    border-radius: 4px;
    font-weight: 600;
}

.appbar-theme-popover .appbar-theme-icon-selected {
    color: var(--mud-palette-primary) !important;
}

/* Theme menu: color, mode and font are sections that open one at a time, so the list stays short on a phone.
   The menu never gets taller than the screen: it scrolls inside (phone held sideways). */
.appbar-theme-popover {
    min-width: 240px;
    max-height: calc(var(--app-vh) - 72px);
    overflow-y: auto;
}

.appbar-theme-popover .appbar-section-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.appbar-theme-popover .appbar-section-value {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.appbar-theme-popover .appbar-section-open {
    background-color: var(--mud-palette-action-default-hover);
}

.appbar-theme-popover .appbar-section-item {
    padding-left: 28px;
}

/* Interface size row of the theme menu: label, then − / value / + */
.appbar-theme-popover .appbar-zoom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 4px 16px;
}

.appbar-theme-popover .appbar-zoom-label {
    font-size: 0.875rem;
}

.appbar-theme-popover .appbar-zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.appbar-theme-popover .appbar-zoom-value {
    min-width: 52px;
    font-weight: 600;
}

/* App bar on a phone, signed in only (the login page keeps its own spacing): hamburger and avatar 8px closer to the edges,
   the same distance between theme, language, notifications and avatar, touch targets of at least 44px.
   MudBlazor margins (Edge.Start, ms-1) are !important, so these must be too. */
@media (max-width: 600px) {
    .appbar-auth .appbar-menu-button {
        margin-left: -20px !important;
    }

    .appbar-auth .style-appbar-actions {
        gap: 0 !important;
        margin-right: -17px;
    }

    .appbar-auth .style-appbar-actions .ms-1 {
        margin-left: 0 !important;
    }

    .appbar-auth .style-user-menu-button {
        width: 52px !important;
        height: 52px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .appbar-auth .appbar-lang-button {
        min-width: 52px;
        min-height: 44px;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/* Finger: rows and size buttons get a touch target of 44px (mouse and trackpad keep the compact size) */
@media (pointer: coarse) {
    .appbar-theme-popover .mud-menu-item {
        min-height: 44px;
    }

    .appbar-theme-popover .appbar-zoom-controls .mud-icon-button {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .appbar-theme-popover .appbar-zoom-value {
        min-height: 44px;
    }
}

.appbar-culture-popover img.appbar-culture-flag {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.appbar-culture-popover img.appbar-culture-flag-selected {
    border-color: var(--mud-palette-primary);
}

.jobdetails-sort-popover .jobdetails-sort-item-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    color: var(--mud-palette-primary) !important;
    border-radius: 4px;
    font-weight: 600;
}

    /* Se vuoi proprio "sottolineato" */
    .jobdetails-sort-popover .jobdetails-sort-item-selected .mud-list-item-text,
    .jobdetails-sort-popover .jobdetails-sort-item-selected .mud-list-item-text > p {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
    }

.jobdetails-sort-popover .jobdetails-sort-icon-selected {
    color: var(--mud-palette-primary) !important;
}

.jobdetails-sort-popover .jobdetails-sort-item-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    color: var(--mud-palette-primary) !important;
    border-radius: 4px;
    font-weight: 600;
}

.jobdetails-sort-popover .jobdetails-sort-icon-selected {
    color: var(--mud-palette-primary) !important;
}

/* Icons and tool buttons of the JPage programs (wwwroot/icons, drawn once for the Client and the web): flat, one drawing per icon, the
   states are drawn here. Same idea as the Client's toolbar buttons: only the icon, a background on hover, press and selection. The name of
   a button is its tooltip; on a touch screen press and hold shows it (Scripts/toolHints.ts) and the legend lists every icon. */
.app-icon,
.app-status-icon {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    width: var(--app-icon-size, 32px);
    height: var(--app-icon-size, 32px);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.app-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.app-tool-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

@media (hover: hover) {
    .app-tool-btn:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--app-tool-accent, var(--mud-palette-primary)) 14%, transparent);
    }
}

.app-tool-btn:active:not(:disabled) {
    background-color: color-mix(in srgb, var(--app-tool-accent, var(--mud-palette-primary)) 24%, transparent);
}

.app-tool-btn--selected {
    background-color: color-mix(in srgb, var(--app-tool-accent, var(--mud-palette-primary)) 18%, transparent);
    border-color: var(--app-tool-accent, var(--mud-palette-primary));
}

.app-tool-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

/* A disabled button (ours or a MudBlazor icon button holding an icon) loses its colors */
.app-tool-btn:disabled .app-icon,
.app-tool-btn:disabled .app-status-icon,
.mud-icon-button.mud-disabled .app-icon,
.mud-icon-button:disabled .app-icon {
    filter: grayscale(1);
}

.mud-icon-button.mud-disabled .app-icon,
.mud-icon-button:disabled .app-icon {
    opacity: 0.4;
}

/* The bar of the pages grid is a container (jdbar): what counts is its own width, not the screen's. On a phone the side columns leave it
   200-260 px, so below 300 px the icons and buttons get a little smaller and the bar stays low. */
@container jdbar (max-width: 299px) {
    .app-tool-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 3px;
    }

    .app-tool-btn .app-icon,
    .app-tool-btn .app-status-icon {
        width: 28px !important;
        height: 28px !important;
    }
}

/* The small "PDF" mark of a page that is drawn from its Low-Res PDF instead of a JPEG of HCApproval (PdfSourceBadge): bottom right of the picture box */
.mud-tooltip-root.pdf-source-badge-root {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 5;
    display: block;
}

.pdf-source-badge {
    display: block;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: rgba(15, 23, 42, 0.72);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: default;
    user-select: none;
}

/* Thumbnail zoom of the pages grid (small icon, slider, large icon). Two details of MudBlazor's small slider are corrected:
   1) its tooltip box is taller than the slider (the line height adds 5 px under it), so the slider sat 2.5 px above the icons: the box becomes
      a flex box that centres the slider;
   2) its thumb is a 2 px element enlarged six times, which gives an oval, soft circle that also sticks out of the track by 5 px at each end
      (so the gap to the icon looked different on the left and on the right): a real 12 px circle that stays inside the track. */
.style-thumb-zoom-host .mud-tooltip-root.mud-tooltip-inline {
    display: flex;
    align-items: center;
}

.style-thumb-zoom-slider.mud-slider.mud-slider-small .mud-slider-input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    transform: none;
}

.style-thumb-zoom-slider.mud-slider.mud-slider-small .mud-slider-input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    transform: none;
}

/* Foldable bottom bars (pages grid and preview). On small screens the commands pile up on several rows and take the room of the pages: the
   arrow (AppBarToggle) folds them away. It shows only where the commands need more than one row: the grid bar from its own width (below),
   the preview bar below 1100 px (ApprovalPreviewDialog.razor.css). The state lives on <html data-bar-grid|preview="closed"> (js/barCollapse.js). */
.app-bar-handle {
    display: none;
    width: 100%;
}

/* MudBlazor gives the tooltip's own box display: inline-block; here it fills the strip */
.app-bar-handle .app-bar-handle__tip.mud-tooltip-root {
    display: block;
    width: 100%;
}

.app-bar-handle__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.app-bar-handle__button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.app-bar-handle__icon {
    transition: transform 200ms ease;
}

html[data-bar-grid="closed"] .app-bar-handle--grid .app-bar-handle__icon,
html[data-bar-preview="closed"] .app-bar-handle--preview .app-bar-handle__icon,
html[data-bar-signature="closed"] .app-bar-handle--signature .app-bar-handle__icon {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .app-bar-handle__button:hover {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
        color: var(--mud-palette-text-primary);
    }
}

/* Folding of the grid bar: the groups sit in a box whose height goes from its content to zero */
.app-bar-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 200ms ease;
}

.app-bar-collapse__inner {
    min-height: 0;
    overflow: hidden;
}

/* The groups of the grid bar need about 780 px to sit on one row: below that they wrap and the arrow shows */
@container jdbar (max-width: 799px) {
    .jd-bar .app-bar-handle {
        display: block;
    }

    html[data-bar-grid="closed"] .jd-bar .app-bar-collapse {
        grid-template-rows: 0fr;
    }

    /* Folded commands can no longer take the focus (after the fold, so the closing is seen) */
    html[data-bar-grid="closed"] .jd-bar .app-bar-collapse__inner {
        visibility: hidden;
        transition: visibility 0s linear 200ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-bar-collapse,
    .app-bar-handle__icon {
        transition: none;
    }
}

/* The name of a button, shown by a long press on a touch screen */
.app-hint {
    position: fixed;
    z-index: 10000;
    max-width: calc(var(--app-vw) * 0.8);
    padding: 6px 10px;
    border-radius: 8px;
    background-color: #0F172A;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}