/* source-sans-pro-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
/* source-sans-pro-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'),
    /* Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.svg#SourceSansPro') format('svg');
  /* Legacy iOS */
}

/* source-sans-pro-italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff') format('woff'),
    /* Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.svg#SourceSansPro') format('svg');
  /* Legacy iOS */
}

/* source-sans-pro-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),
    /* Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#SourceSansPro') format('svg');
  /* Legacy iOS */
}

/* source-sans-pro-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),
    /* Modern Browsers */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('/fonts/source-sans-pro-v14-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#SourceSansPro') format('svg');
  /* Legacy iOS */
}

@font-face {
  font-family: 'RiskflagFont';
  src: url('/fonts/riskflag-Regular.woff2') format('woff2');
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('/fonts/FontAwesome5FreeSolid-Solid.woff2') format('woff2');
}

/* Menu Fonts */
@font-face {
  font-family: 'menu_icons';
  src: url('/fonts/menu_icons.eot?mc1');
  src: url('/fonts/menu_icons.eot?mc1#iefix') format('embedded-opentype'),
    url('/fonts/menu_icons.ttf?mc1') format('truetype'),
    url('/fonts/menu_icons.woff?mc1') format('woff'),
    url('/fonts/menu_icons.svg?mc1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="custom-icon-"],
[class*="custom-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'menu_icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* line-height: 1; */
  vertical-align: bottom;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.custom-icon-matrix:before {
  content: "\10fdf1";
}

.custom-icon-wheel:before {
  content: "\10fdf2";
}

.custom-icon-bowtie:before {
  content: "\10fdf3";
}

/* Hard-hat (contractor organisations).
   SVG data URI keeps us CSP-compliant — no inline styles, no external
   network fetch, no font file required. The icon is rendered as a
   pseudo-element background so it lines up with the existing AdminLte
   nav-icon slot. */
.custom-icon-hardhat {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1c40f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a7 7 0 0 0-7-7H9a7 7 0 0 0-7 7v2Z'/><path d='M10 9V5h4v4'/><path d='M4 15h16'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.custom-icon-hardhat:before {
  content: "";
}

/* Documents / report components — two smaller report pages, offset. The tile it
   marks opens the written components a report is BUILT from, not a report, so it
   is deliberately the Reports page icon rendered small and doubled.

   Drawn as a MASK rather than a background-image: the mask takes its shape from
   the SVG's alpha and the colour from `currentColor`, so the glyph sits in the
   same colour as the Font Awesome icons beside it. The two icons above use
   background-image with the stroke colour baked into the data URI and therefore
   cannot inherit — do not copy that pattern for anything that sits in a run of
   FA icons. Still CSP-clean: no inline style, no network fetch, no font file. */
.custom-icon-documents {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1.6 1.6 20.8 20.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2.5' width='14' height='10' rx='1'/><path d='M9.5 6h9M9.5 9h6'/><rect x='3' y='11.5' width='14' height='10' rx='1'/><path d='M5.5 15h9M5.5 18h6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1.6 1.6 20.8 20.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2.5' width='14' height='10' rx='1'/><path d='M9.5 6h9M9.5 9h6'/><rect x='3' y='11.5' width='14' height='10' rx='1'/><path d='M5.5 15h9M5.5 18h6'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.custom-icon-documents:before {
  content: "";
}

/* Layout-template (template organisations). */
.custom-icon-layout-template {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='7' x='3' y='3' rx='1'/><rect width='9' height='7' x='3' y='14' rx='1'/><rect width='5' height='7' x='16' y='14' rx='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.custom-icon-layout-template:before {
  content: "";
}

/* Quadcopter (SORA module) — glyph added via fontTools, see SORA branch.
   NB: only the .ttf and .woff carry this glyph; the legacy .eot/.svg files
   (IE / pre-iOS5 Safari only) were not regenerated. */
.custom-icon-drone:before {
  content: "\10fdf4";
}

/* Roulette wheel (Monte Carlo module) — glyph added via fontTools, same as the
   drone glyph above. Only the .ttf and .woff carry this glyph; the legacy
   .eot/.svg files were not regenerated. Cache-buster bumped to ?mc1. */
.custom-icon-roulette:before {
  content: "\10fdf5";
}

.icon-matrix-new:before {}


.semi-bold {
  font-weight: 500;
}

.title-grey {
  color: var(--gray);
  font-weight: 700;
}

.title-brand {
  color: var(--rf-brand) !important;
  font-weight: 700;
  /* Pin the size so a page-title heading looks the same whatever its tag — these
     are being promoted to <h1> for the document outline (one h1 per page), and an
     unstyled h1 would jump larger. Matches .rf-page-header__title (1.75rem). */
  font-size: 1.75rem;
}

.alert {
  border-radius: 0.5rem !important;
}

/* Maintenance banner sits flush against the top of the viewport
   (fixed-top), so its top corners shouldn't be rounded — overrides the
   project-wide .alert rule above. Bottom corners keep the rounding. */
.alert.maintenance-banner {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.card {
  border-radius: 0.75rem !important;
}

.card-header {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.card-footer {
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}

.rowFlexLayout {
  border-radius: 0.75rem !important;
}

.card-brand:not(.card-outline)>.card-header {
  background-color: var(--rf-brand);
  color: var(--rf-on-brand);
}

.fa-bowtie:before {
  content: "\f1ca"
}

a.force-style {
  color: var(--rf-blue-500) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
}

/* Non-production environment indicator (#672 follow-up): an INSET bottom border on the top nav
   plus a coloured badge, so a dev/staging tab is instantly distinguishable from production and
   changes aren't made in the wrong place. box-shadow inset draws the line WITHOUT adding height.
   Hidden in production and while demoing orgs (environmentIndicator() returns null -> no class).
   Development = var(--rf-warning) (amber), Staging = #007d91 (teal). */
.main-header.env-indicator--development {
  box-shadow: inset 0 -3px 0 var(--rf-amber-500);
}
.main-header.env-indicator--staging {
  box-shadow: inset 0 -3px 0 #007d91;
}
.main-header.env-indicator--production {
  box-shadow: inset 0 -3px 0 var(--rf-danger);
}
/* The badge is a flush flex container: label + optional branch chip are edge-to-edge segments,
   each owning its padding, so the branch chip fills the badge's top/right/bottom with no base
   colour peeking around it. overflow:hidden clips the chip to the badge's rounded corners. */
.env-badge {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.env-badge-label {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.5em;
}
.env-badge--development {
  background-color: var(--rf-amber-500);
  color: var(--rf-on-warning);
}
.env-badge--production {
  background-color: var(--rf-danger);
  color: var(--rf-on-brand);
}
/* The git branch appended to the Development badge: a darker inset segment, flush to the badge. */
.env-badge-branch {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.5em;
  background-color: rgba(0, 0, 0, 0.2);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.env-badge--staging {
  background-color: #007d91;
  color: var(--rf-on-brand);
}

/* Hide navbar when body has hide-navbar class */
body.hide-navbar .main-header {
  display: none !important;
}

body.hide-navbar .content-wrapper,
body.hide-navbar .main-footer {
  margin-left: 0 !important;
}


.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
  background-color: var(--rf-brand);
  color: var(--rf-on-brand);
  border-bottom: 0;
}

.brand-link {
  font-size: 25px;
  font-family: 'RiskflagFont';
  font-stretch: condensed;
  font-weight: 200;
  display: block;
  color: rgb(255 255 255);
  padding: 0.55rem 0.5rem;

}

/* Un-float the sidebar brand icon. AdminLTE sets `.brand-link .brand-image{float:left}`,
   which drops the icon out of the line box and lets the wordmark ride high. The top-nav
   brand (`.navbar-brand`) is NOT floated — its inline icon + vertical-align:middle wordmark
   sit optically centred (the wordmark box a few px below the icon centre, compensating for
   the SVG's `g` descender). Un-floating makes the sidebar match that approved layout. */
.brand-link .brand-image {
  margin-top: unset;
  vertical-align: middle;
  float: none;
}

/* With the icon un-floated the wordmark box-centres against it, but the SVG's `g`
   descender pads the box bottom, so a box-centred wordmark reads ~3px high. Nudge it
   down to optically centre the visible glyphs — this reproduces the top-nav brand's
   offset (measured ~4px). Scoped to `.brand-link`; the top-nav `.navbar-brand`
   wordmark gets the same offset from its own layout and must NOT be nudged again. */
.brand-link .brand-wordmark {
  position: relative;
  top: 4px;
}

.brand-text sup {
  font-size: 60%;
}

/* SVG wordmark in the brand-link slot (main skin): white artwork, sized to sit beside
   the 32px .brand-image mark on the navy (--rf-brand) sidebar. */
.brand-wordmark {
  height: 26px;
  width: auto;
  vertical-align: middle;
}

/* The artwork is white for the dark sidebar and the dark-mode top navbar. In LIGHT mode
   the top-nav navbar is white (navbar-white), so the white wordmark would vanish — invert
   it to dark there. Scoped to .main-header so the always-dark sidebar keeps the white
   wordmark in both light and dark mode. */
body:not(.dark-mode) .main-header .brand-wordmark,
.brand-wordmark--on-light {
  filter: invert(1);
}

#map {
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  position: unset;
}

.sc-map-table {
  height: 100vh;
  overflow: scroll;
}

/* Limit notifications dropdown content height to half screen */
#notifications .adminlte-dropdown-content,
#notifications #notificationsDropdownContent {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mark All Read button hover effect */
#markAllReadBtn {
  text-align: center;
}

#markAllReadBtn:hover {
  color: var(--rf-danger) !important;
  /* Red color on hover */
}

#compass {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-image: url('/compass.png');
  background-size: cover;
}

#osmmapcontainer {
  height: 60vh;
  max-height: 70vh;
  overflow: hidden;
}

#osmmap {
  height: 100%;
  width: 100%;
}

.geotag-search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Stack the geotag modal above an already-open modal (e.g. the register Add Item modal).
   The layout renders the pushed #GeoTagModal earlier in the DOM than page modals, so at
   Bootstrap's shared z-index (1050) it paints behind them. geoTag.js toggles these classes
   on the modal and its backdrop while another modal is open (CSP-safe, no inline styles). */
.modal.modal-stack-top {
  z-index: 1060;
}

.modal-backdrop.modal-stack-top {
  z-index: 1055;
}

/* Spinner inside the input */
.geotag-spinner {
  position: absolute;
  top: 30%;
  right: 10px;
  transform: translateY(-50%);
  display: none;
  /* initially hidden */
  pointer-events: none;
  color: var(--rf-ink-faint);
}


[class*=sidebar-dark] .brand-link {
  color: rgba(255, 255, 255);
}

#safetycase_map_table a.button {
  display: unset;
}

.nav.nav-pills.nav-sidebar.flex-column .nav-treeview {
  padding-left: 10px;
}

.nav-link i {
  padding-right: 0.3em;
}

.nav-sidebar .nav-link>.right,
.nav-sidebar .nav-link>p>.right {
  position: absolute;
  right: 0.6rem;
  top: 0.7rem;
}

