/* THREE LOOKS. NO FOURTH.
   1. Flower banner (.nav button) — locked. Do not restyle here.
   2. Pill — 9.35rem × 1.8rem. Blond wood #f6e8c4. Lexend 800 / .72rem / ink #000.
   3. Circle — 1.8rem. Same wood. Same ink. Symbol Lexend or SVG .95rem / same ink.
   One color on unlocked buttons. Two sizes. One type. One type size. One type color.
   One symbol size. One symbol font. One symbol color. */

:root {
  --mp-wood: #f6e8c4;
  --mp-ink: #000;
  --mp-edge: #c4a06a;
  --mp-pill-w: 9.35rem;
  --mp-pill-h: 1.8rem;
  --mp-type: .72rem;
  --mp-circle: 1.8rem;
  --mp-icon: .95rem;
}

.mp-pill,
.ask-bar,
.btn.mp-pill,
.btn.pulse-btn,
.btn.btn-primary,
.btn.btn-ghost,
.btn.btn-block,
button.btn,
.chip,
.chip.active,
button.chip,
.data-tabs .chip,
.ratings-tabs .chip,
.dir-modes .chip,
.filters .chip,
.look-choice,
.look-opt,
.look-drop-clear,
.look-drop-save,
.photo-way,
.dir-menu button,
.dir-menu a,
body > .dir-menu button,
.pulse-tools-sheet .mp-pill,
.garden-item .mp-pill,
.modal-foot .btn,
.modal-foot .btn-primary,
.modal-foot .btn-ghost,
.eval-actions .btn,
.eval-actions .btn-primary,
.eval-actions .btn-ghost,
.report-foot .btn,
.report-foot .btn-primary,
.report-foot .btn-ghost,
.sg-foot .btn,
.ai-sheet .btn,
.ai-sheet .btn-primary,
.ai-sheet .btn-ghost,
.work-btn,
.data-x.restore {
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  flex: 0 0 var(--mp-pill-w) !important;
  width: var(--mp-pill-w) !important;
  min-width: var(--mp-pill-w) !important;
  max-width: var(--mp-pill-w) !important;
  height: var(--mp-pill-h) !important;
  min-height: var(--mp-pill-h) !important;
  max-height: var(--mp-pill-h) !important;
  padding: 0 .45rem !important;
  border-radius: 999px !important;
  aspect-ratio: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .25rem !important;
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-size: var(--mp-type) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: var(--mp-ink) !important;
  -webkit-text-fill-color: var(--mp-ink) !important;
  text-shadow: none !important;
  background-color: var(--mp-wood) !important;
  background-image: none !important;
  border: 1px solid var(--mp-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.75),
    inset 0 -2px 4px rgba(120,80,20,.12),
    0 2px 5px rgba(0,0,0,.22) !important;
  filter: none !important;
}

#go-margo,
#ask-open,
#go-margo.ask-bar,
#ask-open.ask-bar,
.ask-nav .ask-bar {
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: var(--mp-pill-w) !important;
  height: var(--mp-pill-h) !important;
  min-height: var(--mp-pill-h) !important;
  max-height: var(--mp-pill-h) !important;
  padding: 0 .35rem !important;
  font-size: clamp(.58rem, 2.9vw, .72rem) !important;
}

