/*
 * Banking 360 design-system defaults.
 *
 * The B360 shell content and B360-owned overlay panes are the platform boundary.
 * Credit360 is outside both roots, so these globals cannot leak into that MFE.
 */

/*
 * The shell focuses its main region after navigation. Pointer/programmatic
 * focus must not draw an outline around the entire page; keyboard focus still
 * receives a visible, inset indicator.
 */
#main-content:focus {
  outline: none;
}

#main-content:focus-visible {
  outline: 3px solid #1865b1;
  outline-offset: -3px;
}

/* B360 panel surfaces must not depend on an MFE's Bootstrap stylesheet. */
:is(#page-container, .b360-overlay-panel) .card {
  --bs-card-bg: #fff;
  background-color: #fff !important;
  color: #141414;
}

/* Primary actions match Credit360's raised-button treatment. */
:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
) {
  --mat-button-filled-container-color: #003366;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-protected-container-color: #003366;
  --mat-button-protected-label-text-color: #fff;
  --mdc-filled-button-container-color: #003366;
  --mdc-filled-button-label-text-color: #fff;
  --mdc-filled-button-label-text-size: 14px;
  --mdc-filled-button-label-text-weight: 400;
  --mdc-filled-button-label-text-tracking: normal;
  --mdc-protected-button-container-color: #003366;
  --mdc-protected-button-label-text-color: #fff;
  --mdc-protected-button-label-text-size: 14px;
  --mdc-protected-button-label-text-weight: 400;
  --mdc-protected-button-label-text-tracking: normal;
  background-color: #003366 !important;
  border-radius: 4px !important;
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
):not(.button-small) {
  --mat-button-filled-container-height: 36px;
  --mat-button-protected-container-height: 36px;
  --mdc-filled-button-container-height: 36px;
  --mdc-protected-button-container-height: 36px;
  height: 36px;
  min-height: 36px;
}

:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
) .mdc-button__label {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
):not(:disabled):not(.mat-mdc-button-disabled):hover,
:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
):not(:disabled):not(.mat-mdc-button-disabled):focus-visible {
  background-color: #26558c !important;
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
}

