/* ==========================================================================
   SWISH BI — Zoho Desk Help Center Custom CSS
   --------------------------------------------------------------------------
   Brand source: Brand Guidelines (Identity Manual, Oct 2022)
     Primary:    #152844 (Dark Blue)   #278EE2 (Blue)
     Secondary:  #000000  #989898  #D2D2D2  #F7F8F9
     Type:       Gotham (primary, licensed) / Montserrat (secondary, web-safe)

   Where to paste: Setup → Channels → Help Center → [portal] →
     Customization → Customize (your theme) → CSS panel → Preview → Publish

   NOTE: Zoho Desk class names differ between the Classic theme and the
   newer HC themes, and Zoho changes them occasionally. Selectors below are
   written defensively (multiple patterns + attribute selectors). If
   something doesn't take, inspect the element in DevTools and add its
   class to the matching rule — the variables at the top do the rest.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand tokens
   -------------------------------------------------------------------------- */
:root {
  --sbi-navy:        #152844;  /* primary dark — headers, headings, footer  */
  --sbi-blue:        #278EE2;  /* primary accent — links, buttons, focus    */
  --sbi-blue-hover:  #1F78C2;  /* derived: blue darkened ~10% for hover     */
  --sbi-navy-soft:   #1E3A5F;  /* derived: navy lightened for hover states  */
  --sbi-black:       #000000;
  --sbi-gray:        #989898;  /* secondary text                            */
  --sbi-gray-light:  #D2D2D2;  /* borders, dividers                         */
  --sbi-bg:          #F7F8F9;  /* page background                           */
  --sbi-white:       #FFFFFF;

  --sbi-font: 'Montserrat', 'Gotham', 'Segoe UI', Helvetica, Arial, sans-serif;

  --sbi-radius: 6px;
  --sbi-shadow: 0 2px 8px rgba(21, 40, 68, 0.08);
  --sbi-shadow-hover: 0 4px 16px rgba(21, 40, 68, 0.14);
}

/* Montserrat from Google Fonts. (Gotham is the primary brand face but is a
   licensed font — if you have a Gotham web license, add its @font-face
   declarations here and it will take precedence via the font stack above.) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500&display=swap');

/* --------------------------------------------------------------------------
   1. Base typography & page background
   -------------------------------------------------------------------------- */
body,
input, button, select, textarea {
  font-family: var(--sbi-font) !important;
}

body {
  background-color: var(--sbi-bg) !important;
  color: var(--sbi-navy);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sbi-font) !important;
  font-weight: 600;
  color: var(--sbi-navy);
  letter-spacing: -0.01em;
}

