/*
 * Copyright (c) 2024 Voxtell
 * All rights reserved.
 * 
 * This CSS file is protected under the Florida Statutes Chapter 501, Part II,
 * and Florida common law governing intellectual property rights and trade secrets.
 * Unauthorized copying, modification, distribution, or use of this file,
 * via any medium, is strictly prohibited.
 *
 * Any violation may result in civil and criminal penalties under
 * Florida state law.
 *
 * Version: 1.0
 * Last modified: 2024-11-14
 */

@import url("vt-shared.css?v=20260828");
@import url("vt-resets.css?v=20260828");

#vt-ns-plugin {
  height: 100% !important;
}

.ui-state-active,a,a:focus,a:hover {
  text-decoration: none
}

div#header-logo {
  display: flex;
  width: 120px;
  padding: 0 4px;
  margin-bottom: 14px;
}

body:has(#domain-message) .page-container > .wrapper {
  height: calc(100vh - 40px);
}

.page-container {
  padding-left: 0;
  padding-right: 0;

  background-color: var(--chakra-colors-bg-muted);

  & > .wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    max-width: none;
    padding: 0;
    background-color: transparent;
    height: 100dvh;
  }
}

#header-user {
  position: fixed;
  top: 8px;
  right: 24px;
  z-index: 1000;
  height: auto;
  padding-top: 0;
}

.user-toolbar {
  margin: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  .nsicon, .icon {
    font-size: 15px;
    opacity: 0.6;
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin: 0;
    &:before {
      content: none;
    }
  }
  .nsicon-language {
    background-image: var(--icon-globe);
  }
  .nsicon-user {
    background-image: var(--icon-user-circle);
    /* the circled-user glyph has inner padding in its viewBox - optically
       match the other 13px toolbar icons */
    width: 16px;
    height: 16px;
  }

  .dropdown > .dropdown-msg-count {
    margin-left: 0 !important;
  }

  /* (count badge styling comes from the portal-wide .badge rules) */

  li {
    margin: 0 4px;
    a {
      color: var(--colors-gray-700);
      &:hover {
        color: var(--colors-fg);
      }
    }

    &.dropdown, .dropdown {
      display: inline-flex;
      align-items: center;
      gap: 4px;

      .dropdown-toggle {
        display: inline-flex;
        align-items: center;
      }

      .caret {
        margin: 0;
        display: none !important;
      }
    }
  }
  li:before {
    display: none;
  }
  li:hover .nsicon, li:hover .icon {
    opacity: 1;
  }
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  .caret {
    margin-top: 0;
  }
}

body:has(#domain-message) #header-user, body:has(.mask-bar) #header-user {
  top: 44px;
}

#header {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  margin: 0;
  width: 230px;
  box-sizing: border-box;

  #navigation {
    flex: 1;
    overflow-y: auto;
  }
}