.chip.active,
.chip.on,
button.chip.active,
.filters .chip.active,
.data-tabs .chip.active,
.ratings-tabs .chip.active,
.dir-modes .chip.active,
.look-choice.on,
.look-opt.on,
.mp-pill.on,
.modal-sheet .chip.active,
.modal-sheet .chip.on,
.modal-sheet .look-choice.on,
.modal-sheet .mp-pill.on,
.modal-sheet [aria-pressed="true"],
.report-sheet .chip.active,
.eval-sheet .chip.active {
  background-color: #c4a06a !important;
  background-image: none !important;
  border-color: #8a6a38 !important;
  color: var(--mp-ink) !important;
  -webkit-text-fill-color: var(--mp-ink) !important;
  box-shadow:
    inset 0 2px 5px rgba(60, 30, 8, .35),
    0 1px 2px rgba(0,0,0,.18) !important;
  filter: none !important;
}
html.skin-pro .chip.active,
html.skin-pro .chip.on,
html.skin-pro button.chip.active,
html.skin-pro .filters .chip.active,
html.skin-pro .data-tabs .chip.active,
html.skin-pro .ratings-tabs .chip.active,
html.skin-pro .dir-modes .chip.active,
html.skin-pro .look-choice.on,
html.skin-pro .look-opt.on,
html.skin-pro .mp-pill.on,
html.skin-pro .modal-sheet .chip.active,
html.skin-pro .modal-sheet .chip.on,
html.skin-pro .modal-sheet .look-choice.on,
html.skin-pro .modal-sheet .mp-pill.on,
html.skin-pro .modal-sheet [aria-pressed="true"],
html.skin-pro .report-sheet .chip.active,
html.skin-pro .eval-sheet .chip.active {
  background-color: #df765a !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.chip.active::before,
.chip.on::before,
.look-choice.on::before,
.modal-sheet .chip.active::before {
  filter: brightness(1.35) contrast(.75) saturate(.28) !important;
  opacity: .28 !important;
}
.toggle.on {
  background: #b85a42 !important;
}
.modal-sheet .chip:active,
.modal-sheet .look-choice:active,
.modal-sheet .mp-pill:active,
.modal-sheet button:active:not(:disabled):not(.look-orb):not(.win-btn),
.modal-sheet .photo-way:active,
.chip:active,
.look-choice:active {
  background-color: #a8884e !important;
  border-color: #6e5228 !important;
  box-shadow: inset 0 3px 6px rgba(40, 20, 6, .4) !important;
}

.mp-pill::before,
.ask-bar::before,
#go-margo::before,
#ask-open::before,
.btn.mp-pill::before,
.btn.pulse-btn::before,
.btn.btn-primary::before,
.btn.btn-ghost::before,
.btn.btn-block::before,
.chip::before,
.look-choice::before,
.photo-way::before,
.dir-menu button::before,
body > .dir-menu button::before,
.modal-foot .btn::before,
.eval-actions .btn::before,
.report-foot .btn::before,
.sg-foot .btn::before,
.ai-sheet .btn::before,
.data-x.restore::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("/wood.jpg") center / 260px repeat !important;
  filter: brightness(2.4) contrast(.7) saturate(.32) !important;
  opacity: .38 !important;
  pointer-events: none !important;
}

.mp-pill > *,
.ask-bar > *,
.chip > *,
.btn > *,
.look-choice > * {
  position: relative !important;
  z-index: 1 !important;
}

.mp-pill .btn-lbl,
.chip .btn-lbl,
.ask-bar,
#go-margo,
#ask-open,
.btn .btn-lbl,
.dir-menu .btn-lbl,
.photo-way,
.look-choice span {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-size: var(--mp-type) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--mp-ink) !important;
  -webkit-text-fill-color: var(--mp-ink) !important;
  text-shadow: none !important;
}

.ask-nav {
  justify-content: center !important;
}

.mp-circle,
.skin-orb,
.work-ico,
.work-ico.is-off,
.win-btn,
.win-btn.win-add,
.win-btn.win-cancel,
.win-btn.win-save,
.win-btn.win-close,
#btn-new-project,
.work-head #btn-new-project,
.pulse-work .work-head #btn-new-project,
.win-btn#btn-new-project,
.work-head-acts #btn-new-project,
.look-orb,
.look-orb-sort,
.look-orb-filter,
.dir-filter-btn,
.job-orb,
.dir-more,
.ask-round,
#nav-back,
#nav-top,
.contact-ico,
a.contact-ico,
span.contact-ico,
.btn.contact-ico,
.data-x,
.modal-x,
.cal-nav,
.prof-back,
.modal-foot.win-acts .win-btn,
.modal-foot.win-acts .win-btn.win-cancel,
.modal-foot.win-acts .win-btn.win-save,
.modal-foot.win-acts #modal-close-2,
.win-acts .win-btn,
.win-acts #modal-close-2,
#modal-close-2,
#modal-close-2.win-btn,
button#modal-close-2,
#tk-save,
#tk-save.win-btn,
#sg-submit,
#me-save,
#de-save,
#nu-submit,
#pp-submit,
#fg-submit,
#dr-submit,
.light-go,
.light-stop {
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: var(--mp-circle) !important;
  height: var(--mp-circle) !important;
  min-width: var(--mp-circle) !important;
  max-width: var(--mp-circle) !important;
  min-height: var(--mp-circle) !important;
  max-height: var(--mp-circle) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--mp-circle) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  color: var(--mp-ink) !important;
  -webkit-text-fill-color: var(--mp-ink) !important;
  background-color: var(--mp-wood) !important;
  background-image: none !important;
  border: 1px solid var(--mp-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.75),
    inset 0 -2px 4px rgba(120,80,20,.12),
    0 2px 5px rgba(0,0,0,.22) !important;
  filter: none !important;
}