.site-logo a {
  font-family: 'RiskflagFont';
  display: block;
  font-size: 60px;
  text-shadow: 0 1px 0 var(--rf-surface);
  background-size: 309px 42px;
  height: 42px;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

.brand-image {
  width: 32px;
  height: 32px;
}

.site-logo a:hover {
  text-decoration: none;
}

pre {
  white-space: pre-wrap !important;
  /* Since CSS 2.1 */
  white-space: -moz-pre-wrap !important;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap !important;
  /* Opera 4-6 */
  white-space: -o-pre-wrap !important;
  /* Opera 7 */
  word-wrap: break-word !important;
  /* Internet Explorer 5.5+ */
}

/* insets right pane */
.controlSidebarContainer {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  height: 100%;
  overflow: auto;
}

.sideBarEntity {
  padding-top: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.3em;
  overflow: hidden;
}

.containerFlex {
  margin-left: 10px;
  margin-right: 10px;
  /* padding-bottom: 10px; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-content: center
}

.rowFlexLayout {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 5px;
  width: 100%;
  -webkit-print-color-adjust: exact;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  height: auto;
  padding: 10px;
  text-align: center;
  justify-content: center;
  align-content: center;
}

.rowCatFlexLayout {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 5px;
  width: 100%;
  -webkit-print-color-adjust: exact;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  height: auto;
  text-align: center;
  justify-content: center;
  align-content: center;
  margin: 10px;
}


.containerFlexSCitem {
  margin-left: 10px;
  margin-right: 10px;
  /* padding-bottom: 10px; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-content: center
}

.containerFlexSC {
  margin-left: 10px;
  margin-right: 10px;
  /* padding-bottom: 10px; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center
}

.rowFlexLayoutSC {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 5px;
  width: 100%;
  -webkit-print-color-adjust: exact;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  height: auto;
  padding: 10px;
  text-align: center;
  justify-content: center;
  align-content: center;
}

/* Case grid: every tile in a row takes the height of the tallest one.
   The whole chain — item, its link, the tile — has to stretch, or a tile sizes
   to its own content (title length, tags, a picture, a score grid) and floats
   centred in the row. Scoped to .containerFlexSC because .VertAligner is shared
   with the sub-claim tiles on scShow/categoryShow/scl1Show. */
.containerFlexSC {
  align-items: stretch;
}

/* wrap + align-content:center sized the line to the link and centred it, which
   is what left the shorter tiles floating clear of the row. */
.containerFlexSC .containerFlexSCitem {
  align-content: stretch;
}

.containerFlexSC .containerFlexSCitem>a {
  display: flex;
  width: 100%;
}

.containerFlexSC .rowFlexLayoutSC {
  display: flex;
  flex-direction: column;
}

.containerFlexSC .VertAligner {
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

/* Only the title block takes up the slack. .VertAlignerIconsSC carries
   flex-grow:1 too, which would split it and leave the teal footer a different
   height on every tile. */
.containerFlexSC .VertAlignerIconsSC {
  flex-grow: 0;
}

.VertAlignerIconsSC {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  width: 300px;
  max-width: 300px;
  background: #3d91ab !important;
  -webkit-print-color-adjust: exact;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  height: auto;

  /* border-radius: 5px; */
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

.VertAlignerTitleSC {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 0px;
  width: 300px;
  font-size: 1.1em;
  max-width: 300px;
  text-align: center;
  background: var(--rf-brand) !important;
  -webkit-print-color-adjust: exact;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  padding-right: 10px;
  height: auto;
  position: relative;
  padding-left: 10px;
  min-height: 100px;
}

.DescriptionSC {
  font-size: 24px;
}

.small-box .icon {
  position: absolute;
  top: auto;
  top: 5px;
  right: 15px;
  z-index: 0;
  font-size: 50px;
  color: rgba(0, 0, 0, .15);
}

.clr-picker {
  /* Colority colour picker */
  z-index: 9999 !important;
}

.SC-colour {
  background: var(--rf-brand) !important;
  color: var(--rf-on-brand) !important;

}

.SCL1-colour {
  /* A3BAC3 */
  background: var(--rf-brand) !important;
  color: var(--rf-on-brand) !important;
}

.SCL1-colour-opacity {
  /* e1e8ec */
  background: #3d91ab !important;
  color: var(--rf-ink) !important;
}

.SCL2-colour {
  background: #EAEBED !important;
  color: var(--rf-ink) !important;
}

.SCL2-colour-opacity {
  background: #cfd1d7;
  color: var(--rf-ink) !important;
}

.SCL2Argument-colour {
  background: #b7d0e5 !important;
  color: var(--rf-ink) !important;
}

.RowL1 {
  border-radius: 5px;
  font-size: 2.4em;
  background: var(--rf-brand);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  margin: 10px;
  padding: 10px;
  color: #e8f6fa !important;
  line-height: 1em;
}

.RowL1Sm {
  font-size: .6em;
  line-height: 1em;
  padding-top: 1em;
  font-style: italic;
}

.RowL2 {
  border-radius: 5px;
  font-size: 1.2em;
  background: var(--rf-brand);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  margin: 10px;
  padding: 10px;
  color: #e8f6fa !important;
  line-height: 1em;
}

.RowL2.rowFlexLayout {
  font-style: italic;
}


.RowL3 {
  border-radius: 5px;
  font-size: 1.6em;
  background: var(--rf-brand);
  /* #  A3BAC3 */

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  margin: 10px;
  padding: 10px;
  color: var(--rf-on-brand) !important;
  line-height: 1em;
}

.RowL3 small {
  font-style: italic;
}

.RowL4 {
  border-radius: 5px;
  font-size: 1.2em;
  background: #EAEBED;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  padding: 10px;
  color: var(--rf-ink) !important;
  line-height: 1em;
}

.containerFlexTLC2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center
}

.itemIconPair {
  flex-basis: auto;
  border-radius: 5px;
  /* width:40px; */
  -webkit-print-color-adjust: exact;
  margin: 10px;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  min-height: 10px;
  height: auto;
  text-align: center;
}

.itemIconPairLinear {
  padding: 4px;
}

.LeftIconText {
  float: left;
  padding-right: 10px;
}


.SCTitle {
  text-align: center;
  font-size: 20px;
  padding: 10px;
  padding-top: 0px;
}

.iconDivEA {
  width: 20px;
  float: left;
  height: 20px;
  display: flex;
  justify-content: center;
  border-style: solid;
  margin: auto;
  flex-direction: column;
  align-content: center;
  border-width: 1px;
  border-color: var(--rf-brand);
  border-right-width: 0;
}

.iconDivAA {
  width: 20px;
  float: left;
  height: 20px;
  display: flex;
  justify-content: center;
  border-style: solid;
  margin: auto;
  flex-direction: column;
  align-content: center;
  border-width: 1px;
  border-color: var(--rf-brand);
  /* border-left-width: 0.5px; */
}

.iconDivEAVert {
  width: 20px;
  float: left;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--rf-brand);
}

.iconDivAAVert {
  width: 20px;
  float: left;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--rf-brand);
}

.Aligner {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
}

.vertAlignerIcons {
  /* background: #3d91ab; */
  color: var(--rf-ink) !important;
  padding: 0px;
  border-bottom-right-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  /* The assessment badge inside is inline-flex with vertical-align: middle, so it
     rode the line's baseline and sat noticeably nearer the band's bottom edge than
     its top. Centre it in a flex box instead. min-height keeps the band at the
     line-box height it used to take, so tile heights are unchanged and a sub-claim
     with no assessment (the component renders nothing at all) still shows the same
     strip rather than collapsing to zero. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5em;
}

/* ...and the badge's own wrapper, which the rule above only centres as a whole:
   the wrapper is a plain span, so the bar inside it still rode that span's text
   baseline and stayed low by the same couple of pixels. Making the wrapper a flex
   container removes the line box altogether, so the bar itself is the thing being
   centred. */
.vertAlignerIcons .assessmentBadges {
  display: flex;
  align-items: center;
  justify-content: center;
}

.VertAligner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  /* box-shadow: 5px 5px 5px 5px #888888; */
  -webkit-box-shadow: -3px 3px 15px 5px #ccccccbc;
  -moz-box-shadow: -3px 3px 15px 5px #ccccccbc;
  box-shadow: -3px 3px 15px 5px #ccccccbc;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

.VertAlignerShadowless {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.VertAlignerCode {
  -webkit-print-color-adjust: exact;
  margin-bottom: 0px;
  -webkit-print-color-adjust: exact;
  height: auto;
  border-radius: 5px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-top: 0px;
  background: #e3c9af !important;
  color: black !important;

}

.VertAlignerTitle {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 0px;
  width: 200px;
  /* font-size: 1.1em; */
  max-width: 200px;
  text-align: center;
  background: var(--rf-brand);
  -webkit-print-color-adjust: exact;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #e8f6fa;
  -webkit-print-color-adjust: exact;
  padding-right: 10px;
  padding-top: 2px;
  height: auto;
  position: relative;
  padding-left: 10px;
  min-height: 100px;


  display: flex;
  /*  justify-content: flex-end; */
  flex-direction: column;
}

.RespPersBox {
  /* position: absolute; */
  bottom: 0;
  font-size: .85em;
  margin: 0 auto;
  width: 100%;
  /* margin-left: -10px; */
  padding-left: 5px;
  padding-right: 5px;
}

.small-box>.small-box-footer {
  color: #1f2d3d;
}

.org-group-separator {
  border-top: 2px solid #888888;
}

.small-box>.small-box-footer {
  color: #1f2d3d;
}

.PDPRow {
  border-style: ridge;
}


.VertAlignerIcons {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  width: 200px;
  max-width: 200px;

  background: #3d91ab;
  -webkit-print-color-adjust: exact;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #e8f6fa !important;
  -webkit-print-color-adjust: exact;
  height: auto;
  /* border-radius: 5px; */
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;

}

.card {
  border-radius: 1rem;
}

.card-header-bold .card-header .card-title {
  font-weight: bold !important;
}

.card-header-bold .card-body {
  padding: 1rem;
}

.card-header.SafetyCaseDisplay {
  padding: 0;
}

/* SCL2Form */

.SCL2form.card {
  box-shadow: none;
}

.AccountablePerson {
  font-size: 15px;
}

.nopad {
  margin: 0px;
}


.alignRightNumber {
  text-align: right;
}

.SCL2form.row {
  /* padding: 10px;
  margin: 10px; */
}

.SCL2Section {
  /* box-shadow: 0px 0px 5px 0px #888888;
  border-radius: 1.1rem; */
  padding: 0.2rem;
}

.SCL2FormSectionHeader {
  font-size: 1.2em;
  /* padding-top: 10px; */
  /* padding-bottom: 10px; */
}


span.SCL2FormSectionHeaderTools {
  font-size: small;
}

.childSubClaimBox {
  padding: 0px;
  background: #95c4e8;
  font-size: 18px;
  border-style: solid;
  border-color: cornflowerblue;
}

.childSubClaimBox>.card-header {
  padding: 10px;
}

.OwnerLine {
  font-size: .8em;
  border-bottom: none;
  font-size: 15px
}

.SCL2ClaimText {
  font-size: 16px;
}

.select2Wide {
  width: 100%;
  max-width: 400px;
}

.select2rowHeight {
  height: calc(2.25rem + 2px);
}

.ContextAdd {
  border-radius: 0px !important;
}

.contextPair {
  border-style: solid;
  border-width: thin;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  background-color: aliceblue;
  border-color: #152be229;
}

.contextPairEcoEvidence {
  border-style: solid;
  border-width: thin;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  background-color: antiquewhite;
  border-color: #152be229;
}

.contextPairArg {
  border-style: solid;
  border-width: thin;
  padding: 10px;
  margin-top: 5px;
  background-color: ghostwhite;
  border-radius: 10px;
  border-color: #f39c12;
}

.contextPairArg.evidence-shared-unique,
.contextPair.evidence-shared-unique,
.popover.evidence-shared-unique {
  border-left-width: 5px;
  border-left-color: #bdbdbd;
}

.contextPairArg.evidence-shared-case,
.contextPair.evidence-shared-case,
.popover.evidence-shared-case {
  border-left-width: 5px;
  border-left-color: #90caf9;
}

.contextPairArg.evidence-shared-cross,
.contextPair.evidence-shared-cross,
.popover.evidence-shared-cross {
  border-left-width: 5px;
  border-left-color: #ffb74d;
}

.evidence-scope-swatch {
  display: inline-block;
  width: 6px;
  height: 1.1em;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.evidence-scope-swatch-unique { background-color: #bdbdbd; }
.evidence-scope-swatch-case { background-color: #90caf9; }
.evidence-scope-swatch-cross { background-color: #ffb74d; }

.opacityHidden {
  opacity: 0;
}

.opacityMedium {
  opacity: 0.65;
}

.opacityLow {
  opacity: 0.3;
}

.box.box-solid.SCL2form {
  padding: 10px;
  border-style: solid;
  border-width: thin;
  background-color: #E8F6FA;
}

.ContextEntry * a {
  color: blue !important;
}

.ContextEntry>.col-sm-12>p {
  margin-bottom: 0;
}

.ContextEntry * a:hover {
  color: blue !important;
  text-decoration: underline;
}

span.ContextTitle {
  font-size: 0.8em;
  background-color: var(--rf-surface);
  box-shadow: 0 0 2px 0px #888888;
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-left: -4px;
}

/* Counter arguments: an argument's card and chip in the counter-argument colour. */
.contextPair.contextPair--counter {
  background-color: var(--rf-counter-argument-surface);
  border-color: var(--rf-counter-argument-accent);
  border-left-width: 4px;
}

span.ContextTitle.ContextTitle--counter {
  background-color: var(--rf-counter-argument-chip);
}

span.EvidenceLinked {
  border-color: var(--rf-border);
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  border-style: solid;
  border-width: thin;
  margin-left: -4px;
  border-radius: 2.4px;
  background-color: #3680be;
  color: whitesmoke;

}

.linkedEvWarningContent {
  margin: 10px;
  background-color: aquamarine;
  padding: 5px;
  border-radius: 10px;
}

span.EvidenceValidity {
  border-color: var(--rf-border);
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  border-style: solid;
  border-width: thin;
  margin-left: -4px;
  border-radius: 2.4px;
}

span.OrgEvidenceValidity {
  border-color: var(--rf-border);
  padding-right: 0px;
  border-style: solid;
  border-width: thin;
  padding: 0 0.3rem 0 0.3rem;
}

span.EvidenceValidTo {
  background-color: #c9fdd5;
}

span.EvidenceAmber {
  background-color: #ffce3c;
  color: #5050bc;
}

span.EvidenceNotValid {
  background-color: #ff4e4e;
  color: whitesmoke;
}

span.EvidenceFromCaseSlot {
  background-color: #e2e8f0;
  color: #475569;
  font-style: italic;
}

.evidenceSearchResults {
  height: 15em;
  overflow: auto;
}

/* Navbar search results dropdown panel */
#searchResults {
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--rf-surface);
  border-bottom: 1px solid var(--rf-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: calc(100vh - 57px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#searchResults .search-results-header {
  padding: 12px 20px;
  background: var(--rf-surface-muted);
  border-bottom: 1px solid var(--rf-border);
  flex-shrink: 0;
}

#searchResults .search-results-body {
  padding: 0;
  overflow-y: auto;
  flex-grow: 1;
}

#searchResults .search-results-footer {
  padding: 10px 20px;
  background: var(--rf-surface-muted);
  border-top: 1px solid var(--rf-border);
  flex-shrink: 0;
}

#searchResults .search-result-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--rf-surface-sunken);
  display: block;
  color: var(--rf-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#searchResults .search-result-item:hover {
  background-color: #f0f7ff;
  text-decoration: none;
  color: var(--rf-ink);
}

#searchResults .search-result-item .result-type {
  font-size: 0.75rem;
  color: var(--rf-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

#searchResults .search-result-item .result-title {
  font-weight: 500;
  color: var(--rf-ink);
  margin-bottom: 4px;
}

#searchResults .search-result-item .result-breadcrumb {
  font-size: 0.8rem;
  color: var(--rf-ink-muted);
}

#searchResults .search-result-item .result-breadcrumb i {
  font-size: 0.65rem;
  margin: 0 4px;
}

/* Close button for search results */
#searchResults .search-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--rf-ink-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

#searchResults .search-close-btn:hover {
  color: var(--rf-ink);
}

/* Backdrop when search is open */
#searchResultsBackdrop {
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1049;
}

/* Facet counts (clickable filter badges) */
#searchResults .facet-counts {
  padding-top: 8px;
  border-top: 1px solid var(--rf-border);
  margin-top: 4px;
}

#searchResults .facet-badge {
  cursor: pointer;
  font-weight: normal;
  font-size: 0.8rem;
  padding: 4px 8px;
  transition: all 0.15s ease;
}

#searchResults .facet-badge:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

#searchResults .facet-badge.badge-primary {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
}

#searchResults .facet-badge.facet-clear {
  background-color: var(--rf-surface);
  color: var(--rf-ink-muted);
  border: 1px solid var(--rf-ink-muted);
}

#searchResults .facet-badge.facet-clear:hover {
  background-color: var(--rf-ink-muted);
  color: var(--rf-on-brand);
}

.searchResult {
  border-style: double;
  background: aliceblue;
  border-radius: 10px;
  margin: 1rem;
  padding: 1rem;
}

.editThing {
  position: relative;
  font-size: .85em;
  color: #7d7dbb !important;
  z-index: 1000;
  float: right;
}

.DPelsewhere {
  background-color: #f7fcfd;
}

.argumentScoreHandle {
  display: flex;
  font-size: 0.75em;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: chartreuse !important;
  height: unset !important;
}

.argumentScoreDisplay {

  background-color: chartreuse;
  padding: 3px;
  border-radius: 0.4em;
}

.evValidity {
  position: relative;
  font-size: .85em;
  color: #7d7dbb !important;
  z-index: 1000;
  float: right;
}

.modal-body [contenteditable=true] {
  border-style: inset;
  border-style: inset;
  min-height: 100px;
  border-radius: 0.4rem;
  border-radius: 0.4rem;
}

.commentNotificationTick {
  font-size: 12px;
}

.replyCount {
  font-weight: 400;
  color: #78838e;
}

.comment.wysiwyg>[contenteditable=true]:hover,
.comment.wysiwyg>[contenteditable=true]:focus {
  background-color: #fbfbfb;
}

.comment.wysiwyg>[contenteditable=true][data-placeholder]:empty {
  opacity: 0;
}

.comment.wysiwyg>[contenteditable=true][data-placeholder]:hover,
.comment.wysiwyg>[contenteditable=true][data-placeholder]:focus {
  opacity: 1;
}

.toolbar-top {
  background-color: #cccccc;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.uploadFileGrp {
  margin-bottom: 0.3rem;
  max-height: 2.5rem;
}

.imgPreview {
  max-height: 2.3rem;
}

.filePreview {
  font-size: 1.5em;
}

.fa-upload-progress {
  width: 100%;
  margin-bottom: 0.5rem;
}

.fa-upload-track {
  height: 6px;
  background: var(--rf-surface-sunken);
  border-radius: 3px;
  overflow: hidden;
}

.fa-upload-bar {
  height: 100%;
  width: 0%;
  background: var(--rf-success);
  transition: width 0.15s ease;
}

.fa-upload-bar.fa-upload-error {
  background: var(--rf-danger);
  width: 100%;
}

.fa-upload-status {
  display: block;
  font-size: 0.75rem;
  color: var(--rf-ink-muted);
  margin-top: 0.2rem;
}

.imgGalleryItem {
  width: 5rem;
  height: 5rem;
  margin: 0.5rem 0 0 0.5rem;
  margin: 0.5rem 0 0 0.5rem;
  object-fit: cover;
  box-shadow: 0px 0px 5px 0px #888888;
  border-style: solid;
  border-bottom-width: thin;
  border-color: #59606c;
}

a.imgViewerLink {
  display: revert;
}

img.maximisedImage {
  max-width: 100%;
}

/* SCL2FormEND */
.ui-sortable-helper {
  display: table;
}


.ui-draggable-handle {
  cursor: grab;
}

.colorpicker.colorpicker-2x {
  width: 272px;
}

.colorpicker-2x .colorpicker-saturation {
  width: 200px;
  height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
  width: 30px;
  height: 200px;
}

.colorpicker-2x .colorpicker-alpha,
.colorpicker-2x .colorpicker-preview {
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.colorpicker-2x .colorpicker-preview,
.colorpicker-2x .colorpicker-preview div {
  height: 30px;
  font-size: 16px;
  line-height: 160%;
}

.colorpicker-saturation .colorpicker-guide {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  margin: -5px 0 0 -5px;
}

.popover-content {
  color: black;
  font-size: 0.9em;
}

.popover-title {
  color: black;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #fff0e0;
}

.table-hover tbody tr td,
.table-hover tbody tr th {
  vertical-align: middle;
}

div#NextMilestone {
  position: absolute;
  font-size: 0.4em;
  right: 40px;
}

div#NextMilestoneSCL2 {
  position: absolute;
  font-size: 0.8em;
  right: 40px;

}

input#DateComplete {
  margin-left: 0px;
}

.popover {
  max-width: 100%;
}

div#pgtime {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #9a9a9a;
  font-family: monospace;
  font-size: 0.8em;
}

div#asUser {
  color: #f0f8ff;
  font-size: .9em;
  text-align: center;
}

.table-bordered>tbody>tr>td.ResponsibleEntity {
  border-style: solid;
  border-width: medium;
  border-color: #ffb203;
}

/* TIMELINE */

.timeline>div>.fa {
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  position: absolute;
  color: #666;
  /* background: rgb(173, 173, 173); */
  border-radius: 50%;
  text-align: center;
  /* left: 8px; */
  top: 0;
}

.timeline>div>.fa {
  color: white;
}

.timeline>.time-label>span {
  border-radius: 4px;
  background-color: #ababab;
  color: white;
  display: inline-block;
  font-weight: 600;
  padding: 5px;
}

.timeline>div>.fa.loggingItemIcon {
  background-color: #ababab;
}

.timeline>div>.fa.fileItemIcon {
  background-color: aqua;

}

.timeline>div>.fa.commentItemIcon {
  background-color: var(--rf-brand);
}

/* Class-scoped (was `#comments .userInitials`, but no page renders that id any
   more — inside the task modal the initials fell back to an unstyled full-width
   block ABOVE the name). The avatar floats left of the username instead. */
.userInitials {
  height: 2.5rem;
  width: 2.5rem;
  flex: 0 0 2.5rem;
  float: left;
  margin-right: 0.5rem;
  background-color: gray;
  border-radius: 50%;
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userInitialsSm {
  height: 2rem;
  width: 2rem;
  flex-basis: 2rem;
}

.card-comment:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.card-footer.card-comments+.card-footer-comment-reply {
  margin-top: 0;
  padding-top: 0;
}

.card-comment {
  border-bottom: 1px solid var(--rf-surface-sunken);
  padding: 8px 0;
}

.user-block .username {
  color: var(--rf-gray-700);
}

.userInitialsSm+.reply-push {
  margin-left: 2.5rem;
}

.timeline-body {
  font-weight: 300;
}

.timeline-body .highlight {
  font-weight: 500;
}


/* END TIMELINE */

.nav-pills .nav-link {
  border-radius: 0px;
}

/* SIDEBAR (MENU) */
.sidebar-menu-selected {
  background: color #e0862b;
  color: var(--rf-on-brand);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #e0852b33;
  color: var(--rf-on-brand);
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
  background-color: var(--rf-brand-secondary);
  color: var(--rf-on-brand);
}

.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
  width: 100%;
}

.sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-md .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-xs .main-sidebar .nav-sidebar .nav-link {
  width: 100%;
}

li.nav-item.has-treeview.menu-open {
  background-color: #e0852b33;
}

aside.main-sidebar {
  background-color: var(--rf-brand);
}

.sidebar {
  padding-left: 0;
  padding-right: 0;
}

/* Menu and navbar entries are controls, so a click-drag across them should not
   highlight their labels. Selection only: screen readers still read the text,
   and the links still drag into a new tab. */
.main-sidebar .brand-link,
.main-sidebar .nav-link,
.main-sidebar .nav-header,
.main-header .navbar-brand,
.main-header .nav-link,
.main-header .dropdown-item,
.main-header .dropdown-header {
  -webkit-user-select: none;
  user-select: none;
}

/* Long menu labels vs the treeview chevron.

   The chevron is position:absolute inside .nav-link, so nothing in normal flow
   reserves its column and a long organisation name runs underneath it. The
   padding reserves that column on .nav-link rather than on the <p>, which
   AdminLTE renders display:inline — there padding-right pads only the last line
   fragment and does not narrow the wrap width. The chevron itself does not move:
   it is offset from the padding box, which padding-right leaves where it was.

   Flex is what makes the label honour that reservation. The label is an
   inline-block that begins AFTER the icon, so constraining it as a percentage of
   the link still let it run the icon's width (~40px) past the chevron — a
   `max-width: 100%` looked right and was not. As a flex item it gets exactly the
   space the icon leaves, whatever that icon is. It also indents wrapped lines
   under the first line instead of restarting at the sidebar's edge. */
.nav-sidebar .has-treeview > .nav-link {
  padding-right: 2.25rem;
  display: flex;
  align-items: flex-start;
}

.nav-sidebar .has-treeview > .nav-link > .nav-icon {
  flex: 0 0 auto;
}

