@phone: ~"only screen and (max-width: 479px)";
@tablet: ~"only screen and (min-width: 744px)";
@tablet-potrait: ~"only screen and (min-width: 744px) and (orientation: portrait)";
html,
body {
  .NoPadding();
  .NoMargin();
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
  color: @foreground;
  .StandardFont();
  -ms-overflow-y: hidden;
}

body {
  .StandardFontSize();
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}

.FlexBoxContext {
  // https://css-tricks.com/using-flexbox/#article-header-id-1
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}

.CheckBox {
  height: 32px;
  width: 80px;
  float: right;
}

.CheckBox.Deployment.unchecked {
  //Used only in initial deployment screen and image wont be themed
  background-image: url("../graphics/Btn_Switch-off.svg");
  background-repeat: no-repeat;
}

.CheckBox.Deployment.checked {
  //Used only in initial deployment screen and image wont be themed
  background-image: url("../graphics/Btn_Switch-on.svg");
  background-repeat: no-repeat;
}

.DisabledControl {
  opacity: 0.65;
}
.DisabledInputAreaControl {
  opacity: 0.8;
}

input {
  .StandardFont();
  .StandardFontSize();
  .InputControl();
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
input:disabled {
  -webkit-opacity: 0.65; /* Override iOS opacity change affecting text & background color */
  opacity: 0.65;
}

// InputArea border styling - also applies to stepper numeric input
input.InputArea.InputAreaNumeric,
input.InputArea.InputAreaText {
  margin: 2px 4px;
}
input.InputArea.InputAreaNumeric,
input.InputArea.InputAreaText,
input.Stepper.InputAreaNumeric {
  border-width: 1px;
  border-style: solid;
  border-color: var(--inputarea-sec-border-color) var(--inputarea-sec-border-color) var(--inputarea-border-color) var(--inputarea-sec-border-color);
}
input.InputArea.InputAreaNumericHighLight,
input.InputArea.InputAreaTextHighLight,
input.Stepper.InputAreaNumericHighLight {
  //NOTE: DO NOT INCREASE THE BORDER WIDTH. Increasing the border width causes the list jumping on selection of stepper item when its width is set to less than 9em
  border-width: 1px;
  border-style: solid;
  border-color: var(--inputarea-sec-border-focus-color) var(--inputarea-sec-border-focus-color) var(--inputarea-focus-color) var(--inputarea-sec-border-focus-color);
}
input.InputAreaNumeric.DisabledControl,
input.InputAreaText.DisabledControl {
  border: none;
}

textarea:disabled {
  -webkit-opacity: 0.8; /* Override iOS opacity change affecting text & background color */
  opacity: 0.8;
}
.PositionControlFlyout {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  .FlyOutSimpleRow
  {
    padding: 0.4em;
    margin-top: -1px;
    overflow: hidden;
    font-weight: bold;
    border-bottom: 0;
    img{
      width: 1.5em;
      height: 1.5em;
      margin: 0.5em;
      vertical-align: middle;
    }
  }
}
.PositionControl {
  white-space: nowrap;
  font-size:14px;
  vertical-align: middle;
  padding-right: 4px;
  @media @phone {
    padding-right: 10px;
  }
  border-bottom-style: solid;
  border-bottom-width: 1px;
  .PositionClearButton {
    padding: 0px;
    background-image: var(--inputarea-clear-img);
    position: relative;
    right: 1em;
    width: 0.925em;
    height: 0.925em;
    margin-bottom: .4em;
    background-position: center;
    border: none;
  }
  .PositionInput{
    width: 100%;
    height: 2.5em;
    border: none;
    padding-bottom: 0px;
    @media @phone {
      padding-left: 8px;
    }
  }
  .SvgImage {
		width: 1em;
		height: 1em;
    margin-top: .8em;
	}
}

// Reusable SVG icon mask for dynamic coloring
.SvgIconMask {
  width: 1.5em;
  height: 1.5em;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

  .Stepper {
  input {
    min-width: 2.5em;
    background-color: rgba(0, 0, 0, 0);
    text-align: right;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .InputAreaNumericHighLight {
    background-color: var(--inputarea-highlight-background-color) !important;
    font-weight: bold;
  }
  img {
    vertical-align: middle;
  }
  .Selected & {
    color: @prime-fg;
  }
  white-space: nowrap;
  width: 100%;
  //padding: 14px 8px 6px 6px;
  padding-right: 8px;
  vertical-align: middle;

  //start-of-long press events disabling: i.e; copy/share/select bubble popup
  /* https://www.webfx.com/blog/web-design/disable-text-selection/ */
  user-select: none !important;
  -moz-user-select: none !important; /* Firefox */
  -ms-user-select: none !important; /* Internet Explorer */
  -khtml-user-select: none !important; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none !important; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none !important; /* Disable Android and iOS callouts*/
  //end-of-long press events disabling
}
  .Stepper.Disabled input {
    border: none;
  }

.ListColumn.itemRight {
  .Stepper {
    margin-right: -7px;
    img {
      margin-left: 7px;
    }
  }
}

.StepperPhone {
  .Stepper();
}
.Label {
  .Monospace();
  padding: 1.2em;
}

.AdvancedSearchControl {
  height: auto;
  overflow-y: auto;
}

// --- AdvancedSearchPanel Lumina ---
.AdvancedSearchPanel--lumina {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--slds-g-color-surface-container-1);

  // Toolbar grid wrapper. Keyed primarily on scenario × orientation (@media + .fw-portrait). A
  // container-query fallback (@container max-width: 420px, below) additionally collapses the toolbar
  // when the control itself is narrow — e.g. a docked/split pane in landscape where the viewport is
  // wide but the control is not. inline-size establishes that container context.
  .AdvancedSearchPanel__subHeaderContainer {
    flex-shrink: 0;
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    container-type: inline-size;
  }

  // Collapse Clear All + Set/Delete to a circular icon. @w = button height so it's a circle: 40px tablet, 32px phone.
  .AdvSearchCollapsePills(@w: var(--slds-g-spacing-7)) {
    .AdvancedSearchPanel__clearAllBtn.ImageButton--lumina,
    .AdvancedSearchPanel__setDefaultBtn.ImageButton--lumina {
      .ImageButton__label { display: none; }
      &:not(.ImageButton--icon-only) { width: @w; padding: 0; }
    }
  }

  // Collapsed variant for the "Apply Filter in subHeader" path (portrait tablet & phone): pills as
  // icons on row 1 left, Apply right; toggle drops to row 2.
  .AdvSearchWithApplyBtnCollapsed(@w: var(--slds-g-spacing-7)) {
    .AdvSearchCollapsePills(@w);
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "clear setfav spacer apply";
    &.AdvancedSearchPanel__subHeader--hasToggle {
      // Scope here (--hasToggle = 5 classes) to beat the global justify-self:end on phone (no .fw-portrait to lift specificity).
      .AdvancedSearchPanel__applyFavToggle { justify-self: start; }
      // Toggle spans the 1fr track so its label width is absorbed there — pills stay icon-width, no
      // shift on save. Columns stay auto auto 1fr auto (from above); only the area map changes here.
      grid-template-areas:
        "clear  setfav spacer apply"
        "toggle toggle toggle .";
    }
  }

  // Base grid + area names for the children. Scenario is keyed in CSS via :has(.applyBtnWrap > *) —
  // child = Scenario 1 (control), empty = Scenario 2 (flyout); a scenario block always overrides this.
  .AdvancedSearchPanel__subHeader {
    display: grid;
    align-items: center;
    column-gap: var(--slds-g-spacing-4);
    row-gap: var(--slds-g-spacing-3);
    box-sizing: border-box;
    padding: var(--slds-g-spacing-3) var(--slds-g-spacing-5);
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "clear setfav spacer apply";

    @media @phone {
      padding: var(--slds-g-spacing-3);
    }

    // justify-self:start so each pill hugs its content — grid's default `stretch` would widen
    // Clear All to the longer label when the two pills share a column in the two-row tier.
    .AdvancedSearchPanel__clearAllBtn { grid-area: clear; justify-self: start; }
    .AdvancedSearchPanel__setDefaultBtn { grid-area: setfav; justify-self: start; }
    .AdvancedSearchPanel__applyBtnWrap {
      grid-area: apply;
      justify-self: end;
      display: flex;
      align-items: center;

      // Scenario 2 leaves this empty; drop it so it doesn't auto-place into a phantom track.
      &:empty { display: none; }
    }

    // Base left-aligns the toggle; scenario blocks pin it per layout.
    .AdvancedSearchPanel__applyFavToggle {
      grid-area: toggle;
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 8px;
      width: auto;

      .AdvancedSearchPanel__applyFavLabel {
        color: var(--slds-g-color-on-surface-2);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: var(--slds-g-font-family);
        font-size: var(--slds-g-font-scale-2);
        font-style: normal;
        font-weight: var(--slds-g-font-weight-4);
        line-height: 18px;
        letter-spacing: -0.196px;
        // Keep the label inline with the toggle; nowrap stops the flex child wrapping to two lines.
        white-space: nowrap;
      }
    }
  }

  // Apply Filter present in subHeader (control renders it inline). Path keyed via :has() —
  // :has()/:not(:has()) has been baseline in this bundle since Feb 2026 (card/userWelcomeV2/etc.).
  .AdvancedSearchPanel__subHeader:has(.AdvancedSearchPanel__applyBtnWrap > *) {
    // Landscape: Clear+Apply on row 1, Set/Delete+toggle on row 2. Row 2 is always reserved (not gated
    // on --hasToggle) so Set/Delete doesn't jump down when the favourite is saved.
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "clear  spacer apply"
      "setfav spacer toggle";
    &.AdvancedSearchPanel__subHeader--hasToggle {
      .AdvancedSearchPanel__applyFavToggle { justify-self: end; }
    }

    // Narrow control fallback: collapse to the portrait toolbar whenever the control itself is
    // ≤420px, independent of viewport orientation (e.g. a docked/split pane in landscape). Placed
    // BEFORE the @media rules on purpose: all three match the same selector at equal specificity, so
    // source order decides — this lets the phone rule below win its 32px sizing where both match.
    @container (max-width: 420px) {
      .AdvSearchWithApplyBtnCollapsed();
    }

    // Portrait: collapse left pills to icons (40px tablet, 32px phone); Apply keeps its label.
    @media @tablet {
      .fw-portrait & { .AdvSearchWithApplyBtnCollapsed(); }
    }
    @media @phone {
      .AdvSearchWithApplyBtnCollapsed(var(--slds-g-sizing-9)); // 32px circle
    }
  }

  // Apply Filter on flyout chrome (absent from subHeader). Clear+Set/Delete and the toggle stay on
  // one row in every orientation; an unrendered toggle just leaves its cell empty.
  .AdvancedSearchPanel__subHeader:not(:has(.AdvancedSearchPanel__applyBtnWrap > *)) {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "clear setfav toggle";
    .AdvancedSearchPanel__applyFavToggle { justify-self: end; }

    // Narrow control fallback: collapse pills to icons whenever the control itself is ≤420px,
    // independent of viewport orientation (e.g. a docked/split pane in landscape). Placed BEFORE the
    // @media rules so the phone rule below wins its 32px sizing where both match (equal specificity,
    // source order decides).
    @container (max-width: 420px) {
      .AdvSearchCollapsePills();
    }

    // Portrait: collapse left pills to icons (40px tablet, 32px phone).
    @media @phone {
      .AdvSearchCollapsePills(var(--slds-g-sizing-9)); // 32px circle
    }
    @media @tablet {
      .fw-portrait & { .AdvSearchCollapsePills(); }
    }
  }

  .AdvancedSearchPanel__scrollableWrapper {
    position: relative;
    overflow-x: hidden;
    height: 100%;
    flex: 1;
  }

  .GroupedElementsArea {
    padding: var(--slds-g-spacing-4) var(--slds-g-spacing-5) var(--slds-g-spacing-5) var(--slds-g-spacing-5);
    box-sizing: border-box;
    background: var(--slds-g-color-surface-container-1);

    @media @phone {
      padding: var(--slds-g-spacing-3);
    }
  }

  .GroupedElement {
    display: flex;
    flex-direction: column;
    gap: var(--slds-g-spacing-4);
  }

  // Distance renders a lone Stepper in its Merger row (its operator slot is null), so Merger's
  // single-visible-field rule stretches the wrapper to the full row width. That is correct for a
  // Position dropdown (which should span the card) but wrong for the Stepper, which inherits
  // width:100% from the shared FormField mixin and so blows up to the whole card. Size it to its
  // content and left-align instead, so it reads as a compact control like the toggle rows below it.
  // Scoped to a solo Stepper (:only-child) so Number-type rows — which keep their operator sibling,
  // hence two children — are untouched.
  .Merger__row--lumina > div:only-child > .Stepper--lumina {
    width: fit-content;
  }

}

.GroupElement,
.GroupedElementsArea {
  width: 100%;
  .FlexContainer();
  .GroupElementHeader {
    .Label();
    font-size: 80%;
  }
  label {
    @media @phone {
      white-space: nowrap;
    }
  }
}

.GroupElement {
  flex-shrink: 0;
}
/*.GroupElement .InputArea:first-child {
  border-top: 1px solid @bg-dark-tone
}*/

.MergerPhone {
  .Merger();
  flex-direction: column;
  -webkit-flex-direction: column;
}

.InputArea,
.Merger {
  label {
    font-family: "Medium";
    font-size: 12px;
    padding: 16px 16px 8px 6px;
    .alignRight();
    flex: 0 0 8em;
    -webkit-flex: 0 0 8em;
  }
}

.InputAreaPhone {
  .InputArea();
  flex-direction: column;
  -webkit-flex-direction: column;
  input,
  .CheckBoxContainer,
  .SelectionBox,
  span {
    padding: 6px 12px 6px 12px;
  }
  input:focus {
    padding-top: 6px;
    padding-right: 20px;
  }
  input.Lookup {
    background-position: right 10px top 0.6em;
  }
}

.InputAreaPhone,
.MergerPhone {
  label {
    padding: 16px 12px 6px 12px;
    .alignLeft();
    flex: none;
    -webkit-flex: none;
  }
}

.InputArea {
  font-family: "Regular";
  color: var(--inputarea-font-color);
  font-size: 14px;
  position: relative;
  .FlexContainerHorizontal();

  .CheckBoxContainer{
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    outline: none;
    padding: 14px 8px 6px 6px;
    border-radius: 0px;
    margin: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .StretchedFlexItem();
	.selectedBoxItem {
	@media @tablet-potrait {
	   width: 5.5em;
	}
	}

  }
  span,
  .SelectionBox {
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    outline: none;
    padding: 14px 8px 6px 6px;
    border-radius: 0px;
    margin: 0;
    .StretchedFlexItem();
  }
  input {
    border: none;
    border-bottom: 1px solid var(--inputarea-border-color);
    outline: none;
    padding: 14px 8px 6px 6px;
    border-radius: 0px;
    margin: 0;
    .StretchedFlexItem();
  }
  span {
    border-bottom: 0px;
  }
  .DisabledControl {
    opacity: 0.65;
    border-bottom: 0;
  }
  .InputAreaNumeric {
    text-align: right;
  }

  .InputAreaNumericHighLight {
    font-weight: bold;
  }
  input:focus {
    font-family: "Regular";
    font-size: 14px;
    border-bottom: 2px solid var(--inputarea-focus-color);
    color: var(--inputarea-focus-color);
    padding-top: 13px;
    //padding-right:20px;
  }
  input.Lookup {
    background-position: right 10px top 1em;
    background-size: 0.5em;
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
  }
  input::placeholder {
    color: var(--inputarea-placeholder-color);
  }


}

.CheckBoxArea {
  .FlexContainerHorizontal();

  .CheckBoxContainer {
    padding: 0.5em;
    .StretchedFlexItem();
  }
}

.SelectionArea {
  .FlexContainerHorizontal();
  display: inline-block;
  float: right;

  .SelectionBox {
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    outline: none;
    padding: 0.5em;
    min-height: 1em;
    min-width: 5em;
    .StretchedFlexItem();
  }

  span {
    float: left;
    padding-left: 0.5em;
    padding-right: 2em;
    .StretchedFlexItem();
  }

  .black {
    color: black;
  }
}

.SearchField {
  .SolidFlexItem();
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Row containing SearchField (first) and SortOptions (second) when list is searchable. */
.GroupedListSearchRow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  gap: 16px;
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
}

/* SearchFieldLumina: no left/right padding inside this row; gap above provides spacing between children. */
.GroupedListSearchRow .SearchFieldLumina {
  padding-left: 0;
  padding-right: 0;
}

/* SortOptions (Lumina): button reuses ImageButton's secondary-variant circular styling (imagebuttonV2.less); only the open-state indicator and flex layout are custom. */
.SortOptionsButton {
  flex-shrink: 0;

  &.SortOptionsButton--open {
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.08) inset, 0 0.5px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(0, 0, 0, 0.15) inset;
  }
}

/* Sort option row in flyout: fixed icon column so row height is consistent. */
.SortOptionsMenu .SortOptionRow-icon {
  width: 16px;
  min-width: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SortOptionsMenu .SortOptionRow-icon .SvgIconMask,
.SortOptionsMenu .SortOptionRow-icon img {
  width: 16px;
  height: 16px;
}

.SortOptionsMenu .SortOptionRow-icon .SvgIconMask {
  background-color: var(--slds-g-color-neutral-base-50);
}

.SortOptionsMenu .SortOptionRow-icon img {
  display: block;
}

.SearchFieldLumina {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 16px;

  .SearchFieldInputWrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden; /* clip content to border-radius */
    box-sizing: border-box; /* height includes 1px border so total stays 40px */
    /* Lumina / Figma: fixed height and spacing */
    height: 40px;
    padding: 2px var(--slds-g-spacing-2);
    gap: var(--slds-g-spacing-2);
    flex-shrink: 0;
  }

  /* Legacy uses position:absolute for icons; override so they are flex items and do not overlap the input */
  .SearchFieldInputWrapper .SearchIcon {
    position: static;
    left: auto;
    right: auto;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
  }

  .SearchFieldInputWrapper .input.CancelButtonSearch {
    position: static;
    left: auto;
    right: auto;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* override global button padding so total size stays 16px (SearchIcon is a div, so no button padding) */
    background-image: none; /* SvgIconMask shows icon via mask, not background */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    box-sizing: border-box;
    margin: 0;
  }

  /* Button wrapper: reset + center icon (override global button styles) */
  .SearchFieldInputWrapper button.input.CancelButtonSearch {
    line-height: 0;
    overflow: hidden;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* SvgIconMask child: fixed size and color (search/filter icon colors stay in JS from theme). */
  .SearchFieldInputWrapper .input.CancelButtonSearch.SvgIconMask {
    flex: 0 0 16px;
    display: block;
    background-color: var(--slds-g-color-on-surface-1);
  }

  .SearchFieldInput {
    width: 100%;
    height: 20px;
    flex: 1 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    padding: 0;
    background-color: transparent;
    /* Typography: central tokens (slds-tokens.less) */
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-1);  /* 14px */
    font-style: normal;
    font-weight: var(--slds-g-font-weight-4);  /* 400 */
    line-height: 22px;
    letter-spacing: 0.084px;
    font-feature-settings: 'liga' off, 'clig' off;
  }

  .SearchFieldInput::placeholder {
    color: var(--Text-Placeholder, var(--searchfield-placeholder-color, #747474));
  }

  .SearchFieldInput::-webkit-input-placeholder {
    color: var(--Text-Placeholder, var(--searchfield-placeholder-color, #747474));
  }

  .AdvancedSearchButton {
    margin-left: var(--slds-g-spacing-2);
    margin-top: 0;
    width: auto;
  }
}

.SearchFieldInput {
  border: 5px solid;
  height: 2.5em;
  padding-left: 1.8em;
  padding-right: 1.8em;
}

.SearchFieldInput::placeholder {
    color:var(--searchfield-placeholder-color);
  }

.SearchFieldInput::-webkit-input-placeholder {
  color:var(--searchfield-placeholder-color);
}


.CancelButton {
  position: absolute;
  right: 2.5em;
  width: 2.5em;
  height: 2.5em;
  .alignCenter();
  line-height: 2.5em;
  font-size: 1em;
}

  .CancelButtonPhone {
    .CancelButton();
    height: 1em;
  }

  .SearchIcon {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    .alignCenter();
    line-height: 2.5em;
  }

  .AdvancedSearchButton {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 0 36px 36px 0;
    margin-top: 0.3em;
    .AdvancedSearchIcon {
      position: relative;
      right: 0.2em;
      width: 30px;
      left: 0.1em;
      top: 0.2em;
    }
  }

  .AdvancedSearchFavButton {
    background-color: transparent;
    display: inline-block;
    float: left;
    .AdvancedSearchFavIcon {
      width: 1.4em;
      height: 1.4em;
      border-radius: 2em;
      margin-top: 0.35em;
      margin-right: 0.35em;
    }
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  .ImageButton {
    .alignCenter();
    position: relative;
  }
  .ImageButtonText{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .ImageSelectorItem {
    width: 11em;
    .Badge {
      margin-left: 0.578em;
      max-width: 5.4em;
      //margin-top: .2em;
    }
  }

  /*.ImageSelectorItem:only-of-type {
    display: none !important;
  }*/

  .Badge {
    font-size: 0.8em;
    border-radius: 3em;
    padding: 0.5em;
    .alignCenter();
    min-width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    @media @phone {
      min-width: 1.3em;
      height: 12px;
      line-height: 12px;
    }
  }

  .MasterSection,
  .DetailSection,
  .Area,
  .FilteredViewAreaSection,
  .TabbedViewAreaSection,
  .GroupedList,
  .GroupedButtonList,
  .BreadCrumbControl,
  .DirectlyInvisible,
  .NavigationMenuContainer,
  .SingleSectionPage {
    .StretchedFlexItem();
    .FlexContainer();
    order: 1;
    position: relative;
  }

  .MultiLineFullHeight {
    .StretchedFlexItem();
    .FlexContainer();
    position: relative;
  }

  .TabbedViewAreaSection,
  .DirectlyInvisible {
    .MultiArea {
      .StretchedFlexItem();
      .FlexContainer();
      order: 1;
      position: relative;
    }
  }

  .TabbedViewAreaSection {
    background: var(--page-background-color);
  }

  .RightSection {
    box-sizing: border-box;
    border-left: 2px solid;
  }
  .DetailSection {
    box-sizing: border-box;
  }

  .MasterSection--lumina,
  .DetailSection--lumina {
    border-radius: var(--slds-g-radius-border-3);
    overflow: hidden;
    background: var(--slds-g-color-surface-1);
  }

  /* Lumina: Tab control (ImageSelector) at top instead of bottom - tied to Lumina only, not detail/master */
  .TabbedViewAreaContainer.TabbedViewAreaContainer--lumina {
    padding-top: var(--slds-g-spacing-2);
    .ImageSelector {
      order: -1;
      border-top: none;
    }
    .TabbedViewAreaSection {
      order: 1;
    }
  }

  /* Lumina: Figma tab styling - white background, underline indicator (variant-based) - tied to Lumina only */
  .ImageSelector.ImageSelector--lumina {
    background: var(--slds-g-color-surface-container-1);
    border-top-color: transparent;
    box-shadow: none;
    height: fit-content;
    .InnerContainer {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      padding: 0;
      height: auto;
      min-width: 100%;
    }
    .ImageSelectorItem.ImageSelectorItem--lumina {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: none;
      text-transform: none;
      max-width: var(--slds-g-sizing-14);
      padding: 0 var(--slds-g-spacing-3);
      gap: var(--slds-g-spacing-2);
      min-width: auto;
      height: 40px; /* No SLDS token available - between --slds-g-sizing-9 (32px) and --slds-g-sizing-10 (48px) */
      background: var(--slds-g-color-surface-container-1);
      font-family: var(--slds-g-font-family);
      font-weight: var(--slds-g-font-weight-6);
      font-size: var(--slds-g-font-scale-1);
      line-height: 19px;
      .ImageButton__icon {
        width: var(--slds-g-sizing-5);
        height: var(--slds-g-sizing-5);
      }
    }
  }

  .InputControl {
    outline-style: none;
    padding: 0.5rem;
    border-radius: 2px;
  }

.ButtonControl {
  outline: 0;
  padding: 0.5em;
  border-radius: 2px;
}

  .LoginSection {
    img {
      width: 20%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5%;
    }
    .LoginArea {
      .LoginGroup {
        flex: 7;
        -webkit-flex: 7;
      }
      .ImageButton {
        .FlexContainer();
        .FlexContainerCenteredContent();
        flex: 1;
        -webkit-flex: 1;
      }
    }
    .FlexContainer();
    .FlexContainerCenteredContent();
    .StretchedFlexItem();
  }

  .LoginArea {
    .FlexContainerHorizontal();
  }

  .FilterElementArea {
    .SolidFlexItem();
    flex-grow: 0;
    -webkit-flex-grow: 0;
  }

  .PageHeader {
    z-index: 1;
    flex-grow: 0;
    -webkit-flex-grow: 0;
    display: flex;
    box-shadow: 0 0 0 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;

    .SolidFlexItem();
    .HeaderControl {
      border-radius: 3px;
      min-width: 4.5em;

      img{
        vertical-align: middle;
      }
    }

    .HeaderControl.Debug {
        //Used only in debug screen
        background: #00b5cc;
      }

    .HeaderControl:active {

    }
    .PageHeaderLeftControls,
    .PageHeaderRightControls {
      display: inline-block;
    }
    .PageHeaderRightControls {
      float: right;
      button {
        vertical-align: top;
        margin-left: 0.5em;
      }
    }
    .PageHeaderTitleArea {
      flex: 1;
      margin-left: 16px;
      margin-right: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
    }

    .PageHeaderReplicationIndicator {
      position: absolute;
      float: left;
    }
    .PageHeaderReplicationImg {
      float: left;
      height: 6px;
      width: 6px;
    }
    .PageHeaderReplicationLoadingImg {
      float: left;
      height: 6px;
      min-width: 28px;
      margin-left: 4px;
    }
    .NavigationButton {
      float: left;
    }
    .cpHeaderAnimation {
      animation-name: header-slide-in;
      animation-duration: 0.5s;
      transition-timing-function: ease-out;
      -webkit-animation-name: header-slide-in;
      -webkit-animation-duration: 0.5s;
      -webkit-transition-timing-function: ease-out;
    }
    .NavButtonImg{
      height: 12px;
      width: 24px;
    }
    .CpMenu {
      background-color: transparent;
    }
  }

  .FlyOut {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99001;
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) center center no-repeat;
    -webkit-flex-direction: column;

    /* Lumina modal flyouts: vertically and horizontally center the content */
    &.FlyOut--luminaModal {
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
    }

    .Content {
      position: absolute;
      border-radius: 0.3em;
      .FlexContainer();

      // Lumina: remove default padding for context menu
      &.LuminaContextMenu {
        padding: 0;
      }
    }

    /* Lumina modal: Content must not be absolute so flex centering works; fixed 80% viewport height */
    &.FlyOut--luminaModal .Content {
      position: relative;
      max-height: 80vh;
      border-radius: var(--slds-g-radius-border-4);
      overflow: hidden;
    }

    /* Lumina modal on phone: near-full-height flyout anchored to bottom with rounded top corners */
    @media @phone {
      &.FlyOut--luminaModal {
        background: transparent;
      }

      &.FlyOut--luminaModal .Content {
        position: absolute;
        top: 4px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: var(--slds-g-radius-border-4) var(--slds-g-radius-border-4) 0 0;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07),
                    0px -7px 7px 0px rgba(0, 0, 0, 0.12),
                    0px 0px 10px 0px rgba(0, 0, 0, 0.12);
      }
    }

    .Content.FlyOut--luminaFullscreen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 1.25rem;
      overflow: hidden;
      max-height: none;
      background: var(--slds-g-color-palette-neutral-10);
    }

    /* Lumina modal: padding on ScrollableContainer (flyout scroll area) */
    &.FlyOut--luminaModal .SingleSectionDialogPage .ScrollableContainer {
      padding: var(--slds-g-spacing-5);

      @media @phone {
        padding: var(--slds-g-spacing-5) var(--slds-g-spacing-3);
      }
    }

    // ImageSelector tab bar must span edge-to-edge — zero out its own internal scroller's
    // inset. ImageSelector--lumina is the ANCESTOR of this ScrollableContainer (it wraps its
    // own <Scrollable> tab strip), so this must be a descendant selector, not :has().
    &.FlyOut--luminaModal .ImageSelector.ImageSelector--lumina .ScrollableContainer {
      padding: 0;
    }

    /* Lumina modal + indexbar (Lumina): 24px padding right on indexbar-wrapper; 16px top, 24px left/right/bottom on ScrollableContainer */
    &.FlyOut--luminaModal .FlexBoxContext:has(.indexbar-wrapper) {
      .indexbar-wrapper {
        padding-right: var(--slds-g-spacing-5);
      }

      .ScrollableContainer {
        padding: var(--slds-g-spacing-4) var(--slds-g-spacing-5) var(--slds-g-spacing-5) var(--slds-g-spacing-5);

        @media @phone {
          padding: var(--slds-g-spacing-5) var(--slds-g-spacing-3);
        }
      }
    }

    // Lumina: style ContextMenuItems with border-radius and shadow for Lumina context menus
    .LuminaContextMenu {
      .ScrollableContainer {
        overflow: visible; // Allow shadow to be visible outside container
      }

      // Hide fillers to prevent visual artifacts with border-radius
      .FillerTop,
      .FillerBottom {
        display: none;
      }

      .ContextMenuItems {
        margin: 0;
        padding: 0.2311rem 0; // 4px
        overflow-y: auto;
        border-radius: 0.4622rem; // 8px
        box-shadow: 0 -0.0578rem 0.0693rem rgba(0, 0, 0, 0.037), 0 0.1617rem 0.1675rem rgba(0, 0, 0, 0.085), 0 0 0.1675rem rgba(0, 0, 0, 0.085); // 1px, 1.2px, 2.8px, 2.9px

        /* Override legacy .ContextMenuItems img { margin: 0.5em } so icons don't add extra height */
        img {
          margin: 0;
        }

        .MenuItemRow {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0.6933rem; // 12px
          gap: 0.4622rem; // 8px
          font-weight: var(--slds-g-font-weight-4); // Override legacy bold font

          &.MenuItemRowEnabled {
            color: var(--slds-g-color-neutral-base-20);
          }

          &.MenuItemRowDisabled {
            color: var(--slds-g-color-disabled-1);
          }
        }
      }
    }

    .StandardContent {
      @media @tablet {
        width: 60% !important;
        height: 87.5% !important;
        left: 20% !important;
      }
      @media @phone {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
      }
    }
  }

  .Message {
    z-index: 99000;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
    header {
      padding: 0.5em 1em 0.5em 1em;
      font-weight: bold;
    }
    main {
      padding: 1em;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    footer {
      padding: 0.5em 1em 0.5em 1em;
      .alignRight();
      button {
        margin-left: 0.5em;
      }
    }
    .sfInputScreen {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .sfInput {
      padding: 1em;
    }
  }

  /* Lumina message box */
  .Message--lumina {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 99000;
    display: flex;
    flex-direction: column;
    background: var(--slds-g-color-surface-1);
    border-radius: var(--slds-g-radius-border-3);
    overflow: hidden;
    width: 330px;
    max-width: 90vw;
    height: auto;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
    font-family: var(--slds-g-font-family);

    header {
      padding: var(--slds-g-spacing-4) var(--slds-g-spacing-4) var(--slds-g-spacing-2);
      font-size: 17px;
      font-weight: var(--slds-g-font-weight-6);
      color: var(--slds-g-color-on-surface-3);
      text-align: center;
      line-height: 22px;
      letter-spacing: -0.43px;
      background: none;
    }

    main {
      padding: var(--slds-g-spacing-1) var(--slds-g-spacing-4) var(--slds-g-spacing-4);
      font-size: var(--slds-g-font-scale-1);
      font-weight: var(--slds-g-font-weight-4);
      color: var(--slds-g-color-on-surface-2);
      text-align: center;
      line-height: 21px;
      overflow-x: hidden;
      overflow-y: auto;
      word-wrap: break-word;
      -webkit-overflow-scrolling: touch;

      b {
        font-weight: var(--slds-g-font-weight-7);
      }
    }

    footer {
      display: flex;
      border-top: 1px solid var(--slds-g-color-border-1);
      padding: 0;
    }

    .Message--lumina__button {
      flex: 1;
      padding: var(--slds-g-spacing-3) var(--slds-g-spacing-2);
      background: none;
      border: none;
      font-size: 17px;
      font-weight: var(--slds-g-font-weight-4);
      color: var(--slds-g-color-accent-2);
      text-align: center;
      line-height: 22px;
      -webkit-appearance: none;

      &:active {
        background-color: var(--slds-g-color-surface-container-2);
      }

      &:last-of-type {
        font-weight: var(--slds-g-font-weight-6);
      }
    }

    .Message--lumina__button--destructive {
      color: var(--slds-g-color-error-1);
    }

    .Message--lumina__separator {
      width: 1px;
      background-color: var(--slds-g-color-border-1);
      align-self: stretch;
    }
  }

  hr {
    margin: 0;
    height: 1px;
    border: none;
  }

  .SimpleRow {
    font-size: 14px;
    padding: 10px 6px 10px 6px;
    margin-top: -1px;
    min-width: 8em;
    min-height: 1em;
    white-space: nowrap;
  }

  .SimpleRow:last-child {
    border-bottom: none;
  }

  .Icon {
    display: inline-block;
  }

  .MenuItems {
    padding: 0.4em;
    min-height: 2.2em;
    .MenuItem {
      display: inline-block;
      margin-right: 0.4em;
    }

    // Lumina mode: align buttons to the right with gap between them
    &:has(.ImageButton--lumina) {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--slds-g-spacing-4);
      padding: var(--slds-g-spacing-4);
    }
  }

  .GroupedElementsArea .MenuItems:has(.ImageButton--lumina) {
    padding: 0;
  }

  .ContextMenuItems {
    width: 100%;
    display: inline-block;
    margin: 0.2em;
    min-height: 2em;
    min-width: 6em;

    img {
      vertical-align: middle;
      margin: 0.5em;
      width: 1.5em;
      height: 1.5em;
    }

    .Icon {
      margin: 0.5em;
    }

    .MenuItemRow {
      font-weight: bold;
      .SimpleRow();
      border-bottom: 0;
      padding: 0.4em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .MenuItemRow:last-child {
      border-bottom: none;
    }
  }

.BreadCrumbHeader {
  border-bottom: 1px solid;
  min-height: 2.2em;
  margin-top: -8px;
  padding: 0.0em 0.4em 0.1em 0.35em;
  display: flex;
  align-items: center;
  //.alignCenter();

  .BreadCrumbHeaderCont {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .BreadCrumbHdrTxtCont {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
  }
  .BreadCrumbBack {
    display: inline-block;
    background: rgba(0, 0, 0, 0);
    padding: 0px;
  }
  .BreadCrumbBack:active {

  }
  .BreadCrumbHeaderLeftControls {
    display: inline-block;
  }
  .BreadCrumbHeaderTitleArea {
    position: relative;
    display: inline-block;
  }
  .BreadCrumbSeparator {
    margin-left : 0.25em;
    margin-right : 0.5em;
  }
}

.BreadCrumbHeaderTextfit, .BreadCrumbHeaderTextfit > div:nth-child(1) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      text-align: start;
      vertical-align: middle;
}

.BreadCrumbHierarchy {
  .HierarchyRow {
    //font-weight: bold;
    font-size: 15px;
    padding: 14px 16px 10px 16px;
    margin-top: -1px;
    min-width: 8em;
    min-height: 1em;
    white-space: nowrap;
    border-bottom: 1px solid;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 6px 12px;
    background-position: right;
  }
}

table.List {
  font-weight: 500;
  border-collapse: collapse;
  width: 100%;
  th {
    padding: 0.6em;
    font-size: 0.8em;
    font-weight: bold;
    border-bottom: 4px double;
  }
  tr {
    border-bottom: 1px solid;
  }
  td {
    padding: 0.6em;
    span.ListColumn {
      display: table-cell;
      vertical-align: middle;
    }
    .ListRow {
      min-height: 1em;
    }
    .itemLabel {
      font-size: 0.7em;
    }
    .itemValueSmall {
      font-size: 1em;
    }
  }

  .MandatoryRow {
    display: flex;
    align-items: center;
  }

  .MandatoryIndicator {
    color: var(--slds-g-color-border-error-2);
    font-weight: var(--slds-g-font-weight-6);
    flex-shrink: 0;
    margin-right: var(--slds-g-spacing-1);
  }

  .GroupRow {
    border-bottom: none;
    td {
      padding: 0.3em 0 0.3em 0.5em;
    }
  }
  tr:last-child {
    border-bottom: none !important;
  }
  tr.Selected {
    .itemLabel {
    }
    .itemValueSmall {
    }
  }

  &.ListV2 {
    border-collapse: separate;
    border-spacing: 0 0.9245rem; /* horizontal | vertical (16px) */
    margin-top: -0.9245rem;       /* remove top spacing (16px) */
    margin-bottom: -0.9245rem;    /* remove bottom spacing (16px) */

    /* Set horizontal padding for 10px gaps between columns */
    /* Vertical padding uses 0.6em to match base table cell padding */
    td {
      padding-top: 0.6em;
      padding-bottom: 0.6em;
      padding-left: 0.3125rem; /* 5px - creates 10px total gap when combined with adjacent column */
      padding-right: 0.3125rem; /* 5px - creates 10px total gap when combined with adjacent column */
    }

    /* Single column: 16px padding on both left and right edges */
    tr td:first-child:last-child {
      padding-left: var(--slds-g-spacing-4); /* 16px */
      padding-right: var(--slds-g-spacing-4); /* 16px */
      border-top-left-radius: var(--slds-g-radius-border-3);
      border-bottom-left-radius: var(--slds-g-radius-border-3);
      border-top-right-radius: var(--slds-g-radius-border-3);
      border-bottom-right-radius: var(--slds-g-radius-border-3);
    }

    /* First column: 16px left edge, 5px right (combines with next column's 5px left = 10px gap) */
    tr td:first-child:not(:last-child) {
      padding-left: var(--slds-g-spacing-4); /* 16px */
      padding-right: 0.3125rem; /* 5px */
      border-top-left-radius: var(--slds-g-radius-border-3);
      border-bottom-left-radius: var(--slds-g-radius-border-3);
    }

    /* Last column: 5px left (combines with previous column's 5px right = 10px gap), 16px right edge */
    tr td:last-child:not(:first-child) {
      padding-left: 0.3125rem; /* 5px */
      padding-right: var(--slds-g-spacing-4); /* 16px */
      border-top-right-radius: var(--slds-g-radius-border-3);
      border-bottom-right-radius: var(--slds-g-radius-border-3);
    }

    /* Add gap between label and time ListRows */
    .ListRow:not(:last-child) {
      margin-bottom: 0.375rem; /* 6px - using rem so font size doesn't impact gap */
    }
  }

  .StaticRowHeight {
    overflow:hidden;
    .Stepper input {
      width: calc(100% - 98px) !important;
    }
  }
  /*td:first-child {
    padding-left: 1em;
  }*/
}

  .Combo {
    display: table-cell;
    min-width: 50px;
    height: 50px;
    vertical-align: middle;
    img {
      margin-left: auto;
      margin-right: auto;
      display: block;
    }
  }

  .optImg {
    display: block;
  }
  .ImageSelector {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    .SolidFlexItem();
    //overflow-y: auto;
    overflow-y: hidden;
    //border-top: 1px solid @hard-bg-halftone;
    border-top: 2px solid;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    order: 1;
    //Some times due to relative position, Imageselector position is not corrected during transition and tranform is used to correct it
    transform: translateZ(0);
    height: fit-content;
    //iPhone X and iPhone XS
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      height: 3.85em;
    }
    //iPhone XR
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
      height: 3.85em;
    }
    //iPhone XR zoomed mode
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
      height: 3.85em;
    }
    //iPhone XS Max
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
      height: 3.85em;
    }
    .InnerContainer {
      white-space: nowrap;
      height: 2.427em;
      button {
        :nth-child(2) {
          max-width: 12.382em;
          line-height: 26px;
          vertical-align: middle;
          @media @phone {
            line-height: 22px;
          }
        }
        div {
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .ImageSelectorItem {
      font-size: 0.7em;
      border-radius: 0;
      display: inline-block;
      width: auto;
      margin: 0;
      height: inherit;
      font-family: "Regular";
      text-transform: uppercase;

      .optImg {
        position: relative;
        height: 26px;
        width: 22px;
        @media @phone {
          height: 20px;
        }
      }

      @media @phone {
        font-size: 0.64em;
        text-transform: none;
      }
    }
    width: 100%;
    .alignCenter();
    .ImageSelectorItem.Selected,
    .ImageSelectorItem:active {
      //background: darken(@bg-dark-tone, 10%);
    }
    button {
      padding-left: 1.333em;
      padding-right: 1.333em;
      img.Padded {
        padding: 0;
        width: 16px;
        height: 16px;
        float: left;
        margin-right: 0.495em;
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
      }
    }
  }

  button {
    border: none;
    .ButtonControl();
    .PrimeColorScheme();
    border-radius: 0.2em;
    font-size: 100%;
    img {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      width: 24px;
    }
    img.Padded {
      padding-bottom: 1em;
    }
  }

  button:active:not(.Disabled) {
    background: rgba(0, 0, 0, 0.3);
  }

  #Page,
  #ReactContainer {
    .FlexContainer();
    .FirstLevelContainer();
  }

  #ReactContainer > #Page > img {
    height: inherit; // fix for android tab devices, where extra white space is displayed in login screen if keyboard is up
  }

  // Lumina flyout: overlay and page border-radius
  .OverlaySection--flyout {
    border-radius: 1.25rem;

    @media @phone {
      border-radius: 1.25rem 1.25rem 0 0;
    }
  }

  .Page.Page--flyout {
    border-radius: 1.25rem;

    @media @phone {
      border-radius: 1.25rem 1.25rem 0 0;
    }
  }


  // Lumina: PageBodyWrapper for navigation overlay scoping
  .PageBodyWrapper {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--slds-g-spacing-3);
    padding: var(--slds-g-spacing-4) var(--slds-g-spacing-6);

    @media @phone {
      padding: 0;
    }

    &--flyout {
      border-radius: 0 0 1.25rem 1.25rem;
      padding: 0;

      @media @phone {
        border-radius: 0;
      }
    }

    .MasterDetailScreen {
      gap: var(--slds-g-spacing-3);

      @media @phone {
        gap: 0;
      }
    }

    &:has(> .SingleSectionPage) {
      padding: var(--slds-g-spacing-4) var(--slds-g-spacing-6) 0;

      @media @phone {
        padding: 0;
      }
    }

    &:has(.CardArea--lumina) {
      padding-right: var(--slds-g-spacing-2);
      padding-top: 0;
      padding-bottom: var(--slds-g-spacing-4);

      @media @phone {
        padding-left: var(--slds-g-spacing-3);
        padding-right: var(--slds-g-spacing-1);
      }
    }

    /* Calendar owns its own bottom gap — see .CalendarControl--lumina. */
    &:has(.CalendarControl--lumina) {
      padding-bottom: 0;
    }
  }
  .SplitScreen {
    .StretchedFlexItem();
    .FlexContainerHorizontal();
    .LeftSection {
      .StretchedFlexItem();
      .FlexContainer();
    }
    .RightSection {
      .StretchedFlexItem();
      .FlexContainer();
        .MapWrapper {
          position: static; //fix for the googlemap getting cropped in dailyview
        }
    }
  }

  /* Lumina: render the split panels as two rounded surface cards with a gutter between them
     (mirrors .MasterSection--lumina / .DetailSection--lumina and the .MasterDetailScreen gap);
     the outer inset is provided by .PageBodyWrapper padding. Scoped to --lumina so the legacy
     SplitScreen (flush panels + hard divider) is unaffected. */
  .SplitScreen--lumina {
    gap: var(--slds-g-spacing-3);

    .LeftSection--lumina,
    .RightSection--lumina {
      border-radius: var(--slds-g-radius-border-3);
      overflow: hidden;
      background: var(--slds-g-color-surface-1);

      /* The design shows a white frame around the map inside its card. Inset whichever section holds
         the map (matched by content, NOT assumed to be the right one — a customiser may swap
         left/right or place the map in either pane) so the card's white surface shows as that
         border; the inner SingleAreaSection paints page-background up to the card edge otherwise
         (edge-to-edge map). Round the map (an <iframe> composited layer that the card's
         overflow:hidden won't clip) so its corners follow the inset frame. */
      &:has(.MapWrapper) {
        padding: var(--slds-g-spacing-3);
        box-sizing: border-box;

        .MapWrapper,
        .MapWrapper > iframe {
          border-radius: var(--slds-g-radius-border-3);
        }
      }
    }

    /* Neutralize the legacy .RightSection divider (border-left, line ~878); the Lumina gutter
       between the two cards replaces it. This targets the legacy divider at its source, so it is
       correctly scoped to the right section regardless of which pane holds the map. */
    .RightSection--lumina {
      border-left: none;
    }

    /* Daily-view design: the tab strip has a full-width grey baseline spanning the whole
       left card, with each tab's own underline sitting flush on it — the selected tab's 3px blue
       accent and the unselected tabs' 1px grey underline all share ONE line. Two problems to solve:

       1. The per-tab underlines (border-bottom on .ImageButton--tab-selected/unselected) stop at the
          labels, so they never span the card. Add a full-width baseline on the tab row itself
          (.InnerContainer stretches min-width:100% across the card). Draw it with an INSET box-shadow
          rather than border-bottom: the shadow has zero layout height, so it paints at the row's
          bottom edge without pushing a 1px strip below the buttons (a real border would sit 1px under
          the accent and read as a gap).

       2. .InnerContainer defaults to align-items:flex-start, pinning every tab button to the TOP.
          Because the selected button is 2px taller than the unselected ones (3px accent vs 1px
          underline, box-sizing:border-box), their BOTTOMS diverge — the selected underline lands 2px
          lower than the unselected underline, and only the selected one meets the full-width baseline.
          Switch to align-items:flex-end so all buttons align by their bottom edge; every underline
          (1px and 3px alike) then lands on the same line as the baseline. One continuous line.

       Scoped to the daily SplitScreen card (weekly uses MultiSectionPage; legacy has no --lumina) so
       no other tabbed view is affected. */
    .ImageSelector.ImageSelector--lumina .InnerContainer {
      align-items: flex-end;
      box-shadow: inset 0 calc(-1 * var(--slds-g-sizing-border-1)) 0 0 var(--slds-g-color-border-1);
    }
  }

  .MapContainer {
    .StretchedFlexItem();
    .FlexContainer();
  }

  #MapCanvas {
    .StretchedFlexItem();
    img {
      max-width: none !important;
      background: none !important;
    }
  }

  .NavigationPanel {
    flex: 1 0;
    -webkit-flex: 1 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .NPRow {
      padding: 1em;
      img {
        vertical-align: middle;
      }
    }
  }

  .MasterDetailScreen {
    .FlexContainerHorizontal();
    .StretchedFlexItem();
  }

  #DBLoadIndicator {
    z-index: 10;
    width: 8px;
    height: 8px;
    background: #00ff00;
    position: absolute;
    top: 8px;
    right: 100px;
    opacity: 0;
  }

  .AttentionLabel {
    color: #00ff00;
    font-weight: bold;
  }

  input[type="text"],
  input[type="password"],
  input[type="search"] {
    .DefaultControlStyle();
  }

  //Switch is used only debug screen and is not themed
  .Switch {
    .ButtonControl();
    display: inline-block;
    border: 2px solid @prime-bg;
    background: rgba(0, 0, 0, 0);
    .alignCenter();
    padding: 0.5em;
    color: @prime-bg;
  }

  .Switch.true {
    background: @prime-bg;
    color: @prime-fg;
  }

  .Switch.true:after {
    content: "ON";
  }

  .Switch.false:after {
    content: "OFF";
  }

  .CodeArea {
    .StretchedFlexItem();
    .SolidFlexItem();
    height: 85%;
    font-family: monospace;
    font-size: 1.4em;
    padding: 1em;
  }

  .InputAreaMultiLine {
    display: flex;
    display: -webkit-flex;
    font-family: "Regular";
    color: var(--inputarea-font-color);

    input:focus {
      border-bottom: 2px solid var(--inputarea-focus-color);
      color: var(--inputarea-focus-color);
    }

    label {
      font-family: "Medium";
      font-size: 12px;
      padding: 16px 16px 8px 6px;
      .alignRight();
      flex: 0 0 8em;
      -webkit-flex: 0 0 8em;
    }
    textarea {
      padding: 12px 12px 6px 6px;
      color: var(--inputarea-font-color);
    }
  }

  .InputAreaMultiLinePhone {
    .InputAreaMultiLine();
    flex-direction: column;
    -webkit-flex-direction: column;
    color: var(--inputarea-font-color);
    input:focus {
      border-bottom: 2px solid var(--inputarea-focus-color);
      color: var(--inputarea-focus-color);
    }
    label {
      padding: 16px 12px 6px 12px;
      .alignLeft();
      flex: none;
      -webkit-flex: none;
      background: none !important;
    }
    textarea {
      padding: 6px 12px 6px 12px;
    }
  }
  textarea {
    .StretchedFlexItem();
    -webkit-user-select: auto !important;
    border: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-radius: 0;
    padding: 0.5em;
    padding-right: 1.7em;
    margin: 0;
    font-size: 0.81em;
    font-family: "Regular";
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    -webkit-appearance: none;
  }

  textarea:focus {
    font-family: "Regular";
    border-bottom: 2px solid var(--inputarea-focus-color);
    border-bottom-color: var(--inputarea-focus-color) !important;
    color: var(--inputarea-focus-color);
  }

  textarea::-webkit-scrollbar {
    width: 0px;
  }

  .textarea.CancelButton {
    width: 1em;
    background-image: var(--inputarea-clear-img);
    background-repeat: no-repeat;
    background-size: 0.6em 1em;
    right: 0;
    padding: 0.2em 0.353em;
    background-position: center;
  }

  .textarea.CancelButtonPhone {
    width: 1em;
    background-image: var(--inputarea-clear-img);
    background-repeat: no-repeat;
    background-size: 0.6em 1em;
    right: 0;
    padding: 0.2em 0.353em;
    background-position: center;
  }

  .NoDataMessageContainer {
    .StretchedFlexItem();
    //float: left;
    margin-left: auto;
    width: 100%;
    position: relative;

    /* Next-gen UX styling for NoDataMessage */
    &.lumina {
      flex: 1;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      min-height: 0;
      font-family: var(--slds-g-font-family);

      .NoDataMessage__content {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-bottom: var(--slds-g-spacing-2);
      }

      .NoDataMessage__icon {
        width: 60%;
        max-width: 24em;
        flex-shrink: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .NoDataMessage__icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
      }

      .NoDataMessage__text {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
      }

      .NoDataMessage__maintext {
        font-weight: var(--slds-g-font-weight-6);
        font-size: var(--slds-g-font-scale-2);
        line-height: var(--slds-g-font-line-height-2);
        color: var(--slds-g-color-on-surface-2);
      }

      .NoDataMessage__subtext {
        font-weight: var(--slds-g-font-weight-4);
        font-size: var(--slds-g-font-scale-1);
        line-height: var(--slds-g-font-line-height-1);
        color: var(--slds-g-color-on-surface-1);
      }
    }
  }

  .VisitDetailsContainer {
    .StretchedFlexItem();
    //changes done for user story 637784
    //float: left;
    margin-left: auto;
    width: 100%;
    position: relative;
  }

  .UserWelcomeContainer {
    .StretchedFlexItem();
    //changes done for user story 637784
    //float: left;
    margin-left: auto;
    width: 100%;
    position: relative;
  }

  .MediaList,
  .MediaControl {
    .FlexContainer();
    .MediaListItem:last-child {
      border-bottom: none;
    }
    .MediaItem {
      border-bottom: 1px solid @colorPorcelain;
      padding-bottom: 1em;
      padding-top: 1em;
    }
    .MediaListItem {
      .MediaItem();
      display: flex;
    }

    .MediaListItemWithNoBorder{
     padding-top: 0.4622rem; // 8px
     display: flex;
    }

    .MediaListItemContent{
      flex: 1;
    }

    .ContextMenuItemWithoutInfo{
      padding: 0.6em;
    }

    .ContextMenuItemWithInfo{
      padding: 1em 0.6em 0.6em;
    }

    .MediaListCategory,
    .MediaCategory {
      color: @colorBrightGrey;
      .Content {
        .alignCenter();
        video,
        img {
          max-width: 100%;
          max-height: 19.069em;
        }
      }
      .Info {
        padding: 1em;
        font: 14px Medium;
        .alignLeft();
        .FileTypeIcon {
          vertical-align: middle;
          width: 1.455em;
          height: 1.455em;
          padding: 0.727em;
          display: inline-block;
        }
      }
    }

    .previewImageOuterContainer {
      display: flex;
      position: relative;
      text-align: left;
      padding-left: 1.56em;
      padding-right: 1.56em;
    }

    @media screen and (max-width: 480px) {
      .MediaListCategory,
      .MediaCategory {
        .Content {
          img {
            max-height: 12.713em;
          }
        }
      }
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 13.024em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    @media screen and (max-width: 640px) {
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 15.024em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
      .MediaListCategory,
      .MediaCategory {
        .Content {
          img {
            max-height: 12.713em;
          }
        }
      }
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 13.024em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
      .MediaListCategory,
      .MediaCategory {
        .Content {
          img {
            max-height: 12.713em;
          }
        }
      }
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 13.024em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 15.803em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 27.803em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    @media screen and (min-width: 768px) {
      .previewImageInnerContainer {
        display: inline-block;
        max-width: 27.803em;
        height: auto;
        overflow: hidden;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .TabbedViewAreaSection .MediaList .previewImageInnerContainer,
    .TabbedViewAreaSection .MediaControl .previewImageInnerContainer {
      max-width: 20.803em;
    }
  }

  @media screen and (min-width: 768px) {
    .TabbedViewAreaSection .MediaList .previewImageInnerContainer,
    .TabbedViewAreaSection .MediaControl .previewImageInnerContainer {
      max-width: 20.803em;
    }
  }

  .taggedImageIcon {
    width: 1.6em;
    height: 1.5em;
    position: absolute;
    background-repeat: no-repeat;
    margin: 0.375em;
  }

  // Error image container styles for ImageElement (generic component)
  .ImageElementContainer--error {
    background-color: var(--slds-g-color-surface-container-1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .previewImageOuterContainer--luminaLoading {
    display: flex;
    justify-content: center;
  }

  .ImageElement__spinner {
    width: 80px;
    height: 80px;
    max-width: 100%;
    max-height: 100%;
    background-color: var(--slds-g-color-accent-1);
  }

  // --- MediaList Lumina Styles ---

  .MediaList--lumina {
    display: flex;
    flex-direction: column;
    gap: var(--slds-g-spacing-4);
    background-color: var(--slds-g-color-surface-1);
    padding: var(--slds-g-spacing-4);
  }

  .MediaListCategory--lumina {
    display: flex;
    flex-direction: column;
  }

  // Card Grid for Images
  .MediaListCardGrid--lumina {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // Default: 3 columns (desktop/landscape)
    gap: var(--slds-g-spacing-3);

    // Phone: 1 column (narrow screens)
    @media @phone {
      grid-template-columns: 1fr;
    }

    // Tablet portrait: 2 columns (medium width, portrait)
    @media @tablet-potrait {
      grid-template-columns: repeat(2, 1fr);
    }

    // Small tablet/large phone landscape: 2 columns (medium width range)
    @media (min-width: 480px) and (max-width: 743px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .MediaListCard--lumina {
    position: relative;
    background-color: var(--slds-g-color-surface-container-1);
    border-radius: var(--slds-g-radius-border-3);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border: var(--slds-g-sizing-border-2) solid transparent;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);

    &.Disabled {
      opacity: var(--slds-g-opacity-6);
      pointer-events: none;
    }
  }

  .MediaListCardContent--lumina {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .previewImageOuterContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--slds-g-color-neutral-base-100);
      cursor: pointer;
      padding: 0;

      // Video element fills entire container
      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .previewImageInnerContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      // Loading/error image
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // Common img styles for both containers
    .previewImageOuterContainer img,
    .previewImageInnerContainer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  }

  .MediaListCardTaggedIndicator--lumina {
    position: absolute;
    bottom: var(--slds-g-spacing-3);
    left: var(--slds-g-spacing-3);
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--slds-g-radius-border-1);
  }

  .MediaListCardTaggedIndicatorIcon--lumina {
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
    background-color: var(--slds-g-color-surface-2);
  }

  .MediaListCardContextMenu--lumina {
    position: absolute;
    top: var(--slds-g-spacing-2);
    right: var(--slds-g-spacing-2);
    z-index: 3;
  }

  // Video overlays (rendered by Video component)
  .VideoGradientOverlay--lumina {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.60) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .VideoPlayButton--lumina {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    pointer-events: none;

    img, svg {
      width: 52px;
      height: 52px;
    }
  }

  .VideoTitleOverlay--lumina {
    position: absolute;
    bottom: var(--slds-g-spacing-2);
    left: var(--slds-g-spacing-2);
    right: var(--slds-g-sizing-10);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    color: var(--slds-g-color-surface-1);
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--slds-g-font-family-base);
    font-size: var(--slds-g-font-scale-1);
    font-style: normal;
    font-weight: var(--slds-g-font-weight-6);
    line-height: 22px;
  }

  .VideoDurationBadge--lumina {
    position: absolute;
    bottom: var(--slds-g-spacing-2);
    right: var(--slds-g-spacing-2);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    color: var(--slds-g-color-surface-1);
    text-align: right;
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--slds-g-font-family-base);
    font-size: var(--slds-g-font-scale-neg-1);
    font-style: normal;
    font-weight: var(--slds-g-font-weight-4);
    line-height: 22px;
  }

  // Document List
  .MediaListDocList--lumina {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--slds-g-radius-border-3);
  }

  .MediaListDocItem--lumina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--slds-g-spacing-3);
    background-color: var(--slds-g-color-surface-container-1);
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    cursor: pointer;

    // Remove border from last item
    &:last-child {
      border-bottom: none;
    }

    // Selected state - background color change
    &.MediaListDocItem--lumina--selected {
      background-color: var(--slds-g-color-palette-blue-95);
    }

    &.Disabled {
      opacity: var(--slds-g-opacity-6);
      pointer-events: none;
    }
  }

  .MediaListDocItemContent--lumina {
    display: flex;
    align-items: center;
    gap: var(--slds-g-spacing-3);
    flex: 1;
    min-width: 0;
  }

  .MediaListDocItemIcon--lumina {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .FileTypeIcon {
      width: 54px;
      height: 54px;
    }
  }

  .MediaListDocItemText--lumina {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--slds-g-spacing-1);
  }

  .MediaListDocItemName--lumina {
    overflow: hidden;
    color: var(--slds-g-color-on-surface-2);
    text-overflow: ellipsis;
    font-family: var(--slds-g-font-family-base);
    font-size: var(--slds-g-font-scale-2);
    font-style: normal;
    font-weight: var(--slds-g-font-weight-6);
    line-height: 22px;
    display: block;
    white-space: nowrap;
  }

  .MediaListDocItemContextMenu--lumina {
    flex-shrink: 0;
  }

  #ScriptScreen {
    .StretchedFlexItem();
    .FlexContainer();
  }

  .ContextMenuItem {
    font-size: 130%;
    padding: 0 0.5em 1em 0;
    float: right;
    height: fit-content;
  }

  .ContextMenuItemWithIndex {
    .ContextMenuItem();
    margin-right: 0.8em;
  }

  .DeploymentScreen {
    padding: 10em;
    .Title {
      .FlexContainerHorizontal();
      h2 {
        .StretchedFlexItem();
      }
      .Switch {
        max-height: 1.5em;
        margin: auto;
      }
      span {
        margin: auto;
      }
    }
    .Error {
      color: darkred;
      text-align: center;
    }
  }

  @media screen and (max-width: 767px) {
    .DeploymentScreen {
      padding: 10em 3em;
      input {
        width: 6em;
      }
      .Error {
        font-size: 0.6em;
      }
    }
  }

  .SingleSectionDialogPage {
    .FlexContainerHorizontal();
    .StretchedFlexItem();
  }

  .TabbedViewAreaContainer {
    .FlexContainer();
    .StretchedFlexItem();
  }

  // Hide TitleBar in GroupedButtonList when inside TabbedViewAreaSection (tab label is sufficient).
  // Lumina-scoped so legacy GroupedButtonList in a tab keeps its TitleBar unchanged.
  .TabbedViewAreaSection .GroupedButtonList.GroupedButtonList--lumina .TitleBar {
    display: none !important;
  }

  // In a tab the TitleBar is hidden; when there is also no search field AND no count caption,
  // the first list item would sit flush against the top. Add the top spacing the SearchField
  // padding otherwise provides — on the WHITE card (.ScrollableContent), not the grey scroller,
  // so the gap reads white (not a grey strip). The :not(:has(...)) guards skip this when either the
  // search field or the GroupedButtonListCount caption already supplies the gap (avoids double spacing).
  .TabbedViewAreaSection .GroupedButtonList.GroupedButtonList--lumina:not(:has(.SearchFieldLumina)):not(:has(.GroupedButtonListCount)) .ScrollableContent {
    padding-top: var(--slds-g-spacing-4);
  }

  .SingleAreaSection {
    .FlexContainer();
    flex: 80%;
    -webkit-flex: 80%;
    background-color: var(--page-background-color);
  }

  .Merger {
    .FlexContainerHorizontal();
    .Items {
      .FlexContainerHorizontal();
      .StretchedFlexItem();
    }
    .InputArea:first-child {
    }
    .ImageButton {
      font-size: 14px;
    }
  }