.mp-circle::before,
.skin-orb::before,
.work-ico::before,
.win-btn::before,
#btn-new-project::before,
#modal-close-2::before,
#tk-save::before,
.look-orb::before,
.look-fold::before,
.job-orb::before,
.dir-more::before,
.ask-round::before,
#nav-back::before,
#nav-top::before,
.contact-ico::before,
.data-x::before,
.modal-x::before,
.cal-nav::before,
.prof-back::before,
.light-go::before,
.light-stop::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("/wood.jpg") center / 260px repeat !important;
  filter: brightness(2.4) contrast(.7) saturate(.32) !important;
  opacity: .38 !important;
  pointer-events: none !important;
}

.mp-circle svg,
.skin-orb svg,
.skin-orb img,
.work-ico svg,
.win-btn svg,
#btn-new-project svg,
#modal-close-2 svg,
#tk-save svg,
.look-orb svg,
.look-fold svg,
.job-orb svg,
.dir-more svg,
.ask-round svg,
.contact-ico svg,
.data-x svg,
.modal-x svg,
.cal-nav svg,
.prof-back svg,
.light-go svg,
.light-stop svg,
.mp-circle > *,
.work-ico > *,
.win-btn > *,
#btn-new-project > *,
#modal-close-2 > *,
#tk-save > * {
  position: relative !important;
  z-index: 1 !important;
  width: var(--mp-icon) !important;
  height: var(--mp-icon) !important;
  max-width: var(--mp-icon) !important;
  max-height: var(--mp-icon) !important;
  color: var(--mp-ink) !important;
  fill: var(--mp-ink) !important;
  stroke: var(--mp-ink) !important;
}

.work-ico .work-plus,
.cal-nav,
.prof-back,
.dir-more,
.data-x {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-size: var(--mp-icon) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--mp-ink) !important;
  -webkit-text-fill-color: var(--mp-ink) !important;
}

