/*  =========================================
        Global Navigation
    =========================================   */

/* Change the color of non-ec accordion icon*/
a[data-toggle="collapse"]:hover, .stackLayoutSummary {
    color: var(--icon-on-color);
}

.form-group label,
.form-check-group .form-input-label,
.ec-form-group .ec-label {
    font-size: var(--cds-label-02-font-size);
}

.accordion .card:has(.card-header), .tab-pane .card:has(.compact-detailed-nav), .accordion .card:has(.card-headercustom) {
    border-top: 1px solid var(--border-strong-01);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    background: var(--background);
    border-radius: 0;
}

.accordion .card .card-header {
    padding: 0.5rem;
}

.accordion-toggle a, td .compact-detailed-nav a {
    color: var(--text-primary);
}

.ExpandCollapseManagedProvider .fa-chevron-up {
    color: var(--icon-primary);
    margin-top: 1rem;
}

.accordion .card:has(.card-header):last-child, .tab-pane .card:has(.compact-detailed-nav):last-child {
    border-bottom: 1px solid var(--border-strong-01);
}

.accordion .card-header {
    background: var(--background);
}

.accordion-toggle:has(.compact-detailed-nav .nav-link:not(.d-none) .fa-chevron-down), .accordion-toggle:has(.fa-chevron-down),
.accordion-toggle:has(.ExpandCollapseManagedProvider .fa-chevron-down) {
    display: flex;
    align-items: center;
    justify-content: end;
}

.accordion-toggle:has(.compact-detailed-nav .nav-link:not(.d-none) .fa-chevron-up), .accordion-toggle:has(.fa-chevron-up),
.accordion-toggle:has(.ExpandCollapseManagedProvider .fa-chevron-up) {
    display: flex;
    align-items: baseline;
    justify-content: end;
}

.accordian-font, .card-headercustom .text-headermutedcustom {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* header styles Start */
.top-header .navbar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0;
}

    .top-header .navbar-header .navbar-brand {
        line-height: 47px;
        background-repeat: no-repeat;
        background-size: 130px 56px;
        width: 130px;
        height: 56px;
        padding: 0 1px;
        margin: 0;
        display: block;
    }

/* Page Layout */

.ang-page-layout {
    display: grid;
    grid-template-areas: "summary summary" "notifications notifications" "sidebar main";
    grid-template-columns: auto 2fr;
    grid-template-rows: auto 2fr;
    min-width: 0;
}

.ang-page-summary {
    grid-area: summary;
    min-width: 0;
}

.ang-page-summary-content-scroll {
    min-width: 0;
    overflow-x: visible;
    overflow-y: visible;
}

    .ang-page-summary-content-scroll .col.col-auto {
        padding-left: 0.5rem;
        padding-right: 1rem;
    }

.ang-page-notifications {
    grid-area: notifications;
    min-width: 0;
}

.ang-page-footer {
    grid-area: footer;
    background-color: var(--ec-color-gray-10);
    position: fixed;
    width: -webkit-fill-available;
    bottom: 0px;
    padding: 0.25rem 1rem;
}

.ang-page-sidebar {
    grid-area: sidebar;
    position: sticky;
    min-width: 0;
}

    .ang-page-sidebar nav {
        position: sticky;
        top: 0;
        background: var(--background);
    }

.ang-page-main {
    grid-area: main;
    min-width: 0;
}

.ang-page-navbar {
    position: sticky;
    top: 0;
    background: var(--background);
    z-index: 999;
}

#btnCompleteMyWorkingTask {
    white-space: nowrap;
}

.section-layout-container {
    position: sticky;
    max-height: 3rem;
    border-bottom: solid 1px var(--layer-accent-01);
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    background: var(--layer-accent-01);
}

/*Authenticated Layout Changes V2*/
.sectionContent {
    flex-direction: column;
    overflow: hidden;
}

body:not(.modal-open) {
    max-width: 100%;
    overflow: auto;
}

.workingtask-text {
    padding-left: 11px;
}

.table-border thead th, .table-border tbody td {
    border-bottom: 1px solid #E3E3E3;
}

.tabSelectionDetails {
    height: 100%;
    padding: 1rem;
    min-width: 0;
}

.pageDetailSectionContent {
    height: 100%;
    margin-top: 1.5rem;
}

.tabSubNavigation {
    overflow: auto;
    height: 100%;
}

.ec-required:not(.custom-switch):not(:has(.form-check-input)) .ec-label:not(.form-check-label) label::after {
    color: var(--support-error);
    content: "(Required)";
    margin-left: 0.5rem;
}

/* EnterpriseCore renders the standard "(Required)" indicator via ::after directly
   on .ec-label (the label element itself), e.g. work-queue search dropdowns. Override
   EC's gray with red; same specificity as the EC rule, loaded after it, so this wins. */
.ec-required:not(.custom-switch) .ec-label:not(.form-check-label)::after, .custom-asterisk {
    color: var(--support-error);
}

.custom-control-label::before {
    pointer-events: all;
}

.preCheckTaskReassignWarning .d-flex {
    align-items: flex-start;
    flex-wrap: nowrap;
}

.preCheckTaskReassignWarning i {
    margin-right: 0.5rem; /* space between icon and text */
}

.preCheckTaskReassignWarning .preCheckTaskReassignWarning-message {
    flex: 1; /* take remaining width */
    min-width: 0; /* allow wrapping */
    white-space: normal;
    overflow-wrap: break-word;
    position: static;
    left: auto;
}

.currency-input .form-control:not([readonly]):not([disabled]):focus {
    border: none;
}

.currency-input .input-group-text {
    background: var(--field-hover-01);
    border: none;
}

.rates-section
.input-group:has(.input-group-append):has(.form-control[readonly])
.input-group-append .input-group-text {
    color: var(--text-secondary);
    opacity: 1;
}

.rates-section .input-group:has(input[readonly]) .form-control {
    opacity: 0.65;
}

.createCaseWizardProceduresTreeContainer .ec-navitem-treeitem-child .ec-navitem-treeitem-child-primary-text {
    color: var(--ec-color-blue-70);
}

/* Date Time Input */

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover, .bootstrap-datetimepicker-widget a:hover {
    background: var(--button-primary, #028202);
    color: var(--text-inverse, #FFFFFF);
}

.bootstrap-datetimepicker-widget a {
    color: var(--tag-color-gray);
    background-color: white;
}

.bootstrap-datetimepicker-widget table td.active:before {
    border: none;
}

.datepicker tbody td:hover {
    background: var(--layer-hover-01);
}

.datepicker tbody td:focus {
    border: 2px solid var(--button-primary, #028202);
}

.bootstrap-datetimepicker-widget table td.today:before {
    content: unset;
}

.bootstrap-datetimepicker-widget table td.today:not(.active)::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--button-primary, #028202);
    margin: 0 auto 1px;
}

.ec-page-header-secondary .navbar-expand.ec-nav .ec-navitem-dropdown button.nav-link.ec-nav-link:focus {
    outline: none;
}

/*Time Input*/

.bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
    color: var(--icon-primary);
}

    .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn:hover,
    .bootstrap-datetimepicker-widget table td span:hover {
        color: var(--icon-primary);
        background-color: var(--layer-hover-01);
    }

    .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn:focus,
    .bootstrap-datetimepicker-widget table td span:focus {
        color: var(--icon-primary);
        background: var(--layer-selected-01);
    }

.bootstrap-datetimepicker-widget .btn[data-action=togglePeriod], .bootstrap-datetimepicker-widget .btn[data-action=togglePeriod]:active {
    background: var(--button-primary);
    color: var(--text-on-color);
    border-radius: unset;
    border: none;
}

.input-group:has(.input-group-append):focus-within {
    background: var(--field-01);
    border: 2px solid var(--focus-primary);
    box-shadow: none !important;
}

.input-group:has(.datepicker) .form-control:focus {
    border-left: none;
    border: unset;
}

.input-group:has(.input-group-append .fa-calendar-alt) .form-control:focus,
.input-group:has(.input-group-append .fa-clock) .form-control:focus {
    border-left: none;
    border: unset;
}

.ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: unset;
    background: var(--highlight);
    font-weight: normal;
    color: var(--tag-color-gray);
}

.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;
}

.ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover {
    background: var(--layer-hover-01);
    color: unset;
}

