/* ==========================================================================
   Base layer: element defaults, typography scale and shared animations.

   Consolidated out of theme.css / theme-override.css. Loads immediately
   after theme-override.css, before components/, so every rule keeps the
   relative cascade position it had before the move.
   ========================================================================== */

/* ----- from theme.css ----- */

body,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
.navbar,
.brand,
.btn-simple,
a,
td,
button.close {
  /* Grayscale antialiasing thins glyph stems. That is the right trade for
     pale text on a dark page, where subpixel rendering fringes and the
     stems bloom anyway; on dark-on-light it just makes the type look
     under-weight, so light hands rendering back to the platform. */
  -moz-osx-font-smoothing: var(--font-smoothing-moz);
  -webkit-font-smoothing: var(--font-smoothing);
  font-family: var(--font-family-base); }h1, .h1 {
  font-size: 1.725rem;
}

h2, .h2 {
  font-size: 1.35rem; }

h3,
.h3 {
  font-size: 1.1625rem; }

h4,
.h4 {
  font-size: 1.0375rem; }

h5,
.h5 {
  font-size: .9125rem; }

h6,
.h6 {
  font-size: .825rem; }

p {
  font-size: 14px;
  line-height: 1.82;
  margin-bottom: 1rem;
  word-break: break-word; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.4;
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--heading-tracking); }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
    color: inherit; }

small, .small {
  font-size: 13px; }

b, .b, strong, .strong {
  font-weight: var(--font-weight-strong); }.loader {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 3px solid var(--color-purple);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: 1s spin linear infinite; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
.sortable-ghost {
  opacity: 0.4; }
    body[data-background-color="dark"] .card {
      background: #24252a9c; }    body[data-background-color="dark"] .page-title, body[data-background-color="dark"] .breadcrumbs li a {
      color: rgba(169, 175, 187, 0.82); }    body[data-background-color="dark"] .input-group-text {
      border-color: var(--input-border) !important;
      background-color: var(--input-bg);
      color: #fff; }
/* ----- from theme-override.css ----- */
/* pulsing button */
@keyframes pulse_2 {
    0% {
        transform: scale(0.93);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.93);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}@keyframes masquerade-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    70%, 100% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}/* Disable pointer events on disabled elements */
a[disabled], button[disabled] {
    pointer-events: none !important;
}
@keyframes smartgate-phone-warn-flash {
    0% { opacity: 1; transform: scale(1); }
    40% { opacity: 0.3; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}pre {
    color: var(--text-tertiary);
}@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ======================================================================
   Merged in from theme.css / theme-override.css.
   ====================================================================== */

/* ----- from theme-override.css ----- */
/* Material Design Icons draw their glyph small within a padded 24-unit em
   box, so at a given font-size they read much smaller than the Font Awesome
   icons they sit beside. Scale the glyph itself (the ::before pseudo) up by
   1.5em — relative to whatever font-size the context gives the icon element,
   so it tracks the fa icons in every context (18px nav icons, inline 1em
   tabs, etc.) without per-context rules. `vertical-align: 0` keeps it on the
   text baseline, matching how fa icons sit. Icons given an explicit size
   class (mdi-18px, mdi-24px, ...) carry their own sizing and are excluded.
   Element-agnostic: mdi can sit on <i>, <em>, <span>, etc. */
.mdi:not(.mdi-18px):not(.mdi-24px):not(.mdi-36px):not(.mdi-48px)::before {
    font-size: 1.5em;
    line-height: 1rem;
    vertical-align: 0;
}