/* WAFTokens — Design System Tokens
 *
 * WCAG AAA contrast reference (7:1 text / 3:1 UI component):
 *   --color-primary (#5B34A8) on white               =  7.2:1  ✓ AAA text
 *   --color-primary-dark (#3D2080) on white          = 12.1:1  ✓ AAA text
 *   --color-accent (#1A5490) on white                =  7.8:1  ✓ AAA text
 *   --color-text-base (#2E2A42) on --color-bg        = ~10.4:1 ✓ AAA text
 *   --color-text-heading (#16132A) on white          = ~17.1:1 ✓ AAA text
 *   white on --color-primary                         =  7.2:1  ✓ AAA (button labels)
 *   --color-input-border on --color-bg               =  5.9:1  ✓ meets 3:1 for UI components
 *   --color-text-muted (#534E6B) on --color-bg       =  5.9:1  ✓ AA — muted text is
 *     supplementary/non-essential only (exempt from AAA 1.4.6 per WCAG note)
 *   --color-border on --color-bg                     =  1.8:1  — decorative separators only;
 *     use --color-input-border for interactive element boundaries
 *
 * Host theming. Where a rule below reads var(--surface, white) or the like,
 * the first name is one a host application may define to restyle the widget
 * (a second theme, say); this sheet never defines it. An application that
 * defines none of them gets the value written after the comma, which is the
 * colour the rule always had. The names: --surface, --bg-primary,
 * --bg-secondary, --fill, --divider, --control-border, --text-primary,
 * --text-on-accent, --accent-fill, --accent-fill-hover, --accent-hover,
 * --status-danger, --status-warning, --status-warning-tint, --scrim,
 * --shadow-1, --shadow-3. The Define Roles buttons read three more the same
 * way, for their shape and their secondary style: --btn-radius,
 * --btn-secondary and --btn-secondary-text / --btn-secondary-border.
 */
:root {
    /* ── Brand primaries ────────────────────────────────────────── */
    --color-primary:       #5B34A8;
    --color-primary-dark:  #3D2080;
    --color-primary-tint:  #F3EEFF;

    /* ── Accent (informational blue) ────────────────────────────── */
    --color-accent:        #1A5490;
    --color-accent-dark:   #0E3A6E;
    --color-accent-tint:   #E8F4FF;

    /* ── Text ───────────────────────────────────────────────────── */
    --color-text-base:     #2E2A42;
    --color-text-heading:  #16132A;
    --color-text-muted:    #534E6B;  /* supplementary/non-essential text only */

    /* ── Surfaces and borders ───────────────────────────────────── */
    --color-surface:       #E6E3EF;  /* panel/section backgrounds */
    --color-border:        #C4BFD8;  /* decorative separators only */
    --color-bg:            #F6F5F9;  /* page/region background */

    /* ── Semantic derived tokens ────────────────────────────────── */
    --color-input-border:  var(--color-text-muted);   /* 5.9:1 on bg — meets WCAG 3:1 */
    --color-hover-bg:      var(--color-primary-tint);
    --color-active-bg:     var(--color-surface);
    --color-disabled-bg:   #E0DDE8;
    --color-disabled-text: #8D899E;

    /* ── Focus indicator ────────────────────────────────────────── */
    /* WCAG 2.4.13 AAA: solid outline, ≥2px, ≥3:1 contrast vs unfocused state */
    --focus-outline:       3px solid var(--color-primary);
    --focus-offset:        2px;

    /* ── Minimum touch target ───────────────────────────────────── */
    /* WCAG 2.5.5 AAA: 44×44 CSS px */
    --touch-target-min:    44px;

    /* ── Border radius ──────────────────────────────────────────── */
    --radius-sm:           4px;
    --radius-md:           8px;
    --radius-lg:           12px;
}

html {
    font-size: 13px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
    overflow: auto !important;
} */

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 5px;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

    a:hover,
    a:focus {
        color: var(--color-accent-dark);
        text-decoration: underline;
    }

    a:focus {
        outline: var(--focus-outline);
        outline-offset: var(--focus-offset);
    }

/* WCAG 2.4.11 / 2.4.13 — global focus indicator for all interactive elements */
:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}

img {
    vertical-align: middle;
}

.base_markup {
    width: 3px;
    height: 3px;
    clip: rect(3px 3px 3px 3px);
    position: absolute;
    color: rgba(255,255,255,0);
}

select:hover,
button:hover,
select:focus,
button:focus {
    background-color: var(--color-hover-bg);
}


.Main_window {
    display: inline-flex;
    flex-wrap: wrap;
}

.LeftRegion_window {
    min-width: 200px;
    max-width: 350px;
}

.RightRegion_window {
    background-color: var(--color-bg);
}

.base_normal {
    display: block;
    background-color: var(--color-surface);
}

    .base_normal:hover {
        background-color: var(--color-hover-bg);
        color: var(--color-text-heading);
    }

.base_window {
    display: inline-block;
    background-color: var(--color-bg);
    overflow: auto;
}

.wCanvas_title,
.base_title {
    display: inline-block;
    text-align: center;
    font-size: large;
    width: 100%
}

.TreeTable2D_window,
.Table2D_window {
    display: table;
    border: 1px solid var(--control-border, black);
    /*position: absolute;
    top: 0px;
    left: 20%;
    width: 80%;*/
}

.Table2D_window tr:hover {
    border-bottom: 2px solid;
}

/* The caption must stay display:table-caption to render above the table
   (a flex/grid caption gets pulled into the table grid). The title text and the
   download button are laid out on one row by an inner .Table2D_titlebar flex
   wrapper that Table2D builds inside the caption. */
.Table2D_title {
    display: table-caption;
    caption-side: top;
    font-size: large;
}

/* One-row title bar inside the caption, laid out as three columns
   (1fr auto 1fr) so the title sits centered over the table and the download
   button (appended here by Table2D) is pinned to the right. The summary span
   auto-places into the empty left column (it is height:0 / hidden). */
