/*
* Bibliopolis Theme Override — KB Article Callout Highlights
* help.bookrouter.com · Simplified single-colour version
* ?????????????????????????????????????????????????????????????
* Fixed: icon/text overlap by switching to grid layout and
* explicitly hiding the icon image from the text flow.
* ?????????????????????????????????????????????????????????????
*/
.KB_New_Editor_Highlights {
display: grid !important;
grid-template-columns: 28px 1fr !important;
gap: 12px !important;
align-items: start !important;
border-radius: 0 !important;
border-left: 4px solid #e8621a !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
background-color: #fff3ec !important;
padding: 14px 18px !important;
margin: 1.25rem 0 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: .95rem !important;
line-height: 1.7 !important;
color: #1a2e5a !important;
}
/* First child div holds the icon — fixed width column */
.KB_New_Editor_Highlights > div:first-child {
grid-column: 1 !important;
width: 28px !important;
padding-top: 3px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
/* Second child div (and any further divs) hold the text */
.KB_New_Editor_Highlights > div:not(:first-child) {
grid-column: 2 !important;
}
/* Icon image — constrain strictly */
.KB_New_Editor_Highlights img[data-image="contentStyle"] {
display: block !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
flex-shrink: 0 !important;
opacity: .85 !important;
}
/* Bold labels */
.KB_New_Editor_Highlights b,
.KB_New_Editor_Highlights strong {
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Links */
.KB_New_Editor_Highlights a {
color: #2b4d9b !important;
text-decoration: underline !important;
}
.KB_New_Editor_Highlights a:hover {
color: #e8621a !important;
}
/*
* Bibliopolis Theme Override for help.bookrouter.com
* ????????????????????????????????????????????????????
* Paste into: Zoho Desk ? Setup ? Help Center ?
* Customize Portal ? Custom CSS
*
* This file only overrides the variables and classes
* already present in help_bookrouter.css — no guessing.
* ????????????????????????????????????????????????????
*/
/* ??????????????????????????????????????????????????
1. FONTS
Loads DM Sans + Playfair Display from Google Fonts.
Add this @import as the very first line if pasting
into Zoho's Custom CSS editor, OR add a tag
to the portal's template instead:
?????????????????????????????????????????????????? */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Playfair+Display:wght@400..900&display=swap');
/* ??????????????????????????????????????????????????
2. REPLACE BOOKROUTER COLOR + FONT TOKENS
Overrides the :root variables in help_bookrouter.css
so every class that references them updates at once.
?????????????????????????????????????????????????? */
:root {
/* Brand / accent — replaces orange #e46317 with Bibliopolis orange */
--color-brand: #e8621a;
--color-linkHover: #e8621a;
--color-breadCrumbTextHover:#e8621a;
--color-buttonPrimaryBg: #0f1e3d; /* navy — primary buttons go dark */
--color-buttonPrimaryText: #eef3fb;
/* Links — replaces black #000 with Bibliopolis cobalt */
--color-link: #2b4d9b;
--color-breadCrumbText: #1a2e5a;
/* Breadcrumb background */
--color-breadCrumbBg: #c0d0e8;
/* Footer background — replaces dark grey with navy */
--color-greyShade80: #0f1e3d;
/* Page / body background */
--color-white: #eef3fb; /* cream instead of pure white */
--color-greyTint90: #eef3fb;
--color-greyTint85: #dce8f7;
--color-greyTint100: #f5f8fd;
--color-greyTint105: #dce8f7;
/* Borders */
--color-border: #c0d0e8;
--color-border1: #c0d0e8;
--color-border2: #c0d0e8;
--color-border3: #c0d0e8;
--color-border5: #c0d0e8;
/* Muted text */
--color-greyShade20: #5a6e8a;
--color-greyShade11: #5a6e8a;
--color-raven: #5a6e8a;
--color-textGreyShade35: #5a6e8a;
--color-grey: #5a6e8a;
--color-heather: #c0d0e8;
}
/* ??????????????????????????????????????????????????
3. BASE FONT — portal root element
?????????????????????????????????????????????????? */
#portal_html,
portal,
.html {
font-family: 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.01px;
}
/* Body background */
.body,
.Layout__oneColumn,
.Layout__twoColumn,
.Layout__twoColumn2,
.Layout__twoColumnReverse {
background-color: #eef3fb !important;
}
h1, h2, h3 {
font-weight: 500;
}
/* ??????????????????????????????????????????????????
4. HEADER / HERO BANNER (Header__ classes)
?????????????????????????????????????????????????? */
/* Hero area — replace the photo bg with Bibliopolis navy gradient */
.Header__header {
background-image:
linear-gradient(to bottom, rgba(15,30,61,0.88) 0%, rgba(43,77,155,0.75) 100%) !important;
background-color: #0f1e3d !important;
background-size: cover !important;
}
/* Big "How can we help?" title */
.Header__searchTitle {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2rem, 4vw, 2.8rem) !important;
color: #ffffff !important;
letter-spacing: 0 !important;
text-shadow: none !important;
}
/* Sub-description line under title */
.Header__description {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
color: rgba(255,255,255,0.65) !important;
}
/* Portal name in header */
.Header__name {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #ffffff !important;
}
/* Fixed-scroll navbar turns white (matching Bibliopolis nav) */
.Header__homeContent.Header__homeNavbarFixed .Header__navbar,
.Header__homeNavbarFixed .Header__navbar {
background-color: #1a2e5a !important;
border-bottom: 5px solid #2b4d9b !important;
}
/* Nav tab links */
.Header__tabsTab {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.85) !important;
}
/* Active / hover nav tab */
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab.Header__active,
.Header__tabsTab.Header__active,
.Header__tabsTab:hover {
color: #e8621a !important;
}
/* Active underline stripe */
.Header__tabsTab.Header__active:after,
.Header__tabsTab:hover:after {
border-bottom-color: #e8621a !important;
}
/* Fixed-nav tab text goes ink-dark */
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab {
color: #5a6e8a !important;
}
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab:hover,
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab.Header__active {
color: #e8621a !important;
}
/* Mobile hamburger lines on fixed nav */
.Header__homeNavbarFixed .Header__menu,
.Header__homeNavbarFixed .Header__menu:after,
.Header__homeNavbarFixed .Header__menu:before {
background-color: #e8621a !important;
}
/* Sign in / sign up links on fixed nav */
.globalfixednav .globalSignin,
.globalfixednav .globalSignup {
color: #1a2e5a !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
}
/* Search button inside header */
.Button__search {
background-color: #0f1e3d !important;
border-radius: 0 3px 3px 0 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
transition: background 0.25s !important;
}
.Button__search:hover {
background-color: #e8621a !important;
}
/* ??????????????????????????????????????????????????
5. BREADCRUMBS (BreadCrumbs__ classes)
?????????????????????????????????????????????????? */
.BreadCrumbs__breadCrumbsLink,
.BreadCrumbs__breadCrumbsLastLink
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #5a6e8a !important;
text-decoration: none !important;
}
.BreadCrumbs__breadCrumbsLink:hover {
color: #e8621a !important;
}
/* Breadcrumb area background */
.commonStyle__zt3breadCrumbBg,
.AppContainer__breadCrumbsBox {
background: #eef3fb !important;
}
/* ??????????????????????????????????????????????????
6. PAGE HEADINGS & BODY TEXT
?????????????????????????????????????????????????? */
/* Article / topic main heading */
.commonStyle__detailHeader {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
line-height: 1.3 !important;
}
/* Mid-level headings */
.commonStyle__headerMid {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Widget / sidebar section headings */
.commonStyle__widgetHeading {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
font-size: 0.72rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #5a6e8a !important;
border-bottom-color: #c0d0e8 !important;
}
/* Section / department list titles */
.DepartmentList__title,
.Departmentcontainer__title,
.LayoutListContainer__title,
.LayoutListContainer__departmentTitle {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Description / body text */
.DepartmentList__description,
.LayoutListContainer__description {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
color: #5a6e8a !important;
line-height: 1.7 !important;
}
/* Generic themeLink (used heavily throughout) */
.commonStyle__zt3Link,
.themeLink {
color: #2b4d9b !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.commonStyle__zt3Link:hover,
.themeLink:hover {
color: #e8621a !important;
}
/* ??????????????????????????????????????????????????
7. DEPARTMENT / CATEGORY CARDS (DepartmentList__)
?????????????????????????????????????????????????? */
.DepartmentList__deptListItem {
border-color: #c0d0e8 !important;
box-shadow: none !important;
border-radius: 0 !important;
background: #ffffff !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
.DepartmentList__deptListItem:hover {
border-color: #2b4d9b !important;
box-shadow: 0 4px 20px rgba(26,46,90,0.08) !important;
}
.DepartmentList__departmentContent {
border-top-color: #c0d0e8 !important;
}
/* Article count label inside cards */
.DepartmentList__formCount {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #5a6e8a !important;
}
/* ??????????????????????????????????????????????????
8. BUTTONS (Button__ classes)
?????????????????????????????????????????????????? */
/* Primary button — navy, turns orange on hover */
.Button__primary,
.commonStyle__zt3buttonPrimaryBg {
background-color: #0f1e3d !important;
border-color: transparent !important;
border-radius: 0 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
transition: background 0.25s, transform 0.2s !important;
}
.Button__primary:hover {
background-color: #e8621a !important;
transform: translateY(-2px) !important;
}
/* Default / secondary button */
.Button__default,
.Button__secondary {
font-family: 'DM Sans', system-ui, sans-serif !important;
border-color: #c0d0e8 !important;
color: #1a2e5a !important;
border-radius: 0 !important;
}
.Button__default:hover,
.Button__secondary:hover {
border-color: #e8621a !important;
color: #e8621a !important;
}
/* Footer rounded button */
.Button__footerBtn {
border-radius: 2rem !important;
background: #5a6e8a !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.Button__footerBtn:hover {
background: #e8621a !important;
}
/* ??????????????????????????????????????????????????
9. READING PROGRESS BAR
?????????????????????????????????????????????????? */
.Readingprogress__progressBar {
background: linear-gradient(90deg, #e8621a 0%, #f0a030 100%) !important;
}
/* ??????????????????????????????????????????????????
10. FOOTER (Footer__ classes)
?????????????????????????????????????????????????? */
.Footer__footerBg {
background-color: #2b4d9b !important;
}
.Footer__footerContent {
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.Footer__footerQus {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #ffffff !important;
}
.Footer__footerDescription {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
color: rgba(255,255,255,0.6) !important;
}
.Footer__footerInfo {
color: rgba(255,255,255,0.5) !important;
font-size: 0.72rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
.Footer__footerLink {
color: rgba(255,255,255,0.5) !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.Footer__footerLink:hover {
color: #e8621a !important;
}
.Footer__footerCopyrigt {
color: rgba(255,255,255,0.4) !important;
font-size: 0.78rem !important;
border-top-color: rgba(255,255,255,0.08) !important;
}
/* ??????????????????????????????????????????????????
11. FORM INPUTS
?????????????????????????????????????????????????? */
.Input__formInput,
.Input__searchBox,
.Input__productInput,
.Input__countryInput,
.TextArea__textarea {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
border-color: #c0d0e8 !important;
border-radius: 0 !important;
color: #1a2e5a !important;
background: #ffffff !important;
}
.Input__formInput:focus,
.Input__searchBox:focus,
.TextArea__textarea:focus {
border-color: #2b4d9b !important;
box-shadow: 0 0 0 3px rgba(43,77,155,0.12) !important;
outline: none !important;
}
/* ??????????????????????????????????????????????????
12. LAYOUT CONTENT AREAS
?????????????????????????????????????????????????? */
.Layout__oneColumn,
.Layout__twoColumn,
.Layout__twoColumn2,
.Layout__twoColumnReverse {
background-color: #eef3fb !important;
}
/* Home page category section spacing */
.AppContainer__homePage {
background-color: #eef3fb !important;
}
/*
* Bibliopolis Theme Override — Articles & Internal Pages
* help.bookrouter.com · help_articles.css layer
* ?????????????????????????????????????????????????????
* Paste into: Zoho Desk ? Setup ? Help Center ?
* Customize Portal ? Custom CSS
* (after the first bookrouter-bibliopolis-theme.css block)
*
* Every selector maps directly to a class in help_articles.css.
* ?????????????????????????????????????????????????????
*/
/* ??????????????????????????????????????????????????
1. ARTICLE DETAIL — main title & content
KbDetailLtContainer__ classes
?????????????????????????????????????????????????? */
/* Article title heading */
.KbDetailLtContainer__articleTitle {
font-family: 'Playfair Display', Georgia, serif !important;
}
/* Article body paragraph text */
.KbDetailLtContainer__articleContent p.KbDetailLtContainer__description {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
line-height: 1.8 !important;
color: #1a2e5a !important;
}
/* Links inside article body — cobalt, orange on hover */
.KbDetailLtContainer__articleContent a {
color: #2b4d9b !important;
text-decoration: underline !important;
transition: color .2s !important;
}
.KbDetailLtContainer__articleContent a:hover {
color: #e8621a !important;
}
/* Bottom divider row (vote / share bar) */
.KbDetailLtContainer__column {
border-bottom-color: #c0d0e8 !important;
}
/* "Was this helpful?" review box */
.KbDetailLtContainer__review {
background-color: #eef3fb !important;
border-color: #c0d0e8 !important;
border-radius: 0 !important;
}
/* Last-updated timestamp */
.KbDetailLtContainer__updateTime {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: .78rem !important;
color: #5a6e8a !important;
}
/* Attachment heading */
.Attachment__attachmentHeading {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Attachment file name */
.Attachment__attachName {
color: #1a2e5a !important;
}
/* Attachment file size */
.Attachment__attachSize {
color: #5a6e8a !important;
}
/* Attachment image preview border */
.Attachment__imgviewerContent {
border-color: #c0d0e8 !important;
border-radius: 0 !important;
}
/* ??????????????????????????????????????????????????
2. TABLE OF CONTENTS (TOCContainer__)
?????????????????????????????????????????????????? */
/* TOC container border */
.TOCContainer__tocContainer {
border-color: #c0d0e8 !important;
border-style: solid !important; /* replaces dashed */
border-left: 3px solid #e8621a !important;
border-right: none !important;
}
/* TOC heading */
.TOCContainer__tocHeading {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* ??????????????????????????????????????????????????
3. KB CATEGORY CARDS on article pages (KbCategory__)
?????????????????????????????????????????????????? */
.KbCategory__box {
border-color: #c0d0e8 !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: border-color .2s, box-shadow .2s !important;
}
.KbCategory__box:hover {
border-color: #2b4d9b !important;
box-shadow: 0 4px 20px rgba(26,46,90,0.08) !important;
}
/* Category name link */
.KbCategory__topic a {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
text-decoration: none !important;
}
.KbCategory__topic .KbCategory__deptText {
color: #1a2e5a !important;
}
.KbCategory__topic .KbCategory__deptText:hover {
color: #e8621a !important;
}
/* Category article count / description */
.KbCategory__topicContent {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
color: #5a6e8a !important;
}
/* Follow / count pill */
.KbCategory__followCount {
background: #dce8f7 !important;
border-radius: 0 !important;
color: #5a6e8a !important;
}
.KbCategory__followCount:hover {
background: #e8621a !important;
color: #fff !important;
}
/* Follow text label */
.KbCategory__followTxt {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 400 !important;
color: #1a2e5a !important;
}
/* Private/locked dept badge */
.KbCategory__priveteDept {
background-color: #dce8f7 !important;
border-color: #c0d0e8 !important;
border-radius: 0 !important;
color: #5a6e8a !important;
}
/* Popup list hover (follow dropdown) */
.KbCategory__popupList:hover {
background: #eef3fb !important;
color: #e8621a !important;
}
.KbCategory__popupList:hover svg {
color: #e8621a !important;
}
/* ??????????????????????????????????????????????????
4. LIST HEADERS — section headings (ListHeader__)
?????????????????????????????????????????????????? */
/* Header style 1 — main section title */
.ListHeader__header1 {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
letter-spacing: 0 !important;
}
/* Header style 2 — sub-section title */
.ListHeader__header2 {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Header style 3 — small label */
.ListHeader__header3 {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Header style 4 */
.ListHeader__header4 {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Description text under section headers */
.ListHeader__description {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
color: #5a6e8a !important;
line-height: 1.7 !important;
}
/* Divider lines below headers */
.ListHeader__listHeader1,
.ListHeader__headerType1 {
border-bottom-color: #c0d0e8 !important;
}
.ListHeader__listHeader3 {
border-bottom-color: #c0d0e8 !important;
}
/* Follow count pill (list header variant) */
.ListHeader__followCount {
background: #dce8f7 !important;
border-radius: 0 !important;
color: #5a6e8a !important;
}
.ListHeader__followCount:hover {
background: #e8621a !important;
color: #fff !important;
}
/* Follow popup hover */
.ListHeader__popupList:hover {
background: #eef3fb !important;
color: #e8621a !important;
}
.ListHeader__popupList:hover svg {
color: #e8621a !important;
}
/* ??????????????????????????????????????????????????
5. CONTENT LIST — article links in sidebar/related
(ContentList__ classes)
?????????????????????????????????????????????????? */
.ContentList__activeLink,
.ContentList__listLink {
font-family: 'DM Sans', system-ui, sans-serif !important;
color: #2b4d9b !important;
text-decoration: none !important;
transition: color .2s !important;
}
.ContentList__activeLink:hover,
.ContentList__listLink:hover {
color: #e8621a !important;
}
/* ??????????????????????????????????????????????????
6. KB SUB-CATEGORY content section
(KbSubCategoryContainer__)
?????????????????????????????????????????????????? */
.KbSubCategoryContainer__contentSec {
background-color: #eef3fb !important;
color: #1a2e5a !important;
}
/* ??????????????????????????????????????????????????
7. COMMENTS (ArticleCommentsContainer__,
ThreadedComment__)
?????????????????????????????????????????????????? */
/* "Show more comments" link */
.ArticleCommentsContainer__showmore {
color: #2b4d9b !important;
border-bottom-color: #c0d0e8 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
}
/* Comment divider */
.ArticleCommentsContainer__rplyBdr {
border-bottom-color: #c0d0e8 !important;
}
/* Comment body text */
.ThreadedComment__articleContent p {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
line-height: 1.75 !important;
color: #1a2e5a !important;
}
/* Links inside comment body */
.ThreadedComment__commentContent a {
color: #2b4d9b !important;
}
.ThreadedComment__commentContent a:hover {
color: #e8621a !important;
}
/* Comment author name */
.ThreadedComment__userName {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* "Edited" tag */
.ThreadedComment__edited {
color: #e8621a !important;
}
/* Card mode comment header */
.ThreadedComment__cardModeHeader {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Comment timestamp */
.ThreadedComment__userLastPost {
color: #5a6e8a !important;
}
/* Comment post dividers */
.ThreadedComment__popUpList + .ThreadedComment__popUpList {
border-top-color: #c0d0e8 !important;
}
/* ??????????????????????????????????????????????????
8. COMMENT FORM (CommentForm__)
?????????????????????????????????????????????????? */
/* Draft toolbar background */
.CommentForm__difTitle {
background-color: #eef3fb !important;
border-color: #c0d0e8 !important;
}
/* Title/reply bar */
.CommentForm__title,
.CommentForm__titleBlock {
background-color: #eef3fb !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
/* Notify me / notify follow labels */
.CommentForm__notifyPl15 {
color: #5a6e8a !important;
}
/* ??????????????????????????????????????????????????
9. TEXTAREA (TextArea__)
?????????????????????????????????????????????????? */
.TextArea__textarea {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 300 !important;
border-color: #c0d0e8 !important;
border-radius: 0 !important;
color: #1a2e5a !important;
background: #fff !important;
}
.TextArea__textarea:focus {
border-color: #2b4d9b !important;
box-shadow: 0 0 0 3px rgba(43,77,155,0.12) !important;
outline: none !important;
}
/* ??????????????????????????????????????????????????
10. FORM ELEMENTS (FormElement__)
?????????????????????????????????????????????????? */
/* Field labels */
.FormElement__labelStyle {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
/* Vertical label variant */
.FormElement__formLabelvertical2 {
font-family: 'DM Sans', system-ui, sans-serif !important;
color: #5a6e8a !important;
}
/* Mandatory asterisk */
.FormElement__mandatoryStar .FormElement__required:after {
color: #e8621a !important;
}
/* Helper / description text */
.FormElement__description,
.FormElement__msgInfo,
.FormElement__fieldFormat {
color: #5a6e8a !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
/* Inline label */
.FormElement__inline .FormElement__formLabelvertical {
color: #1a2e5a !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
/* ??????????????????????????????????????????????????
11. CHECKBOX (CheckBox__)
?????????????????????????????????????????????????? */
/* Checked state — uses orange instead of dark orange */
.CheckBox__inputCheckbox:checked + .CheckBox__checkbox {
background-color: #e8621a !important;
border-color: #e8621a !important;
}
.CheckBox__checkbox {
border-color: #c0d0e8 !important;
border-radius: 0 !important;
}
.CheckBox__labelRemember > label {
font-family: 'DM Sans', system-ui, sans-serif !important;
color: #1a2e5a !important;
}
/* ??????????????????????????????????????????????????
12. PAGINATION (Pagination__)
?????????????????????????????????????????????????? */
/* Arrow background boxes */
.Pagination__arrowBox {
background: #dce8f7 !important;
color: #5a6e8a !important;
border-radius: 0 !important;
}
/* Page number buttons */
.Pagination__nrmalTab {
color: #5a6e8a !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.Pagination__nrmalTab:hover,
.Pagination__pgNvLtHv:hover,
.Pagination__pgNvRtHv:hover {
color: #e8621a !important;
}
/* Active page — navy */
.Pagination__active {
color: #0f1e3d !important;
font-weight: 500 !important;
}
.Pagination__pageNavLft,
.Pagination__pageNavRight {
color: #1a2e5a !important;
}
/* ??????????????????????????????????????????????????
13. TAGS (Tag__)
?????????????????????????????????????????????????? */
.Tag__tag {
background: #dce8f7 !important;
border-radius: 0 !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: .72rem !important;
font-weight: 500 !important;
letter-spacing: .06em !important;
color: #1a2e5a !important;
}
.Tag__tag:hover {
background: #c0d0e8 !important;
}
/* ??????????????????????????????????????????????????
14. DOTTED / MORE OPTIONS POPUP (DottedMenuPopup__)
?????????????????????????????????????????????????? */
.DottedMenuPopup__content {
border-radius: 0 !important;
border-color: #c0d0e8 !important;
box-shadow: 0 4px 20px rgba(26,46,90,0.08) !important;
background: #fff !important;
}
/* ??????????????????????????????????????????????????
15. EMPTY / NO CONTENT (NoContent__)
?????????????????????????????????????????????????? */
.NoContent__title {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
}
.NoContent__contentDescription {
font-family: 'DM Sans', system-ui, sans-serif !important;
color: #5a6e8a !important;
}
/* ??????????????????????????????????????????????????
16. RIGHT SIDEBAR (ArticleListRightContainer__,
KbDetailRtContainer__)
?????????????????????????????????????????????????? */
/* Sidebar section heading */
.ArticleListRightContainer__deskHeading {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 500 !important;
color: #1a2e5a !important;
line-height: 1.3 !important;
}
/* Subscriber / follower count text */
.ArticleListRightContainer__subscribeDescription,
.ArticleListRightContainer__followerCount,
.KbDetailRtContainer__subscribeDescription,
.KbDetailRtContainer__followerCount {
font-family: 'DM Sans', system-ui, sans-serif !important;
color: #5a6e8a !important;
}
/* ??????????????????????????????????????????????????
17. VIEW MORE LINK (ViewMore__)
?????????????????????????????????????????????????? */
.ViewMore__viewmore a {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: .82rem !important;
font-weight: 500 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #2b4d9b !important;
text-decoration: none !important;
transition: color .2s !important;
}
.ViewMore__viewmore a:hover {
color: #e8621a !important;
}
/*
* Bibliopolis Theme Override for help.bookrouter.com
* ????????????????????????????????????????????????????
Footer css and footer html straight from bibdev (edited)
* ????????????????????????????????????????????????????
*/
.footer {
background-color: #0f1e3d !important;
color: rgba(255,255,255,0.55)
}
.footer-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
padding: 80px 48px 60px
}
.footer-logo {
margin-bottom: 20px
}
.footer-logo img {
height: 32px;
width: auto;
display: block
}
.footer-logo-text {
color: #ffffff;
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 600
}
.footer-tagline {
font-size: .85rem;
line-height: 1.7;
color: rgba(255,255,255,0.6);
max-width: 280px
}
.footer-col-title {
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 20px
}
.footer-links {
list-style: none;
padding-left: 0
}
.footer-links li+li {
margin-top: 12px
}
.footer-links a {
font-size: .88rem;
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color .2s
}
.footer-links a:hover {
color: var(--orange)
}
.footer-bottom {
max-width: 1400px;
margin: 0 auto;
padding: 24px 48px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: .78rem;
color: rgba(255,255,255,0.55)
}
.footer-bottom a {
color: rgba(255,255,255,0.65);
text-decoration: none
}
.footer-bottom a:hover {
color: var(--orange)
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns:1fr 1fr;
gap: 40px;
padding: 60px 40px 40px
}
}
@media (max-width: 640px) {
.footer-grid {
grid-template-columns:1fr;
gap: 32px;
padding: 48px 24px 32px
}
.footer-bottom {
padding: 20px 24px;
flex-direction: column;
align-items: flex-start
}
}
/*
* Bibliopolis Theme Override for help.bookrouter.com
* ????????????????????????????????????????????????????
Additional changes based on review
* ????????????????????????????????????????????????????
*/
.articleDetail .KBArticleRightContainer__userFollowOption,
.articleList .KBArticleRightContainer__userFollowOption,
.article_subcategory .KBArticleRightContainer__userFollowOption,
.articleDetail .KBArticleRightContainer__followerCount,
.article_subcategory .KBArticleRightContainer__followerCount,
.articleList .KBArticleRightContainer__followerCount,
.ContentList__subCategory .ListHeader__dottedPopup,
.KbCategory__box .KbCategory__dottedPopup,
.KbDetailRtContainer__widgetRight .KbDetailRtContainer__widgetSection:nth-child(1),
.articleList .ArticleListRightContainer__widgetRight .ArticleListRightContainer__widgetSection:nth-child(1) .ArticleListRightContainer__followOption,
.articleList .ArticleListRightContainer__widgetRight .ArticleListRightContainer__widgetSection:nth-child(1) .ArticleListRightContainer__subscribeDescription,
.ArticleListRightContainer__categoryDescription {
display:none
}
#articleReview {
display: none;
}
.AppContainer__breadCrumbsBox {
text-transform: uppercase;
}
.Avatar__xmedium {
border-radius: 2%;
height: 5.0rem;
width: 5.0rem;
}
.Avatar__square {
opacity: 0.5;
}
.Header__logo img {
display: block;
max-height: 3rem;
max-width: 11.5rem;
min-height: auto;
}
.commonStyle__zt3breadCrumbBg, .AppContainer__breadCrumbsBox {
background: #c0d0e8 !important;
color: #e8621a !important;
}
.BreadCrumbs__breadcrumbsView ul li:last-child {
color: #e8621a;
}
.btn {
border: 0.5px solid rgb(228, 99, 23);
padding: 10px 20px;
color: rgb(228, 99, 23);
border-radius: 15px;
}
.btn-welcome {
background-color: rgb(228, 99, 23);
color: white;
}