/*
 * Motio brand skin for partners.motio.com (Astra theme + Zoho "zportals" plugin)
 * Tokens copied from motio.com (:root --mo-*) on 2026-10-20.
 * Loaded after theme/plugin CSS by motio-brand.php; !important is only used
 * where zportals hard-codes inline styles.
 */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --mo-ink: #0B2630;
  --mo-carbon: #2C2418;
  --mo-cream: #F4EFE5;
  --mo-sand: #EAE3D5;
  --mo-soft: #EFE7D6;
  --mo-line: #DDD3C1;
  --mo-steel: #6E665A;
  --mo-hero: #057F9B;
  --mo-hero-press: #006985;
  --mo-kick: #F4A300;
  --mo-pure: #FFFFFF;
  --mo-paper: #F8F3EA; /* warm off-white for large surfaces; pure white glares */
  --mo-font-sans: "General Sans", system-ui, -apple-system, sans-serif;
  --mo-font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --mo-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --mo-radius-md: 16px;
  --mo-radius-pill: 12px;
  --mo-shadow-sm: 0 2px 8px -4px rgba(40,32,18,.25);
  --mo-shadow-md: 0 18px 40px -30px rgba(40,32,18,.5);
  --mo-shadow-lg: 0 34px 80px -46px rgba(40,32,18,.55);
  --mo-ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Base ---------- */
body,
body.ast-plain-container,
#page, .site-content {
  background: var(--mo-cream);
  color: var(--mo-carbon);
  font-family: var(--mo-font-sans);
}
body, button, input, select, textarea,
.ast-button, .ast-custom-button {
  font-family: var(--mo-font-sans);
}
h1, h2, h3, .entry-title {
  font-family: var(--mo-font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--mo-ink);
}
h4, h5, h6 {
  font-family: var(--mo-font-sans);
  color: var(--mo-ink);
}
a { color: var(--mo-hero-press); }
a:hover, a:focus { color: var(--mo-ink); }
::selection { background: var(--mo-kick); color: var(--mo-ink); }

/* ---------- Header: ink bar, cream logo (matches motio.com nav) ---------- */
#masthead,
.ast-primary-header-bar,
.main-header-bar,
#ast-mobile-header .ast-primary-header-bar {
  background: var(--mo-ink) !important;
  border-bottom: 0 !important;
}
.ast-primary-header-bar .site-primary-header-wrap { min-height: 76px; }
.site-header .custom-logo-link img,
.ast-site-identity img.custom-logo {
  width: auto !important;
  max-width: none !important;
  height: 34px !important;
}
.main-header-menu .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  color: rgba(255,255,255,.82) !important;
  font-family: var(--mo-font-sans);
  font-weight: 500;
  font-size: 15px;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
  color: #fff !important;
}
.ast-mobile-menu-trigger-minimal,
.menu-toggle { color: #fff !important; }
.menu-toggle .ast-mobile-svg { fill: #fff !important; }
#ast-mobile-header .main-header-bar-navigation,
#ast-mobile-popup .ast-mobile-popup-drawer { background: var(--mo-ink); }

/* Eyebrow-style label on the right ("Motio Partner Portal") */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--mo-kick);
}

/* ---------- Footer: ink, muted text ---------- */
.site-footer,
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
  background: var(--mo-ink) !important;
  border-top: 0 !important;
}
.site-footer, .site-footer p, .ast-footer-copyright, .ast-footer-copyright p {
  color: rgba(255,255,255,.6) !important;
  font-family: var(--mo-font-sans);
  font-size: 14px;
}
.site-footer a { color: rgba(255,255,255,.85) !important; }

/* ---------- Portal content area ---------- */
#ccgclientportal-content,
.ccgclientportal-content {
  font-family: var(--mo-font-sans);
  color: var(--mo-carbon);
}

/* Cards / panels */
.ccgclientportal-content .ibox-content,
.ccgclientportal-content .ibox,
.ccgclientportal-content .panel,
.ccgclientportal-content .card {
  background: var(--mo-paper) !important;
  border: 1px solid var(--mo-line) !important;
  border-radius: var(--mo-radius-md) !important;
  box-shadow: var(--mo-shadow-lg) !important;
}

/* Login + reset card */
.ccgclientportal-content.login .ccgportal-login {
  max-width: 460px;
  margin: 64px auto !important;
  padding: 40px 36px 32px !important;
}
.ccgclientportal-content.login .ccgportal-login h4 {
  font-family: var(--mo-font-display) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--mo-ink) !important;
  padding: 0 15px 22px !important;
  margin: 0;
}
/* zportals prints "LOGIN" / "RESET YOUR PASSWORD"; all-caps reads as shouting
   in the display serif, so swap the text for sentence case. */