#nav-buttons {
  /* first item aligns with Vee's first sidebar item (measured +6px) */
  padding-top: 6px;

  /* flex column purely so `order` can lift the Vee link under Home. The Vee
     plugin appends li#voxtell-vee to the END of this list dynamically - we
     only move it VISUALLY, never in the DOM, so the plugin's injection,
     click handler and loading state stay untouched. */
  display: flex;
  flex-direction: column;

  li:has(> a#LinkHomeIndex) { order: -3; }
  /* guarded on Home existing in this scope's nav - otherwise Vee keeps its
     natural (bottom) DOM position instead of jumping to the very top */
  &:has(a#LinkHomeIndex) li#voxtell-vee { order: -2; }
  /* Call Intelligence sits under Vee (injected by vt-nav.js) */
  &:has(a#LinkHomeIndex) li#vt-ci-nav { order: -1; }

  li {
    display: block;
    margin-bottom: 2px;
  }

  /* section titles, styled to match Vee's "Assistants" group label
     (12px / 500 at 70% fg, ~20px breathing room above) */
  li:has(> a#LinkAgentsManager)::before,
  li:has(> a#LinkAgentsIndex)::before,
  li:has(> a#LinkAttendantsIndex)::before,
  li:has(> a#LinkInventoryIndex)::before {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
    padding: 18px 10px 6px;
  }

  /* domain-manager scope only (Auto Attendants exists just there) - without
     the guard the 'Team' title leaks into the call-center supervisor scope,
     which shares the LinkAgentsManager id */
  &:has(a#LinkAttendantsIndex) {
    li:has(> a#LinkAgentsManager)::before,
    li:has(> a#LinkAgentsIndex)::before { content: 'Team'; }
  }
  li:has(> a#LinkAttendantsIndex)::before { content: 'Call Flow'; }
  li:has(> a#LinkInventoryIndex)::before { content: 'Resources'; }

  /* call-center supervisor scope: has the Call Center item but no Auto
     Attendants */
  &:has(a#LinkAgentsManager):not(:has(a#LinkAttendantsIndex)) {
    li:has(> a#LinkUsersIndex)::before,
    li:has(> a#LinkMusicIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before {
      display: block;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
      color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
      padding: 18px 10px 6px;
    }

    li:has(> a#LinkUsersIndex)::before { content: 'Team'; }
    li:has(> a#LinkMusicIndex)::before { content: 'Call Flow'; }
    li:has(> a#LinkCallhistoryIndex)::before { content: 'Activity'; }
  }

  /* user (customer) scope - guarded by the Messages link, which only exists
     there, since some ids (e.g. Call History) also appear in the manager nav */
  &:has(a#LinkVoicemailsIndex) {
    li:has(> a#LinkVoicemailsIndex)::before,
    li:has(> a#LinkAnswerrulesIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before {
      display: block;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
      color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
      padding: 18px 10px 6px;
    }

    li:has(> a#LinkVoicemailsIndex)::before { content: 'Communications'; }
    li:has(> a#LinkAnswerrulesIndex)::before { content: 'Call Settings'; }
    li:has(> a#LinkCallhistoryIndex)::before { content: 'Activity'; }
  }

  /* the Vee entry (no id on its link) stands apart from the NS sections */
  li:has(> a.nav-link:not([id])) {
    margin-top: 18px;
  }

  /* measured against Vee's sidebar (2026-08-26): 30px items on a 32px pitch,
     ~14px regular-weight labels in gray-900, 17px icons in the same color */
  a.nav-link {
    text-align: left;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items:center;
    color: var(--chakra-colors-gray-900);
    border-radius: var(--chakra-radii-md);
    padding: 0 10px;
    height: 30px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    /* colors only - transitioning `all` tweened LAYOUT during the
       collapse/expand toggle (icons sliding, paddings morphing), which read
       as duplicated content; the rail's width slide is the only motion */
    transition-property: background-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;

    .nav-button, .nav-arrow {
      display: none;
    }

    .nav-bg-image {
      display: block;
      width: 17px;
      height: 17px;
      position: static;
      /* mask icons follow the link's text color; no extra fade needed */
      opacity: 1;
      transition-property: background-color;
      transition-duration: 0.15s;
      transition-timing-function: ease-in-out;
    }

    .nav-text {
      display: inline;
      width: auto;
      height: auto;
      color: inherit;
      margin: 0;
      text-shadow: none !important;
    }

    &:hover {
      color: var(--chakra-colors-sidebar-accent-fg);
      background-color: var(--chakra-colors-sidebar-accent-bg);

      .nav-bg-image {
        opacity: 1;
      }
    }
  }

  .nav-link-current .nav-link {
    color: var(--chakra-colors-sidebar-accent-fg);
    background-color: var(--chakra-colors-sidebar-accent-bg);

    .nav-bg-image {
      opacity: 1;
    }
  }
}

#navigation-subbar {
  display: none;
}

/* when the dashboard widget mounts on home, it replaces the stock panels.
   vt-dash-boot is set pre-paint by the head include so the stock home never
   flashes; vt-dashboard.js swaps it for vt-dash-active on a successful mount,
   and boot is removed (revealing stock home) if the bundle fails or times out */
html.vt-dash-boot #content > *:not(#vt-dash-host):not(#vt-ns-plugin),
html.vt-dash-active #content > *:not(#vt-dash-host):not(#vt-ns-plugin) {
  display: none !important;
}

/* Call Intelligence route (#vt-intelligence on manager home) - same contract:
   vt-ci-boot pre-paint from the head include, vt-ci-active on mount. The
   dashboard host is a #content child, so it hides with the rest here. */
html.vt-ci-boot #content > *:not(#vt-ci-host):not(#vt-ns-plugin),
html.vt-ci-active #content > *:not(#vt-ci-host) {
  display: none !important;
}
/* active state hides the Vee container too: after a Vee visit its plugin
   stays in #content, and Call Intelligence would render beneath it. The
   boot rule keeps the exemption (pre-paint must never blank Vee). Leaving
   CI removes vt-ci-active, so Vee reappears untouched. */

/* Call Intelligence nav icon: painted with the brand gradient (violet ->
   orange, DESIGN.md). Higher specificity than the shared icon rule, so it
   wins among the !important declarations regardless of file order. */
#nav-buttons #vt-ci-link .nav-bg-image {
  background-image: linear-gradient(135deg, #8a05ff, #d67f2e) !important;
}

/* Beta pill on the Call Intelligence nav entry - identical treatment to the
   Vee plugin's "New" badge (span.nav-badge, measured live 2026-08-29) */
.vt-nav-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  background: linear-gradient(to right, oklch(0.511 0.262 276.966), oklch(0.718 0.202 349.761));
  color: #fff;
  flex-shrink: 0;
}
html.vt-nav-collapsed #vt-ci-link .vt-nav-pill {
  display: none;
}

/* reserved slot: identical box to a nav item (30px + 2px margin, order -1
   = the CI position under Vee), shown from the pre-paint vt-ci-slot class
   until the real entry lands - the menu never shifts */
html.vt-ci-slot #nav-buttons:not(:has(li#vt-ci-nav))::before {
  content: '';
  display: block;
  height: 30px;
  margin-bottom: 2px;
  order: -1;
}

/* Call Intelligence rides the home URL, so NS also marks Home current -
   unpaint Home while CI is the visible page (hover still works). The
   vt-ci-boot variant covers the pre-paint window on a full load into CI,
   before the foot include has marked the entry current. */
#nav-buttons:has(li#vt-ci-nav.nav-link-current) li.nav-link-current:has(> a#LinkHomeIndex) > a.nav-link:not(:hover),
html.vt-ci-boot li.nav-link-current:has(> a#LinkHomeIndex) > a.nav-link:not(:hover) {
  color: var(--chakra-colors-gray-900);
  background-color: transparent;
}

/* ---- collapsible side nav (vt-nav.js toggles html.vt-nav-collapsed) ---- */

/* animate only on real toggle clicks (vt-nav.js sets vt-nav-anim), never on
   page load - otherwise a collapsed nav visibly retracts on every navigation */
html.vt-nav-anim #header {
  transition: width 0.2s ease-in-out;
}

/* keep labels/titles from wrapping into the animating rail - they clip
   cleanly at the edge instead of reflowing mid-transition. Scoped to the
   animation (vt-nav.js removes the class on transitionend): steady states
   must NOT clip, or the collapsed rail's tooltips get cut off. */
html.vt-nav-anim #header {
  overflow: hidden;
}

/* ...and no scrollbar may FLASH anywhere while layout reflows through the
   0.2s slide - every scroll container pauses for the animation (the class
   is removed on transitionend, restoring normal scrolling) */
html.vt-nav-anim,
html.vt-nav-anim body,
html.vt-nav-anim #content,
html.vt-nav-anim #header #navigation {
  overflow: hidden !important;
}

#nav-buttons a.nav-link,
#nav-buttons li::before {
  white-space: nowrap;
}

/* ---- sidebar announcement card (vt-nav.js renders from announcements.json) ---- */
#vt-nav-announcement {
  position: relative;
  flex-shrink: 0;
  /* the card anchors ITSELF to the bottom: the toggle (which used to carry
     the only auto margin) is created by deferred JS, so pre-paint the card
     sat high and visibly dropped when the toggle arrived */
  margin-top: auto;
  /* FIXED width (header 230 - 20 padding - 8 margins): with width:auto the
     card reflowed frame-by-frame while the rail width animated on expand -
     fixed, it lays out once and the sliding edge just reveals it */
  width: 202px;
  box-sizing: border-box;
  margin: 10px 4px 12px;
  padding: 12px;
  border: 1px solid var(--chakra-colors-border);
  border-radius: var(--chakra-radii-lg);
  background: var(--chakra-colors-bg-panel);
}

#vt-nav-announcement .vt-ann-art {
  display: block;
  width: 100%;
  /* reserve the art's exact box before the image paints - both product
     canvases are 232x88; without this the card grew on image load */
  aspect-ratio: 232 / 88;
  border-radius: var(--chakra-radii-sm);
  margin-bottom: 10px;
}

#vt-nav-announcement .vt-ann-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: var(--chakra-radii-md);
  color: var(--chakra-colors-fg-subtle);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
#vt-nav-announcement .vt-ann-close:hover {
  opacity: 1;
  background: var(--chakra-colors-bg-muted);
  color: var(--chakra-colors-fg);
}

#vt-nav-announcement .vt-ann-chip {
  display: inline-block;
  border: 1px solid var(--chakra-colors-accent-emphasized);
  color: var(--chakra-colors-accent-fg);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--chakra-radii-full);
  margin-bottom: 8px;
}

#vt-nav-announcement .vt-ann-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--chakra-colors-fg);
  padding-right: 14px;
}

#vt-nav-announcement .vt-ann-body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--chakra-colors-fg-muted);
  margin-top: 3px;
}

