@-webkit-keyframes slide-in {
  0%  {left: -100%;}
  100%  {left: 0px;}
}

@keyframes slide-in {
  0%  {left: -100%;}
  100%  {left: 0px;}
}

@-webkit-keyframes header-slide-in {
  0%  {left: -8em;}
  100%  {left: 0em;}
}

@keyframes header-slide-in {
  0%  {left: -8em;}
  100%  {left: 0em;}
}

@font-face {
  font-family: "Regular";
  src: url("firasans/FiraSans-Regular.ttf");
}

@font-face {
  font-family: "Light";
  src: url("firasans/FiraSans-Light.ttf");
}

@font-face {
  font-family: "Medium";
  src: url("firasans/FiraSans-Medium.ttf");
}

@font-face {
  font-family: "SemiBold";
  src: url("firasans/FiraSans-SemiBold.ttf");
}

@font-face {
  font-family: "Bold";
  src: url("firasans/FiraSans-Bold.ttf");
}

/* Single "Fira Sans" family for token stack (--slds-g-font-family-base): SF Pro → Roboto → Fira Sans */
@font-face {
  font-family: "Fira Sans";
  src: url("firasans/FiraSans-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("firasans/FiraSans-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("firasans/FiraSans-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("firasans/FiraSans-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("firasans/FiraSans-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

.StandardFontSize {
  font-size: 104%;
}

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

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

.StandardFont {
  font-family: "Regular", sans-serif;
  .StandardFontSize();
}

.NoPadding { padding: 0 }

.NoMargin { margin: 0 }

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */

  // deactivate image hold and drag functionality of safari
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
}

input
{
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

.DefaultControlStyle {
  -webkit-appearance: none !important;
  -webkit-user-select: auto !important;
}

.FirstLevelContainer {
  box-sizing: border-box;
  min-height: 100%;
  height: 100%;
}

.FlexContainer {
  display : flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.FlexContainerHorizontal {
  display : flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  min-height: 0;
  min-width: 0;
}

.FlexContainerCenteredContent {
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.StretchedFlexItem {
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.SolidFlexItem {
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

// Lumina dropdown "pill" look: rounded capsule, surface background, accent-colored
// icon / text / arrow, fixed height. Shared by the HeaderLine filter dropdowns and the
// right-aligned PageHeader dropdown so the styling has one source.
// Apply on a `.Dropdown` rule via `.LuminaDropdownPill();`. Parametric mixin form (parens)
// so it emits no literal class — only the rules at each call site.
.LuminaDropdownPill() {
  display: flex;
  min-width: 200px;
  width: fit-content;
  height: var(--slds-g-spacing-7);
  min-height: var(--slds-g-spacing-7);
  max-height: var(--slds-g-spacing-7);
  margin: 0;
  padding: 0 var(--slds-g-spacing-4);
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--slds-g-radius-border-circle) !important;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2) !important;
  background: var(--slds-g-color-surface-container-1) !important;
  box-sizing: border-box;
  flex-shrink: 1;
  overflow: visible;

  &.Dropdown--active {
    background: var(--slds-g-color-palette-neutral-95) !important;
    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;

    .DropdownFilterImg--lumina.SvgIconMask {
      background-color: var(--slds-g-color-accent-3);
    }

    .DropdownText {
      color: var(--slds-g-color-accent-3) !important;
    }

    .DropdownArrow {
      background-color: var(--slds-g-color-accent-3);
    }
  }

  .Container {
    display: flex;
    align-items: center;
    gap: var(--slds-g-spacing-2);
    margin: 0;
    overflow: hidden;
    min-width: 0;
  }

  .IconContainer {
    max-width: 18px;
    max-height: 18px;
    min-width: 18px;
    min-height: 18px;
  }

  .DropdownFilterImg--lumina.SvgIconMask {
    width: 18px;
    height: 18px;
    background-color: var(--slds-g-color-accent-2);
  }

  .DropdownText {
    color: var(--slds-g-color-accent-2) !important;
    text-align: left;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--slds-g-font-family-base);
    font-size: var(--slds-g-font-scale-1);
    font-weight: var(--slds-g-font-weight-6);
    line-height: var(--slds-g-font-line-height-3);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .DropdownFilterImg {
    width: 18px;
    height: 18px;
  }

  .DropdownArrow {
    width: 18px;
    height: 18px;
    background-color: var(--slds-g-color-accent-2);
  }

  // Phone compact variant — icon + chevron pill, no label.
  @media @phone {
    &:not(.Dropdown--phoneLabel) {
      flex: 0 0 auto;
      min-width: unset;

      .DropdownFilterImg,
      .DropdownArrow {
        width: var(--slds-g-sizing-5);
        height: var(--slds-g-sizing-5);
      }

      .IconContainer--phone {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--slds-g-spacing-2);
        align-self: stretch;
        max-width: none;
        max-height: none;
      }
    }
  }
}

.alignCenter {
  text-align: center;
  text-align: -webkit-center;
}

.alignLeft {
  text-align: left;
  text-align: -webkit-left;
}

.alignRight {
  text-align: right;
  text-align: -webkit-right;
}

.CenteredContentContainer {
  .StretchedFlexItem();
  .FlexContainer();
  .FlexContainerCenteredContent();
}

.Monospace {
  font-family: Menlo, monospace;
  .StandardFontSize();
}

.Hidden {
  display: none;
}

.Invisible {
  visibility: hidden;
}
 .DeploymentScreen .Invisible {
  display: none;
}

.ScrollableContainer {
  .StretchedFlexItem();
  .FlexContainer();
  overflow: hidden;
  z-index: 1;
}

.Scrollable {
  .StretchedFlexItem();
  overflow-y: auto;
  overflow-x: hidden;
  // -webkit-overflow-scrolling: touch; -- due to a WebKit bug
}

.XYScrollable {
  .StretchedFlexItem();
  overflow-y: auto;
  overflow-x: auto;
}

.XScrollable {
  .StretchedFlexItem();
  overflow-y: hidden;
  overflow-x: auto;
}

// for phone layout
.ScrollableXY {
  overflow: auto;
}

.Opaque {
  opacity: 0.5;
}

.Selected {
  .PrimeColorScheme();
  .itemSecondary, .itemValue {
    color: @background;
  }
}

.Transparent {
  background-color: transparent;
}

.Disabled {
  opacity: 0.55;
  pointer-events: none;
  tbody {
    opacity: 0.55
  }
}

a.SvgImage:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

a.SvgImage {
  position:relative;
  display:inline-block;
  background: transparent;
}

.OpensDebugScreen {
  
}

.AttachmentViewer {
  width: 100%;
  height: 100%;
  border: 0;
}

.AttachmentViewer--lumina {
  background: var(--slds-g-color-surface-container-2);
  border-radius: 0;
}