@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&family=IBM+Plex+Serif:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css');


:root {
    --ls-primary: #14ae5c; /* Green */
    --ls-accent: #8146F6; /* Violet */
    --ls-body-text: #1e1e1e;
  
    --ls-border-color: #DDDEE8;
    
    --spacer-20: 20px;
    --spacer-30: 30px;
    --spacer-40: 40px;
    --spacer-50: 50px;
    --spacer-80: 80px;
}

@media (max-width: 991px) {
    :root {
        --spacer-30: 24px;
        --spacer-40: 30px;
        --spacer-50: 30px;
        --spacer-80: 40px;
    }
}

@media (max-width: 677px) {
    :root {
        --spacer-40: 20px;
        --spacer-50: 20px;
        --spacer-80: 30px;
    }
}

/* GLOBAL STYLE */
body,
.html,
portal b {
    font-family: "IBM Plex Sans", sans-serif;
}

.hidden {
  display: none;
}

.Header__container,.Layout__oneColumn, .Layout__twoColumn, .Layout__twoColumn2, .Layout__twoColumnReverse,.Footer__container2,.container,
.AppContainer__container{
    max-width: 1260px;
}

.AppContainer__container {
    padding-top: 15px;
    padding-bottom: 15px
}

@media (max-width: 769px) {
   .AppContainer__container {
        align-items: flex-start;
       justify-content: flex-start;
    }
    
    .AppContainer__breadCrumbs .SearchContainer__searchBox {
        margin-left: 0
    }
}

.ContentBox__boxThree {
    padding-bottom: 0
}

@media (max-width: 768px) {
    #ticket_module {
        padding-top: var(--spacer-20);
    }
}

/* HEADER
--------------------------- */
#headerContainer {
    padding-bottom: 60px;
}

.home #headerContainer {
    padding-top: 84px;
}

@media (max-width: 768px) {
    .home #headerContainer {
        padding-bottom: var(--spacer-80);
    }
}

.Header__wrap {
    background-color: #fff;
}

div#navBarContainer .Header__name {
    color: #5E6372;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #DDDEE8;
  opacity: 0.8;
}

@media (max-width: 480px) {
    div#navBarContainer .Header__name {
        display: none;   
    }
}

.Header__wrap a {
    color: var(--ls-body-text);
}

.Header__wrap a:hover,
.Header__wrap a:focus,
.Header__wrap a:active {
    color: var(--ls-primary);
    outline: none;
}

.Header_menuAction .btn-signup:hover {
    box-shadow: none;
    color: #fff;
}

/* CONTAINER 
----------------------------------*/
#mainContainer {
    background: #fff;
}

#mainContainer #layoutContainer {
    background: #fff;
    padding-bottom: var(--spacer-80);
    padding-top: var(--spacer-80);
}

.Footer__footerBg {
  display: none;
}

/*Breadcrumb*/
.commonStyle__zt3breadCrumbBg {
    background: #14ae5c;
}

.commonStyle__zt3breadCrumbText {
    color: #ffffff;
}

.BreadCrumbs__breadcrumbsView ul li:last-child {
    color: #fff;
}

.BreadCrumbs__breadcrumbsView ul li + li:before {
    color: #fff;
}

.commonStyle__zt3breadCrumbText:hover {
    color: #fff;
    opacity: 0.8;
}

.commonStyle__zt3BrandBg {
    background-color: #14ae5c;
}

#navBarContainer .Header__name {
    max-width: none;
    min-width: 7rem;
    flex: 1;
    color: #14ae5c;
}


/*Home*/
.Header__tabsTab:hover, .LoginDetail__signin:hover, .LoginDetail__signup:hover, .Header__tabsTab.Header__active, .LoginDetail__signin.LoginDetail__active, .LoginDetail__signup.LoginDetail__active {
    border-bottom-color: #14ae5c;
}

.commonStyle__zt3BrandBg {
    background-color: #14ae5c;;
}

.themeLink,
.Icon__brand,
.Icon__textGreyShade35 {
    color: #14ae5c;
}

.LoginDetail__tabLink,
.Header__tabs__link {
    color: #1e1e1e;
    letter-spacing: 0;
}

.ContentList__listLink {
    font-weight: 400;
}

ContentList__listLink:hover {
    color: var(--ls-primary);
}

.LoginDetail__signup, .LoginDetail__signin,
.Header__tabsTab {
    line-height: 2.5;
}

#headerContainer {
    background: #fff
}

.Header__homeContent .Header__searchSection {
    padding-bottom: 0;
    padding-top: 60px;
}

@media (max-width: 768px) {
    .Header__homeContent .Header__searchSection {
        padding-top: var(--spacer-80);
    }
}

#headerContent h1.Header__searchTitle {
    color: #000;
    text-shadow: none;
    margin-bottom: 10px;
    margin-top:  0;
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
    font-size: 56px;
    letter-spacing: 0;
    line-height: 1.2;
}

@media (max-width: 767px) {
    #headerContent h1.Header__searchTitle {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    #headerContent h1.Header__searchTitle {
        font-size: 28px;
    }
}

.Header__description {
    color: #5E6372;
    margin-top: 0;
    margin-bottom: var(--spacer-30);
    font-size: 20px;
}

@media (max-width: 480px) {
    .Header__description {
        font-size: 16px;
    }
}

.Input__headerSearch {
    border: 1px solid #000;
    border-right: 0;
    font-size: 16px;
    padding-left: 20px;
}

.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
    background-color: #14ae5c;
    height: 57px;
    padding: 1rem 1rem 0;
}

@media (min-width: 480px) {
    div.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter {
        padding-left: 110px;
    }

    div.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter .ContentBox__indexIcon {
        position: absolute;
        left:  var(--spacer-30);
        top: var(--spacer-30);
    }
}


@media (max-width: 768px) {
    .AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter {
        padding:  20px;
    }

    .WidgetContainer__contentList+.WidgetContainer__contentList {
        margin-top: 30px;
    }
}

.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter .ContentBox__headerMid {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter .ContentBox__headerMid {
        font-size: 20px;
    }
}

.CustomWidget__customDescription {
    padding-left: 15px;
    padding-right: 15px;
}

.CustomWidget__customDescription br {
    display: none;
}

.CustomWidget__customDescription hr {
    border-color: #14ae5c!important;
    margin-bottom: 30px;
}

@media (max-width:  480px) {
    .CustomWidget__customDescription hr {
        margin-bottom: 0;
    }
}

.home .AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter p {
    color: #5E6372;
    font-size: 15px;
    margin:  0;
}

.home .AppContainer__homePage .WidgetContainer__list .WidgetContainer__contentList:nth-child(4),
.home .AppContainer__homePage  .WidgetContainer__list .WidgetContainer__contentList:nth-child(5) {
    padding-left: 15px;
    margin-top: 1.5rem;
}