#vt-nav-announcement .vt-ann-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chakra-colors-accent-fg);
}

/* no room in the collapsed rail */
html.vt-nav-collapsed #vt-nav-announcement {
  display: none;
}

/* collapse toggle: a discoverable footer row (icon + label + hairline),
   not a bare ghost icon - team testing showed nobody found the old one */
#vt-nav-toggle {
  margin-top: auto; /* still anchors when no announcement card is shown */
}
/* when the card is shown IT owns the bottom anchor - two auto margins would
   split the free space and float both mid-column */
#header:has(#vt-nav-announcement) #vt-nav-toggle {
  margin-top: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--chakra-colors-fg-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* toggle slot: hold its 41px box (40 + hairline) until the deferred nav
   script creates it, so the bottom-anchored card never moves */
#header:not(:has(#vt-nav-toggle))::after {
  content: '';
  display: block;
  box-sizing: border-box; /* toggle is border-box: 40px includes its hairline */
  height: 40px;
  flex-shrink: 0;
  border-top: 1px solid var(--chakra-colors-border-muted);
  align-self: stretch;
  margin-top: auto; /* anchors the empty state when no card is shown either */
}
#header:has(#vt-nav-announcement):not(:has(#vt-nav-toggle))::after {
  margin-top: 0; /* the card above already claimed the free space */
}

#vt-nav-toggle::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--vt-icon-goback) center / 18px no-repeat;
  mask: var(--vt-icon-goback) center / 18px no-repeat;
}

#vt-nav-toggle::after {
  content: 'Collapse';
}

#vt-nav-toggle:hover {
  color: var(--chakra-colors-fg);
  background: var(--chakra-colors-bg-muted);
}

html.vt-nav-collapsed {
  #header {
    width: 58px;
    padding-left: 8px;
    padding-right: 8px;
    /* tooltips overhang the rail - sit above #content */
    position: relative;
    z-index: 20;
  }

  /* the scroll container would clip the overhanging tooltips; the icon rail
     is short enough to never need scrolling. (#header prefix: must outrank
     the base `#header #navigation` overflow-y:auto rule) */
  #header #navigation {
    overflow-y: visible;
  }

  /* styled tooltip replacing the native title (dark pill to the right of the
     icon; slight show delay so sweeping the rail doesn't flicker) */
  #nav-buttons a.nav-link {
    position: relative;
  }
  #nav-buttons a.nav-link::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    translate: 0 -50%;
    background: var(--chakra-colors-gray-900);
    color: var(--chakra-colors-bg-panel);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 9px;
    border-radius: var(--chakra-radii-md);
    box-shadow: var(--chakra-shadows-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease 0s;
    z-index: 30;
  }
  #nav-buttons a.nav-link:hover::after {
    opacity: 1;
    transition-delay: 0.25s;
  }

  /* compact brand mark (the wordmark's speech-bubble 'o') replaces the full
     wordmark. Same 37px block height and left anchor as the wordmark, so
     nothing below shifts between states - and the mark's center lands on the
     collapsed icon column axis. */
  div#header-logo {
    height: 37px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 10px;
  }

  #nav-buttons {
    padding-top: 0;
  }

  /* the 18px Vee group margin is an expanded-mode separator - in the rail
     it doubled the Home->Vee gap and broke the rhythm */
  #nav-buttons li:has(> a.nav-link:not([id])) {
    margin-top: 0;
  }

  div#header-logo img {
    content: url(img/voxtell-mark.svg);
    width: auto;
    /* proportional to the ~18px nav icons below (26px read oversized) */
    height: 20px;
  }

  #nav-buttons {
    a.nav-link {
      justify-content: center;
      padding: 0;
      gap: 0;

      .nav-text {
        display: none;
      }

      /* the Vee "New" badge and similar trailing chips. NS icons are <img>
         but the Call Intelligence entry uses <span class="nav-bg-image"> -
         icon spans must survive */
      span:not(.nav-text):not(.nav-bg-image), img:not(.nav-bg-image) {
        display: none;
      }
    }

    /* section titles collapse to thin separators - scoped to the lis that
       actually carry titles: the old bare li::before forced an empty pseudo
       (and its ~20px line box) onto EVERY item, inflating the rail pitch
       from 32px to 52px */
    li:has(> a#LinkAgentsManager)::before,
    li:has(> a#LinkAgentsIndex)::before,
    li:has(> a#LinkAttendantsIndex)::before,
    li:has(> a#LinkInventoryIndex)::before,
    li:has(> a#LinkUsersIndex)::before,
    li:has(> a#LinkMusicIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before,
    li:has(> a#LinkVoicemailsIndex)::before,
    li:has(> a#LinkAnswerrulesIndex)::before {
      content: '' !important;
      padding: 0 !important;
      display: block;
      height: 1px;
      line-height: 0;
      background: var(--chakra-colors-border);
      margin: 10px 8px;
    }
  }

  #vt-nav-toggle {
    justify-content: center;
    padding: 0;

    &::after {
      display: none;
    }

    &::before {
      transform: rotate(180deg);
    }
  }
}

#content {
  --header-height: 44px;

  box-sizing: border-box;
  background-color: var(--chakra-colors-bg-panel);
  box-shadow: var(--chakra-shadows-xs);
  border-top-left-radius: var(--chakra-radii-xl);
  border-left: 1px solid var(--chakra-colors-border);
  border-top: 1px solid var(--chakra-colors-border);
  /* a touch more side breathing room than the stock 20px; the sticky tab
     bleed mirrors this var */
  --vt-content-pad: clamp(24px, 5vw, 100px);
  padding: 10px var(--vt-content-pad) 40px var(--vt-content-pad);
  margin-top: var(--header-height);
  height: calc(100% - var(--header-height));
  min-height: auto;
  flex: 1;
  overflow-y: auto;

  &:has(> .nav-tabs) {
    padding-top: 0;
  }

  & > .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--chakra-colors-bg-muted);
    margin-left: calc(-1 * var(--vt-content-pad));
    margin-right: calc(-1 * var(--vt-content-pad));
    padding: 10px var(--vt-content-pad) 0;

    .active > a {
      background-color: var(--chakra-colors-bg-panel);
    }

    a:hover {
      color: var(--chakra-colors-fg);
      background-color: var(--chakra-colors-gray-200);
    }
  }
}

h4, h5 {
  font-weight: 500;
}

h6 {
  color: var(--colors-fg);
  text-transform: none;
  font-weight: 500;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -12px;
  margin-right: -12px;
  font-size: 1.1em;
}

.home-panel-main h6 a {
  color: var(--colors-fg);
}

.home-sidebar .h6-subheader  {
  color: var(--colors-fg);
}

.agents-panel-home h6 {
  margin-left: 0;
  margin-right: 0;
}

.table {
  .tableFloatingHeaderOriginal {
    display: none !important;
  }
  .tableFloatingHeader {
    position: sticky;
    z-index: 1;
    top: 0;
    display: table-header-group !important;
    background-color: var(--colors-white);
    border: 0;
  }
  th {
    font-weight: 500;
    font-size: 12px;
    color: var(--chakra-colors-fg-muted);
    background-color: transparent;
  }
}

.stats-table {
  tr {
    display: flex;
    flex-direction: row-reverse;
  }

  .label-popover {
    color: var(--colors-fg-subtle);
  }
}

.dash-stats-label-row {
  td {
    height: 24px;
  }
}

.rounded {
  background-color: var(--chakra-colors-bg-panel);
  box-shadow: var(--chakra-shadows-xs);
  border: 1px solid var(--chakra-colors-border);
  border-radius: var(--chakra-radii-xl);
  padding: 0 12px 8px;
  margin-bottom: 16px !important;
}

.nonecreated h3 {
  font-size: 1.4em;
  color: var(--colors-fg-subtle);
  font-weight: 600;
}

.modal-header-settings:has(~ .nav-tabs) {
  position: sticky;
  top: 0;
  z-index: 20;

  padding: 0 !important;
  border-width: 0 !important;

  .pull-right {
    padding-top: 6px;
  }
}

#footer {
  display: none;
}

