/* ==================================================
ViaScreens Help Center
Full Optimised Custom CSS (corrected build)
Branded Header / Floating Header / Search Support
--------------------------------------------------
Corrected:
- Breadcrumbs now show on category, section AND article
pages, at all breakpoints (home, tablet, mobile).
- Page-type class "article_subcategory" added (Zoho uses
this for category/section listing pages, not articleList).
- Breadcrumb class casing fixed (BreadCrumbs__breadcrumbList).
- "Help Center" -> "Support" via data-id, single source.
- Removed dead/duplicate desktop + tablet breadcrumb blocks.
================================================== */
/* Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
--viascreens-navy: #071b3d;
--viascreens-blue: #1593e6;
--viascreens-blue-hover: #0879c8;
--viascreens-bg: #f5f7fb;
--viascreens-border: #e5eaf3;
--viascreens-text: #111827;
--viascreens-muted: #475569;
--viascreens-gradient: linear-gradient(
90deg,
#7b2cff 0%,
#4f46e5 30%,
#1593e6 65%,
#00c2ff 100%
);
--vs-header-logo-col: 260px;
--vs-header-gap: 32px;
--vs-search-shorten: 16px;
}
/* ==================================================
Global
================================================== */
html, body, input, textarea, button, select, a, span, div, p,
li, ul, ol, label, table, thead, tbody, tr, td, th,
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}
html, body {
background-color: var(--viascreens-bg) !important;
color: var(--viascreens-text) !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* Prevent horizontal overflow */
portal,
portal.portalContainer,
#container,
#headerContainer,
#titleSearch,
.Header__titleSearchWrapper,
.Header__header,
.Header__defaultContent {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* ==================================================
Header Base
================================================== */
.Header__headerBg,
.Header__bgColor,
.Header__menuWrapper,
.Header__titleSearchWrapper,
.Header__header,
.Header__defaultContent,
#headerContainer,
#titleSearch {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
border-bottom: none !important;
}
/* Keep header above content when Zoho makes it floating */
#headerContainer,
.Header__header,
.Header__defaultContent,
.Header__homeNavbarFixed,
#headerContainer.Header__homeNavbarFixed,
.Header__header.Header__defaultContent.Header__homeNavbarFixed {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
z-index: 999999 !important;
}
/* Hide default welcome/title description */
.Header__titleDescription,
.Header__welcomeTitle,
.Header__welcomeDescription {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Remove unused Zoho background layer */
div#headerContainer.Header__header.Header__defaultContent .Header__headerBg,
div#headerContainer.Header__header.Header__defaultContent .Header__bgColor {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* ==================================================
Desktop / Tablet Header Layout (>= 769px)
Logo Left / Search Right / Breadcrumbs below search
================================================== */
@media only screen and (min-width: 769px) {
div#headerContainer.Header__header.Header__defaultContent {
display: grid !important;
grid-template-columns: var(--vs-header-logo-col) minmax(0, 1fr) !important;
grid-template-areas: "logo search" !important;
column-gap: var(--vs-header-gap) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 18px !important;
padding-bottom: 20px !important;
padding-left: max(24px, calc((100vw - 1150px) / 2)) !important;
padding-right: max(24px, calc((100vw - 1150px) / 2)) !important;
box-sizing: border-box !important;
background: #ffffff !important;
background-color: #ffffff !important;
overflow: visible !important;
position: relative !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10) !important;
}
/* Gradient line at bottom of header */
div#headerContainer.Header__header.Header__defaultContent::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 2px !important;
background: var(--viascreens-gradient) !important;
border: none !important;
box-shadow: none !important;
z-index: 999999 !important;
}
/* Logo column */
div#headerContainer.Header__header.Header__defaultContent .Header__menuWrapper {
grid-area: logo !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: var(--vs-header-logo-col) !important;
max-width: var(--vs-header-logo-col) !important;
height: 52px !important;
min-height: 52px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__menuBox,
div#headerContainer.Header__header.Header__defaultContent .Header__logoPart,
div#headerContainer.Header__header.Header__defaultContent .Header__logoimg {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
max-width: var(--vs-header-logo-col) !important;
height: 52px !important;
min-height: 52px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__logo {
display: block !important;
width: auto !important;
height: auto !important;
max-height: 42px !important;
max-width: 245px !important;
object-fit: contain !important;
}
/* Search column */
div#headerContainer.Header__header.Header__defaultContent .Header__titleSearchWrapper,
div#headerContainer.Header__header.Header__defaultContent #titleSearch {
grid-area: search !important;
display: block !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
}
/* Remove duplicate inner gradient line */
div#headerContainer.Header__header.Header__defaultContent #titleSearch::after,
.Header__titleSearchWrapper::after {
display: none !important;
content: none !important;
}
/* Search wrapper is slightly shortened on the right */
div#headerContainer.Header__header.Header__defaultContent .Header__titleSearchBox {
display: block !important;
width: calc(100% - var(--vs-search-shorten)) !important;
max-width: none !important;
padding: 0 !important;
margin: 0 var(--vs-search-shorten) 0 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__banneralt,
div#headerContainer.Header__header.Header__defaultContent #bannerContainer,
div#headerContainer.Header__header.Header__defaultContent .Header__searchSubCont,
div#headerContainer.Header__header.Header__defaultContent .Header__searchalt,
div#headerContainer.Header__header.Header__defaultContent #searchBtnContainer,
div#headerContainer.Header__header.Header__defaultContent .Header__searchLink,
div#headerContainer.Header__header.Header__defaultContent #searchContainer {
display: block !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Visible search box. Zoho omits .Header__searchBox on some page types
(e.g. the home page), so the border/shadow is applied to
.SearchBox__searchTextbox, which is present on every page. */
div#headerContainer.Header__header.Header__defaultContent .Header__searchBox,
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchTextbox {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid var(--viascreens-border) !important;
border-radius: 0 !important;
box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12) !important;
box-sizing: border-box !important;
position: relative !important;
overflow: visible !important;
}
/* Pass-through wrappers — no box of their own */
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchpart,
div#headerContainer.Header__header.Header__defaultContent #searchContainer1 {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 52px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
position: relative !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchTextbox input,
div#headerContainer.Header__header.Header__defaultContent #autoSearchContainer,
div#headerContainer.Header__header.Header__defaultContent input[data-id="searchInputs"] {
width: 100% !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding-left: 40px !important;
padding-right: 18px !important;
font-size: 17px !important;
color: var(--viascreens-navy) !important;
box-sizing: border-box !important;
}
/* Breadcrumbs: pull left to align with logo / page edge.
(Breadcrumb lives inside the search column, so we offset it.) */
portal.portalContainer.articleList div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer,
portal.portalContainer.articleDetail div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer,
portal.portalContainer.article_subcategory div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer {
width: calc(100% + var(--vs-header-logo-col) + var(--vs-header-gap)) !important;
max-width: none !important;
margin-top: 16px !important;
margin-left: calc(-1 * (var(--vs-header-logo-col) + var(--vs-header-gap))) !important;
margin-right: 0 !important;
position: relative !important;
z-index: 30 !important;
overflow: visible !important;
}
}
/* ==================================================
Mobile Header Layout (<= 768px)
Logo Top / Search Below / Gradient Bottom Line
================================================== */
@media only screen and (max-width: 768px) {
div#headerContainer.Header__header.Header__defaultContent {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"logo"
"search" !important;
row-gap: 6px !important;
padding: 8px 14px 16px !important;
background: #ffffff !important;
background-color: #ffffff !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
overflow: visible !important;
position: relative !important;
}
div#headerContainer.Header__header.Header__defaultContent::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 2px !important;
background: var(--viascreens-gradient) !important;
border: none !important;
box-shadow: none !important;
z-index: 999999 !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__menuWrapper {
grid-area: logo !important;
width: 100% !important;
max-width: none !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__menuBox {
width: 100% !important;
max-width: none !important;
height: 42px !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__logoPart,
div#headerContainer.Header__header.Header__defaultContent .Header__logoimg {
height: 42px !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__logo {
max-height: 34px !important;
max-width: 230px !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__titleSearchWrapper,
div#headerContainer.Header__header.Header__defaultContent #titleSearch {
grid-area: search !important;
display: block !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
overflow: visible !important;
position: relative !important;
}
div#headerContainer.Header__header.Header__defaultContent #titleSearch::after {
display: none !important;
content: none !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__titleSearchBox,
div#headerContainer.Header__header.Header__defaultContent .Header__banneralt,
div#headerContainer.Header__header.Header__defaultContent #bannerContainer,
div#headerContainer.Header__header.Header__defaultContent .Header__searchSubCont,
div#headerContainer.Header__header.Header__defaultContent .Header__searchalt,
div#headerContainer.Header__header.Header__defaultContent #searchBtnContainer,
div#headerContainer.Header__header.Header__defaultContent .Header__searchLink,
div#headerContainer.Header__header.Header__defaultContent #searchContainer {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
overflow: visible !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__searchBox {
height: 48px !important;
min-height: 48px !important;
width: 100% !important;
max-width: none !important;
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid var(--viascreens-border) !important;
border-radius: 0 !important;
box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12) !important;
box-sizing: border-box !important;
}
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchpart,
div#headerContainer.Header__header.Header__defaultContent #searchContainer1,
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchTextbox {
height: 48px !important;
min-height: 48px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
div#headerContainer.Header__header.Header__defaultContent .Header__searchBox input,
div#headerContainer.Header__header.Header__defaultContent .SearchBox__searchTextbox input,
div#headerContainer.Header__header.Header__defaultContent #autoSearchContainer,
div#headerContainer.Header__header.Header__defaultContent input[data-id="searchInputs"] {
height: 48px !important;
min-height: 48px !important;
padding-left: 38px !important;
padding-right: 16px !important;
font-size: 16px !important;
}
/* Breadcrumb sits just under the search bar on mobile.
(No grid row needed - it flows inside the search column.) */
portal.portalContainer.articleList div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer,
portal.portalContainer.articleDetail div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer,
portal.portalContainer.article_subcategory div#headerContainer.Header__header.Header__defaultContent #breadCrumbsContainer {
width: 100% !important;
max-width: 100% !important;
margin: 14px 0 0 0 !important;
overflow: hidden !important;
}
}
/* ==================================================
Logo Text / Navigation Cleanup
================================================== */
/* Hide separate Zoho text because uploaded logo already includes Support */
.Header__logotxt,
div#headerContainer.Header__header.Header__defaultContent .Header__logotxt {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Hide navigation inside compact header */
div#headerContainer.Header__header.Header__defaultContent .Header__navbtn,
div#headerContainer.Header__header.Header__defaultContent .Header__nav,
div#headerContainer.Header__header.Header__defaultContent .Header__menuClick,
div#headerContainer.Header__header.Header__defaultContent .Header__responsivefreez {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Accessibility icon */
#headerContainer svg,
.Header__header svg,
.Header__defaultContent svg {
color: var(--viascreens-navy) !important;
fill: var(--viascreens-navy) !important;
stroke: var(--viascreens-navy) !important;
}
/* ==================================================
Search Placeholder Override ("Search Support" + icon)
================================================== */
/* Make Zoho placeholder invisible */
#autoSearchContainer::placeholder,
input[data-id="searchInputs"]::placeholder,
.SearchBox__searchTextbox input::placeholder,
.Header__searchBox input::placeholder {
color: transparent !important;
opacity: 0 !important;
}
/* Prepare search input wrapper */
.SearchBox__searchTextbox,
.Header__searchBox {
position: relative !important;
}
/* Custom search icon while input is empty */
.SearchBox__searchTextbox:has(input:placeholder-shown)::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='%239ca3af' stroke-width='1.8'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
pointer-events: none !important;
z-index: 6 !important;
}
/* Custom placeholder text while input is empty */
.SearchBox__searchTextbox:has(input:placeholder-shown)::after {
content: "Search Support" !important;
position: absolute !important;
left: 40px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #9ca3af !important;
pointer-events: none !important;
z-index: 6 !important;
}
/* When the search bar floats on scroll (the logo is no longer visible),
show the ViaScreens icon before the magnifier and the full brand name.
Applies to desktop, tablet and mobile. */
#headerContainer.Header__homeNavbarFixed .SearchBox__searchTextbox:has(input:placeholder-shown)::before {
left: 14px !important;
width: 50px !important;
height: 28px !important;
background-image:
url("https://cdn11.bigcommerce.com/s-o9pppsyjzh/images/stencil/original/image-manager/viascreens-favicon.png?t=1781798830"),
url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='%239ca3af' stroke-width='1.8'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-position: left center, right center !important;
background-size: 28px 28px, 18px 18px !important;
background-repeat: no-repeat, no-repeat !important;
}
#headerContainer.Header__homeNavbarFixed .SearchBox__searchTextbox:has(input:placeholder-shown)::after {
content: "Search ViaScreens Support" !important;
left: 70px !important;
}
/* In the floating bar, start the caret / typed text where the placeholder
text begins (just before "Search ViaScreens Support"), not after the icon. */
div#headerContainer.Header__header.Header__defaultContent.Header__homeNavbarFixed .SearchBox__searchTextbox input,
div#headerContainer.Header__header.Header__defaultContent.Header__homeNavbarFixed #autoSearchContainer,
div#headerContainer.Header__header.Header__defaultContent.Header__homeNavbarFixed input[data-id="searchInputs"] {
padding-left: 70px !important;
}
@media only screen and (max-width: 768px) {
.SearchBox__searchTextbox:has(input:placeholder-shown)::before {
left: 16px !important;
width: 17px !important;
height: 17px !important;
background-size: 17px 17px !important;
}
.SearchBox__searchTextbox:has(input:placeholder-shown)::after {
left: 38px !important;
font-size: 16px !important;
}
}
/* ==================================================
Remove Unused Header Widgets
================================================== */
.Header__contactCta,
#titleSearch .Header__contactCta,
#headerContainer .Header__contactCta,
#plusBtn,
.Header__panelbtns,
.Header__cdstretchynav,
.Header__cdnavtrigger,
.Header__overlayresponav,
.Header__container,
.Header__containerUl,
.Header__stretchynavbg {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ==================================================
Breadcrumbs (corrected - works on all breakpoints)
Shown on: category/section listing (article_subcategory),
article pages (articleDetail / articleList).
Hidden on: home (kbLanding) and everything else.
================================================== */
/* Hide by default (incl. homepage) */
portal.portalContainer .Header__breadcrumbs,
portal.portalContainer .BreadCrumbs__breadcrumbsView {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Show on listing + article pages */
portal.portalContainer.articleList .Header__breadcrumbs,
portal.portalContainer.articleDetail .Header__breadcrumbs,
portal.portalContainer.article_subcategory .Header__breadcrumbs,
portal.portalContainer.articleList .BreadCrumbs__breadcrumbsView,
portal.portalContainer.articleDetail .BreadCrumbs__breadcrumbsView,
portal.portalContainer.article_subcategory .BreadCrumbs__breadcrumbsView {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
height: auto !important;
min-height: 22px !important;
padding: 0 !important;
overflow: visible !important;
}
/* Breadcrumb list (note: live class is "breadcrumbList" with capital L) */
#breadCrumbsContainer .BreadCrumbs__breadcrumbList {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
line-height: 22px !important;
}
/* Stop Zoho stretching each crumb (its default is flex: 1 1 0%, which makes
a short crumb like "Support" fill a wide slot and leaves a big empty gap
after it). Size each crumb to its content instead. */
#breadCrumbsContainer .BreadCrumbs__breadCrumbText {
flex: 0 0 auto !important;
}
/* Breadcrumb items + links */
#breadCrumbsContainer .BreadCrumbs__breadCrumbText,
#breadCrumbsContainer .BreadCrumbs__breadCrumbText a {
display: inline-flex !important;
align-items: center !important;
height: 22px !important;
min-height: 22px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 22px !important;
color: var(--viascreens-navy) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
#breadCrumbsContainer .BreadCrumbs__breadCrumbText a:hover {
color: var(--viascreens-blue) !important;
}
/* Replace the first crumb ("Help Center") with "Support".
data-id based, so it is immune to class casing and applies
at every breakpoint from one place. */
#breadCrumbsContainer a[data-id="_breadcrumb_0"] {
font-size: 0 !important;
color: transparent !important;
}
#breadCrumbsContainer a[data-id="_breadcrumb_0"]::after {
content: "Support" !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--viascreens-navy) !important;
}
/* Compact, consistent separator (overrides Zoho's wide " / " default,
which on mobile renders as a large empty gap after the first crumb). */
#breadCrumbsContainer .BreadCrumbs__breadCrumbText:not(:first-child)::before {
content: "/" !important;
margin: 0 6px !important;
color: var(--viascreens-muted) !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/* Collapse Zoho's reserved 102px banner height so it fits its content. On
article/category pages this pulls the breadcrumb up under the search bar;
on the homepage (no breadcrumb) it removes the large empty gap. */
portal.portalContainer #bannerContainer,
portal.portalContainer .Header__banneralt {
min-height: 0 !important;
height: auto !important;
}
/* ==================================================
Back-to-top button — mobile position
Zoho places it at bottom:25% on mobile (floating high over the
content). Anchor it to the bottom-right corner instead.
================================================== */
@media only screen and (max-width: 768px) {
.AppContainer__backtop,
.AppContainer__backToTop {
bottom: 20px !important;
right: 16px !important;
top: auto !important;
}
}
/* ==================================================
Embedded Zoho Forms form (in KB articles)
The form is a cross-origin iframe, so only the iframe ELEMENT
can be styled here — the form's own fonts/colours/fields are set
in Zoho Forms > Themes. Zoho Desk articles don't run the form's
auto-resize script, so the height is fixed and sized to fit the
form (removing the inner scrollbar). Tune the px values to match
your form's length.
================================================== */
portal.portalContainer.articleDetail iframe[src*="zohopublic"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
border: none !important;
height: 1040px !important;
margin: 8px auto !important;
}
@media only screen and (max-width: 768px) {
portal.portalContainer.articleDetail iframe[src*="zohopublic"] {
height: 1400px !important;
}
}
/* ==================================================
Article Reading Progress Bar
================================================== */
portal.portalContainer.articleDetail .Readingprogress__progressContainer,
portal.portalContainer.articleDetail .Readingprogress__progressBarTransition {
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
line-height: 2px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
portal.portalContainer.articleDetail .Readingprogress__progressContainer::before,
portal.portalContainer.articleDetail .Readingprogress__progressContainer::after,
portal.portalContainer.articleDetail .Readingprogress__progressBarTransition::before,
portal.portalContainer.articleDetail .Readingprogress__progressBarTransition::after {
display: none !important;
content: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
portal.portalContainer.articleDetail .Readingprogress__progressBar,
portal.portalContainer.articleDetail .Readingprogress__progressBarLine,
portal.portalContainer.articleDetail .Readingprogress__progressBarTransition .Readingprogress__progressBar,
portal.portalContainer.articleDetail .Readingprogress__progressContainer .Readingprogress__progressBar {
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
line-height: 2px !important;
background: var(--viascreens-gradient) !important;
border: none !important;
box-shadow: none !important;
}
/* On DESKTOP article pages the reading-progress bar provides the gradient
accent under the header, so hide the header's own line there to avoid a
doubled (thicker) line. Mobile articles have no reading-progress bar, so the
header line must stay — hence this is scoped to desktop widths only. */
@media only screen and (min-width: 769px) {
portal.portalContainer.articleDetail div#headerContainer.Header__header.Header__defaultContent::after {
display: none !important;
}
}
/* On mobile, Zoho doesn't render the reading-progress bar on article pages,
so give the floating search bar the same static 2px gradient accent beneath
it (the filling progress bar stays on desktop articles). */
@media only screen and (max-width: 768px) {
portal.portalContainer.articleDetail #headerContainer.Header__homeNavbarFixed #searchContainer {
overflow: visible !important;
}
portal.portalContainer.articleDetail #headerContainer.Header__homeNavbarFixed #searchContainer::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 2px !important;
background: var(--viascreens-gradient) !important;
z-index: 999999 !important;
pointer-events: none !important;
}
}
/* ==================================================
Floating Search Bar — Gradient Accent
Shown when the search bar floats on scroll. On article
pages the reading-progress bar above provides the gradient,
so the static accent is excluded there (:not(.articleDetail)).
================================================== */
portal.portalContainer:not(.articleDetail) #headerContainer.Header__homeNavbarFixed #searchContainer {
overflow: visible !important;
}
portal.portalContainer:not(.articleDetail) #headerContainer.Header__homeNavbarFixed #searchContainer::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 2px !important;
background: var(--viascreens-gradient) !important;
z-index: 999999 !important;
pointer-events: none !important;
}
/* ==================================================
Hide Article Action Icons / Share / Helpful
================================================== */
.ArticleDetailLeftContainer__prinExp,
.ArticleDetailLeftContainer__pdfView,
.Printcontainer__print,
.ArticleDetailLeftContainer__centerView,
div[title="Download as PDF"],
div[aria-label="Download as PDF"],
div[title="Print"],
div[aria-label="print"],
div[aria-label="Print"],
span[title="Reader view"],
span[aria-label="Reader view"],
.ArticleDetailLeftContainer__widget div:has(span[data-id="facebook_share"]),
.ArticleDetailLeftContainer__widget div:has(span[data-id="twitter_share"]),
.ArticleDetailLeftContainer__widget div:has(span[data-id="linkedin_share"]),
.ArticleDetailLeftContainer__widget [class*="ArticleCmd__socailShare"],
.ArticleDetailLeftContainer__widget [class*="ArticleCmd__socialShare"],
span[data-id="facebook_share"],
span[data-id="twitter_share"],
span[data-id="linkedin_share"],
.ArticleCmd__socialLink,
[class*="ArticleCmd__socialLink"],
.ArticleDetailLeftContainer__widget .ArticleCmd__mgr15,
.ArticleDetailLeftContainer__widget span[class*="ArticleCmd__mgr15"],
span.ArticleCmd__mgr15,
span[class*="ArticleCmd__mgr15"],
portal.portalContainer.articleDetail .ArticleCmd__articleLike,
portal.portalContainer.articleDetail .ArticleCmd__articleDetail,
portal.portalContainer.articleDetail .ArticleCmd__helptxt,
portal.portalContainer.articleDetail span[data-id="likeCount"],
portal.portalContainer.articleDetail span[data-id="dislikeCount"],
portal.portalContainer.articleDetail a[data-id="article_like"],
portal.portalContainer.articleDetail a[data-id="article_dislike"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ==================================================
Hide Right Sidebar Column
================================================== */
#layoutContainer.Layout__twoColumn > .Layout__layout2,
#layoutContainer.Layout__twoColumn > [data-id="column2"],
.Layout__twoColumn > .Layout__layout2,
.Layout__twoColumn > [data-id="column2"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
#layoutContainer.Layout__twoColumn > .Layout__layout1,
#layoutContainer.Layout__twoColumn > [data-id="column1"],
.Layout__twoColumn > .Layout__layout1,
.Layout__twoColumn > [data-id="column1"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#layoutContainer.Layout__twoColumn,
.Layout__twoColumn {
display: block !important;
width: 100% !important;
max-width: 1150px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==================================================
Homepage / Category Cards
================================================== */
/* Hide article/topic count on cards */
li.TitleContainer__progressText,
li[class*="TitleContainer__progressText"],
.TitleContainer__progressText,
[class*="TitleContainer__progressText"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
list-style: none !important;
list-style-type: none !important;
}
[class*="KbCategory"] [class*="box"],
[class*="KbCategory"] [class*="Box"],
[class*="Category"] [class*="box"],
[class*="Category"] [class*="Box"] {
border-radius: 0 !important;
border: 1px solid var(--viascreens-border) !important;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
position: relative !important;
overflow: hidden !important;
}
[class*="KbCategory"] [class*="box"]:hover,
[class*="KbCategory"] [class*="Box"]:hover,
[class*="Category"] [class*="box"]:hover,
[class*="Category"] [class*="Box"]:hover {
transform: translateY(-3px) !important;
border-color: #c7d7ff !important;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1) !important;
}
[class*="KbCategory"] h1,
[class*="KbCategory"] h2,
[class*="KbCategory"] h3,
[class*="Category"] h1,
[class*="Category"] h2,
[class*="Category"] h3 {
color: var(--viascreens-navy) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
[class*="KbCategory"] p,
[class*="Category"] p {
color: #334155 !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
/* ==================================================
Category cards — uniform compact tiles
Replaces Zoho's 260px card height with a shorter, FIXED
height that's equal for every card (icon + title on a
row, description beneath).
================================================== */
.TitleContainer__container {
min-height: 160px !important;
height: auto !important;
padding: 14px 18px !important;
margin-bottom: 18px !important;
border: 1px solid var(--viascreens-border) !important;
border-radius: 0 !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
background: #ffffff !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.TitleContainer__container:hover {
transform: translateY(-3px) !important;
border-color: #c7d7ff !important;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1) !important;
}
.TitleContainer__gridView {
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
.TitleContainer__header {
padding: 0 0 8px 0 !important;
align-items: center !important;
gap: 10px !important;
}
.TitleContainer__headerIcon,
.TitleContainer__headerIcon .Avatar__square,
.TitleContainer__headerIcon .Avatar__img {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.TitleContainer__title a,
.TitleContainer__title {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--viascreens-navy) !important;
}
.TitleContainer__body {
height: auto !important;
min-height: 0 !important;
}
.TitleContainer__description {
min-height: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: var(--viascreens-muted) !important;
margin: 0 !important;
}
/* ==================================================
Category (sub-category) pages — matching tiles
Converts Zoho's single bordered box of full-width rows
(.KBSubCategoryContainer__boxView > .ModuleItem__moduleItem)
into a 2-column grid of compact, branded cards that match
the KB landing tiles. Hides the duplicate empty description.
================================================== */
.KBSubCategoryContainer__boxView {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
border: 0 !important;
background: transparent !important;
height: auto !important;
}
.ModuleItem__moduleItem {
border: 1px solid var(--viascreens-border) !important;
border-radius: 0 !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
background: #ffffff !important;
padding: 14px 18px !important;
min-height: 96px !important;
height: auto !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.ModuleItem__moduleItem:hover {
transform: translateY(-3px) !important;
border-color: #c7d7ff !important;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1) !important;
}
.ModuleItem__moduleHeader {
height: auto !important;
align-items: center !important;
}
.ModuleItem__kbSubcategoryImg,
.ModuleItem__kbSubcategoryImg .Avatar__square,
.ModuleItem__kbSubcategoryImg .Avatar__img {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.ModuleItem__moduleDescription.emptydescription {
display: none !important;
}
.ModuleItem__moduleTitle a,
.ModuleItem__moduleTitle {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--viascreens-navy) !important;
}
/* Hide the article-count line on category cards */
.KBSubCategoryContainer__boxView .List__postdet,
.KBSubCategoryContainer__boxView .List__listItems {
display: none !important;
}
/* Stack to a single column on mobile */
@media (max-width: 768px) {
.KBSubCategoryContainer__boxView {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* ==================================================
Article list pages — minimal polish
Keeps the vertical list but adds a card-like container,
tighter rows, a hover tint, a gradient accent bar that
reveals on hover, and branded title typography.
================================================== */
portal.articleList .ArticleListContainer__boxView {
border: 1px solid var(--viascreens-border) !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
background: #ffffff !important;
border-radius: 0 !important;
overflow: hidden !important;
}
portal.articleList .ModuleItem__moduleListItem {
position: relative !important;
padding: 16px 22px !important;
transition: background 0.18s ease !important;
}
portal.articleList .ModuleItem__moduleListItem::before {
content: "" !important;
position: absolute !important;
left: 0;
top: 0;
bottom: 0;
width: 3px !important;
background: linear-gradient(180deg, #37C6FF, #5277FF, #9A57FF) !important;
opacity: 0 !important;
transition: opacity 0.18s ease !important;
}
portal.articleList .ModuleItem__moduleListItem:hover {
background: #f5f8ff !important;
}
portal.articleList .ModuleItem__moduleListItem:hover::before {
opacity: 1 !important;
}
portal.articleList .ModuleItem__artList a {
font-size: 15.5px !important;
font-weight: 600 !important;
color: var(--viascreens-navy) !important;
transition: color 0.18s ease !important;
}
portal.articleList .ModuleItem__moduleListItem:hover .ModuleItem__artList a {
color: #5277FF !important;
}
/* ==================================================
Article Pages
================================================== */
.ArticleDetailLeftContainer__wrapper,
.ArticleDetailLeftContainer__box,
.ArticleDetailLeftContainer__articleDetail,
.ArticleDetailLeftContainer__content,
.ArticleList__articleList,
.KbDetailLtContainer__articleContent {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.ArticleDetailLeftContainer__articleDetail,
.KbDetailLtContainer__articleContent {
border-color: #d8dee8 !important;
box-shadow: none !important;
}
/* Article title — smaller, tighter (Zoho default was 38px) */
portal.articleDetail .ArticleDetailLeftContainer__kbTitle {
font-size: 30px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: var(--viascreens-navy) !important;
margin-bottom: 18px !important;
}
/* Cap the body reading column for a comfortable line length.
Title and container stay full width; only the text column narrows. */
portal.articleDetail .articleContent {
max-width: 780px !important;
}
/* Section headings inside the article body */
.ArticleDetailLeftContainer__articleDetail h1,
.ArticleDetailLeftContainer__articleDetail h2,
.ArticleDetailLeftContainer__articleDetail h3,
.KbDetailLtContainer__articleContent h1,
.KbDetailLtContainer__articleContent h2,
.KbDetailLtContainer__articleContent h3,
.articleContent h1,
.articleContent h2,
.articleContent h3 {
color: var(--viascreens-navy) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.ArticleDetailLeftContainer__articleDetail p,
.ArticleDetailLeftContainer__articleDetail li,
.KbDetailLtContainer__articleContent p,
.KbDetailLtContainer__articleContent li,
.articleContent p,
.articleContent li {
color: var(--viascreens-text) !important;
font-size: 16px !important;
line-height: 1.7 !important;
}
.articleContent p {
margin-bottom: 14px !important;
}
.ArticleDetailLeftContainer__articleDetail a,
.KbDetailLtContainer__articleContent a,
.articleContent a {
color: var(--viascreens-blue) !important;
text-decoration: none !important;
}
.ArticleDetailLeftContainer__articleDetail a:hover,
.KbDetailLtContainer__articleContent a:hover,
.articleContent a:hover {
color: var(--viascreens-blue-hover) !important;
text-decoration: underline !important;
}
/* ==================================================
Homepage Contact Support Widget
================================================== */
.HomeContactSection {
background: #ffffff !important;
color: var(--viascreens-navy) !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px auto 0 auto !important;
padding: 28px 24px 26px !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* Hide the empty
after the contact widget (extra gap) */
.HomeContactSection + div {
display: none !important;
}
/* Trim the page's bottom padding under the contact widget on the KB landing */
portal.portalContainer.kbLanding #layoutContainer {
padding-bottom: 16px !important;
}
.HomeContactSection__inner {
width: 100% !important;
max-width: 900px !important;
margin: 0 auto !important;
}
.HomeContactSection__title {
margin: 0 0 28px 0 !important;
font-size: 26px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: -0.4px !important;
color: var(--viascreens-navy) !important;
}
.HomeContactSection__options {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 64px !important;
margin: 0 auto 24px auto !important;
}
.HomeContactSection__option {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 150px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
cursor: pointer !important;
color: var(--viascreens-navy) !important;
}
.HomeContactSection__qr,
.HomeContactSection__icon {
display: block !important;
width: 76px !important;
height: 76px !important;
object-fit: contain !important;
margin-bottom: 12px !important;
}
/* The widget markup puts inline max-width:100% on each ![]()
, which pins the
icon to its shrink-wrapped container and prevents the fixed sizes above from
taking effect. Override it so the px sizes apply on every breakpoint. */
.HomeContactSection__qr,
.HomeContactSection__icon,
.HomeContactSection__mobileWhatsappImg {
max-width: none !important;
}
.HomeContactSection__mobileWhatsappImg {
display: none !important;
}
.HomeContactSection__label {
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--viascreens-navy) !important;
text-align: center !important;
}
.HomeContactSection__mobileLabel {
display: none !important;
}
.HomeContactSection__note {
margin: 8px auto 0 auto !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: var(--viascreens-muted) !important;
text-align: center !important;
}
.HomeContactSection__option:hover .HomeContactSection__label {
color: var(--viascreens-blue) !important;
}
/* ==================================================
Footer (minimal — social icons + copyright, store colours)
================================================== */
.Footer__footerBg,
.Footer__footer {
background-color: #e5e5e5 !important;
color: #111827 !important;
padding: 0 !important;
margin: 0 !important;
}
.vsFooter {
width: 100% !important;
background: #e5e5e5 !important;
font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
box-sizing: border-box !important;
}
.vsFooter__accent {
display: block !important;
width: 100% !important;
height: 2px !important;
background: var(--viascreens-gradient) !important;
}
.vsFooter__inner {
width: 100% !important;
max-width: 1150px !important;
margin: 0 auto !important;
padding: 24px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
text-align: center !important;
}
.vsFooter__bottom {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
color: #555555 !important;
}
.vsFooter__bottom a {
color: #555555 !important;
text-decoration: none !important;
font-size: 13px !important;
transition: color 0.15s ease !important;
}
.vsFooter__bottom a:hover {
color: var(--viascreens-blue) !important;
}
.vsFooter__bottom a::before {
content: "|" !important;
margin: 0 12px !important;
color: #b8b8b8 !important;
}
/* ==================================================
Mobile Contact Widget / Footer
================================================== */
@media only screen and (max-width: 768px) {
.HomeContactSection {
margin-top: 16px !important;
padding: 24px 16px 22px !important;
}
.HomeContactSection__inner {
max-width: 100% !important;
}
.HomeContactSection__title {
font-size: 21px !important;
line-height: 1.25 !important;
margin-bottom: 24px !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 360px !important;
}
.HomeContactSection__options {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 28px !important;
width: 100% !important;
margin-bottom: 22px !important;
}
.HomeContactSection__option {
width: 130px !important;
max-width: 130px !important;
flex: 0 0 130px !important;
}
.HomeContactSection__desktopQr {
display: none !important;
}
.HomeContactSection__mobileWhatsappImg {
display: block !important;
width: 64px !important;
height: 64px !important;
object-fit: contain !important;
margin-bottom: 8px !important;
filter: brightness(0) saturate(100%) invert(9%) sepia(48%) saturate(2141%) hue-rotate(204deg) brightness(89%) contrast(97%) !important;
}
.HomeContactSection__icon {
width: 64px !important;
height: 64px !important;
margin-bottom: 8px !important;
}
.HomeContactSection__desktopLabel {
display: none !important;
}
.HomeContactSection__mobileLabel {
display: inline !important;
}
.HomeContactSection__label {
font-size: 16px !important;
line-height: 1.25 !important;
}
.HomeContactSection__note {
font-size: 12.5px !important;
line-height: 1.55 !important;
max-width: 340px !important;
}
}
/* Very small phones */
@media only screen and (max-width: 390px) {
.HomeContactSection__options {
gap: 18px !important;
}
.HomeContactSection__option {
width: 120px !important;
max-width: 120px !important;
flex: 0 0 120px !important;
}
.HomeContactSection__mobileWhatsappImg,
.HomeContactSection__icon {
width: 54px !important;
height: 54px !important;
}
.HomeContactSection__label {
font-size: 15px !important;
}
}
/* ==================================================
Double Scrollbar Fix (category / section / article)
Does NOT disable the floating header.
================================================== */
html, body {
overflow-x: hidden !important;
overflow-y: auto !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
}
/* Stop content wrappers from becoming internal scroll areas */
portal.portalContainer.articleList,
portal.portalContainer.articleDetail,
portal.portalContainer.article_subcategory,
portal.portalContainer.articleList #container,
portal.portalContainer.articleDetail #container,
portal.portalContainer.article_subcategory #container,
portal.portalContainer.articleList #layoutContainer,
portal.portalContainer.articleDetail #layoutContainer,
portal.portalContainer.article_subcategory #layoutContainer,
portal.portalContainer.articleList .Layout__twoColumn,
portal.portalContainer.articleDetail .Layout__twoColumn,
portal.portalContainer.article_subcategory .Layout__twoColumn,
portal.portalContainer.articleList .Layout__layout1,
portal.portalContainer.articleDetail .Layout__layout1,
portal.portalContainer.article_subcategory .Layout__layout1,
portal.portalContainer.articleList .ArticleList__articleList,
portal.portalContainer.article_subcategory .ArticleList__articleList,
portal.portalContainer.articleDetail .ArticleDetailLeftContainer__wrapper,
portal.portalContainer.articleDetail .ArticleDetailLeftContainer__box,
portal.portalContainer.articleDetail .ArticleDetailLeftContainer__articleDetail,
portal.portalContainer.articleDetail .ArticleDetailLeftContainer__content {
overflow-y: visible !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
/* Prevent header from showing an internal scrollbar, without disabling floating */
portal.portalContainer.articleList #headerContainer,
portal.portalContainer.articleDetail #headerContainer,
portal.portalContainer.article_subcategory #headerContainer,
portal.portalContainer.articleList .Header__header,
portal.portalContainer.articleDetail .Header__header,
portal.portalContainer.article_subcategory .Header__header,
portal.portalContainer.articleList .Header__defaultContent,
portal.portalContainer.articleDetail .Header__defaultContent,
portal.portalContainer.article_subcategory .Header__defaultContent {
overflow-y: visible !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
portal.portalContainer.articleList #headerContainer::-webkit-scrollbar,
portal.portalContainer.articleDetail #headerContainer::-webkit-scrollbar,
portal.portalContainer.article_subcategory #headerContainer::-webkit-scrollbar,
portal.portalContainer.articleList .Header__header::-webkit-scrollbar,
portal.portalContainer.articleDetail .Header__header::-webkit-scrollbar,
portal.portalContainer.article_subcategory .Header__header::-webkit-scrollbar,
portal.portalContainer.articleList .Header__defaultContent::-webkit-scrollbar,
portal.portalContainer.articleDetail .Header__defaultContent::-webkit-scrollbar,
portal.portalContainer.article_subcategory .Header__defaultContent::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Keep search and breadcrumbs visible (no internal clipping) */
portal.portalContainer.articleList #titleSearch,
portal.portalContainer.articleDetail #titleSearch,
portal.portalContainer.article_subcategory #titleSearch,
portal.portalContainer.articleList .Header__titleSearchWrapper,
portal.portalContainer.articleDetail .Header__titleSearchWrapper,
portal.portalContainer.article_subcategory .Header__titleSearchWrapper,
portal.portalContainer.articleList .Header__titleSearchBox,
portal.portalContainer.articleDetail .Header__titleSearchBox,
portal.portalContainer.article_subcategory .Header__titleSearchBox,
portal.portalContainer.articleList .Header__banneralt,
portal.portalContainer.articleDetail .Header__banneralt,
portal.portalContainer.article_subcategory .Header__banneralt,
portal.portalContainer.articleList #bannerContainer,
portal.portalContainer.articleDetail #bannerContainer,
portal.portalContainer.article_subcategory #bannerContainer,
portal.portalContainer.articleList .Header__breadcrumbs,
portal.portalContainer.articleDetail .Header__breadcrumbs,
portal.portalContainer.article_subcategory .Header__breadcrumbs,
portal.portalContainer.articleList #breadCrumbsContainer,
portal.portalContainer.articleDetail #breadCrumbsContainer,
portal.portalContainer.article_subcategory #breadCrumbsContainer {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* Remove any old spacer from previous floating-header tests */
#vsHeaderSpacer {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}