@media (min-width:  767px) {
    .home .AppContainer__homePage .WidgetContainer__list .WidgetContainer__contentList:nth-child(4),
    .home .AppContainer__homePage  .WidgetContainer__list .WidgetContainer__contentList:nth-child(5) {
        margin-top: 2.5rem;
        float: left;
        width: 50%;      
    }
}


.Icon__small {
    height: 1rem;
    width: 1rem;
}

.AppContainer__backToTop {
    border-radius: 4px;
    line-height: 45px;
    height: 45px;
    width: 45px;
}

.Footer__footerCopyrigt {
    background-color: #003e24;
    font-size:13px;
}

/*KB*/
.kbLanding .Layout__layout1 .ModuleCont__moduleCont .ContentBox__alignCenter p {
    color: #5E6372;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
}
.kbLanding .Layout__layout1 .WidgetContainer__list .WidgetContainer__contentList:nth-child(2),
.kbLanding .Layout__layout1  .WidgetContainer__list .WidgetContainer__contentList:nth-child(3) {
    padding-left: 15px;
}

@media (min-width:  767px) {
    .kbLanding .Layout__layout1 .WidgetContainer__list .WidgetContainer__contentList:nth-child(2),
    .kbLanding .Layout__layout1  .WidgetContainer__list .WidgetContainer__contentList:nth-child(3) {
        margin-top: 0.5rem;
        float: left;
        width: 50%;
    }
}

.Layout__layout1 .KbCategoryContainer__row .commonStyle__flex {
    flex-direction: column;
}

.Layout__layout1 .KbCategory__boxInner {
    padding:  30px;
}
.Layout__layout1 .MediaObject__mediaFigure {
    margin-bottom: 20px;
}

.KbCategory__topic a {
    font-family: IBM Plex serif, serif;
}

.KbCategory__topicContent {
    color: #5E6372;
    margin: 5px 0 0;
    line-height: 1.25;
    font-size: 15px;
}

/*Detail*/
.commonStyle__detailHeader {
    font-family: IBM Plex serif, serif;
    font-weight: 600;
}

.TOCContainer__tocContainer {
    background: #EEEFF7;
    border:  0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 0;
}

.TOCContainer__tocContainer a {
    color: #5E6372;
}

.TOCContainer__tocContainer a:hover {
    color: var(--ls-primary);
}

.Menu__arrowToggle {
    top: 8px;
}

.TOCContainer__tocHeading {
    font-family: IBM Plex serif, serif;
    font-weight: 600;
    margin-left: 15px;
}

.ListHeader__header1 {
    font-family: IBM Plex serif, serif;
    color: #1E1E1E;
}

.Menu__menuItem {
    padding: 3px 0;
}

.commonStyle__zt3Link {
    color: #1E1E1E;
}

.KbDetailLtContainer__articleContent a,
.commonStyle__zt3Brand,
.commonStyle__zt3Link:hover,
.themeLink:hover,
.commonStyle__zt3LinkActive,
.commonStyle__zt3bdrLine,
.DepartmentList__forums {
    color: var(--ls-primary);
}

.KbDetailRtContainer__rightPanelDetail .ListHeader__listIcon1 {
    display: none;
}

/*Subcategory*/
.KbSubCategoryContainer__row {

}
.WidgetContainer__boxSplit .ContentList__subCategory {
    border-radius: 4px;
    background: #F9F9FB;
    padding: var(--spacer-30);
}

.ContentList__subCategory .ContentList__documentIcon {
    margin-left: 0;
    margin-right: 10px;
}

.ContentList__subCategory .ContentList__topicContent {
    margin-left: 30px;
}

.ListHeader__headerType1 .ListHeader__listIcon2,
.ListHeader__headerType1 .ListHeader__kbSubcategoryImg {
    margin-top: 0;
}

.ListHeader__description {
    margin-top: 0;
}

.ContentList__subCategory .ContentList__moreOption {
    display: block;
    margin-left: 0;
    text-transform: uppercase;
}

.Header_menuAction .btn {
    display: inline-flex;
    border: 2px solid transparent;
    border-radius: 4px;
    height: 44px;
    padding: 0 8px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

.Header_menuAction .btn:hover,
.Header_menuAction .btn:focus,
.Header_menuAction .btn:active {
}

.Header_menuAction .btn-login {
    color: #1e1e1e;
    border: 2px solid #1e1e1e;
}

div.Header_menuAction .btn-signup {
    background: var(--ls-primary);
    color: #fff;
}

#navBarContainer .Header__name {
   flex: inherit;
}

#navBarContainer {
    align-items: center;
    display: flex;
    min-height: 80px;
    justify-content: space-between;
}

.Header__logo {
    display: flex;
    align-items: center;
}

.LoginDetail__tabLink, .Header__tabs__link {
    font-weight: 500;
}

.Header__tabsTab:hover, .LoginDetail__signin:hover, .LoginDetail__signup:hover, .Header__tabsTab.Header__active, .LoginDetail__signin.LoginDetail__active, .LoginDetail__signup.LoginDetail__active {
    border-bottom-color: #14AE5C;
}

.Header__menuList .commonStyle__positionRel use {
    fill: #14AE5C;
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .show-mobile {
        display: inline;
    }
    
    .show-desktop {
        display: none;
    }
}

@media (max-width: 1024px) {
    .Header__menuTab {
        display: block;
    }
    
    .CustomizeContainer__CustomizeOption {
        display: inline-block;
    }
    
    .Header__menuList {
        display: inline-block;
    }
    
    #portal_tabSolutions + #portal_tabSolutions {
        display: none;
    }
    
    div.Header__menuicon {
        display: none!important;
    }
}

@media (max-width: 767px) {
    #userPreference {
        //display: none;
    }
    
    .Header__menuTab {
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.1);
        position: fixed;
        display: flex;
        justify-content: center;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    
    .Header__header {
        z-index: 99;   
    }
}

.Header__wrap {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#headerContainer {
    padding-top: 20px;
}


  .vip-banner {
    background: #FEF3E2;
    border-radius: 8px;
    box-shadow: 4px 4px 0 0 #FFBA68;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: var(--spacer-30);
  }

  .vip-banner__icon {
    background: #FFF;
    border-radius: 6px;
    color: #FFBA68;
    font-size: 36px;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 10px;
  }

  .vip-banner__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .vip-banner__heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
  }

  .vip-banner__desc {
    font-size: 16px;
    color: #515567;
    line-height: 1.55;
    margin: 0;
  }

  .vip-banner__cta {
    flex-shrink: 0;    
    background: #FFBA68;
    color: #1E1E1E;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 20px;
    letter-spacing: -0.21px;
  }

  @media (max-width: 600px) {
    .vip-banner {
      flex-wrap: wrap;
    }
    
    .vip-banner__heading {
      font-size: 20px;
    }
    
    .vip-banner__desc {
      font-size: 16px;
    }
    
    .vip-banner__cta {
      text-align: center;
    }
  }

  @media (max-width: 567px) {
    .vip-banner {
      flex-direction: column;
      text-align: center;
    }

    .vip-banner__cta {
      display: flex;
    }
  }

  .ContentBox__boxInnerHome .commonStyle__tAlignCenter {
    background: #eeeff7;
    border-radius: 8px;
    box-shadow: 4px 4px 0 0 rgba(66, 0, 255, 0.20);
  }