iframe[name="print_frame"] {
  position: absolute;
}

.ui-datepicker td .ui-state-hover {
  color: #fff;
  background: var(--colors-primary-600);
  background-color: var(--colors-primary-400)!important;
  background-repeat: repeat-x;
  background-image: none;
  text-shadow: none;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  border-radius: 4px
}

.range1, .range3, .ui-slider-range {
  background: var(--colors-primary-600)!important
}

.ui-slider-handle.ui-state-active {
  background: var(--colors-gray-300)!important
}

.saving{
  color:white!important
}

#form-user-search>div>button>i,.icon-remove.icon-white,.icon-th,.playing.helpsy,.round-message,.round-reply {
  background-position: center
}

#form-user-search>div>button>i,.icon-remove.icon-white,.nsicon-more:before,.playing.helpsy,.round-message,.round-reply {
  background-repeat: no-repeat
}

.playing.helpsy {
  background-image: var(--icon-stop)!important
}

.dropdown .caret {
  margin-inline-start: 4px;
  border-top-color: var(--colors-gray-500);
  border-bottom-color: var(--colors-gray-500)
}

.form-search .input-append > .btn {
  height: 30px;
}

.form-search .input-append > .btn > i {
  background-image: var(--icon-search)!important;
  background-repeat: no-repeat;
  background-position: center
}

#form-user-search>div>a>.icon-remove {
  background-image: var(--icon-close-black)!important;
  background-repeat: no-repeat;
  background-position: center
}

/* bottom action bars (Save/Cancel): the scrollToFixed plugin pins them with
   stale geometry (wrong left/width for this layout), and the legacy 300px
   padding compensated for a toolbar that no longer exists. Pin them cleanly
   across the content area instead, aware of the collapsible sidebar. */
.affix-form-actions {
  margin-left: 0;
  margin-right: 0;
  padding: 14px 24px !important;
  background-color: var(--chakra-colors-bg-panel);
  /* a single hairline above the buttons - no shadow: the sm shadow's 1px
     ring component reads as a second hairline under the bar */
  border-top: 1px solid var(--chakra-colors-border);
}


.form-actions.scroll-to-fixed-fixed {
  left: 230px !important;
  right: 0 !important;
  width: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  /* keep the action buttons clear of the NS contacts dock pinned bottom-right */
  padding-left: clamp(24px, 5vw, 100px) !important;
  padding-right: 310px !important;
}

html.vt-nav-collapsed .form-actions.scroll-to-fixed-fixed {
  left: 58px !important;
}

/* split Save button: join the two halves into one pill (specificity must
   outrank the 4-class accent restyle that re-rounds all corners) */
.btn-group > .btn.btn-primary.btn-save.btn-combo-save {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn + .btn.btn-primary.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
  border-left: 1px solid var(--chakra-colors-white-alpha-400);
}

.rounded {
  border: 1px solid var(--colors-border-base);
}

.icon-remove.icon-white {
  background-image: var(--icon-close-white)
}

.round-message {
  background-image: var(--icon-chat)
}

.round-reply {
  background-image: var(--icon-reply)
}

.badge-info,.label-info {
  background-color: var(--chakra-colors-green-500)
}

.badge-inverse,.label-inverse {
  background-color: var(--chakra-colors-red-500)
}

.nsicon-more:before {
  content: "\e926";
  visibility: hidden;
  background-position: bottom
}

.dropdown-menu {
  border-radius: var(--chakra-radii-xl);
  border: 1px solid var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
  padding: 4px;
}

.dropdown-menu .divider {
  margin: 4px 0;
  border-bottom-color: var(--chakra-colors-border-muted);
}

.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover,.dropdown-submenu:focus>a,.dropdown-submenu:hover>a {
  color: var(--chakra-colors-fg);
  text-decoration: none;
  background-color: var(--chakra-colors-gray-200);
  background-image: none;
  border-radius: var(--chakra-radii-lg);
}

.ui-state-active {
  color: #fff;
  background-color: var(--colors-primary-600) !important;
  background-image: none;
}

.iconfont-comment {
  display: none
}

.icon-th {
  background-image: var(--icon-apps)
}

.uneditable-input:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus {
  border-color: var(--chakra-colors-accent-focus-ring);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chakra-colors-accent-focus-ring) 25%, transparent);
}

.rounded,.wrapper {
  box-shadow: 0 0 0 rgb(0 72 255)!important
}

/* read-only field chips: NS sets line-height: inherit, which picks up the
   row's 30px inside a 28px box and hangs the text low (e.g. the queue
   modal's Direct Phone Number) - center on the 20px content height */
.uneditable-input {
  line-height: 20px;
}