.nav-sidebar .has-treeview > .nav-link > p {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Hover-expanded mini sidebar: the collapsed rule sets the label to
   `white-space: nowrap`, and AdminLTE's hover rule restores display and
   visibility but never that — so without this it still refuses to wrap.

   Scoped to .has-treeview, the only items carrying a chevron. Left unscoped it
   also reaches labels that are still `width: 0` here (nothing gives them a box),
   and a zero-width box wraps at every space: "My Notifications" became two
   lines. */
.sidebar-collapse.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar .has-treeview > .nav-link > p,
.sidebar-collapse.sidebar-mini .main-sidebar:not(.sidebar-no-expand).sidebar-focused .nav-sidebar .has-treeview > .nav-link > p,
.sidebar-collapse.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar .has-treeview > .nav-link > p,
.sidebar-collapse.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand).sidebar-focused .nav-sidebar .has-treeview > .nav-link > p,
.sidebar-collapse.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand):hover .nav-sidebar .has-treeview > .nav-link > p,
.sidebar-collapse.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand).sidebar-focused .nav-sidebar .has-treeview > .nav-link > p {
  white-space: normal;
}

/* SIDEBAR (MENU) END */


.error-page>.error-content {
  display: block;
  margin-left: 190px;
  padding-top: 25px;
}

.content-header .breadcrumb {
  font-size: 0.8em;
}

.breadcrumb a {
  color: #63819e;
}

.breadcrumb a:hover {
  color: #275f94;
}

.popover {
  white-space: pre-wrap;
}

/* FOOTER */

.main-footer {
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0.5em 1em 0.5em 1em;
  overflow: hidden;
  z-index: 1000;
}

/* Offset content by the fixed footer's real height — common.js measures
   .main-footer into --rf-footer-offset; 6rem is the no-JS fallback. */
body:has(.main-footer) .content-wrapper {
  padding-bottom: var(--rf-footer-offset, 6rem);
}

/* Ensure footer content respects sidebar layout */
@media (min-width: 768px) {
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav):not(.sidebar-collapse) .main-footer {
    margin-left: 250px;
    width: calc(100% - 250px);
  }

  /* Collapsed sidebar with mini variants still need margin */
  body.sidebar-collapse .main-footer,
  body.sidebar-collapse .main-footer {
    margin-left: 4.6rem;
    width: calc(100% - 4.6rem);
  }

  /* Fully collapsed sidebar (no mini variants) */
  body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) .main-footer {
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================================
   Full-width top-nav layout (experiment) — body.layout-top-nav, driven by the
   rf_topnav cookie. AdminLTE relocates the org switcher + the current org's
   module links into the navbar; the rules below keep them on ONE row and let the
   middle menu scroll horizontally if it overflows, instead of wrapping into the
   tall multi-row stack that stranded the brand logo.
   ========================================================================== */

/* Full-width top-nav layout reserves NO sidebar space, but a persisted collapse
   (sidebar-mini + sidebar-collapse) drags in AdminLTE's
   `.sidebar-mini.sidebar-collapse …{margin-left:4.6rem!important}`, which beats its
   own un-!important `.layout-top-nav …{margin-left:0}` — leaving a mini-rail-width
   gap down the left of the content/header/footer. Scoped to the collapse+topnav
   combo so the normal topnav layout is untouched. */
body.layout-top-nav.sidebar-collapse .content-wrapper,
body.layout-top-nav.sidebar-collapse .main-header,
body.layout-top-nav.sidebar-collapse .main-footer {
  margin-left: 0 !important;
}

/* The footer's collapse rule also pins width:calc(100% - 4.6rem); restore full width. */
body.layout-top-nav.sidebar-collapse .main-footer {
  width: 100%;
}

/* AdminLTE's `.sidebar-mini.sidebar-collapse .brand-text{visibility:hidden}` hides the
   collapsed sidebar's brand label — but in the full-width top-nav layout that same
   .brand-text IS the navbar wordmark, so a persisted collapse blanks the wordmark here
   (looks like a dark-mode bug; it's mode-independent). Restore it, scoped to the navbar
   (.main-header) so a genuinely collapsed sidebar still hides its own label. */
body.layout-top-nav.sidebar-collapse .main-header .brand-text {
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: 0 !important;
  animation: none !important;
}

/* The org switcher (fa-building) is the context selector — accent its icon so it
   reads as distinct from the module links that follow. Applies in both widths. */
.layout-top-nav .main-header .navbar-nav .nav-link .fa-building {
  color: var(--rf-brand-accent);
}

/* Many-org users: cap the org switcher's dropdown height so a long org list
   scrolls within the menu instead of running off the bottom of the viewport.
   Scoped to the switcher (a flat list with no nested fly-outs); the same
   overflow on a dropdown that had fly-outs would clip them. */
.layout-top-nav .main-header #rfTopnavOrgSwitcher > .dropdown-menu {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* A navbar dropdown fly-out (e.g. the User Guide's "Guide Sections") lists each
   section as a .dropdown-submenu whose ▶ caret is AdminLTE's float:right ::after.
   A long section title fills the row and floats that caret onto its OWN line,
   which reads as a blank, parent-less item beneath the long one ("Understanding
   files and evidence"). Lay the caret out inline and push it to the right so it
   stays on the title's row whatever the title's length. */
.main-header .dropdown-submenu > a.dropdown-item {
  display: flex;
  align-items: center;
}
.main-header .dropdown-submenu > a.dropdown-item::after {
  float: none;
  margin: 0 0 0 auto;
}

@media (min-width: 768px) {
  /* One row: the bar and its container never wrap. */
  .layout-top-nav .main-header.navbar,
  .layout-top-nav .main-header.navbar > .container-fluid {
    flex-wrap: nowrap;
  }

  /* Brand + the right-hand utility cluster hold their size; the middle menu takes
     the slack and scrolls within itself. */
  .layout-top-nav .main-header .brand-link,
  .layout-top-nav .main-header .navbar-nav.ml-auto {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .layout-top-nav .main-header .navbar-collapse {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* One row, but NO overflow scroll — an overflow context here clips the open
     dropdown menus. With the org/module/staff pickers the bar never overflows. */
  .layout-top-nav .main-header .navbar-collapse > .navbar-nav {
    flex-wrap: nowrap;
  }

  .layout-top-nav .main-header .navbar-nav > .nav-item {
    white-space: nowrap;
  }

  /* A touch tighter so more module links fit before scrolling begins. */
  .layout-top-nav .main-header .navbar-nav > .nav-item > .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* Phones. The right-hand icon cluster (both layouts) is seven icons wide, which
   overflowed a 390px screen and pushed the user menu off the edge; tighten it. */
@media (max-width: 767.98px) {
  .main-header .navbar-nav.ml-auto > .nav-item > .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  /* Full-width layout: one row of mark · icons · hamburger, with the org/module
     menu folding out beneath it (navbar-expand-md, navbar-layout-topnav.blade.php). */
  .layout-top-nav .main-header.navbar > .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .layout-top-nav .main-header .navbar-brand {
    margin-right: 0.25rem;
  }

  .layout-top-nav .main-header .navbar-brand .brand-text {
    display: none;
  }

  .layout-top-nav .main-header .navbar-nav.ml-auto {
    order: 1;
  }

  .layout-top-nav .main-header .navbar-toggler {
    order: 2;
    padding: 0.25rem 0.5rem;
  }

  /* The opened menu scrolls within the screen under the fixed navbar. Its
     dropdowns render in place (static) here, so the overflow clips nothing. */
  .layout-top-nav .main-header .navbar-collapse {
    order: 3;
    max-height: calc(100vh - 3.5rem - 1px);
    overflow-y: auto;
  }

  .layout-top-nav .main-header .navbar-collapse .nav-item {
    white-space: normal;
  }

  /* Nested fly-outs (AdminLTE .dropdown-submenu) open to the side on desktop,
     which is off the screen here: indent them under their parent instead. */
  .layout-top-nav .main-header .navbar-collapse .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    margin: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
  }
}

/* Prevent footer content from overflowing */
.main-footer .row {
  max-width: 100%;
}

.main-footer .btn-group {
  flex-wrap: wrap;
  max-width: 100%;
}

.main-footer .btn-group .btn {
  white-space: nowrap;
}

/* One size for every footer button, whatever a page passes in. The footer is a
   toolbar assembled from many pages' buttons — plain .btn, .btn-sm, .btn-xs,
   grouped and ungrouped — and the size used to depend on whether a button
   happened to sit in a .btn-group: grouped ones were shrunk by the rule above,
   ungrouped ones kept Bootstrap's 1rem, so one bar read as two. Mirrors
   .rf-page-header__actions .btn, which normalises the header toolbar the same
   way, and matches .btn-sm's own size so the many small footer buttons are
   already where they were. */
.main-footer .btn {
  font-size: var(--rf-font-size-sm);
  line-height: 1.5;
}

/* FLYTER */

div.flyter-inline>div.flyter-inline-content>div>div>div.mr-2 {
  width: 100%;
}

/* TEMPLATES */

.heading a {
  color: black;
}

#template>.TLC {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: var(--rf-brand);
  color: aliceblue;
  box-shadow: 0px 0px 10px 1px #888;
}

#template>.TLC>.heading {
  font-size: 1.2em;
  padding-bottom: 10px;
}

#template>.TLC>.SCL1 {
  display: flex;
  flex-direction: column;
  padding: 10px;
  padding-bottom: 1px;
  background-color: #3c91ab;
  color: #f0f8ff;
}

#template>.TLC>.SCL1:not(:last-of-type) {
  margin-bottom: 10px;
}

#template>.TLC>.SCL1>.heading {
  font-size: 1.1em;
  padding-bottom: 10px;
}

#template>.TLC>.SCL1>.SCL2 {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #e8f6fa;
  color: var(--rf-ink);
}

#template>.TLC>.SCL1>.SCL2>.heading {
  font-size: 1.05em;
}

#template>.TLC>.SCL1>.SCL2:not(:last-of-type) {
  border-bottom-width: thin;
  border-bottom-style: solid;
}

#template>.TLC>.SCL1>.SCL2:last-of-type {
  margin-bottom: 10px;
}






#template>.TLC>.SCL1>.SCL2>.SCL2PDP {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: var(--rf-surface);
  color: var(--rf-ink);
}

#template>.TLC>.SCL1>.SCL2>.SCL2PDP>.heading {
  font-size: 1.05em;
}

#template>.TLC>.SCL1>.SCL2>.SCL2PDP:not(:last-of-type) {
  border-bottom-width: thin;
  border-bottom-style: solid;
}

#template>.TLC>.SCL1>.SCL2>.SCL2PDP:last-of-type {
  margin-bottom: 10px;
}


.control-sidebar-dark {
  margin-right: 0;

}

.editable {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-style: double;
}

.templateButton {
  display: flex;
  float: right;
}

/* NxM Report */
@page {
  size: auto;
}

.NxMscl1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* The matrix scrolls sideways once the selection is wider than the page,
   rather than squeezing every column to fit. */
.NxMScroll {
  overflow-x: auto;
}

/* Every column the same width, sized for the worst case on the page: the
   reference column takes the longest reference (--nxm-ref-chars) without
   wrapping, and the two score blocks share what is left. --nxm-columns
   counts the case-title column too; both are set on the table by nxm.js. */
.NxMtable {
  --nxm-ref-width: calc(var(--nxm-ref-chars, 5) * 0.5rem + 0.5rem);
  --nxm-col-min: calc(var(--nxm-ref-width) + 7rem);
  table-layout: fixed;
  width: max(100%, calc(var(--nxm-columns, 2) * var(--nxm-col-min)));
}

.NxMtable a {
  color: black;
}

.NxMtable .NxMColHeading {
  vertical-align: middle;
  text-align: center;
}

.NxMtable .NxMtrHeading {
  /* 		display: flex; */
  padding: 0;
  /*     width: 100%; */
  height: 100%;
  /* 		justify-content: center; */
  vertical-align: middle;
  padding: 10px;
  text-align: center;
}

.NxMtable .NxMtr {
  height: 100px;
}

.NxMtable .NxMtd {
  padding: 0;
}

.NxMtable .NxMtdcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.2em;
}

/* The claim's category, a bar over the cell's sub-claims; coloured by
   applyCellColours from the category's own colour, neutral when it has none. */
.NxMtable .NxMCategoryBar {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 4px;
  margin-bottom: 2px;
  border-radius: 2px;
  background-color: var(--rf-surface-sunken);
  color: var(--rf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.NxMtable .NxMSCL2Pair {
  display: flex;
  flex-direction: row;
  margin-bottom: -1px;
  font-size: 0.8rem;
  text-align: center;
}

.NxMtable .NxMSCL2Pair .block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  border: 1px solid #444;
}

.NxMtable .NxMSCL2Pair .reference {
  flex: 0 0 var(--nxm-ref-width);
  width: var(--nxm-ref-width);
  white-space: nowrap;
  text-align: center;
}

/* A sub-claim tool with no milestone interval has no forecast half: Current
   takes the whole block. */
.NxMtable .NxMSCL2Pair--single .NxMSCL2EA {
  width: 100%;
}
.NxMtable .NxMSCL2EA {
  width: 50%;
  justify-content: center;
  display: flex;
  border-right: 1px solid #444;
}

.NxMtable .NxMSCL2AA {
  width: 50%;
  justify-content: center;
  display: flex;
}

.tableCol20pc {
  width: 20%;
}

.tableCol10pc {
  width: 10%;
}

.tableCol15pc {
  width: 15%;
}

.respHeading {
  font-size: 1.2em;
}

pre.sf-dump,
pre.sf-dump .sf-dump-default {
  z-index: 10 !important;
}

.resp-col {
  min-height: 50px;
  border-style: dashed;
  vertical-align: middle;
  box-sizing: border-box;

}

.resp-col.resp {
  background-color: #bdeb34;
  border-style: solid;
  box-sizing: border-box;

}

.resp-org-div {
  background-color: #e8f6fa;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 30px;
}

.resp-count.badge.badge-info.pull-right {
  position: relative;
  float: right;
  margin-top: 5px;
}

.resp-count.badge.badge-info.pull-right>a {
  color: var(--rf-brand);
}

.CATDIV,
.CATDIV>a {
  background-color: #9acd3259;
  color: #1f2d3dc4;
  border-radius: 10px;
}

.CATDIV>a>h3 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.CATDIV>.containerFlex {
  min-height: 100px;
}

.height100pc {
  height: 100%;
}

.height900px {
  height: 900px;
}

.height192px {
  height: 192px;
}

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

/* Deleted-item page: guest.template centres content with h-100 +
   justify-content-center, which clips long restore-preview lists.
   Allow the inner container to scroll without breaking other guest pages. */
.deletedItemContainer {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  width: 100%;
  padding-bottom: 2rem;
}

.login-page {
  background-color: var(--rf-brand);
}

.dropdown-menu-lg {
  max-width: 500px;
}

@keyframes flashBorder {

  0%,
  100% {
    border-color: gold;
    -webkit-box-shadow: 0 0 14px 10px gold;
    -moz-box-shadow: 0 0 14px 10px gold;
    box-shadow: 0 0 14px 10px gold;
  }

  50% {
    border-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}


@keyframes flashBorder {

  0%,
  100% {
    border-color: gold;
    -webkit-box-shadow: 0 0 14px 10px gold;
    -moz-box-shadow: 0 0 14px 10px gold;
    box-shadow: 0 0 14px 10px gold;
  }

  50% {
    border-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}


.notificationAttention {
  animation: flashBorder 2s infinite;
  animation: flashBorder 2s infinite;
  position: relative;
}

.maxVh {
  height: 100vh;
}

.maxVw {
  width: 100vw;
}

.menu a {
  color: #6b6b6b;
}

.menu a:hover {
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  color: #3e3f8b;
}

/* Start Bow Tie */
.menu a#BTContextDelete:hover {
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  color: #cf2717;
}

#contextMenu>ul>li:not(:last-child) {
  margin-bottom: 0.5rem;
}

.contextMenuHover:hover {
  background-color: #cfcfb982;
}

#menu {
  display: none;
  position: fixed;
  background-color: var(--rf-surface);
  border-radius: 3px;
  z-index: 10000;
  width: max-content;
  flex-direction: column;
  background-color: var(--rf-surface);
  border-radius: 10px;
  box-shadow: 3px 4px 7px 0px rgb(0 0 0 / 50%);
  padding: 0.5rem 0.4rem 0rem 0rem;
}


ul.menu {
  list-style: none;
  padding-left: 0.7rem;
  padding-right: 0.3rem;
  margin-bottom: 0.6rem;
}

#btCardContainer>div#btCard.card {
  background-color: #696d84;
  color: var(--rf-border);
}

#btCard .card-title {
  margin-top: 0.6em;
}


.btMenu a {
  color: #6b6b6b;
}

.btMenu a:hover {
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  color: #3e3f8b;
}

.btMenu a#BTContextDelete:hover {
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  color: #cf2717;
}

#contextbtMenu>ul>li:not(:last-child) {
  padding-bottom: 0.5rem;
}

#btMenu {
  user-select: none;
  display: none;
  position: fixed;
  background-color: var(--rf-surface);
  border-radius: 3px;
  z-index: 1050;
  width: max-content;
  flex-direction: column;
  background-color: var(--rf-surface);
  border-radius: 10px;
  box-shadow: 3px 4px 7px 0px rgb(0 0 0 / 50%);
  padding: 0.5rem 0.4rem 0rem 0rem;
}


ul.btMenu {
  list-style: none;
  padding-left: 0.7rem;
  padding-right: 0.3rem;
  margin-bottom: 0.6rem;
}

#CustomModalContent .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: lightgray;
  border-color: #006fe6;
  color: var(--rf-on-brand);
  padding: 0 10px;
  margin-top: 0.31rem;
}

.btInfoBoxPreview {
  background-color: lightgray;
  border-color: #006fe6;
  color: var(--rf-on-brand);
  padding: 4px 10px;
  margin-top: 0.31rem;
  border-radius: 0.3rem;
}

.btInfoBoxPreview>.styleApply {
  border-radius: 0.5rem;
  padding: 0rem 0.5rem;
}

#btCard .dropdown .form-check-input {
  margin-left: 0;
}

#btCard .dropdown .form-check-label {
  margin-left: 1.5rem;
}

#btCardContainer .card-header {
  padding: 0.7rem 0.5rem 0.5rem 0.7rem;
}

.bg-kbi {
  background-color: #e7ddcd !important;
}

.entityOrderForm {
  min-height: 40px;
}

.sortHandle {
  cursor: grab;
}

.sortHandle:active {
  cursor: grabbing;
}

/* Scoped to .bg-kbi (the KBI field form): .entityOrder[data-scrolltouuid] is a
   shared wrapper — the assurance-framework report row (x-reports.ass-frame-entity)
   uses the same class, and its direct .bg-light child IS the Bootstrap grid .row.
   Unscoped, the flex-direction:column below stacked that grid's columns. */