.dir-menu,
body > .dir-menu {
  display: grid !important;
  gap: .35rem !important;
  width: var(--mp-pill-w) !important;
  min-width: var(--mp-pill-w) !important;
  max-width: var(--mp-pill-w) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  z-index: 2600 !important;
}
.dir-menu button,
.dir-menu a,
.dir-menu .btn,
.dir-menu .mp-pill,
body > .dir-menu button,
body > .dir-menu .mp-pill,
body > .dir-menu > .mp-pill {
  box-sizing: border-box !important;
  flex: 0 0 9.35rem !important;
  width: 9.35rem !important;
  min-width: 9.35rem !important;
  max-width: 9.35rem !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  max-height: 1.8rem !important;
  padding: 0 .45rem !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

/* NEVER put a button over text. Team hamburger sits on the photo, top-right. */
.dir-avatar-wrap {
  position: relative !important;
}
.dir-avatar-wrap > .dir-more,
.dir-card .dir-more,
.team-page .dir-card .dir-more,
.org-node .dir-more {
  position: absolute !important;
  top: .18rem !important;
  right: .18rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 6 !important;
  margin: 0 !important;
}

/* Professional: leaf buttons, white symbols. Banner buttons are not leaf. */
html[data-skin="pro"] {
  --mp-wood: #df765a;
  --mp-ink: #ffffff;
  --mp-edge: transparent;
}
html.skin-pro .mp-pill,
html.skin-pro .ask-bar,
html.skin-pro .chip,
html.skin-pro .look-choice,
html.skin-pro .look-opt,
html.skin-pro .photo-way,
html.skin-pro #go-margo,
html.skin-pro #ask-open,
html.skin-pro .mp-circle,
html.skin-pro .win-btn,
html.skin-pro .work-btn,
html.skin-pro .data-x,
html.skin-pro .skin-orb,
html.skin-pro .look-orb,
html.skin-pro .look-orb-sort,
html.skin-pro .look-orb-filter,
html.skin-pro .ask-round,
html.skin-pro .contact-ico,
html.skin-pro .work-ico,
html.skin-pro .dir-more,
html.skin-pro .modal-x,
html.skin-pro .cal-nav,
html.skin-pro .job-orb,
html.skin-pro #btn-new-project,
html.skin-pro button[data-add-task],
html.skin-pro #acct-menu.acct-more {
  background: #df765a !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.skin-pro .mp-pill,
html.skin-pro .ask-bar,
html.skin-pro .chip,
html.skin-pro .look-choice,
html.skin-pro .look-opt,
html.skin-pro .photo-way,
html.skin-pro #go-margo,
html.skin-pro #ask-open,
html.skin-pro .btn-lbl,
html.skin-pro .mp-pill .btn-lbl,
html.skin-pro .chip .btn-lbl {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
html.skin-pro .mp-circle,
html.skin-pro .win-btn,
html.skin-pro .work-btn,
html.skin-pro .data-x,
html.skin-pro .skin-orb,
html.skin-pro .look-orb,
html.skin-pro .look-orb-sort,
html.skin-pro .look-orb-filter,
html.skin-pro .ask-round,
html.skin-pro .contact-ico,
html.skin-pro .work-ico,
html.skin-pro .dir-more,
html.skin-pro .modal-x,
html.skin-pro .cal-nav,
html.skin-pro .job-orb,
html.skin-pro #btn-new-project,
html.skin-pro button[data-add-task],
html.skin-pro #acct-menu.acct-more {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.skin-pro .mp-pill::before,
html.skin-pro .mp-circle::before,
html.skin-pro .win-btn::before,
html.skin-pro .work-ico::before,
html.skin-pro .ask-round::before,
html.skin-pro #btn-new-project::before,
html.skin-pro #acct-menu::before {
  display: none !important;
}
html.skin-pro .nav-banner .nav button,
html.skin-pro .nav button,
html.skin-pro .nav-banner .nav button.active {
  background: rgba(255, 255, 255, .10) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow:
    0 0 8px rgba(223, 118, 90, .95),
    0 0 16px rgba(223, 118, 90, .7),
    0 0 28px rgba(223, 118, 90, .4) !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  filter: none !important;
  text-transform: uppercase !important;
}
html.skin-pro .nav button .nav-lbl,
html.skin-pro .nav button.active .nav-lbl {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-transform: uppercase !important;
}
html.skin-pro .work-plus,
html.skin-pro .work-ico .work-plus,
html.skin-pro #btn-new-project,
html.skin-pro #btn-new-project *,
html.skin-pro button.win-add *,
html.skin-pro button[data-add-task] *,
html.skin-pro .mp-circle svg,
html.skin-pro .mp-circle svg *,
html.skin-pro .win-btn svg,
html.skin-pro .win-btn svg *,
html.skin-pro .work-ico svg,
html.skin-pro .work-ico svg *,
html.skin-pro .look-orb svg,
html.skin-pro .look-orb svg *,
html.skin-pro .contact-ico svg,
html.skin-pro .contact-ico svg *,
html.skin-pro .skin-orb svg,
html.skin-pro .skin-orb svg *,
html.skin-pro .dir-more svg,
html.skin-pro .dir-more svg *,
html.skin-pro .job-orb svg,
html.skin-pro .job-orb svg *,
html.skin-pro .ask-round svg,
html.skin-pro .ask-round svg *,
html.skin-pro .modal-x svg,
html.skin-pro .modal-x svg *,
html.skin-pro .cal-nav svg,
html.skin-pro .cal-nav svg * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
html.skin-pro #app .pulse-announce,
html.skin-pro #app .announce-ticker,
html.skin-pro #app .announce-ticker-bar,
html.skin-pro #app .announce-ticker-run,
html.skin-pro #app .announce-ticker-run * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  font-family: Orbitron, sans-serif !important;
  font-weight: 700 !important;
}