p, li { color: #2A3B52; }

small, .secondary-text, .meta, .timestamp,
[class*="meta"], [class*="Meta"] {
  color: var(--sbi-gray);
}

/* Links */
a { color: var(--sbi-blue); }
a:hover { color: var(--sbi-blue-hover); }

/* --------------------------------------------------------------------------
   2. Header / top navigation
   -------------------------------------------------------------------------- */
/* Covers Classic theme + newer HC theme header containers */
#zohodeskheader, .zd-header, .Header, header,
[class*="HeaderWrapper"], [class*="portalHeader"] {
  background-color: var(--sbi-navy) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Nav tabs / links in the header */
#zohodeskheader a, .zd-header a, .Header a, header nav a,
[class*="HeaderWrapper"] a, [class*="portalHeader"] a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

#zohodeskheader a:hover, .zd-header a:hover, .Header a:hover, header nav a:hover,
[class*="HeaderWrapper"] a:hover, [class*="portalHeader"] a:hover {
  color: var(--sbi-white) !important;
}

/* Active tab indicator */
.Header .active, header nav .active,
[class*="Tab--active"], [class*="tab-active"] {
  color: var(--sbi-white) !important;
  border-bottom: 2px solid var(--sbi-blue) !important;
}

/* --------------------------------------------------------------------------
   3. Hero / search banner
   -------------------------------------------------------------------------- */
/* The big "How can we help?" banner — flat navy, no stock gradient */
.zd-banner, .Banner, [class*="bannerWrapper"], [class*="searchBanner"],
[class*="HeroBanner"] {
  background: var(--sbi-navy) !important;
  background-image: none !important;
}

.zd-banner h1, .Banner h1,
[class*="bannerWrapper"] h1, [class*="HeroBanner"] h1 {
  color: var(--sbi-white) !important;
  font-weight: 600;
}

/* Search input */
.zd-banner input[type="text"], .Banner input[type="text"],
[class*="searchBox"] input, [class*="SearchInput"] input,
input[type="search"] {
  border: 1px solid transparent !important;
  border-radius: var(--sbi-radius) !important;
  box-shadow: var(--sbi-shadow);
  font-family: var(--sbi-font) !important;
}

.zd-banner input[type="text"]:focus, input[type="search"]:focus,
[class*="searchBox"] input:focus, [class*="SearchInput"] input:focus {
  border-color: var(--sbi-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 142, 226, 0.25);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
/* Primary buttons */
button[type="submit"], .btn-primary, .zd-btn-primary,
[class*="Button--primary"], [class*="primaryBtn"], [class*="btnPrimary"] {
  background-color: var(--sbi-blue) !important;
  border: none !important;
  border-radius: var(--sbi-radius) !important;
  color: var(--sbi-white) !important;
  font-family: var(--sbi-font) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

button[type="submit"]:hover, .btn-primary:hover, .zd-btn-primary:hover,
[class*="Button--primary"]:hover, [class*="primaryBtn"]:hover {
  background-color: var(--sbi-blue-hover) !important;
  box-shadow: var(--sbi-shadow-hover);
}

/* Secondary / outline buttons */
.btn-secondary, .zd-btn-secondary,
[class*="Button--secondary"], [class*="secondaryBtn"] {
  background-color: transparent !important;
  border: 1px solid var(--sbi-gray-light) !important;
  border-radius: var(--sbi-radius) !important;
  color: var(--sbi-navy) !important;
  font-weight: 500;
}

.btn-secondary:hover,
[class*="Button--secondary"]:hover, [class*="secondaryBtn"]:hover {
  border-color: var(--sbi-blue) !important;
  color: var(--sbi-blue) !important;
}

/* --------------------------------------------------------------------------
   5. Cards — KB categories, article lists
   -------------------------------------------------------------------------- */
.zd-card, .Card, [class*="categoryCard"], [class*="CategoryItem"],
[class*="cardWrapper"], [class*="kbCategory"] {
  background: var(--sbi-white) !important;
  border: 1px solid var(--sbi-gray-light) !important;
  border-radius: var(--sbi-radius) !important;
  box-shadow: var(--sbi-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.zd-card:hover, .Card:hover, [class*="categoryCard"]:hover,
[class*="CategoryItem"]:hover, [class*="kbCategory"]:hover {
  border-color: var(--sbi-blue) !important;
  box-shadow: var(--sbi-shadow-hover);
  transform: translateY(-2px);
}

/* Category icons inherit brand blue */
[class*="categoryCard"] svg, [class*="CategoryItem"] svg,
[class*="kbCategory"] svg {
  fill: var(--sbi-blue) !important;
  color: var(--sbi-blue) !important;
}

/* --------------------------------------------------------------------------
   6. Article pages
   -------------------------------------------------------------------------- */
/* Article body container */
.articleContent, .ArticleDetail, [class*="articleWrapper"],
[class*="ArticleContent"] {
  background: var(--sbi-white);
  border-radius: var(--sbi-radius);
  line-height: 1.7;
}

/* Breadcrumbs */
.breadcrumb a, [class*="Breadcrumb"] a {
  color: var(--sbi-gray) !important;
  font-size: 13px;
}
.breadcrumb a:hover, [class*="Breadcrumb"] a:hover {
  color: var(--sbi-blue) !important;
}

/* Inline code & code blocks — you're a technical shop, make these clean */
.articleContent code, [class*="ArticleContent"] code {
  background: var(--sbi-bg);
  border: 1px solid var(--sbi-gray-light);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}

.articleContent pre, [class*="ArticleContent"] pre {
  background: var(--sbi-navy) !important;
  color: #E8EDF4 !important;
  border-radius: var(--sbi-radius);
  padding: 16px;
}

/* Blockquotes / callouts */
.articleContent blockquote, [class*="ArticleContent"] blockquote {
  border-left: 3px solid var(--sbi-blue);
  background: var(--sbi-bg);
  margin: 16px 0;
  padding: 12px 16px;
  color: #2A3B52;
}

/* Tables in articles */
.articleContent table, [class*="ArticleContent"] table {
  border-collapse: collapse;
  width: 100%;
}
.articleContent th, [class*="ArticleContent"] th {
  background: var(--sbi-navy);
  color: var(--sbi-white);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
}
.articleContent td, [class*="ArticleContent"] td {
  border-bottom: 1px solid var(--sbi-gray-light);
  padding: 10px 12px;
}

/* "Was this article helpful?" feedback — keep it (it's KB-relevant) */
[class*="feedbackWrapper"], [class*="ArticleFeedback"] {
  border-top: 1px solid var(--sbi-gray-light);
  margin-top: 32px;
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
#zohodeskfooter, .zd-footer, footer, [class*="footerWrapper"],
[class*="portalFooter"] {
  background-color: var(--sbi-navy) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: none !important;
}

#zohodeskfooter a, .zd-footer a, footer a,
[class*="footerWrapper"] a, [class*="portalFooter"] a {
  color: rgba(255, 255, 255, 0.85) !important;
}

#zohodeskfooter a:hover, footer a:hover {
  color: var(--sbi-white) !important;
}

/* ==========================================================================
   8. KNOWLEDGE-CENTER-ONLY MODE — hide ticket creation everywhere
   --------------------------------------------------------------------------
   ⚠ CSS hiding is cosmetic. The /portal/.../newticket URL still works if
   typed directly, and form POSTs still succeed. Pair this CSS with the
   real settings (see notes accompanying this file). This section is the
   visual backstop, not the lock.
   ========================================================================== */

/* 8a. Any link pointing at the new-ticket page, wherever it appears
   (header tab, home-page tile, article footer, My Area, search empty-state) */
a[href*="newticket"],
a[href*="new-ticket"],
a[href*="addticket"],
a[href*="add-ticket"],
a[href*="submitticket"],
a[href*="submit-ticket"] {
  display: none !important;
}

/* Hide the parent nav item so no empty tab/gap remains in menus */
li:has(> a[href*="newticket"]),
li:has(> a[href*="addticket"]),
li:has(> a[href*="submit-ticket"]),
nav [class*="menuItem"]:has(a[href*="newticket"]) {
  display: none !important;
}

/* 8b. Known Zoho Desk components for ticket submission */
[data-id="newTicket"],
[data-id="addTicket"],
[data-id="submitTicket"],
[class*="newTicketBtn"],
[class*="NewTicket"],
[class*="submitTicket"],
[class*="SubmitTicket"],
[class*="addTicketWidget"],
[class*="TicketFormWidget"] {
  display: none !important;
}

/* 8c. Home-page "Submit a Ticket" tile/card (newer HC themes render
   channel shortcuts as cards; this catches the ticket one) */
[class*="channelCard"]:has(a[href*="ticket"]),
[class*="quickLink"]:has(a[href*="newticket"]) {
  display: none !important;
}

/* 8d. The new-ticket form page itself — blank it as a fallback if someone
   deep-links to it. (Real fix: remove the tab in the theme editor and
   restrict submission in Help Center permissions.) */
[class*="newTicketForm"],
[class*="NewTicketForm"],
[class*="ticketFormWrapper"],
form[name="ticketForm"],
form[action*="newticket"] {
  display: none !important;
}

/* 8e. "Submit a ticket" prompts at the bottom of articles / empty search
   results ("Can't find what you're looking for?" CTAs) */
[class*="needHelp"]:has(a[href*="ticket"]),
[class*="stillNeedHelp"],
[class*="contactSupport"]:has(a[href*="newticket"]),
[class*="noResults"] a[href*="newticket"] {
  display: none !important;
}

/* 8f. My Area — hide the Tickets tab and any "Add Ticket" affordance for
   signed-in users (they may still need My Area for profile/community).
   Comment this block out if you ever want signed-in users to see history. */
a[href*="my-tickets"],
a[href*="myarea/tickets"],
[class*="myAreaTickets"],
[class*="MyTickets"] {
  display: none !important;
}

/* 8g. ASAP / floating help widget "Submit Ticket" entry, if the widget is
   embedded anywhere */
[class*="asap"] [class*="ticket"],
[id*="zohohc-asap"] [class*="ticket"] {
  display: none !important;
}

/* ==========================================================================
   9. KILL THE DEFAULT ORANGE — avatar, profile dropdown, misc accents
   --------------------------------------------------------------------------
   Zoho's default theme accent (orange) shows on components the sections
   above don't touch. Best fix: set the theme's primary/accent color to
   #278EE2 in Customize → Colors. These rules are the CSS backstop for
   anything that ignores the theme color setting.
   ========================================================================== */

/* 9a. Avatar / initials badge in the header (circle with "EP") —
   no background fill, just blue initials with a subtle blue ring */
[class*="avatar"], [class*="Avatar"],
[class*="userPic"], [class*="UserPic"],
[class*="initials"], [class*="Initials"] {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--sbi-blue) !important;
  border-color: rgba(39, 142, 226, 0.35) !important;
}

/* Some themes also highlight the avatar's nav slot with its own
   background — clear that too */
nav [class*="userSlot"], header [class*="profileWrap"],
header li:has([class*="avatar"]),
[class*="HeaderWrapper"] [class*="user"] {
  background-color: transparent !important;
}

/* Avatars sometimes carry inline background styles — catch the inner span */
[class*="avatar"] span, [class*="Avatar"] span,
[class*="userPic"] span {
  color: var(--sbi-blue) !important;
}

/* 9b. Profile dropdown / profile page — large initials tile, no fill */
[class*="profileDropdown"] [class*="avatar"],
[class*="ProfilePopup"] [class*="avatar"],
[class*="userMenu"] [class*="avatar"],
[class*="profileCard"] [class*="pic"] {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--sbi-blue) !important;
  border: 1px solid rgba(39, 142, 226, 0.3) !important;
}

/* 9c. Links inside the profile dropdown ("Change Password", etc.) */
[class*="profileDropdown"] a,
[class*="ProfilePopup"] a,
[class*="userMenu"] a,
[class*="profileCard"] a {
  color: var(--sbi-blue) !important;
}

[class*="profileDropdown"] a:hover,
[class*="ProfilePopup"] a:hover,
[class*="userMenu"] a:hover {
  color: var(--sbi-blue-hover) !important;
}

/* 9d. "View Profile" solid button in the dropdown footer */
[class*="profileDropdown"] button,
[class*="ProfilePopup"] button,
[class*="userMenu"] [class*="footer"] a:first-child,
[class*="profileFooter"] [class*="primary"],
[class*="viewProfile"] {
  background-color: var(--sbi-blue) !important;
  border-color: var(--sbi-blue) !important;
  color: var(--sbi-white) !important;
}

[class*="profileDropdown"] button:hover,
[class*="viewProfile"]:hover {
  background-color: var(--sbi-blue-hover) !important;
}

/* But keep "Logout" neutral if it shares button markup */
[class*="logout"], [class*="Logout"] {
  background-color: transparent !important;
  color: var(--sbi-navy) !important;
}

/* 9e. Generic sweep — common Zoho accent utility patterns that default to
   orange (spinners, badges, toggles, selected states, pagination) */
[class*="accent"], [class*="highlight"],
[class*="selected"] [class*="icon"],
[class*="Pagination"] [class*="active"],
[class*="badge"]:not([class*="status"]) {
  /* Only color properties — no layout side effects */
  border-color: var(--sbi-blue);
}

[class*="spinner"], [class*="Loader"] {
  border-top-color: var(--sbi-blue) !important;
  color: var(--sbi-blue) !important;
}

/* Toggles / checkboxes / radios in checked state */
input[type="checkbox"]:checked,
input[type="radio"]:checked,
[class*="toggle"][class*="on"],
[class*="Switch"][class*="checked"] {
  accent-color: var(--sbi-blue);
  background-color: var(--sbi-blue) !important;
  border-color: var(--sbi-blue) !important;
}

/* Text selection, for polish */
::selection {
  background: rgba(39, 142, 226, 0.25);
}

/* 9h. Search icons & buttons — sweep the remaining orange */

/* Magnifier icons inside any search field or toolbar (SVG or icon font) */
[class*="search"] svg, [class*="Search"] svg,
[class*="searchIcon"], [class*="SearchIcon"],
[class*="search"] [class*="icon"] {
  fill: var(--sbi-blue) !important;
  stroke: var(--sbi-blue) !important;
  color: var(--sbi-blue) !important;
}

/* Icon-font magnifiers (Zoho sometimes uses <i>/<span> glyphs) */
[class*="search"] i, [class*="Search"] i,
[class*="searchBox"] span[class*="ico"] {
  color: var(--sbi-blue) !important;
}

/* Homepage hero search button (the solid block at the end of the banner
   search bar, visible signed-out). NOTE: in some themes this is NOT a
   <button> — it's an <a>, <div>, or <span> acting as one, so we match any
   clickable/last element inside the search bar, excluding the input. */
[class*="banner"] [class*="search"] button,
[class*="Banner"] [class*="search"] button,
[class*="HeroBanner"] button,
[class*="searchBox"] button, [class*="SearchBox"] button,
[class*="searchWrapper"] button,
button[class*="searchBtn"], button[class*="SearchBtn"],
[class*="search"] button[type="submit"],
[class*="search"] [role="button"],
[class*="search"] a[class*="btn"], [class*="search"] a[class*="Btn"],
[class*="search"] [class*="btn"], [class*="search"] [class*="Btn"],
[class*="searchBox"] > :last-child:not(input),
[class*="SearchBox"] > :last-child:not(input),
[class*="searchWrapper"] > :last-child:not(input),
[class*="banner"] [class*="search"] > :last-child:not(input),
[class*="Banner"] [class*="search"] > :last-child:not(input) {
  background-color: var(--sbi-blue) !important;
  border-color: var(--sbi-blue) !important;
  color: var(--sbi-white) !important;
}

[class*="searchBox"] button:hover, [class*="searchWrapper"] button:hover,
button[class*="searchBtn"]:hover,
[class*="search"] button[type="submit"]:hover,
[class*="search"] [role="button"]:hover,
[class*="search"] [class*="btn"]:hover,
[class*="searchBox"] > :last-child:not(input):hover,
[class*="banner"] [class*="search"] > :last-child:not(input):hover {
  background-color: var(--sbi-blue-hover) !important;
}

/* If the hero button holds a magnifier glyph, keep it white on blue —
   matched to the same broadened set, and placed after the blue-icon rule
   so it wins where they overlap */
[class*="searchBox"] button svg, [class*="searchWrapper"] button svg,
button[class*="searchBtn"] svg,
[class*="search"] button[type="submit"] svg,
[class*="search"] [role="button"] svg,
[class*="search"] [class*="btn"] svg,
[class*="searchBox"] > :last-child:not(input) svg,
[class*="banner"] [class*="search"] > :last-child:not(input) svg,
[class*="searchBox"] > :last-child:not(input) i,
[class*="banner"] [class*="search"] > :last-child:not(input) i,
[class*="search"] [role="button"] i,
[class*="search"] [class*="btn"] i {
  fill: var(--sbi-white) !important;
  stroke: var(--sbi-white) !important;
  color: var(--sbi-white) !important;
}

/* 9i. Zoho brand-color utility classes — the root cause of the orange.
   Zoho paints the theme's brand color via commonStyle__zt3Brand* utility
   classes (confirmed via the hero search button markup). Overriding the
   utilities recolors every element that uses them in one shot. */
[class*="zt3BrandBg"] {
  background-color: var(--sbi-blue) !important;
}

[class*="zt3BrandBg"]:hover {
  background-color: var(--sbi-blue-hover) !important;
}

[class*="zt3BrandColor"], [class*="zt3BrandText"] {
  color: var(--sbi-blue) !important;
  fill: var(--sbi-blue) !important;
}

/* The bare text-color variant (class="...zt3Brand", e.g. sign-in page
   links like "Reset" / "Login here"). Matches the whole zt3Brand* family
   by prefix, but excludes the Bg variant so solid-fill elements keep
   their white text. */
[class*="zt3Brand"]:not([class*="zt3BrandBg"]) {
  color: var(--sbi-blue) !important;
}

[class*="zt3Brand"]:not([class*="zt3BrandBg"]):hover {
  color: var(--sbi-blue-hover) !important;
}

[class*="zt3BrandBorder"] {
  border-color: var(--sbi-blue) !important;
}

/* The hero search button specifically, by its stable data-id */
[data-id="searchButton"] {
  background-color: var(--sbi-blue) !important;
}

[data-id="searchButton"]:hover {
  background-color: var(--sbi-blue-hover) !important;
}

/* 9j. Sign-in page button + search button cleanup */

/* "Next" / sign-in form buttons render in Zoho's default royal blue,
   not the theme brand color — match them to brand blue */
[class*="Signin"] button, [class*="signin"] button,
[class*="Signup"] button, [class*="signup"] button,
[class*="Signin"] [class*="btn"], [class*="signin"] [class*="btn"],
[data-id="nextButton"], [data-id="signinButton"], [data-id="signInBtn"] {
  background-color: var(--sbi-blue) !important;
  border-color: var(--sbi-blue) !important;
  color: var(--sbi-white) !important;
}

[class*="Signin"] button:hover, [class*="signin"] button:hover,
[class*="Signup"] button:hover,
[data-id="nextButton"]:hover, [data-id="signinButton"]:hover {
  background-color: var(--sbi-blue-hover) !important;
}

/* Search button glyph cleanup: our earlier sweep forced `stroke` onto the
   magnifier, which adds a heavy outline to Zoho's fill-based icon and
   makes it look odd. Fill-only, no stroke. (Placed last so it wins.) */
[data-id="searchButton"] svg,
[data-id="searchButton"] use,
[class*="SearchContainer__searchIcon"] svg {
  fill: var(--sbi-white) !important;
  color: var(--sbi-white) !important;
  stroke: none !important;
}

/* Fit the search button into the input's rounded corner instead of
   sitting as a sharp square */
[data-id="searchButton"],
[class*="SearchContainer__searchIcon"] {
  border-radius: 0 var(--sbi-radius) var(--sbi-radius) 0 !important;
}

/* 9k. Profile page — active tabs & sidebar nav (My Area) */

/* Filter tabs ("Articles / Categories / Sections") — active state */
[class*="FilterTabs__activeFilter"],
[class*="activeFilter"],
[class*="FilterTabs"] [class*="active"] {
  color: var(--sbi-blue) !important;
  border-bottom-color: var(--sbi-blue) !important;
}

/* Sidebar nav (Watchlist / Knowledge Base / Users / Manage Profile) —
   active & hover text */
[class*="ProfileTabs"] [class*="active"] [class*="tabName"],
[class*="ProfileTabs"] [class*="Active"] [class*="tabName"],
[class*="ProfileTabs"] [class*="selected"] [class*="tabName"],
[class*="ProfileTabs__tabName"]:hover,
[class*="ProfileTabs"] li:hover [class*="tabName"],
[class*="ProfileTabs"] a[class*="active"],
[class*="ProfileTabs"] li[class*="active"] {
  color: var(--sbi-blue) !important;
}

/* Their icons (binoculars, gear, etc.) — these are outline-style, so we
   set color + stroke but deliberately NOT fill, to avoid turning outline
   icons into solid blobs */
[class*="ProfileTabs"] [class*="active"] svg,
[class*="ProfileTabs"] [class*="selected"] svg,
[class*="ProfileTabs"] li:hover svg {
  color: var(--sbi-blue) !important;
  stroke: var(--sbi-blue) !important;
}

/* ==========================================================================
   End — Swish BI Help Center theme
   ========================================================================== */