/* Call History: NS renders the transcription columns (sentiment, closing
   sentiment, topics) visible and only hides the deselected ones from JS a
   beat after DOM-ready - wherever the sentiment vendor is configured they
   flash on load. voxtell-head.php sets vt-ch-boot pre-paint on the
   callhistory controller; vt-nav.js lifts it right after NS's column setup
   has applied the real state. Users who keep the columns enabled see them
   appear ~150ms in - no flash either way. */
html.vt-ch-boot .sentiment,
html.vt-ch-boot .closing_sentiment,
html.vt-ch-boot .topics {
  display: none !important;
}

/* profile Single Sign-On: retire the stray red "Failed to initialize
   Google SSO application" note. The profile's Google connect still calls
   the retired gapi.auth2 library, whose init always fails and shows this
   permanently; NS gives it margin-bottom:-16px, so it renders half-hidden
   behind the SSO delete button. Real failures still log to the console.
   (Login page unaffected - its error lives outside .profile-panel-main.) */
.profile-panel-main #clientError {
  display: none !important;
}

.mask {
  background: var(--icon-eye);
  background-position: center;
  background-repeat: no-repeat
}

.audio,.blocked,.conference-inbound,.conference-outbound,.copy,.details,.download-report,.inbound,.listen,.missed,.mute,.outbound,.rename,.reports,.save,.upload {
  background-repeat: no-repeat
}

.uiconfig-span-description {
  color: var(--chakra-colors-fg-muted)
}

.btn-primary.active,.btn-primary.disabled,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary[disabled] {
  color: #fff;
  background: var(--colors-primary-600)
}

.icon-call {
  background-position: bottom;
  background-image: var(--icon-phone)
}
.icon-call.icon-white {
  background-position: bottom;
  background-image: var(--icon-phone-white)
}

.icon-ok-sign {
  background-position: center;
  background-image: var(--icon-check);
}

.icon-remove-sign {
  background-position: center;
  background-image: var(--icon-remove);
}

.add,.audio,.blocked,.conference-inbound,.conference-outbound,.copy,.details,.download-report,.edit.forward.helpsy,.forward,.inbound,.listen,.missed,.mute,.outbound,.rename,.reports,.save,.upload {
  background-position: center
}

/* default link affordance: actionable text reads accent, confirms on hover.
   Components with their own link treatments (nav, buttons, menus, toolbar)
   override this with more specific rules. */
a {
  color: var(--chakra-colors-accent-fg);
  padding: 2px
}

a:hover, a:focus {
  color: var(--chakra-colors-voxtell-800);
  text-decoration: underline;
}

/* ...but icon-only anchors and tab strips are not text links: icons are
   mask-painted by currentColor (accent turned them violet on the Auto
   Attendant dial pad), and tabs are self-evident actions. Keep both neutral. */
a.aa-action-button, .nav-tabs a, .nav-pills a {
  color: var(--chakra-colors-fg);
}
a.aa-action-button:hover, a.aa-action-button:focus,
.nav-tabs a:hover, .nav-tabs a:focus,
.nav-pills a:hover, .nav-pills a:focus {
  color: var(--chakra-colors-fg);
  text-decoration: none;
}

/* content area: breathe below the header hairline (NS default was 10px) */
#content {
  padding-top: 24px;
}

/* Save/Cancel footer: retire Bootstrap's detached gray form-actions band -
   transparent, separated by a hairline, actions anchored right (primary
   outermost, SaaS convention). :has(button) guard: NS also stamps
   .form-actions on plain header bands (e.g. the AA editor's column
   headers), which must keep their stock layout. */
.form-actions:not(.dropdown-menu):has(> .btn),
.form-actions:not(.dropdown-menu):has(> button),
.form-actions:not(.dropdown-menu):has(> input[type='submit']) {
  background: transparent;
  border-top: 1px solid var(--chakra-colors-border-muted);
  margin-top: 24px;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* THE DEFAULT: footer children order by SEMANTIC ROLE, never DOM position -
   NS pages emit these in every order (users tabs: Save,Cancel,Back;
   VOXbuilder: Back,Save,Cancel,text; AA editor: Save,Cancel). Back/nav
   holds the left edge, info text then Cancel then primary Save rightmost. */
.form-actions > input[type='submit'],
.form-actions > .color-primary,
.form-actions > .btn-primary,
.form-actions > .btn-group { order: 3; }
.form-actions > .btn.cancel,
.form-actions > .cancel { order: 2; }
.form-actions > .read-only-msg { order: 1; margin-right: 2px; }
.form-actions > .back-btn,
.form-actions > .pull-left { order: 0; margin-right: auto; }

/* NS pulls .back-btn -260px left to undo form-wide's 280px footer indent
   (portal.php). Our footer has no indent - the pull drags the button over
   the sidebar. Same selector, later sheet: neutralize. */
.form-horizontal.form-wide .form-actions .back-btn {
  margin-left: 0;
}

/* a form-actions with NO controls is an informational note (e.g. the
   answering-rules "calls will ring your extension" line) - a quiet themed
   chip instead of Bootstrap's full-width gray slab */
.form-actions:not(.attendant-header):not(:has(.btn, button, input, select, a)) {
  background: var(--chakra-colors-bg-muted);
  border: 1px solid var(--chakra-colors-border-muted);
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: var(--chakra-radii-lg);
  width: fit-content;
  padding: 10px 16px;
  margin: 16px 0 0;
}
.form-actions:not(.attendant-header):not(:has(.btn, button, input, select, a)) h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--chakra-colors-fg-muted);
}

/* Answering rules: NS reserves a 420px panel and pins its footer to the
   bottom (portal.php .rules-panel-main) - which strands the buttonless
   note ~390px below the table. When the footer is that note, collapse the
   reserved space and let the note sit in flow under the table. */
.rules-panel-main:has(> .form-actions:not(:has(.btn, button, input, select, a))) {
  min-height: 0;
  padding-bottom: 0;
}
.rules-panel-main > .form-actions:not(:has(.btn, button, input, select, a)) {
  position: static;
}

/* ...but a FIXED footer (VOXbuilder's affixed Save bar) needs a solid
   surface - page content scrolls behind it otherwise */
.form-actions.affix-form-actions,
.form-actions.scroll-to-fixed-fixed {
  /* !important: must outrank the :has()-boosted transparent footer rule */
  background: var(--chakra-colors-bg-panel, #fff) !important;
  z-index: 100;
}

/* affixed variants keep side padding when pinned full-width */
.form-actions.affix-form-actions:has(> .btn),
.form-actions.affix-form-actions:has(> button) {
  padding-inline: 24px;
}

/* Auto Attendant editor: NS reserves 310px whether or not the menu editor
   is open, stranding the Save/Cancel footer mid-page. The editor grows on
   its own; let the footer sit under the actual content. */
.attendant-creation {
  min-height: 0;
}

/* AA editor selected state: retire the gray speech-pointer triangles - the
   active key and its action icon read accent, with a tab-style bar below */
.aa-action-button .arrow,
.aa-action-button .arrow-border {
  display: none !important;
}
.aa-action-button div.selected,
.aa-action-button:has(div.selected) .app-icon {
  color: var(--chakra-colors-accent-solid) !important;
}
.aa-action-button:has(div.selected)::after {
  content: '';
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--chakra-colors-accent-solid);
  margin: 5px auto 0;
}