.bg-kbi .entityOrder[data-scrolltouuid] {
  min-height: 183px;
}

.bg-kbi .entityOrder[data-scrolltouuid]>.bg-light {
  height: 100%;
  min-height: inherit;
}

.entityOrder .kbi-edit-btn,
.entityOrder .kbiConnectItem,
.entityOrder .unConnectableItem {
  flex-shrink: 0;
}

.kbi-placeholder {
  color: var(--rf-ink-faint);
  font-style: italic;
}

/* The whole value box opens the field editor modal. The card has a
   min-height, so the flex chain below stretches the box over all the
   empty space under the heading — a short or empty value would
   otherwise leave a one-line click target in a tall card. */
.bg-kbi .entityOrder[data-scrolltouuid] > .bg-light {
  display: flex;
  flex-direction: column;
}

.bg-kbi .entityOrder[data-scrolltouuid] .kbi-field-row {
  flex: 1 1 auto;
}

.bg-kbi .entityOrder[data-scrolltouuid] .kbi-field-row > .col-12 {
  display: flex;
  flex-direction: column;
}

.kbi-field-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.kbi-display {
  flex: 1 1 auto;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin: -0.25rem;
}

.kbi-display:hover {
  background-color: rgba(6, 159, 193, 0.08);
}

/* A reader without edit on the case: the value is shown, not opened. */
.kbi-field-wrapper[data-readonly] .kbi-display {
  cursor: default;
}

.kbi-field-wrapper[data-readonly] .kbi-display:hover {
  background-color: transparent;
}

/* Flattened-character counter under the minimal string-field editors
   (editorChips.js): counts what will actually be stored. */
.rfCharCount {
  text-align: right;
  font-size: 0.8rem;
  color: var(--rf-ink-muted);
  margin-top: 0.15rem;
}

.rfCharCount--over {
  color: var(--rf-danger);
  font-weight: 600;
}

/* Capacity ring under the RICH editors (editorChips.js): markup counts
   toward the stored-HTML limit, so a proportion gauge avoids the "bold
   made the number jump" confusion a raw count invites. The exact figure
   lives in the tooltip; a remaining/over count appears near the limit. */
.rfCharGauge {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--rf-ink-muted);
}

.rfCharGauge .rfCharGaugeTrack {
  stroke: var(--rf-surface-sunken);
}

.rfCharGauge .rfCharGaugeFill {
  stroke: var(--rf-ink-muted);
  transition: stroke-dashoffset 0.2s, stroke 0.2s;
}

.rfCharGauge--warn .rfCharGaugeFill {
  stroke: var(--rf-amber-500);
}

.rfCharGauge--over .rfCharGaugeFill {
  stroke: var(--rf-danger);
}

.rfCharGauge--over .rfCharGaugeRemaining {
  color: var(--rf-danger);
  font-weight: 600;
}

.rfCharGaugeRemaining:empty {
  display: none;
}

/* Variables case matrix: the case column and the header row stay pinned
   while the variable columns scroll — a converted org carries 40+ of
   them. Sticky cells need their own background or the scrolled content
   shows through. */
.variablesMatrix-scroll {
  max-height: 70vh;
  overflow: auto;
}

.variablesMatrix__stickyCol {
  position: sticky;
  left: 0;
  background-color: var(--rf-surface);
  z-index: 2;
  /* Fixed, not min: the count column pins immediately to its right, so
     this column's width is the count column's left offset. */
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.variablesMatrix__countCol {
  position: sticky;
  left: 220px;
  background-color: var(--rf-surface);
  z-index: 2;
}

.variablesMatrix thead th {
  position: sticky;
  top: 0;
  background-color: var(--rf-surface);
  z-index: 1;
}

.variablesMatrix thead th.variablesMatrix__stickyCol,
.variablesMatrix thead th.variablesMatrix__countCol {
  z-index: 3;
}

.variablesMatrix__varCol {
  min-width: 140px;
}

/* The whole cell is the link into the case's Variables panel. */
.variablesMatrix__cellLink {
  display: block;
  margin: -0.3rem;
  padding: 0.3rem;
  text-decoration: none;
}

.variablesMatrix__cellLink:hover {
  background-color: rgba(6, 159, 193, 0.08);
  text-decoration: none;
}

/* The field editor's body reserves the editor's exact height (matches the
   height: 250 HugeRTE option) so the centred dialog never resizes — the
   editor mounts after the modal is shown, and a height change mid-view
   made the dialog visibly snap as it re-centred. The raw editor div stays
   hidden while it waits; HugeRTE injects its editor as a sibling. */
#kbiFieldEditBody {
  min-height: 250px;
}

#kbiFieldEditBody > .wysiwygDivKBI {
  display: none;
}

.bg-btMetaTypes {
  background-color: #dde7cdbb !important;
}

/* End Bow Tie */


.revertLabelStyle {
  font-weight: revert !important;
  color: revert !important;
  margin-bottom: revert !important;
}

.connectionSearchResult {
  background-color: aqua;
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 25px;
  padding-left: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.connectionExistingRow {
  background-color: aquamarine;
  padding: 0.3rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}


.scl2PendingConnectionsList .connectionSearchResult,
.pendingConnectionsList .connectionSearchResult {
  background-color: #baebba !important;
}

.connectionExistingRow.highlight,
.connectionSearchResult.highlight {
  background-color: greenyellow;
}

.connectionExistingRow.kbiEntity,
.connectionSearchResult.kbiEntity {
  background-color: #e7ddcd;
}

.connectionExistingRow.bowtieSearchResult,
.connectionSearchResult.bowtieSearchResult {
  background-color: #ffdede;
}

.connectionExistingRow.documentSearchResult,
.connectionSearchResult.documentSearchResult {
  background-color: rgb(244, 246, 196);
}

.connectionExistingRow.counterArgumentSearchResult,
.connectionSearchResult.counterArgumentSearchResult {
  background-color: var(--rf-counter-argument-surface);
}



.connectableRow.active {
  box-shadow: 0 0 14px 5px #ffe700 !important;
  border-radius: inherit;
}

#RelatedEntitiesChart {
  min-height: 70vh;
  min-width: 100%;
}

.strikethru {
  text-decoration: line-through;
}

.connectItemOption {
  border-radius: inherit;
  box-shadow: inset 0px 0px 10px 12px #e7ff7b;
}

.connectItemHover {
  border-radius: inherit;
  box-shadow: inset 0px 0px 10px 12px #7bff8d;
}

.supportedArg {
  font-size: .9em;
  color: green;
}

.unsupportedArg {
  font-size: .9em;
  color: #b71b1b;
}

.supportingEvidenceEntity {
  border-style: solid;
  padding: 5px;
  background-color: ghostwhite;
  margin-top: 5px;
  border-width: thin;
  min-height: 65px;
}

.supportingEvidenceEntity>p:last-child {
  margin-bottom: 1px;
}


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

.modal-backdrop.fade {
  opacity: 0;
}

.modal-fs {
  max-width: 95%;
  /* margin: 0; */
  width: 95vw;
  height: 95vh;
}

.modal-fs .modal-content {
  height: 95%;
  /* border-radius: 0; */
  border: none;
}

#ImageViewerModal,
#FileViewerModal {
  z-index: 1100;
}

/* Apply to Related Entities modal - must stack above connection modals */
#ApplyToRelatedEntitiesModal {
  z-index: 1060;
}

/* SWEET ALERT DIALOGUE BOX ORDERING */
.swal2-confirm {
  order: 2;
}

.swal2-cancel {
  order: 1;
}

/* Buttons are our .btn (buttonsStyling: false in common.js), so give them the
   gap the swal theme only puts on its own .swal2-styled buttons. */
.swal2-actions .btn {
  margin: 0 .3125rem;
}

.swal2-popup.swal2-toast .swal2-html-container {
  margin: 0;
}

.swal2-popup.swal2-toast.toaster {
  padding: 20px;
}

.swal2-popup.swal2-toast.toaster .swal2-title {
  margin: .5em 1em;
  font-size: 1rem;
}


.youtube-iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.commentReplyDiv {
  background-color: var(--rf-surface);
  border-radius: 3px;
  border-color: black;
  border-width: 10px;
}

.wysiwyg:not(:focus-within):not(.focus):not(.focused)>[contenteditable="true"]:not(:focus)~.toolbar-auto:after {
  height: 0;
  max-height: 1rem;
  transition: height 0.2s;
  transition-delay: 0.1s;
}

.wysiwyg:not(:focus-within):not(.focus):not(.focused)>[contenteditable="true"]:not(:focus)~.toolbar-auto>.toolbar {
  max-height: 0;
  margin-bottom: -2000px;
  border-top-width: 0;
  transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s;
  transition-delay: 0.1s;
}


/* DOCUMENTATION */

#office_frame {
  width: 100%;
  height: calc(100dvh - 200px);
  border: none;
  margin-left: .8em;
  margin-right: .8em;
  border-radius: 0;
  transition: 0.5s;
}

#bt_frame {
  width: 100%;
  height: calc(100dvh - 200px);
  border: none;
  margin-left: .8em;
  margin-right: .8em;
  border-radius: 0;
  transition: 0.5s;
}

.overlay {
  height: 0%;
  width: 100%;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #242849aa;
  overflow-y: hidden;
  transition: 0.5s;
  border-radius: 0.3em;
  margin-bottom: 1em;
}

/* .overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
}
 */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: var(--rf-on-brand);
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: var(--rf-on-brand);
}

.overlay .OverlayTools {
  font-size: 25px;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }

  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

:root {
  --prependDocumentationColour: #adbfe1;
  --appendDocumentationColour: #bcedbe;
  --notTemplateControlled: #959595;

}

.documentationIndex {
  background-color: var(--prependDocumentationColour);
  background-size: 1rem 1rem;
  height: 100%;
  border-radius: 0.8rem;
  min-height: 5rem;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.documentationIndex.append {
  background-color: var(--appendDocumentationColour);
}

.documentationIndex.notTemplateControlled {
  background-color: var(--notTemplateControlled);
  min-height: 8rem;
}

.DocumentRow:first-child {
  margin-top: .5rem;
}

.DocumentRow:last-child {
  margin-bottom: .5rem;
}

.DocumentRow {
  display: flex;
  background-color: #e9e9e9;
  color: #0c0a0a;
  border-radius: 0.5rem;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  margin: .25rem;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.DocumentRow.alert-success {
  background-color: #d4edda;
}

.DocumentRow.alert-danger {
  background-color: #f8d7da;
}

.DocumentRow.alert-secondary {
  background-color: #e2e3e5;
}

.DocumentRow form {
  display: none;
}

/* Current-image thumbnail in the report component editor's cover image setting */
.CoverImageSettingPreview {
  max-width: 260px;
  max-height: 170px;
  margin-bottom: .5rem;
}

/* Organisation Appearance Options → Map Customisations: the building highlight
   colour input as a swatch, not a full-width bar. */
.MapBuildingHighlightColour {
  width: 4rem;
  height: 2.25rem;
  padding: .2rem;
}

.DocumentRow.notTemplateControlledRow {
  background-color: #fbf5e8;
}

.DocumentationSeparator {
  display: flex;
  align-items: center;
  margin: 0.25rem 0;
  gap: 0.25rem;
  color: var(--rf-ink);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.DocumentationSeparator::before,
.DocumentationSeparator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--rf-border-strong);
}

#DocumentationModal .modal-body {
  max-height: 140vh;
}

.DocumentRow.PageBreakRow {
  background-color: rgba(173, 181, 189, 0.15) !important;
  border-radius: 0.5rem;
  justify-content: space-between;
  margin: 0.25rem;
  padding: 0.35rem 0;
  position: relative !important;
  width: 100%;
}

.DocumentRow.PageBreakRow::before,
.DocumentRow.PageBreakRow::after {
  display: none;
}

.DocumentRow.PageBreakRow .DocumentIconAndFile {
  width: 40%;
  flex: 0 0 auto;
  justify-content: flex-start;
  /* Removed position: relative to allow text to center in the row */
}

.DocumentRow.PageBreakRow .DocumentIcon {
  display: none;
}

.DocumentRow.PageBreakRow .sectionCheckbox {
  margin-left: 1rem;
  margin-right: 0.5rem;
  position: relative;
  z-index: 2;
}

.DocumentRow.PageBreakRow .DocumentDisplayName {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.DocumentRow.PageBreakRow .DocumentDisplayName h5 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: black;
  margin: 0 1rem;
  white-space: nowrap;
  background-color: transparent;
}

.DocumentRow.PageBreakRow .DocumentDisplayName::before,
.DocumentRow.PageBreakRow .DocumentDisplayName::after {
  content: '';
  flex: 1;
  border-bottom: 2px dashed var(--rf-ink-faint);
  margin: 0 1rem;
}

.DocumentRow.PageBreakRow .DocumentationTools {
  margin-right: 1rem;
  position: relative;
  z-index: 2;
}

.DocumentRow.PageBreakRow .RemovePageBreak {
  margin-left: auto;
  margin-right: 0.5rem;
  position: relative;
  z-index: 2;
}

/* Outline buttons are transparent, so the page-break row's dashed rule showed
   through the reposition/delete controls sitting on it. Solid at rest, on
   PAGE-BREAK rows only: .DocumentRow is shared with the case document lists,
   whose tool cluster mixes outline variants (Edit primary, Delete danger,
   Rename secondary) — a row-wide rule turned Rename solid beside transparent
   neighbours. :not(:hover) leaves Bootstrap's hover fill in charge. */
.DocumentRow.PageBreakRow .DocumentationTools .btn-outline-secondary:not(:hover),
.DocumentRow.PageBreakRow .RemovePageBreak:not(:hover) {
  background-color: var(--rf-surface);
}


.ReportTemplateSidebar {
  position: sticky;
  top: 5rem;
  align-self: flex-start;
  min-width: 180px;
  flex-shrink: 0;
  margin-top: -0.5rem;
}

.ReportTemplateSidebar.col-sm-2 {
  flex: 0 0 auto;
  width: 25%;
  min-width: 335px;
  max-width: none;
}

.ReportTemplateSidebar.col-sm-3 {
  flex: 0 0 auto;
  width: 25%;
  min-width: 335px;
  max-width: none;
}

.row:has(> .ReportTemplateSidebar)>.col-sm-10,
.row:has(> .ReportTemplateSidebar)>.col-sm-9 {
  flex: 1 1 0%;
  max-width: none;
  min-width: 0;
  overflow: hidden;
}

.ReportTemplateSelect {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px dashed var(--rf-ink-faint);
  border-radius: 0.5rem;
  background-color: var(--rf-surface-muted);
  color: var(--rf-gray-700);
  appearance: auto;
  margin-bottom: 0.35rem;
}

.DocumentListReportTemplateSelect {
  width: auto;
  min-width: 200px;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--rf-ink-faint);
  border-radius: 0.375rem;
  background-color: var(--rf-surface-muted);
  color: var(--rf-gray-700);
  appearance: auto;
}

#userTemplateModifyButtons {
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  max-width: 100%;
}

#userTemplateModifyButtons .btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
}

#arrangementSaveButtons {
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  max-width: 100%;
}

#arrangementSaveButtons .btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  margin-left: 0 !important;
}

.ReportTemplateSelect:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

.AddPageBreakArea .DocumentRow.PageBreakRow {
  background-color: var(--rf-surface-muted);
  margin: 0;
  padding: 0.35rem 0;
  border: 1px dashed var(--rf-ink-faint);
  border-radius: 0.5rem;
}

.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentIconAndFile {
  width: auto;
}

.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentDisplayName {
  position: static;
  width: auto;
  display: block;
  margin: 0 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentDisplayName h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentDisplayName::before,
.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentDisplayName::after {
  display: none;
}

.AddPageBreakArea .DocumentRow.PageBreakRow .DocumentIcon {
  display: flex;
}

.exportBtn {
  padding: 0.4rem 0;
  margin-top: 3.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.exportBtn:hover,
.exportBtn:focus {
  background-color: #cdf4cc !important;
  color: var(--rf-success) !important;
  border-color: #cdf4cc !important;
}

.PageBreakDragHelper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--rf-surface-muted);
  border: 1px dashed var(--rf-ink-faint);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  min-width: 120px;
  cursor: grabbing;
  color: var(--rf-gray-700);
  overflow: hidden;
}

.PageBreakDragHelper h5 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ComponentisedDocumentRow:first-child {
  margin-top: .5rem;
}

.ComponentisedDocumentRow:last-child {
  margin-bottom: .5rem;
}

.ComponentisedDocumentRow {
  display: flex;
  background-color: #e9e9e9;
  color: #0c0a0a;
  border-radius: 0.5rem;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  margin: .25rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.ComponentisedDocumentRow form {
  display: none;
}

.ComponentisedDocumentRow.notTemplateControlledRow {
  background-color: #fbf5e8;
}

.ComponentisedDocumentSeparator {
  border: 0;
  border-top: 2px solid var(--rf-border-strong);
  /* the line itself */
  margin: -0.5rem 0 0.75rem;
  /* space above/below */
  width: 100%;
  /* full width within the row */
}

/* Element header strip (type label + action buttons) — coloured so it
   reads as a header rather than blending into the row background. */
.ComponentisedDocumentRow > .ComponentisedDocumentDisplayName {
  background-color: #cfd8e3;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.15rem 0.75rem;
  margin-bottom: 0 !important;
}

/* Give the editor-side rows a taller header strip than the sidebar
   palette tiles — the action buttons + heading-level dropdown need a
   little more breathing room than the compact drag-from tiles. */
.documentationIndex .ComponentisedDocumentRow > .ComponentisedDocumentDisplayName {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* "Add Snippet" sidebar tiles only have the header strip (their content
   area is empty), so round all four corners instead of just the top. */
#DocumentViews .ComponentisedDocumentRow > .ComponentisedDocumentDisplayName {
  border-radius: 0.5rem;
}

/* The <hr> separator is redundant now that the header has its own
   background and the content has its own borders — it just leaves a
   grey strip between the two. Hide it inside element rows. */
.ComponentisedDocumentRow > .ComponentisedDocumentSeparator {
  display: none;
}

/* Bordered text box for element content so the content isn't flush
   against the row's coloured background. Scoped to .documentationIndex
   so the read-only template tiles in the #DocumentViews sidebar (whose
   content area is empty) aren't given an empty bordered box. */
.documentationIndex .ComponentisedDocumentRow > .ComponentisedDocumentContent {
  background: #e9e9e9;
  padding: 0.5rem 0.75rem;
  /* No width:100% — the row is a flex column with align-items:center,
     so the content block shrinks to its content and centres itself.
     Inner content (bullets, paragraphs, headings) keeps its own
     alignment. */
}

/* Heading-level dropdown toggle — styled to look like the row's title
   label (matches the Bootstrap h5 used for non-heading rows). */
.heading-level-dropdown .heading-level-toggle {
  color: var(--rf-ink);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.heading-level-dropdown .heading-level-toggle:hover,
.heading-level-dropdown .heading-level-toggle:focus {
  color: var(--rf-blue-500);
  text-decoration: none;
}
.heading-level-dropdown .heading-level-label {
  margin-right: 4px;
}

/* Tailwind's preflight resets h1–h6 to font-size: inherit which makes
   all heading levels look identical inside the editor. Force visible
   distinctions here so the dropdown's effect is actually visible. */
.documentationIndex .ComponentisedDocumentContent h1 { font-size: 1.5rem  !important; line-height: 1.25 !important; font-weight: 600 !important; }
.documentationIndex .ComponentisedDocumentContent h2 { font-size: 1.25rem !important; line-height: 1.3  !important; font-weight: 600 !important; }
.documentationIndex .ComponentisedDocumentContent h3 { font-size: 1.1rem  !important; line-height: 1.35 !important; font-weight: 600 !important; }

/* Make only THIS modal wider */
#ComponentisedDocumentEditModal .modal-dialog {
  max-width: 95vw;
}

/* Optional: give it more height too */
#ComponentisedDocumentEditModal .modal-content {
  height: 95vh;
}