:is(#page-container, .b360-overlay-panel) :is(
  .mat-mdc-unelevated-button.mat-primary,
  .mat-mdc-raised-button.mat-primary,
  .mat-flat-button.mat-primary,
  .mat-raised-button.mat-primary
):is(:disabled, .mat-mdc-button-disabled) {
  background-color: rgba(0, 0, 0, 0.1059) !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-card:not(.table-content) {
  padding: 12px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-card-header {
  padding: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-card-title {
  font-size: 18px !important;
  font-weight: 700 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-card-subtitle,
:is(#page-container, .b360-overlay-panel) .mat-mdc-card-content {
  font-size: 16px !important;
  padding: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-form-field-hint-wrapper {
  display: flex;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field {
  --mat-form-field-container-height: 40px;
  --mat-form-field-container-vertical-padding: 7px;
  --mat-form-field-container-text-size: 14px;
  --mat-form-field-filled-label-text-size: 12px;
  --mat-form-field-outlined-label-text-size: 12px;
  --mat-select-trigger-text-size: 14px;
  --mdc-outlined-text-field-container-shape: 4px;
  font-size: 15px;
  margin-bottom: 4px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid {
  --mdc-outlined-text-field-error-label-text-color: #ba2525;
  --mdc-outlined-text-field-error-hover-label-text-color: #ba2525;
  --mdc-outlined-text-field-error-focus-label-text-color: #ba2525;
  --mdc-outlined-text-field-error-caret-color: #ba2525;
  --mdc-outlined-text-field-error-outline-color: #ba2525;
  --mdc-outlined-text-field-error-hover-outline-color: #ba2525;
  --mdc-outlined-text-field-error-focus-outline-color: #ba2525;
  --mdc-filled-text-field-error-label-text-color: #ba2525;
  --mdc-filled-text-field-error-hover-label-text-color: #ba2525;
  --mdc-filled-text-field-error-focus-label-text-color: #ba2525;
  --mdc-filled-text-field-error-caret-color: #ba2525;
  --mdc-filled-text-field-error-active-indicator-color: #ba2525;
  --mdc-filled-text-field-error-hover-active-indicator-color: #ba2525;
  --mdc-filled-text-field-error-focus-active-indicator-color: #ba2525;
  --mat-form-field-error-text-color: #ba2525;
  margin-bottom: 12px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-text-field-wrapper {
  background-color: #f4f5f6;
  padding-left: 10px;
  padding-right: 10px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-input-element {
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: inherit;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-input-element:-webkit-autofill,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-input-element:-webkit-autofill:hover,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-input-element:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #f4f5f6 inset !important;
  -webkit-text-fill-color: #000 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--textarea) {
  height: 40px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-infix {
  min-height: 40px;
  padding-bottom: 7px !important;
  padding-top: 7px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--textarea,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--textarea {
  align-items: stretch;
  height: auto;
  overflow: visible !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--textarea .mat-mdc-form-field-infix {
  min-height: 80px;
  overflow: visible !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--textarea .mat-mdc-form-field-flex {
  align-items: stretch;
  overflow: visible !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--textarea .mdc-text-field__input,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field textarea.mat-mdc-input-element,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-textarea-control {
  cursor: text;
  display: block;
  min-height: 35px !important;
  overflow: auto !important;
  resize: vertical !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field textarea.mat-mdc-input-element::-webkit-resizer {
  background-color: #777;
}

/* Native textareas use the same inset-label treatment as B360 inputs. */
:is(#page-container, .b360-overlay-panel) .textarea-field {
  position: relative;
}

:is(#page-container, .b360-overlay-panel) .textarea-field > label {
  color: #595959;
  font-size: 12px;
  font-weight: 500;
  left: 12px;
  line-height: 14px;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: 6px;
  z-index: 1;
}

:is(#page-container, .b360-overlay-panel) .textarea-field > textarea {
  background-color: #f4f5f6;
  border: 0;
  border-bottom: 1px solid #777;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  min-height: 72px;
  padding: 24px 12px 8px;
  resize: vertical;
  width: 100%;
}

:is(#page-container, .b360-overlay-panel) .textarea-field > textarea:focus-visible {
  border-bottom-color: transparent;
  outline: 2px solid #2d7ece;
  outline-offset: 0;
}

:is(#page-container, .b360-overlay-panel) .textarea-field > textarea[aria-invalid="true"] {
  border-bottom-color: transparent;
  outline: 1px solid #ba2525;
}

:is(#page-container, .b360-overlay-panel) .textarea-field:has(> textarea[aria-invalid="true"]) > label {
  color: #ba2525;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-notched-outline__leading,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-notched-outline__notch,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-notched-outline__trailing {
  border-color: transparent !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--focused .mdc-notched-outline__leading,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--focused .mdc-notched-outline__notch,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #2d7ece !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__leading,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__notch,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__trailing,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-text-field--focused .mdc-notched-outline__leading,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-text-field--focused .mdc-notched-outline__notch,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #ba2525 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-floating-label {
  background-color: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 500;
  padding: 0 4px;
  text-transform: uppercase;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mdc-floating-label,
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field.mat-form-field-invalid .mat-mdc-form-field-error {
  color: #ba2525 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-select-trigger {
  min-height: 24px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper {
  height: auto;
  margin-top: 4px;
  min-height: 0;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-bottom-align::before {
  height: 0 !important;
  display: inline !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-error-wrapper {
  padding: 0 2px;
  position: static;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-icon-suffix {
  align-items: center;
  align-self: stretch;
  display: inline-flex;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button {
  align-items: center;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-mdc-button-touch-target {
  height: 40px;
  width: 40px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .fas {
  line-height: 1;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mat-mdc-form-field-error {
  color: #ba2525;
  font-size: 12px;
  line-height: 14px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field .mdc-notched-outline--notched .mdc-notched-outline__notch {
  border-left: 0 !important;
  border-right: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .search-field > label {
  color: #141414;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

:is(#page-container, .b360-overlay-panel) .search-field .mat-mdc-form-field {
  display: block;
}

:is(#page-container, .b360-overlay-panel) .compact-field {
  --mat-form-field-container-height: 42px;
  --mat-form-field-container-vertical-padding: 9px;
}

:is(#page-container, .b360-overlay-panel) .compact-field .mdc-text-field--outlined {
  height: 42px;
}

:is(#page-container, .b360-overlay-panel) .compact-field .mat-mdc-form-field-infix {
  min-height: 42px;
  padding-bottom: 9px !important;
  padding-top: 9px !important;
}

:is(#page-container, .b360-overlay-panel) .search-field .mdc-floating-label {
  display: none;
}

/* Hidden search labels must not leave Material's floating-label notch open. */
:is(#page-container, .b360-overlay-panel) .search-field .mdc-notched-outline--notched .mdc-notched-outline__notch {
  border-top-style: solid !important;
  border-top-width: 1px !important;
}

:is(#page-container, .b360-overlay-panel) .search-field .mdc-text-field--focused .mdc-notched-outline--notched .mdc-notched-outline__notch {
  border-top-width: 2px !important;
}

:is(#page-container, .b360-overlay-panel) .field-msg--error {
  display: block;
  font-size: 12px;
  line-height: 14px;
  margin-top: 4px;
}

/* Promoted from Applications: these are B360 design-system controls, not MFE rules. */
:is(#page-container, .b360-overlay-panel) .standard-fill.mat-mdc-form-field {
    --mat-form-field-container-height: 40px;
    --mat-form-field-container-vertical-padding: 6px;
    --mat-form-field-container-text-size: 14px;
    --mat-form-field-filled-label-text-size: 12px;
    --mat-form-field-outlined-label-text-size: 12px;
    --mat-select-trigger-text-size: 14px;
    --b360-standard-fill-content-offset: -12px;
    --mdc-filled-text-field-input-text-padding-top: 0px;
    --mdc-filled-text-field-input-text-padding-bottom: 0px;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-text-field-wrapper.mdc-text-field {
    height: 40px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    padding-left: 16px;
    padding-right: 16px;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-form-field-flex {
    height: 100% !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-form-field-subscript-wrapper {
    display: none !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-form-field-infix {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    padding-left: 7px !important;
}

/* Neutralize the legacy B360 outline-label rules and match Credit360 fills. */
:is(#page-container, .b360-overlay-panel) .standard-fill .mdc-floating-label {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px !important;
    font-weight: 400;
    margin-left: -12px !important;
    overflow: visible !important;
    padding: 0;
    text-transform: none;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mdc-floating-label--float-above {
    top: 22px !important;
    font-size: 15px !important;
    max-width: 200% !important;
    overflow: visible !important;
    text-overflow: clip !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill.mat-mdc-form-field.mat-focused .mdc-floating-label {
    color: #003366 !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-form-field-input-control {
    line-height: normal !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mat-mdc-input-element::placeholder {
    font-size: 14px !important;
}

/*
 * Standard B360 text inputs.
 *
 * Older MFEs still render text inputs with Material's outlined DOM. Present
 * those fields with the same filled treatment used by Credit360 without
 * requiring every MFE and modal to carry a local styling class. Compact
 * search fields and the input-backed auto-completer keep their specialized
 * layouts.
 */
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) {
  --mat-form-field-container-height: 40px;
  --mat-form-field-container-vertical-padding: 6px;
  --mat-form-field-container-text-size: 14px;
  --mat-form-field-filled-label-text-size: 12px;
  --mat-form-field-outlined-label-text-size: 12px;
  --b360-standard-input-content-offset: -12px;
  font-size: 14px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mat-mdc-text-field-wrapper.mdc-text-field {
  background-color: rgb(245, 245, 245) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 4px !important;
  height: 40px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mat-mdc-form-field-flex {
  height: 100% !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mat-mdc-form-field-infix {
  min-height: 40px !important;
  padding: 18px 0 0 7px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mat-mdc-input-element {
  margin-left: var(--b360-standard-input-content-offset, -12px) !important;
}

/* Remove the outlined frame while retaining its label container. */
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) :is(
  .mdc-notched-outline__leading,
  .mdc-notched-outline__notch,
  .mdc-notched-outline__trailing
) {
  border-color: transparent !important;
  border-width: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mdc-notched-outline__notch {
  overflow: visible;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mdc-floating-label {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px !important;
  font-weight: 400;
  /* The outline label already begins after Material's 12px leading segment.
   * A filled-field negative offset places its first characters beneath that
   * segment, so converted outline inputs must keep the native label origin. */
  margin-left: 0 !important;
  overflow: visible !important;
  padding: 0;
  text-transform: none;
}

/* Outlined and filled fields use different native label transforms. Normalize
 * the legacy outline label to Credit360's in-field floating position. */
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mdc-floating-label--float-above {
  font-size: 15px !important;
  max-width: 200% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  top: 22px !important;
  transform: translateY(-106%) scale(0.75) !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field):not(.mat-form-field-invalid).mat-focused .mdc-floating-label {
  color: #003366 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field).mat-focused .mat-mdc-text-field-wrapper.mdc-text-field {
  border-bottom-color: #005cbb;
  border-bottom-width: 2px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field).mat-form-field-invalid .mat-mdc-text-field-wrapper.mdc-text-field {
  border-bottom-color: #ba2525;
  border-bottom-width: 2px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field).mat-form-field-disabled .mat-mdc-text-field-wrapper.mdc-text-field {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline:not(.compact-field) .mat-mdc-input-element::placeholder {
  font-size: 14px !important;
}

/* Revert dropdown filled background to neutral default shade */
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-text-field-wrapper.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: rgb(245, 245, 245) !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) .mdc-floating-label,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) .mat-mdc-select-value-text,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) .mat-mdc-select-placeholder {
  color: #003366 !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) .mat-mdc-select-arrow,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) .mat-mdc-select-arrow svg {
  color: #003366 !important;
  fill: #003366 !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-floating-label,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mat-mdc-select-value-text,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mat-mdc-select-placeholder,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mat-mdc-select-arrow,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider.mat-mdc-form-field:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mat-mdc-select-arrow svg {
  color: rgba(0, 0, 0, 0.38) !important;
  fill: rgba(0, 0, 0, 0.38) !important;
}

/* Match Credit360's complete enabled-dropdown hover treatment sitewide. */
:is(#page-container, .b360-overlay-panel) :is(
  .b360-dropdown-with-divider,
  .b360-platform-dropdown,
  .mat-mdc-form-field-type-mat-select
).mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled)
  .mat-mdc-text-field-wrapper:not(.mdc-text-field--disabled) {
  background-color: #d6dbdf !important;
}

:is(#page-container, .b360-overlay-panel) :is(
  .b360-dropdown-with-divider,
  .b360-platform-dropdown,
  .mat-mdc-form-field-type-mat-select
).mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) :is(
  .mdc-floating-label,
  .mat-mdc-select-value-text,
  .mat-mdc-select-placeholder,
  .mat-mdc-select-arrow,
  .b360-dropdown-caret-wrapper,
  .b360-dropdown-caret-icon
) {
  color: #003366 !important;
}

:is(#page-container, .b360-overlay-panel) :is(
  .b360-dropdown-with-divider,
  .b360-platform-dropdown,
  .mat-mdc-form-field-type-mat-select
).mat-mdc-form-field:hover:not(.mat-mdc-form-field-disabled) .mat-mdc-select-arrow svg {
  fill: #003366 !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill .mdc-line-ripple::after {
  border-bottom-color: #005cbb !important;
}



:is(#page-container, .b360-overlay-panel) .b360-small-font.mat-mdc-form-field .mat-mdc-select-value-text,
:is(#page-container, .b360-overlay-panel) .b360-small-font.mat-mdc-form-field .mdc-floating-label {
  font-size: 13px !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative;
  height: 24px;
  width: 28px;
  min-width: 28px;
  padding-left: 0;
  flex-shrink: 0;
  margin-left: 0;
  transform: translate(0, -8px) !important;
}

/* Align regular mat-select caret lane to the same right edge behavior as searchable dropdown. */
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-trigger {
  padding-right: 0 !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-form-field-icon-suffix {
  padding-right: 0 !important;
  margin-right: 0 !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-trigger .mat-mdc-select-arrow-wrapper {
  margin-left: auto !important;
  margin-right: -2px !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow svg {
width: 20px !important;
height: 20px !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow {
margin: 0 !important;
  border: 0 !important;
  margin-left: 10px !important;
}

/* Ensure regular b360-drop-down caret lane matches searchable dropdown spacing. */
:is(#page-container, .b360-overlay-panel) b360-drop-down .b360-dropdown-with-divider .mat-mdc-form-field-infix {
  padding-right: 0 !important;
}


:is(#page-container, .b360-overlay-panel) b360-drop-down .b360-dropdown-with-divider .mat-mdc-select-arrow-wrapper {
  width: 24px !important;
  min-width: 24px !important;
  margin-right: -8px !important;
}


:is(#page-container, .b360-overlay-panel) b360-drop-down .b360-dropdown-with-divider .mat-mdc-select-arrow {
  margin-left: 8px !important;
}


:is(#page-container, .b360-overlay-panel) b360-drop-down .b360-dropdown-with-divider .mat-mdc-select-value {
  margin-left: var(--b360-standard-fill-content-offset, -12px) !important;
}


:is(#page-container, .b360-overlay-panel) .standard-fill:not(.b360-dropdown-with-divider) .mat-mdc-input-element {
  margin-left: var(--b360-standard-fill-content-offset, -12px) !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow-wrapper::before {
  content: '';
  width: 1.5px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.12);
  border-right: 2px solid #dddddd;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-value {
  width: calc(100% - var(--b360-standard-fill-content-offset, -12px) - 0px) !important;
  max-width: calc(100% - var(--b360-standard-fill-content-offset, -12px) - 0px) !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-value-text,
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-min-line {
  display: block !important;
  width: 100% !important;
  max-width: calc(100% - var(--b360-standard-fill-content-offset, -12px) - 6px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* hide the default Material select arrow */
:is(#page-container, .b360-overlay-panel) .b360-dropdown-with-divider .mat-mdc-select-arrow-wrapper {
  display: none !important;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-caret-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 28px;
  min-width: 28px;
  height: 24px;
  position: relative;
  pointer-events: none;
  color: inherit;
}


:is(#page-container, .b360-overlay-panel) .b360-dropdown-caret-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}

/*--------- auto completer ---------------------*/
:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-form-field {
  --mat-form-field-container-height: 40px;
    --mat-form-field-container-vertical-padding: 6px;
  --mdc-filled-text-field-container-height: 40px;
    --mdc-filled-text-field-input-text-padding-top: 6px;
    --mdc-filled-text-field-input-text-padding-bottom: 6px;
    --mdc-filled-text-field-container-vertical-padding: 6px;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-text-field-wrapper.mdc-text-field {
  height: 40px !important;
  padding-top: 0 !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-form-field-flex {
  height: 100% !important;
    align-items: stretch !important;
  cursor: pointer !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-form-field-icon-suffix {
  padding: 0 !important;
    align-items: center !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .b360-dropdown-no-placeholder .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .b360-dropdown-no-placeholder .mdc-text-field--filled .mat-mdc-form-field-input-control {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


:is(#page-container, .b360-overlay-panel) b360-auto-completer .mat-mdc-form-field:not(.b360-dropdown-no-placeholder) .mat-mdc-form-field-infix {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    min-height: 40px !important;
}


:is(#page-container, .b360-overlay-panel) .sidebar-collapse b360-auto-completer .mat-mdc-form-field .mat-mdc-form-field-infix {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: auto !important;
}


/* One B360 dropdown treatment for platform fields, shared mat-select controls,
 * and navigation controls rendered in B360-owned overlay panes. */
:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) {
  --mat-form-field-container-height: 40px;
  --mat-form-field-container-vertical-padding: 6px;
  --mat-form-field-container-text-size: 14px;
  --mat-form-field-filled-label-text-size: 12px;
  --mat-form-field-outlined-label-text-size: 12px;
  --mat-select-trigger-text-size: 14px;
  --b360-standard-fill-content-offset: -12px;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) .mat-mdc-text-field-wrapper.mdc-text-field {
  background-color: rgb(245, 245, 245) !important;
  border-radius: 4px !important;
  box-sizing: border-box;
  height: 40px !important;
  padding-left: 16px !important;
  padding-right: 8px !important;
}

/* Outline-based legacy selects do not render a line ripple after conversion to
 * the B360 filled treatment. Real filled fields keep their native single line. */
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill) .mat-mdc-text-field-wrapper.mdc-text-field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill) .mdc-notched-outline {
  display: none;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) .mat-mdc-form-field-flex {
  height: 100% !important;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) .mat-mdc-form-field-infix {
  min-height: 40px !important;
  padding: 18px 0 0 7px !important;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) .mdc-floating-label {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px !important;
  font-weight: 400;
  margin-left: -12px !important;
  overflow: visible !important;
  padding: 0;
  text-transform: none;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)) .mdc-floating-label--float-above {
  font-size: 15px !important;
  max-width: 200% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  top: 22px !important;
}

:is(#page-container, .b360-overlay-panel) :is(.b360-platform-dropdown, .mat-mdc-form-field-type-mat-select:not(.standard-fill)).mat-focused .mdc-floating-label {
  color: #003366 !important;
}

:is(#page-container, .b360-overlay-panel) .b360-platform-dropdown .mat-mdc-input-element {
  margin-left: var(--b360-standard-fill-content-offset, -12px) !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill) .mat-mdc-select-value {
  margin-left: var(--b360-standard-fill-content-offset, -12px) !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill) .mat-mdc-select-trigger {
  padding-right: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill, .b360-dropdown-with-divider) .mat-mdc-select-arrow-wrapper {
  align-items: center !important;
  display: inline-flex !important;
  flex-shrink: 0;
  height: 24px;
  justify-content: flex-start !important;
  margin-left: auto !important;
  min-width: 28px;
  position: relative;
  transform: translateY(-8px);
  width: 28px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill, .b360-dropdown-with-divider) .mat-mdc-select-arrow-wrapper::before {
  background-color: #ddd;
  content: "";
  height: 24px;
  left: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill, .b360-dropdown-with-divider) .mat-mdc-select-arrow {
  color: #141414 !important;
  height: 20px !important;
  margin-left: 7px !important;
  width: 20px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select:not(.standard-fill, .b360-dropdown-with-divider) .mat-mdc-select-arrow svg {
  height: 20px !important;
  width: 20px !important;
}

/* Labels for selects that mirror the compact floating-label text inputs. */
:is(#page-container, .b360-overlay-panel) .b360-labeled-select .mat-mdc-form-field-infix {
  min-height: 40px !important;
  padding: 18px 0 0 7px !important;
}

:is(#page-container, .b360-overlay-panel) .b360-labeled-select {
  position: relative;
}

:is(#page-container, .b360-overlay-panel) .b360-labeled-select::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-select-label) "*";
  font-size: 12px;
  font-weight: 400;
  left: 16px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  top: 5px;
  z-index: 1;
}

:is(#page-container, .b360-overlay-panel) .b360-labeled-select :is(.mat-mdc-select-value-text, .mat-mdc-select-min-line) {
  font-size: 14px !important;
  line-height: 20px !important;
}

/* Disabled selects retain their neutral disabled appearance, including while hovered. */
:is(#page-container, .b360-overlay-panel) .b360-labeled-select:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled {
  background-color: rgb(245, 245, 245) !important;
}

:is(#page-container, .b360-overlay-panel) .b360-labeled-select:hover .mat-mdc-text-field-wrapper.mdc-text-field--disabled :is(
  .mat-mdc-select-value-text,
  .mat-mdc-select-arrow,
  .mat-mdc-select-arrow svg
) {
  color: rgba(0, 0, 0, 0.38) !important;
  fill: rgba(0, 0, 0, 0.38) !important;
}

:is(#page-container, .b360-overlay-panel) .b360-labeled-select.mat-mdc-form-field-disabled::before {
  color: rgba(0, 0, 0, 0.38) !important;
}

:is(#page-container, .b360-overlay-panel) .b360-platform-dropdown .mat-mdc-form-field-icon-suffix {
  margin: 0 !important;
  padding: 0 !important;
}

:is(#page-container, .b360-overlay-panel) .b360-platform-dropdown .b360-dropdown-caret-icon {
  fill: currentColor;
  transform-origin: center;
  transition: transform 120ms ease-in-out;
}

:is(#page-container, .b360-overlay-panel) .b360-platform-dropdown .b360-dropdown-caret-icon--open {
  transform: rotate(180deg);
}

:is(#page-container, .b360-overlay-panel) .b360-dropdown-caret-divider {
  background-color: #ddd;
  height: 24px;
  left: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
}

/* Label-free dropdowns are the final state override for the shared dropdown
 * treatment: center both the value and caret in the 40px control. */
:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder .mat-mdc-form-field-infix {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px 0 8px 7px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder .mat-mdc-select {
  display: block !important;
  height: 24px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder .mat-mdc-select-trigger {
  align-items: center !important;
  height: 24px !important;
  min-height: 24px !important;
  transform: none !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder :is(.mat-mdc-select-value-text, .mat-mdc-select-min-line) {
  line-height: 24px !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder .mdc-floating-label {
  display: none !important;
}

:is(#page-container, .b360-overlay-panel) .mat-mdc-form-field-type-mat-select.b360-dropdown-no-placeholder :is(.mat-mdc-select-arrow-wrapper, .b360-dropdown-caret-wrapper) {
  align-self: center !important;
  transform: none !important;
}

/*
 * Safety net for raw Material selects that do not render a floating label.
 * Component markup should use b360-dropdown-no-placeholder explicitly, but
 * these selectors prevent the generic 18px labelled-field padding from
 * silently pushing an unlabelled value to the bottom of the control.
 */
#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-form-field-infix,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-form-field-infix {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px 0 8px 7px !important;
}

#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select {
  display: block !important;
  height: 24px !important;
}

#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-trigger,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-trigger {
  align-items: center !important;
  height: 24px !important;
  min-height: 24px !important;
  transform: none !important;
}

#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-value-text,
#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-min-line,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-value-text,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-min-line {
  line-height: 24px !important;
}

#page-container .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-arrow-wrapper,
.b360-overlay-panel .mat-mdc-form-field-type-mat-select:not(.standard-fill):not(:has(.mdc-floating-label)) .mat-mdc-select-arrow-wrapper {
  align-self: center !important;
  transform: none !important;
}

/*
 * Grid/card overflow actions.
 *
 * Match Credit360's Material icon-button geometry and keep the state layer
 * transparent until the button itself is hovered or focused.
 */
button.btn-menu {
  align-items: center !important;
  appearance: none;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #003366 !important;
  cursor: pointer;
  display: inline-flex !important;
  flex: 0 0 48px;
  height: 48px !important;
  justify-content: center !important;
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
  vertical-align: middle;
  width: 48px !important;
}

button.btn-menu:hover,
button.btn-menu:focus-visible,
button.btn-menu[aria-expanded="true"] {
  background-color: #d9e6f2 !important;
  color: #003366 !important;
}

button.btn-menu:active {
  background-color: #bfd3e6 !important;
  color: #003366 !important;
}

button.btn-menu:focus-visible {
  outline: 2px solid #2d7ece !important;
  outline-offset: 2px;
}

button.btn-menu i.fa-ellipsis-vertical,
button.btn-menu i.fas.fa-ellipsis-vertical,
button.btn-menu i.fa-solid.fa-ellipsis-vertical {
  color: currentColor !important;
  font-size: 20px !important;
  line-height: 1 !important;
  pointer-events: none;
}

/*
 * Credit360 modal template.
 *
 * Material dialogs render in the document overlay rather than under the MFE
 * root, so the B360 panel ownership class is the single sitewide boundary for
 * dialog chrome, content rhythm, and actions.
 */
.b360-overlay-panel .mat-mdc-dialog-surface {
  background: #fff !important;
  border-radius: 4px !important;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
    0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
}

.b360-overlay-panel .application-dialog-header {
  align-items: center !important;
  background-color: #003366 !important;
  border: 0 !important;
  border-radius: 4px 4px 0 0 !important;
  color: #fff !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 57px;
  padding: 16px 24px !important;
}

.b360-overlay-panel .application-dialog-header > [mat-dialog-title],
.b360-overlay-panel .mat-mdc-dialog-surface > [mat-dialog-title] {
  background-color: #003366 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Material inserts a tall invisible inline spacer before dialog titles. It is
 * useful for Material's stock title layout, but shifts the title baseline in
 * B360's explicit Credit360-style header.
 */
.b360-overlay-panel .mat-mdc-dialog-title::before,
.b360-overlay-panel .mdc-dialog__title::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* Credit360's standard modal header has no competing top-right close icon. */
.b360-overlay-panel .application-dialog-header > .btn-close {
  display: none !important;
}

.b360-overlay-panel .mat-mdc-dialog-surface > [mat-dialog-title] {
  border-radius: 4px 4px 0 0 !important;
  flex: 0 0 auto !important;
  min-height: 57px;
  padding: 16px 24px !important;
}

.b360-overlay-panel .mat-mdc-dialog-container .mat-mdc-dialog-content {
  color: rgba(0, 0, 0, 0.87) !important;
  flex: 1 1 auto !important;
  font-size: 14px !important;
  margin: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

/* Match the 20px vertical field rhythm used by Credit360 modal forms. */
.b360-overlay-panel .mat-mdc-dialog-content form > .mat-mdc-form-field {
  display: block;
  margin-bottom: 20px !important;
}

.b360-overlay-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions {
  align-items: center !important;
  background: #f5f7fa !important;
  border-radius: 0 0 4px 4px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
  column-gap: 10px !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  min-height: 64px !important;
  padding: 8px 16px 16px !important;
}

.b360-overlay-panel .mat-mdc-dialog-actions > .spacer {
  display: none !important;
}

/* Primary actions precede the secondary Cancel action, as in Credit360. */
.b360-overlay-panel .mat-mdc-dialog-actions > .mat-mdc-unelevated-button {
  order: 1;
}

.b360-overlay-panel .mat-mdc-dialog-actions > .btn-underline,
.b360-overlay-panel .mat-mdc-dialog-actions > .mat-mdc-outlined-button,
.b360-overlay-panel .mat-mdc-dialog-actions > .mat-mdc-button:not(.mat-mdc-unelevated-button) {
  order: 2;
}

/* Warning confirmation dialogs use the same structure as standard modals,
 * with a red header and destructive primary action. */
.b360-overlay-panel.confirmation-dialog-panel {
  --b360-warning-color: #c51e2e;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-header {
  align-items: center;
  background-color: var(--b360-warning-color) !important;
  border-radius: 4px 4px 0 0;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  min-height: 57px;
  padding: 16px 24px;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-header [mat-dialog-title] {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-content {
  padding: 20px !important;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-actions {
  min-height: 64px !important;
  padding: 8px 16px 16px !important;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-actions > .mat-mdc-unelevated-button {
  background-color: var(--b360-warning-color) !important;
  border: 1px solid var(--b360-warning-color) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  min-width: 64px;
  order: 1 !important;
  padding: 0 16px !important;
  text-transform: none !important;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-actions > .mat-mdc-unelevated-button:hover:not(:disabled) {
  background-color: #a81726 !important;
  border-color: #a81726 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24) !important;
}

.b360-overlay-panel.confirmation-dialog-panel .confirmation-dialog-actions > .btn-underline {
  order: 2 !important;
}

/* Convert legacy Cancel hyperlinks/text buttons into Credit360 secondaries. */
.b360-overlay-panel .mat-mdc-dialog-actions .btn-underline,
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-outlined-button,
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-button:not(.mat-mdc-unelevated-button) {
  background-color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  color: #003366 !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  min-width: 64px;
  padding: 0 16px !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.b360-overlay-panel .mat-mdc-dialog-actions .btn-underline .mdc-button__label,
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-outlined-button .mdc-button__label,
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-button:not(.mat-mdc-unelevated-button) .mdc-button__label {
  font: inherit !important;
  letter-spacing: normal !important;
}

.b360-overlay-panel .mat-mdc-dialog-actions .btn-underline:hover:not(:disabled),
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-outlined-button:hover:not(:disabled),
.b360-overlay-panel .mat-mdc-dialog-actions .mat-mdc-button:not(.mat-mdc-unelevated-button):hover:not(:disabled) {
  background-color: #f5f5f5 !important;
  color: #003366 !important;
}

/* Audit dialogs keep their stacked paginator/action layout. */
.b360-overlay-panel .audit-dialog-header {
  align-items: flex-start;
}

.b360-overlay-panel .audit-dialog-header [mat-dialog-title] {
  min-width: 0;
}

.b360-overlay-panel .audit-dialog-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #003366;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 300;
  height: 36px;
  justify-content: center;
  line-height: 1;
  margin: 0 0 0 16px;
  padding: 0;
  width: 36px;
}

.b360-overlay-panel .audit-dialog-close:hover,
.b360-overlay-panel .audit-dialog-close:focus-visible {
  background-color: #f5f5f5;
  border-radius: 4px;
}

.b360-overlay-panel .audit-filter-row {
  margin-top: 4px;
}

.b360-overlay-panel .mat-mdc-dialog-actions.actions-column {
  align-items: flex-end !important;
  flex-direction: column !important;
  row-gap: 12px !important;
}

/*
 * Credit360 datepicker template.
 *
 * Datepicker popups render in the CDK overlay, so these component-specific
 * selectors intentionally live beside the shared dialog overlay theme.
 */
.mat-datepicker-content {
  --mat-datepicker-calendar-date-selected-state-background-color: #15457d;
  --mat-datepicker-calendar-date-hover-state-background-color: #b3c2d1;
  --mat-datepicker-calendar-date-focus-state-background-color: #b3c2d1;
  --mat-datepicker-toggle-active-state-icon-color: #b3c2d1;
  background-color: #fff !important;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px rgba(0, 0, 0, 0.14),
    0 1px 10px rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

.mat-datepicker-content .mat-calendar {
  font-family: Roboto, Arial, sans-serif !important;
  height: 100% !important;
}

.mat-datepicker-content .mat-calendar-header {
  background-color: #15457d !important;
  border-radius: 4px 4px 0 0 !important;
  font-size: 14px !important;
  padding: 3px 8px 5px !important;
}

.mat-datepicker-content .mat-calendar-controls {
  margin: 3px 0 !important;
}

.mat-datepicker-content .mat-calendar-period-button {
  background-color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.mat-datepicker-content .mat-calendar-arrow {
  fill: rgba(0, 0, 0, 0.54) !important;
}

.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button {
  color: #fff !important;
}

.mat-datepicker-content .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  height: var(--mdc-icon-button-state-layer-size) !important;
  padding: 8px !important;
  width: var(--mdc-icon-button-state-layer-size) !important;
}

.mat-datepicker-content .mat-calendar-controls .mat-mdc-button-touch-target {
  display: none !important;
}

.mat-datepicker-content .mat-calendar-content {
  padding: 0 !important;
}

.mat-datepicker-content .mat-calendar-table {
  margin-top: 8px !important;
}

.mat-datepicker-content .mat-calendar-table-header,
.mat-datepicker-content .mat-calendar-body-label {
  color: rgba(0, 0, 0, 0.54) !important;
}

.mat-datepicker-content .mat-calendar-table-header th {
  font-size: 11px !important;
  font-weight: 400 !important;
}

.mat-datepicker-content .mat-calendar-table-header-divider::after {
  background: rgba(0, 0, 0, 0.12) !important;
}

.mat-datepicker-content .mat-calendar-body {
  font-size: 12px !important;
}

.mat-datepicker-content .mat-calendar-body-label {
  background-color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-bottom: 6% !important;
  padding-top: 6% !important;
}

.mat-datepicker-content .mat-calendar-body-cell-container {
  padding-bottom: 6.25% !important;
  padding-top: 6.25% !important;
  width: 13% !important;
}

.mat-datepicker-content .mat-calendar-body-cell-content {
  border-color: transparent;
  color: rgba(0, 0, 0, 0.87);
  height: 85% !important;
  width: 75% !important;
}

.mat-datepicker-content .mat-calendar-body-selected {
  background-color: #456595 !important;
  color: #fff !important;
  font-weight: 400 !important;
  outline-color: transparent !important;
}

.mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: rgba(0, 0, 0, 0.38) !important;
}

.mat-datepicker-content .mat-calendar-body-today.mat-calendar-body-selected {
  box-shadow: inset 0 0 0 1px #fff !important;
}

.mat-datepicker-content .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  color: rgba(0, 0, 0, 0.38) !important;
}

.mat-datepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-datepicker-content .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-datepicker-content .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background-color: #bcc7d9 !important;
}

.mat-datepicker-toggle-active {
  color: #003366 !important;
}

svg.mat-datepicker-toggle-default-icon {
  height: 18px !important;
}

/*
 * Shell between-app loading overlay.
 * Shared by every shell (banking360-container-web, banking360-dev-runner-web)
 * so the markup/behavior in shell-bootstrap.js has one styling source.
 */

#main-content,
#content-container {
  position: relative;
}

#mfe-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(rgba(35, 23, 29, 0.2), rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

#mfe-loading[hidden] {
  display: none;
}

.mfe-loading-spinner {
  position: relative;
  width: 150px;
  height: 150px;
  border: 4px solid transparent;
  border-top-color: #ff5151;
  border-radius: 60%;
  animation: mfe-loading-spin 2s linear infinite;
}

.mfe-loading-spinner::before,
.mfe-loading-spinner::after {
  content: '';
  position: absolute;
  border: 4px solid transparent;
  border-radius: 60%;
}

.mfe-loading-spinner::before {
  inset: 5px;
  border-top-color: #0d47a1;
  animation: mfe-loading-spin 3s linear infinite;
}

.mfe-loading-spinner::after {
  inset: 15px;
  border-top-color: #ffcf70;
  animation: mfe-loading-spin 1.5s linear infinite;
}

.mfe-loading-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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