.btn.color-primary {
  background-image: none;
  color: #fff;
  background-color: var(--colors-primary-600);
  border-width: 0;
  text-shadow: none;

  &:hover {
    border-width: 0;
    background-color: var(--colors-primary-700) !important;
  }
}

.glyphicon-small-cogwheel,.manage {
  background-position: center
}

.dialpad div[class*=key-] {
  background-image: none
}

.dial-pad-actions {
  .dial-pad-call {
    color: var(--colors-white);
    background-color: var(--colors-primary-600);
    &:hover {
      background-color: var(--colors-primary-700);
    }
  }
  .dial-pad-from-btn {
    color: var(--colors-white);
    background-color: var(--colors-primary-600);
    &:hover {
      background-color: var(--colors-primary-700);
    }
  }
}

#domain-message, .mask-bar {
  background: var(--colors-primary-600);
  border: none;
  color: white;
  box-shadow: none;

  .domain-message-buttons {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.mute {
  background-image: var(--icon-mute)
}

.details {
  background-image: var(--icon-details)
}

.edit.forward.helpsy,.forward {
  background-image: var(--icon-arrow-right);
  background-repeat: no-repeat
}

.audio,.listen {
  background-image: var(--icon-music)
}

.save {
  background-image: var(--icon-save)
}

.conference-inbound {
  background-image: var(--icon-conference-inbound)
}

.conference-outbound {
  background-image: var(--icon-conference-outbound)
}

.blocked {
  background-image: var(--icon-blocked)
}

.missed {
  background-image: var(--icon-missed)
}

.inbound {
  background-image: var(--icon-inbound)
}

.outbound {
  background-image: var(--icon-outbound)
}

.download-report {
  background-image: var(--icon-download-report)
}

.rename {
  background-image: var(--icon-rename)
}

.upload {
  background-image: var(--icon-upload)
}

.reports {
  background-image: var(--icon-reports)
}

.copy {
  background-image: var(--icon-copy)
}

.add {
  background-image: var(--icon-add);
  background-repeat: no-repeat!important
}

.del {
  background-image: var(--icon-delete);
  background-position: center;
}

input.btn.btn-primary.span2.saving {
  background-color: var(--chakra-colors-voxtell-700);
  background-image: none;
}

.dock-head {
  background-color: var(--colors-black)
}
.dock-column.dock-contacts {
  width: 280px;
}

#navigation-subbar,.selectivity-multiple-selected-item,.selectivity-result-item.highlight {
  background: var(--colors-primary-500)!important
}

.download-audio,.play,.sort-icon,i.icon-remove.icon-black,i.nsicon.nsicon-answer-call,span.icon-facetime-video,span.nsicon.nsicon-more {
  background-position: center
}

.selectivity-multiple-input {
  width: 100%!important
}

.selectivity-result-item.highlight {
  color: #fff
}

i.icon-remove.icon-black {
  background-image: var(--icon-delete)
}

span.icon-facetime-video {
  background-image: var(--icon-camera)
}

span.nsicon.nsicon-more {
  background-repeat: no-repeat;
  background-image: var(--icon-vertical-menu)
}

i.nsicon.nsicon-add-participant {
  background-position: center;
  content: var(--icon-useradd);
  height: 16px;
  width: 16px
}

i.nsicon.nsicon-answer-call {
  content: var(--icon-phone);
  height: 14px;
  width: 14px
}

.download-audio {
  background-image: var(--icon-download)
}

.play {
  background-image: var(--icon-play)
}

.sort-icon {
  height: 20px;
  background-image: var(--icon-dragdrop)!important
}

.icon-info-sign {
  opacity: .6;
  background-image: var(--btn-info)!important;
  background-position: top;
  height: 11px
}

.icon-maximize,.icon-minimize,.icon-print,.icon-refresh {
  background-position: center
}

.icon-refresh {
}

.icon-print {
}

.icon-minimize {
}

.icon-maximize {
}

.icon-comment {
  background-image: var(--icon-chat);
  background-position: bottom
}

.glyphicon-small-stats,.icon-graph {
  background-position: center
}

.icon-volume-up {
  background-image: var(--icon-sound);
  background-position: center;
}

.edit {
  background-position: center
}

.delete {
}

.agents {
}

