/* KlarityXpert client screens share the website's visual identity. */
:is(.kx-client-auth, #wrapwrap.o_portal, .kx-project-view) {
  --kx-wine: #50161d;
  --kx-dark: #471b12;
  --kx-amber: #e3933e;
  --kx-paper: #f1f1f1;
  --kx-ink: #271b1c;
  --kx-line: #ded5d1;
  --kx-heading: Futura, "Avenir Next", "Trebuchet MS", sans-serif;
  font-family: "Avenir Next", system-ui, sans-serif;
}

.kx-client-auth {
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 8vw, 100px) max(18px, calc((100% - 1100px) / 2));
  min-height: 590px;
  background: linear-gradient(135deg, #63252d, var(--kx-wine) 50%, #321015);
  color: var(--kx-paper);
}
.kx-client-auth::before, .kx-client-auth::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(70vw, 850px);
  aspect-ratio: 1;
  border: 1px solid #e3933e40;
  border-radius: 50%;
  right: -19%;
  top: -75%;
  pointer-events: none;
}
.kx-client-auth::after { transform: scale(1.11); border-color: #e3933e26; }
.kx-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: clamp(32px, 7vw, 88px);
}
.kx-auth-intro { padding-block: 12px; }
.kx-auth-intro .kx-auth-label { color: #ffcb93; font-weight: 700; margin: 0 0 14px; }
.kx-auth-intro h1 {
  max-width: 12ch;
  font: 700 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--kx-heading);
  letter-spacing: -.035em;
  color: var(--kx-paper);
  margin: 0 0 18px;
}
.kx-auth-intro p:last-child { max-width: 32ch; color: #efdbd9; margin: 0; }
.kx-client-auth .kx-auth-form {
  margin: 0;
  padding: clamp(20px, 4.1vw, 40px);
  background: var(--kx-paper);
  color: var(--kx-ink);
  border-top: 4px solid var(--kx-amber);
  border-radius: 12px;
  min-width: 0;
}
.kx-auth-form :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) {
  max-width: none;
  margin: 0;
  padding: 0;
}
.kx-auth-form .form-control { min-height: 46px; border-color: #bba8a4; }
.kx-auth-form a { color: var(--kx-wine); }
.kx-auth-form .btn-primary {
  --btn-bg: #e3933e;
  --btn-color: #271b1c;
  background: var(--kx-amber);
  border-color: var(--kx-amber);
  color: var(--kx-ink);
  min-height: 46px;
  font-weight: 750;
}
.kx-auth-form .btn-primary:hover { background: #f0a959; border-color: #f0a959; color: var(--kx-ink); }
.kx-client-auth :focus-visible, #wrapwrap.o_portal #wrap.o_portal_wrap :focus-visible {
  outline: 2px solid #8a3f19;
  outline-offset: 3px;
}

#wrapwrap.o_portal #wrap.o_portal_wrap { color: var(--kx-ink); background: var(--kx-paper); min-height: 38vh; }
#wrapwrap.o_portal #wrap.o_portal_wrap :is(h1, h2, h3, h4, .breadcrumb) { font-family: var(--kx-heading); }
.kx-portal-masthead {
  display: grid;
  gap: .3rem;
  padding: clamp(18px, 4vw, 34px);
  margin: 0 0 1.25rem;
  color: #fff;
  background: linear-gradient(105deg, var(--kx-wine), #421419);
  border-inline-start: 4px solid var(--kx-amber);
  border-radius: 10px;
}
.kx-portal-masthead strong { font: 700 clamp(1.35rem, 3vw, 2.2rem)/1.08 var(--kx-heading); }
.kx-portal-masthead p { color: #f4e0dd; margin: 0; }
#wrapwrap.o_portal #wrap.o_portal_wrap .o_portal_navbar {
  background: var(--kx-wine);
  border-inline-start: 4px solid var(--kx-amber);
  border-radius: 10px;
  padding: .75rem 1rem !important;
  gap: .65rem;
  color: #fff;
}
#wrapwrap.o_portal .o_portal_navbar :is(.breadcrumb-item, .breadcrumb-item a) { color: #fff; }
#wrapwrap.o_portal .o_portal_navbar .breadcrumb-item::before { color: #ffcb93; }
#wrapwrap.o_portal .o_portal_navbar :is(.btn-light, .btn-secondary) { background-color: var(--kx-paper); color: var(--kx-ink); }
#wrapwrap.o_portal .o_portal_navbar .btn-primary {
  background: var(--kx-amber);
  border-color: var(--kx-amber);
  color: var(--kx-ink);
}
#wrapwrap.o_portal #wrap.o_portal_wrap .o_portal_navbar :focus-visible {
  outline-color: #ffcb93;
}
#wrapwrap.o_portal .o_portal_my_doc_table { border: 1px solid var(--kx-line); }
#wrapwrap.o_portal .o_portal_my_doc_table thead th {
  --table-bg: #eadfdb;
  background-color: #eadfdb;
  color: var(--kx-dark);
  border-color: var(--kx-line);
}
#wrapwrap.o_portal .o_portal_my_doc_table :is(td, th) { padding-block: .65rem; }
#wrapwrap.o_portal .o_portal_index_card a {
  border: 1px solid var(--kx-line);
  background: #fcfafa;
  color: var(--kx-wine);
}
#wrapwrap.o_portal .o_portal_index_card a:hover { border-color: #b96533; }
#wrapwrap.o_portal .o_portal_index_card .o_portal_icon {
  background: #f5e6d6;
  border-radius: 8px;
  padding: .35rem;
}
#wrapwrap.o_portal .o_portal_pager .page-item.active .page-link {
  background: var(--kx-wine);
  border-color: var(--kx-wine);
  color: #fff;
}

@media (max-width: 760px) {
  .kx-client-auth { min-height: 0; padding-block: 34px 42px; }
  .kx-auth-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kx-auth-intro { padding-block: 0; }
  .kx-auth-intro h1 { max-width: 18ch; margin-bottom: 10px; }
  .kx-auth-intro .kx-auth-label { margin-bottom: 8px; }
  .kx-client-auth::before, .kx-client-auth::after { top: -10%; }
  #wrapwrap.o_portal .o_portal_my_doc_table td a:is([href*="/my/projects/"], [href*="/my/tasks/"]) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}