html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app h1:not(.banner-title),
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app h2,
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app .page-title {
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app .page-sub,
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app .field label,
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app td,
html.skin-pro:not(:has(.entry)):not(:has(.intro)) #app th {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
html.skin-pro #app .banner-title,
html.skin-pro .banner-title,
html.skin-pro .banner-title.glow-blue,
html.skin-pro .banner-title.is-plain-white {
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.skin-pro #app .pulse-announce .announce-ticker.pro-tick,
html.skin-pro #app .pulse-announce .announce-ticker.pro-tick *,
html.skin-pro #app .announce-ticker-run.pro-tick,
html.skin-pro #app span.announce-ticker-run {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: Orbitron, sans-serif !important;
  font-weight: 700 !important;
}

html.skin-pro .nav button .nav-lbl,
html.skin-pro .nav .nav-lbl,
html.skin-pro .nav button.active .nav-lbl {
  font-size: .5rem !important;
  margin: 0 !important;
  line-height: 1 !important;
  align-self: stretch !important;
}
html.skin-pro .nav-banner .nav button,
html.skin-pro .nav button {
  justify-content: flex-end !important;
  padding-bottom: .06rem !important;
  gap: 0 !important;
}
html.skin-pro .banner-now,
html.skin-pro #banner-now,
html.skin-pro #app .banner-now,
html.skin-pro #app #banner-now {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: .03em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html.skin-pro #app h1:not(.banner-title),
html.skin-pro #app h2,
html.skin-pro #app h3,
html.skin-pro #app h4,
html.skin-pro #app .page-title,
html.skin-pro #app .modal-head h2,
html.skin-pro #app .ex-head-t,
html.skin-pro #app .dir-section-title,
html.skin-pro #app .dir-customize-title,
html.skin-pro #app .look-drop-title,
html.skin-pro #app .card h3,
html.skin-pro #app .ex-tile header,
html.skin-pro #app .work-head h2,
html.skin-pro #app .org-lead,
html.skin-pro #app .prof-h,
html.skin-pro #app .known-head,
html.skin-pro #app .ship-split-h,
html.skin-pro #app .login-card h1,
html.skin-pro #app .form-card > h2,
html.skin-pro #app .data-window h2,
html.skin-pro #app .rhythm-title,
html.skin-pro #app .form-title,
html.skin-pro #app .modal-title {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html.skin-pro #app .dir-name,
html.skin-pro #app .dir-name span,
html.skin-pro #app .dir-open .dir-name,
html.skin-pro #app .dir-open .dir-name span,
html.skin-pro #app .org-node .dir-name,
html.skin-pro #app .org-node .dir-name span,
html.skin-pro #app .team-page .dir-name,
html.skin-pro #app .team-page .dir-name span {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-shadow: none !important;
  background: none !important;
}

html.skin-pro #app button:not(.disco-hang):not(.tv-launch):not([data-view]):not(.rating-mini):not(.peer-stars):not(.talk-chip):not(#btn-login):not(.mp-circle):not(.win-btn):not(.work-ico):not(.look-orb):not(.contact-ico),
html.skin-pro #app .mp-pill,
html.skin-pro #app .mp-pill .btn-lbl,
html.skin-pro #app .chip,
html.skin-pro #app .chip .btn-lbl,
html.skin-pro #app .look-choice,
html.skin-pro #app .look-opt,
html.skin-pro #app .photo-way,
html.skin-pro #app .ask-bar,
html.skin-pro #app .btn-lbl,
html.skin-pro #app a.btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
}
html.skin-pro #app .mp-circle,
html.skin-pro #app .mp-circle *:not(img),
html.skin-pro #app .win-btn,
html.skin-pro #app .win-btn *,
html.skin-pro #app .work-ico,
html.skin-pro #app .work-ico *,
html.skin-pro #app .look-orb,
html.skin-pro #app .look-orb *:not(img),
html.skin-pro #app .contact-ico,
html.skin-pro #app .contact-ico *,
html.skin-pro #app .skin-orb,
html.skin-pro #app .skin-orb *:not(img),
html.skin-pro #app .dir-more,
html.skin-pro #app .dir-more *,
html.skin-pro #app .job-orb,
html.skin-pro #app .job-orb *:not(img),
html.skin-pro #app .ask-round,
html.skin-pro #app .modal-x,
html.skin-pro #app .cal-nav,
html.skin-pro #app .work-plus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
html.skin-pro #app .nav-lbl {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.skin-pro #app .rel-guide-sheet .rel-pip,
html.skin-pro #app .rel-guide-sheet span.rel-pip,
html.skin-pro #app .modal-body .rel-pip {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
}
html.skin-pro #app .rel-guide-sheet .rel-rule,
html.skin-pro #app .modal-body .rel-rule {
  background: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Ratings: every font under the search bar is black */
