html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Compact, professional type scale (tighter than Bootstrap defaults) */
html {
    font-size: 14px;
}

h1, .h1 { font-size: 1.55rem; font-weight: 600; }
h2, .h2 { font-size: 1.2rem; font-weight: 600; }
h3, .h3 { font-size: 1.05rem; font-weight: 600; }
h4, .h4 { font-size: 1rem; font-weight: 600; }
h5, .h5 { font-size: 0.95rem; font-weight: 600; }
h6, .h6 { font-size: 0.85rem; font-weight: 600; }

/* Large "stat" numbers on the dashboards */
.display-6 { font-size: 1.85rem; font-weight: 600; }

/* Slightly tighter tables and controls for data-dense screens */
.table { font-size: 0.9rem; }
/* Field headings: the sidebar's deep-blue accent so they don't get lost in body text — a calmer weight
   and more space below than a shouting all-caps 700, so the heading, field, and helper text read as three
   distinct things (see the filled fields + muted .form-text below). */
.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(5, 39, 103);
    margin-bottom: 0.4rem;
}

/* Framed fields on a tinted form (Option C). The form surface is tinted so white fields stand out as
   distinct, clearly-separated slots — the field heading, the field, and the helper text each read apart.
   Applied app-wide; checkboxes/radios keep their own look. `:has()` scopes the tint to real form areas;
   on a browser without :has the form just stays white and the fields are still framed. Fields keep a
   white background (background-color only, so the select caret is preserved). */
