@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Twinsity Helpcenter. Design tokens taken from twinsity.com. */

:root{
  --ts-state:#0398F4; --ts-brand:#015C94; --ts-navy:#00395C;
  --ts-ink:#181B20; --ts-head:#1F2329; --ts-body:#434850; --ts-muted:#565B64;
  --ts-offwhite:#F6F6F8; --ts-hairline:#E2E2E8;
}

body,
body *:not(i):not([class*="icon"]):not([class*="Icon"]),
input, textarea, button, select{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}
body{ background:#fff !important; color:var(--ts-body); -webkit-font-smoothing:antialiased; }

/* hero: white with a dot grid, as on twinsity.com */
.Header__headerBg{
  background-image:radial-gradient(rgba(24,27,32,.10) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
  background-color:#fff !important;
  opacity:1 !important; filter:none !important;
}
#headerContainer{ background:#fff !important; }

.Header__welcomeTitle{
  color:var(--ts-ink) !important; font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important;
}
.Header__titleDescription > *:not(.Header__welcomeTitle),
.Header__titleDescription > p{
  color:var(--ts-muted) !important; font-size:17px !important; font-weight:400 !important;
}
.Header__titleDescription .Header__welcomeTitle,
h2.Header__welcomeTitle{
  color:var(--ts-ink) !important; font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important; margin-bottom:14px !important;
}

/* brand lockup text, was white on the old photo hero */
.Header__logotxt, .Header__logotxt *{
  color:var(--ts-ink) !important; font-weight:600 !important; letter-spacing:-.015em !important;
}

/* top navigation on a light hero */
.Header__nav .Header__link, .Header__nav a{
  color:var(--ts-ink) !important; font-size:15px !important; font-weight:500 !important;
}
.Header__nav a:hover{ color:var(--ts-state) !important; }
#new_ticket_button{
  background:var(--ts-state) !important; color:#fff !important; border:none !important;
  border-radius:6px !important; font-weight:600 !important; font-size:14px !important; padding:9px 18px !important;
}
#new_ticket_button:hover{ background:var(--ts-brand) !important; }

/* search */
.SearchBox__searchTextbox, #searchContainer1{
  border-radius:10px !important; border:1px solid var(--ts-hairline) !important;
  box-shadow:0 8px 30px rgba(24,27,32,.08) !important; background:#fff !important;
}
#autoSearchContainer{ border-radius:10px !important; font-size:16px !important; }

/* category cards */
.WidgetsContainer__lftWd{
  border:1px solid var(--ts-hairline) !important; border-radius:12px !important;
  box-shadow:none !important; background:#fff !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.WidgetsContainer__lftWd:hover{
  border-color:var(--ts-state) !important;
  box-shadow:0 10px 30px rgba(24,27,32,.09) !important; transform:translateY(-2px) !important;
}
[data-id$="_title"], [data-id$="_title"] a{
  color:var(--ts-ink) !important; font-weight:600 !important; letter-spacing:-.01em !important;
}
[data-id$="_title"] a:hover{ color:var(--ts-state) !important; }
[data-id$="_description"]{ color:var(--ts-muted) !important; line-height:1.6 !important; }

/* article page */
[data-id="articleTitle"]{
  color:var(--ts-ink) !important; font-weight:700 !important;
  font-size:36px !important; line-height:1.18 !important; letter-spacing:-.03em !important;
}
[data-id="article_description"], [data-id="article_description"] p{
  color:var(--ts-body) !important; font-size:16.5px !important; line-height:1.75 !important;
}
[data-id="article_description"] p{ margin:0 0 15px !important; }
[data-id="article_description"] h2{
  color:var(--ts-head) !important; font-size:22px !important; font-weight:600 !important;
  letter-spacing:-.015em !important; margin:38px 0 12px !important;
}
[data-id="article_description"] h3{
  color:var(--ts-head) !important; font-size:17px !important; font-weight:600 !important; margin:26px 0 10px !important;
}
[data-id="article_description"] strong{ color:var(--ts-head) !important; font-weight:600 !important; }
[data-id="article_description"] em{ color:var(--ts-muted) !important; }
[data-id="article_description"] ul,[data-id="article_description"] ol{ margin:0 0 16px !important; padding-left:24px !important; }
[data-id="article_description"] li{ margin-bottom:7px !important; }
[data-id="article_description"] a{ color:var(--ts-state) !important; font-weight:500 !important; }