/* Modal body as scroll container, no top padding so header sits tight */
#ComponentisedDocumentEditModal .modal-body {
  position: relative;
  padding-top: 0;
  overflow-x: hidden;
  /* prevent horizontal scrollbar in the modal */
}

/* Sticky header row */
#ComponentisedDocumentEditModal .ComponentisedDocumentHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--rf-surface);
  margin-top: 0 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Sidebar column: normal grid column */
#ComponentisedDocumentEditModal .ComponentisedDocumentSidebar {
  margin-top: 0 !important;
}

/* Sidebar inner: sticky, but no internal scrolling, no clipping */
#ComponentisedDocumentEditModal .ComponentisedDocumentSidebarInner {
  position: sticky;
  top: 2.75rem;
  /* sit just under the sticky header; tweak 2.5–3rem as needed */
  align-self: flex-start;
  overflow: visible;
  /* no own scrollbars */
  max-height: none;
  /* let the modal body handle scroll, not this box */
  width: 100%;
}

#body_editor_wrap {
  visibility: hidden;
  min-height: 220px;
}

#body_editor {
  visibility: hidden;
}

.image-collection .thumb {
  width: 100px;
  height: 100px;
  border-radius: .25rem;
  border: 1px solid var(--rf-success);
  overflow: hidden;
  background: var(--rf-surface);
}

.image-collection .thumb>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.image-collection .thumb>img.imgPreview {
  max-height: none !important;
}

/* Each thumb sits in a flex column so the caption can render below the
   100×100 thumb box without breaking its fixed size. The margin classes
   from the markup (mr-2 mb-2) now live on .thumb-card; the inner .thumb
   keeps its existing sizing and click behaviour unchanged. */
.image-collection .thumb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}
.image-collection .thumb-card > .thumb {
  margin: 0 !important;
}
.image-collection .image-thumb-caption {
  font-size: 0.75rem;
  line-height: 1.2;
  margin-top: 0.25rem;
  text-align: center;
  word-break: break-word;
  width: 100%;
  color: var(--rf-ink);
}

/* Auto Generate File Types modal — cap the height of the per-card lists
   so a candidate that spans many safety cases (e.g. 20+) doesn't blow
   the card up to fill the viewport. The card's form fields stay
   visible at the top; only the lists scroll internally. */
.fileSlotsAutoGenerateCard ul {
  max-height: 5rem;
  overflow-y: auto;
}

/* Collapsible section headings inside the modal. The h5 is the click
   target (data-toggle="collapse"); the chevron rotates 180° when the
   section is collapsed so the affordance is obvious. */
.fileSlotsAutoGenerateSectionToggle {
  cursor: pointer;
  user-select: none;
}
.fileSlotsAutoGenerateChevron {
  transition: transform 0.15s ease;
}
.fileSlotsAutoGenerateSectionToggle[aria-expanded="false"] .fileSlotsAutoGenerateChevron {
  transform: rotate(-90deg);
}


.DocumentationTools {
  margin-right: 1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hide-doc-connections .documentConnectItem,
.hide-doc-connections .unConnectableDocumentItem {
  display: none !important;
}

.DocumentIconAndFile {
  width: 40%;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.TemplateDocumentationTools {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

.DocumentIconAndFile.notTemplateControlledRow {
  width: 90%;
}

.DocumentIconAndFile.notTemplateControlledRow>.DocumentDisplayName {
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.DocumentIconAndFile.SystemView {
  width: 85%;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.DocumentIconAndFile.TemplateDoc {
  width: 85%;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.notTemplateControlledRow .DocumentDisplayName {
  padding-right: 2rem;
  text-align: center;
}

.DocumentIcon {
  display: flex;
  margin-left: 1.5rem;

  width: 40px;
  min-width: 40px;
  align-items: center;
  padding: 0;
  justify-content: center;
}

.DocumentDisplayName {
  display: flex;
  margin-left: 1rem;
  color: darkslategray;
  margin: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  margin-top: 0;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.DocumentDisplayName>span {
  margin-left: 0.3rem;
}

.DocumentDisplayName>h5 {
  margin-bottom: 0;
  word-break: break-word;
}

.ComponentisedDocumentDisplayName {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  display: table;
  width: 100%;
}

.ComponentisedDocumentDisplayNameDiv {
  display: table-cell;
  vertical-align: middle;
}

.DocumentRowActions {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.ComponentisedDocumentDisplayName h5 {
  margin: 0;
  /* remove default h5 margin that causes misalignment */
}


[data-password] {
  cursor: copy;
}

/* Brand buttons — routed through the design tokens (design-tokens.css).
   Values are unchanged from the live navy/amber/orange brand; editing the
   tokens (or overriding them in a tenant skin) now re-skins these everywhere. */
.btn-brand {
  color: var(--rf-on-primary);
  background-color: var(--rf-primary);
  border-color: var(--rf-brand-border);
  box-shadow: none;
  border-radius: var(--rf-control-radius);
}

.btn-brand:hover {
  color: var(--rf-primary-hover) !important;
  text-decoration: none;
}

/* Inactive half of a brand segmented control (register pagination, view-mode
   toggles); .active / hover fills to .btn-brand. */
.btn-outline-brand {
  color: var(--rf-primary);
  background-color: transparent;
  border-color: var(--rf-brand-border);
  box-shadow: none;
  border-radius: var(--rf-control-radius);
}

.btn-outline-brand:hover,
.btn-outline-brand.active {
  color: var(--rf-on-primary);
  background-color: var(--rf-primary);
  border-color: var(--rf-brand-border);
}

.btn-brand-secondary {
  background-color: var(--rf-brand-secondary);
  border-color: var(--rf-brand-secondary);
  color: var(--rf-on-brand-secondary);
  box-shadow: none;
}

.btn-brand-secondary:hover {
  color: var(--rf-brand) !important;
  background-color: var(--rf-brand-secondary);
  box-shadow: none;
}

/* The admin shortcut (design guide §2). Bootstrap's own amber label is
   unreadable on white, so the label reads from --rf-warning-ink. */
.btn-outline-warning {
  color: var(--rf-warning-ink);
  border-color: var(--rf-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active {
  color: var(--rf-on-warning);
  background-color: var(--rf-warning);
  border-color: var(--rf-warning);
}



.fa-svg {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.125em;
}

#documentCompilationModalFooter {
  transition: background-color .25s ease-in-out;
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
  -o-transition: background-color .25s ease-in-out;
}

#compilingModalProgress {
  height: 1rem;
  width: -webkit-fill-available;
}

#compilingModalProgress .progress-bar {
  height: 100%;
}

#progressLog {
  max-height: 8em;
  overflow: scroll;
  width: -webkit-fill-available;
  --mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 0) 100% 50% / 100% 100% repeat-x;
  mask: var(--mask);
  white-space: pre;
  font-size: .75rem;
  scrollbar-width: none;
}

#progressInfo {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: inherit;
  flex-direction: row;
  height: inherit;
}

#docLoadingWrapper {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.swalLower {
  margin-top: 3rem;
}

#progressInfo>.progressInfoText {
  background-color: #e9ecef8a;
  padding: 0 1em 0 1em;
  display: flex;
  height: 1em;
  flex-wrap: wrap;
  align-content: center;
}

#notifications .dropdown-menu {
  max-height: 90vh;
  overflow: scroll;
  scrollbar-width: none;
}

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

/* Imported regulation text: lists whose items carry their own "(a)" / "(1)" labels, and tables. */
ul.af-labelled-list {
  list-style-type: none;
  padding-left: 1.5rem;
}

.assurance_framework_entities_full_title table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.875em;
}

.assurance_framework_entities_full_title td,
.assurance_framework_entities_full_title th {
  border: 1px solid var(--rf-border);
  padding: 0.15rem 0.35rem;
  vertical-align: top;
}

.ass-frame-entity.min-height-200 {
  min-height: 200px;
}



#ImageViewerModal {
  z-index: 100000;
}

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


.context-menu {
  position: absolute;
  z-index: 10000;
}

.context-menu ul {
  list-style: none;
  margin-left: -2rem;
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: var(--rf-surface);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  padding: 10px 0;
  filter: drop-shadow(6px 7px 0.7px #00000077);
  border-style: solid;
  border-color: #88888888;
}

.menu div.form-check {
  font: inherit;
  border: 0;
  padding: 10px 30px 10px 30px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: unset;
  color: var(--rf-ink);
  font-weight: 500;
  transition: 0.5s linear;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
}

.menu>li {
  display: flex;
}

.menu>li>a:hover {
  background: #f1f3f7;
  color: #4b00ff;
}

.menu>li>input {
  margin-left: 10px;
}

.menu>li.trash>a:hover {
  color: red;
}

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

.glass {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.templateSequence {
  padding-top: 1rem;
}

.templateSequence p {
  padding: 0;
  margin: 0;
}

[contenteditable="false"],
[disabled] {
  cursor: not-allowed;
}

.text-colour {
  mix-blend-mode: multiply;
}

.SafetyCaseClone {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #a19e9e;
}

.SafetyCaseCloneConnections {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #f5f5f5;
}

.SafetyCaseCloneDocuments {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #7d75bd;
}

.SafetyCaseCloneKbi {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #bcd6ab;
}

.SafetyCaseCloneClaimArgEvidence {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #cdbce0;
}

.SafetyCaseCloneCategories {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #b4c6c7;
}


.SafetyCaseCloneSCL1s {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #1e676c;
  /* background-color: #84b6ba;    Suggestion to improve the contrast on the card */

}

.SafetyCaseCloneSCL2s {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #95d57f;
}

.SCL2Entities {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Args {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #40d0da;
}

.SafetyCaseCloneSCL2Dps {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #d676d9;
}

.SafetyCaseCloneSCL2Evs {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Contexts {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ddde77;
}

.SafetyCaseCloneSCL2Context {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.SafetyCaseCloneSCL2DPs {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #f0f0b3;
}

.SafetyCaseCloneSCL2Mits {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #89b3e3;
}

.SafetyCaseCloneConnection {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneDocument {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneCategory {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL1 {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2 {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Arg {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Ev {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Context {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2DP {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneSCL2Mit {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneRegisters {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #e6b88a;
}

.SafetyCaseCloneRegister {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.SafetyCaseCloneRegisterItem {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

.evidenceCloneOrLinks {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #e0a451;
}

.evidenceCloneOrLink {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff8a;
}

/* percentage widths */
.w-10pct {
  width: 10%;
}

.w-15pct {
  width: 15%;
}

.w-20pct {
  width: 20%;
}

.w-30pct {
  width: 30%;
}

.w-40pct {
  width: 40%;
}

.w-50pct {
  width: 50%;
}

.w-60pct {
  width: 60%;
}

.w-70pct {
  width: 70%;
}

.w-80pct {
  width: 80%;
}

.w-90pct {
  width: 90%;
}

/* impersonation */
.pinned {
  float: left;
  top: 0;
  z-index: 1050;
  position: sticky;
  width: 100%;
  box-shadow: 0px 6px 10px -1px rgba(0, 0, 0, 0.4);
}

/* Bootstrap Modifications */
.input-group-text {
  /* Remove border-radius on right hand side of embedded input text */
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* organisation engagement */
.engagement-grid {
  width: fit-content;
  display: grid;
  grid-template-columns: max-content repeat(55, 12px);
  grid-template-rows: max-content repeat(7, 12px);
  column-gap: 1px;
  row-gap: 1px;
}

.engagement-weekday,
.engagement-month {
  font-size: 12px;
  line-height: 12px;
}

.engagement-weekday {
  padding-right: 5px;
}

.engagement-month {
  padding-bottom: 3px;
}

.engagement-day {
  border-radius: 1px;
  cursor: default;
  background: #EBEDF0;
}

.engagement-engage-1 {
  background: #c3f5e7;
}

.engagement-engage-25 {
  background: #88ecce;
}

.engagement-engage-50 {
  background: #4ce2b6;
}

.engagement-engage-75 {
  background: var(--rf-teal-500);
}

.engagement-engage-100 {
  background: #189771;
}

/* organisation engagement */
.engagement-grid {
  width: fit-content;
  display: grid;
  grid-template-columns: max-content repeat(55, 12px);
  grid-template-rows: max-content repeat(7, 12px);
  column-gap: 1px;
  row-gap: 1px;
}

.engagement-weekday,
.engagement-month {
  font-size: 12px;
  line-height: 12px;
}

.engagement-weekday {
  padding-right: 5px;
}

.engagement-month {
  padding-bottom: 3px;
}

.engagement-day {
  border-radius: 1px;
  cursor: default;
  background: #EBEDF0;
}

.engagement-engage-1 {
  background: #c3f5e7;
}

.engagement-engage-25 {
  background: #88ecce;
}

.engagement-engage-50 {
  background: #4ce2b6;
}

.engagement-engage-75 {
  background: var(--rf-teal-500);
}

.engagement-engage-100 {
  background: #189771;
}

/* Bootstrap Modifications */
.input-group-text {
  /* Remove border-radius on right hand side of embedded input text */
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* organisation engagement */
.engagement-grid {
  width: fit-content;
  display: grid;
  grid-template-columns: max-content repeat(55, 12px);
  grid-template-rows: max-content repeat(7, 12px);
  column-gap: 1px;
  row-gap: 1px;
}

.engagement-weekday,
.engagement-month {
  font-size: 12px;
  line-height: 12px;
}

.engagement-weekday {
  padding-right: 5px;
}

.engagement-month {
  padding-bottom: 3px;
}

.engagement-day {
  border-radius: 1px;
  cursor: default;
  background: #EBEDF0;
}

.engagement-engage-1 {
  background: #c3f5e7;
}

.engagement-engage-25 {
  background: #88ecce;
}

.engagement-engage-50 {
  background: #4ce2b6;
}

.engagement-engage-75 {
  background: var(--rf-teal-500);
}

.engagement-engage-100 {
  background: #189771;
}

/* organisation engagement */
.engagement-grid {
  width: fit-content;
  display: grid;
  grid-template-columns: max-content repeat(55, 12px);
  grid-template-rows: max-content repeat(7, 12px);
  column-gap: 1px;
  row-gap: 1px;
}

.engagement-weekday,
.engagement-month {
  font-size: 12px;
  line-height: 12px;
}

.engagement-weekday {
  padding-right: 5px;
}

.engagement-month {
  padding-bottom: 3px;
}

.engagement-day {
  border-radius: 1px;
  cursor: default;
  background: #EBEDF0;
}

.engagement-engage-1 {
  background: #c3f5e7;
}

.engagement-engage-25 {
  background: #88ecce;
}

.engagement-engage-50 {
  background: #4ce2b6;
}

.engagement-engage-75 {
  background: var(--rf-teal-500);
}

.engagement-engage-100 {
  background: #189771;
}

#cloneSummary {
  position: fixed;
  z-index: 100000;
  width: 400px;
  right: 20px;
  top: 20px;
}

#cloneSummaryContent {
  background: #6495ed;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#cloneSummaryDetails {
  max-height: 60vh;
  overflow: auto;
  width: 100%;
}

/* Ensure collapse animation doesn't affect layout */
#cloneSummaryDetails.collapse {
  width: 100%;
}

#cloneSummaryDetails.collapsing {
  width: 100%;
}

/* CSP-friendly progress bar styles */
#progressBarContainer {
  display: none;
}

#progressBarContainer.slim {
  height: 4px;
}

#progressBar {
  width: 0%;
}

#cloneProgressMessage,
#currentCloneCase,
#singleCloneCase {
  display: none;
}


#cloneSummaryContent div {
  background-color: var(--rf-surface);
  margin: 3px;
  padding: 2px;
}

.btn-connected {
  background-color: #aae5ee;
  border-color: var(--rf-cyan-500);
  box-shadow: none;
}

.btn-connected-hover {
  background-color: #b1eeaa !important;
  border-color: #1ab817 !important;
  box-shadow: none;
}

.btn-connected-same-hover {
  background-color: #b1eeaa !important;
  border-color: #1ab817 !important;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, #1ab817 6px, #b1eeaa 4px);
  box-shadow: none !important;
}

.scl2HeaderFlexSpacer {
  flex: 1;
  /* grow to fill space */
}

.scl2assessmentAndScore {
  display: block;
  font-size: 15px;
  text-align: left;
  float: left;
}

.scl2HeaderSpan {
  display: block;
  text-align: center;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.scl2AssessmentLine {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1em;
  margin-left: 0.5em;
}

.scl2Curved-border {
  /* border: 1px solid white;
  border-radius: 4px; */
}

.scl2ScoreText {
  font-style: italic;
  font-size: 1em;
  font-weight: 700;
  padding-left: 0.3em;
  padding-right: 0.3em;
  border-radius: 0.3em;
  border-color: white;
  border-width: 0.09em;
  border-style: solid;
  padding-left: 5px;
}

.scl2HeaderFlexContainer>div {
  min-width: 250px;
  margin-bottom: 1rem;
}

.text-white {
  color: var(--rf-on-brand);
}

.text-black {
  color: var(--rf-ink);
}


.text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-wrap {
  white-space: normal;
  word-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  white-space: normal;
}

.scl2ScoreColour {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.scl2ScoreColour .scoreColour {
  width: 30px;
  height: 25px;
}

.registerTableUnderline {
  border: 1px solid #000;
  margin: 12px;
}

.spinner.loading {
  position: relative;
  pointer-events: none;
  /* prevent double clicks */
  opacity: 0.7;
}

.spinner.loading::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }

  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

#CollaboraEditorModal .CollaboraEditorDialog {
  max-width: 97vw;
  height: 96vh;
  margin: 2vh auto;
  /* top/bottom 2vh, left/right auto = centered */
  padding-left: 0;
  padding-right: 0;
}


/* Make content stretch fully inside dialog */
#CollaboraEditorModal .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* no inner padding at all */
}

/* Body takes remaining space and has no own padding */
#CollaboraEditorModal .modal-body {
  flex: 1 1 auto;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

/* Frame holder fills body completely */
.CollaboraEditorFrame {
  width: 100%;
  height: 100%;
}

/* Make sure iframe has no inline-gap “ghost border” */
#office_frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Remove any internal border / radius that can show as a strip */
#CollaboraEditorModal .modal-content {
  border: 0;
  border-radius: .3rem;
  padding: 0;
}

/* No padding in the body at all */
#CollaboraEditorModal .modal-body {
  padding: 0 !important;
}

/* Ensure the holder has zero margin/padding */
#CollaboraEditorModal .CollaboraEditorFrame {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Ensure the iframe itself has no margin/padding and is block-level */
#CollaboraEditorModal #office_frame {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Your network is blocking the editor" notice, over the frame (documentation.js) */
#CollaboraEditorModal .modal-body {
  position: relative;
}

.editor-network-notice {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  padding: var(--rf-space-5) var(--rf-space-3);
  background: var(--rf-surface-muted);
  color: var(--rf-ink);
}

.editor-network-notice__panel {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--rf-space-4);
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-card-radius);
  box-shadow: var(--rf-card-shadow);
}

.editor-network-notice__title {
  margin-bottom: var(--rf-space-3);
}

.editor-network-notice__label {
  font-weight: var(--rf-font-weight-medium);
}

.editor-network-notice__details {
  font-family: var(--rf-font-mono);
  font-size: var(--rf-font-size-sm);
  resize: vertical;
}

.editor-network-notice__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--rf-space-2);
  margin-top: var(--rf-space-3);
}

#CollaboraEditorModal .modal-header {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

#CollaboraEditorModal .modal-header .modal-icon-btn {
  color: var(--rf-ink);
  opacity: 1;
  font-size: 1.5rem;
  /* icon size */
  line-height: 1;
  padding: 0 .5rem;
  background: none;
  border: none;
  box-shadow: none;
}

/* Hover effect (optional) */
#CollaboraEditorModal .modal-header .modal-icon-btn:hover {
  opacity: 0.7;
  cursor: pointer;
}