.card-body:has(.form-label), .modal-body:has(.form-label) { background-color: #f4f6fb; }
.form-control, .form-select {
    background-color: #fff;
    border: 1px solid #ccd3e0;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
.form-control-sm, .form-select-sm { padding: 0.35rem 0.6rem; border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: #258cfb; }
/* Match the existing .form-control:focus ring on selects too. */
.form-select:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }
/* Helper/description text: smaller and more muted, set apart from the field above it. */
.form-text { color: #7a8194; font-size: 0.78rem; margin-top: 0.4rem; }
/* Keep the rich-text editor a white field on the tinted form; the toolbar header is a darker shade of the
   form tint (#f4f6fb) so it reads as a distinct header without introducing another color. */
.rte-content { background-color: #fff; }
.rte-toolbar { background-color: #dfe3ef !important; }
/* Data-value labels (checkboxes, radios) are content, not field headings — keep them plain. */
.form-check-label {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.9rem;
    color: inherit;
}
.btn { font-size: 0.875rem; }
/* Uniform spacing between adjacent inline action buttons in table cells, regardless of whether the markup
   left whitespace between them (some rendered flush, some spaced). A cell with two or more buttons becomes a
   flex row with a consistent gap; single-button and non-button cells are untouched. No table cell uses a
   button group, so this never affects intentionally-joined buttons. On browsers without :has, cells keep
   their prior (inconsistent) inline spacing — no regression. */
.table td:has(.btn + .btn) {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    align-items: center;
}
.table td.text-end:has(.btn + .btn) { justify-content: flex-end; }
/* Evidence-request editor: roughly twice the default modal width for the wider form. */
.modal-wide { max-width: 1000px; }

/* Compliance Navigator tree */
.cn-tree { max-width: 56rem; }   /* keep the tree only slightly wider than the safeguard text, not full-width */
.cn-caret { width: 1.6rem; font-size: 1.4rem; line-height: 1; flex: 0 0 auto; text-align: center; text-decoration: none; }
.cn-row { padding: 4px 0; border-bottom: 1px solid #f1f1f1; }
.cn-pct { white-space: nowrap; font-size: 0.85rem; }

/* Completion indicator dots */
.cn-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.cn-dot-red { background: #dc3545; }
.cn-dot-orange { background: #fd7e14; }
.cn-dot-green { background: #198754; }
.cn-dot-grey { background: #adb5bd; }

/* Company tier (MSP): a distinct light-blue header */
.cn-company {
    display: flex; align-items: center; gap: 0.5rem;
    background: #cfe2ff; color: #0b3a6b; border: 1px solid #9ec5fe;
    padding: 0.5rem 0.85rem; border-radius: 0.375rem; margin: 0.75rem 0 0.4rem;
    font-size: 1.05rem; font-weight: 600;
}
.cn-company .cn-caret { color: #0b3a6b; }

/* Safeguard/requirement tier: light-purple banner matching the Help Center category headers. */
.cn-safeguard {
    display: flex; align-items: center; gap: 0.5rem;
    background-color: #efe8fb;
    color: #5b2a86;
    padding: 0.4rem 0.75rem; border-radius: 0.375rem; margin: 0.5rem 0 0.35rem;
}
.cn-safeguard .cn-caret { color: #5b2a86; }
.cn-safeguard .cn-pct { color: rgba(91,42,134,0.8); }

/* Tree row links: controls open the Manage Control page, evidence requests open their submission history. */
.cn-link { text-decoration: none; white-space: normal; }
.cn-link:hover { text-decoration: underline; }
/* The safeguard text sits on the light-purple banner, so keep it the banner's dark purple. */
.cn-safeguard .safeguard-link { color: #5b2a86; }
.cn-safeguard .safeguard-link:hover { color: #5b2a86; text-decoration: underline; }

/* Clickable CIS safeguards: read like normal text, but signal they open the full CIS text on hover. */
.safeguard-link {
    color: inherit;
    text-decoration: none;
    vertical-align: baseline;
    font-weight: inherit;
    white-space: normal;
}
.safeguard-link:hover { color: rgb(5, 39, 103); text-decoration: underline; }
/* Safeguard/requirement catalog: keep the identifier column (number/rule reference) on one line so long
   HIPAA rule references and NIST control numbers don't wrap — overrides the normal-wrap default above. */
.sg-num-cell .safeguard-link { white-space: nowrap; }

/* Compliance Over Time charts: clickable to open an enlarged view. */
.chart-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.chart-clickable:hover { box-shadow: 0 .25rem .85rem rgba(0,0,0,.18); }
.chart-zoom svg { width: 100%; height: auto; }

/* Dashboard metric bars/donuts link to a drill-down; give a subtle hover cue. */
.metric-link { cursor: pointer; border-radius: .375rem; transition: background-color .12s ease; }
.metric-link:hover { background-color: rgba(0,0,0,.04); }
.safeguard-info { color: var(--bs-secondary-color); line-height: 1; }
.safeguard-info:hover { color: rgb(5, 39, 103); }

/* Modals inherit text colour from wherever they're declared in the DOM. Some are declared inside coloured
   banners (e.g. the CIS-text popup sits inside the purple safeguard banner), which turned the body text
   white-on-white. Pin modal text to the default body colour so content is always legible. */
.modal-content { color: var(--bs-body-color, #212529); }

/* Dashboard section headers: a solid bar in the sidebar's colours so each section is clearly called out. */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    color: #fff;
    padding: 0.45rem 0.85rem;
    border-radius: 0.375rem;
    margin: 1.25rem 0 0.85rem;
    font-size: 1rem;
    font-weight: 600;
}
.section-header .section-subtext { color: rgba(255, 255, 255, 0.75); font-weight: 400; }
/* From/To labels sitting inside a section-header bar read as white, not the blue field-heading colour. */
.section-header .form-label { color: #fff; }

/* Highlighted section header (e.g. Task List when open tasks exist): an amber gradient in place of the
   purple, signalling items need attention while matching the app's header shape/typography. */
.section-header.section-header-alert {
    background-image: linear-gradient(90deg, #8a5a16 0%, #b26b00 100%);
}

/* Dashboard chart card headers: light-purple banner (matches the Help Center category headers). */
.dash-chart-header {
    font-size: .95rem;
    font-weight: 600;
    background-color: #efe8fb;
    color: #5b2a86;
    padding: .4rem .6rem;
    border-radius: .375rem;
    margin-bottom: .75rem;
}

/* Company status shown under the half-donut charts: same purple as the chart headers, but plain text on
   a white background (no banner/box). Generous top margin keeps it clear of the donut status badges. */
.company-status {
    margin-top: auto;       /* push to the bottom of the (flex-column) card */
    padding-top: 1.4rem;    /* one blank line of separation above the status text */
    margin-bottom: .5rem;   /* leave one blank line above the card's bottom edge */
    color: #5b2a86;
    background: #fff;
    font-weight: 600;
    line-height: 1.4;
    white-space: pre-wrap;     /* keep the admin's line breaks and wrap long lines */
    overflow-wrap: anywhere;
    /* Don't let a long status widen a max-content card (the MSP overview cards): contribute 0 to the
       container's intrinsic width, then fill it, so the text wraps to the width set by the donuts. */
    width: 0;
    min-width: 100%;
}

/* Rendered Markdown help content (Help Center + contextual "?" modals). */
.help-content h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.help-content h2 { font-size: 1.2rem; margin-top: 1.25rem; }
.help-content h3 { font-size: 1.05rem; margin-top: 1rem; }
.help-content table { width: auto; border-collapse: collapse; margin: .5rem 0 1rem; }
.help-content th, .help-content td { border: 1px solid var(--bs-border-color, #dee2e6); padding: .4rem .6rem; vertical-align: top; }
.help-content pre { background: #f6f8fa; padding: .75rem; border-radius: .375rem; overflow-x: auto; }
.help-content :not(pre) > code { background: #f0f0f0; padding: .1rem .3rem; border-radius: .2rem; }
.help-content blockquote { border-left: 3px solid var(--bs-border-color, #dee2e6); padding-left: .75rem; color: #555; margin-left: 0; }

/* Contextual "?" help modals: render the same Markdown more compactly than the full Help Center page,
   so the text sits in line with the rest of the app's (denser) typography. Scoped to the modal only. */
.modal .help-content { font-size: .875rem; line-height: 1.5; }
.modal .help-content > *:first-child { margin-top: 0; }
.modal .help-content h1 { font-size: 1.15rem; margin: 0 0 .5rem; }
.modal .help-content h2 { font-size: 1.02rem; margin: .9rem 0 .35rem; }
.modal .help-content h3 { font-size: .92rem;  margin: .75rem 0 .3rem; }
.modal .help-content h4 { font-size: .875rem; margin: .6rem 0 .3rem; }
.modal .help-content p  { margin: 0 0 .5rem; }
.modal .help-content ul, .modal .help-content ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.modal .help-content li { margin-bottom: .15rem; }
.modal .help-content table { font-size: .85rem; margin: .35rem 0 .75rem; }
.modal .help-content th, .modal .help-content td { padding: .3rem .5rem; }
.modal .help-content pre { font-size: .8rem; padding: .6rem; }

/* Compact company card: the meters and the donut group are capped to the donuts' natural combined
   width and centered (equal whitespace on each side); the card itself shrinks to just wider than that
   group (used with a col-auto column). */
.cw-card { width: max-content; max-width: 100%; }
.cw-metrics { width: max-content; max-width: 100%; margin-inline: auto; }
.cw-donuts { display: flex; justify-content: center; gap: 2rem; }
.cw-donut { flex: 0 0 150px; min-width: 0; }
/* Keep each donut's status badges within its own cell (single column) so they can never overflow
   into the gap and touch the badges of the neighbouring donut. */
.cw-donut .fw-status-grid { grid-template-columns: auto; }

/* Dashboard half-donut status pills: at most two per line, centered under the gauge. */
.fw-status-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.2rem;
    justify-content: center;
    align-items: start;
    margin-top: 0.15rem;
}

/* Evidence Calendar report: mimics the CIS Evidence Calendar spreadsheet template's colors so the
   on-screen view and the exported .xlsx read as the same thing. */
.evidence-calendar-table thead th {
    background: #215F9A;
    color: #fff;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}
.evidence-calendar-table td.cal-cell { text-align: center; font-weight: 700; min-width: 34px; }
.evidence-calendar-table td.cal-grayed { background-color: #D9D9D9; }
.evidence-calendar-table td.cal-passed { background-color: #B4E5A2; }
.evidence-calendar-table td.cal-failed { background-color: #FFC7CE; }
.cal-legend-swatch {
    display: inline-block; width: 1.3em; text-align: center; font-weight: 700;
    border-radius: 0.2rem; padding: 0 0.15rem;
}
.cal-legend-swatch.cal-passed { background-color: #B4E5A2; }
.cal-legend-swatch.cal-failed { background-color: #FFC7CE; }
.badge { font-weight: 500; }
.navbar-brand { font-size: 1rem !important; }

/* Logos are forced into a uniform circle regardless of the uploaded image size/shape */
.logo-circle {
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid #dee2e6;
    flex: 0 0 auto;
}
.logo-fallback {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #495057;
    font-weight: 600;
    border: 1px solid #dee2e6;
    flex: 0 0 auto;
}

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;
}

/* Rich-text editor toolbar */
.rte-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.rte-ic {
    width: 16px;
    height: 16px;
    display: block;
}

/* Colour picker popover: standard swatches + hex entry. */
.rte-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.rte-color-pop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    margin-top: 2px;
    width: 190px;
    background: #fff;
}

.rte-swatches {
    display: grid;
    grid-template-columns: repeat(7, 20px);
    gap: 3px;
}

.rte-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 3px;
    cursor: pointer;
}

.rte-swatch:hover {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.rte-hex {
    width: 90px;
}

.rte-content:focus {
    outline: none;
}

.rte-content a {
    color: #0d6efd;
    text-decoration: underline;
}

/* Single spacing: single line height and no oversized paragraph gaps. */
.rte-content {
    line-height: 1.15;
}

.rte-content p,
.rte-content ul,
.rte-content ol,
.rte-content blockquote {
    margin: 0 0 0.35rem;
}

.rte-content p:last-child,
.rte-content ul:last-child,
.rte-content ol:last-child {
    margin-bottom: 0;
}

.rte-content ul,
.rte-content ol {
    padding-left: 1.4rem;
}

/* File upload control (FileUpload.razor). A transparent native <input type=file> (.upload-input) is
   overlaid on the drop zone / button so click and native drag-drop both hit the real input. */
.upload-input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.upload-drop {
    position: relative; border: 1.5px dashed var(--bs-border-color, #dee2e6); border-radius: 10px;
    padding: 1.4rem 1rem; text-align: center; background: rgba(13, 110, 253, .03);
    transition: border-color .12s, background .12s; cursor: pointer;
}
.upload-drop:hover { border-color: var(--bs-primary, #0d6efd); background: rgba(13, 110, 253, .07); }
.upload-drop .upload-cloud { color: var(--bs-primary, #0d6efd); display: flex; justify-content: center; margin-bottom: .35rem; }
.upload-drop .upload-big { font-weight: 600; }
.upload-drop .upload-link { color: var(--bs-primary, #0d6efd); text-decoration: underline; }

.upload-files { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.upload-file { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem;
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; }
.upload-file .ic { color: #5b2a86; display: flex; flex: none; }
.upload-file .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file .sz { color: var(--bs-secondary-color, #6c757d); font-size: .8rem; margin-left: auto; flex: none;
    font-variant-numeric: tabular-nums; }
.upload-file .rm { flex: none; border: 0; background: none; color: var(--bs-danger, #dc3545); cursor: pointer;
    padding: .15rem; border-radius: 6px; display: flex; line-height: 0; }
.upload-file .rm:hover { background: rgba(220, 53, 69, .12); }

.upload-compact { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.upload-choose { position: relative; overflow: hidden; }
.upload-count { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; }
/* Stack attached files vertically (one per row), left-aligned, each sized to its content. */
.upload-chips { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: .55rem; }
.upload-chip { display: inline-flex; align-items: center; gap: .4rem; background: #efe8fb; color: #5b2a86;
    border-radius: 999px; padding: .25rem .5rem .25rem .65rem; font-size: .8rem; font-weight: 500; max-width: 100%; }
.upload-chip .cnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-chip .csz { opacity: .7; font-variant-numeric: tabular-nums; }
.upload-chip .x { border: 0; background: none; color: inherit; cursor: pointer; display: flex; line-height: 0;
    opacity: .7; padding: .08rem; border-radius: 999px; }
.upload-chip .x:hover { opacity: 1; background: rgba(91, 42, 134, .18); }
@media (prefers-reduced-motion: reduce) { .upload-drop { transition: none; } }

/* Resizable modal (opt-in via <Modal Resizable="true" />): drag the bottom-right corner to resize.
   The resize handle sits on the dialog; the content fills it and the body scrolls within. */
.modal-dialog.modal-resizable {
    resize: both;
    overflow: hidden;
    /* Bootstrap sets pointer-events:none on .modal-dialog (only .modal-content is interactive),
       which swallows drags on the resize handle — re-enable them here. */
    pointer-events: auto;
    max-width: 98vw;
    width: 1350px;
    min-width: 380px;
    height: 80vh;
    max-height: 94vh;
    min-height: 280px;
    margin: 1.75rem auto;
    display: flex;
}

.modal-dialog.modal-resizable .modal-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog.modal-resizable .modal-body {
    overflow-y: auto;
}