/* callouts and tables */
.ts-callout{ border-radius:10px !important; padding:16px 20px !important; margin:22px 0 !important; }
.ts-callout p:last-child{ margin-bottom:0 !important; }
.ts-tip{ background:#EBF7FE !important; border:1px solid #BFE3FB !important; border-left:4px solid var(--ts-state) !important; }
.ts-warn{ background:#FEEDEF !important; border:1px solid #FCCACF !important; border-left:4px solid #F64E60 !important; }
.ts-shot{ background:#FBFBFC !important; border:1px dashed var(--ts-hairline) !important; border-radius:10px !important; }

[data-id="article_description"] table{
  border-collapse:separate !important; border-spacing:0 !important; width:100% !important;
  margin:12px 0 24px !important; font-size:15.5px !important;
  border:1px solid var(--ts-hairline) !important; border-radius:10px !important; overflow:hidden !important;
}
[data-id="article_description"] table td{
  border:none !important; border-bottom:1px solid var(--ts-hairline) !important;
  padding:11px 15px !important; vertical-align:top !important; color:var(--ts-body) !important;
}
[data-id="article_description"] table tr:last-child td{ border-bottom:none !important; }
[data-id="article_description"] table tr:first-child td{
  background:var(--ts-offwhite) !important; color:var(--ts-head) !important;
}
.ts-callout table, .ts-callout table td{ border:none !important; }

[data-id="scroll_top"]{ background:var(--ts-state) !important; border-radius:8px !important; }

/* the welcome block is hidden by default once the photo hero goes; bring it back
   and centre it, matching the twinsity.com hero */
.Header__titleDescription{
  display:block !important;
  text-align:center !important;
  padding:66px 20px 0 !important;
}
.Header__welcomeTitle{ display:block !important; margin:0 auto 12px !important; }
#titleSearch, .Header__titleSearchWrapper{ padding-bottom:60px !important; }
.Header__titleSearchBox{ max-width:720px !important; margin:0 auto !important; }

/* centre the search in the hero */
.Header__titleSearchBox{ justify-content:center !important; }
.SearchCon__searchCon{ width:100% !important; max-width:640px !important; }
.SearchBox__searchpart, .SearchBox__searchTextbox{ border-radius:10px !important; }

/* the widget list should sit on the page, not inside a panel */
.WidgetsContainer__widgetCont, .AppContainer__wrapper{
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.WidgetsContainer__lftWd{ margin:0 20px 20px 0 !important; }

/* One highlighted keyword in the hero headline, as on twinsity.com.
   Zoho renders the title as a bare text node with no markup to hook, so the
   line is rebuilt from two pseudo elements. CSS can only split the line in
   two, which is why the question mark travels with "help".
   If the welcome title text is ever changed in Setup > Channels >
   Help Center > Customization, change it here too. */
.Header__titleDescription h2.Header__welcomeTitle,
h2.Header__welcomeTitle{
  font-size:0 !important; letter-spacing:0 !important;
}
h2.Header__welcomeTitle::before,
h2.Header__welcomeTitle::after{
  font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important;
}
h2.Header__welcomeTitle::before{ content:"How can we "; color:var(--ts-ink) !important; }
h2.Header__welcomeTitle::after{ content:"help?"; color:var(--ts-state) !important; }

/* The search box sits inside #searchBtnContainer, a flex row set to
   space-between. On the home page it happens to land centred; on the
   knowledge base, section and search pages it does not, and drifts left of
   the headline. Centre the row itself so every page agrees. */
#searchBtnContainer.Header__searchalt,
.Header__searchalt{ justify-content:center !important; }