.ccgclientportal-content.login .login-form h4,
.ccgclientportal-content.login .forgetpassword-form h4 { font-size: 0 !important; }
.ccgclientportal-content.login .login-form h4::after,
.ccgclientportal-content.login .forgetpassword-form h4::after {
  font-size: 38px;
  line-height: 1.05;
}
.ccgclientportal-content.login .login-form h4::after { content: "Sign in"; }
.ccgclientportal-content.login .forgetpassword-form h4::after { content: "Reset your password"; }
@media (max-width: 600px) {
  .ccgclientportal-content.login .login-form h4::after,
  .ccgclientportal-content.login .forgetpassword-form h4::after { font-size: 30px; }
}
.ccgclientportal-content.login .login-form h4::before {
  content: "Partner Portal";
  display: block;
  margin-bottom: 14px;
  font-family: var(--mo-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mo-hero);
}

/* Form fields */
.ccgclientportal-content .loginIntput,
.ccgclientportal-content .form-group .loginIntput {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ccgclientportal-content label,
.ccgclientportal-content .labelstyle {
  font-family: var(--mo-font-sans);
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mo-ink) !important;
  text-transform: none;
  margin-bottom: 6px;
}
.ccgclientportal-content input[type="text"],
.ccgclientportal-content input[type="email"],
.ccgclientportal-content input[type="password"],
.ccgclientportal-content input[type="number"],
.ccgclientportal-content input[type="tel"],
.ccgclientportal-content input[type="url"],
.ccgclientportal-content input[type="search"],
.ccgclientportal-content select,
.ccgclientportal-content textarea,
.ccgclientportal-content .form-control {
  background: var(--mo-cream) !important;
  border: 1px solid var(--mo-line) !important;
  border-radius: 10px !important;
  color: var(--mo-ink) !important;
  font-family: var(--mo-font-sans);
  font-size: 15px !important;
  padding: 13px 15px !important;
  height: auto;
  box-shadow: none !important;
  transition: border-color .18s var(--mo-ease), box-shadow .18s var(--mo-ease);
}
.ccgclientportal-content input::placeholder,
.ccgclientportal-content textarea::placeholder { color: #9A907F; }
.ccgclientportal-content input:focus,
.ccgclientportal-content select:focus,
.ccgclientportal-content textarea:focus,
.ccgclientportal-content .form-control:focus {
  border-color: var(--mo-hero) !important;
  box-shadow: 0 0 0 3px rgba(5,127,155,.18) !important;
  outline: none;
}
/* zportals pins login inputs to height:29px via an #id rule */
.ccgclientportal-content input[type="text"],
.ccgclientportal-content input[type="email"],
.ccgclientportal-content input[type="password"],
.ccgclientportal-content input[type="number"],
.ccgclientportal-content input[type="tel"],
.ccgclientportal-content input[type="url"],
.ccgclientportal-content input[type="search"],
.ccgclientportal-content select {
  height: 48px !important;
  line-height: 20px !important;
}
.ccgclientportal-content .form-group { margin-bottom: 18px; }

/* Password eye toggle sits inside the field */
.ccgclientportal-content .loginIntput { position: relative; }
.ccgclientportal-content .loginIntput input#password {
  width: 100% !important;
  padding-right: 46px !important;
}
.ccgclientportal-content .showpass,
.ccgclientportal-content .hidepass {
  position: absolute;
  right: 4px;
  bottom: 0;
  float: none !important;
  width: 40px;
  line-height: 48px;
  text-align: center;
  color: var(--mo-steel);
  cursor: pointer;
}
.ccgclientportal-content .showpass:hover,
.ccgclientportal-content .hidepass:hover { color: var(--mo-ink); }