#CollaboraEditorModal .doc-size-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#CollaboraEditorModal .doc-size-label {
  font-size: 13px;
  line-height: 1;
  color: #111111 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
}

#CollaboraEditorModal .doc-size-text {
  font-size: 13px;
  line-height: 1;
  color: #111111 !important;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
}

#CollaboraEditorModal .doc-size-text--light {
  color: var(--rf-on-brand) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

#CollaboraEditorModal .doc-size-warning {
  font-size: 12px;
  line-height: 1;
  color: #c0392b !important;
  text-transform: none;
  text-align: center;
}

#CollaboraEditorModal .doc-size-container.doc-size-muted {
  opacity: 0.7;
}

#CollaboraEditorModal .doc-size-progress {
  width: 480px;
  max-width: 100%;
  height: 16px;
  background-color: var(--rf-surface-sunken);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Narrow windows: keep the fullscreen/close buttons on screen. The header is
   a flex row (title | size meter | buttons) whose children could not shrink —
   the 480px meter and the wrapping title pushed the button group past the
   right edge. Let the title truncate and the meter give way; the buttons
   never shrink and stay pinned to the right. */
#CollaboraEditorModal .modal-header {
  flex-wrap: nowrap;
}

#CollaboraEditorModal .modal-header .modal-title {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#CollaboraEditorModal .modal-header .doc-size-container {
  flex: 0 1 auto;
  min-width: 0;
}

#CollaboraEditorModal .modal-header .btn-group {
  /* Never shrinks — the header's space-between keeps it at the right edge,
     and the shrinkable title/meter above stop it being pushed off screen.
     (No margin-left:auto here: that ate the free space space-between uses
     to keep the size meter centred on wide windows.) */
  flex: 0 0 auto;
}

#CollaboraEditorModal .doc-size-bar {
  height: 100%;
  border-radius: 4px;
}

#CollaboraEditorModal .doc-size-text-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#CollaboraEditorModal .doc-size-bar--p0 {
  width: 0%;
}

#CollaboraEditorModal .doc-size-bar--p5 {
  width: 5%;
}

#CollaboraEditorModal .doc-size-bar--p10 {
  width: 10%;
}

#CollaboraEditorModal .doc-size-bar--p15 {
  width: 15%;
}

#CollaboraEditorModal .doc-size-bar--p20 {
  width: 20%;
}

#CollaboraEditorModal .doc-size-bar--p25 {
  width: 25%;
}

#CollaboraEditorModal .doc-size-bar--p30 {
  width: 30%;
}

#CollaboraEditorModal .doc-size-bar--p35 {
  width: 35%;
}

#CollaboraEditorModal .doc-size-bar--p40 {
  width: 40%;
}

#CollaboraEditorModal .doc-size-bar--p45 {
  width: 45%;
}

#CollaboraEditorModal .doc-size-bar--p50 {
  width: 50%;
}

#CollaboraEditorModal .doc-size-bar--p55 {
  width: 55%;
}

#CollaboraEditorModal .doc-size-bar--p60 {
  width: 60%;
}

#CollaboraEditorModal .doc-size-bar--p65 {
  width: 65%;
}

#CollaboraEditorModal .doc-size-bar--p70 {
  width: 70%;
}

#CollaboraEditorModal .doc-size-bar--p75 {
  width: 75%;
}

#CollaboraEditorModal .doc-size-bar--p80 {
  width: 80%;
}

#CollaboraEditorModal .doc-size-bar--p85 {
  width: 85%;
}

#CollaboraEditorModal .doc-size-bar--p90 {
  width: 90%;
}

#CollaboraEditorModal .doc-size-bar--p95 {
  width: 95%;
}

#CollaboraEditorModal .doc-size-bar--p100 {
  width: 100%;
}

#BowtieEditorModal .BowtieEditorDialog {
  box-sizing: border-box;
  max-width: 98vw;
  height: 96vh;
  margin: 2vh auto;
  padding-left: 0;
  padding-right: 0;
}

#BowtieEditorModal .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  border-radius: .5rem;
  overflow: hidden;
}

/* Header = natural height; body takes the rest */
#BowtieEditorModal .modal-body {
  flex: 1 1 auto;
  padding: 0 !important;
  overflow: hidden;
  /* iframe handles scrolling */
  min-height: 0;
}

/* Holder fills the body */
.BowtieEditorFrame {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Make sure iframe uses all space */
#BowtieEditorModal #bowtie_frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#RegisterEditorModal .RegisterEditorDialog {
  box-sizing: border-box;
  max-width: 98vw;
  height: 96vh;
  margin: 2vh auto;
  padding-left: 0;
  padding-right: 0;
}

#RegisterEditorModal .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  border-radius: .5rem;
  overflow: hidden;
}

#RegisterEditorModal .modal-body {
  flex: 1 1 auto;
  padding: 0 !important;
  overflow: hidden;
  min-height: 0;
}

.RegisterEditorFrame {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#RegisterEditorModal #register_frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.userIcon {
  margin-left: -0.2em;
}

.DocumentIcon .fa-stack {
  margin-left: 0.4em;
}

.pencilIcon {
  font-size: 1.25em;
  margin-left: 0.35em;
  margin-top: 0.15em;
}


.wb-expand-all-btn {
  cursor: pointer;
}

.wb-custom-link .wb-title {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}


.wb-strikethru .wb-title {
  color: red;
  font-style: italic;
  text-decoration: line-through;
}

/* Overwrite Wunderbaum */
div.wunderbaum span.wb-node i.wb-indent {
  font-size: 0;
}


/* Center align all icon elements (icons, expanders, indents) in wunderbaum */
div.wunderbaum span.wb-node i.wb-checkbox,
div.wunderbaum span.wb-node i.wb-expander,
div.wunderbaum span.wb-node i.wb-icon,
div.wunderbaum span.wb-node i.wb-indent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Ensure FontAwesome icons are properly centered */
div.wunderbaum span.wb-node i.wb-icon::before,
div.wunderbaum span.wb-node i.wb-expander::before {
  display: block;
  line-height: 1;
}

/* Fix row alignment to center all content vertically */
div.wunderbaum div.wb-row span.wb-node {
  display: inline-flex;
  align-items: center;
}

.wb-title {
  padding-left: 3px !important;
}

div.wunderbaum i.wb-node i.wb-expander:nth-child(1) {
  background: none !important;
}

div.wunderbaum i.wb-node i.wb-expander.wb-indent {
  padding-right: 5px !important;
}

div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col {
  /* background-color: var(--wb-active-cell-color-grayscale); */
}

/* Wunderbaum dynamic height - calculated by JavaScript based on content */

div.wunderbaum {
  height: unset !important;
}

#wunderbaum>div.wunderbaum {
  /* height: 100% !important; */
}

div.wunderbaum {
  scroll-behavior: smooth;
}

/* Ensure wb-busy background remains visible by making columns transparent */
div.wunderbaum div.wb-node-list div.wb-row.wb-busy span.wb-col {
  background-color: transparent !important;
}

/* Style for the prepDeleteConnection button when row is marked for deletion */
div.wunderbaum div.wb-node-list div.wb-row.wb-strikethru .prepDeleteConnection {
  color: var(--rf-on-brand);
  background-color: var(--rf-danger);
  border-color: var(--rf-danger);
}

/* Lock font size everywhere */
.bowtie-block,
.bowtie-block * {
  font-size: 1em;
  font-family: inherit;
  color: inherit;
}

/* Tidy spacing */
.bowtie-block {
  margin: 0.4em 0;
}

/* Blockquote tuning for LO */
blockquote.bowtie-indent {
  margin: 0.4em 0 0.4em 2.5em;
  /* LO respects this */
  padding: 0;
  border: none;
}

/* Assessment styling */
.bowtie-assessment-label {
  font-weight: 0;
  margin-right: 0.35em;
}

.assessment-scorebox {
  display: inline-block;
  border: 1px solid #000;
  /* Python can recolor later */
  padding: 1px 6px;
  margin: 0 3px;
  line-height: 1.2;
  vertical-align: baseline;
}






/*  Custom colours in connections Wunderbaum */
.wb-AssuranceFrameworkEntity .wb-indent {
  background-color: greenyellow;
}

.wb-KbiTemplateEntity .wb-indent {
  background-color: #e7ddcd;
}

.wb-Document .wb-indent {
  background-color: rgb(244, 246, 196);
}

.wb-BowTie .wb-indent {
  background-color: #ffdede;
}

.wb-SafetyCaseLevel2CounterArgument .wb-indent {
  background-color: var(--rf-counter-argument-chip);
}

.wb-row:not(.wb-AssuranceFrameworkEntity):not(.wb-KbiTemplateEntity):not(.wb-Document):not(.wb-BowTie):not(.wb-SafetyCaseLevel2CounterArgument) .wb-indent {
  background-color: aquamarine;
}

/* Masonry Layout */
.masonry-container {
  column-count: 1;
  column-gap: 1.5rem;
  width: 100%;
}

.masonry-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.5rem;
  vertical-align: top;
}

/* Responsive masonry columns */
@media (min-width: 576px) {
  .masonry-container {
    column-count: 1;
  }
}

@media (min-width: 768px) {
  .masonry-container {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .masonry-container {
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .masonry-container {
    column-count: 3;
  }
}

/* Ensure cards don't break across columns */
.masonry-item .card {
  display: block;
  width: 100%;
}

/* Navbar search styles */
.navbar-search-filter {
  width: auto;
  min-width: 120px;
}

.navbar-search-results-list {
  max-height: 60vh;
  overflow-y: auto;
}

/* Global waiting cursor for AJAX requests */
body.cursor-wait,
body.cursor-wait * {
  cursor: wait !important;
}

/* ========================================================================
   FIND & REPLACE
   ======================================================================== */

/* Match highlight in current text */
.fr-match-highlight {
  background-color: #fff3cd;
  padding: 1px 2px;
  border-radius: 2px;
}

/* Replacement highlight in preview */
.fr-replace-highlight {
  background-color: #d4edda;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Row with no permission - greyed out */
.fr-no-permission {
  opacity: 0.5;
}

/* Breadcrumb context line above matched text (arrow-separated) */
.fr-context-line {
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

/* Current text and preview columns */
.fr-current-text,
.fr-preview-text {
  font-size: 0.85rem;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type badge in results */
.fr-type-badge {
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Facet badge hover */
.fr-facet-badge {
  cursor: pointer;
  transition: opacity 0.2s;
  margin-bottom: 4px;
}

.fr-facet-badge:hover {
  opacity: 0.8;
}

/* Badge outline variant */
.badge-outline-primary {
  color: var(--rf-blue-500);
  border: 1px solid var(--rf-blue-500);
  background-color: transparent;
}

.badge-outline-primary:hover {
  background-color: var(--rf-blue-500);
  color: var(--rf-on-brand);
}

.fr-results-container {
  max-height: 400px;
  overflow-y: auto;
}

.fr-col-checkbox {
  width: 30px;
}

.fr-col-type {
  width: 100px;
}

.fr-col-match {
  width: 70px;
}

/* Results container scrollbar */
.fr-results-container::-webkit-scrollbar {
  width: 6px;
}

.fr-results-container::-webkit-scrollbar-thumb {
  background-color: var(--rf-border-strong);
  border-radius: 3px;
}

/* Find & Replace modal header */
#findAndReplaceModal .modal-header.bg-primary {
  border-bottom: 2px solid #0056b3;
}

/* Scope banner at the top of the Find & Replace modal */
.fr-scope-banner {
  margin-bottom: 1rem;
}

.fr-scope-path {
  font-size: 0.85rem;
  font-weight: 600;
}

.fr-scope-crumb {
  white-space: nowrap;
}

/* Per-type breakdown list in the replace confirmation dialog */
.fr-confirm-breakdown {
  list-style: disc;
}

/* Gap utility for flex containers */
.gap-1 {
  gap: 0.25rem;
}

/* Evidence Propagation Modal */
.ev-prop-col-checkbox {
  width: 40px;
}

.ev-prop-col-meta {
  width: 100px;
}

/* ========================================
   Dashboard Widgets System
   ======================================== */

/* Floating Action Button (FAB) */
.dashboard-fab {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--rf-blue-500);
  color: var(--rf-on-brand);
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  opacity: 0.45;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}

.dashboard-fab i {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dashboard-fab:hover {
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
}

.dashboard-fab:hover i {
  transform: rotate(90deg) scale(1.25);
}

.dashboard-fab:active {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(0, 123, 255, 0.4);
}

.dashboard-fab:focus {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3), 0 6px 20px rgba(0, 123, 255, 0.5);
}

/* Widget Grid Container */
.dashboard-widget-grid {
  min-height: 60px;
}

/* Drop zones. A column's zone fills the whole column height, however short
   its own stack is: the columns are flex children of the row (equal height),
   and the zone is the column's stretching flex child. So the entire side is a
   drop target, and a widget dropped below a column's last widget joins the
   end of that column — from the bottom of a tall left stack, "over to the
   right" lands where you mean, not on whichever left neighbour was nearest. */
.dashboard-widget-grid .dashboardfull > [class*="col-md-"] {
  display: flex;
  flex-direction: column;
}

.dashboard-widget-zone--column {
  flex: 1 1 auto;
  min-height: 24px;
}

body.dashboard-dragging .dashboard-widget-zone {
  min-height: 72px;
  outline: 2px dashed var(--rf-border-strong);
  outline-offset: 4px;
  border-radius: 6px;
}

.dashboard-widget-placeholder {
  min-height: 72px;
  margin-bottom: 20px;
  border: 2px dashed var(--rf-brand);
  border-radius: 6px;
  background: var(--rf-surface-muted);
  visibility: visible !important;
}

.dashboard-widget-slot.ui-sortable-helper .dashboard-widget {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.dashboard-widget-drag-handle {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--rf-ink-faint);
  cursor: grab;
  touch-action: none;
}

.dashboard-widget-drag-handle:hover {
  color: var(--rf-ink);
  background: var(--rf-surface-sunken);
}

body.dashboard-dragging .dashboard-widget-drag-handle {
  cursor: grabbing;
}

.dashboard-widget-width {
  background: none;
  border: none;
  color: var(--rf-ink-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}

.dashboard-widget-width:hover {
  color: var(--rf-brand);
  background: var(--rf-surface-sunken);
}

/* Individual Widget Card */
.dashboard-widget {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.dashboard-widget:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.dashboard-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rf-surface-sunken);
  background-color: var(--rf-surface-muted);
  border-radius: 6px 6px 0 0;
}

.dashboard-widget-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-widget-header h4 i {
  color: var(--rf-ink-muted);
}

.dashboard-widget-remove {
  background: none;
  border: none;
  color: var(--rf-ink-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
}

.dashboard-widget-remove:hover {
  color: var(--rf-danger);
  background-color: #fee;
}

.dashboard-widget-body {
  padding: 16px;
}

/* Level-count badges stay on one line (assessment filters widget) */
.dashboard-widget-counts {
  white-space: nowrap;
}

/* Empty state when no widgets are configured */
.dashboard-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--rf-ink-faint);
}

.dashboard-empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--rf-border-strong);
}

.dashboard-empty-state h5 {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--rf-gray-700);
}

.dashboard-empty-state p {
  font-size: 14px;
  max-width: 320px;
  margin: 0 auto;
}

/* Widget Picker Modal */
.widget-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-picker-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--rf-surface-sunken);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.widget-picker-item:hover {
  border-color: var(--rf-blue-500);
  background-color: #f0f7ff;
}

