/* ajax-loader */
.spinner {
  position: fixed;
  z-index: 9999999;
  margin: 0px auto;
  top: 50%;
  left: 0px;
  right: 1px;
  width: 5%;
  height: 100%;
  text-align: center;
  font-size: 10px;
  background-color: transparent;
}
/*
 * 2026-09-18 — the processing indicator is now the Novaptic mark, not three blue bars.
 *
 * Owner: make it ours. So it IS ours: the N from the logo (#3fc79a) with the gold star
 * (#FFC83D), the same two paths novaptic.com draws. A light sheen sweeps across the N and
 * the star twinkles with it.
 *
 * WHY MASKS AND NOT AN <svg> OR A BACKGROUND IMAGE.
 * Four places emit this markup (index_body_open.php, util/ajax_loader.php,
 * modalViewAllSales.php, dataTables/items/getItemGroupAuthorized_lines.php), so inlining SVG
 * would mean changing all four and keeping them in step forever. The first attempt instead
 * used one background-image SVG with the animation declared INSIDE it — that renders, but the
 * animation does not reliably run when an SVG is used as an image, and the mark's initial
 * frame was "not yet drawn", i.e. completely invisible. Measured, not assumed: it decoded at
 * 150x150 and painted nothing.
 * Masks fix both problems. The shape comes from the SVG, the colour and the motion come from
 * THIS stylesheet, so the animation always runs, and with animation off the resting state is
 * the finished logo rather than nothing. The existing bar <div>s are simply hidden, so no
 * call site has to change.
 *
 * Anchored to the TOP of .spinner, which is where the old bars began — .spinner is
 * "top:50%; height:100%" on the shell and "height:10%" inline elsewhere, so centring inside
 * it would drop the mark off the bottom of the screen on the shell.
 */
.spinner > div { display: none !important; }

/*
 * ONE DEFINITION OF THE ANIMATED MARK, used in two places.
 *
 * .nv-mark is the mark on its own — drop it anywhere and size it. .spinner is the ajax loader,
 * which is the same mark pinned where the old bars used to sit. The login screen (iConsole/
 * login.php) uses .nv-mark so the thing you stare at while signing in is the same thing you
 * stare at while the app is working; it was a static copy of the logo before, and a static copy
 * is exactly how two versions of a brand drift apart.
 *
 * The two shapes are held in custom properties so the base64 appears once rather than four times.
 * Centring is done with margins, not transform, because transform is needed by the twinkle —
 * one keyframe set then serves both users.
 */
:root {
  --nv-mark-n:    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48cGF0aCBkPSJNMzIgOTIgVjM4IEw3NCA5MiBWMzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==");
  --nv-mark-star: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48cGF0aCBkPSJNODAgMTUgTDg0IDI3IEw5NiAzMiBMODQgMzcgTDgwIDQ5IEw3NiAzNyBMNjQgMzIgTDc2IDI3IFoiIGZpbGw9IiMwMDAiLz48L3N2Zz4K");
  --nv-mark-size: 92px;
}

.nv-mark { position: relative; display: inline-block;
           width: var(--nv-mark-size); height: var(--nv-mark-size); }

.nv-mark::before, .nv-mark::after,
.spinner::before, .spinner::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.nv-mark::before, .nv-mark::after { top: 0; left: 0; right: 0; bottom: 0; }
/* 2026-10-04 (owner): center the processing mark on the whole screen while the app is working,
 * instead of hanging it at the top-left. position:fixed pins the pseudo to the VIEWPORT rather
 * than to .spinner (whose top:50%/height:100% box is exactly why centering INSIDE it dropped the
 * mark off-screen before). Centering is done with margins, not transform, so the ::after star's
 * transform:scale twinkle still works. Applies to all four .spinner call sites. */
.spinner::before, .spinner::after {
  position: fixed;
  top: 50%; left: 50%;
  width: var(--nv-mark-size); height: var(--nv-mark-size);
  margin-left: calc(var(--nv-mark-size) / -2);
  margin-top: calc(var(--nv-mark-size) / -2);
}