/* Buttons (zportals sets background inline, hence !important) */
.ccgclientportal-content .btn,
.ccgclientportal-content .btn-primary,
.ccgclientportal-content button[type="submit"],
.ccgclientportal-content input[type="submit"],
.ccgclientportal-content .login-button {
  background: var(--mo-hero) !important;
  border: 0 !important;
  border-radius: var(--mo-radius-pill) !important;
  color: #fff !important;
  font-family: var(--mo-font-sans);
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 26px !important;
  box-shadow: none !important;
  transition: background .18s var(--mo-ease), transform .18s var(--mo-ease);
}
.ccgclientportal-content .btn:hover,
.ccgclientportal-content .btn-primary:hover,
.ccgclientportal-content button[type="submit"]:hover,
.ccgclientportal-content .login-button:hover {
  background: var(--mo-hero-press) !important;
}
.ccgclientportal-content .btn:active { transform: translateY(1px); }
.ccgclientportal-content .btn-default,
.ccgclientportal-content .btn-secondary {
  background: var(--mo-paper) !important;
  color: var(--mo-ink) !important;
  border: 1px solid var(--mo-line) !important;
}
.ccgclientportal-content .btn-default:hover,
.ccgclientportal-content .btn-secondary:hover {
  background: var(--mo-soft) !important;
}
.ccgclientportal-content .btn-danger { background: #B3402A !important; }
.ccgclientportal-content .btn-success { background: var(--mo-ink) !important; }

/* Text links inside portal (inline #338dd0 etc.) */
.ccgclientportal-content a:not(.btn),
.ccgclientportal-content a[style] {
  color: var(--mo-hero-press) !important;
}
.ccgclientportal-content a:not(.btn):hover { color: var(--mo-ink) !important; }

/* ---------- Logged-in portal chrome (sidebar / tabs / tables) ---------- */
.ccgclientportal-content .nav-tabs,
.ccgclientportal-content .nav-pills { border-bottom-color: var(--mo-line); }
.ccgclientportal-content .nav-tabs > li > a,
.ccgclientportal-content .nav-pills > li > a,
.ccgclientportal-content .nav-link {
  color: var(--mo-steel) !important;
  font-weight: 500;
  border-radius: 10px 10px 0 0;
}
.ccgclientportal-content .nav-tabs > li.active > a,
.ccgclientportal-content .nav-pills > li.active > a,
.ccgclientportal-content .nav-link.active {
  color: var(--mo-ink) !important;
  background: var(--mo-paper) !important;
  border-color: var(--mo-line) var(--mo-line) transparent !important;
  box-shadow: inset 0 2px 0 var(--mo-kick);
}

.ccgclientportal-content table.dataTable,
.ccgclientportal-content table.table {
  background: var(--mo-paper);
  border: 1px solid var(--mo-line) !important;
  border-radius: 12px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
.ccgclientportal-content table.dataTable thead th,
.ccgclientportal-content table.table thead th {
  background: var(--mo-sand) !important;
  color: var(--mo-ink) !important;
  font-family: var(--mo-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mo-line) !important;
}
.ccgclientportal-content table.dataTable tbody td,
.ccgclientportal-content table.table tbody td {
  border-top: 1px solid var(--mo-line) !important;
  color: var(--mo-carbon);
}
.ccgclientportal-content table.dataTable tbody tr:hover td { background: var(--mo-soft) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mo-ink) !important;
  border-color: var(--mo-ink) !important;
  color: #fff !important;
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--mo-soft) !important;
  border-color: var(--mo-line) !important;
  color: var(--mo-ink) !important;
}

/* ---------- Logged-in portal shell (#zportals-wrapper, theme "portal_4") ---------- */
/* zportals paints one white slab behind sidebar + content; let the cream page
   show through and turn the two panes into cards instead. */
#zportals-wrapper #zportals.body-bg-bar { background: transparent !important; box-shadow: none !important; }
#zportals-wrapper .side-nav.zp-left-menu {
  border-radius: var(--mo-radius-md) 0 0 var(--mo-radius-md);
}
#zportals-wrapper .zp-main-content {
  background: var(--mo-paper) !important;
  border-radius: 0 var(--mo-radius-md) var(--mo-radius-md) 0;
  box-shadow: var(--mo-shadow-lg) !important;
}
#zportals-wrapper #portal-cotenier {
  background: transparent !important;
  box-shadow: none !important;
}
#zportals-wrapper .portal-title,
#zportals-wrapper .portal-title .headTitle {
  font-family: var(--mo-font-display);
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  color: var(--mo-ink) !important;
}
#zportals-wrapper .zp-org-logo .adminv2 {
  font-family: var(--mo-font-display);
  font-weight: 400 !important;
  font-size: 24px !important;
  color: var(--mo-ink) !important;
}
#zportals-wrapper .zp-chld-acc-title { color: var(--mo-steel) !important; }
#zportals-wrapper .p3_username { color: var(--mo-ink) !important; }
#zportals-wrapper .zp-dropdown .dropbtn .fa,
#zportals-wrapper .zp-dropdown .dropbtn i { color: var(--mo-steel) !important; }

/* Dashboard content blocks: authors' <font color> and links come out #2b9cf2 */
#zportals-wrapper .dh-header,
#zportals-wrapper .dh-header font {
  color: var(--mo-ink) !important;
  font-family: var(--mo-font-sans);
  font-weight: 600;
}
#zportals-wrapper font[color] { color: inherit !important; }
#zportals-wrapper #portal-cotenier a:not(.btn):not(.dropbtn):not(.paginate_button) {
  color: var(--mo-hero-press) !important;
}
#zportals-wrapper #portal-cotenier a:not(.btn):not(.dropbtn):not(.paginate_button):hover {
  color: var(--mo-ink) !important;
}
/* Inner panels: zportals stacks white .zp-content-section boxes and cool-grey
   (#f8f8fa) message boxes inside the content card. Let sections sit on the
   card's paper tone; message/empty-state boxes take the soft sand tint. */