html.skin-pro .shell[data-view="ratings"] .main,
html.skin-pro .shell[data-view="reliability"] .main,
html.skin-pro .shell[data-view="fives"] .main,
html.skin-pro .shell[data-view="ratings"] .main *:not(button):not(img):not(svg):not(.ex-star):not(.ex-star *),
html.skin-pro .shell[data-view="ratings"] .page-title,
html.skin-pro .shell[data-view="ratings"] .rate-pane h3,
html.skin-pro .shell[data-view="ratings"] .ratings-month,
html.skin-pro .shell[data-view="ratings"] .mini-name,
html.skin-pro .shell[data-view="ratings"] .rating-mini .mini-name,
html.skin-pro .shell[data-view="ratings"] .mini-n,
html.skin-pro .shell[data-view="ratings"] .mini-score,
html.skin-pro .shell[data-view="ratings"] .rating-mini .badge,
html.skin-pro .shell[data-view="ratings"] .badge {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}
html.skin-pro .shell[data-view="ratings"] button.rating-mini,
html.skin-pro .shell[data-view="ratings"] button.rating-mini .mini-n,
html.skin-pro .shell[data-view="ratings"] button.rating-mini .mini-name,
html.skin-pro .shell[data-view="ratings"] button.rating-mini .mini-score,
html.skin-pro .shell[data-view="ratings"] button.rating-mini span {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: transparent !important;
}
html.skin-pro .shell[data-view="ratings"] button.rating-mini {
  background: linear-gradient(34deg,
    rgba(223, 118, 90, 0.28) 0%,
    rgba(223, 118, 90, 0.06) 42%,
    rgba(223, 118, 90, 0.02) 50%,
    rgba(223, 118, 90, 0.06) 58%,
    rgba(223, 118, 90, 0.28) 100%) !important;
  background-image: linear-gradient(34deg,
    rgba(223, 118, 90, 0.28) 0%,
    rgba(223, 118, 90, 0.06) 42%,
    rgba(223, 118, 90, 0.02) 50%,
    rgba(223, 118, 90, 0.06) 58%,
    rgba(223, 118, 90, 0.28) 100%) !important;
  border: none !important;
}
html.skin-pro .shell[data-view="ratings"] .ratings-tabs .chip,
html.skin-pro .shell[data-view="ratings"] .ratings-tabs .chip.active,
html.skin-pro .shell[data-view="ratings"] .ratings-tabs button.chip,
html.skin-pro .shell[data-view="reliability"] .ratings-tabs .chip,
html.skin-pro .shell[data-view="fives"] .ratings-tabs .chip,
html.skin-pro .shell[data-view="ratings"] .mp-pill,
html.skin-pro .shell[data-view="ratings"] .look-choice,
html.skin-pro .shell[data-view="ratings"] .chip {
  background: #df765a !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-size: .72rem !important;
}

html.skin-pro #app .ship-po-row.head,
html.skin-pro #app .ship-po-row.head span,
html.skin-pro #app thead th,
html.skin-pro #app th,
html.skin-pro #app .data-window th,
html.skin-pro #app .lt-table th,
html.skin-pro #app .design-log th,
html.skin-pro #app .ecom-preview th,
html.skin-pro #app .table-wrap thead th {
  background: #df765a !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #df765a !important;
}

html.skin-pro #app .mvp-name,
html.skin-pro #app .mvp-name-top,
html.skin-pro #app .mvp-name-bot,
html.skin-pro #app .mvp-name-stage,
html.skin-pro #app .mvp-name-stage .ex-mvp-name,
html.skin-pro #app .ex-mvp-name,
html.skin-pro #app .team-mvp .mvp-name,
html.skin-pro #app .team-mvp .ex-mvp-name {
  color: #df765a !important;
  -webkit-text-fill-color: #df765a !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-stroke: 0 !important;
}