//Only used in windows and should be cleaned up when windows specific button list is cleaned
  /*.DraggableButton {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: fixed;
    cursor: pointer;
    border: 2px dotted @colorSeaGreen;
    box-sizing: border-box;
    background-color: @colorHalfBaked;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    color: white;
    z-index: 1;
    text-align: center;
    span {
      font-size: 95%;
      vertical-align: middle;
    }
  }*/

  .MultiSectionPage {
    .FlexContainerHorizontal();
    .StretchedFlexItem();

    // Generic collapsible section styling. Panel snaps between 30% and 0 (no animation);
    // the calendar (next sibling) reclaims the freed space via flex: 1.
    &__section--collapsible {
      background-color: var(--page-background-color);
      overflow: hidden;
      border-radius: var(--slds-g-radius-border-3);

      &.MultiSectionPage__section--expanded {
        flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        width: 30%;
        padding-top: var(--slds-g-spacing-4);
      }

      &.MultiSectionPage__section--collapsed {
        flex: 0 0 0;
        -webkit-flex: 0 0 0;
        width: 0;
      }

      // Section after collapsible takes remaining space
      + * {
        flex: 1;
        -webkit-flex: 1;
      }
    }

    .DirectlyInvisible {
      background-color: var(--page-background-color);
      flex: 20%;
      -webkit-flex: 20%;
      padding-top: 0.5em;
      overflow: hidden;

      // Lumina old-style (non-collapsible) panel: inset from the calendar to its left.
      &:has(.GroupedButtonList--lumina) {
        margin-left: var(--slds-g-spacing-4);
      }

      .MultiArea {
        .GroupedButtonList {
          label {
            padding-left: 0.5em;
          }
          .ButtonGrouping {
            padding-left: 0.8em;
            padding-top: 0.5em;
            padding-bottom: 0.3em;
          }

          .ButtonListItemOuter {
            border-width: 0.25em 0.5em;
            border-style: solid;
            border-color: transparent;

            .ButtonListItemInner {
              padding: 0.5em;

              .itemName {
              }
              .itemAddress {
                font-size: 80%;
              }
            }
          }

          .TitleBar {
            label {
              padding-left: 2em;
            }
            .Icon {
              padding-right: 0.5em;
              float: right;
            }
          }
        }

        // Nesting + chained class outranks style-overrides.css without !important.
        .GroupedButtonList.GroupedButtonList--lumina {
          background: var(--slds-g-color-surface-1);
          border-radius: var(--slds-g-radius-border-3); // 12px
          overflow: hidden; // clip TitleBar separator to rounded corners

          .TitleBar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 0 0 var(--slds-g-sizing-10); // lock at 48px regardless of parent
            min-height: var(--slds-g-sizing-10);
            height: var(--slds-g-sizing-10);
            padding: 0 var(--slds-g-spacing-4);
            box-sizing: border-box;
            border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);

            label {
              padding: 0;
              font-family: var(--slds-g-font-family);
              font-size: var(--slds-g-font-scale-2);
              font-weight: var(--slds-g-font-weight-6);
              line-height: var(--slds-g-font-line-height-4);
              color: var(--slds-g-color-on-surface-2);
            }

            .Icon {
              padding: 0;
              float: none;
              cursor: pointer;
              color: var(--slds-g-color-accent-2);
              // Pin to 18px — fa-lg (1.33em) × legacy 130% overflows the 48px row.
              font-size: 18px;
              font-weight: var(--slds-g-font-weight-6);
              line-height: 1;
            }
          }

          .GroupedButtonListItem {
            display: flex;
            flex-direction: column;
            gap: var(--slds-g-spacing-2); // 8px between label + cards
            padding: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4); // 16px sides, 16px bottom between groups
          }

          .ButtonGrouping {
            padding: 0;
            background: transparent;
            font-family: var(--slds-g-font-family);
            font-size: var(--slds-g-font-scale-1);    // 14px
            font-weight: var(--slds-g-font-weight-6); // semibold
            line-height: var(--slds-g-font-line-height-3);
            color: var(--slds-g-color-on-surface-3);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .ButtonListItemOuter {
            border: 0; // legacy used transparent borders for spacing; parent's gap handles it

            .ButtonListItemInner {
              display: flex;
              flex-direction: column;
              gap: var(--slds-g-spacing-1); // 4px between name and address
              padding: var(--slds-g-spacing-3); // 12px (Figma list-card inner padding)
              background: var(--slds-g-color-surface-3); // Figma card fill (#F3F3F3)
              border-radius: var(--slds-g-radius-border-2); // 8px

              .itemName {
                font-family: var(--slds-g-font-family);
                font-size: 17px;
                font-weight: var(--slds-g-font-weight-6);
                line-height: 22px;
                letter-spacing: 0.006em;
                color: var(--slds-g-color-on-surface-2);
              }

              .itemAddress {
                font-family: var(--slds-g-font-family);
                font-size: var(--slds-g-font-scale-1); // 14px
                font-weight: var(--slds-g-font-weight-4);
                line-height: 18px;
                letter-spacing: -0.014em;
                color: var(--slds-g-color-on-surface-1);
              }

              // Row layout: icon on left, text on right (two-column layout from contract)
              &--row {
                flex-direction: row;
                gap: var(--slds-g-spacing-2);

                // Fixed 16x16 icon box (any contract image is normalised to this size).
                img {
                  width: var(--slds-g-sizing-5);
                  height: var(--slds-g-sizing-5);
                  flex-shrink: 0;
                  align-self: flex-start;
                  margin-top: var(--slds-g-spacing-1); // align icon with text baseline (4px)
                }

                .ButtonListItemTextColumn {
                  display: flex;
                  flex-direction: column;
                  gap: var(--slds-g-spacing-1);
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
  }

  // Override base flex:1 so the input keeps its natural 48px height in the panel.
  .GroupedButtonList.GroupedButtonList--lumina .SearchFieldLumina {
    flex: 0 0 auto;
  }

  // Collapsible section needs flex/height constraints so its content scrolls.
  .MultiSectionPage__section--collapsible.MultiSectionPage__section--expanded {
    margin-right: var(--slds-g-spacing-4);

    &:has(.TabbedViewAreaContainer--lumina),
    &:has(.GroupedButtonList--lumina) {
      display: flex;
      flex-direction: column;
      height: 100%;
      // Required: the panel has padding-top, so border-box keeps the inner scroll chain sized
      // correctly — without it the end-of-list gap (::after) is lost when scrolled to the bottom.
      box-sizing: border-box;

      .SingleAreaSection,
      .MultiArea,
      .Area {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }

      .TabbedViewAreaContainer {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }

      .TabbedViewAreaSection {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }
    }
  }

  .GroupedButtonList.GroupedButtonList--lumina {
    background: var(--slds-g-color-surface-1);
    border-radius: var(--slds-g-radius-border-3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    // Optional list caption from <Header> (e.g. "All (15)"), aligned with the list cards.
    // The gap above it comes from the SearchField's bottom padding when search is present;
    // when there is no search field the caption supplies its own top gap (see rule below).
    .GroupedButtonListCount {
      flex: 0 0 auto;
      padding: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4);
      font-family: var(--slds-g-font-family);
      font-size: var(--slds-g-font-scale-1);
      font-weight: var(--slds-g-font-weight-6);
      line-height: var(--slds-g-font-line-height-1);
      letter-spacing: -0.014em;
      color: var(--slds-g-color-on-surface-2);
    }

    // No search field → the caption must supply its own top gap.
    &:not(:has(.SearchFieldLumina)) .GroupedButtonListCount {
      margin-top: var(--slds-g-spacing-4);
    }

    // Grey scroll backdrop so the list reads as a white card on the page colour.
    // !important overrides the inline background:transparent that scrollable.js sets for Lumina.
    .ScrollableContainer {
      flex: 1;
      min-height: 0;
      overflow-y: scroll;
      background: var(--slds-g-color-surface-2) !important;
    }

    // Scrollable's inner wrapper (the unclassed div holding FillerTop / ScrollableContent /
    // FillerBottom). Make it at least the scroller height and a flex column so the white card
    // can stretch to fill when there is little data; the ::after below adds the end gap as the
    // last flex child (after FillerBottom), so the gap survives even at the scroll end.
    .ScrollableContainer > div {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    // End-of-list gap: a real flex box (not padding/margin, which the browser clips at the
    // scroll end). As ::after it is the last child, so it sits below FillerBottom at the true end.
    .ScrollableContainer > div::after {
      content: "";
      flex: 0 0 var(--slds-g-spacing-4);
    }

    // Keep the virtualization spacers at their JS-set heights inside the flex column.
    .FillerTop,
    .FillerBottom {
      flex-shrink: 0;
    }

    // The white list card. flex:1 0 auto fills free space when data is little (card looks full,
    // not a short floating card) but never shrinks below content, so with lots of data it
    // overflows and the scroller scrolls — and its offsetHeight stays the true content height
    // for virtualization. Only the bottom corners are rounded: the top is flush with the grey
    // scroller (square, so the grey doesn't show through rounded top corners), the bottom rounds
    // above the ::after end gap for the floating-card look.
    .ScrollableContent {
      flex: 1 0 auto;
      background: var(--slds-g-color-surface-1);
      border-radius: 0 0 var(--slds-g-radius-border-3) var(--slds-g-radius-border-3);
    }

    .TitleBar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 0 0 var(--slds-g-sizing-10);
      min-height: var(--slds-g-sizing-10);
      height: var(--slds-g-sizing-10);
      padding: 0 var(--slds-g-spacing-4);
      box-sizing: border-box;
      border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);

      label {
        padding: 0;
        font-family: var(--slds-g-font-family);
        font-size: var(--slds-g-font-scale-2);
        font-weight: var(--slds-g-font-weight-6);
        line-height: var(--slds-g-font-line-height-4);
        color: var(--slds-g-color-on-surface-2);
      }

      .Icon {
        padding: 0;
        float: none;
        cursor: pointer;
        color: var(--slds-g-color-accent-2);
        font-size: 18px;
        font-weight: var(--slds-g-font-weight-6);
        line-height: 1;
      }
    }

    .GroupedButtonListItem {
      display: flex;
      flex-direction: column;
      gap: var(--slds-g-spacing-2);
      padding: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4);
    }

    .ButtonGrouping {
      padding: 0;
      background: transparent;
      font-family: var(--slds-g-font-family);
      font-size: var(--slds-g-font-scale-2);
      font-weight: var(--slds-g-font-weight-6);
      line-height: var(--slds-g-font-line-height-3);
      color: var(--slds-g-color-on-surface-3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ButtonListItemOuter {
      border: 0;

      // Override the legacy Selected background on the outer element.
      &.Selected {
        background: transparent;
        color: inherit;
      }

      .ButtonListItemInner {
        display: flex;
        flex-direction: column;
        gap: var(--slds-g-spacing-1);
        padding: var(--slds-g-spacing-3);
        background: var(--slds-g-color-surface-3);
        border-radius: var(--slds-g-radius-border-2);
        border: var(--slds-g-sizing-border-1) solid transparent; // Reserve space for selected border

        .itemName {
          font-family: var(--slds-g-font-family);
          font-size: var(--slds-g-font-scale-2); // 16px
          font-weight: var(--slds-g-font-weight-6);
          line-height: var(--slds-g-font-line-height-3); // 1.375 × 16px = 22px
          letter-spacing: 0.006em;
          color: var(--slds-g-color-on-surface-2);
        }

        .itemAddress {
          font-family: var(--slds-g-font-family);
          font-size: var(--slds-g-font-scale-1);
          font-weight: var(--slds-g-font-weight-4);
          line-height: 18px;
          letter-spacing: -0.014em;
          color: var(--slds-g-color-on-surface-1);
        }

        // Row layout: icon on left, text on right (when Image is present)
        &--row {
          flex-direction: row;
          gap: var(--slds-g-spacing-2);

          // Fixed 16x16 icon box. !important is required because the button renders as a
          // FullCalendar event (.fc-event), whose img sizing would otherwise win here.
          img {
            width: var(--slds-g-sizing-5) !important;
            height: var(--slds-g-sizing-5) !important;
            max-width: var(--slds-g-sizing-5) !important;
            max-height: var(--slds-g-sizing-5) !important;
            flex-shrink: 0;
            align-self: flex-start;
            margin-top: var(--slds-g-spacing-1); // align icon with text baseline
          }

          .ButtonListItemTextColumn {
            display: flex;
            flex-direction: column;
            gap: var(--slds-g-spacing-1);
            flex: 1;
          }
        }
      }

      &.Selected .ButtonListItemInner {
        background: var(--slds-g-color-surface-1);
        border-color: var(--slds-g-color-border-accent-1);
        box-shadow: var(--slds-g-shadow-2);
      }
    }
  }

  // FullCalendar dragging: style the detached ghost element.
  .fc-event-dragging:has(.ButtonListItemInner--row),
  .fc-event-selected:has(.ButtonListItemInner--row) {
    &.ButtonListItemOuter {
      // Clean outer container - no background or border
      background: transparent;
      border: 0;
      opacity: 1;
      box-shadow: none;
      margin: 0;
      padding: 0;
      // Match inner border-radius to clip properly
      border-radius: var(--slds-g-radius-border-2);
      overflow: hidden;

      // Remove gray overlay from ::after pseudo-element
      &::after {
        display: none;
      }

      // Override legacy Selected background when dragging (element is detached)
      &.Selected {
        background: transparent;
        color: inherit;
      }

      // Apply all ButtonListItemInner styles when dragging
      .ButtonListItemInner {
        display: flex;
        flex-direction: column;
        gap: var(--slds-g-spacing-1);
        padding: var(--slds-g-spacing-3);
        background: var(--slds-g-color-surface-1);
        border-radius: var(--slds-g-radius-border-2);
        border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-accent-1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);

        .itemName {
          font-family: var(--slds-g-font-family);
          font-size: var(--slds-g-font-scale-2); // 16px
          font-weight: var(--slds-g-font-weight-6);
          line-height: var(--slds-g-font-line-height-3); // 1.375 × 16px = 22px
          letter-spacing: 0.006em;
          color: var(--slds-g-color-on-surface-2);
        }

        .itemAddress {
          font-family: var(--slds-g-font-family);
          font-size: var(--slds-g-font-scale-1);
          font-weight: var(--slds-g-font-weight-4);
          line-height: 18px;
          letter-spacing: -0.014em;
          color: var(--slds-g-color-on-surface-1);
        }

        &--row {
          flex-direction: row;
          gap: var(--slds-g-spacing-2);

          img {
            width: var(--slds-g-sizing-5) !important;
            height: var(--slds-g-sizing-5) !important;
            max-width: var(--slds-g-sizing-5) !important;
            max-height: var(--slds-g-sizing-5) !important;
            flex-shrink: 0;
            align-self: flex-start;
            margin-top: var(--slds-g-spacing-1);
          }

          .ButtonListItemTextColumn {
            display: flex;
            flex-direction: column;
            gap: var(--slds-g-spacing-1);
            flex: 1;
          }
        }
      }
    }
  }

  .input.CancelButton,
  .input.CancelButtonTxt,
  .input.CancelButtonPhone,
  .input.CancelButtonSearch,
  .picker.CancelButton,
  .picker.CancelButtonPhone {
    width: 1.143em;
    height: 1.143em;
    background-repeat: no-repeat;
    right: 0;
    background-position: center;
    background-size: 1em 1em;
    background-position-y: 1.071em;
    padding: 0.714em 0.43em;
  }

  input.hasCancelIcon {
    padding-right: 1.573em !important;
  }

  .picker.CancelButton,
  .picker.CancelButtonPhone,
  .input.CancelButton,
  .input.CancelButtonPhone,
  .input.CancelButtonSearch {
    background-image: var(--inputarea-clear-img);
  }

  .input.CancelButtonTxt {
    background-image: url("../graphics/Icon_X.svg");
  }

  .input.CancelButtonPhone {
    margin-top: 0.2em;
    background-position-y: 0.3em;
    padding: 0.289rem 0.43em; // 5px
  }

  .inputWrapperPhone {
    display: -webkit-flex;
    position: relative;
  }

  .input.CancelButtonSearch {
    position: absolute;
    right: 2.5em;
    width: 0.925em;
    height: 0.925em;
    margin-top: 0.3em;
    background-position: center;
    padding: 0.462em;
  }

  .picker.CancelButtonPhone {
    //right:2em;
    right: 2.3em;
    padding: 0.2em 0.2311rem; // 4px
    background-position-y: 0.3em;
  }
  .picker.CancelButton {
    //right:2em;
    right: 2.3em;
    padding: 0.5em 0.2311rem; // 4px
    background-position-y: 0.8em;
  }
  .placeHolder {
    font-family: "Regular";
    font-size: 14px;
    color: fade(@colorBrightGrey, 50%);
  }

  ::-webkit-input-placeholder {
    .placeHolder();
  }

  :-moz-placeholder {
    /* Firefox 18- */
    .placeHolder();
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    .placeHolder();
  }

  :-ms-input-placeholder {
    .placeHolder();
  }

  .InputArea {
    .Stepper {
      input:focus {
        padding-top: 14px;
        padding-right: 8px;
      }
    }
  }

  //START - List theme for embedded elements - Overide the elements colors when they are part of a list to adopt to list theme instead of their individual theme colors
  .ListRow, .ListColumn > .Stepper {
    .InputAreaNumericHighLight {
      background-color: var(--list-inputarea-highlight-background-color) !important;
    }
    .Selected & {
      color:var(--list-selected-item-font-color);
    }
    input:focus {
      background-color: var(--list-inputarea-highlight-background-color) !important;
      color:var(--list-selected-item-font-color);
    }
    input:focus::selection {
      color:var(--list-selected-item-font-color);
    }
  }

  .ListColumn {
    .Stepper {
      input {
        background: transparent !important;
      }
      .InputAreaNumericHighLight {
        background-color: var(--inputarea-highlight-background-color) !important;
      }
    }
  }

  .ListColumn {
    .DatePicker{
      .Selected & {
        background: transparent !important;
        color: inherit !important;
      }
    }
  }

  .ListColumn {
    .InputArea {
      input {
        color:var(--list-item-font-color) !important;
      }
      .Selected & {
        color:var(--list-selected-item-font-color) !important;
      }
    }
  }

  .ListColumn {
    .SelectionBox {
      background: transparent !important;
      .Selected & {
        color:var(--list-selected-item-font-color) !important;
      }
    }

  }

  .ListColumn {
    .DatePicker {
      background: transparent !important;
    }
  }

  .ListColumn {
    .Stepper {
      .Selected & {
        color:var(--list-selected-item-font-color);
        }
    }
  }
  //END - List theme for embedded elements

  .StepperImage {
    width: 82px;
    height: 32px;
    background-image: var(--stepper-btn-2active-img);
    background-repeat: no-repeat;
    .Selected & {
      background-image: var(--stepper-btn-active-img);
      background-repeat: no-repeat;
    }
  }

  .StepperImagePlus {
    .StepperImage();
    background-image: var(--stepper-btn-2activePlus-img);
    background-repeat: no-repeat;
    .Selected & {
      background-image: var(--stepper-btn-activePlus-img);
      background-repeat: no-repeat;
    }
  }

  .StepperImageMinus {
    .StepperImage();
    background-image: var(--stepper-btn-2activeMinus-img);
    background-repeat: no-repeat;
    .Selected & {
      background-image: var(--stepper-btn-activeMinus-img);
      background-repeat: no-repeat;
    }
  }

.ContextmenuImage {
  background-repeat: no-repeat;
  background-position: center;
  .Selected & {
    background-repeat: no-repeat;
  }
}

  .SignatureControl {
    margin-top: 0.288em;
    margin-bottom: 0.288em;
    position: relative;

    @media @tablet {
      height: 11em;
      margin-left: 0.288em;
    }

    .SignatureSketch {
      display: block;
      width: 100%;
      height: 11em;
      background-color: white;
      z-index: 1002;
      -webkit-overflow-scrolling: touch;
      @media @phone {
        overflow: hidden;
      }
    }

    .SignatureImage {
      float: left;
      height: 10.3em;
      width: 100%;
    }

    .Hidden {
      visibility: hidden;
    }

    .SignatureImgUnderline {
      border-bottom: 1px solid #333;
      float: left;
      height: 11em;
      width: 75%;

      @media @phone {
        width: 90%;
        margin-left: 5%;
        margin-right: 0;
      }
    }

    .RightAlign {
      float: right;
      margin-right: 0.288em;
      width: -webkit-fill-available;
      margin-top: 0.288em;
      max-height: 5em;

      @media @phone {
        width: auto;
        min-width: 28%;
        max-width: 45%;
        word-wrap: none;
      }
    }
    .LastButton {
      @media @phone {
        margin-right: 0;
      }
    }

    .SignNowBtn {
      @media @phone {
        width: 28%;
        margin-top: 0.288em;
        margin-left: 5%;
      }
    }

    .SketchCanvas {
      border-bottom: 1px solid #000000;
      width: 75%;
      height: 11em;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .SketchCanvasPhone {
      display: block;
      width: 100%;
      height: 11em;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .SketchCanvas--lumina {
      display: block;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      width: 75%;
      height: 11em;
      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
      border-radius: var(--slds-g-radius-border-3);

      &.SketchCanvas--phone {
        width: 100%;
      }
    }

    .SignatureButtons {
      float: right;
      width: 25%;
      border-spacing: 0px;
      table-layout: fixed;
      word-break: break-word;
    }

    .SignatureButtonsPhone {
      border-top: 1px solid #000000;
      margin: 0 5%;
      overflow: hidden;
    }
  }

  .PictureEditor--lumina {
    background-color: var(--slds-g-color-surface-2);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;

    .PictureEditor__toolbar--lumina {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: var(--slds-g-spacing-3) var(--slds-g-spacing-5);
      flex-shrink: 0;
    }

    .PictureEditor__toolbar-label--lumina {
      font-family: var(--slds-g-font-family);
      font-weight: var(--slds-g-font-weight-6);
      font-size: var(--slds-g-font-scale-3);
      line-height: var(--slds-g-font-line-height-3);
      color: var(--slds-g-color-on-surface-2);
    }

    .PictureEditor__toolbar-actions--lumina {
      display: flex;
      gap: var(--slds-g-spacing-2);
    }

    .PictureEditor__master--lumina {
      flex: 1 1 auto;
      overflow: hidden;
    }
  }

  .NoMSTouch {
    -ms-touch-action: none;
    touch-action: none;
  }

  .CockpitMap {
    position: relative;
  }

  .MapWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .dummymap {
    background-color: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      max-width: 100%;
      max-height: 100%;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    @media @phone {
      // position: fixed !important; this is preventing dummy map to get displayed in cockpit.
    }
  }

  .MapNoDataMessageContainer {
    .StretchedFlexItem();
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;

    .NoDataMessageContainer {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .MultiArea {
    display: -webkit-flex;
  }

  /* iphone 5 */
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .FlyOut {
      .Message {
        main {
          max-height: 14.446em;
          overflow: scroll;
        }
      }
    }
  }

  @media screen and (max-width: 640px) {
    .FlyOut {
      .Message {
        main {
          max-height: 16.18em;
          overflow: scroll;
        }
      }
    }
  }

  .DeploymentScreenSFProgressbarLogo {
    @media @tablet {
      max-height: 6.5em;
      padding: 1.5em 0em 1.849rem 0em; // 32px
      left: 2.5em;
      top: 3.5em;
    }
    @media @phone {
      max-height: 3.05em;
      padding: 1em 0em;
      left: 1.4em;
      top: 1.4em;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .GroupedList{
    @media @phone {
      overflow-x: hidden;
    }
    .lastItemInGroup {
      border-bottom: none !important;
    }

    &.GroupedList--lumina {

      .GroupElement ~ &,
      &:has(~ .GroupElement) {

        table.List tr.GroupRow td {
          padding-left: var(--slds-g-spacing-4);
          padding-right: var(--slds-g-spacing-4);
        }
      }

      .ScrollableContainer {
        padding: 0;
      }

      .ScrollableContent {
        padding-right: var(--slds-g-spacing-2);

        @media @phone {
          padding-right: 0;
        }
      }

      table.List tr.GroupRow td {
        background-color: var(--slds-g-color-palette-neutral-100);
        padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4) var(--slds-g-spacing-3) var(--slds-g-spacing-0);
      }

      &.GroupedList--v2 {
        table.List tr.GroupRow td {
          background-color: transparent;
        }
        table.List.List--lumina {
          border-collapse: separate;
          border-spacing: 0;
          tr.GroupRow + tr td:first-child { border-top-left-radius: var(--slds-g-radius-border-3); }
          tr.GroupRow + tr td:last-child  { border-top-right-radius: var(--slds-g-radius-border-3); }
          tr.lastItemInGroup td:first-child { border-bottom-left-radius: var(--slds-g-radius-border-3); }
          tr.lastItemInGroup td:last-child  { border-bottom-right-radius: var(--slds-g-radius-border-3); }
        }
      }

      &.GroupedList--styledGroupRow {
        table.List tr.GroupRow td {
          background-color: var(--slds-g-color-palette-neutral-95);
          border-radius: var(--slds-g-radius-border-3);
          padding-left: var(--slds-g-spacing-4);
          padding-right: var(--slds-g-spacing-4);
        }
      }

      // Lumina chrome — applies in both compatibility and lumina mode.
      // Backgrounds, borders, selection state, group-row label color, sticky thead.
      // Anything that affects width/padding/font lives in `.List--lumina-full` below.
      table.List.List--lumina {
        border-collapse: separate;
        border-spacing: 0;
        thead {
          position: sticky;
          top: 0;
          z-index: 1;
          /* Extend header coverage upward (same color) to mask group header bleed when scrolling */
          box-shadow: 0 -2px 0 0 var(--slds-g-color-surface-container-1);
          tr td {
            background-color: var(--slds-g-color-surface-container-1);
          }
          tr td:first-child { border-top-left-radius: var(--slds-g-radius-border-3); }
          tr td:last-child  { border-top-right-radius: var(--slds-g-radius-border-3); }
        }
        tr {
          border-bottom: none;
        }
        tr:not(.GroupRow) {
          background-color: var(--slds-g-color-surface-container-1);
        }
        tr.Selected:not(.GroupRow) {
          background-color: var(--slds-g-color-palette-blue-95);
        }
        tr:not(.GroupRow) td {
          border-bottom: 1px solid var(--slds-g-color-border-1);
        }
        tr.lastItemInGroup td {
          border-bottom: 1px solid var(--slds-g-color-palette-neutral-95);
        }
        tr:last-child:not(.GroupRow) td {
          border-bottom: none;
        }
        /* GroupRow label color — title tier (on-surface-3 / Blue 15).
           Font sizing is a metrics concern — see .List--lumina-full. */
        tr.GroupRow {
          color: var(--slds-g-color-on-surface-3);
        }
        /* Prevent scrollIntoView() from hiding rows behind the sticky thead.
           scroll-margin-top tells the browser to leave this much clearance at the top
           when scrolling a row into view (matches thead padding 16px*2 + ~22px line-height). */
        &:has(thead) tbody tr {
          scroll-margin-top: 54px;
        }
        td.ListColumn:has(.CheckBox--lumina) {
          > div {
            display: flex;
            justify-content: flex-end;
          }
          .CheckBox--lumina {
            justify-content: flex-end !important;
          }
        }
        td.ContextMenuItem,
        td.ContextMenuItemWithIndex {
          width: 20px;
          padding: 0;
        }
      }
      // Lumina metrics — applies in lumina mode only.
      // Paddings, font-family, structural sizing rules. Any change here will
      // affect contract column widths (em-based).
      table.List.List--lumina-full {
        tr:not(.GroupRow) td {
          padding: var(--slds-g-spacing-2) var(--slds-g-spacing-1);
        }
        tr:not(.GroupRow) td:first-child {
          padding-left: var(--slds-g-spacing-4);
        }
        tr:not(.GroupRow) td:last-child {
          padding-right: var(--slds-g-spacing-4);
        }
        /* GroupRow label font (metrics) — color is in .List--lumina chrome scope */
        tr.GroupRow {
          font: var(--slds-g-font-weight-6) var(--slds-g-font-scale-2) var(--slds-g-font-family);
        }
        /* Column-header (thead) font/color/background are CSS-owned under Lumina — see the
           form-agnostic `table.List.List--lumina thead` (chrome) and `.List--lumina-full thead`
           (metrics) scopes in listitem-layouts-lumina.less, which cover GroupedList +
           EmbeddedList + CockpitList uniformly (this GroupedList-scoped block does not). */
        /* When column headers (thead) are present, GroupRow must indent to align with header cells */
        &:has(thead) tr.GroupRow td {
          padding-left: var(--slds-g-spacing-4);
        }
        td.ListColumn {
          font-family: var(--slds-g-font-family);
        }
        // Break the circular sizing dependency between width: 100% form fields
        // and table-layout: auto cell sizing. iOS WKWebView resolves this cycle
        // to a wider value than desktop browsers, causing table overflow.
        // contain: inline-size tells the browser to not use content for intrinsic
        // width calculation, so the table respects its width: 100% constraint.
        td.ListColumn > div {
          contain: inline-size;
        }
        // Stacked rows inside a flex column: add 6px vertical gap between ListRow children
        td.ListColumn > div:has(.ListRow + .ListRow) {
          display: flex;
          flex-direction: column;
          gap: 6px; // TODO: no exact SLDS token for 6px (jumps 4->8) - confirm with UX
        }
      }
      .EmbeddedList table.List:not(.List--lumina) td.ListColumn > div:has(.ListRow + .ListRow) {
        display: flex;
        flex-direction: column;
        gap: 6px;
        > .ListRow {
          margin-top: 0;
        }
      }
      /* Blue vertical indicator (4px) on selected row when showSelectedIndicator="true" only.
         box-shadow overlays the left 4px of the 16px padding; no layout shift, content stays at 16px from left. */
      &.GroupedList--showSelectedIndicator table.List.List--lumina tr.Selected:not(.GroupRow) td:first-child {
        box-shadow: inset var(--slds-g-sizing-border-4) 0 0 var(--slds-g-color-border-accent-2);
      }
      /* v2 list: remove left border-radius on first/last selected row so the blue indicator has clean square corners */
      &.GroupedList--v2.GroupedList--showSelectedIndicator table.List.List--lumina {
        tr.GroupRow + tr.Selected td:first-child {
          border-top-left-radius: 0;
        }
        tr.Selected.lastItemInGroup td:first-child {
          border-bottom-left-radius: 0;
        }
      }
    }
  }

  .BtnInList {
    position: relative;
    display: inline-block;
    height: 28px;
    min-width: 28px;
    border-radius: 28px;
  }

  .ButtonImageActive {
    opacity: 1;
    height: 16px;
    min-width: 16px;
    margin-left: 6px;
    margin-top: 6px;
  }
  .IconFlexListMessage {
    height: 18px;
    width: 18px;
    margin: 8px;
  }
  .FlexListMessageBox {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-family: "Medium";
    font-size: 13px;
    padding-right: 8px;
    @media @phone {
      font-size: 12px;
    }
  }
  .FlexListMessage{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ButtonBadgeClass{
    position: absolute;
    font-size: 8px;
    display: flex;
    top: -2.2px; right: -1.5px;
    height: 12px; width: 12px;
    border-radius:12px;
    align-items: center;
    justify-content:center;
    font-family: "Medium";
  }