.widget-picker-item.widget-picker-selected {
  border-color: var(--rf-blue-500);
  background-color: #e7f1ff;
}

.widget-picker-item.widget-picker-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--rf-surface-sunken);
  background-color: var(--rf-surface-muted);
}

.widget-picker-item.widget-picker-disabled:hover {
  border-color: var(--rf-surface-sunken);
  background-color: var(--rf-surface-muted);
}

/* A folded family of widgets in the picker. The chevron is fa-angle-right rotated
   on aria-expanded: common.js rewrites a collapse trigger's chevron classes, so a
   fa-chevron-* here would end up pointing the wrong way. */
.widget-picker-group {
  margin-bottom: 10px;
}

.widget-picker-group__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--rf-surface-sunken);
  border-radius: 8px;
  background-color: var(--rf-surface-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.widget-picker-group__toggle:hover,
.widget-picker-group__toggle[aria-expanded="true"] {
  border-color: var(--rf-blue-500);
}

.widget-picker-group__toggle[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.widget-picker-group__chevron {
  margin-left: 12px;
  color: var(--rf-ink-muted);
  transition: transform 0.15s ease;
}

.widget-picker-group__toggle[aria-expanded="true"] .widget-picker-group__chevron {
  transform: rotate(90deg);
}

.widget-picker-group__body {
  padding: 10px 10px 0;
  border: 2px solid var(--rf-blue-500);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.widget-picker-icon {
  font-size: 28px;
  color: var(--rf-blue-500);
  width: 48px;
  text-align: center;
  flex-shrink: 0;
}

.widget-picker-info {
  flex: 1;
  margin-left: 12px;
}

.widget-picker-info h6,
.widget-picker-title {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 15px;
}

.widget-picker-info p,
.widget-picker-desc {
  margin: 0;
  font-size: 13px;
  color: var(--rf-ink-muted);
}

/* The folded group's toggle is a <button>, which may hold only phrasing
   content, so its title and description are spans made to stack like the
   h6 / p of a widget item. */
.widget-picker-title,
.widget-picker-desc {
  display: block;
}

.widget-picker-title {
  line-height: 1.2;
}

.widget-picker-check {
  width: 24px;
  height: 24px;
  border: 2px solid var(--rf-border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.widget-picker-check i {
  display: none;
  font-size: 12px;
}

.widget-picker-selected .widget-picker-check {
  border-color: var(--rf-blue-500);
  background-color: var(--rf-blue-500);
  color: var(--rf-on-brand);
}

.widget-picker-selected .widget-picker-check i {
  display: inline;
}

/* Position picker grid */
.widget-position-picker {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rf-surface-sunken);
  display: none;
}

.widget-position-picker h6 {
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--rf-gray-700);
}

.widget-position-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 300px;
}

.widget-position-cell {
  border: 2px solid var(--rf-border);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-ink-muted);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  background-color: var(--rf-surface-muted);
}

.widget-position-cell:hover {
  border-color: var(--rf-blue-500);
  background-color: #f0f7ff;
  color: var(--rf-blue-500);
}

.widget-position-cell.widget-position-selected {
  border-color: var(--rf-blue-500);
  background-color: var(--rf-blue-500);
  color: var(--rf-on-brand);
}

.widget-position-cell-full {
  grid-column: 1 / -1;
}

/* Already placed badge */
.widget-picker-badge {
  font-size: 11px;
  margin-left: 8px;
  vertical-align: middle;
}

.assessmentInput {
  border: solid;
  margin-left: 3px;
  margin-right: 3px;
}

/* Select2 Asset Category icon alignment */
.select2-results__option [class^="icon-"],
.select2-selection__choice [class^="icon-"] {
    vertical-align: middle;
    line-height: 1;
}

/* Tag system */
.sc-tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.sc-tags-display .badge-pill {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.7em;
}

.card-header:has(.sc-tags-header) {
  display: flex;
  align-items: center;
}

.card-header:has(.sc-tags-header) .card-tools {
  margin-left: auto;
}

.sc-tags-header {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-left: 8px;
}

.sc-tags-header .badge-pill {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.7em;
}

#scTags+.select2-container .select2-selection--multiple .select2-selection__choice {
  border: none;
  padding: 3px 0 0px 0;
  margin: 2px 4px 2px 0;
  background: transparent;
}

#scTags+.select2-container .select2-selection--multiple .select2-selection__choice .badge-pill {
  padding: 0.35em 0.65em;
}

.sc-tag-filter .select2-container {
  min-width: 200px;
}

.fr-tag-filter-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.navbar-tag-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.navbar-tag-badge {
  cursor: pointer;
  font-size: 0.75rem;
  transition: opacity 0.15s;
}

.navbar-tag-badge:hover {
  opacity: 0.8;
}

.badge-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--rf-ink-muted);
  color: var(--rf-ink-muted);
}

.action-btn {
  cursor: pointer;
}

.action-btn:hover {
  color: var(--rf-blue-500) !important;
}

/* Module Testing - Admin Toggle Pills */
.mt-admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rf-ink-muted);
  background-color: transparent;
  color: var(--rf-ink-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  font-size: 14px;
}

.mt-admin-pill:hover {
  border-color: var(--rf-success);
  color: var(--rf-success);
  background-color: rgba(40, 167, 69, 0.1);
}

.mt-admin-pill-active {
  border-color: var(--rf-success);
  background-color: var(--rf-success);
  color: var(--rf-on-brand);
}

.mt-admin-pill-active:hover {
  border-color: var(--rf-danger);
  background-color: var(--rf-danger);
  color: var(--rf-on-brand);
}

.mt-admin-pill-loading {
  opacity: 0.6;
  pointer-events: none;
}

.module-section .dataTables_wrapper {
  font-size: 0.9em;
  overflow-x: auto;
}

.mt-nav-link {
  font-weight: 600;
  text-decoration: underline;
}

#moduleTestingAccordion .card-header {
  cursor: pointer;
}

#orgFilter {
  width: 300px !important;
}

.template-org-banner i {
  font-size: 1.4em;
}

.splitDimensionMissing {
  background: repeating-linear-gradient(-45deg,
      var(--rf-surface-muted),
      var(--rf-surface-muted) 4px,
      #e0e0e0 4px,
      #e0e0e0 8px);
  text-align: center;
}

/* Activity log: compliance interval selector bar at the top of the
   modal. Lets users page through intervals while keeping the active
   interval clearly labelled. */
.activity-log-interval-bar-row {
  gap: 0.5rem;
}

.activity-log-interval-select {
  max-width: 320px;
}

.activity-log-interval-current-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: #cce5ff;
  color: #004085;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#ActivityLogModal .modal-body {
  padding-top: 0;
  padding-bottom: 0;
}

#ActivityLogTimelineModal .modal-dialog {
  max-width: 97vw;
  margin: 1.5vh auto 1.5vh auto;
}

#ActivityLogTimelineModal .modal-body {
  height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#ActivityLogTimelineModal #ActivityLogChartContainer {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
}

.activity-chart-date-input {
  width: 140px;
}

#activityChartFilterBtn {
  white-space: nowrap;
}

#ActivityLogModal #topPaginationControls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--rf-surface);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid var(--rf-border);
}

#ActivityLogModal .activity-log-controls-row > * {
  margin-right: 0.5rem;
}

#ActivityLogModal .activity-log-controls-row > *:last-child {
  margin-right: 0;
}

.activity-log-date-input {
  width: 140px;
}

/* Activity-log provenance badges: marks a row as written by an AI/MCP agent
   (purple robot) or a REST API token (grey plug), alongside the human causer. */
.activity-actor-badge {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  color: var(--rf-on-brand);
}

.activity-actor-badge > i {
  margin-right: 0.25rem;
}

.activity-actor-badge--mcp {
  background-color: #6f42c1;
}

.activity-actor-badge--api {
  background-color: var(--rf-ink-muted);
}

#ActivityLogModal #bottomPaginationControls {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--rf-surface);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rf-border);
}

#ActivityLogModal .modal-header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#ActivityLogTimelineModal .modal-header {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#ActivityLogTimelineModal .modal-title {
  font-size: 1rem;
  margin-bottom: 0;
}

.scoring-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--rf-border-strong);
}

/* Snapshot mode banner — appears at the very top of every page when
   the UseSnapshotDatabase middleware has detected snapshot-mode (session
   or per-request query). Bright + sticky so users always know they are
   not looking at live data. */
.snapshot-mode-banner {
    background: #fff3cd;
    border-bottom: 1px solid #ffe69c;
    color: #664d03;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1100; /* above adminlte navbar (1000) but below modals */
}

.snapshot-mode-banner-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.snapshot-mode-banner-inner i.fas {
    color: #b58a00;
}

.snapshot-mode-banner-note {
    color: var(--rf-ink-muted);
    font-style: italic;
    margin-left: 0.5rem;
}

.snapshot-mode-banner-exit {
    margin-left: auto;
    color: #664d03;
    text-decoration: underline;
    font-weight: 500;
}

.snapshot-mode-banner-exit:hover {
    color: var(--rf-ink);
    text-decoration: underline;
}

/* Search input group sizing for reports/sharedlinks toolbars. */
.reportSearchInputGroup {
    width: 220px;
}

/* Attach File modal — narrow checkbox column on result tables. */
.attachFileModal__checkboxCol {
    width: 40px;
}

/* File-slot rows: clicking the file-type name toggles the row checkbox.
   Cursor + hover give the affordance so users see it's interactive. */
.attach-file-slot-filetype {
    cursor: pointer;
    user-select: none;
}

.attach-file-slot-result:hover .attach-file-slot-filetype {
    color: var(--rf-blue-500);
}

/* File-slot attachment rows (in the upload zone, before save): allow the
   row body to shrink so a long file_type_name truncates rather than
   pushing badges out past the column. Without min-width:0 a flex child
   refuses to shrink below its content's intrinsic width. */
.fs-row-body {
    min-width: 0;
}

.fs-row-body .fs-row-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

/* The shared .uploadFileGrp rule caps height at 2.5rem (works for single-
   line upload rows). File-slot rows carry a title line + a scope line and
   may wrap badges on long titles, so they need to grow naturally — leaving
   the cap in place causes the next row's content to overlap the wrapped
   tail of the previous one. Same applies to RiskFlag (existing-file) and
   SharePoint picks, which carry a filename + source badge under the
   description input. */
.uploadFileGrp.file-slot-attachment-row,
.uploadFileGrp.file-slot-existing-row,
.uploadFileGrp.existing-file-attachment-row,
.uploadFileGrp.sharepoint-attachment-row {
    max-height: none;
    margin-bottom: 0.5rem;
}

/* Match Select2 sizing to form-control-sm inside the activity-subscription
   picker modal — without these overrides Select2 renders at its default
   height/font and looks bigger than the surrounding small selects. */
#activitySubscriptionPickerModal .select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.875rem;
}

#activitySubscriptionPickerModal .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}

#activitySubscriptionPickerModal .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem);
}

/* File Slot Allocation Stats widget */
.fsa-empty-state {
    padding: 18px 8px;
}

.fsa-empty-state i {
    color: var(--rf-border-strong);
}

.fsa-total {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--rf-surface-muted);
    border: 1px solid var(--rf-surface-sunken);
    border-radius: 6px;
}

/* Trio layout — three stacked dial cards side-by-side. Used when the
   widget tracks both safety cases AND organisations so the user can see
   each scope's allocation alongside the combined total. */
.fsa-total-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 6px;
    padding: 10px 12px;
    background: var(--rf-surface-muted);
    border: 1px solid var(--rf-surface-sunken);
    border-radius: 6px;
}

.fsa-total-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.fsa-total-card-heading {
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fsa-total-card-tally {
    font-size: 12px;
}

.fsa-total-caption {
    margin: 0 4px 14px;
    font-size: 12px;
    font-style: italic;
}

.fsa-total-text {
    flex: 1;
    min-width: 0;
}

.fsa-total-label {
    font-weight: 600;
    color: var(--rf-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-total-tally {
    font-size: 12px;
}

/* Dial — a percentage ring using conic-gradient. The --fsa-percent custom
   property is set inline by the widget JS. Falls back to a flat color block
   on browsers that don't support conic-gradient (very old). */
.fsa-dial {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rf-on-brand);
    font-weight: 700;
    font-size: 16px;
    background:
        radial-gradient(circle at center, var(--rf-surface) 0 56%, transparent 57%),
        conic-gradient(var(--fsa-color, var(--rf-ink-muted)) calc(var(--fsa-percent, 0) * 1%), var(--rf-surface-sunken) 0);
    position: relative;
}

.fsa-dial-value {
    color: var(--rf-gray-800);
}

.fsa-dial.fsa-tier-good { --fsa-color: var(--rf-success); }
.fsa-dial.fsa-tier-warn { --fsa-color: #f0ad4e; }
.fsa-dial.fsa-tier-bad  { --fsa-color: var(--rf-danger); }
.fsa-dial.fsa-tier-none { --fsa-color: var(--rf-ink-faint); }

.fsa-cases {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}

.fsa-case-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 2fr) auto;
    gap: 10px;
    align-items: center;
}

/* Editable variant — extra trailing column for the per-row remove button. */
.fsa-cases-editable .fsa-case-row {
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 2fr) auto auto;
}