/* ===== App look (LimeSurvey 7.3), 2026-09-25 =====
   Colors, fonts and cards of the LimeSurvey app. Remove this block to go back. */

/* Page background */
body,
body.body,
#headerContainer,
.Layout__oneColumn,
.Layout__twoColumn {
    background: #EEEFF7;
}

/* Fonts: IBM Plex Sans everywhere, like the app */
h1, h2, h3, h4, h5, h6,
h1.Header__searchTitle,
.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter .ContentBox__headerMid,
.KbCategory__topic a,
.TOCContainer__tocHeading,
.ListHeader__header1 {
    font-family: "IBM Plex Sans", sans-serif;
}

h1.Header__searchTitle,
.commonStyle__detailHeader {
    color: #1E1E1E;
}

.KbDetailLtContainer__articleContent {
    color: #1E1E1E;
}

/* Top bar */
#navBarContainer .Header__name,
.Header__wrap .Header__tabs__link {
}

.Header__tabsTab:hover, .LoginDetail__signin:hover, .LoginDetail__signup:hover, .Header__tabsTab.Header__active, .LoginDetail__signin.LoginDetail__active, .LoginDetail__signup.LoginDetail__active {
    border-bottom-color: #FFFFFF;
}

.Header__menuList .commonStyle__positionRel use,
.CustomizeContainer__aPlus,
.CustomizeContainer__aPlus svg {
    color: #FFFFFF;
    fill: #FFFFFF;
}

.Header_menuAction .btn-login {
  border: 0;
  border-radius: 0;
  font-size: 16px;
}

.Header_menuAction .btn-signup {
    background: #8146F6;
    color: #fff;
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 767px) {
    .Header__menuTab {
        --ls-body-text: #fff;
        background: #333641;
        border-top: 0;
    }
}

/* Breadcrumb and search row */
.commonStyle__zt3breadCrumbBg {
    background: #EEEFF7;
    border-bottom: 1px solid #DCDEEA;
    font-weight: 500;
}

.commonStyle__zt3breadCrumbText,
.commonStyle__zt3breadCrumbText:hover,
.BreadCrumbs__breadcrumbsView ul li:last-child,
.BreadCrumbs__breadcrumbsView ul li + li:before {
    color: #333641;
}

.BreadCrumbs__breadcrumbsView ul li+li:before {
    content: '/';
    margin-right: 6px
}

.BreadCrumbs__breadcrumbsView li span {
    color: var(--ls-primary);
}

/* When the row sticks to the top while scrolling, it takes the look of the top bar */
@media (max-width: 767px) {
    .ScrollSticky__type1 {
        z-index: 99;
    }
}

.ScrollSticky__type1 .commonStyle__zt3breadCrumbBg {
    background: #333641;
    border-bottom: 0;
}

.ScrollSticky__type1 .commonStyle__zt3breadCrumbText,
.ScrollSticky__type1 .commonStyle__zt3breadCrumbText:hover,
.ScrollSticky__type1 .BreadCrumbs__breadcrumbsView ul li:last-child,
.ScrollSticky__type1 .BreadCrumbs__breadcrumbsView ul li + li:before {
    color: #FFFFFF;
}

/* Accent: purple for actions, dark green for links */
.commonStyle__zt3BrandBg,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
    background-color: #8146F6;
}

.themeLink,
.Icon__brand,
.Icon__textGreyShade35,
.KbDetailLtContainer__articleContent a,
.commonStyle__zt3Brand,
.commonStyle__zt3Link:hover,
.themeLink:hover,
.commonStyle__zt3LinkActive,
.commonStyle__zt3bdrLine,
.DepartmentList__forums {
    color: var(--ls-primary);
}

.commonStyle__zt3BrandBorder {
    border-color: #8146F6;
}