.dialpad .key-1 {
  background: var(--key-1)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-2 {
  background: var(--key-2)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-3 {
  background: var(--key-3)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-4 {
  background: var(--key-4)!important
}

.dialpad .key-5 {
  background: var(--key-5)!important
}

.dialpad .key-6 {
  background: var(--key-6)!important
}

.dialpad .key-7 {
  background: var(--key-7)!important
}

.dialpad .key-8 {
  background: var(--key-8)!important
}

.dialpad .key-9 {
  background: var(--key-9)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-0 {
  background: var(--key-0)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-star {
  background: var(--key-star)!important;
  background-repeat: no-repeat!important
}

.loading .nav-arrow,.nav-link-current .nav-arrow {
  border-color: transparent transparent var(--colors-primary-600) transparent
}

/* ---- count badges: compact pill treatment for ALL Bootstrap .badge uses
   (nav, toolbar, voicemail tabs, ...). NS never removes .hide from count
   badges - it reveals them with an inline display:inline - so hide while
   .hide is present (kills the zero-count blink on load) but honor the
   inline reveal. ---- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  border-radius: var(--chakra-radii-full);
}

.badge-important {
  background: var(--chakra-colors-red-500);
}

.badge.hide {
  display: none !important;
}

.badge.hide[style*="display: inline"] {
  display: inline-flex !important;
}

#nav-msg-count {
  top: auto;
  right: 4px;
}

#LinkHomeIndex .nav-bg-image,#nav-home-super .nav-bg-image {
  background-size: 16px;
  background-image: var(--home);
  background-repeat: no-repeat;
  background-position: center
}

#LinkHomeIndex:hover .nav-bg-image,#nav-home-super:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--homeHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkResellersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--resellers);
  background-repeat: no-repeat;
  background-position: center
}

#LinkResellersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--resellersHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkDomainsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--domains);
  background-repeat: no-repeat;
  background-position: center
}

#LinkDomainsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--domainsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkSiptrunksIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--trunk);
  background-repeat: no-repeat;
  background-position: center
}

#LinkSiptrunksIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--trunkHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkRouteprofilesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--routeprofiles);
  background-repeat: no-repeat;
  background-position: center
}

#LinkInventoryIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--inventory);
  background-repeat: no-repeat;
  background-position: center
}

#LinkInventoryIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--inventoryHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallhistoryIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--callhistory);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallhistoryIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callhistoryHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsFax .nav-bg-image {
  background-size: 16px;
  background-image: var(--fax);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsFax:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--faxHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUiconfigsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--configs);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUiconfigsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--configsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--messages);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--messagesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkContactsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--contacts);
  background-repeat: no-repeat;
  background-position: center
}

#LinkContactsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--contactsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAnswerrulesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--answeringrules);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAnswerrulesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--answeringrulesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkTimeframesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--timeframes);
  background-repeat: no-repeat;
  background-position: center
}

#LinkTimeframesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--timeframesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkPhonesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--phones);
  background-repeat: no-repeat;
  background-position: center
}

#LinkPhonesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--phonesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkMusicIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--musichold);
  background-repeat: no-repeat;
  background-position: center
}

#LinkMusicIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--musicholdHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUsersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--users);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUsersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--usersHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkConferencesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--conferences);
  background-repeat: no-repeat;
  background-position: center
}

#LinkConferencesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--conferencesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAttendantsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--autoattendants);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAttendantsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--autoattendantsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallqueuesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--callqueues);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallqueuesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callqueuesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAgentsIndex .nav-bg-image,#LinkAgentsManager .nav-bg-image {
  background-size: 16px;
  background-image: var(--callcenter);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAgentsIndex:hover .nav-bg-image,#LinkAgentsManager:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callcenterHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkClustersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--cluster);
  background-repeat: no-repeat;
  background-position: center
}

#LinkClustersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--clusterHover);
  background-repeat: no-repeat;
  background-position: center
}

.action-container-left>#filter-date {
  background: var(--colors-primary-400);
  margin-left: 8px;
}

.action-container-left>#filter-dialed,.action-container-left>#filter-type,.action-container-left>#filter-user {
  background: var(--chakra-colors-bg-subtle);
  color: var(--chakra-colors-fg-muted);
  text-shadow: 0 0 0
}

.app-icon-lg.icon-callqueue,.app-icon.icon-callqueue,app-icon-lg.icon-callqueue {
  background-image: var(--icon-callqueue);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-directory,.app-icon.icon-directory {
  background-image: var(--icon-directory);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-goback,.app-icon.icon-goback {
  background-image: var(--goback);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-voicemail,.app-icon.icon-voicemail {
  background-image: var(--icon-voicemail);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-vmailmanage,.app-icon.icon-vmailmanage {
  background-image: var(--icon-vmailmanage);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-external,.app-icon.icon-external {
  background-image: var(--icon-external);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-message,.app-icon.icon-message {
  background-image: var(--icon-message);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-repeat,.app-icon.icon-repeat {
  background-image: var(--icon-repeat);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-tier,.app-icon.icon-tier {
  background-image: var(--icon-tier);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon.icon-tier {
  background-image: var(--icon-tier)
}

.app-icon-lg.icon-user,.app-icon.icon-user {
  background-image: var(--icon-user);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-conference,.app-icon.icon-conference {
  background-image: var(--icon-conference);
  background-repeat: no-repeat;
  background-position: center
}

div#attendant_tier_1_1 {
  margin-bottom: 4px
}

.nav-link-current a div.nav-bg-image {
  opacity: .8
}

i.icon-share-alt.icon-white {
}

.btn.btn-primary.btn-save.btn-combo-save,.btn.btn-primary.dropdown-toggle {
  background: var(--chakra-colors-accent-solid);
  border: none;
  color: var(--chakra-colors-accent-contrast);
  box-shadow: var(--chakra-shadows-xs);
  border-radius: var(--chakra-radii-md);
}

.btn-group.open .btn-primary.dropdown-toggle {
  background-color: var(--colors-primary-600);
  box-shadow: inset 0 0 0;
}

.round-music {
  background: var(--icon-music);
  background-position: center;
  background-repeat: no-repeat
}

span.not-registered {
  background-image: var(--icon-not-registered);
  background-repeat: no-repeat;
  background-position: center
}

span.checkmark {
  background-image: var(--icon-checked);
  background-repeat: no-repeat;
  background-position: center
}

.ui-datepicker td .ui-state-hover {
  background-image: none
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background-image: none;
  background-color: var(--chakra-colors-accent-solid)
}

.modal-header {
  .nav-tabs {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
  }
}

.modal-footer .btn+.btn {
  margin-bottom: 0;
  margin-left: 5px;
  color: var(--chakra-colors-accent-contrast);
  background: var(--chakra-colors-accent-solid);
  background-image: none;
  border: none;
  border-radius: var(--chakra-radii-md);
  &:hover {
    background-color: var(--chakra-colors-voxtell-700);
  }
}

.chat-available {
  display: none!important
}

.presence.open {
  background: var(--chakra-colors-green-500)!important;
  border-radius: 40px
}

.presence.inactive {
  background: var(--chakra-colors-gray-400)!important;
  border-radius: 40px
}

.contact-dock-gravatar {
  background-color: var(--colors-primary-400)
}

.presence.inuse {
  background: var(--chakra-colors-red-500);
  border-radius: 12px
}

span.nsicon.nsicon-shared.helpsy {
  color: #fff
}

.round-logout {
  background: var(--icon-logout);
  background-position: center;
  background-repeat: no-repeat
}

.round-login {
  background: var(--icon-login);
  background-position: center;
  background-repeat: no-repeat
}

#LinkManage {
  background: var(--icon-user-add);
  background-position: center;
  background-repeat: no-repeat
}

.round-call {
  background: var(--icon-phone);
  background-position: center;
  background-repeat: no-repeat
}

.nsicon-more {
  background: var(--icon-vertical-menu);
  background-position: center;
  background-repeat: no-repeat
}

.helpsy:hover {
  scale: 1
}

a#Link {
  scale: 1!important
}


.round-button {
  background-repeat: no-repeat;
  background-position:center;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  font-size: 0;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  border: none;
}

#table-column-queue-dropdown {
  label.checkbox {
    padding-left: 20px;
    text-align: left;
  }
}

/* phone-config builder: each button card anchors its own absolutely-positioned
   label (.btn-detail) - without this the labels anchor to the page and stay
   put while the card list scrolls */
li.btn-config {
  position: relative;
}

/* builder toolbar buttons use the NS icon FONT (nsicon glyphs) - box the
   elements for the mask icons and silence the font glyph */
i.nsicon-phone-extension, i.nsicon-contacts {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-top: -2px;
}

/* pills that mix a 15px icon with small label text (e.g. All Contacts) can't
   center on inline metrics - flex them */
.profile-tags .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  line-height: 1.4;
}

.profile-tags .label i {
  margin-top: 0;
}

/* NS nudges the label's inner span up with position:relative (a baseline hack
   from the inline era) - neutralize it so flex centering actually centers */
.profile-tags .label > span {
  position: static;
}

i.nsicon-phone-extension:before, i.nsicon-contacts:before {
  content: none;
}

/* FontAwesome font-glyph icons (kabob menu, Back buttons): box them for the
   mask and silence the font glyph */
i.kabob.fa, i.fa.fa-reply {
  display: inline-block;
  width: 14px;
  height: 20px;
  vertical-align: middle;
}

i.kabob.fa:before, i.fa.fa-reply:before {
  content: none;
}

/* icon-only buttons (zoom, etc.): Bootstrap's 14px sprite icons make a
   shorter line box than text does, so those buttons shrank below their 30px
   siblings - give every in-button icon the 20px text line box */
.btn [class^="icon-"], .btn [class*=" icon-"] {
  height: 20px;
  vertical-align: middle;
}

/* ---- icon colors: the Hugeicons masks (vt-icons.css) paint with currentColor,
   so each icon element needs a deliberate text color. Neutral actions read
   fg-subtle; call semantics keep their traffic colors. ---- */

.play, .download-audio, .audio, .listen, .download-report, .reports, .copy,
.details, .rename, .upload, .save, .mute, .conference-inbound,
.conference-outbound, .del, .add, .edit, .forward, .edit.forward.helpsy,
.round-message, .round-reply, .round-music, .round-call, .round-login,
.round-logout, .sort-icon, .icon-graph, .glyphicon-small-stats, .manage,
.glyphicon-small-cogwheel, span.nsicon.nsicon-more, .nsicon-more,
i.icon-remove.icon-black, span.icon-facetime-video, .icon-refresh,
.icon-print, .icon-th, .mask, .icon-info-sign, .agents,
.form-search .input-append > .btn > i, #form-user-search>div>a>.icon-remove,
i.icon-share-alt.icon-white, #LinkManage, .icon-calendar {
  color: var(--chakra-colors-fg-subtle);
}

/* input add-ons (e.g. datepicker calendar buttons): belong to the field */
.input-append .add-on, .input-prepend .add-on,
.input-append .btn, .input-append a.btn {
  background-color: var(--chakra-colors-bg-subtle);
  border: 1px solid var(--chakra-colors-border);
  background-image: none;
  text-shadow: none;
}

/* dock (contacts/chat) headers are dark; their buttons don't inherit the
   header's white text color, so the mask icons painted black - force white */
.dock-head .dock-head-button i {
  color: var(--chakra-colors-white-alpha-900);
}

.inbound { color: var(--chakra-colors-green-500); }
.outbound { color: var(--chakra-colors-blue-500); }
.missed, .blocked, .delete, .round-button { color: var(--chakra-colors-red-500); }
span.checkmark { color: var(--chakra-colors-green-500); }
span.not-registered { color: var(--chakra-colors-orange-400); }

/* ---- modern surfaces: modals + tables (Vee design language) ---- */

.modal {
  border-radius: var(--chakra-radii-2xl);
  border: 1px solid var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
}

.modal-header {
  border-bottom-color: var(--chakra-colors-border-muted);
}

.modal-footer {
  background-color: var(--chakra-colors-bg-subtle);
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-2xl) var(--chakra-radii-2xl);
  box-shadow: none;
}

.popover {
  border-radius: var(--chakra-radii-xl);
  border-color: var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
}

/* ---- Answering Rules modals: Add Rule (#write-rule) + Allow/Block ---- */

/* text fields: retire the legacy gray inset look */
#write-rule input[type='text'],
#allowblock-lists input[type='text'] {
  height: 32px;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 4px 10px;
  background-color: var(--chakra-colors-bg-panel);
  border: 1px solid var(--chakra-colors-border);
  border-radius: var(--chakra-radii-md);
  box-shadow: none;
  color: var(--chakra-colors-fg);
}
#write-rule input[type='text'][disabled],
#write-rule input[type='text'][readonly] {
  background-color: var(--chakra-colors-bg-muted);
  color: var(--chakra-colors-fg-muted);
}