.fsa-case-remove {
    background: none;
    border: none;
    color: var(--rf-ink-faint);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.fsa-case-remove:hover {
    color: var(--rf-danger);
    background-color: #fee;
}

.fsa-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.fsa-case-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.fsa-case-title {
    font-weight: 500;
    color: var(--rf-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-case-org {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-bar {
    height: 14px;
    background: var(--rf-surface-sunken);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.fsa-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.3s ease;
}

.fsa-bar-fill.fsa-tier-good { background: var(--rf-success); }
.fsa-bar-fill.fsa-tier-warn { background: #f0ad4e; }
.fsa-bar-fill.fsa-tier-bad  { background: var(--rf-danger); }
.fsa-bar-fill.fsa-tier-none { background: var(--rf-ink-faint); }

.fsa-bar-tally {
    font-size: 12px;
    color: var(--rf-gray-700);
    white-space: nowrap;
}

/* SweetAlert2 ships its container at z-index 1060, one step above a single
   Bootstrap modal — but the stacked-modal scheme in common.js raises each
   modal opened over another by 20 (1050, 1070, 1090 …), so an alert raised
   from a modal-over-a-modal (the snippet body editor over the document editor)
   painted BEHIND it and could only be read once the modal was closed. Sit the
   alert above any realistic stack. */
.swal2-container {
    z-index: 2000;
}

/* Componentised Document snippet edit-locking (concurrency control).
   A snippet held by another user shows a "Being edited by …" badge and its
   edit/delete buttons are muted. The buttons stay clickable on purpose so a
   click can explain why they're locked, rather than silently doing nothing. */
.ComponentisedDocumentLockBadge {
    font-weight: 500;
    vertical-align: middle;
}

.DocumentRowActions .ComponentisedDocumentLocked {
    opacity: 0.45;
    cursor: not-allowed;
}

.ComponentisedDocumentTakeControl {
    vertical-align: middle;
}

/* Rich-text edit locks (editLock.js): the banner above a held field, and who
   else has the record open. */
.rfEditLockBanner {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.rfEditLockBanner .rfEditLockTakeover {
    margin-left: auto;
    color: currentColor;
    border-color: currentColor;
    background: transparent;
}

.rfEditLockBanner .rfEditLockTakeover:hover,
.rfEditLockBanner .rfEditLockTakeover:focus {
    color: currentColor;
    background: rgba(0, 0, 0, 0.08);
}

.rfEditPresence {
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------
   DataTables sort-arrow glyphs -- charset-proof override.

   The vendored dataTables.bootstrap4.min.css sets the header sort indicators
   with literal UTF-8 arrow characters (U+2191 / U+2193) and ships no @charset
   rule. In any context that does not advertise a UTF-8 charset for that
   stylesheet -- e.g. the Help Editor demo-screenshot rendering used for the
   user guide -- those multi-byte characters decode as Latin-1 mojibake, which
   is why the sort arrows garble on report tables (Delivery Plan Task Report,
   etc.) in the generated screenshots while looking fine in the live app.

   Redeclaring the glyphs with CSS numeric escapes (pure ASCII, so identical
   under any encoding) renders the correct arrows regardless of the charset the
   browser assigns the stylesheet. !important keeps this ahead of the vendor
   rule irrespective of <link> order.
   --------------------------------------------------------------------------- */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    content: "\2191" !important; /* U+2191 UPWARDS ARROW */
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    content: "\2193" !important; /* U+2193 DOWNWARDS ARROW */
}

/* Page footers host dropups (e.g. the SCL2 Add menu) — the menu must render
   above the footer bounds, not clip inside them. */
.main-footer { overflow: visible; }
.main-footer .dropdown-menu { z-index: 1055; }

/* ...and the footer's own z-index:1000 is a stacking context, so that 1055 is
   only relative to the footer's children — the register's sticky x-scrollbar
   (position:fixed, z-index:1020) still paints over the open menu. Lift the
   whole footer past it, but ONLY while a menu is open, so the scrollbar stays
   on top (and draggable) the rest of the time. Stays under modals (1050+). */
.main-footer:has(.dropdown-menu.show) { z-index: 1030; }

/* Footer export menu: items sized as buttons, colour left to the dropdown. */
.register-export-menu .dropdown-item {
    width: auto;
    margin: .25rem .5rem;
    border-radius: .25rem;
}

/* Bullet list inside the compliance "some questions still need attention"
   dialog. A class rather than an inline style attribute (CSP), and in the
   global sheet so both the modal and the single-page view pick it up. */
.compliance-error-summary {
  text-align: left;
  margin-top: 0.5em;
}


/* ========================================
   Standardised labelled inputs
   (x-labelled_input_text / x-labelled_input_select)
   Label + control scale TOGETHER via clamp(); the label never wraps
   (ellipsis past 40% width) and the control is never blocked from
   shrinking — half-width windows compress instead of overflowing.
   ======================================== */
.labelled-input {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
.labelled-input + .labelled-input,
.labelled-input .labelled-input { margin-top: 0; }
.labelled-input-label {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--rf-surface-sunken);
    border: 1px solid var(--rf-border-strong);
    border-right: 0;
    border-radius: 0.2rem 0 0 0.2rem;
    color: var(--rf-gray-700);
    font-size: clamp(0.68rem, 0.45rem + 0.55vw, 0.875rem);
    padding: 0.25rem clamp(0.3rem, 0.1rem + 0.5vw, 0.75rem);
}
.labelled-input-control {
    flex: 1 1 auto;
    width: 1%;          /* input-group idiom: take the remaining space */
    min-width: 0;       /* and never refuse to shrink */
    height: auto;
    border-radius: 0 0.2rem 0.2rem 0;
    font-size: clamp(0.72rem, 0.5rem + 0.5vw, 0.875rem);
    padding: 0.25rem clamp(0.3rem, 0.15rem + 0.4vw, 0.6rem);
}
/* select2 replaces the select with its own container — keep it flexible
   (select2's inline width would otherwise fix the box and overflow). */
.labelled-input .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}
.labelled-input .select2-container .select2-selection--multiple,
.labelled-input .select2-container .select2-selection--single {
    border-radius: 0 0.2rem 0.2rem 0;
    font-size: clamp(0.72rem, 0.5rem + 0.5vw, 0.875rem);
}
/* Two labelled inputs sharing one row (e.g. a date range): equal halves,
   small gap, each still free to compress. */
.labelled-input-row {
    display: flex;
    gap: 0.35rem;
    min-width: 0;
}
.labelled-input-row .labelled-input { flex: 1 1 0; }
/* Searchable variable picker panel (editorChips.js): replaces the plain
   HugeRTE menu button dropdown, which has no native search. Anchored
   under the Variable toolbar button; fixed so it works from toolbar
   overflow popups; above Bootstrap modals (1050) and .tox popups. */
.rfVarPanel {
  position: fixed;
  z-index: 20000;
  width: 340px;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border-strong);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  padding: 0.4rem;
}

.rfVarPanel .rfVarPanelSearch {
  margin-bottom: 0.35rem;
}

.rfVarPanelList {
  max-height: 280px;
  overflow-y: auto;
}

.rfVarPanelItem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.rfVarPanelItem:hover,
.rfVarPanelItem:focus {
  background: var(--rf-surface-sunken);
}

.rfVarPanelEmpty {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

/* Insert-variable toolbar button (editorChips.js rfRegisterVariableButton).
   HugeRTE renders a text toolbar button as a bare label; on the single-button
   title editors that lone label read as a card header rather than an action.
   Outline it like the house neutral button (`outline-secondary`) — but drawn
   from the TOOLBAR'S ink, not the page tokens: oxide paints its chrome white
   with dark ink in every mode (the editor does not follow body.dark-mode), so
   a token-coloured button would sit as a dark pill on a white bar in dark
   mode. currentColor keeps it matching whatever skin the toolbar uses; the
   hover/focus fills stay oxide's own so it behaves like its neighbours. The
   "@" icon is the app-wide Variables glyph, registered by editorChips.js.
   Keyed on the aria-label (HugeRTE sets it from the button's tooltip), which
   also matches the copy rendered in a toolbar-overflow popup. The toolbar
   chrome renders in the main document (only the editable content sits in the
   iframe), so these rules reach it. */
.tox .tox-tbtn[aria-label="Insert a variable"] {
  width: auto;
  min-width: 0;
  height: 28px;
  margin: 3px 6px;
  padding: 0 8px 0 4px;
  border: 1px solid rgba(34, 47, 62, 0.35);
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 4px;
  font-weight: 400;
}

.tox .tox-tbtn[aria-label="Insert a variable"]:hover,
.tox .tox-tbtn[aria-label="Insert a variable"]:focus {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Push the variable button's toolbar group to the right edge, so it is always
   separated from the formatting controls — and sits consistently on the right
   in the title editors too, whose toolbar holds nothing else. Scoped via :has
   to our button's own group: a bare :last-child would also shove the final
   formatting group of unrelated editors across. Mirrors HugeRTE's native
   .tox-toolbar__group--pull-right; the variables group is always last, so it
   carries no inter-group separator border. */
.tox .tox-toolbar__primary > .tox-toolbar__group:has(.tox-tbtn[aria-label="Insert a variable"]),
.tox .tox-toolbar > .tox-toolbar__group:has(.tox-tbtn[aria-label="Insert a variable"]) {
  margin-left: auto;
}

/* Find & Replace: keep the Replace input's right corners rounded when the
   Insert-variable button (input-group-append) is hidden — the append stays in
   the DOM, so Bootstrap would otherwise square the input's right edge. */
#frReplaceInput.fr-replace-no-append {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

/* The Replace field is contenteditable so an inserted variable renders as a
   chip (its current value) rather than a raw {{var:key}} token. It must read as
   a single-line input. The id selector is deliberate: it beats the global
   `.modal-body [contenteditable=true]` comment-editor default (min-height:100px
   + inset border) that would otherwise make it a tall sunken box. Corner radius
   is left to Bootstrap's input-group logic + the fr-replace-no-append rule. */
#frReplaceInput.fr-replace-field {
  min-height: 0;
  height: calc(1.5em + 0.75rem + 2px);
  border-style: solid;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#frReplaceInput.fr-replace-field:empty::before {
  content: attr(data-placeholder);
  color: var(--rf-ink-muted);
  pointer-events: none;
}

/* Chip inside the Replace field — matches the .rf-var page/editor palette so
   variables look the same everywhere (this stylesheet is global; variable-
   chips.css is not loaded on every page the modal appears on). */
.fr-var-chip {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid #b6d4fe;
  border-radius: 0.25rem;
  background: #e7f1ff;
  color: #084298;
  font-size: 0.9em;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.fr-var-chip-empty {
  border-color: #ffe69c;
  background: #fff3cd;
  color: #664d03;
  font-style: italic;
}

/* The value-scan modal's title is a full sentence — dial the font down (from
   the h4 default of 1.5rem to ~halfway) so it stays on one line. */
#variableValueScanModal .modal-title {
  font-size: 1.275rem;
  line-height: 1.35;
}

/* ---- My Tasks dashboard widget ------------------------------------------ */
.my-tasks-table {
  margin-bottom: 0;
}

.my-tasks-table th,
.my-tasks-table td {
  vertical-align: middle;
}

.my-tasks-table th.my-tasks-col-role {
  text-align: center;
}

.my-tasks-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.my-tasks-total {
  font-weight: 600;
  min-width: 2ch;
  text-align: right;
}

.my-tasks-total--none {
  color: var(--rf-ink-faint);
  font-weight: 400;
}

.my-tasks-cell .badge {
  font-weight: 600;
}

.my-tasks-cell a.badge:hover {
  filter: brightness(0.92);
}

.my-tasks-legend {
  margin-top: 10px;
  font-size: 12px;
  color: var(--rf-ink-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Organisation Overview dashboard widget ------------------------------ */
.org-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.org-overview-pies,
.org-overview-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.org-overview-section {
  min-width: 0;
  padding: 10px 12px;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 6px;
}

.org-overview-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-ink-muted);
}

.org-overview-pie-tool {
  color: var(--rf-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-overview-message {
  padding: 6px 0;
  font-size: 13px;
}

.org-overview-note {
  margin-top: 6px;
  font-size: 12px;
}

/* Assessment pies: the donut beside its legend, which is also its table. */
.org-overview-pie-subtitle {
  margin: -4px 0 6px;
  font-size: 12px;
}

.org-overview-pie-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.org-overview-pie-chart {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
}

.org-overview-legend {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 12px;
  border-collapse: collapse;
}

.org-overview-legend td {
  padding: 2px 4px;
  vertical-align: middle;
}

.org-overview-legend-swatch-cell {
  width: 18px;
}

.org-overview-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.org-overview-legend-label {
  overflow-wrap: anywhere;
}

/* A slice's label opens it in Analysis; it reads as a label until hovered. */
.org-overview-legend-label a {
  color: var(--rf-ink);
}

.org-overview-legend-label a:hover,
.org-overview-legend-label a:focus {
  color: var(--rf-ink);
  text-decoration: underline;
}

.org-overview-legend-count,
.org-overview-legend-share {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.org-overview-legend-count {
  font-weight: 600;
}

.org-overview-legend-zero,
.org-overview-legend-zero .org-overview-legend-count {
  color: var(--rf-ink-faint);
  font-weight: 400;
}

.org-overview-pie-footer {
  margin-top: 6px;
  text-align: right;
}

/* Task counts: stat tiles; status is the edge colour and icon, never the number. */
.org-overview-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.org-overview-kpi {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  color: var(--rf-ink);
  border: 1px solid var(--rf-border);
  border-left: 3px solid var(--rf-border-strong);
  border-radius: 6px;
}

.org-overview-kpi:hover,
.org-overview-kpi:focus {
  color: var(--rf-ink);
  text-decoration: none;
  background: var(--rf-surface-muted);
}

/* A count with nowhere to open: no hover fill promising a click. */
.org-overview-kpi--static:hover {
  background: none;
}

.org-overview-kpi--warning {
  border-left-color: var(--rf-warning);
}

.org-overview-kpi--warning i {
  color: var(--rf-warning-ink);
}

.org-overview-kpi--danger {
  border-left-color: var(--rf-danger);
}

.org-overview-kpi--danger i {
  color: var(--rf-danger);
}

.org-overview-kpi-value,
.org-overview-coverage-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.org-overview-kpi-label,
.org-overview-coverage-label {
  font-size: 12px;
  color: var(--rf-ink-muted);
}

.org-overview-kpi-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-overview-kpi-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.org-overview-kpi-icon {
  font-size: 13px;
}

/* A narrow section (a half-width widget) stacks the tiles as rows, number
   beside label, rather than cutting the labels short. */
.org-overview-section {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .org-overview-kpis {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .org-overview-kpi {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .org-overview-kpi-value {
    justify-content: flex-start;
    min-width: 4.5ch;
  }
}

/* Coverage: headline percentage over a meter on a sunken track. */
.org-overview-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.org-overview-meter {
  height: 8px;
  overflow: hidden;
  background: var(--rf-surface-sunken);
  border-radius: 4px;
}

.org-overview-meter-fill {
  height: 100%;
  background: var(--rf-ink-faint);
  border-radius: 4px;
}

.org-overview-meter-fill.org-overview-tier-good { background: var(--rf-success); }
.org-overview-meter-fill.org-overview-tier-warn { background: var(--rf-warning); }
.org-overview-meter-fill.org-overview-tier-bad  { background: var(--rf-danger); }
.org-overview-meter-fill.org-overview-tier-none { background: var(--rf-ink-faint); }

.org-overview-frameworks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.org-overview-framework .org-overview-meter {
  height: 5px;
}

.org-overview-framework-text {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.org-overview-framework-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-overview-framework-share {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.org-overview-sparkline {
  width: 100%;
  height: 56px;
}

/* Configure dialog: one bordered row per assessment chart. */
.org-overview-dialog-legend {
  font-weight: 600;
}

.org-overview-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-overview-chart-row {
  padding: 8px 10px;
  background: var(--rf-surface-muted);
  border: 1px solid var(--rf-border);
  border-radius: 6px;
}

.org-overview-chart-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-overview-chart-row-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 13px;
}

.org-overview-chart-option-label {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-ink-muted);
}

.org-overview-chart-step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.org-overview-chart-step select {
  width: auto;
}

/* ---- My Cases dashboard widget ------------------------------------------ */
.my-cases-widget .dashboard-widget-header {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.my-cases-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 380px;
}

.my-cases-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1040;
  margin-top: 4px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.my-cases-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--rf-surface-sunken);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--rf-ink);
}

.my-cases-search__item:last-child {
  border-bottom: 0;
}

.my-cases-search__item:hover,
.my-cases-search__item--active {
  background: var(--rf-surface-muted);
}

.my-cases-search__type {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rf-ink-muted);
}

.my-cases-search__text {
  flex: 1 1 auto;
  min-width: 0;
}

.my-cases-search__title {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-cases-search__case {
  font-size: 12px;
  color: var(--rf-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-cases-search__open {
  flex: 0 0 auto;
  color: var(--rf-ink-muted);
}

.my-cases-search__open:hover {
  color: var(--rf-brand);
}

.my-cases-search__empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--rf-ink-muted);
}

.my-cases-row--focus > td {
  background: var(--rf-surface-muted);
  box-shadow: inset 3px 0 0 var(--rf-brand);
}

.my-cases-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-cases-actions .my-cases-scope {
  width: auto;
}

.my-cases-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--rf-ink-muted);
}

.my-cases-summary__total {
  font-weight: 600;
  color: var(--rf-ink);
}

.my-cases-table {
  margin-bottom: 0;
}

.my-cases-table td,
.my-cases-table th {
  vertical-align: middle;
}

.my-cases-table .my-cases-case-title {
  font-weight: 600;
}

.my-cases-title-cell .caseImageThumb {
  margin-right: 8px;
  vertical-align: middle;
}

.my-cases-table .my-cases-ref {
  margin-left: 6px;
  font-size: 12px;
  color: var(--rf-ink-muted);
}

.my-cases-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.my-cases-chips .badge {
  font-weight: 500;
}

.my-cases-expand {
  padding: 2px 6px;
}

.my-cases-expand .fa-angle-right {
  transition: transform 0.15s ease;
}

.my-cases-expand[aria-expanded="true"] .fa-angle-right {
  transform: rotate(90deg);
}

.my-cases-details-row td {
  background: var(--rf-surface-muted);
}

.my-cases-involvement {
  list-style: none;
  padding: 0;
  margin: 0;
}

.my-cases-involvement > li {
  margin: 4px 0;
}

.my-cases-involvement__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rf-ink-muted);
}

.my-cases-involvement ul {
  list-style: none;
  padding-left: 10px;
  margin: 2px 0 0;
}

.my-cases-involvement ul li {
  font-size: 13px;
  line-height: 1.5;
}

.my-cases-involvement__note {
  color: var(--rf-ink-muted);
  font-size: 12px;
}

.my-cases-map {
  height: 520px;
  border: 1px solid var(--rf-border);
  border-radius: 6px;
  overflow: hidden;
}

/* Shorter than the map with room for the pin above it; scrolls past that. */
.my-cases-popup {
  min-width: 260px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.my-cases-popup__case {
  padding: 6px 0;
  border-top: 1px solid var(--rf-border);
}

.my-cases-popup__case:first-child {
  padding-top: 0;
  border-top: 0;
}

.my-cases-popup__org {
  font-size: 11px;
  color: var(--rf-ink-muted);
}

/* Monte Carlo distribution previews (monteCarloDistribution.js): the hover popover
   on bow tie nodes and register cells, and the summary it shares with the register
   presentation card (components/MonteCarlo/distributionSummary). */
.mcDistributionPopover {
    position: fixed;
    z-index: 3000;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--rf-space-2);
    background: var(--rf-surface);
    color: var(--rf-ink);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-lg);
    box-shadow: var(--rf-shadow-lg);
    pointer-events: none;
}
.mcDistributionPopover__loading {
    color: var(--rf-ink-muted);
    font-size: 12px;
    padding: 24px 0;
    text-align: center;
}
.mcDistributionChart {
    display: block;
    width: 100%;
    height: 80px;
}
.mcDistributionSummary__title {
    font-weight: 700;
    font-size: 13px;
}
.mcDistributionSummary__units {
    color: var(--rf-ink-muted);
    font-weight: 400;
}
.mcDistributionSummary__labelRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.mcDistributionSummary__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--rf-ink-muted);
    font-size: 12px;
}
.mcDistributionZoom {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}
/* A chart that zooms is dragged to move along it; vertical touch scrolling still scrolls the page. */
.mcDistributionChart--zoomable {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.mcDistributionChart--panning {
    cursor: grabbing;
}
.mcDistributionSummary__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 8px 0 0;
}
.mcDistributionSummary__stat {
    background: var(--rf-surface-muted);
    border-radius: var(--rf-radius);
    padding: 4px 6px;
    text-align: center;
}
.mcDistributionSummary__stat dt {
    color: var(--rf-ink-muted);
    font-size: 11px;
    font-weight: 600;
}
.mcDistributionSummary__stat dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mcDistributionSummary--compact .mcDistributionSummary__stats {
    grid-template-columns: repeat(2, 1fr);
}
.mcDistributionSummary__justification {
    margin-top: 8px;
    font-size: 12px;
}
.mcDistributionSummary__justificationLabel {
    color: var(--rf-ink-muted);
    font-weight: 600;
}
.mcDistributionSummary__justificationText {
    white-space: pre-line;
}
/* A register cell whose distribution previews on hover. */
.mcPreviewTrigger .mcRegisterLabel {
    cursor: help;
    text-decoration: underline dotted var(--rf-border-strong);
    text-underline-offset: 3px;
}

/* A Monte Carlo run's example trial (MonteCarlo/partials/exemplar). */
.mcExample__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mcExample__title {
    margin: 0;
}
.mcExample__summary {
    margin-bottom: 2px;
}
.mcExample__total {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mcExample__table td,
.mcExample__table th {
    font-variant-numeric: tabular-nums;
}
.mcExample__row--notCounted td {
    color: var(--rf-ink-muted);
}
.mcExample__draws summary {
    cursor: pointer;
    color: var(--rf-ink-muted);
    font-size: 12px;
}
.mcExample__drawList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px 16px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.mcExample__drawList li {
    display: flex;
    gap: 8px;
}
.mcExample__drawNo {
    min-width: 1.75em;
    text-align: right;
    color: var(--rf-ink);
}
.mcExample__draw--missed span {
    color: var(--rf-ink-faint);
}


/* The AI Assistant menu entry (MenuBuilder): a soft band of the active-item colour
   (--rf-brand-secondary, as an active submenu link fills) glides across the whole row,
   icon and all, continually, to draw the eye. A pseudo-element over the link, so the
   text keeps its own colour and clicks pass through. Not on the page it opens (the row
   is filled with that colour there already), and off for anyone who asks for reduced
   motion. */
.nav-link.nav-link-shimmer,
.dropdown-item.nav-link-shimmer,
.btn.nav-link-shimmer {
    position: relative;
    overflow: hidden;
}

.nav-link.nav-link-shimmer::after,
.dropdown-item.nav-link-shimmer::after,
.btn.nav-link-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, var(--rf-brand-secondary) 30%, transparent) 50%, transparent 75%);
    transform: translateX(-100%);
    animation: rf-nav-link-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.nav-link.nav-link-shimmer.active::after,
.dropdown-item.nav-link-shimmer.active::after,
.btn.nav-link-shimmer[aria-expanded="true"]::after {
    display: none;
}

@keyframes rf-nav-link-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-link.nav-link-shimmer::after,
    .dropdown-item.nav-link-shimmer::after,
    .btn.nav-link-shimmer::after {
        display: none;
    }
}