.Table2D_titlebar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    padding-bottom: 8px;
}

.Table2D_titletext {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.Table2D_download {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    background-image: url(../images/download.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    cursor: pointer;
}

.Table2D_download:hover {
    background-color: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.Table2D_download:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.TreeTable2D_title {
    display: table-caption;
    font-size: large;
    caption-side: top;
}

.AnchorDownload {
    height: 30px;
    width: 30px;
    background-image: url(../images/download.svg);
    background-position-x: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.LeftRegion_title,
.RightRegion_title,
.wCanvas_markup,
.Tree_markup,
.TreeTable2D_markup,
.Table2D_markup {
    display: block;
    font-size: smaller;
    font-family: 'Courier New';
    height: 0px;
    overflow: hidden;
}
.Table2D_header {
    background-color: var(--color-surface);
}
.TreeTable2D_normal,
.Table2D_normal {
    display: table;
    border: 1px solid var(--control-border, black);
    width: 100%;
}
.TreeTable2D_body, 
.Table2D_body {
    text-align: center;
}

.Table2D_body td .RadioGroup_window{
    display: inline-flex;
    flex-direction: row;
}

    .Table2D_body td .RadioGroup_window .menu_menu {
        width: auto;
        height: auto;
        padding: 2px;
    }

.menu_window {
    text-align: center;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1, 0 2px 8px rgba(22, 19, 42, 0.12));
    z-index: 30;
    position: absolute;
    list-style-type: none;
    list-style-position: inside;
    padding: 0px;
}

.menu_menu {
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}

    .menu_menu:hover {
        background-color: var(--color-hover-bg);
        color: var(--color-primary-dark);
    }
    .menu_menu[aria-disabled=true] {
        opacity: .5;
        background-color: var(--color-disabled-bg);
        color: var(--color-disabled-text);
    }

.menu_active {
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    background-color: var(--color-active-bg);
    color: var(--color-primary);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}


.Tree_window {
    position: relative;
    width: 100%;
}

.Tree_title {
    display: block;
    font-size: large;
    background-color: var(--color-surface);
    color: var(--color-text-heading);
}

.Tree_attention {
    background-color: var(--status-warning-tint, #FFF3CD);
    color: var(--status-warning, #664D03);
}

.TreeNode_item:hover {
    background-color: var(--color-hover-bg);
    color: var(--color-primary-dark);
}

.Tree_active {
    background-color: var(--selected-bg, var(--color-active-bg));
    color: var(--selected-text, var(--color-text-base));
}

.TreeNode_body, .Tree_menu {
    text-align: left;
    list-style-type: none;
    list-style-position: inside;
    padding-left: 10px;
    font-size: small;
    font-style: normal;
    background-color: var(--surface, white);
}

.TreeNode_normal {
    border: none;
    background: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
}

.MultiSelect_window {
    max-height: 50vh;
    overflow-y: scroll;
    background-color: var(--color-bg);
}

.TblGraph_button {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    width: auto;
}

.TblGraph_div {
    display: flex;
}

.TblGraph_div0 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 25%;
}

.TblGraph_div1 {
    position: relative;
    height: 50%;
}

.TblGraph_div2 {
    width: 75%;
    padding: 10px;
}

.Select_title {
    display: inline-block;
}

.PermRestrict_window {
    max-height: 50vh;
    overflow-y: scroll;
}

.Stepper_window {
    width: fit-content;
    display: flex;
    flex-direction:row;
    text-align: center;
    border-radius: 6px;
    border: groove;
    list-style-type: none;
    list-style-position: inside;
    padding: 0px;
    border:none;
    padding-top: 0px;
    padding-bottom: 0px;
}

.Stepper_label {
    display: flex;
    line-height: 2em;
}
    .Stepper_label > img {
        height: 2em;
    }
    .Stepper_label > div {
        margin-left: 0.5em;
    }
.Stepper_image {
    height: 2em;
}

.Stepper_menu {
    text-align: left;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}

    .Stepper_menu:hover {
        background-color: var(--color-hover-bg);
        color: var(--color-primary-dark);
    }
.Stepper_menu[aria-disabled=true] {
    opacity: .5;
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}


.Stepper_active {
    background-color: var(--selected-bg, var(--color-active-bg));
    color: var(--selected-text, var(--color-text-base));
}

.RadioGroup_menu {
    display: block;
}

.RadioGroup_active {
    color: var(--selected-text, var(--color-text-base));
    background-color: var(--selected-bg, var(--color-active-bg));
    box-shadow: var(--selected-mark, none);
}
.RadioGroup_menu > div {
    display: inline-block;
}
.RadioGroup_menu > label {
    display: flex;
}

.CheckboxGroup_window input {
    accent-color: var(--color-primary);
}

.CheckboxGroup_window {
    display: flex;
}
.CheckboxGroup_menu {
    display: inline-block;
}

.CheckboxGroup_active {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.CheckboxGroup_menu > div {
    display: inline-block;
}

.CheckboxGroup_menu > label {
    display: flex;
}


.Dialog_attention,
.InfoDialog_attention,
.InputAsync_attention {
    color: var(--status-danger, firebrick);
    font-style: italic;
    display: inline-block;
}

.Dialog_attention,
.InfoDialog_attention {
    border-color: var(--status-danger, firebrick);
    border:medium;
}

/* A required field keeps one line free beneath it for its validation
   message, so the rows below do not move when the message comes and goes.
   The message is a line of its own and takes that room when it is there.
   (Dialog.js marks the row; 1.5em is for browsers without the lh unit.) */
.Dialog_body > div[data-required="true"]:not(:has(> .Dialog_attention)) {
    padding-bottom: 1.5em;
    padding-bottom: 1lh;
}

.Dialog_body > div[data-required="true"] > .Dialog_attention {
    display: block;
}

.Dialog_body label[data-required=true]:after,
.InfoDialog_body label[data-required=true]:after {
    content: "*";
    color: var(--status-danger, #991b1b); /* 8.3:1 on white — AAA */
}


.SSE_window,
.PagePreviewer_window,
.ContactGetter_window,
dialog.AlertThen_window {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.AlertThen_window {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: var(--scrim, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

.SSE_normal {
    width: 100%;
    height: calc( 100% - 25px);
    overflow-y: auto;
    overflow-x: hidden;
}

.SSE_body {
    width: 60%;
    height: 90%;
    overflow: hidden;
    margin-left: 15%;
    margin-top: 5%;
    position: relative;
    max-width: 250px;
    max-height: 800px;
    background-color: var(--surface, white);
}

.SSE_menu {
    display: block;
    height: 28px;
}

.SSE_left {
    background-image: url("../images/up.svg");
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.125em;
    border: 2px;
    border-color: var(--surface, white);
    padding: 0px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 5px;
}

.SSE_right {
    background-image: url("../images/down.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5em;
    height: 1.125em;
    border: 2px;
    border-color: var(--surface, white);
    padding: 0px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    margin: 5px;
}
.SSE_div0 {
    background-image: var(--icon-close, url("../images/close.png"));
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5em;
    height: 1.125em;
    border: 2px;
    border-color: var(--surface, white);
    padding: 0px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    margin: 5px;
}


.SSE_button {
    height: 24px;
    width: 30px;
    padding: 0;
    margin: 0;
    border: none;
    background-image: var(--icon-close, url(../images/close.png));
    background-size: contain;
    margin-top: 1px;
    margin-right: 5px;
    float: right;
}


PagePreviewer_window {
    overflow: hidden;
}
.PagePreviewer_button {
    position: absolute;
    top: 4%;
    right: 2%;
    z-index: 10;
}


.AlertThen_normal {
    width: 100%;
    max-width: 420px;
    /* Long notify/confirm content scrolls inside the box instead of
       clipping (overflow:hidden) or growing past the viewport. auto
       still clips the rounded corners like hidden did. */
    max-height: calc(100vh - 48px);
    overflow: auto;
    color: var(--color-text-base);
    z-index: 100;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-3, 0 8px 40px rgba(22, 19, 42, 0.28));
}

.AlertThen_title {
    background-color: var(--surface, white);
    color: var(--color-text-heading);
    font-size: var(--text-section, 1.05em);
    font-weight: 600;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.AlertThen_body {
    background-color: var(--surface, white);
    padding: 24px 20px;
    font-size: 1em;
    line-height: 1.5;
}

.AlertThen_button {
    background-color: var(--surface, white);
    padding: 0 20px 20px;
    display: flex;
    justify-content: center;
    /* The same space the dialog's own button row keeps: two answers side by
       side are fills with no edge, and would read as one shape. */
    gap: 10px;
}

.AlertThen_div0 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waf-spinner-img {
    width: 100px;
    height: 100px;
    animation: waf-spin 1.2s linear infinite;
}

@keyframes waf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.PagePreviewer_body {
    display: block;
    height: 98%;
    width: 98%;
    margin: 2%;
    overflow: auto;
    background-color: var(--color-bg);
}

.LEColl_header {
    background-color: var(--color-surface);
    font-weight: bold;
    width: 99%;
}

.InfoEdit_window div {
    overflow-x: hidden;
}

.InfoEdit_item {
    outline: -webkit-focus-ring-color auto 1px;
}

.InfoEdit_div1 {
    border-style: dashed;
}


.MultiSelect_active,
.InfoEdit_active,
.LabelEdit_active {
    background-color: var(--color-primary-tint);
    color: var(--color-primary-dark);
}

.InfoEdit_attention,
.LabelEdit_attention {
    color:var(--status-danger, firebrick);
}

.InfoEdit_div0 {
    overflow: visible;
}



.DateInput_window,
.TextInput_window {
    left: 5px;
    top: 0px;
    width: 90%;
    float: left;
    z-index: 10;
    border-color: var(--color-input-border);
}

.DateInput_window:focus,
.TextInput_window:focus {
    border-color: var(--color-primary);
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.Select_window {
    left: 0px;
    top: 0px;
    float: left;
    z-index: 10;
    border-color: var(--color-input-border);
}
.Select_window:focus {
    border: 2px solid var(--color-primary);
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* The combo input (ComboInput, ComboActive): its own label sits beside the
   field, so it keeps a space from it. Most callers pass no label, and an
   empty one takes no room. */
.CA_window > label:not(:empty) {
    margin-inline-end: 10px;
}

.InfoDialog_attention1 {
    border-color: var(--status-danger, firebrick);
}

.Dialog_window,
.InfoDialog_window {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-color: var(--scrim, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

.Dialog_title,
.InfoDialog_title {
    background-color: var(--surface, white);
    color: var(--color-text-heading);
    padding: 18px 20px;
    font-size: var(--text-section, 1.1em);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* The box below scrolls when its content is taller than the viewport
       cap, so the title (and with it the close button) is pinned to the
       top of the scrolling area — otherwise a long checklist scrolls the
       dialog's own heading and its X out of sight. Opaque background +
       z-index so scrolled content passes UNDER it, and no shrinking: the
       title is never the thing that gives way. */
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
}

.Dialog_normal, .InfoDialog_normal {
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 48px);
    background-color: var(--surface, white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-3, 0 8px 40px rgba(22, 19, 42, 0.28));
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Content inserted directly into the central div (outside the
       scrolling Dialog_body — e.g. editors/previews placed between the
       title and the button row) must scroll INSIDE the white box.
       Without this, anything past max-height rendered below the
       dialog's visible border, on the translucent backdrop.

       Vertical only: dialog content is width-constrained (width 100%
       inside max-width), and anything genuinely wide — a table, a
       preview — scrolls in its own container, so a horizontal bar on
       the dialog itself would only ever be a symptom of a layout bug. */
    overflow-y: auto;
    overflow-x: hidden;
}

.Dialog_body,
.InfoDialog_body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    padding: 24px 20px 20px;
    align-items: start;
    /* ONE scroller per dialog: the box above (.Dialog_normal), never the
       body too. This was `flex: 1; overflow-y: auto`, which let the body
       shrink to nothing whenever content appended after it was tall — its
       widget rows (Submit, Close) were squeezed out of sight — and gave a
       scrollbar inside a scrollbar. flex: none: the body keeps its full
       height and the box scrolls everything. overflow-x: clip, not hidden:
       it still trims anything too wide at the body's edge, but does not make
       the body a scroll container (hidden would force overflow-y: auto). */
    flex: none;
    overflow-x: clip;
}

/* The button row stays in view at the foot of the box while the content
   above it scrolls (the title is pinned at the top the same way). Pinned:
   the dedicated button rows of InfoDialog and AlertThen (notify, confirm),
   and the common page-built row of a WAF.Dialog — its last child, after the
   body, when every child of it is a button. Nothing moves when the content
   fits: sticky only engages once the box scrolls. The white box-shadow
   covers the row's side gutters and bottom margin so scrolled content never
   shows beside or under the pinned row; clip-path keeps that cover from
   reaching up over the content above it. Widget buttons inside the body's
   label/field grid are not pinned (they share rows with labels); with the
   body no longer squeezed they are always reachable in the one scroll. */
.Dialog_normal > .Dialog_body ~ :last-child:has(> button):not(:has(> :not(button))),
.Dialog_normal > .Dialog_controls,
.InfoDialog_normal > .InfoDialog_button,
.AlertThen_normal > .AlertThen_button {
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 0 0 24px var(--surface, white);
    clip-path: inset(-4px -24px -24px -24px);
}

/* A pinned row sits flush on the box's bottom edge, so its 20px bottom
   margin (the :last-child rule below) would vanish once pinned and the
   buttons would touch the edge. Same 20px as padding instead: identical
   when the content fits, and the gap survives pinning. */
.Dialog_normal > .Dialog_body ~ :last-child:has(> button):not(:has(> :not(button))),
.InfoDialog_normal > .InfoDialog_button:last-child {
    margin-bottom: 0;
    padding-bottom: 20px;
}

/* Opaque, or scrolled content shows through the pinned row; zero
   specificity so a page that styles its row's background still wins. */
:where(.Dialog_normal > .Dialog_body ~ :last-child:has(> button):not(:has(> :not(button))),
       .Dialog_normal > .Dialog_controls,
       .InfoDialog_normal > .InfoDialog_button) {
    background-color: var(--surface, white);
}

/* A row's label, also when the page has gathered some rows into a group. */
.Dialog_body > label,
.Dialog_body > [role="group"] > label,
.InfoDialog_body > label {
    font-weight: 500;
    color: var(--color-text-base);
    padding-top: 8px;
    white-space: nowrap;
}

/* Content appended directly to the central div AFTER the padded
   Dialog_body — the common content-dialog pattern
   (dlg.getCentralDiv().appendChild(...)) — otherwise renders flush
   against the dialog's left/right edge (first noticed on the review
   activities' comments dialog; previously patched per page for the
   .ba-view / .ma-view dialogs, now global). Give every such child the
   body's horizontal inset; the last child also matches the body's
   20px bottom padding. Children needing different spacing override
   with a more specific page rule (see .ba-view / .ma-view). */
.Dialog_normal > .Dialog_body ~ *,
.InfoDialog_normal > :not(.InfoDialog_title):not(.InfoDialog_body) {
    margin: 0 20px 16px;
}

.Dialog_normal > .Dialog_body ~ :last-child,
.InfoDialog_normal > :last-child:not(.InfoDialog_body) {
    margin-bottom: 20px;
}

/* The dialog's own action row. Dialog.js puts the dialog's trailing button
   widgets (Submit, Cancel) here: one line of buttons at the end of the box,
   wrapping where the box is narrow. order keeps it last on screen if a page
   adds content to the box after the dialog is shown. Its bottom gap is
   padding, not margin, so it survives pinning (see above). */
.Dialog_normal > .Dialog_controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    order: 1;
    margin: 0 20px;
    padding: 4px 0 20px;
}

    .Dialog_body > div > input {
        width: auto;
    }
    .InfoDialog_body > div > input.CheckBox_window {
        width: 20px;
    }

.Dialog_right {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-image: var(--icon-close, url(../images/close.png));
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    cursor: pointer;
    opacity: 0.85;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.Dialog_right:hover {
    background-color: var(--color-surface);
    opacity: 1;
}

.Dialog_right:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}


.DDT_div0 {
    float: right;
    padding-right: 5px;
}

.DDT_window {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.DDT_body {
    height: calc(100% - 6em);
    width: 100%;
    overflow-y:auto;
    overflow-x:hidden;
}

.DTB_normal {
    display: inline-block;
    align-content: center;
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
    background-color: var(--accent-fill, var(--color-accent));
    color: var(--text-on-accent, white);
    bottom: 0;
    position: fixed;
}

.DTB_body {
}

.DTB_button {
    background-color: inherit;
    color: inherit;
    width: 100%;
}
.DTB_button:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}

.DisplayDiv_window {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position:relative;
    overflow: hidden;
}

.DisplayDiv_body {
    min-height: 50px;
    background-color: var(--color-surface);
    position: relative;
    overflow: hidden;
}

.DisplayDiv_button {
    float:right;
    background-color: var(--status-danger, lightcoral);
}

.DisplayDiv_header {
    min-height: 1.6em;
    background-color: var(--color-text-heading);
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3px;
    border-radius: var(--radius-lg);
    padding-bottom: 3px;
}

.DisplayDiv_item {
    margin: 3px;
    display: inline-block;
}

.DisplayDiv_popup {
    z-index: 10;
    width: 50%;
    min-height: 7em;
    max-height: 12em;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1, 0 2px 12px rgba(22, 19, 42, 0.15));
    float: left;
    position: absolute;
    top: 0;
    left: 25%;
    margin-top: 5%;
}
    .DisplayDiv_popup .ck-editor__editable {
        max-height: 12em;
        min-height: 12em;
    }


.upArrow {
    background-image: url("../images/up.svg");
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.125em;
    border: 2px;
    border-color: var(--surface, white);
    padding: 0px;
    border-radius: 10px;
}
.downArrow {
    background-image: url("../images/down.svg");
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.125em;
    border: 2px;
    border-color: var(--surface, white);
    padding: 0px;
    border-radius: 10px;
}

.SlideShow_window {
    max-width: 1000px;
    height: 100%;
    text-align: center;
    margin: auto;
}

/* Slideshow container */
.SlideShow_body {
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
    text-align: center;
}

.SlideShow_normal {
    display: block;
    margin: auto;
    position: relative;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}


.SlideShow_item {
    margin: auto;
    overflow: hidden;
    vertical-align: middle;
}

.SlideShow_title {
    background-color: var(--color-surface);
    color: var(--color-text-heading);
    font-size: large;
    display: block;
    margin: auto;
}

.SlideShow_footnote {
    font-size: x-small;
    font-style: italic;
    background-color: var(--color-text-heading);
    color: white;
    text-align: left;
    margin: auto;
}

/* Next & previous buttons */
.SlideShow_normal .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 5px;
    /* margin-top: -22px; */
    color: var(--text-primary, black);
    font-weight: 500;
    font-size: large;
    border-radius: 10px 10px 10px 10px;
    user-select: none;
    z-index: 10;
}

.SlideShow_normal .prev {
    left: 0px;
    padding-right: 10px;
}

/* Position the "next button" to the right */
.SlideShow_normal .next {
    right: 0px;
    padding-left: 10px;
}

@-webkit-keyframes SlideShow_normal {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes SlideShow_normal {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* The dots/bullets/indicators */
.SlideShow_div1 {
    text-align: center;
    bottom: 0px;
    position: relative;
    height: 20px;
    background-color: rgba(255,255,255,.75);
}

.SlideShow_div1 > span{
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--color-border);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .SlideShow_div1 .SlideShow_active, .SlideShow_div1 > span:hover {
        background-color: var(--accent-fill-hover, var(--color-primary));
    }

.displayTemplate .BackgroundContainer_window {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}


.MBD_body {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    display: inline-flex;
    flex-direction:column;
    position: absolute;
    width: auto;
    height: auto;
}

.MBD_body > img {
    width: 100%;
    height: 100%;
}

.MBD_normal {
    margin: 0px;
    padding: 0px;
}

.MBD_div0 {
    width: 20em;
    height: 5em;
    min-height: 1.2em;
    min-width: 5em;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

.MBD_div1 {
    height: 30px;
    background-color: var(--surface, white);
    opacity: 50;
    text-align: center;
    bottom: 0px;
    display: none;
}
    .MBD_div1 > input[type=range],
    .BackgroundContainer_div1 > input[type=range] {
        height: 10px;
        padding: 5px 5px;
        background-color: var(--color-surface);
        accent-color: var(--color-primary);
    }

.MBD_button,
.BackgroundContainer_button {
    background-image: url(../images/settings.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0px;
}


.MoveBar_window {/*this is for vertical resize*/
    width: 100%; 
    height: 4px; 
    background-color:rgba(0,0,0,0);
    position: absolute;
    z-index:20;
    bottom:0px;
    left:0px;
    display: block;
}
    .MoveBar_window:focus, .MoveBar_window:hover {
        background-image: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%), linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%);
        background-position: 4px 0, 5px 0, 0 0, 0 0;
        background-size: 4px 5px;
        background-color: var(--text-primary, #333333);
        cursor: n-resize;
    }


.MoveBar_body {/* this is for horizontal resize*/
    width: 10px;
    height: 100%;
    background-color: rgba(0,0,0,0);
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 0px;
}

.MoveBar_body:focus, .MoveBar_body:hover {
    background-image: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%), linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%);
    background-position: 4px 0, 5px 0, 0 0, 0 0;
    background-size: 4px 5px;
    background-color: var(--text-primary, #333333);
    cursor: n-resize;
}

.ResizeHandle_window {
    background: repeating-linear-gradient( 135deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 4px, rgba(0,0,0,1) 6px );
    position: absolute;
    height: 15px;
    width: 15px;
    height: 15px;
    right: 0px;
    bottom: 0;
} 

.ResizeHandle_window:focus, .ResizeHandle_window:hover {
    cursor: nwse-resize;
}

.ImageDisplay_window {
    text-align: center;
}

.MBD_title,
.ImageDisplay_title {
    font-size: large;
    background-color: var(--color-text-heading);
    color: white;
    text-align: center;
}

.MBD_footnote,
.ImageDisplay_footnote {
    font-size: x-small;
    font-style: italic;
    background-color: var(--color-text-heading);
    color: white;
    text-align: left;
}

.ImageDisplay_body {
    display: inline-block;
    position: relative;
    background-color: var(--surface, white);
}
.CKEdit_window {
   z-index: 10;
   width: 65%;
   position: fixed;
}
.ColorChooser_window {
    z-index: 10;
    width: 200px;
    background-color: var(--surface, white);
    position: fixed;
}

.ColorChooser_header,
.CKEdit_header {
    height: 1.6em;
    display: flex;
    flex-direction: row;
}
.CKEdit_div0 {
    background-image: url(../images/save.png);
    background-origin: padding-box;
    background-position-x: left;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    background-color: var(--surface, white);
    flex-grow: 1;
    text-align: center;
    padding-left: 15px;
}

.ColorChooser_div0 {
    display: inline-block;
    background-color: var(--surface, white);
    border:solid;
    flex-grow: 1;
    text-align: center;
    padding-left: 15px;
}
    .ColorChooser_div0:hover,
    .CKEdit_div0:hover {
        cursor: move;
    }

.CKEdit_button {
    float: right;
    background-color: var(--status-danger, #991b1b);
    color: var(--text-on-accent, white);
}

.CB_window {
    z-index: 10;
    background-color: var(--surface, white);
    float: left;
    position: fixed;
    border:thin groove;
}

.CalendarMonth_window {
    position: relative;
    height: 100%;
}

.CalendarMonth_header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1.5em;
    text-align: center;
}

.CalendarMonth_body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    height: calc(100% - 8em);
}

    .CalendarMonth_header div,
    .CalendarMonth_body > span {
        border: 1px solid var(--color-border);
    }

    .CalendarMonth_body > span {
        position: relative;
        display: inline-flex;
        flex-direction: row;
        overflow: hidden;
    }

.CalendarMonth_item {
    display: inline-block;
    top:0;
    left: 0;
    height: 1em;
    width: 2em;
    margin: 2px;
}

.CalendarMonth_div1 {
    display: block;
    overflow: hidden;
    flex-grow: 1;
    text-align: left;
}

.CalendarMonth_div2 {
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
    height: 1.1em;
}

.CalendarMonth_controls {
    text-align: center;
}
    .CalendarMonth_controls .Select_window {
        left: auto;
        top: auto;
        float: none;
    }

    .CalendarMonth_controls button {
        background-color: rgba(255,255,255,0);
        font-weight: bold;
    }

.CD_active,
.CalendarMonth_active {
    background-color: var(--color-primary-tint);
    color: var(--color-primary-dark);
}

.CD_window {
    width: 75%;
    height: 75vh;
    position: absolute;
    top: 20%;
    left: 20%;
    overflow:hidden;
    background-color: var(--surface, white);
    border:groove;
}


.CD_body {
    display: grid;
    grid-template-columns: 6em 1fr;
    grid-template-rows: repeat(3em);
    height: calc(100% - 3.6em);
    overflow: auto;
}
    .CD_body > div {
        height: 3em;
        border-bottom: 1px solid;
        text-align: left;
        overflow-x: hidden;
        position: relative;
    }

    .CD_body .CD_item {
        border-left: 1px solid;
        position: relative;
        height: 100%;
        overflow: visible;
        display: flex;
        flex-grow: 1;
        flex-direction: row;
    }

.CD_header {
    display: grid;
    grid-template-columns: 6em 1fr;
    grid-template-rows: repeat(3em);
    overflow: auto;
    background-color: var(--color-surface);
    color: var(--color-text-heading);
}

    .CD_header .CD_item {
        position: relative;
        height: 100%;
        overflow: visible;
        display: flex;
        flex-grow: 1;
        flex-direction: row;
        text-align:center;
        font-weight: bold;
    }

    .CD_header .CD_item > .CD_item {
        display: inline-block;
    }

    .CD_header > div {
        font-weight: bold;
    }

.CD_controls {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 1.8em;
}

    .CD_controls > span {
        width: 100%;
        text-align: center;
        background-color: var(--accent-fill, var(--color-primary));
        color: var(--text-on-accent, white);
    }

        .CD_controls > span:hover {
            cursor: move;
            background-color: var(--accent-fill-hover, var(--color-primary-dark));
        }

    .CD_controls > span:focus {
        background-color: var(--accent-fill-hover, var(--color-primary-dark));
        outline: var(--focus-outline);
        outline-offset: var(--focus-offset);
    }
.CD_normal {
    display: inline-block;
    overflow-y: visible;
    background-color: var(--color-accent-tint);
    color: var(--color-text-heading);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    z-index: 10;
    min-height: 1.1em;
}
.CD_attention {
    border-right-width: 5px;
    border-bottom-width: 5px;
    font-style:italic;
    font-weight: bold;
}


.PUMS_window {
    overflow: visible;
    height: 100%;
    position: relative;
}

    .PUMS_window .MultiSelect_window {
        position: absolute;
        width: auto;
        z-index: 20;
        background-color: var(--surface, white);
        padding: .5em;
        top: 1em;
        border: outset;
        border-radius: 10%;
    }


.QRScan_controls {
    display: inline-block;
    text-align: center;
    position: relative;
    width: 100%;
}

    .QRScan_controls .TextInput_window {
        width: 30em;
        font-size: small;
        float:none;
    }

    .QRScan_controls .QRScan_label {
        margin-left: 2em;
        font-style: italic;
        font-weight: bold;
    }


.QRScan_body {
    width: 40vw;
    height: 40vw;
    background-image: url("../Images/QRCode.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 1em;
}


.MTV_controls {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 4;
    font-size: small;
}

    .MTV_controls.MTV_attention {
        border-bottom: 3px solid var(--control-border, black);
    }

    .MTV_controls > div {
        flex-grow: 1;
        position: relative;
    }

    .MTV_controls .MTV_attention input[type=button] {
        /*border: outset;
            border-bottom:none;*/
    }

    .MTV_controls input[type=button] {
        border: none;
        width: 100%
    }

.MTV_div1 {
    display: flex;
    flex-wrap: wrap;
}
.MTV_normal {
    text-align: center;
}

.AccBlock_active {
    display: block;
}
.AccBlock_show {
    display: block;
}
.AccBlock_hidden {
    display: none;
}

.BCR_window {
    display: inline-block;
    position: relative;
    text-align: center;
}
.BCR_controls {
    width: 100%;
    height: 1.5em;
}

.BCR_body {
    display: block;
    background-image: var(--icon-barcode, url("../images/barcode.svg"));
    background-repeat: no-repeat;
    background-size:cover;
    width:200px;
    height: 200px;
}

.TDyn_controls {
    display: inline-flex;
}

.TDyn_controls button {
    height: 100%;
}

    .TDyn_controls input {
        min-width: 30em;
    }

.CMV_body {
   height: 50vh;
   position: relative;
}

.CMV_body .CKEdit_window {
    height: 65vh;
    width: 85%;
    left: 5%;
}

.CMV_body > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners {
  height: 65vh; 


}
.CMV_body > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main {
    max-height: none;
}

div.CMV_body > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main > div {
    height: 100%;
    width: 100%;
    text-indent: 2em;
}
.RMV_window .RMV_div4,
.CMV_window .CMV_div3,
.CMV_window .CMV_div2,
.CMV_window .RLine_window {
    display: flex;
    border: solid 1px;
    height: 2em;
}
    .CMV_window .CMV_div2 .TextInput_window {
        display: inline-block;
        width: fit-content(stretch);
        border: none;
        margin: 0px;
        padding: 0px;
        margin-left: 1em;

    }
    .CMV_window .RLine_window .CA_window {
        display: inline-flex;
        min-height: 1.1em;
        padding-top: 1px;
        width: 85%;
        margin-left: 5%;
    }
    .CMV_window .RLine_window .CA_window label {
        margin: 3px;
        font-weight: bold;
    }

.CMV_window .RLine_window .CA_window input {
    border: none;
    min-width: 20em;
}

    .CMV_window .RLine_window .CA_window input {
        height: auto;
        min-height: 1.1em;
        padding: 2px;
        margin-bottom: 0px;
        text-indent: 1em;
    }

    .RMV_window .RMV_div4 span.RMV_item,
    .CMV_window .CMV_div3 span.CMV_item,
    .CMV_window .RLine_window span.RLine_item {
        border: outset;
        border-radius: 10px 10px;
        width: 5em;
        margin-left: 1em;
    }

    .CMV_window .CMV_div3 span.CMV_item:hover,
    .CMV_window .CMV_div3 span.CMV_item:focus {
        color: var(--accent-hover, blue);
    }



    .CMV_window .CMV_div3 span.CMV_item button,
    .CMV_window .RLine_window span.RLine_item  button {
        height: 1em;
        width: 1em;
        background-image: var(--icon-x, url(/images/x.svg));
        background-position-x: right;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: .5em;
    }

.RMV_window .RMV_div4 span.RMV_item button {
    height: 1em;
    width: 1em;
    background-image: var(--icon-download, url(/images/download.svg));
    background-position-x: right;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: .5em;
}

.RMV_div4 >span:nth-child(1),
.CMV_div3 >span:nth-child(1) {
    height: 1.44em;
    width: 1.44em;
    background-image: var(--icon-paperclip, url(/images/paperclip.svg));
    background-position-x: right;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: .5em;
}

.RMV_div1 {
    display: block;
    margin-left: 1em;
}
.RMV_div2 span:nth-child(1){
    width: 10em;
}
.RMV_div2 span:nth-child(2) {
    padding-left: 2em;
}

.RMV_controls {
    width: 100%;
    min-height: 2em;
    display: flex;
    flex-direction: row;
    flex-flow: row-reverse;
}

.RMV_controls button {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--surface, white);
    width: 1.44em;
    height: 1.44em;
    padding: 0px;
}

.RMV_body {
    border: 2px outset;
}

    .RMV_controls button:disabled {
        background-color: var(--color-disabled-bg);
    }

    .RMV_controls button:nth-child(2) {
        background-image: var(--icon-reply-line, url("/Images/reply-line.svg"));
    }
    .RMV_controls button:nth-child(3) {
        background-image: var(--icon-reply-all-line, url("/Images/reply-all-line.svg"));
    }
    .RMV_controls button:nth-child(1) {
        background-image: var(--icon-share-forward-line, url("/Images/share-forward-line.svg"));
    }

.RMV_div3 {
    margin-left: 1.44em;
}
.RMV_div3.RMV_active {
    cursor: pointer;
}

.FileGet_window {
    /*WI-130897
    position: absolute;
    left: 0;
    top:0;
    z-index: 10;
    background-color: white;
    border: 3px solid var(--jcmaPurple);
    */

    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: var(--surface, white);
    border: 1px solid var(--divider, #c4c4c4);
    margin: 0px 15px 15px 15px;
    ;
    box-shadow: var(--shadow-1, 0 1px 3px 1px rgba(0,0,0,.2));
    padding: 25px;
    background-color: var(--bg-secondary, #fafafa);
    border-top: 5px solid var(--jcmaPurple);
}

.FileGet_title {
    /*WI-130897
    background-color: var(--jcmaPurple);
    color: white;
    text-align:center;
    */

    background-color: transparent;
    color: var(--text-primary, #2d3a4a);
    text-align: center;
    font-size: 1.25em;
    margin-bottom: 15px;
}

.FileGet_normal {
    margin-bottom: 15px;
}

.FileGet_window button {
    padding: 10px 40px;
    border: none;
    background-color: var(--text-primary, #151616);
    color: var(--bg-primary, #fff);
    margin-right: 15px;
    margin-bottom: 15px;
}

.FileGet_window input[type="file"] {
    background-color: var(--surface, #fff);
}

.FileGet_window button[disabled] {
    background-color: var(--fill, #cecece);
    cursor: default;
}


/* ============================== DefineRolesView (DRV) ============================== */

.DRV_window {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 15px;
    background-color: var(--color-bg);
}

.DRV_controls {
    padding-bottom: 10px;
}

.DRV_controls .drv-action {
    padding: 8px 16px;
    font-size: var(--control-text, inherit);
    margin-right: 12px;
    border: none;
    border-radius: var(--btn-radius, var(--radius-sm));
    background-color: var(--accent-fill, var(--color-primary));
    color: var(--text-on-accent, #fff);
    cursor: pointer;
    min-height: 44px;
}

/* Under the pointer, and disabled: the same as the hosting application's
   buttons (it names these buttons in its own button rules; the values here
   are for a host that does not). */
.DRV_controls .drv-action:hover:not([disabled]) {
    background-color: var(--btn-primary-hover, var(--color-primary-dark));
}

.DRV_controls .drv-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.DRV_body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 15px;
}

.DRV_left {
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    padding: 8px;
}

.DRV_left .drv-role-list {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

/* The panel is as wide as its longest role row. The room for the list's
   scrollbar is kept free at all times: without it, the scrollbar took its
   width out of rows that had none to spare, and the list grew a second,
   sideways scrollbar to reach the last few pixels. The scrollbar is the
   slim one and sits in the panel's own padding, so the rows still end
   level with the New Role button whether or not the list scrolls. */
@supports (scrollbar-gutter: stable) {
    .DRV_left .drv-role-list {
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        margin-right: -8px;
    }
}

/* A role row: the name on the left, its tag (if any) in one column on the
   right. As a block, the tag followed the name wherever it ended, and
   after a wrapped name it sat on the second line, so no two tags lined up. */
.drv-role-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-text-base);
    cursor: pointer;
}

.drv-role-item:hover:not([disabled]) {
    background-color: var(--color-hover-bg);
}

.drv-role-item[disabled] {
    color: var(--color-disabled-text);
    cursor: default;
}

.drv-role-item.drv-selected {
    background-color: var(--selected-bg, var(--color-active-bg));
    color: var(--selected-text, var(--color-text-base));
    box-shadow: var(--selected-mark, none);
}

/* The hover rule above outranks the selected one, so this says again that a
   selected role keeps the selected fill while the pointer is on it. */
.drv-role-item.drv-selected:hover:not([disabled]) {
    background-color: var(--selected-bg, var(--color-active-bg));
}

/* New Role is a secondary button like Copy Role and Delete Role above it,
   and takes the host's button look the way they do. */
.drv-new-role {
    padding: 8px 16px;
    min-height: 44px;
    flex: none;
    font-size: var(--control-text, inherit);
    border: 1px solid var(--btn-secondary-border, var(--color-primary));
    border-radius: var(--btn-radius, var(--radius-sm));
    background-color: var(--btn-secondary, transparent);
    color: var(--btn-secondary-text, var(--color-primary));
    cursor: pointer;
}

/* Not while it is selected: a selected button keeps its fill under the
   pointer. */
.drv-new-role:hover:not([disabled]):not(.drv-selected) {
    background-color: var(--btn-secondary-hover, var(--color-hover-bg));
}

.drv-new-role[disabled] {
    border-color: var(--btn-secondary-border, var(--color-disabled-text));
    color: var(--color-disabled-text);
    cursor: default;
}

.drv-new-role.drv-selected {
    background-color: var(--selected-bg, var(--color-active-bg));
    color: var(--selected-text, var(--color-text-base));
    box-shadow: var(--selected-mark, none);
}

.DRV_right {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.DRV_right .drv-field-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.DRV_right .drv-field-row > label {
    flex: 0 0 110px;
    color: var(--color-text-heading);
    font-weight: bold;
}

.DRV_right .drv-name,
.DRV_right .drv-description {
    flex: 1 1 auto;
    padding: 6px 8px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
}

.DRV_right .drv-description {
    resize: vertical;
    min-height: 3em;
}

.DRV_right .drv-name-fixed {
    font-weight: bold;
    color: var(--color-text-heading);
}

.DRV_right .drv-perm-heading {
    color: var(--color-text-heading);
    font-weight: bold;
    margin: 4px 0;
}

.DRV_right .drv-perm-list {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.drv-perm-item > label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 6px 4px;
    cursor: pointer;
}

/* The permission's text takes the width its row has left and wraps there;
   a long key with no space in it breaks rather than running off the edge. */
.drv-perm-item > label > span:not(.drv-lang-marker) {
    flex: 1 1 12em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.drv-perm-item:hover {
    background-color: var(--color-hover-bg);
}

.drv-status {
    color: var(--color-text-muted);
    padding: 20px;
}

/* DRV: client-scoped roles additions */

.DRV_controls .drv-secondary {
    background-color: var(--btn-secondary, transparent);
    color: var(--btn-secondary-text, var(--color-primary));
    border: 1px solid var(--btn-secondary-border, var(--color-primary));
}

.DRV_controls .drv-secondary:hover:not([disabled]) {
    background-color: var(--btn-secondary-hover, var(--color-hover-bg));
}

.drv-client-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 10px;
}

.drv-client-row > label {
    color: var(--color-text-heading);
    font-weight: bold;
}

.drv-client-select {
    padding: 5px 8px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-field, var(--radius-sm));
    background-color: var(--surface, #fff);
}

.drv-universal-badge {
    /* Keeps its own width and its one line; the name takes the rest. */
    flex: none;
    margin-left: auto;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: var(--radius-tag, 999px);
    background-color: var(--tag-bg, var(--color-accent-tint));
    color: var(--tag-text, var(--color-accent-dark));
    font-size: 0.85em;
    font-weight: normal;
}

.drv-warning-text {
    max-width: 26em;
    padding: 6px 0 12px 0;
    color: var(--color-text-base);
}


/* Define Roles: the informational marker on permission rows whose
   languages are set per user (PermissionAttributePlan slice 5). Full
   --color-text-base for AAA contrast - no opacity (house WCAG rule).
   The markers form one column down the right edge of the list: each keeps
   its width and its one line, so they start and end in the same place
   whatever the length of the permission beside them. Where the row is too
   narrow for both, the marker moves to a line of its own, still at the
   right. */
.drv-lang-marker {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
    font-style: italic;
    font-size: 0.9em;
    color: var(--color-text-base);
}