.Button__primaryBorder.commonStyle__zt3Brand {
    color: #8146F6;
    width: 100%;
    height: 46px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.Button__primaryBorder.commonStyle__zt3Brand:hover {
    background: #8146F6;
    color: #fff;
}

.KbDetailRtContainer__subscribeDescription {
    text-align: center;
    color: #5E6372;
}

.CustomWidget__customDescription hr {
    border-color: #DCDEEA!important;
}

.Input__headerSearch {
    border-color: #DCDEEA;
    height: 57px;
}

/* Cards: white, 4px corners, soft shadow */
.KbSubCategoryContainer__contentList {
    margin-right: 0;
}
@media (min-width: 991px) {
    .KbSubCategoryContainer__contentList {
        width: 33.3333%;
    }
}
.KbCategory__box,
.WidgetContainer__boxSplit .ContentList__subCategory,
.ContentBox__boxInnerHome .commonStyle__tAlignCenter,
.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter {
    background: #FFFFFF;
    border: 1px solid var(--ls-border-color);
    border-radius: 8px;
    box-shadow: none;
    padding:  var(--spacer-30);
    position: relative;
    text-align: left;
    height: 100%;
}

.ContentList__subCategory .ContentList__moreOption {
    border-top: 1px solid var(--ls-border-color);
    padding-top: var(--spacer-20);
    margin-top: var(--spacer-20);
}

.ViewMore__viewmore {
    margin: 0;
    text-transform: capitalize;
}

.KbSubCategoryContainer__contentList .ListHeader__headerType1 {
    border-bottom: 1px solid var(--ls-border-color);
    margin-bottom: var(--spacer-20);
    padding-bottom: var(--spacer-20);var(--spacer-20);
}

.ListHeader__description {
    color: #5E6372;
}

.KbDetailRtContainer__rightPanelDetail {
    background: #FFFFFF;
    border: 1px solid var(--ls-border-color);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    padding: var(--spacer-30);
}

.KbDetailRtContainer__rightPanelDetail .ListHeader__listHeader1 {
    border-bottom: 1px solid var(--ls-border-color);
    margin-bottom: var(--spacer-20);
}

.KbDetailRtContainer__rightPanelDetail .ListHeader__header1 {
    font-size: 18px;
    letter-spacing: 0;
}

.KbDetailRtContainer__rightPanelDetail .ContentList__moreOption {
    margin-top: var(--spacer-20);
}

.commonStyle__widgetRight {
    padding: 0;
}

.KbDetailLtContainer__posRel {
    padding: 0;
    box-shadow: none;
}

.Footer__footerCopyrigt {
    background-color: #333641;
}


/* ===== Design pass 2 (LimeSurvey palette, Remix icons, reading progress), 2026-09-25 =====
   Colors from the LimeSurvey palette. Icons: Remix Icon (remixicon.com), Remix Icon License v1.0.
   Get started for free and the Priority E-Mail Support banner keep their earlier look (Jory, 2026-09-25).
   Remove this block to go back to the app look of 2026-09-25. */

/* Icons: Zoho sprite icons swapped for Remix icons, drawn with a mask in the current color */
svg:has(> use[*|href="#pdfDownload"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4H15V8H19V20H5V4ZM3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.4999 7.5C10.4999 9.07749 10.0442 10.9373 9.27493 12.6534C8.50287 14.3757 7.46143 15.8502 6.37524 16.7191L7.55464 18.3321C10.4821 16.3804 13.7233 15.0421 16.8585 15.49L17.3162 13.5513C14.6435 12.6604 12.4999 9.98994 12.4999 7.5H10.4999ZM11.0999 13.4716C11.3673 12.8752 11.6042 12.2563 11.8037 11.6285C12.2753 12.3531 12.8553 13.0182 13.5101 13.5953C12.5283 13.7711 11.5665 14.0596 10.6352 14.4276C10.7999 14.1143 10.9551 13.7948 11.0999 13.4716Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#print"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 2C17.5523 2 18 2.44772 18 3V7H21C21.5523 7 22 7.44772 22 8V18C22 18.5523 21.5523 19 21 19H18V21C18 21.5523 17.5523 22 17 22H7C6.44772 22 6 21.5523 6 21V19H3C2.44772 19 2 18.5523 2 18V8C2 7.44772 2.44772 7 3 7H6V3C6 2.44772 6.44772 2 7 2H17ZM16 17H8V20H16V17ZM20 9H4V17H6V16C6 15.4477 6.44772 15 7 15H17C17.5523 15 18 15.4477 18 16V17H20V9ZM8 10V12H5V10H8ZM16 4H8V7H16V4Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#readerViewRight"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM11 5H4V19H11V5ZM13 5V19H20V5H13ZM14 7H19V9H14V7ZM14 10H19V12H14V10Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#readerViewLeft"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM11 5H4V19H11V5ZM13 5V19H20V5H13ZM14 7H19V9H14V7ZM14 10H19V12H14V10Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#minus"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11V13H19V11H5Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#plus"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#like"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5998 8.00033H21C22.1046 8.00033 23 8.89576 23 10.0003V12.1047C23 12.3659 22.9488 12.6246 22.8494 12.8662L19.755 20.3811C19.6007 20.7558 19.2355 21.0003 18.8303 21.0003H2C1.44772 21.0003 1 20.5526 1 20.0003V10.0003C1 9.44804 1.44772 9.00033 2 9.00033H5.48184C5.80677 9.00033 6.11143 8.84246 6.29881 8.57701L11.7522 0.851355C11.8947 0.649486 12.1633 0.581978 12.3843 0.692483L14.1984 1.59951C15.25 2.12534 15.7931 3.31292 15.5031 4.45235L14.5998 8.00033ZM7 10.5878V19.0003H18.1606L21 12.1047V10.0003H14.5998C13.2951 10.0003 12.3398 8.77128 12.6616 7.50691L13.5649 3.95894C13.6229 3.73105 13.5143 3.49353 13.3039 3.38837L12.6428 3.0578L7.93275 9.73038C7.68285 10.0844 7.36341 10.3746 7 10.5878ZM5 11.0003H3V19.0003H5V11.0003Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#facebookNew"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.001 19.9381C16.9473 19.446 20.001 16.0796 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 16.0796 7.05467 19.446 11.001 19.9381V14H9.00098V12H11.001V10.3458C11.001 9.00855 11.1402 8.52362 11.4017 8.03473C11.6631 7.54584 12.0468 7.16216 12.5357 6.9007C12.9184 6.69604 13.3931 6.57252 14.2227 6.51954C14.5519 6.49851 14.9781 6.52533 15.501 6.6V8.5H15.001C14.0837 8.5 13.7052 8.54332 13.4789 8.66433C13.3386 8.73939 13.2404 8.83758 13.1653 8.97793C13.0443 9.20418 13.001 9.42853 13.001 10.3458V12H15.501L15.001 14H13.001V19.9381ZM12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#twitterNew"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#linkedin"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00098 3H20.001C20.5533 3 21.001 3.44772 21.001 4V20C21.001 20.5523 20.5533 21 20.001 21H4.00098C3.44869 21 3.00098 20.5523 3.00098 20V4C3.00098 3.44772 3.44869 3 4.00098 3ZM5.00098 5V19H19.001V5H5.00098ZM7.50098 9C6.67255 9 6.00098 8.32843 6.00098 7.5C6.00098 6.67157 6.67255 6 7.50098 6C8.3294 6 9.00098 6.67157 9.00098 7.5C9.00098 8.32843 8.3294 9 7.50098 9ZM6.50098 10H8.50098V17.5H6.50098V10ZM12.001 10.4295C12.5854 9.86534 13.2665 9.5 14.001 9.5C16.072 9.5 17.501 11.1789 17.501 13.25V17.5H15.501V13.25C15.501 12.2835 14.7175 11.5 13.751 11.5C12.7845 11.5 12.001 12.2835 12.001 13.25V17.5H10.001V10H12.001V10.4295Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#briefCase"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#document"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#Capa2"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 21V23H11V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H9C10.1947 3 11.2671 3.52375 12 4.35418C12.7329 3.52375 13.8053 3 15 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H13ZM20 19V5H15C13.8954 5 13 5.89543 13 7V19H20ZM11 19V7C11 5.89543 10.1046 5 9 5H4V19H11Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#Capa3"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0049 2.99979C21.5572 2.99979 22.0049 3.4475 22.0049 3.99979V9.49979C20.6242 9.49979 19.5049 10.6191 19.5049 11.9998C19.5049 13.3805 20.6242 14.4998 22.0049 14.4998V19.9998C22.0049 20.5521 21.5572 20.9998 21.0049 20.9998H3.00488C2.4526 20.9998 2.00488 20.5521 2.00488 19.9998V14.4998C3.38559 14.4998 4.50488 13.3805 4.50488 11.9998C4.50488 10.6191 3.38559 9.49979 2.00488 9.49979V3.99979C2.00488 3.4475 2.4526 2.99979 3.00488 2.99979H21.0049ZM20.0049 4.99979H4.00488V7.96779L4.16077 8.04886C5.49935 8.78084 6.42516 10.1733 6.49998 11.788L6.50488 11.9998C6.50488 13.704 5.55755 15.1869 4.16077 15.9507L4.00488 16.0308V18.9998H20.0049V16.0308L19.849 15.9507C18.5104 15.2187 17.5846 13.8263 17.5098 12.2116L17.5049 11.9998C17.5049 10.2956 18.4522 8.81266 19.849 8.04886L20.0049 7.96779V4.99979ZM16.0049 8.99979V14.9998H8.00488V8.99979H16.0049Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#search"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#arrowRightThick"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#threedot"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#tickCircle"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#accessibility_settings"]) {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 8.5C12.8284 8.5 13.5 7.82843 13.5 7C13.5 6.17157 12.8284 5.5 12 5.5C11.1716 5.5 10.5 6.17157 10.5 7C10.5 7.82843 11.1716 8.5 12 8.5ZM12 9.49988C10.4427 9.49988 8.82151 9.14306 7.37106 8.57129L6.62891 10.4285C7.70479 10.8579 8.8573 11.1468 9.99989 11.3301C9.99989 12.2004 10.0849 13.0939 9.68317 13.8974L8.10546 17.0528L9.89432 17.9472L11.4471 14.8416C11.5518 14.6322 11.7658 14.5 11.9999 14.5C12.234 14.5 12.448 14.6323 12.5527 14.8416L14.1055 17.9472L15.8943 17.0528L14.3166 13.8974C13.9149 13.0939 13.9999 12.2004 13.9999 11.3301C15.1409 11.1471 16.2818 10.8534 17.359 10.4332C17.3843 10.4233 16.6291 8.57118 16.6264 8.57225C15.1728 9.13901 13.5595 9.49988 12 9.49988Z'/%3E%3C/svg%3E");
}

svg:has(> use[*|href="#pdfDownload"]),
svg:has(> use[*|href="#print"]),
svg:has(> use[*|href="#readerViewRight"]),
svg:has(> use[*|href="#readerViewLeft"]),
svg:has(> use[*|href="#minus"]),
svg:has(> use[*|href="#plus"]),
svg:has(> use[*|href="#like"]),
svg:has(> use[*|href="#facebookNew"]),
svg:has(> use[*|href="#twitterNew"]),
svg:has(> use[*|href="#linkedin"]),
svg:has(> use[*|href="#briefCase"]),
svg:has(> use[*|href="#document"]),
svg:has(> use[*|href="#Capa2"]),
svg:has(> use[*|href="#Capa3"]),
svg:has(> use[*|href="#search"]),
svg:has(> use[*|href="#arrowRightThick"]),
svg:has(> use[*|href="#threedot"]),
svg:has(> use[*|href="#tickCircle"]),
svg:has(> use[*|href="#accessibility_settings"]) {
    -webkit-mask: var(--ls-icon) center / contain no-repeat;
    mask: var(--ls-icon) center / contain no-repeat;
    background-color: currentColor;
}

svg:has(> use[*|href="#pdfDownload"]) > use,
svg:has(> use[*|href="#print"]) > use,
svg:has(> use[*|href="#readerViewRight"]) > use,
svg:has(> use[*|href="#readerViewLeft"]) > use,
svg:has(> use[*|href="#minus"]) > use,
svg:has(> use[*|href="#plus"]) > use,
svg:has(> use[*|href="#like"]) > use,
svg:has(> use[*|href="#facebookNew"]) > use,
svg:has(> use[*|href="#twitterNew"]) > use,
svg:has(> use[*|href="#linkedin"]) > use,
svg:has(> use[*|href="#briefCase"]) > use,
svg:has(> use[*|href="#document"]) > use,
svg:has(> use[*|href="#Capa2"]) > use,
svg:has(> use[*|href="#Capa3"]) > use,
svg:has(> use[*|href="#search"]) > use,
svg:has(> use[*|href="#arrowRightThick"]) > use,
svg:has(> use[*|href="#threedot"]) > use,
svg:has(> use[*|href="#tickCircle"]) > use,
svg:has(> use[*|href="#accessibility_settings"]) > use {
    visibility: hidden;
}

/* Home: Popular Articles and Recent Articles get their own icons */
.AppContainer__homePage .WidgetContainer__list > li:nth-child(3) .ListHeader__listIcon2 svg {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 23C16.1421 23 19.5 19.6421 19.5 15.5C19.5 14.6345 19.2697 13.8032 19 13.0296C17.3333 14.6765 16.0667 15.5 15.2 15.5C19.1954 8.5 17 5.5 11 1.5C11.5 6.49951 8.20403 8.77375 6.86179 10.0366C5.40786 11.4045 4.5 13.3462 4.5 15.5C4.5 19.6421 7.85786 23 12 23ZM12.7094 5.23498C15.9511 7.98528 15.9666 10.1223 13.463 14.5086C12.702 15.8419 13.6648 17.5 15.2 17.5C15.8884 17.5 16.5841 17.2992 17.3189 16.9051C16.6979 19.262 14.5519 21 12 21C8.96243 21 6.5 18.5376 6.5 15.5C6.5 13.9608 7.13279 12.5276 8.23225 11.4932C8.35826 11.3747 8.99749 10.8081 9.02477 10.7836C9.44862 10.4021 9.7978 10.0663 10.1429 9.69677C11.3733 8.37932 12.2571 6.91631 12.7094 5.23498Z'/%3E%3C/svg%3E");
}

.AppContainer__homePage .WidgetContainer__list > li:nth-child(4) .ListHeader__listIcon2 svg {
    --ls-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z'/%3E%3C/svg%3E");
}

/* Icon colors */
.KbDetailLtContainer__pdfView svg,
.KbDetailLtContainer__printView svg,
.KbDetailLtContainer__readerView svg,
.ContentList__documentIcon svg,
[class*="TOCContainer__arrowRot"] svg,
.KbDetailLtContainer__thumsup svg,
.KbDetailLtContainer__disLike svg,
.KbDetailLtContainer__socialIcon svg,
.DottedMenuPopup__dottedIcon svg {
    color: #6E748C;
    transition: color 0.15s ease;
}

.KbDetailLtContainer__pdfView:hover svg,
.KbDetailLtContainer__printView:hover svg,
.KbDetailLtContainer__readerView:hover svg,
.DottedMenuPopup__dottedIcon:hover svg {
    color: #8146F6;
}

.KbDetailLtContainer__thumsup:hover svg {
    color: #14AE5C;
}

.KbDetailLtContainer__disLike:hover svg {
    color: #FF515F;
}

.KbDetailLtContainer__socialIcon:hover svg {
    color: #1E1E1E;
}

.ListHeader__listIcon1 svg,
.ListHeader__listIcon2 svg {
    color: #8146F6;
}

/* Top bar: a light hover on Log in. Get started for free keeps the purple of the app look. */
.Header_menuAction .btn-login:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Search button and back to top: Active Green with a dark icon, Lime Green on hover */
.commonStyle__zt3BrandBg,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
    background-color: #14AE5C;
    transition: background-color 0.15s ease;
}

.commonStyle__zt3BrandBg:hover,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg:hover {
    background-color: #7FF409;
}

.commonStyle__zt3BrandBg svg {
    color: #fff;
    fill: #fff;
}

/* Top bar: the page you are on is marked in Lime Green */
.Header__tabsTab.Header__active,
.Header__tabsTab.Header__active:hover {
    border-bottom-color: #7FF409;
}

/* Links in articles: underlined, so they don't depend on color alone */
.KbDetailLtContainer__articleContent a {
    text-decoration: underline;
    text-decoration-color: rgba(20, 174, 92, 0.5);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.KbDetailLtContainer__articleContent a:hover {
    text-decoration-color: #14AE5C;
    text-decoration-thickness: 2px;
}

/* Inline code */
.KbDetailLtContainer__articleContent code {
    background: #EEEFF7;
    border-radius: 4px;
    color: #1E1E1E;
    padding: 1px 5px;
}

.KbDetailLtContainer__articleContent pre code {
    background: transparent;
    padding: 0;
}

/* Focus and selection: the purple of the app's focus state */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(123, 97, 255, 0.9);
    outline-offset: 2px;
}

::selection {
    background: rgba(123, 97, 255, 0.25);
}

/* Cards lift on hover */
.KbCategory__box,
.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.KbCategory__box:hover,
.AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter:hover {
    border: 1px solid var(--ls-accent);
    box-shadow: 4px 4px 0 rgba(129, 70, 246, 0.2);
}

/* Home: the two big card icons sit in a tinted circle */
.AppContainer__homePage .ContentBox__indexIcon {
    background: transparent;
    align-items: center;
    border-radius: 4px;
    border:  1px solid #111;
    display: inline-flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 10px;
    width: 56px;
}

.AppContainer__homePage .ContentBox__indexIcon svg {
    color: #111;
    height: 26px;
    width: 26px;
}


/* Reading progress: Grape to Active Green to Lime Green, with a glowing head and a shine */
.Readingprogress__progressBarLine .Readingprogress__progressContainer {
    background: rgba(129, 70, 246, 0.14);
    height: 4px;
}

.Readingprogress__progressContainer .Readingprogress__progressBar {
    background-image: linear-gradient(90deg, #8146F6 0%, #14AE5C 55%, #7FF409 100%) !important;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 0 6px rgba(127, 244, 9, 0.7), 0 0 16px rgba(129, 70, 246, 0.35);
    height: 4px;
    overflow: visible;
    position: relative;
    transition: width 0.12s linear;
}

.Readingprogress__progressContainer .Readingprogress__progressBar::before {
    animation: lsProgressShine 2.4s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-size: 120px 100%;
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
}

.Readingprogress__progressContainer .Readingprogress__progressBar::after {
    background: #7FF409;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(127, 244, 9, 0.25), 0 0 14px 4px rgba(127, 244, 9, 0.8);
    content: "";
    height: 10px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
}

.Readingprogress__progressContainer .Readingprogress__progressBar[style*="width: 0"]::after {
    display: none;
}

@keyframes lsProgressShine {
    0% {
        background-position: -120px 0;
    }
    100% {
        background-position: calc(100% + 120px) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .Readingprogress__progressContainer .Readingprogress__progressBar::before {
        animation: none;
        display: none;
    }

    .KbCategory__box,
    .AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter {
        transition: none;
    }

    .KbCategory__box:hover,
    .AppContainer__homePage .ModuleCont__moduleCont .ContentBox__alignCenter:hover {
        transform: none;
    }
}


/* ===== Design pass 3 (reading ring, search glow, step timeline, code windows, scrollbar, finish line), 2026-09-25 =====
   CSS only. Scroll-driven parts sit behind @supports: browsers without them keep the pass 2 look.
   IBM Plex Mono comes from the @import on line 1. Remove this block to go back to design pass 2.
   2026-09-27 (Jory): step timeline removed, numbered steps show normal numbers again; page scrollbar back to the browser default. */

:root {
    --ls-grape: #8146F6;
    --ls-green: #14AE5C;
    --ls-lime: #7FF409;
    --ls-g900: #1E1E1E;
    --ls-g800: #333641;
    --ls-g700: #6E748C;
    --ls-g300: #DDDEE8;
    --ls-g200: #EEEFF7;
    --ls-flow: linear-gradient(90deg, var(--ls-grape) 0%, var(--ls-green) 55%, var(--ls-lime) 100%);
    --ls-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@property --ls-read {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --ls-pct {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

/* 1. Back to top: a dark dial with a reading ring and the reading percentage on hover */
.AppContainer__backToTop.commonStyle__zt3BrandBg {
    background-color: var(--ls-g800);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(30, 30, 30, 0.28);
    height: 48px;
    line-height: 48px;
    overflow: visible;
    transform: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
    width: 48px;
}

.AppContainer__backToTop.commonStyle__zt3BrandBg:hover {
    background-color: var(--ls-g900);
    transform: translateY(-2px);
}

.AppContainer__backToTop.commonStyle__zt3BrandBg svg {
    color: #FFFFFF;
    fill: #FFFFFF;
    transform: rotate(-90deg);
}

@supports (animation-timeline: scroll()) {
    .AppContainer__backToTop {
        animation: lsReading linear both;
        animation-timeline: scroll(root block);
    }

    .AppContainer__backToTop::before {
        background: conic-gradient(var(--ls-grape) 0%, var(--ls-green) calc(var(--ls-read) * 0.55%), var(--ls-lime) calc(var(--ls-read) * 1%), rgba(129, 70, 246, 0.2) calc(var(--ls-read) * 1%) 100%);
        border-radius: 50%;
        content: "";
        filter: drop-shadow(0 0 4px rgba(127, 244, 9, 0.45));
        inset: -7px;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
        pointer-events: none;
        position: absolute;
    }

    .AppContainer__backToTop::after {
        background: var(--ls-g900);
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(30, 30, 30, 0.25);
        color: var(--ls-lime);
        content: counter(lsPct) "%";
        counter-reset: lsPct var(--ls-pct);
        font: 600 12px/1 var(--ls-mono);
        letter-spacing: 0.02em;
        opacity: 0;
        padding: 7px 8px;
        pointer-events: none;
        position: absolute;
        right: calc(100% + 16px);
        top: 50%;
        transform: translate(4px, -50%);
        transition: opacity 0.15s ease, transform 0.15s ease;
        white-space: nowrap;
    }

    .AppContainer__backToTop:hover::after,
    .AppContainer__backToTop:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }

    @keyframes lsReading {
        from {
            --ls-read: 0;
            --ls-pct: 0;
        }
        to {
            --ls-read: 100;
            --ls-pct: 100;
        }
    }
}

/* 2. Search: the bar gradient lights up around the field while you type (both layers sit behind the white field) */
.SearchContainer__globalSearch,
.SearchContainer__searchBox {
    position: relative;
    max-width: 700px;
    margin: auto;
}

.SearchContainer__globalSearch::before,
.SearchContainer__searchBox::before,
.SearchContainer__globalSearch::after,
.SearchContainer__searchBox::after {
    /*background: var(--ls-flow);*/
    display: none;
    content: "";
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s ease;
}

.SearchContainer__globalSearch::before,
.SearchContainer__searchBox::before {
    border-radius: 6px;
    inset: -2px;
    z-index: -1;
}

.SearchContainer__globalSearch::after,
.SearchContainer__searchBox::after {
    border-radius: 8px;
    filter: blur(14px);
    inset: 2px;
    z-index: -2;
}

.SearchContainer__globalSearch:focus-within::before,
.SearchContainer__searchBox:focus-within::before {
    opacity: 1;
}

.SearchContainer__globalSearch:focus-within::after,
.SearchContainer__searchBox:focus-within::after {
    opacity: 0.55;
}

.SearchContainer__globalSearch input,
.SearchContainer__searchBox input {
    caret-color: var(--ls-grape);
}

.SearchContainer__globalSearch:focus-within input,
.SearchContainer__searchBox:focus-within input {
    border-color: #111;
}

.SearchContainer__globalSearch input:focus-visible,.KbSubCategoryContainer__contentList
.SearchContainer__searchBox input:focus-visible {
    outline: none;
}

.AppContainer__breadCrumbs .SearchContainer__searchBox {
    max-width: 360px;
}

.AppContainer__breadCrumbs .SearchContainer__searchBox input {
    border-radius: 4px;
    height: 48px;
    padding-left: 14px;
    font-size: 14px;
    outline: none;
}

.AppContainer__breadCrumbs .SearchContainer__searchBox .SearchContainer__searchBoxIcon {
    background: var(--ls-primary);
    border-radius: 4px;
    color: #fff;
    padding: 0;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    top: 6px;
    right: 6px;
}

.AppContainer__breadCrumbs .SearchContainer__searchBox .SearchContainer__searchBoxIcon svg {
    fill: #fff;
    color: #fff;
}

/* 3. Bullets in unordered lists are Grape; numbered steps keep normal numbers */
.KbDetailLtContainer__articleContent ul > li::marker {
    color: var(--ls-grape);
}

/* 4. Code: editor windows with the three status dots, IBM Plex Mono and green code */
.KbDetailLtContainer__articleContent pre {
    background: var(--ls-g900);
    border: 1px solid var(--ls-g800);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(30, 30, 30, 0.2);
    color: #EEEFF7;
    font-family: var(--ls-mono);
    font-size: 13px;
    line-height: 1.7;
    padding: 46px 20px 18px;
    position: relative;
    tab-size: 2;
}

.KbDetailLtContainer__articleContent pre::before {
    background: var(--ls-g800);
    border-radius: 7px 7px 0 0;
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.KbDetailLtContainer__articleContent pre::after {
    background: #FF515F;
    border-radius: 50%;
    box-shadow: 16px 0 0 #FFE046, 32px 0 0 #4DD753;
    content: "";
    height: 10px;
    left: 14px;
    position: absolute;
    top: 10px;
    width: 10px;
}

.KbDetailLtContainer__articleContent pre code {
    background: transparent;
    border: 0;
    color: #B2FF8E;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

.KbDetailLtContainer__articleContent pre::-webkit-scrollbar {
    height: 8px;
}

.KbDetailLtContainer__articleContent pre::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 12px;
}

.KbDetailLtContainer__articleContent pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.KbDetailLtContainer__articleContent pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.KbDetailLtContainer__articleContent :not(pre) > code {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border: 1px solid var(--ls-g300);
    font-family: var(--ls-mono);
    font-size: 0.88em;
}

/* 5. Finish line: the bar lights up in Lime Green over the last stretch of the page, where Zoho's bar reaches 100% */
@supports (animation-timeline: scroll()) {
    .Readingprogress__progressContainer .Readingprogress__progressBar {
        animation: lsFinishLine linear both;
        animation-range: 94% 100%;
        animation-timeline: scroll(root block);
    }

    @keyframes lsFinishLine {
        from {
            filter: none;
        }
        to {
            filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 5px var(--ls-lime)) drop-shadow(0 0 14px rgba(127, 244, 9, 0.85));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .AppContainer__backToTop.commonStyle__zt3BrandBg,
    .AppContainer__backToTop::after,
    .SearchContainer__globalSearch::before,
    .SearchContainer__searchBox::before,
    .SearchContainer__globalSearch::after,
    .SearchContainer__searchBox::after {
        transition: none;
    }

    .AppContainer__backToTop.commonStyle__zt3BrandBg:hover {
        transform: none;
    }
}

@media (min-width: 769px) {
  .WidgetContainer__contentList:nth-child(1) {
    margin-bottom: 20px;
  }
  
  .AppContainer__homePage .WidgetContainer__contentList:nth-child(2) {
    padding-left: 0;
    margin-top: 30px;
  }
}

.kbLanding .KbCategoryContainer__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .kbLanding .KbCategoryContainer__row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .kbLanding .KbCategoryContainer__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kbLanding .KbCategoryContainer__row {
        grid-template-columns: repeat(1, 1fr);
    }
}

.kbLanding .KbCategory__box {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

.Layout__layout1 .KbCategory__boxInner {
    background: #fff;
    border: 1px solid var(--ls-border-color);
    padding: 24px;
    box-shadow: none;
    height: 100%;
    border-radius: 8px;
    transition: all 0.3s;
}

.Layout__layout1 .KbCategory__boxInner:hover {
    border-color: var(--ls-accent);
    box-shadow: 4px 4px 0 rgba(129, 70, 246, 0.2);
}

.Layout__layout1 .KbCategory__boxInner .KbCategory__topic a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

.KbCategory__topic a:hover,
.KbCategory__topic a:focus,
.KbCategory__topic a:active {
    color: #14ae5c;
}

.KbCategory__avatarPhoto .Avatar__avatar {
    border: 1px solid #333641;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
}

.KbCategory__avatarPhoto .Avatar__avatar img {
    width: 22px;
    height: 22px;
}

.Layout__layout1 .MediaObject__mediaFigure {
    margin-bottom: 10px;
    margin-right: 0;
}

.editor .KbSubCategoryContainer__contentList {
    padding-right: 0;
}

.editor .KbSubCategoryContainer__contentList .ContentList__subCategory {
    height: 100%;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

.ContentList__subCategory a:hover,
.ContentList__subCategory a:focus,
.ContentList__subCategory a:active {
    color: #14ae5c;
}

.ContentList__subCategory .ContentList__topicList {
    padding: 0.375rem 0;
}

/* Section Browse by topic */
.ls-topic-list .ls-section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.ls-topic-list .ls-section-header h2 {
  font-size: 32px;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  margin: 0;
}

.ls-topic-list .ls-section-header p {
  margin: 0;
}

.ls-topic-list .ls-section-body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

@media (min-width: 480px) {
  .ls-topic-list .ls-section-body {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .ls-topic-list .ls-section-body {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .ls-topic-list .ls-section-body {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1240px) {
  .ls-topic-list .ls-section-body {
  }
}

.ls-topic-list .ls-topic-item {
  border: 1px solid var(--ls-border-color);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.35s ease-in-out;
}

.ls-topic-list .ls-topic-item:hover {
  border: 1px solid var(--ls-accent);
  box-shadow: 4px 4px 0 rgba(129, 70, 246, 0.2);
}

.ls-topic-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ls-topic-item .ls-topic-icon {
  border: 1.5px solid var(--ls-body-text);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  width: 48px;
  height: 48px;
  transition: all 0.25s ease-in-out;
}

.ls-topic-item .ls-topic-icon i {
  font-size: 22px;
  margin-left: 5px;
}

.ls-topic-item:hover .ls-topic-icon {
  background: var(--ls-accent);
  border-color: var(--ls-accent);
  color: #fff;
}

.ls-topic-item h4.ls-topic-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.ls-topic-item h4.ls-topic-title a {
    color: var(--ls-body-text);
}

.ls-topic-item h4.ls-topic-title a:hover,
.ls-topic-item h4.ls-topic-title a:focus,
.ls-topic-item h4.ls-topic-title a:active {
    color:  var(--ls-primary);
}

.ls-topic-item .ls-topic-desc {
    color:  #5E6372;
  margin: 0;
  line-height: 1.25;
  font-size: 15px;
}

/* Need help */
.home .AppContainer__homePage .WidgetContainer__list .WidgetContainer__contentList:nth-child(6) {
  text-align: center;
  width: 100%;
}

@media (min-width: 992px) {
  .home .AppContainer__homePage .WidgetContainer__list .WidgetContainer__contentList:nth-child(6) {
    padding: 60px 0 0 0;
  }
}

.home .AppContainer__homePage .WidgetContainer__list .WidgetContainer__contentList:nth-child(6) .WidgetContainer__boxSplit {
  background: #EEEFF7;
  margin-left: -60px;
  margin-right: -60px;
  padding: 60px 120px;
  width: auto;
}

.ls-still-need-help {
    padding-top: var(--spacer-80);
    padding-bottom: var(--spacer-80);
}

.ls-still-need-help .container {
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;

}

.ls-still-need-help .ls-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: var(--spacer-40);
    text-align: center;
}

.ls-still-need-help .ls-section-header h2 {
  font-size: 32px;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  margin: 0;
}

.ls-still-need-help .ls-section-header p {
  margin: 0;
}

.list-help-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
    gap: var(--spacer-30);
    
}


@media (min-width: 767px) {
  .list-help-wrapper {
    grid-template-columns: repeat(3, 1fr);
    
  }
}

.list-help-wrapper .ls-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 24px;
  text-align: center;
}

@media (max-width: 992px) {
  .list-help-wrapper .ls-card  {
    padding: var(--spacer-30);
  }
}

.list-help-wrapper .ls-card .ls-card-icon {
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  height: 52px;
  width: 52px;
}

.list-help-wrapper .ls-card .ls-card-icon i {
  font-size: 24px;
  margin-left: 5px;
}

.list-help-wrapper .ls-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.list-help-wrapper .ls-card h4 a {
    color: #111;
}

.list-help-wrapper .ls-card h4 a:hover,
.list-help-wrapper .ls-card h4 a:focus,
.list-help-wrapper .ls-card h4 a:active {
    color: var(--ls-primary);
}

.list-help-wrapper .ls-card p {
    font-size: 16px;
  margin: 0 auto;
  line-height: 1.5;
  max-width: 250px;
}

#mainContainer .popularAricles,
#mainContainer .recentArticles {
    margin-top: 30px;
    padding-right: 30px;
}

.ListHeader__headerType1 .ListHeader__header2 {
    font-family: "IBM Plex Serif";
    font-weight: 400;
    padding-top: 0;
}

#mainContainer .popularAricles .ListHeader__header2,
#mainContainer .recentArticles .ListHeader__header2 {
    font-size: 28px;
    font-family: "IBM Plex Serif", serif;
    font-weight: 400;
}

#mainContainer .ListHeader__listIcon2>svg {
    color:  var(--ls-primary);
    fill:  var(--ls-primary);
    height:  32px;
    width:  32px;
}

#mainContainer .ContentList__topicList {
    padding:  0;
}

#mainContainer .ContentList__topicList + .ContentList__topicList {
    border-top:  1px dashed var(--ls-border-color);
    padding-top: 15px;
    margin-top: 15px;
}

.ContentList__topicContent {
    margin-left: 30px;
}

#mainContainer .ContentList__topicList .Icon__small {
    height: 20px;
    width:  20px;
}

/*Footer Style*/
div.Footer__footerwrap {
    background:  #fff;
    padding-top:  var(--spacer-50);
    border-top: 1px solid var(--ls-border-color);
}

.Footer__container2 {
    color: var(--ls-body-text);
    text-align: left;
    gap: var(--spacer-30);
    margin-bottom: var(--spacer-40);
    flex-wrap: wrap;
}

.Footer__container2 .footer_item {
    flex: auto;
}

.Footer__container2 .footer_item h4 {
    margin-top: 0;
    margin-bottom: var(--spacer-20);
}

.Footer__container2 .footer_item_1 {
    margin-right: 70px;
    width: 240px;
}

@media (max-width: 767px) {
    .Footer__container2 .footer_item_1 {
        margin-right: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .Footer__container2 .footer_item {
        width: 100%;
    }
}

.Footer__container2 .footer_item ul {
    list-style: none;
    padding:  0;
    margin:  0;
}

.Footer__container2 .footer_item ul li {
    margin-bottom: 8px;
}

#footerContainer .copyright {
    border-top: 1px solid var(--ls-border-color);
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    font-size: 14px;
    color:  var(--ls-g700);
}