/* the N — brand green, with a sheen travelling across it */
.nv-mark::before, .spinner::before {
  background: linear-gradient(115deg, #2bb88a 0%, #3fc79a 38%, #b8f5df 50%, #3fc79a 62%, #2bb88a 100%);
  background-size: 280% 100%;
  -webkit-mask: var(--nv-mark-n) center/contain no-repeat;
          mask: var(--nv-mark-n) center/contain no-repeat;
  -webkit-animation: nvSheen 1.9s linear infinite;
          animation: nvSheen 1.9s linear infinite;
}
/* the gold star, twinkling in time with the sheen */
.nv-mark::after, .spinner::after {
  background: #FFC83D;
  -webkit-mask: var(--nv-mark-star) center/contain no-repeat;
          mask: var(--nv-mark-star) center/contain no-repeat;
  -webkit-animation: nvTwinkle 1.9s ease-in-out infinite;
          animation: nvTwinkle 1.9s ease-in-out infinite;
}
@-webkit-keyframes nvSheen { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@keyframes nvSheen { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@-webkit-keyframes nvTwinkle {
  0%, 100% { opacity: .35; transform: scale(.92); }
  46%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes nvTwinkle {
  0%, 100% { opacity: .35; transform: scale(.92); }
  46%      { opacity: 1;   transform: scale(1.06); }
}
/*
 * THE SIDEBAR BRAND IS THE WORKING INDICATOR.  (owner, 2026-09-19: "it kind of gets lost on
 * some pages, change its location to the upper left where the logo sits")
 *
 * .nv-brand is the same mark, but STILL until there is something to say. While the shell's
 * loader is up, body.nv-working animates it: the logo you are already looking at starts to
 * shimmer, in the one place that is on every page and never scrolls away.
 *
 * Idle is a flat brand green rather than the gradient — a static gradient reads as a mistake,
 * and the contrast between flat and moving is what makes "it is working" legible at a glance.
 */
.nv-brand::before, .nv-brand::after { -webkit-animation: none; animation: none; }
.nv-brand::before { background: #3fc79a; }
.nv-brand::after  { opacity: 1; transform: none; }

/*
 * OPTION C — RADAR PING (owner's pick, 2026-09-19). The first version was correct but too
 * polite: a sheen inside the logo's own silhouette is easy to miss on a busy page. A ring
 * pulsing OUTWARD crosses into empty space beside the mark, which is what the eye actually
 * catches, and an expanding ring is not a shape anyone mistakes for decoration.
 *
 * Done with box-shadow spread rather than an extra ring element: .nv-mark already spends both
 * of its pseudo-elements on the N and the star, and a wrapper would have meant touching the
 * header markup in two branches for something the shadow does by itself. border-radius only
 * applies while working, so the idle mark keeps its plain box.
 *
 * The sheen and twinkle also run faster here (1.25s vs 1.9s) — with the ping alongside them, a
 * slow sheen read as out of step with it.
 */
body.nv-working .nv-brand::before {
  background: linear-gradient(115deg, #2bb88a 0%, #3fc79a 40%, #d6fff0 50%, #3fc79a 60%, #2bb88a 100%);
  background-size: 280% 100%;
  -webkit-animation: nvSheen 1.25s linear infinite;
          animation: nvSheen 1.25s linear infinite;
}
body.nv-working .nv-brand::after {
  -webkit-animation: nvTwinkle 1.25s ease-in-out infinite;
          animation: nvTwinkle 1.25s ease-in-out infinite;
}
body.nv-working .nv-brand {
  border-radius: 50%;
  -webkit-animation: nvPing 1.5s cubic-bezier(.2,.6,.3,1) infinite;
          animation: nvPing 1.5s cubic-bezier(.2,.6,.3,1) infinite;
}
@-webkit-keyframes nvPing {
  0%   { box-shadow: 0 0 0 0    rgba(63,199,154,.75); }
  70%  { box-shadow: 0 0 0 14px rgba(63,199,154,0); }
  100% { box-shadow: 0 0 0 0    rgba(63,199,154,0); }
}
@keyframes nvPing {
  0%   { box-shadow: 0 0 0 0    rgba(63,199,154,.75); }
  70%  { box-shadow: 0 0 0 14px rgba(63,199,154,0); }
  100% { box-shadow: 0 0 0 0    rgba(63,199,154,0); }
}

/*
 * The shell's full-screen loader no longer draws anything — the brand says it instead, which is
 * the whole point of moving it. Scoped to #myLoader ONLY: modalViewAllSales.php,
 * util/ajax_loader.php and dataTables/items/getItemGroupAuthorized_lines.php each have their own
 * .spinner inside a panel, where a local indicator is still the right thing and the sidebar is
 * not necessarily in view.
 */
#myLoader::before, #myLoader::after { display: none; }

/* someone who has asked the OS to stop motion still gets the finished logo */
@media (prefers-reduced-motion: reduce) {
  .nv-mark::before, .nv-mark::after,
  .spinner::before, .spinner::after { -webkit-animation: none; animation: none; }
  .nv-mark::after, .spinner::after { opacity: 1; transform: none; }
  /* the ping is motion too — someone who asked the OS for stillness gets a steady mark */
  body.nv-working .nv-brand { -webkit-animation: none; animation: none; box-shadow: none; }
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
/* customer-badge */

.customer-badge {
  padding: 7px 30px;
  border-bottom: 1px solid #E9ECF2;
  background-color: #FFFFFF;
}
.customer-badge .avatar {
  float: left;
  display: inline-block;
  width: 60px;
  height: 60px;
}
.customer-badge .avatar img {
  width: 100%;
  border-radius: 50%;
}
.customer-badge .details {
  padding: 0px;
  padding-left: 72px;
  text-align: left;
  padding-top: 10px;
  position: relative;
}
.customer-badge .details .name {
  font-weight: 400;
  color: #67676C;
  font-size: 12px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  display: block;
  text-transform: capitalize;
  font-size: 12px !important;
}
.customer-badge .details .name .balance,
.customer-badge .details .name .points {
  font-size: 12px;
}
.customer-badge .details .name:hover {
  color: #489ee7;
}
.customer-badge .details .email {
  color: #67676C;
  font-size: 10px;
  font-weight: 400;
}
.customer-badge .details .btn-edit {
  width: 47px;
  height: 36px;
  background-color: #F9FBFC;
  border: 1px solid #e8ebf1;
  border-right-width: 0px;
  border-top-width: 0px;
  color: #489ee7;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -7px;
  margin-right: -30px;
}
.customer-badge.suggestions {
  border-left: 0px solid #d7dce5;
  border-right-width: 0px;
  padding: 0px !important;
  /*height: 48px !important;*/
  cursor: pointer;
}
.customer-badge.suggestions .suggest-item {
  padding: 7px 5px !important;
}
.customer-badge.suggestions .suggest-item:hover,
.customer-badge.suggestions .suggest-item.active,
.customer-badge.suggestions .suggest-item:focus {
  background-color: #f3f4f8;
}
.customer-badge.suggestions .avatar {
  width: 35px !important;
  height: auto;
}
.customer-badge.suggestions .details {
  padding-top: 5px;
  text-align: left;
  padding-left: 40px;
  line-height: 14px;
}
.customer-badge.suggestions .details .person_name {
  color: #67676C;
  font-size: 20px;
  line-height: 2;
  font-weight: 700;
}
.customer-badge.suggestions .details .company_name {
  color: #8cc2f0;
  line-height: 2;
  font-size: 18px;
  font-weight: 400;
}

.customer-badge.suggestions .details .name {
  color: #000;
  padding-left: 5px;
}
.customer-badge.suggestions .details .email {
  padding-left: 5px;
  color: #8cc2f0;
}
@media (max-width: 767px) {
  .customer-badge .details .name {
    width: 250px;
  }
}
/* button menu  */
.btn-more {
  min-width: 58px;
  height: 35px;
  background-color: #F9FBFC;
  border: 1px solid #D7DCE5;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  line-height: 12px;
  font-size: 22px;
  color: #9398a0;
  margin-right: 5px;
  margin-top: 5px;
font-style: italic;
font-family: 'Helvetica Neue', 'Nunito', sans-serif;
font-weight: 300;
}