li.ui-timepicker-selected {
    background: var(--button-primary, #028202);
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: unset;
    font-weight: normal;
    color: var(--tag-color-gray);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: unset;
}

.ui-widget-content .ui-state-default {
    background: unset;
}

.ui-widget-header {
    border: none;
    background: unset;
}

.ui-datepicker-calendar tbody td:hover {
    background: var(--layer-hover-01);
}

.ui-datepicker-calendar tbody td:focus {
    border: 2px solid var(--button-primary, #028202);
}

.ui-datepicker-current-day {
    background: var(--button-primary, #028202);
    color: var(--text-inverse, #FFFFFF);
}

.ui-datepicker-today:not(.ui-datepicker-current-day)::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--button-primary, #028202);
    margin: 0 auto 1px;
}

.ui-timepicker-wrapper {
    width: auto;
}

/* === Disabled fields: readable value text =================================
   EnterpriseCore (enterprisecore.acentra.css) colours disabled controls with
   --text-primary-on-disabled (#16161640 - black at 25% alpha) and dims labels
   with opacity:0.25. EC uses NO !important on these, so each rule below mirrors
   EC's EXACT selector: equal specificity + Atrezzo.css loading after the EC
   theme makes our declaration win. We override --text-primary-on-disabled only
   where EC applies it to form fields (NOT the global token, which EC also uses
   for wizard step indicators). */

/* Value text - mirrors enterprisecore.acentra.css:616-620 and :963.
   The date/time pickers render as disabled `.form-control.datePicker/.timePicker`
   inside an `.input-group`; `.form-group:has(input:disabled) input` already covers
   their value colour. */
.input-group:has(.ec-datetime-input):has(input:disabled),
.input-group:has(.datePicker):has(input:disabled),
.input-group:has(.timePicker):has(input:disabled),
.form-group:has(input:disabled) input,
.select2-container--default.select2-container--disabled .select2-selection--single {
    color: var(--text-primary);
}

.form-control:disabled,
.form-control[readonly]:not(textarea) {
    color: var(--text-primary);
}

/* WebKit greys disabled <input>/<textarea> text via -webkit-text-fill-color,
   which overrides `color`. EC sets neither, so cover both control types. */
.form-group:has(input:disabled) input,
.form-group:has(textarea:disabled) textarea,
.ec-form-group input:disabled,
.ec-form-group textarea:disabled {
    -webkit-text-fill-color: var(--text-primary);
}

/* Labels + select2 value - mirrors EC's opacity:0.25 dimming rules
   (enterprisecore.acentra.css:227-237). Restore full opacity + readable colour;
   placeholders are intentionally left dim. EC's cursor/pointer-events stay. */
/* Disabled-field LABELS: EC dims them (opacity:0.25) so they read as washed out.
   Restore full opacity and set --text-secondary so a disabled field's label matches
   an ENABLED field's label (both rgb(82,82,82)) - they should look the same; the grey
   field fill, not a darker label, conveys the disabled state. */
.form-group:has(input:disabled) .form-input-label,
.form-group:has(textarea:disabled) .form-input-label,
.ec-form-group:has(select:disabled) .ec-label,
.ec-form-group:has(input:disabled) .ec-label,
.ec-form-group:has(textarea:disabled) .ec-label {
    color: var(--text-secondary);
    opacity: 1;
}

/* Disabled VALUE-adjacent text (select2 selected value, input-group icon addon) is
   a value, not a label - keep it at full-strength readable --text-primary. */
.form-group:has(input:disabled) .input-group-prepend .input-group-text,
.form-group:has(input:disabled) .input-group-append .input-group-text,
.ec-form-group:has(select:disabled) .select2-selection__rendered {
    color: var(--text-primary);
    opacity: 1;
}

/* === Disabled fields: consistent grey fill + single bottom rule ============
   Make every disabled field match the select2 look (grey fill, 1px bottom rule
   only). Each selector mirrors or out-specifies the EC rule it overrides; no
   !important is needed because Atrezzo.css loads after the EC theme.
   The date/time icon addon carries bootstrap's .bg-transparent
   (transparent !important) which specificity cannot beat - but graying the
   input-group CONTAINER lets the transparent addon show the grey behind it, so
   no addon rule (and no !important) is required, and enabled fields are
   untouched thanks to the :has(input:disabled) guard. Radio/checkbox controls
   keep their native affordances. */
.form-control:disabled,
.form-group:has(input:disabled) input:not([type="checkbox"]):not([type="radio"]),
.form-group:has(textarea:disabled) textarea,
.ec-form-group:has(input:disabled) input:not([type="checkbox"]):not([type="radio"]),
.ec-form-group:has(textarea:disabled) textarea,
.form-control.datePicker:disabled,
.form-control.timePicker:disabled,
.input-group:has(.ec-datetime-input):has(input:disabled),
.input-group:has(.datePicker):has(input:disabled),
.input-group:has(.timePicker):has(input:disabled),
.ec-form-group:has(select:disabled) .select2-selection--single,
/* A select2 disabled via a wrapping <fieldset disabled> never gets the
   .select2-container--disabled modifier (select2 only adds it when the native
   <select> carries the `disabled` attribute at init), so the --multiple body
   would otherwise keep the enabled white fill. The single variant is covered
   above; mirror it for --multiple via the :has(select:disabled) guard. */
.ec-form-group:has(select:disabled) .select2-selection--multiple,
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background: var(--ec-color-gray-30, #c6c6c6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

/* === Disabled radios/checkboxes: 508-compliant contrast ====================
   The disabled-fill block above intentionally EXCLUDES radios/checkboxes so
   they keep their native shape (a filled grey box would destroy the control).
   But a NATIVE disabled radio/checkbox fails WCAG 1.4.11 (508, 3:1 non-text
   contrast): the UA renders it at reduced opacity AND desaturates the control
   toward grey precisely BECAUSE it is disabled - and `accent-color` does not
   help, because Chromium/Edge grey the accent out on any :disabled control.
   So we take the control off the native paint path with `appearance:none`
   (which the UA does NOT desaturate) and draw the ring + checked dot/tick
   ourselves in a strong readable colour.

   Atrezzo.css loads AFTER EnterpriseCore (the /ECStyles/EnterpriseCore <link>
   precedes Atrezzo.css in the page head), so an equal-specificity rule wins on
   source order - no !important and no specificity inflation needed. Each rule
   below MIRRORS EC's exact selector so the tie resolves in our favour:
      EC: .form-check-input[type="radio"]:disabled { opacity:.25 }         (0,3,0)
      EC: .form-check-input:disabled ~ .form-check-label { opacity:.25 }   (0,3,0) */
.form-check-input[type="radio"]:disabled,
.form-check-input[type="checkbox"]:disabled {
    -webkit-appearance: none;
    appearance: none;
    /* 0.7 (not EC's 0.25) is the distinct-but-readable disabled cue: it dims the
       whole control just enough to read as read-only, while a dark #161616 ring
       at 0.7 over white still measures ~6:1 - well past the WCAG 1.4.11 (508)
       3:1 non-text-contrast minimum. The grey fill below reinforces the state. */
    opacity: 0.7;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 2px solid var(--icon-primary);
    background-color: var(--ec-color-gray-30, #c6c6c6);
    vertical-align: middle;
}
.form-check-input[type="radio"]:disabled {
    border-radius: 50%;
}
.form-check-input[type="checkbox"]:disabled {
    border-radius: 2px;
}
/* Checked dot (radio): a solid centre disc in the readable colour. EC sets
   width:1rem on `[type=radio]:checked` (0,3,0) too, but again we load later. */
.form-check-input[type="radio"]:checked:disabled {
    width: 1rem;
    background-image: radial-gradient(var(--icon-primary) 0 42%, transparent 48% 100%);
}
/* Checked tick (checkbox): fill the box + overlay an SVG checkmark. A
   background-image is used (not ::before) because form controls are replaced
   elements and do not reliably generate pseudo-element boxes. */
.form-check-input:checked[type="checkbox"]:disabled {
    background-color: var(--icon-primary);
    background-image: url(/Assets/Styles/data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2.5 6.2 5 8.7 9.5 3.5'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}
/* The control's LABEL: EC fades it to opacity:.25 (washed out). Match the
   control's 0.7 so label and control dim consistently and read as one disabled
   unit - still legible (dark text at 0.7), just no longer faint. */
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    opacity: 0.7;
}

/* READONLY textareas (e.g. the existing-note display `#txtExistingNote` in CM Case
   Interactions, rendered via TextAreaFor(..., new { @readonly = true })). The
   disabled-fill block above covers textarea:disabled, and .form-control[readonly]
   deliberately EXCLUDES textarea (:not(textarea)) so its single-line treatment
   doesn't distort multi-line note boxes - but that left readonly textareas on EC's
   lighter #f4f4f4 with dim text. Give them the same unified disabled look: grey
   fill, readable value text (color + -webkit-text-fill-color, since WebKit greys
   readonly textarea text via text-fill), and a single bottom rule. */
textarea.form-control[readonly] {
    background: var(--ec-color-gray-30, #c6c6c6);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

/* Date/time pickers are DISABLED `.form-control.datePicker/.timePicker` inputs.
   Two EnterpriseCore (deployed Version4) rules out-specify the disabled-fill rule
   above and must be beaten by matching/exceeding their specificity (Atrezzo.css
   loads after EC, so equal specificity also wins):

   1) FILL #f4f4f4 comes from EC's (0,4,0) rule
        .input-group:has(.input-group-append) .form-control:not([readonly])
      The pickers are :disabled (not [readonly]), so :not([readonly]) matches.
      Mirror it + add :disabled -> (0,5,0) to win the grey fill. */
.input-group:has(.input-group-append) .form-control.datePicker:disabled,
.input-group:has(.input-group-append) .form-control.timePicker:disabled,
.input-group:has(.input-group-prepend) .form-control.datePicker:disabled,
.input-group:has(.input-group-prepend) .form-control.timePicker:disabled,
/* The modern EC date component (Html.ECDateTimeInputFor, e.g. CMProgramOpenDate
   on CMCase/CMProgramIndex > Program details > Program overview) renders the input
   as `.form-control.ec-datetime-input.datetimepicker-input` inside an .input-group
   with an .input-group-prepend - it has NEITHER .datePicker NOR .timePicker, so the
   selectors above miss it and EC's (0,4,0) :not([readonly]) fill (#f4f4f4) wins.
   Mirror EC's selector keyed on .ec-datetime-input -> (0,5,0). Cover :disabled AND
   [readonly] (the field toggles between the two via IsEditCMProgramOpenDate). */
.input-group:has(.input-group-append) .form-control.ec-datetime-input:disabled,
.input-group:has(.input-group-append) .form-control.ec-datetime-input[readonly],
.input-group:has(.input-group-prepend) .form-control.ec-datetime-input:disabled,
.input-group:has(.input-group-prepend) .form-control.ec-datetime-input[readonly] {
    background: var(--ec-color-gray-30, #c6c6c6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

/* 2) OPACITY 0.25 (date picker only - it carries .datePicker) comes from EC's
      (0,3,1) rule  .form-group:has(input:disabled) .datePicker .  Match the same
      selector (also (0,3,1)); later source order wins. Restore full opacity so the
      disabled value stays readable - the grey fill conveys the disabled state.
      .ec-datetime-input is covered too in case EC dims it the same way. */
.form-group:has(input:disabled) .datePicker,
.form-group:has(input:disabled) .timePicker,
.form-group:has(input:disabled) .ec-datetime-input,
.ec-form-group:has(input:disabled) .ec-datetime-input,
.ec-form-group:has(input[readonly]) .ec-datetime-input {
    opacity: 1;
}

/* === Disabled BUTTONS: readable label text =================================
   EnterpriseCore's disabled-button text fails WCAG AA badly (measured):
     primary/secondary  #8d8d8d text on #c6c6c6 fill  = 1.94:1  (need 4.5:1)
     tertiary/danger    #c6c6c6 text on white         = 1.71:1
     ghost/icon         #c6c6c6 text                  = 1.71:1
   The disabled affordance (muted fill, not-allowed cursor, no hover) is kept;
   only the LABEL is darkened to --text-secondary (gray-70 #525252), which lifts
   contrast to 4.57:1 on the #c6c6c6 fill and 7.81:1 on white - both clear AA.
   EC's rules are .ec-button-X:disabled (specificity 0,2,0); these mirror that
   specificity and win on load order (Atrezzo.css loads after EC). No !important. */
.ec-button-primary:disabled,
.ec-button-secondary:disabled,
.ec-button-tertiary:disabled,
.ec-button-danger:disabled {
    color: var(--text-secondary);
}

/* Tertiary/danger also use the disabled colour on their BORDER; keep the border
   muted (it is decorative, not text) so the button still reads as disabled. */
.ec-button-tertiary:disabled,
.ec-button-danger:disabled {
    border-color: var(--border-disabled);
}

/* EC button icons are <img class="ec-icon"> SVGs tinted with a CSS `filter`, not
   `color`, so they do NOT follow the darkened --text-secondary label colour we set
   on disabled buttons above. The deployed EnterpriseCore Version4 theme tints
   secondary-button icons WHITE (.ec-button-secondary img.ec-icon { filter:
   --ec-theme-filter-white }), which leaves a white chevron next to the dark label
   on a disabled button (e.g. the "More filters" button, .ec-button-secondary, in
   the Attending Physician section). Re-tint the disabled icon to MATCH the label:
   brightness(0) blacks the SVG, invert(32.2%) lifts it to ~rgb(82,82,82) =
   --text-secondary (#525252). Mirror EC's selector + :disabled -> (0,3,1) wins,
   and Atrezzo.css loads after the EC theme. No !important. */
.ec-button-primary:disabled img.ec-icon,
.ec-button-secondary:disabled img.ec-icon,
.ec-button-tertiary:disabled img.ec-icon,
.ec-button-danger:disabled img.ec-icon,
.ec-button-ghost:disabled img.ec-icon,
.ec-button-icon:disabled img.ec-icon {
    filter: brightness(0) invert(0.322);
}

/* Legacy (non-EC) buttons - .blue-btn / .btn-atz / .white-btn / .red-btn (defined
   in Atrezzo-overview.css) carry NO disabled styling, so a disabled one (e.g. the
   Search button in the Attending Physician section on AssessmentCase/Index) keeps
   its full solid fill + white text at bootstrap's opacity:.65 and reads as enabled,
   clashing with the unified grey EC disabled buttons elsewhere on the page. Give
   them the same disabled affordance: grey fill, muted border, readable
   --text-secondary label (4.57:1 on #c6c6c6, clears WCAG AA). Covers both the
   native :disabled attribute and the .disabled class some scripts toggle. */
.btn.blue-btn:disabled,  .btn.blue-btn.disabled,
.btn.btn-atz:disabled,   .btn.btn-atz.disabled,
.btn.white-btn:disabled, .btn.white-btn.disabled,
.btn.red-btn:disabled,   .btn.red-btn.disabled {
    background: var(--ec-color-gray-30, #c6c6c6);
    color: var(--text-secondary);
    border-color: var(--border-disabled);
    opacity: 1;
}

/* === Disabled fields: consistent grey fill + single bottom rule ============
   Make every disabled field match the select2 look (grey fill, 1px bottom rule
   only). Each selector mirrors or out-specifies the EC rule it overrides; no
   !important is needed because Atrezzo.css loads after the EC theme.
   The date/time icon addon carries bootstrap's .bg-transparent
   (transparent !important) which specificity cannot beat - but graying the
   input-group CONTAINER lets the transparent addon show the grey behind it, so
   no addon rule (and no !important) is required, and enabled fields are
   untouched thanks to the :has(input:disabled) guard. */
.form-control:disabled,
.form-group:has(input:disabled) input:not([type="checkbox"]):not([type="radio"]),
.form-group:has(textarea:disabled) textarea,
.form-control.datePicker:disabled,
.form-control.timePicker:disabled,
.input-group:has(.ec-datetime-input):has(input:disabled),
.input-group:has(.datePicker):has(input:disabled),
.input-group:has(.timePicker):has(input:disabled),
.ec-form-group:has(select:disabled) .select2-selection--single,
.modal-content .ec-form-group:has(select:disabled) .select2 .select2-selection,
.modal-body .form-control:disabled,
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background: var(--ec-color-gray-30, #c6c6c6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

/* Date/time pickers are DISABLED `.form-control.datePicker/.timePicker` inputs.
   Two EnterpriseCore (deployed Version4) rules out-specify the disabled-fill rule
   above and must be beaten by matching/exceeding their specificity (Atrezzo.css
   loads after EC, so equal specificity also wins):

   1) FILL #f4f4f4 comes from EC's (0,4,0) rule
        .input-group:has(.input-group-append) .form-control:not([readonly])
      The pickers are :disabled (not [readonly]), so :not([readonly]) matches.
      Mirror it + add :disabled -> (0,5,0) to win the grey fill. */
.input-group:has(.input-group-append) .form-control.datePicker:disabled,
.input-group:has(.input-group-append) .form-control.timePicker:disabled,
.input-group:has(.input-group-prepend) .form-control.datePicker:disabled,
.input-group:has(.input-group-prepend) .form-control.timePicker:disabled {
    background: var(--ec-color-gray-30, #c6c6c6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

/* 2) OPACITY 0.25 (date picker only - it carries .datePicker) comes from EC's
      (0,3,1) rule  .form-group:has(input:disabled) .datePicker .  Match the same
      selector (also (0,3,1)); later source order wins. Restore full opacity so the
      disabled value stays readable - the grey fill conveys the disabled state. */
.form-group:has(input:disabled) .datePicker,
.form-group:has(input:disabled) .timePicker {
    opacity: 1;
}

/* === Disabled BUTTONS: readable label text =================================
   EnterpriseCore's disabled-button text fails WCAG AA badly (measured):
     primary/secondary  #8d8d8d text on #c6c6c6 fill  = 1.94:1  (need 4.5:1)
     tertiary/danger    #c6c6c6 text on white         = 1.71:1
     ghost/icon         #c6c6c6 text                  = 1.71:1
   The disabled affordance (muted fill, not-allowed cursor, no hover) is kept;
   only the LABEL is darkened to --text-secondary (gray-70 #525252), which lifts
   contrast to 4.57:1 on the #c6c6c6 fill and 7.81:1 on white - both clear AA.
   EC's rules are .ec-button-X:disabled (specificity 0,2,0); these mirror that
   specificity and win on load order (Atrezzo.css loads after EC). No !important. */
.ec-button-primary:disabled,
.ec-button-secondary:disabled,
.ec-button-tertiary:disabled,
.ec-button-danger:disabled  {
    color: var(--text-secondary);
}


/* Tertiary/danger also use the disabled colour on their BORDER; keep the border
   muted (it is decorative, not text) so the button still reads as disabled. */
.ec-button-tertiary:disabled,
.ec-button-danger:disabled {
    border-color: var(--border-disabled);
}

.select2-container--disabled .select2-selection__arrow {
    display: none;
}

/* Program Enrollment > Program discharge: force disabled select2 controls to
   keep the same disabled grey fill as other disabled fields. */
#CodeReasonForDischargeID:disabled + .select2 .select2-selection--single,
#ProgramDischargeStatusID:disabled + .select2 .select2-selection--single,
#CodeServicesAccessedInServiceYearID:disabled + .select2 .select2-selection--single {
    background: var(--ec-color-gray-30, #c6c6c6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle-02);
    border-radius: 0;
}

.policies {
    min-height: 650px;
    height: calc(100vh - 240px);
    width: 100%;
}

.padding-set {
    padding: 1.8rem !important;
}

.hide-element, .tdDocumentDisplay {
    display: none;
}

.toColumnAlign {
    margin-top: 2.375rem;
}

.caseSearchDateField {
    margin-top: 1.45rem;
}

.required-class {
    color: var(--support-error);
    margin-left: 0.5rem;
}

.borderstyles tbody tr td {
    border-right: 0;
    border-left: 0;
}

.modal table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

    .modal table th {
        text-align: left;
        vertical-align: middle;
        box-sizing: border-box;
    }

        .modal table th span {
            display: block;
        }

.no-header-left-padding .ec-table-header-text {
    padding-left: 0;
}

.ec-table td:has(button), .ec-table td:has(button) button {
    padding: 0;
}

.ec-table td:has(span):has(button) button {
    padding: 5px 65px 5px 18px;
}

.ec-table thead th:first-child,
.ec-table thead th.d-none + th,
.ec-table-compact .ec-table tbody tr td.d-none + td {
    padding-left: 1rem;
}

.ec-table-compact .ec-table td, .ec-table-compact .ec-table th a {
    padding: 0;
    white-space: normal;
}

.ec-table-compact {
    display: inline-block;
    min-width: fit-content;
}

.ec-table th a, .ec-table th[draggable]:hover a {
    display: flex;
}

.ec-table th:first-child .ec-table-header {
    padding: 0;
}

.ec-table-compact .ec-table td:first-child {
    padding-left: 1rem;
}

.ec-table,
.ec-table .ec-rowgroup,
.ec-table tr {
    background: transparent;
}

.table-auto-wrap td {
    width: auto;
}

.form-group:has(button) {
    display: flex;
    justify-content: flex-end;
}

.form-group:has(.datePicker) .form-input-label {
    margin-bottom: 0.35rem;
}

.icon-color-primary {
    color: var(--icon-primary);
}

.article-container-header {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 1.25rem;
}

.fixedFooter {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.card-header {
    border-bottom: unset
}

.card-footer {
    border-top: unset
}

.card-headercustom {
    padding: 0.75rem;
}

/**** IEBanner *****/

.IEBanner {
    padding: 10px;
    text-align: left;
    border-left: 3px solid var(--Support-support-warning, #F1C21B);
    background: var(--Notification-notification-warning-background, #FCF4D6);
    display: flex;
}

.InfoBanner {
    padding: 10px;
    text-align: left;
    border: 1px solid var(--notification-info-border);
    background: var(--notification-info-background);
    display: flex;
    align-items: center;
    border-left: 3px solid var(--link-primary);
}

.fa-info-circle:before {
    color: var(--link-primary);
}

.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1.3rem;
}

    .icon-wrapper .fa-circle {
        color: var(--Support-support-warning-inverse, #F1C21B);
        font-size: 1rem;
    }

    .icon-wrapper .fa-exclamation {
        position: absolute;
        color: var(--layer-selected-inverse);
        font-weight: bold;
        font-size: 0.7rem;
    }

.closespan {
    cursor: pointer;
    padding-right: 0.5rem;
    margin-left: auto;
}

.full-height {
    height: 100vh;
}

.modal-footer .ec-button {
    max-width: 50%;
    margin: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-item {
    text-align: center;
}

    .resource-item > div {
        padding: .5rem;
    }

.resource-icon img {
    height: 3rem;
}

.flush-left-edge {
    margin-left: -2.6rem;
}

.modal.fadeIn .modal-dialog:has(table):not(.datepicker) {
    display: table;
}

.modal.fadeIn .modal-dialog {
    min-width: min-content;
    max-width: 100%;
    padding: 3rem;
    width: max-content;
}

.modal-fax-history, .modal-attestation-popup {
    max-width: 70%;
    margin: 1.75rem auto;
}

.no-gap-wrapper {
    display: contents;
    margin: 0;
    padding: 0;
    border: none;
}

.bolded, .drgTableHeader {
    font-weight: bold;
}

.form-input-label.required::after {
    color: var(--support-error);
    content: "(Required)";
    margin-left: 0.5rem;
}

.pagination a {
    padding: 1px 8px;
}

/* added this css to make the displaying both of page size and number of pages */
.taskCenterResultDiv .sp_wrapper .sp_navigator .mefloatright,
.assessmentGrid .sp_wrapper .sp_navigator .mefloatright {
    display: flex;
    margin-top: 1.5rem;
}

/* This CSS overrides a third party package jquery.sortpaginate.css.*/
.sp_wrapper .sp_navigator .sp_next, .sp_wrapper .sp_navigator .sp_previous {
    width: 2rem;
    content: url(/ECIcons/LeftArrowIcon);
    border: unset;
    padding: unset;
}

.sp_wrapper .sp_navigator .sp_next {
    content: url(/ECIcons/RightArrowIcon);
    border-left: 1px solid var(--border-subtle-00);
}

.sp_navigator .ec-pager-page-selection-container.pagination {
    padding-top: unset;
}

.sp_wrapper .table {
    margin-bottom: 0rem;
}

.ec-pager-container .ec-pager-result-count-container {
    white-space: nowrap;
}

.taskDescription {
    height: 12em;
    overflow: auto;
}

    .taskDescription .ec-checkbox-container {
        display: flex;
    }

label.required:after,
legend.required:after,
.label-required::after {
    color: var(--support-error);
    content: "(Required)";
    margin-left: 0.5rem;
}

/* Stack-layout section "(Required)" indicators (rendered inline in *Compact views) */
.stack-required {
    color: var(--support-error);
}

.select2-container
.select2-selection.select2-selection--single
.select2-selection__rendered {
    display: block;
}

    .select2-container
    .select2-selection.select2-selection--single
    .select2-selection__rendered
    .select2-selection__clear,
    .pageselect .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 1.5rem;
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: unset;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--icon-primary) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--icon-primary) transparent;
}

.ec-select.input-validation-error +
.select2 .select2-selection--single {
    border: 2px solid var(--support-error);
}

/* Start: Overrides for Non-EC to EC Table Icons
   - Overrides jquery.sortpaginate.css
*/
.sp_wrapper .sp_table .sp_sorted_desc {
    background-image: url(/ECIcons/SortDescending);
    background-size: 1.5rem 1.5rem;
}

.sp_wrapper .sp_table .sp_sorted_asc {
    background-image: url(/ECIcons/SortAscending);
    background-size: 1.5rem 1.5rem;
}

.sp_wrapper .sp_table th:hover:not(.sp_sorted_asc):not(.sp_sorted_desc) {
    background-image: url(/ECIcons/Sort);
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: right;
}

.sp_navigator {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--field-01);
}

.ec-pager-container .pageselect .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
}

.pageselect select {
    border: unset;
    background: unset;
    height: calc(1.5em + 0.75rem + 5px);
    border-right: 1px solid var(--border-subtle-00);
}

.sp_wrapper .sp_table th {
    vertical-align: middle;
    padding-left: 1rem;
    padding-right: 1.5rem;
}

/* End: Overrides for Non-EC to EC Table Icons */

/*This classes required for fax-split modal-dialog alignment*/
.myFaxSplitModal-dialog {
    max-width: 1000px;
    margin: 1.75rem auto;
}


.faxQueue-comment {
    height: 150px;
}

.checkfaximage {
    height: 200px;
    border: 1px solid black;
}

.faxpage {
    padding-bottom: 3rem !important;
    text-align: center;
}

.faxSplitResultDiv {
    max-height: 500px;
    overflow-y: auto;
}

.fax-queue-action-scroll .dropdown-menu,
.fax-queue-action-scroll .ec-dropdown-menu {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-menu.show {
    z-index: 9999;
}

.upload-btn-wrapper {
    align-items: stretch;
    background: var(--field-02);
    border: 1px solid var(--border-subtle-02);
    display: flex;
    box-shadow: none;
    flex-direction: column;
    height: 12rem;
    justify-content: start;
    min-width: 24rem;
    padding: 1rem;
    position: relative;
}

    .upload-btn-wrapper input[type=file] {
        font-size: 1rem;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

.modal-backdrop {
    display: none;
}

.modal {
    background: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

/* Multi-select drop-downs for Sumo select custom */
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height: 160px;
    overflow: auto;
}

    .dropdown-content .row {
        color: var(--icon-on-color);
        align-items: center;
    }

        .dropdown-content .row:hover {
            background-color: var(--button-primary);
            align-items: center;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown.form-group .form-input-label {
    margin-bottom: .40rem;
}

.cmGroupFavorite {
    float: right;
}

.cmWorkQueueMyGroupCheckbox {
    background-color: transparent;
}

    .cmWorkQueueMyGroupCheckbox.form-check-input, .umWorkQueueMyGroupCheckbox.form-check-input {
        accent-color: var(--icon-on-color);
    }

a.cmGroupFavorite, a.umGroupFavorite {
    color: var(--icon-on-color); /*Star icon color*/
}

/*Work queue ->CM->My Work Group*/
.SumoSelect .form-check-input {
    position: absolute;
    margin-left: -0.75rem;
}

.SumoSelect .form-check-label {
    margin-bottom: 0;
    padding-left: 10px;
}

.SumoSelect .form-check-input:focus {
    box-shadow: unset;
}

.SumoSelect.sumo_CMMyGroups.form-control, .SumoSelect.umMyGroups.form-control {
    border: 0px;
    border-bottom: 1px solid var(--border-strong-01);
}

.SumoSelect .select-all {
    height: auto !important;
}

.SumoSelect {
    padding: 0;
    width: 100%;
    height: auto;
}

    .SumoSelect .icon-link-hidden {
        position: absolute;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }

    .SumoSelect > .CaptionCont {
        border: none;
        background-color: var(--layer-01);
    }

        .SumoSelect > .CaptionCont > label {
            margin: 0;
        }

            .SumoSelect > .CaptionCont > label > i {
                background-image: none;
            }

/*End work queue ->CM/UM->My Work Group*/

.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem; /* This should be the correct spacing for AHDS */
}

.modal-footer .action-bar {
    gap: 0.0625rem;
}
/* Content-switcher changes starts */
.content-switcher {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    background-color: transparent;
    padding: 0.5rem 1rem;
    border-radius: 0;
}

    .content-switcher.tab-selected {
        background-color: var(--text-disabled);
        color: var(--icon-inverse);
    }

/* Content-switcher changes ends */
.select2-container--open, body.modal-open .ec-loading-animation-overlay {
    z-index: 9999999;
}
/*End work queue ->CM/UM->My Work Group*/

.ec-button span.icon {
    padding-left: 10px;
}

/* style for remove border-bottom for PRSchedule screen table */
.physician-schedule .form-control, .physician-schedule .input-group:has(.ec-datetime-input), .physician-schedule .ec-form-group .select2-container .select2-selection--single {
    border-bottom: none;
}

/* Add border on focus */
.physician-schedule .input-group:has(.ec-datetime-input:focus) {
    border-bottom: 2px solid var(--focus-primary);
}

.physician-schedule {
    table-layout: fixed;
    width: 100%;
}

    .physician-schedule th {
        background-color: var(--tag-background-gray);
        color: var(--text-disabled);
    }

.schedule-date, .schedule-dayOfWeek {
    color: var(--text-on-color-disabled);
}

/* Styles for checkbox list*/
.BoxedCheckList {
    padding-left: 5px;
    border: solid 1px; /* Styles shows border around checklist */
    border-color: var(--border-strong-01);
    width: 380px;
    height: 135px;
    overflow: auto;
}

.table thead th, .table tbody td {
    border: none;
}

/* To fix the calender issue inside table in modal*/
.datepicker .table tr {
    border-top: unset;
    height: auto;
}

    .datepicker .table tr th {
        background: unset;
    }

.modal .datepicker table {
    font-size: unset;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto;
}

/* Styles for fax queue search result table */
.sp span.ec-table-header-text {
    padding-right: 1rem;
}

.fieldsetinteraction {
    padding: 1em;
    border: solid;
}

.legendinteraction {
    font-size: 1rem;
    font-weight: 600;
    padding: 2px 4px 0px 4px;
    width: auto
}

.programEnrollmentHistory:not(.programEnrollmentCheckbox .programEnrollmentHistory) {
    padding-left: 10px;
    padding-top: 40px;
}

.programEnrollmentCheckbox .form-check-input {
    position: unset;
}

/*overiding this because new version of ec-table > tr having fixed height*/
table .DatatableHideRows {
    height: auto;
}

/*for Parent dose disable delete option, for additional dose enable delete option*/
.parent-dose-container .default-field {
    display: none;
}

.note-read-more-sec {
    float: right;
    margin: 15px 10px 0px 0px;
    cursor: pointer;
    font-weight: bold;
    color: var(--button-primary);
}

.note-border {
    vertical-align: middle;
    border-style: groove;
    margin-left: 5px;
    margin-right: 5px;
}

.note-valign {
    vertical-align: middle;
}

.interactions-phi {
    margin-left: 1px;
}

.create-case-interaction-phi .ec-checkbox-group {
    width: 100%;
}

    .create-case-interaction-phi .ec-checkbox-group fieldset {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 0.5rem 0.75rem;
    }

.create-case-interaction-phi .ec-card,
.create-case-interaction-phi .ec-checkbox-container {
    width: 100%;
    margin: 0;
}

.notes-container,
.note-text-container.note-read-more-container {
    position: relative;
    height: calc(3em + 15px);
    overflow: hidden;
    white-space: normal;
    background: var(--field-01);
    padding: .375rem .75rem;
}

.viewNoteModalPopupNote li.ec-note {
    display: block;
    height: auto;
    margin: 0 0 1rem 0;
}

.view-note-modal-popup-note li.ec-note {
    display: block;
    height: auto;
    margin: 0 0 1rem 0;
}

.viewNoteModalPopupNote .ec-note-footer {
    clear: both;
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(12.4rem, 1.5fr) minmax(10rem, 1fr) minmax(4rem, 0.75fr) max-content;
    align-items: center;
    column-gap: 0.75rem;
    height: auto;
}

.view-note-modal-popup-note .ec-note-footer {
    clear: both;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: auto;
    width: 100%;
}

    .view-note-modal-popup-note .ec-note-footer .ec-button {
        float: none;
        margin-left: auto;
        min-width: unset;
        white-space: nowrap;
    }

    .view-note-modal-popup-note .ec-note-footer:has(> span:nth-of-type(4)) {
        display: grid;
        grid-template-columns: minmax(6rem, 1fr) minmax(7rem, 1.5fr) minmax(4rem, 1fr) minmax(4rem, 0.75fr) max-content;
        column-gap: 0.75rem;
    }

        .view-note-modal-popup-note .ec-note-footer:has(> span:nth-of-type(4)) .ec-button {
            margin-left: 0;
        }

.note-alert {
    padding-left: 0px;
    padding-right: 20px;
    text-align: right;
}

.note-alert-display {
    padding-left: 0px;
    text-align: left;
}

.modal-open .modal {
    overflow-x: visible;
}

.UMCaseConsumerDetailTable .text-mutedcustom {
    text-transform: capitalize;
}

.scrollbatch {
    overflow-y: auto;
    height: 30rem;
    overflow-x: hidden;
}

.sp_wrapper .sp_table .removeImage:hover:not(.sp_sorted_asc):not(.sp_sorted_desc), .sp_wrapper .sp_table .removeImage.sp_sorted_asc, .sp_wrapper .sp_table .removeImage.sp_sorted_desc {
    background-image: none;
}


.historysnapshot:hover, .historysnapshot {
    color: var(--text-primary);
    text-decoration: none;
}

fieldset[disabled] .ignoreDisable {
    pointer-events: visible;
    cursor: auto;
}

.angle, .angle:hover {
    color: var(--text-primary);
}

.caseSummary .ec-table th {
    padding-left: 1rem;
}

.caseSummary .ec-table td span {
    word-break: break-word;
    overflow-wrap: break-word;
}

.fa-print:before {
    content: "\f02f";
}

.note-text-content {
    word-break: break-word;
    overflow-wrap: break-word;
}

/*over ride the default color(blue) to green  to align with AHDS*/
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: var(--button-primary);
}

.AlertSearchResult .displayDeactivateReasonSection .ec-form-group label, .AlertSearchResult .displayDeactivateReasonSection .ec-form-group .select2-selection__rendered {
    display: flex;
}

.caseAlertBanner {
    background-color: #FFFFFF;
    min-height: 3.5rem;
    height: auto;
    row-gap: 0.5rem;
}

.alert-notification .ec-notification-bar .ec-chip-list .alert-warning {
    color: var(--tag-color-red);
    background-color: var(--tag-background-red);
    border-color: var(--tag-background-red);
}

.alert-notification .ec-notification-bar {
    height: auto;
}

    .alert-notification .ec-notification-bar .ec-chip-list {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem;
    }

.member-budget-potential-amount {
    color: var(--tag-color-red);
    font-style: italic;
}

.member-budget-purchase-summary-detail .member-budget-purchase-summary-row {
    row-gap: 1rem;
}

.member-budget-purchase-summary-detail .member-budget-purchase-summary-actions {
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.member-budget-purchase-summary-detail .member-budget-purchase-summary-action-item {
    display: flex;
}

@media (max-width: 1440px) {
    .member-budget-purchase-summary-detail .member-budget-purchase-summary-metric {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .member-budget-purchase-summary-detail .member-budget-purchase-summary-actions {
        flex: 0 0 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        max-width: 100%;
    }
}

.iqConnectIFrame {
    height: 651px;
    width: 100%;
}

.resource-item-row {
    gap: 1rem;
}

/*Make ANG calendar similar as EC calendarr*/
.fa-calendar-alt, .fa-calendar-days {
    content: url(/ECIcons/Calendar);
    width: 1.4rem;
}

.modal-body h6 {
    font-weight: 400;
    font-size: 0.875rem;
}

.ec-page-summary .col {
    padding: 1rem;
}

.placeholder {
    color: var(--text-primary);
    font-size: 1rem;
}

.consumerDetailsSummaryTable .ec-table th:focus-within:not(:has(ec-link:focus)):not(:has(ec-button:focus)),
.consumerDetailsSummaryTable th:has(:focus-within):not(:has(ec-link:focus)):not(:has(ec-button:focus)),
.consumerDetailsSummaryTable .ec-table th:hover:not(:has(ec-link)):not(:has(ec-button)) {
    background: var(--layer-accent-01);
    border: unset;
}

.caseedithistory:hover, .caseedithistory {
    color: var(--text-primary);
    text-decoration: none;
}

.nav-tabs .nav-link.caseedithistory.active,
.section-active:focus, .section-active,
.nav-tabs .nav-link.historysnapshot.active {
    background-color: var(--layer-hover-01);
}

.nav-tabs .nav-link.active {
    color: var(--text-secondary);
}

.adjustCol-32 {
    width: 32% !important;
}

.adjustCol-21 {
    width: 21% !important;
}

.spaceBetween {
    display: flex;
    justify-content: space-between;
}

.wide-form {
    width: 100rem;
}

.iconsinsideTableSize {
    font-size: 1.5rem;
    color: black;
}

.comment-count-text {
    top: -3px;
    left: -5px;
    color: #fff;
}

.wizardGenerateLetterIFrameDiv {
    height: 65rem;
}

    .wizardGenerateLetterIFrameDiv iFrame {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.pdf-object,
.wizard-pdf-viewer {
    width: 100%;
    height: 50rem;
    max-width: 100%;
}

.messsageCenterIndex .heading-text.um-message-center-request {
    padding-left: 1rem;
}

.messsageCenterIndex .heading-text.um-message-center-message-to {
    padding-left: 4rem;
}

.messsageCenterIndex .heading-text.um-message-center-message-from {
    position: relative;
    right: 3rem;
}

.messsageCenterIndex .heading-text.um-message-center-message-sent-on {
    position: relative;
    right: 4.5rem;
}

.messsageCenterIndex .heading-text.um-message-center-message-subject {
    position: relative;
    left: -2rem;
}

.messsageCenterIndex .um-message-center-message-to {
    padding-left: 4rem;
}

.messsageCenterIndex .um-message-center-message-to-pr {
    padding-left: 6rem;
}

.messsageCenterIndex .um-message-center-message-from {
    position: relative;
    right: 3rem;
}

.messsageCenterIndex .um-message-center-message-sent-on {
    position: relative;
    right: 4rem;
}

.messsageCenterIndex .um-message-center-message-subject {
    position: relative;
    right: 2rem;
}

.messsageCenterIndex .um-message-center-message-subject-pr {
    padding-left: 5.5rem;
}

.messsageCenterCompact .um-message-center-message-to-pr,
.messsageCenterCompact .um-message-center-from,
.messsageCenterCompact .um-message-center-sent,
.messsageCenterCompact .um-message-center-message-subject-pr {
    padding-left: 0;
}

.messsageCenterCompact .um-message-center-message-to-pr {
    width: 14%;
}

.messsageCenterCompact .um-message-center-sent {
    width: 23%;
}

.messsageCenterCompact .assessment-message-center-message-pr {
    width: 20%;
    padding-left: 5.5rem;
}

.messsageCenterCompact .assessment-message-center-sent-pr {
    padding-left: 4rem;
}

.caseMessageResultDiv .table-responsive {
    overflow: hidden;
}

.waitlistBulkReleaseForm .ec-table {
    overflow: visible;
}

.caseMessageResultDiv .compact-detailed-nav {
    display: flex;
    justify-content: end;
}

.diagnosisAddModal .checkbox-list-grid .ec-checkbox-group fieldset,
.diagnosisAddModal .diagnosisSelectedView fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.5rem 1rem;
}

.diagnosisAddModal .ec-checkbox-container {
    align-items: flex-start;
}

/*To indicate the status color*/
.text-statusCustom {
    color: var(--ec-color-yellow-30);
}

.text-secondarycustom {
    color: var(--ec-color-gray-60);
}

.text-successcustom {
    color: var(--ec-color-hover-green-50);
}

.checkbox-col {
    width: 0.5rem;
}

/*Care plan expand icon*/
.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

    .caret::before {
        content: "\25B6";
        color: #02006c;
        display: inline-block;
        margin-right: 6px;
        font-size: 20px;
    }

.caret-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

.textOverflowEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.applyRedColor, .color-red {
    color: var(--support-error);
}

.is-expanded {
    transform: scaleY(-1);
}

.copyFieldsModalPopupCertification .ec-checkbox-group-header-container,
.copyFieldsModalPopupCertificationDates .ec-checkbox-group-header-container {
    position: relative;
    bottom: 3rem;
    border-bottom: solid 2px var(--layer-accent-01);
}

    .copyFieldsModalPopupCertification .ec-checkbox-group-header-container .ec-checkbox-group-description,
    .copyFieldsModalPopupCertificationDates .ec-checkbox-group-header-container .ec-checkbox-group-description {
        padding: 0rem 0rem 0rem 0.5rem;
    }

.copyFieldsModalPopupCertification fieldset,
.copyFieldsModalPopupCertificationDates fieldset {
    position: relative;
    top: 2rem;
    margin-left: 0.5rem;
}

    .copyFieldsModalPopupCertification fieldset .ec-checkbox-container,
    .copyFieldsModalPopupCertificationDates fieldset .ec-checkbox-container {
        margin: 0.5rem 0.5rem 0.25rem 0rem;
        align-items: start;
    }

        .copyFieldsModalPopupCertification fieldset .ec-checkbox-container .ec-choice-input-description,
        .copyFieldsModalPopupCertificationDates fieldset .ec-checkbox-container .ec-choice-input-description {
            display: block;
        }

.errorMessage {
    color: var(--support-error);
    position: relative;
    bottom: 1.5rem;
}

.error-message-alignment {
    position: relative;
    top: 3rem;
}

.consumerSearchMessage.errorMessage {
    bottom: 0.5rem;
}

.copyFieldsModalPopupCopyToRPC .ec-checkbox-group-header-container {
    border-bottom: solid 2px var(--layer-accent-01);
}

.copyFieldsModalPopupCopyToRPC .ec-checkbox-group {
    display: flex;
    flex-direction: column-reverse;
}

    .copyFieldsModalPopupCopyToRPC .ec-checkbox-group .ec-checkbox-container {
        margin: 0.5rem 0.5rem 0.25rem 0.5rem;
    }

.copyFieldsModalPopupCopyToRPC .ec-checkbox-group-header-container .ec-checkbox-group-description {
    padding: 0rem 0rem 0rem 0.5rem;
}

.copyFieldsModalPopupCopyToRPC .errorMessage, .viewRequestModalPopupContent .errorMessage {
    bottom: 0.5rem;
}

.copyFieldsModalPopupCopyToRPC .ec-modal-header {
    margin-bottom: 1.25rem;
}

.modal-content .ec-modal-header {
    font-size: 1.25rem;
}

.modal-content .copy-to-pending {
    position: relative;
    left: 344px;
    z-index: 1;
    padding-left: 0.75rem;
    top: 84px;
}

    .modal-content .copy-to-pending .form-check-input {
        height: 24px;
        width: 25px;
        border: 3px solid #000;
        background-color: #fff;
        border-radius: 3px;
    }

        .modal-content .copy-to-pending .form-check-input:checked {
            background-color: var(--ec-color-primary-700);
            border-color: var(--ec-color-primary-700);
            background-image: url(/ECIcons/CheckboxChecked?_=3925228b53eed2d06bc7c271f584e5be0e8b0795);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 24px 25px;
        }

.modal-content .ec-checkbox-group-header {
    padding-left: 0.5rem;
}

#copyFieldsModalPopup .modal-dialog {
    max-width: 800px;
    width: auto;
}

#viewRequestModalPopup .modal-dialog {
    max-width: 800px;
    width: auto;
}

.appeal-extension-requested {
    position: relative;
    top: 3rem;
}

.modal-body .ec-card {
    background: var(--layer-02);
    width: max-content;
    margin: 12px 15px 15px 0px;
}

.ang-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ang-card-double {
    flex-basis: 30rem;
}

.ang-card-single {
    flex-basis: 15rem;
}

.ang-card-triple {
    flex-basis: 45rem;
}

.ang-card-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}

.ang-card:hover .ang-card-contents-container {
    background-color: var(--ec-color-hover-gray-10);
    transition: 0.3s;
}

.ang-card-title {
    padding-left: 1rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.ang-card-contents-container {
    background-color: var(--ec-color-gray-10);
    height: 100%;
    padding: 16px;
}

.ang-card-heading {
    font-size: 12px;
    color: var(--ec-color-gray-100);
    line-height: 16px;
}

.ang-card-value {
    font-size: 16px;
    color: var(--ec-color-gray-100);
    line-height: 22px;
}

.ang-card-contents {
    display: flex;
    justify-content: space-between;
}

.ang-card-contents-divider-bottom {
    border-bottom: 1px solid var(--ec-color-gray-40);
    display: inline-block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
}

.ang-card-contents-divider-right {
    border-right: 1px solid var(--ec-color-gray-40);
    margin-right: 1rem;
    padding-right: 1rem;
}

.ang-card-contents-parent {
    display: flex;
}

.ang-card-contents-column {
    flex-direction: column;
    flex-grow: 1;
}

.ang-card-contents-row {
    flex-direction: row;
}

.ang-card-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ang-card-count {
    font-size: 3rem;
}

.ang-card-date {
    font-size: 2rem;
}

.ang-card-count-label {
    font-size: 1rem;
}

.ang-card-footer {
    margin-top: 4px;
}

    .ang-card-footer button {
        padding: 8px 16px 8px 16px;
    }

.umLetterReportViewerDiv div.MSRS-RVC > table:not(.ParametersFrame) {
    width: 100%;
}

.letter-comments-action {
    margin-top: 2.25rem;
}

.attachmentsHeaderMiddlePadding {
    padding-left: 18rem;
}


.octagonStyle {
    width: 16px;
    height: 16px;
    background: var(--support-error);
    position: relative;
}

    .octagonStyle:before {
        content: "";
        width: 16px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 4px solid var(--support-error);
        border-left: 4px solid var(--border-subtle-02);
        border-right: 4px solid var(--border-subtle-02);
    }

    .octagonStyle:after {
        content: "";
        width: 16px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 4px solid var(--support-error);
        border-left: 4px solid var(--border-subtle-02);
        border-right: 4px solid var(--border-subtle-02);
    }

.ghost-button-dark {
    color: var(--ec-color-blue-70);
}

.primary-rank-red {
    color: var(--ec-color-red-60);
}

.flagManipulation .toggle_flag {
    display: grid;
}

/*UM Case Info Page Styles*/
.procedureApprovedColor {
    color: var(--interactive-primary);
}

.procedureDeniedColor {
    color: var(--support-error);
}

.ProcedurePendingColor, .PendingUmOrAssessmentTask {
    color: var(--support-warning);
}

.requestProcedureCodeDetailsHeader {
    background-color: var(--field-01);
    padding: 1rem 0 0.5rem 0;
}

.procedure-button {
    margin-top: 2.5rem;
}

.preCheckTaskReassignWarning {
    background-color: var(--background-notification-error);
    border-left: 3px solid var(--support-error);
    border-right: 1px solid var(--notification-error-border);
    border-top: 1px solid var(--notification-error-border);
    border-bottom: 1px solid var(--notification-error-border);
}

    .preCheckTaskReassignWarning span, .WizardErrorsWarning span {
        color: var(--text-primary);
        font-weight: 400;
        font-size: 0.875rem;
        position: relative;
        left: 0.875rem;
    }

.WizardErrorsWarning span {
    padding-top: 1rem;
    left: auto;
    padding-left: 1rem;
}

.preCheckTaskReassignWarning i {
    position: relative;
    left: 0.2rem;
    color: var(--support-error);
    top: 0.5rem;
}

.reassign-text {
    font-size: 0.75rem;
    color: var(--text-helper);
}

.excludeDeceasedMemberDiv {
    margin-top: 2.5rem;
}

.WizardErrorsWarning {
    background-color: var(--notification-info-background);
    border-left: 3px solid var(--support-info-inverse);
    border-right: 1px solid var(--notification-info-border);
    border-top: 1px solid var(--notification-info-border);
    border-bottom: 1px solid var(--notification-info-border);
    display: flex;
}

    .WizardErrorsWarning i {
        position: relative;
        left: 0.2rem;
        color: var(--support-info-inverse);
        top: 1.3rem;
    }

/* Toast Notifications - Success*/
#toast-container > .toast-success, #toast-container > .toast-success:hover {
    background-color: var(--ec-color-green-10);
    color: var(--ec-color-gray-100);
    border-left: 3px solid var(--ec-color-green-50);
    -webkit-box-shadow: 0px 2px 6px 0px var(--ec-color-cool-gray-30);
    box-shadow: 0px 2px 6px 0px var(--ec-color-cool-gray-30);
    width: auto;
    min-width: 25.3125rem;
    max-width: 45rem;
    padding: 1.30rem 3rem 1.25rem 3.3rem;
    background-image: url(/ECIcons/NotificationSuccessTick) !important;
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1.375rem 1.375rem;
    opacity: 1;
}

/* Toast Notifications - Error */
#toast-container > .toast-error, #toast-container > .toast-error:hover {
    background-color: var(--background-notification-error);
    color: var(--ec-color-gray-100);
    border-left: 3px solid var(--ec-color-red-60);
    -webkit-box-shadow: 0px 2px 6px 0px var(--ec-color-cool-gray-30);
    box-shadow: 0px 2px 6px 0px var(--ec-color-cool-gray-30);
    width: auto;
    min-width: 25.3125rem;
    max-width: 45rem;
    padding: 1.30rem 3rem 1.25rem 3.3rem;
    background-image: url(/ECIcons/NotificationErrorBlock) !important;
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1.375rem 1.375rem;
    opacity: 1;
}

    #toast-container > .toast-success .toast-title,
    #toast-container > .toast-success .toast-message,
    #toast-container > .toast-error .toast-title,
    #toast-container > .toast-error .toast-message {
        display: inline;
        color: var(--ec-color-gray-100);
        font-size: 0.875rem;
    }

    #toast-container > .toast-success .toast-message,
    #toast-container > .toast-error .toast-message {
        margin-left: 0.25rem;
        font-weight: 400;
    }

    #toast-container > .toast-success .toast-close-button,
    #toast-container > .toast-error .toast-close-button {
        color: var(--ec-color-gray-100);
        text-shadow: none;
        opacity: 1;
        top: 50%;
        right: 1rem;
        font-size: 1.375rem;
        position: absolute;
        transform: translateY(-50%);
        font-weight: normal;
    }

/* Slide from Left */
.modal.come-from-side.left .modal-dialog {
    top: 50%;
    position: fixed;
    margin: auto;
    /* height: 25%; */
    left: -320px; /* Hidden off-screen */
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.come-from-side.left.show .modal-dialog {
    left: 0; /* Slide into view */
}

/* Full height content */
.modal.come-from-side .modal-content {
    height: 100%;
    border-radius: 5;
    width: 750px;
}

#SSOPostLoginMessage {
    white-space: nowrap;
}


.sla-clock-container {
    position: absolute;
    right: 10px;
    z-index: 900;
    gap: 0.7%;
    width: fit-content;
}

.sla-clock-container-nav {
    display: flex;
}

.sla-clock {
    font-size: 0.857rem;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sla-clock-primary, .sla-clock-secondary {
    width: 0px;
    height: 0px;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

    .sla-clock-primary.sla-clock-nav-visible, .sla-clock-secondary.sla-clock-nav-visible {
        visibility: visible;
        margin-right: 2px;
        padding: 5px;
        padding-bottom: 2px;
        width: fit-content;
        height: fit-content;
    }

    .sla-clock-primary .ec-button-primary {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .sla-clock-primary pre, .sla-clock-secondary pre {
        font-family: 'Roboto', sans-serif;
        margin-top: 0;
        margin-bottom: 0;
    }

.sla-clock-circle-icon {
    display: inline-block;
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background-color: none;
    margin-bottom: -2px;
}

.sla-clock-nav {
    height: 0px;
    width: 0px;
    visibility: hidden;
}

    .sla-clock-nav.sla-clock-nav-visible {
        width: 10px;
        cursor: pointer;
        visibility: visible;
        background-color: white;
        padding-top: 20px;
    }

.sla-clock-expandable {
    display: none;
}

.sla-clock-time {
    align-items: center;
    display: flex;
}

.sla-clock-header {
    display: flex;
    justify-content: flex-end;
    margin-right: 24px;
}

.sla-clock-expandable {
    margin-right: 22px;
    margin-top: 0.25rem;
}

.sla-clock-header-background {
    background-color: #393939;
    color: #fff;
    width: fit-content;
    padding: 10px;
}

.sla-clock-expandable .sla-clock-expand-collapse-button {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}

#sla-clock-expand-collspase-main-btn {
    padding-left: 20px;
    cursor: pointer;
}

.sla-clock-summary {
    display: flex;
    width: max-content;
}

.sla-clock-primary-paused {
    justify-content: center;
    display: grid;
    border: 1px dashed black;
}

.sla-clock-threshold {
    height: 0px;
    width: 0px;
    visibility: hidden;
}

.communicationInteractionsGridDiv .ec-table td button {
    min-width: unset;
    padding-right: 3rem;
}

.documentSearchResults .ec-table {
    display: block;
}

.redirect-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

    .redirect-modal .modal-dialog {
        max-width: min(23rem, calc(100vw - 2rem));
        margin: 0;
        width: 100%;
        pointer-events: auto;
    }

    .redirect-modal .modal-content {
        border: 4px solid black;
        border-radius: 2.25rem;
        font-weight: bold;
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
    }

    .redirect-modal .modal-body {
        padding: 1rem 1.25rem;
        text-align: left;
    }

    .redirect-modal .row {
        margin: 0;
    }

.messageRecallButton.disabled,
.messageRecallButton.disabled:hover {
    pointer-events: none; /* blocks all clicks */
    opacity: 0.5; /* greyed-out look */
    cursor: not-allowed;
}

.documentSearchResults .ec-table {
    display: inline-table;
}

.appealProviderGrid .ec-table {
    display: block;
}

.redirect-modal .col-12 {
    padding: 0;
}

.pendingTitles {
    display: none;
    background-color: var(--tag-background-black);
    border: 1px solid var(--tag-background-black);
    padding: 0.625rem 0.625rem;
    white-space: nowrap;
    font-size: 0.825rem;
    color: var(--background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 2px;
    font-weight: 400;
    position: absolute;
}

.pendingContainer:hover .pendingTitles,
.pendingContainer:focus-within .pendingTitles {
    display: block;
}

.pendingTitles::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 10px;
    border-width: 0.3125rem;
    border-style: solid;
    border-color: transparent transparent var(--tag-background-black) transparent;
}

.pendingTitles li {
    padding-left: 0.5rem;
}

.color-green {
    color: var(--background-brand);
}

.right-section {
    background-color: var(--skeleton-element);
    color: var(--text-secondary);
}

.auditHistorySearchResultResultGrid {
    overflow-y: hidden;
}

.w-5 {
    width: 5% !important;
}

.w-15 {
    width: 15% !important;
}

.w-21 {
    width: 21% !important;
}

.w-42 {
    width: 42% !important;
}

.w-16 {
    width: 16% !important;
}

.w-40 {
    width: 40% !important;
}

.w-20 {
    width: 20% !important;
}


.w-95 {
    width: 95% !important;
}

.modal-lg.modal-content:has(table), .modal-xl.modal-content:has(table) {
    max-width: max-content;
}

.ec-loading-animation-overlay1.show {
    display: block;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
}
.ec-loading-animation-overlay1 {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1200;
}

/* === ANG-57499: top navigation bar background =============================
   The top nav (header.ec-page-header) shipped on the default white EC theme
   with grey text (#525252), which reads as low-contrast and causes eye strain.
   Give the bar a dark brand-green background (green-70, #016101, ~9:1 with
   white text). On dark green the grey nav text
   and dark logo/icons would be illegible, so this block also flips the bar's
   text to --text-on-color (#fff) and re-tints the EC icon <img> SVGs white via
   `filter` (EC tints icons with a filter, not `color` - same technique as the
   disabled-button-icon block above). Selectors mirror EC's; Atrezzo.css loads
   after the runtime EnterpriseCore theme, so the ties win with no !important. */
header.ec-page-header {
    background-color: var(--ec-color-green-70);
}
/* Text/links across both the primary and secondary header rows. (The "Change
   context" link is NOT here - it lives in a separate #ChangeContextBar below
   the header, so it keeps its default colour and is out of this ticket.) */
header.ec-page-header,
header.ec-page-header .ec-nav-link,
header.ec-page-header .navbar-brand {
    color: var(--text-on-color);
}
/* The help/user/overflow buttons in the secondary row carry an EC white
   background; with the icons tinted white below, a white-on-white button reads
   as a blank box. EC paints them via icon-based :has() rules, e.g.
      .nav-link:has(.ec-icon-help)  { background: var(--layer-01) }   (0,2,0)
   and .ec-page-header-secondary .navbar-expand.ec-nav .nav-link.ec-nav-link
   { background: var(--background) }                                  (0,4,0)
   Mirror BOTH the :has() form and the descendant form, scoped under
   header.ec-page-header, to out-specify each and make the buttons transparent
   so the green bar shows through. Atrezzo.css loads after EC; no !important. */
header.ec-page-header .nav-link:has(.ec-icon-help),
header.ec-page-header .nav-link:has(.ec-icon-applicationuseroutlined),
header.ec-page-header .nav-link:has(.ec-icon-alertsolid),
header.ec-page-header .ec-page-header-secondary .navbar-expand.ec-nav .nav-link.ec-nav-link,
header.ec-page-header .ec-nav-help .nav-link,
header.ec-page-header .ec-nav-user .nav-link,
header.ec-page-header .ec-nav-overflow .nav-link {
    background-color: transparent;
}
/* EC nav/help/user icons are <img class="ec-icon"> SVGs tinted by `filter`;
   brightness(0) invert(1) paints them solid white to match the text. */
header.ec-page-header img.ec-icon {
    filter: brightness(0) invert(1);
}
/* EXCEPTION: the search magnifier sits INSIDE the light-grey search field, not
   on the green bar, so a white tint makes it vanish. Re-darken just that icon
   to near-black (#161616 = --icon-primary) for contrast on the light field.
   Scoped under .ec-page-header-search + higher specificity to beat the white
   rule above. */
header.ec-page-header .ec-page-header-search img.ec-icon-search {
    filter: brightness(0);
}

/* Change-context bar (#ChangeContextBar > .ec-user-context): EC gives it a
   light-grey fill (--field-hover-01, #e8e8e8) with a dark "Change context" chip
   (#393939) floating on it, which clashes under the new green header. Extend the
   chip's OWN dark gray across the WHOLE bar (--background-inverse = #393939, the
   semantic dark-surface token) and drop the chip's separate background so the
   link sits flat on the now-uniform dark bar as white text. Mirrors EC's
   selector; Atrezzo.css loads after EC, so no !important is needed. */
.ec-user-context {
    background-color: var(--background-inverse);
}
.ec-user-context .ec-user-change-context {
    background-color: transparent;
    color: var(--text-on-color);
}

.ec-user-current-context {
    color: white;
}