html.skin-pro .tv-board .ex-tile.ex-mvp .pulse-mvp .mvp-name-fit,
html.skin-pro .tv-board .ex-tile.ex-mvp .pulse-mvp .mvp-name-fit .mvp-name-line {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-variation-settings: normal !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

html.skin-pro #app .mvp-name-fit,
html.skin-pro #app .mvp-name-fit .mvp-name-line,
html.skin-pro .pulse-mvp .mvp-name-fit,
html.skin-pro .pulse-mvp .mvp-name-fit .mvp-name-line {
  font-family: var(--title-font) !important;
  font-weight: 900 !important;
  font-stretch: condensed !important;
  font-variation-settings: "wdth" 80, "wght" 900 !important;
  color: #8ec8ff !important;
  -webkit-text-fill-color: #8ec8ff !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(80, 190, 255, 1),
    0 0 18px rgba(40, 150, 255, .95),
    0 0 32px rgba(20, 120, 255, .75) !important;
}

html.skin-pro .shell[data-view="teams"] .peer-slot,
html.skin-pro .shell[data-view="teams"] .peer-slot .star.full,
html.skin-pro .shell[data-view="teams"] .star.full,
html.skin-pro .shell[data-view="teams"] .mvp-rate,
html.skin-pro .shell[data-view="teams"] .mvp-rate .star.full,
html.skin-pro .shell[data-view="teams"] .ex-star.full,
html.skin-pro .shell[data-view="teams"] .ex-star.on,
html.skin-pro #app .dir-card .peer-slot,
html.skin-pro #app .dir-card .peer-slot .star.full,
html.skin-pro #app .peer-stars .star.full,
html.skin-pro #app button.peer-stars .star.full,
html.skin-pro #app button.peer-stars svg.star.full,
html.skin-pro #app button.peer-stars .star.full path,
html.skin-pro #app .peer-stars svg.star.full,
html.skin-pro #app .peer-stars .star.full path {
  fill: #E8C04A !important;
  color: #E8C04A !important;
  -webkit-text-fill-color: #E8C04A !important;
  stroke: none !important;
  filter: none !important;
}
html.skin-pro .shell[data-view="teams"] .peer-slot .star.empty,
html.skin-pro .shell[data-view="teams"] .star.empty,
html.skin-pro #app .dir-card .peer-slot .star.empty {
  fill: #d4c89a !important;
  color: #d4c89a !important;
  -webkit-text-fill-color: #d4c89a !important;
}

html.skin-pro .shell[data-view="teams"] .dir-open,
html.skin-pro #app .team-page .dir-open,
html.skin-pro #app .dir-card .dir-open {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  gap: 0.125in !important;
}
html.skin-pro #app .dir-card .dir-role,
html.skin-pro #app .dir-card .dir-place {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-size: .62rem !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

html.skin-pro #app .ai-sheet .ask-chat,
html.skin-pro #app .ai-sheet .ask-answer,
html.skin-pro #app .ai-sheet .ask-empty,
html.skin-pro #app .ai-sheet .ask-bubble,
html.skin-pro #app .ai-sheet .ask-bubble.user,
html.skin-pro #app .ai-sheet .ask-bubble.model,
html.skin-pro #app .ai-sheet .gold-type {
  font-family: Lexend, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  -webkit-text-stroke: 0 !important;
}

