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;
}
.account-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 1rem;
}

.account-label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.account-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.account-input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 0;
}

.account-validation {
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

.account-select {
    appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    /* Down arrow drawn with gradients, so no image file or inline SVG is needed. */
    background-image: linear-gradient(45deg, transparent 50%, var(--mud-palette-text-secondary) 50%),
        linear-gradient(135deg, var(--mud-palette-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

.account-select option {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.captcha-image {
    display: block;
    max-width: calc(100% - 3rem);
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.captcha-refresh {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    cursor: pointer;
}

.captcha-refresh:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
}

.captcha-refresh:disabled {
    opacity: 0.5;
    cursor: wait;
}

.account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.account-links a {
    color: var(--mud-palette-primary);
}

.recovery-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.75rem;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    user-select: all;
}

.manage-form {
    max-width: 480px;
}

.conversation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.conversation-message {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    white-space: pre-wrap;
}

.conversation-mine {
    align-self: flex-end;
    border: 1px solid var(--mud-palette-primary);
}

.conversation-theirs {
    align-self: flex-start;
}

.conversation-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-logo {
    max-height: 36px;
    max-width: 160px;
}

/* A light band sweeps across the logo's own pixels (masked by the logo), then waits for the next cycle. */
.site-logo-shine {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.site-logo-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    background-position: 120% 0;
    -webkit-mask: var(--logo-shine-url) center / contain no-repeat;
    mask: var(--logo-shine-url) center / contain no-repeat;
    animation: var(--logo-shine-animation);
}

@media (prefers-reduced-motion: reduce) {
    .site-logo-shine::after {
        animation: none;
        display: none;
    }
}

.account-welcome {
    white-space: pre-wrap;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 1rem;
}

.content-page img {
    max-width: 100%;
    height: auto;
}

.content-page table {
    border-collapse: collapse;
}

.content-page td,
.content-page th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.25rem 0.5rem;
}

.content-page a {
    color: var(--mud-palette-primary);
}

/* MudBlazor's reset zeroes list padding, which pushes numbers and bullets outside the box. Restore the same
   indent in the editor, the stored preview, content pages and chat messages so they all look alike. */
.rz-html-editor-content ul,
.rz-html-editor-content ol,
.content-page ul,
.content-page ol,
.conversation-html ul,
.conversation-html ol {
    padding-left: 2em;
    margin: 0.4em 0;
    list-style-position: outside;
}

.rz-html-editor-content ul,
.content-page ul,
.conversation-html ul {
    list-style-type: disc;
}

.rz-html-editor-content ol,
.content-page ol,
.conversation-html ol {
    list-style-type: decimal;
}

.rz-html-editor-content li,
.content-page li,
.conversation-html li {
    margin: 0.15em 0;
}

.rz-html-editor-content p {
    margin: 0 0 0.5em;
}

.content-page p {
    margin: 0 0 0.75em;
}

.content-page h1,
.content-page h2,
.content-page h3,
.content-page h4 {
    margin: 0.75em 0 0.4em;
}

.content-page > :first-child {
    margin-top: 0;
}

.color-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Radzen's "-base" theme leaves colours to the host app; use the MudBlazor palette so editor text is readable. */
.rz-html-editor {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
}

.rz-html-editor-content {
    color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-primary);
}

.rz-html-editor-content a {
    color: var(--mud-palette-primary);
}

.service-image {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--mud-default-borderradius);
}

.catalog-card {
    height: 100%;
}

/* A service the Admin set to shine: bolder frame and title, and a light band that sweeps across now and then. */
.catalog-card-shine {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 1px rgba(var(--mud-palette-primary-rgb), .25), 0 6px 24px rgba(var(--mud-palette-primary-rgb), .35);
}

.catalog-card-shine .mud-typography-h6 {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.catalog-card-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .16) 53%, transparent 65%);
    transform: translateX(-120%);
    animation: catalog-card-shine 5s ease-in-out infinite;
}

@keyframes catalog-card-shine {
    0%, 70% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-card-shine::after {
        animation: none;
        display: none;
    }
}

/* The whole 16:9 service picture, never cropped; other shapes are fitted inside on a neutral background. */
.catalog-card-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.catalog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Chat: column-reverse keeps the newest messages in view without script. */
.chat-scroll {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    max-height: 460px;
    min-height: 120px;
}

.chat-scroll .conversation {
    max-height: none;
    overflow: visible;
}