/* appended buttons (sim-ring delay clock, allow/block add) join the field:
   shared hairline, flat left cap on the button */
#write-rule .input-append,
#allowblock-lists .input-append {
  display: inline-flex;
  align-items: stretch;
}
#write-rule .input-append input[type='text'],
#allowblock-lists .input-append input[type='text'] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#write-rule .input-append .btn,
#allowblock-lists .input-append .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: auto;
  margin-left: -1px;
  padding: 0 10px;
  border-radius: 0 var(--chakra-radii-md) var(--chakra-radii-md) 0;
  box-shadow: none;
}

/* Allow/Block: titles breathe (global h6 pulls -12px for home panels) */
#allowblock-lists h6 {
  margin: 0;
  padding: 10px 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chakra-colors-fg);
}

/* the card stack (input header / list well / anonymous row) shares one
   hairline weight and outer radius */
#allowblock-lists .spam-input,
#allowblock-lists .allowblock-input {
  border-color: var(--chakra-colors-border-muted);
  padding: 0 12px 12px;
}
#allowblock-lists .spam-input {
  border-radius: var(--chakra-radii-lg);
}
#allowblock-lists .allowblock-input {
  border-radius: var(--chakra-radii-lg) var(--chakra-radii-lg) 0 0;
}
#allowblock-lists .allowblock-input .input-append {
  display: flex;
}
#allowblock-lists .allowblock-input input[type='text'] {
  flex: 1;
  width: auto;
  min-width: 0;
}
#allowblock-lists .well {
  border: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-lg) var(--chakra-radii-lg);
  box-shadow: none;
}
#allowblock-lists #block-div .well {
  border-radius: 0;
}
#allowblock-lists .allowblock-table {
  /* NS forces overflow-y: scroll - the empty track reads as a stray inner
     hairline next to the well's border */
  overflow-y: auto !important;
}
#allowblock-lists .allowblock-anon {
  background-color: var(--chakra-colors-bg-subtle);
  border-color: var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-lg) var(--chakra-radii-lg);
  padding: 8px 12px;
}

.table th, .table td {
  border-top-color: var(--chakra-colors-border-muted);
}

.table tbody tr:hover td {
  background-color: var(--chakra-colors-bg-subtle);
}