#zportals-wrapper #portal-cotenier .zp-content-section,
#zportals-wrapper #portal-cotenier > div:not([class]) {
  background: transparent !important;
  box-shadow: none !important;
}
#zportals-wrapper .zp-page-description,
#zportals-wrapper #portal-cotenier table tbody tr:not(.record-row),
#zportals-wrapper #portal-cotenier table tbody td.dataTables_empty {
  background: var(--mo-soft) !important;
  color: var(--mo-carbon) !important;
  border-radius: 10px;
}
/* List headers: zportals paints white text on a #f5f6f8 row — unreadable */
#zportals-wrapper #portal-cotenier table thead tr { background: var(--mo-sand) !important; }
#zportals-wrapper #portal-cotenier table thead th {
  background: var(--mo-sand) !important;
  color: var(--mo-ink) !important;
  font-family: var(--mo-font-mono);
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#zportals-wrapper #portal-cotenier table thead th:first-child { border-radius: 10px 0 0 10px; }
#zportals-wrapper #portal-cotenier table thead th:last-child { border-radius: 0 10px 10px 0; }
#zportals-wrapper .zp-alert-danger {
  background: #F6E3DC !important;
  border: 1px solid #E8C3B6 !important;
  color: #7E2A1A !important;
  border-radius: 10px;
}

/* Account switcher (sidebar, under "Partner Portal") */
#zportals-wrapper .zp-chld-cur-acc {
  background: var(--mo-soft) !important;
  border-radius: 10px;
}
#zportals-wrapper .zp-chld-cur-acc .childDropdown { color: var(--mo-steel) !important; }
#zportals-wrapper .zp-chld-acc-section {
  background: var(--mo-paper) !important;
  border: 1px solid var(--mo-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--mo-shadow-md) !important;
  padding: 6px !important;
}
#zportals-wrapper .zp-chld-acc-list { margin: 0 !important; padding: 0 !important; }
#zportals-wrapper a.zp-chld-acc-link {
  color: var(--mo-ink) !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 7px 10px !important;
  font-size: 14px;
}
#zportals-wrapper a.zp-chld-acc-link:hover { background: var(--mo-soft) !important; }
#zportals-wrapper a.zp-chld-acc-link .fa,
#zportals-wrapper a.zp-chld-acc-link i { color: var(--mo-hero) !important; }

/* Dashboard grid columns each carry a 2px bottom border; with unequal column
   heights they render as staggered half-width lines. */
#zportals-wrapper .dashboard-element-row > [class*="zp-col-"] { border-bottom: 0 !important; }

/* Dashboard menu items render the icon as a block above the label */
#zportals-wrapper a.dashboard-menu {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
#zportals-wrapper .dashboard-menu .menuIcon,
#zportals-wrapper .dashboard-menu .zp-sb-menu-lable {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}
#zportals-wrapper .dashboard-menu .menuIcon { flex: 0 0 18px; text-align: center; }
#zportals-wrapper .dashboard-menu .zp-sb-menu-lable {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#zportals-wrapper .dashboard-menu .clr { display: none; }

/* CRM record lists: row view/edit icons are .btn links, rows tinted #f8f8fa */
#zportals-wrapper .zp-crm-record-view-btn,
#zportals-wrapper .zp-crm-record-edit-btn {
  background: transparent !important;
  color: var(--mo-steel) !important;
  box-shadow: none !important;
}
#zportals-wrapper .zp-crm-record-view-btn:hover,
#zportals-wrapper .zp-crm-record-edit-btn:hover { color: var(--mo-hero) !important; }
#zportals-wrapper tr.record-row { background: var(--mo-cream) !important; }
#zportals-wrapper tr.record-row:hover { background: var(--mo-soft) !important; }
#zportals-wrapper .section-header-title { color: var(--mo-ink) !important; }
#zportals-wrapper .listofitem {
  background: var(--mo-soft) !important;
  border-radius: 10px;
  color: var(--mo-hero-press) !important;
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--mo-cream);
  border: 1px solid var(--mo-line);
  border-radius: 10px;
  min-height: 46px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--mo-hero);
}

/* SweetAlert2 dialogs */
.swal2-popup { border-radius: var(--mo-radius-md) !important; font-family: var(--mo-font-sans) !important; }
.swal2-title { font-family: var(--mo-font-display) !important; font-weight: 400 !important; color: var(--mo-ink) !important; }
.swal2-styled.swal2-confirm { background: var(--mo-hero) !important; border-radius: var(--mo-radius-pill) !important; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .ccgclientportal-content.login .ccgportal-login {
    margin: 32px 0 !important;
    padding: 28px 16px 24px !important;
  }
}