.conversation-deleted {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.chat-typing {
    min-height: 1.25rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Admin log viewer */
.log-view {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--mud-palette-background-gray);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
}

.log-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.log-select {
    margin-right: 6px;
    vertical-align: middle;
    accent-color: var(--mud-palette-primary);
}

.log-wrn {
    color: var(--mud-palette-warning);
}

.log-err, .log-ftl {
    color: var(--mud-palette-error);
}

/* CopyableText: a long value on one line, cut with an ellipsis, plus a copy button. */
.copyable {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.copyable-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Tables are often in half-width cards: keep the value short enough that the copy button always stays visible. */
td .copyable {
    max-width: min(13rem, 100%);
}

/* A long list that scrolls inside its own box (recent pages, sign-in attempts); the sticky header row stays visible. */
.scroll-box {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 4px;
}

/* The table's own container must not scroll (it would capture the sticky header); the box does the scrolling. */
.scroll-box .mud-table-container {
    overflow: visible;
}

.scroll-box thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* Branding page: current logo and favicon. */
.brand-preview {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
}

.brand-preview img {
    max-height: 48px;
    max-width: 100%;
}

.brand-preview.favicon img {
    width: 32px;
    height: 32px;
}

/* Notification API payload examples */
.payload-example {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
    font-size: 0.85rem;
}

/* Formatted chat messages: keep paragraphs compact inside a bubble. */
.conversation-html p {
    margin: 0 0 0.4em;
}

.conversation-html p:last-child {
    margin-bottom: 0;
}

.conversation-html a {
    color: var(--mud-palette-primary-lighten);
}

.message-editor .rz-html-editor-content {
    min-height: 80px;
}

/* Printing an invoice: only the invoice itself. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .no-print {
        display: none !important;
    }

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

/* Wallet address with its QR code (Step 23). The white quiet zone keeps phone scanners reliable on the dark theme. */
.wallet-address {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.wallet-qr {
    display: block;
    margin: 0.5rem 0;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
}

/* Advertising banners on member pages (Step 24). */
.ad-banner {
    margin: 0.75rem auto 0;
    max-width: 1280px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.18), rgba(46, 125, 50, 0.04));
}

.ad-banner-footer {
    margin: 0 auto 1rem;
}

.ad-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

a.ad-banner-content:hover .ad-banner-text {
    text-decoration: underline;
}

.ad-banner-image {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}

.ad-banner-text {
    font-weight: 500;
}

/* Copyright line pinned to the bottom of the side menu (the drawer content is a flex column); hidden while the
   drawer is collapsed to icons. */
.nav-copyright {
    margin-top: auto;
    padding: 12px 16px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow-wrap: anywhere;
}

.mud-drawer--closed .nav-copyright {
    display: none;
}

/* Rules, About us and Contact us: readable line length inside the card. */
.content-card {
    max-width: 900px;
}

/* Service editor: the chosen image. */
.service-image-preview {
    display: block;
    max-width: 100%;
    max-height: 160px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
}

/* The price before a discount, crossed out next to the discounted price. */
.price-was {
    margin-right: 0.4em;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    text-decoration-thickness: 1.5px;
}

/* Picture editor: the frame has the crop's shape; the picture moves and scales inside it (see ImageEditor). */
.image-editor-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background: repeating-conic-gradient(#2a2a2a 0% 25%, #1c1c1c 0% 50%) 50% / 20px 20px;
}

.image-editor-picture {
    position: absolute;
    max-width: none;
    height: auto;
    user-select: none;
}

.image-editor-mark {
    position: absolute;
    pointer-events: none;
}

.image-editor-mark-block {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

.image-editor-mark-block img {
    height: 1.3em;
    width: auto;
}

.image-editor-mark-block img:only-child {
    height: 4em;
}

.image-editor-mark-text {
    color: #fff;
    white-space: nowrap;
    line-height: 1.15;
    text-shadow: 0.06em 0.06em 0 rgba(0, 0, 0, 0.6);
}

.image-editor-positions {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0;
}

/* An uploaded service page, below the description; js/service-page.js sets its height to the content. */
.service-page-frame {
    display: block;
    width: 100%;
    height: 480px;
    margin-top: 1rem;
    border: 0;
    border-radius: var(--mud-default-borderradius);
    background: transparent;
}

/* Related articles card on the service page. */
.related-article {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--mud-default-borderradius);
    padding: 6px 8px;
    margin: 0 -8px;
}

.related-article:hover {
    background: var(--mud-palette-action-default-hover);
}

.related-article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rows with an upload button and a file name: long names wrap or shorten instead of pushing past the card. */
.upload-row {
    min-width: 0;
    max-width: 100%;
}

.upload-row > * {
    min-width: 0;
}

.upload-row-grow {
    flex: 1 1 240px;
    min-width: 0;
}

.upload-file-name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* One uploaded HTML page: number, name (wraps), then the actions, which drop below on narrow screens. */
.uploaded-pages {
    padding: 0;
}

.uploaded-page-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.uploaded-page-name {
    flex: 1 1 200px;
}

.uploaded-page-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* A long chosen value in a select is shortened with an ellipsis rather than widening the field. */
.mud-select .mud-input-slot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2FA code tool: big codes, the current window outlined in the primary colour. */
.totp-code .copyable-text {
    font-size: 2rem;
    letter-spacing: 0.15em;
}

.totp-window-current {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

/* The faint picture behind every page (Branding → Background). z-index -1 keeps it under all page content. */
.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(80vmin, 760px);
}

@media print {
    .site-backdrop {
        display: none;
    }
}

.background-preview {
    position: relative;
    height: 220px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.background-preview-image {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.background-preview-text {
    position: relative;
    padding: 12px 16px;
}

/* Categories: sub-categories indented under their main category; icon pictures sized like Material icons. */
.category-sub {
    display: inline-block;
    padding-left: 1.25rem;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.category-icon-img {
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
}

.category-icon-button {
    min-width: 0;
    padding: 4px 8px;
}

.category-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Sign-up: choosing between an identifier code and paying, as two linked tabs (the page is static). */
.signup-ways {
    display: flex;
    margin: 0.25rem 0 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.signup-ways a {
    flex: 1;
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.signup-ways a.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.signup-payment p {
    margin: 0 0 0.5rem;
}

.signup-address {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.signup-address-value {
    display: block;
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
    font-size: 0.9em;
}

.signup-address-note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9em;
    white-space: pre-line;
}

/* Long checkbox groups (e.g. a list of countries) scroll inside the options box. */
.option-checklist {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}