html, body {
    height: 100%;
}

h1:focus {
    outline: none;
}

.metric-value {
    font-variant-numeric: tabular-nums;
}

.theory h2 {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 1.75rem 0 0.75rem;
}

.theory h2:first-child {
    margin-top: 0;
}

.theory p, .theory li {
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.theory .katex-display {
    margin: 1rem 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.theory .callout {
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-background);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

/* Legal and privacy: label and value pairs (the provider's details, each processing item). */
.legal-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
    line-height: 1.65;
}

.legal-details dt {
    font-weight: 500;
}

.legal-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.theory h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 1.25rem 0 0.5rem;
}

@media (max-width: 600px) {
    .legal-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .legal-details dd {
        margin-bottom: 0.5rem;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #222;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Reconnect overlay. Blazor toggles the components-reconnect-* classes on #components-reconnect-modal. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(2px);
    font-family: Roboto, "Segoe UI", sans-serif;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-card {
    background: #1F2937;
    color: #F3F4F6;
    border-radius: 12px;
    padding: 2rem 2.25rem;
    max-width: 26rem;
    margin: 1rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.reconnect-title {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0.75rem 0 0.5rem;
}

.reconnect-text, .reconnect-failed-text {
    line-height: 1.55;
    margin: 0 0 1rem;
    color: #D1D5DB;
}

.reconnect-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid rgba(100, 181, 246, 0.25);
    border-top-color: #64B5F6;
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

.reconnect-button {
    display: none;
    background: #64B5F6;
    color: #0F1B2D;
    border: 0;
    border-radius: 6px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

.reconnect-failed-text { display: none; }

#components-reconnect-modal.components-reconnect-failed .reconnect-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text,
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-failed .reconnect-button,
#components-reconnect-modal.components-reconnect-rejected .reconnect-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Lecture bar: fixed to the bottom of the viewport; the spacer keeps it from covering page content. */
.lecture-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lecture-spacer {
    height: 140px;
}

/* Accessibility helpers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 3000;
    padding: 8px 14px;
    background: #64B5F6;
    color: #0F1B2D;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 8px;
}

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

#main-content:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* "Watch the simulation" (Components/Shared/MonteCarloWatch.razor, wwwroot/js/monte-carlo-animation.js). The SVG
   takes its colours from the theme's variables, so switching theme restyles it with no redraw. In the money is the
   primary blue and out of the money the warning orange: a pair that stays apart for colour-blind readers. */
.mc-anim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mc-anim-speed {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

.mc-anim-speed > span {
    margin-right: 4px;
    color: var(--mud-palette-text-secondary);
}

.mc-anim-speed-button {
    min-width: 44px !important;
}

.mc-anim-speed-button[aria-pressed="true"] {
    background: var(--mud-palette-primary-hover);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mc-anim-chart {
    width: 100%;
    min-height: 280px;
    overflow: hidden;
}

.mc-anim-chart svg {
    display: block;
    max-width: 100%;
    font-family: inherit;
}

.mc-anim .mc-tick, .mc-anim .mc-label {
    font-size: 11px;
    fill: var(--mud-palette-text-secondary);
}

/* Labels drawn over the paths get a halo in the card's colour, so they stay readable. */
.mc-anim .mc-label {
    paint-order: stroke;
    stroke: var(--mud-palette-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.mc-anim .mc-title {
    font-size: 12px;
    fill: var(--mud-palette-text-primary);
}

.mc-anim .mc-grid line {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.mc-anim .mc-axis {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
}

.mc-anim .mc-path {
    fill: none;
    stroke-width: 1;
    stroke-opacity: 0.4;
    stroke-linejoin: round;
}

.mc-anim .mc-path--itm { stroke: var(--mud-palette-primary); }
.mc-anim .mc-path--otm { stroke: var(--mud-palette-warning); }

.mc-anim .mc-path--latest, .mc-anim .mc-path--current {
    stroke: var(--mud-palette-text-primary);
    stroke-opacity: 1;
    stroke-width: 2;
}

.mc-anim .mc-strike, .mc-anim .mc-reference {
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.mc-anim .mc-strike { stroke: var(--mud-palette-text-primary); }
.mc-anim .mc-reference { stroke: var(--mud-palette-secondary); }

.mc-anim .mc-band {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.18;
    stroke: none;
}

.mc-anim .mc-estimate {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
}

.mc-anim .mc-dot { fill: var(--mud-palette-primary); }

.mc-anim-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.mc-swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px solid;
}

.mc-swatch--itm { border-color: var(--mud-palette-primary); }
.mc-swatch--otm { border-color: var(--mud-palette-warning); }
.mc-swatch--strike { border-top-style: dashed; border-color: var(--mud-palette-text-primary); }
.mc-swatch--estimate { border-color: var(--mud-palette-primary); }
.mc-swatch--band { height: 10px; border: 0; background: var(--mud-palette-primary); opacity: 0.3; }
.mc-swatch--reference { border-top-style: dashed; border-color: var(--mud-palette-secondary); }

.mc-anim-readout {
    margin: 12px 0 0;
    min-height: 1.5em;
}

/* "Watch the simulation" on /path-dependent (path-dependent-animation.js): the .mc-anim styles, plus what the payoff
   watches. Each colour also has a line style, a marker or a label. */
.mc-anim .pd-path--active { stroke: var(--mud-palette-primary); }
.mc-anim .pd-path--inactive { stroke: var(--mud-palette-text-secondary); stroke-dasharray: 3 3; }

.mc-anim .pd-spot {
    fill: none;
    stroke: var(--mud-palette-text-primary);
    stroke-width: 2;
    stroke-linejoin: round;
}

.mc-anim .pd-spot--inactive { stroke: var(--mud-palette-text-secondary); stroke-dasharray: 5 4; }

.mc-anim .pd-running {
    fill: none;
    stroke: var(--mud-palette-secondary);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.mc-anim .pd-running-dot { fill: var(--mud-palette-secondary); }
.mc-anim .pd-expiry-spot { fill: var(--mud-palette-text-primary); }
.mc-anim .pd-barrier { stroke: var(--mud-palette-error); stroke-width: 2; }
.mc-anim .pd-fixing { stroke: var(--mud-palette-error); stroke-width: 1; }
.mc-anim .pd-fixing--axis { stroke: var(--mud-palette-text-secondary); }
.mc-anim .pd-european { stroke: var(--mud-palette-text-primary); stroke-width: 1.5; stroke-dasharray: 2 3; }

.mc-anim .pd-knock line {
    stroke: var(--mud-palette-error);
    stroke-width: 3;
    stroke-linecap: round;
}

.mc-anim .pd-knock--small line { stroke-width: 1.5; }

.mc-anim .pd-between {
    fill: none;
    stroke: var(--mud-palette-info);
    stroke-width: 2.5;
}

.mc-anim .pd-knock-label, .mc-anim .pd-between-label, .mc-anim .pd-expiry-label {
    font-size: 12px;
    font-weight: 700;
    fill: var(--mud-palette-text-primary);
}

.pd-swatch--spot { border-color: var(--mud-palette-text-primary); border-top-width: 3px; }
.pd-swatch--active { border-color: var(--mud-palette-primary); }
.pd-swatch--inactive { border-top-style: dashed; border-color: var(--mud-palette-text-secondary); }
.pd-swatch--running { border-color: var(--mud-palette-secondary); border-top-width: 3px; }
.pd-swatch--barrier { border-color: var(--mud-palette-error); }
.pd-swatch--european { border-top-style: dotted; border-color: var(--mud-palette-text-primary); }

.pd-marker {
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    text-align: center;
    vertical-align: middle;
}

.pd-marker--knock { color: var(--mud-palette-error); font-weight: 700; font-size: 1.1rem; line-height: 1; }

.pd-marker--between {
    width: 12px;
    height: 12px;
    margin: 0 9px 0 3px;
    border: 2px solid var(--mud-palette-info);
    border-radius: 50%;
}

.pd-marker--fixing {
    width: 1px;
    height: 10px;
    margin: 0 14px 0 3px;
    background: var(--mud-palette-error);
}

.pd-marker--fixing-axis { background: var(--mud-palette-text-secondary); }

/* "Watch the hedge" on /hedging (hedging-animation.js) and "Watch time decay" on /black-scholes
   (time-decay-animation.js): the .mc-anim styles, plus their own series. Each colour also has a line style, a marker
   or a label: the discrete book is solid and thick, the near-continuous hedge solid and thin, theory dashed. */
.mc-anim .hedge-now { stroke: var(--mud-palette-text-secondary); stroke-width: 1; stroke-dasharray: 2 3; }
.mc-anim .hedge-spot, .mc-anim .hedge-held, .mc-anim .hedge-bs-delta, .mc-anim .hedge-book, .mc-anim .hedge-theory,
.mc-anim .hedge-continuous, .mc-anim .decay-current, .mc-anim .decay-today, .mc-anim .decay-payoff,
.mc-anim .decay-trail polyline {
    fill: none;
    stroke-linejoin: round;
}
.mc-anim .hedge-spot { stroke: var(--mud-palette-text-primary); stroke-width: 2; }
.mc-anim .hedge-spot-dot, .mc-anim .hedge-book-dot { fill: var(--mud-palette-text-primary); }
.mc-anim .hedge-held { stroke: var(--mud-palette-primary); stroke-width: 2.5; }
.mc-anim .hedge-bs-delta { stroke: var(--mud-palette-secondary); stroke-width: 1.5; stroke-dasharray: 5 3; }
.mc-anim .hedge-trade { fill: var(--mud-palette-surface); stroke: var(--mud-palette-primary); stroke-width: 2; }
.mc-anim .hedge-book { stroke: var(--mud-palette-primary); stroke-width: 2.5; }
.mc-anim .hedge-continuous { stroke: var(--mud-palette-secondary); stroke-width: 1.5; }
.mc-anim .hedge-theory { stroke: var(--mud-palette-text-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mc-anim .hedge-error { fill: var(--mud-palette-warning); fill-opacity: 0.25; stroke: none; }
.mc-anim .hedge-error-label, .mc-anim .decay-theta-label { font-size: 12px; font-weight: 700; fill: var(--mud-palette-text-primary); }

.mc-anim .decay-current { stroke: var(--mud-palette-primary); stroke-width: 2.5; }
.mc-anim .decay-today { stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; stroke-dasharray: 2 3; }
.mc-anim .decay-trail polyline { stroke: var(--mud-palette-primary); stroke-width: 1; stroke-opacity: 0.35; }
.mc-anim .decay-payoff { stroke: var(--mud-palette-text-primary); stroke-width: 2; stroke-dasharray: 6 4; }
.mc-anim .decay-strike { stroke: var(--mud-palette-text-secondary); stroke-width: 1; stroke-dasharray: 6 4; }
.mc-anim .decay-intrinsic { stroke: var(--mud-palette-text-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mc-anim .decay-tangent { stroke: var(--mud-palette-warning); stroke-width: 2; }
.mc-anim .decay-dot { fill: var(--mud-palette-primary); }

.hedge-swatch--held { border-color: var(--mud-palette-primary); border-top-width: 3px; }
.hedge-swatch--bs-delta { border-top-style: dashed; border-color: var(--mud-palette-secondary); }
.hedge-swatch--book { border-color: var(--mud-palette-primary); border-top-width: 3px; }
.hedge-swatch--continuous { border-color: var(--mud-palette-secondary); }
.hedge-swatch--theory { border-top-style: dashed; border-color: var(--mud-palette-text-primary); }
.hedge-swatch--error { height: 10px; border: 0; background: var(--mud-palette-warning); opacity: 0.4; }
.hedge-swatch--spot { border-color: var(--mud-palette-text-primary); }
.decay-swatch--current { border-color: var(--mud-palette-primary); border-top-width: 3px; }
.decay-swatch--today { border-top-style: dotted; border-color: var(--mud-palette-text-secondary); }
.decay-swatch--trail { border-color: var(--mud-palette-primary); opacity: 0.4; }
.decay-swatch--payoff { border-top-style: dashed; border-color: var(--mud-palette-text-primary); }
.decay-swatch--strike { border-top-style: dashed; border-top-width: 1px; border-color: var(--mud-palette-text-secondary); }
.decay-swatch--tangent { border-color: var(--mud-palette-warning); }

.hedge-marker--trade {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px 0 4px;
    vertical-align: middle;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 50%;
}

.hedge-anim-summary {
    margin: 8px 0 0;
    font-size: 0.875rem;
}

/* "Watch the tree" (Components/Shared/BinomialTreeWatch.razor, wwwroot/js/binomial-tree-animation.js). The controls,
   legend and readout share the Monte Carlo card's styles. Final nodes that pay off are the primary blue and those that
   pay nothing the warning orange, as in the Monte Carlo card; early exercise is the secondary teal with a thick
   border, so it is not told by colour alone. The tree scrolls sideways inside the card on a narrow screen. */
.tree-anim-params {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.tree-anim-chart {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.tree-anim-chart svg {
    display: block;
    font-family: inherit;
}

.tree-anim .is-hidden { display: none; }

.tree-anim .tree-edge {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.2;
}

.tree-anim .tree-edge--active {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 2.5;
}

.tree-anim .tree-branch-label, .tree-anim .tree-time, .tree-anim .tree-weight {
    font-size: 11px;
    fill: var(--mud-palette-text-secondary);
}

.tree-anim .tree-branch-label {
    paint-order: stroke;
    stroke: var(--mud-palette-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.tree-anim .tree-weight { opacity: 0.85; }

.tree-anim .tree-node { cursor: default; outline: none; }

.tree-anim .tree-node-box {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-inputs);
    stroke-width: 1.5;
}

.tree-anim .tree-node-s, .tree-anim .tree-node-v {
    font-size: 11px;
    fill: var(--mud-palette-text-primary);
}

.tree-anim .tree-node-v { font-weight: 600; }

.tree-anim .tree-node--new .tree-node-box { stroke: var(--mud-palette-text-primary); }
.tree-anim .tree-node--done .tree-node-box { stroke: var(--mud-palette-primary); }
.tree-anim .tree-node--itm .tree-node-box { stroke: var(--mud-palette-primary); stroke-width: 2.5; }
.tree-anim .tree-node--otm .tree-node-box { stroke: var(--mud-palette-warning); stroke-width: 2.5; stroke-dasharray: 4 3; }

.tree-anim .tree-node--exercise .tree-node-box {
    fill: var(--mud-palette-secondary);
    stroke: var(--mud-palette-text-primary);
    stroke-width: 3.5;
}

.tree-anim .tree-node--exercise .tree-node-s, .tree-anim .tree-node--exercise .tree-node-v {
    fill: var(--mud-palette-secondary-text);
}

.tree-anim .tree-node--current .tree-node-box {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 3;
    filter: drop-shadow(0 0 3px var(--mud-palette-primary));
}

.tree-anim .tree-node:focus-visible .tree-node-box {
    stroke: var(--mud-palette-primary);
    stroke-width: 4;
}

.tree-anim-tip {
    position: absolute;
    z-index: 2;
    min-width: 170px;
    max-width: 220px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.tree-anim-formula {
    margin: 12px 0 0;
    min-height: 3em;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.tree-anim-formula > span { display: block; }

.tree-swatch {
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 3px;
    border: 2px solid var(--mud-palette-lines-inputs);
}

.tree-swatch--itm { border-color: var(--mud-palette-primary); }
.tree-swatch--otm { border-color: var(--mud-palette-warning); border-style: dashed; }
.tree-swatch--current { border-color: var(--mud-palette-text-primary); border-width: 3px; }
.tree-swatch--exercise { background: var(--mud-palette-secondary); border-color: var(--mud-palette-text-primary); border-width: 3px; }

@media print {
    .tree-anim-chart { overflow: visible; }
    .tree-anim-chart svg { max-width: 100%; height: auto; }
    .tree-anim-tip { display: none; }
}

/* Print: drop the chrome, widen the content, open collapsed panels. */
@media print {
    .mud-appbar, .mud-drawer, .mud-overlay, .lecture-bar, .lecture-spacer, .no-print, #components-reconnect-modal,
    .mud-snackbar, .mud-popover, .skip-link, #blazor-error-ui {
        display: none !important;
    }

    .mud-main-content {
        padding-left: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
    }

    .mud-container {
        max-width: none !important;
        padding: 0 !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .mud-expand-panel .mud-collapse-container {
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Small screens: keep everything reachable on a phone without horizontal scrolling. */
.mud-table-container, .mud-simple-table {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .appbar-github {
        display: none;
    }

    .appbar-title {
        font-size: 1rem;
    }

    #main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .lecture-bar .mud-button {
        min-width: 0;
        padding: 4px 8px;
    }

    .lecture-bar .mud-button .mud-button-label {
        font-size: 0.8rem;
    }

    .lecture-controls {
        width: 100%;
        justify-content: flex-end;
    }

    .lecture-spacer {
        height: 200px;
    }

    .quotes-table td {
        min-width: 84px;
    }

    .legs-table td:nth-child(1) { width: 40%; }
    .legs-table td:nth-child(2) { width: 30%; }
    .legs-table td:nth-child(3) { width: 22%; }

    .reconnect-card {
        padding: 1.25rem 1rem;
    }
}

/* The footer that ties the lab to the CloudWorrior blog. */
.lab-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1.25rem 1rem 1.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.lab-footer a {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}


/* Language menu: a flag beside each language's name. */
.language-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.language-option .flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The language button: the current language's flag before its code. */
.language-menu .mud-button-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 8px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.language-menu.flag-en .mud-button-label::before { background-image: url("images/flags/en.svg"); }
.language-menu.flag-nl .mud-button-label::before { background-image: url("images/flags/nl.svg"); }
.language-menu.flag-pl .mud-button-label::before { background-image: url("images/flags/pl.svg"); }
.language-menu.flag-de .mud-button-label::before { background-image: url("images/flags/de.svg"); }