html.skin-pro .shell[data-view="tv"] .ex-tile,
html.skin-pro .shell[data-view="tv"] .tv-card,
html.skin-pro .tv-board .ex-tile,
html.skin-pro .tv-board .tv-card,
html.skin-pro #app .tv-board .ex-tile,
html.skin-pro #app .tv-board .tv-card,
html.skin-pro #app .tv-board .margo-tile,
html.skin-pro .tv-board .ex-tile::before,
html.skin-pro .tv-board .ex-tile::after,
html.skin-pro .tv-board .tv-card::before,
html.skin-pro .tv-board .margo-tile::before,
html.skin-pro .tv-board .mvp-clock-cell,
html.skin-pro .tv-board .team-mvp,
html.skin-pro .tv-board .pulse-mvp {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.skin-pro .shell[data-view="tv"] .ex-tile *:not(img):not(video):not(.ex-star):not(.ex-star *):not(.star):not(.star *):not(.mvp-name-fit):not(.mvp-name-line):not(.ex-mvp-score),
html.skin-pro .tv-board .ex-tile *:not(img):not(video):not(.ex-star):not(.ex-star *):not(.star):not(.star *):not(.mvp-name-fit):not(.mvp-name-line):not(.ex-mvp-score) {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
}
html.skin-pro .tv-board .ex-mvp-score,
html.skin-pro .tv-board .pulse-mvp .ex-mvp-score,
html.skin-pro .tv-board .team-mvp-meta .ex-mvp-score {
  color: #8ec8ff !important;
  -webkit-text-fill-color: #8ec8ff !important;
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.6rem, 9cqi, 4.4rem) !important;
  line-height: .78 !important;
  letter-spacing: -.04em !important;
  text-shadow:
    0 0 8px rgba(80, 190, 255, 1),
    0 0 18px rgba(40, 150, 255, .95),
    0 0 32px rgba(20, 120, 255, .75) !important;
}
html.skin-pro .tv-board .pulse-mvp .mvp-star-orb {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.skin-pro .shell[data-view="tv"] .ex-margo-meta div,
html.skin-pro .tv-board .ex-margo-meta div,
html.skin-pro .shell[data-view="tv"] .eval-need-track,
html.skin-pro .tv-board .eval-need-track,
html.skin-pro .shell[data-view="tv"] .eval-need,
html.skin-pro .tv-board .eval-need {
  background: #df765a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html.skin-pro .shell[data-view="tv"] .ex-margo-meta span,
html.skin-pro .shell[data-view="tv"] .ex-margo-meta b,
html.skin-pro .shell[data-view="tv"] .eval-need em,
html.skin-pro .shell[data-view="tv"] .eval-low-blurb,
html.skin-pro .tv-board .ex-margo-meta span,
html.skin-pro .tv-board .ex-margo-meta b,
html.skin-pro .tv-board .eval-need em,
html.skin-pro .tv-board .eval-low-blurb {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html.skin-pro .shell[data-view="tv"] .ex-star.full,
html.skin-pro .shell[data-view="tv"] .ex-star.on,
html.skin-pro .shell[data-view="tv"] .star.full,
html.skin-pro .tv-board .ex-star.full,
html.skin-pro .tv-board .ex-star.on,
html.skin-pro .tv-board .star.full {
  color: #E8C04A !important;
  -webkit-text-fill-color: #E8C04A !important;
  fill: #E8C04A !important;
  filter: none !important;
}
html.skin-pro .shell[data-view="tv"] .ex-star.empty,
html.skin-pro .shell[data-view="tv"] .star.empty,
html.skin-pro .tv-board .ex-star.empty,
html.skin-pro .tv-board .star.empty {
  color: #f3d48a !important;
  -webkit-text-fill-color: #f3d48a !important;
  fill: #f3d48a !important;
}
html.skin-pro .shell[data-view="ratings"] .rating-mini {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}
html.skin-pro .shell[data-view="ratings"] .ex-star,
html.skin-pro .shell[data-view="ratings"] .ex-star.empty {
  color: #c8c8c8 !important;
  -webkit-text-fill-color: #c8c8c8 !important;
}
html.skin-pro .shell[data-view="ratings"] .ex-star.full,
html.skin-pro .shell[data-view="ratings"] .ex-star.on {
  color: #e8c04a !important;
  -webkit-text-fill-color: #e8c04a !important;
}
html.skin-pro #app .topbar .tagline,
html.skin-pro .topbar > .tagline,
html.skin-pro #app .topbar .tagline .tag-l2,
html.skin-pro #app .topbar .tagline .tag-l3,
html.skin-pro #app .login-imagine,
html.skin-pro #app .login-card .tagline {
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

html.skin-pro #app .ex-tile.ex-mvp,
html.skin-pro #app .tv-board .ex-tile.ex-mvp,
html.skin-pro #app .tv-board .ex-mvp,
html.skin-pro #app .ex-tile.ex-mvp .team-mvp,
html.skin-pro #app .ex-tile.ex-mvp .pulse-mvp,
html.skin-pro #app .ex-tile.ex-mvp .mvp-clock-cell {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

html.skin-pro .shell[data-view="data"] .form-card,
html.skin-pro .shell[data-view="data"] .data-window,
html.skin-pro .shell[data-view="data"] .data-desk,
html.skin-pro .shell[data-view="data"] .data-access-card,
html.skin-pro .shell[data-view="data"] .ex-tile,
html.skin-pro .shell[data-view="data"] .card {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.shell[data-view="data"] .chip,
.shell[data-view="data"] .mp-pill,
.shell[data-view="data"] .win-btn,
.shell[data-view="data"] button,
.shell[data-view="data"] .data-name,
.shell[data-view="data"] .data-cell {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 3 !important;
}