/* ==========================================================================
   Branding Design System (Global Stylesheet)
   ==========================================================================
   Includes:
   - Font Define - We define fonts in producerPortal > producerFonts.css
   - CSS Variables (colors, spacing, radius, typography)
   - Typography Utilities
   - Button Styles
   - Table Styles
   - Card / Surface Utilities
   - Layout & Spacing Utilities
   ========================================================================== */

/* -----------------------------------------------------
   COLOR SYSTEM
----------------------------------------------------- */
:root {
    /* Brand Palette */
    /* Primary */
    --color-white: #FFFFFF;
    --color-orange: #FA550A;
    --color-dark-blue: #000064;

    /* Brand Palette */
    --color-neutral-grey: #53585A;
    --color-black: #2C2C2C;
    --color-dark-brown: #3C2319;
    --color-orange-accessible: #EF6C01;
    --color-yellow: #FECF05;
    --color-light-blue: #B8DDE1;

    /* Brand Orange Shades */
    --orange-25: #FFF2E7;
    --orange-50: #FFE5D0;
    --orange-100: #FEDBC2;
    --orange-200: #FEC8A0;
    --orange-300: #FEB589;
    --orange-400: #FEA26C;
    --orange-500: #FE7200;
    --orange-600: #EF6C01;
    --orange-700: #CB5800;
    --orange-800: #974815;
    --orange-900: #5A3414;
    --orange-950: #3A1A00;

    /* Neutral Grey Color */
    --neutral-grey: #53585A;
    --neutral-grey-01: #585858;
    --neutral-grey-02: #a5a5a5;
    --neutral-grey-03: #bbbbbb;
    --neutral-grey-04: #d1d1d1;
    --neutral-grey-05: #e8e8e8;

    /* Gray Color */
    --gray-25: #fdfdfd;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e9eaeb;
    --gray-300: #d5d7da;
    --gray-400: #a4a7ae;
    --gray-500: #717680;
    --gray-600: #535862;
    --gray-700: #414651;
    --gray-800: #252b37;
    --gray-900: #181d27;
    --gray-950: #0a0d12;

    /* Tan Color */
    --tan-50: #f9f7f4;
    --tan-100: #f3efe9;
    --tan-200: #eae4de;
    --tan-300: #DCD3C9;
    --tan-400: #CEC6BC;
    --tan-500: #887F77;
    --tan-600: #68635E;

    /* Base Color */
    --base-white: #FFFFFF;
    --base-black: #000000;

    /* Feedback (optional) */
    --success: #27AE60;
    --warning: #F2C94C;
    --error: #EB5757;

    /* Tints */
    --tint-1:#FEEAE2;
    --tint-2:#FFF3EE;
    --tint-3:#FFFCFA;
    --tint-4:#FFFAF8;
    --tint-5:linear-gradient(180deg, #FFFAF8 0%, #FFFFFF 100%);
}


/* -----------------------------------------------------
   SPACING SYSTEM
----------------------------------------------------- */
:root {
    --space-none: 0;
    --space-xxs: 0.125rem;    /* 2px */
    --space-xs:  0.25rem;     /* 4px */
    --space-sm:  0.375rem;    /* 6px */
    --space-md:  0.5rem;      /* 8px */
    --space-lg:  0.75rem;     /* 12px */
    --space-xl:  1rem;        /* 16px */
    --space-2xl: 1.25rem;     /* 20px */
    --space-3xl: 1.5rem;      /* 24px */
    --space-4xl: 2rem;        /* 32px */
    --space-5xl: 2.5rem;      /* 40px */
    --space-6xl: 3rem;        /* 48px */
    --space-7xl: 4rem;        /* 64px */
    --space-8xl: 5rem;        /* 80px */
}


/* -----------------------------------------------------
   RADIUS SYSTEM
----------------------------------------------------- */
:root {
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 999px;
}


/* -----------------------------------------------------
   TYPOGRAPHY SYSTEM
----------------------------------------------------- */
:root {
    --font-family-heading: "poppins", sans-serif;
    --font-family-body: "inter", sans-serif;

    --font-primary: 'poppins', sans-serif;
    --font-secondary: 'inter', sans-serif;

    /* Font Sizes (matching your scale) */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-md: 1rem;      /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --display-xs: 1.5rem;     /* 24px */
    --display-sm: 1.5rem; /* 24px */
    --display-md: 1.875rem;   /* 30px */
    --display-lg: 2.25rem;     /* 36px */
    --display-xl: 3.75rem;     /* 60px */
}

/* -----------------------------------------------------
   TYPOGRAPHY UTILITIES
----------------------------------------------------- */

h1, .h1 { font-size: var(--display-lg) !important; font-family: var(--font-family-heading) !important; font-weight: 600 !important; line-height: 48px !important;}
h2, .h2 { font-size: var(--display-md) !important; font-family: var(--font-family-heading) !important; font-weight: 600 !important; line-height: 42px !important;}
h3, .h3 { font-size: var(--display-sm) !important; font-family: var(--font-family-heading) !important; font-weight: 600 !important; }
h4, .h4 { font-size: var(--display-xs) !important; font-family: var(--font-family-heading) !important; font-weight: 600 !important; line-height: 38px !important;}
h5, .h5 { font-size: var(--text-xl) !important; font-family: var(--font-family-body) !important; font-weight: 600 !important; }
h6, .h6 { font-size: var(--text-lg) !important; font-family: var(--font-family-body) !important; font-weight: 500 !important; }

.text-body { font-size: var(--text-md) !important; font-family: var(--font-family-body) !important; }
.text-sm { font-size: var(--text-sm) !important; font-family: var(--font-family-body) !important; line-height: 20px; }
.text-xs { font-size: var(--text-xs) !important; font-family: var(--font-family-body) !important; }
.subheading { font-size: var(--text-lg) !important; font-family: var(--font-family-heading) !important; }
.dashboardSubheading { font-size: var(--text-md) !important; font-family: var(--font-family-heading) !important; line-height: 30px !important;}
.text-bold { font-weight: 500 !important; }
p {color: #414651; font-family: var(--font-family-body) !important;}
body { font-size: var(--text-md) !important; font-family: var(--font-family-body) !important; line-height: 28px;}

.primary-color{color: var(--color-orange) !important;}
.secondary-color{color: var(--color-dark-blue) !important;}

h1.hap-title {position: relative; padding-bottom: 24px;}
h1.hap-title:after {content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background-color: var(--color-orange);}

h1, h2, h3, h4, h5 {
    color: var(--color-black);
}

/* -----------------------------------------------------
   SECTION CSS
----------------------------------------------------- */

h1.sectionTitle{margin-bottom: 1.75rem;}
h2.sectionTitle{margin-bottom: 1.75rem;}
.sectionSubTitle {text-align: center; margin-bottom: 64px;}

/* -----------------------------------------------------
   Full Width Section CSS
----------------------------------------------------- */
.fullWidthContainer {
    width: 100vw;
    margin-left: calc(-51vw + 50%);
    max-width: 100vw;
    box-sizing: border-box;
}

/* -----------------------------------------------------
   BUTTON SYSTEM
----------------------------------------------------- */

.btn, .slds-button {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-3xl) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
    border: none;
    border-color: transparent !important;
    font-size: 14px;
}
.slds-button::after {
    text-decoration: none !important;
    visibility: hidden;
    background: transparent !important;
}

/* Primary Button, Brand Button */

.btn-primary, .slds-button_brand {
    background: var(--color-orange) !important;
    color: var(--base-white) !important;
    border: var(--color-orange) !important;
}
.btn-primary:hover, .slds-button_brand:hover {
    background: var(--color-dark-blue) !important;
    border: var(--color-dark-blue) !important;
}



/* Secondary Button, Netural Button */

.btn-secondary, .slds-button_neutral {
    background: var(--base-white) !important;
    color: var(--color-orange) !important;
    border: 2px solid var(--color-orange) !important;
}
.btn-secondary:hover, .slds-button_neutral:hover {
    color: var(--color-dark-blue) !important;
    border: 2px solid var(--color-dark-blue) !important;
}

/* Secondary Button, Brand Outline Button */

.btn-outline, .slds-button_outline-brand {
    background: var(--base-white) !important;
    color: var(--gray-700) !important;
    border: 2px solid var(--gray-700) !important;
}
.btn-outline:hover, .slds-button_outline-brand:hover {
    color: var(--color-dark-blue) !important;
    border: 2px solid var(--color-dark-blue) !important;
}

/* Destructive Outline Button */

.btn-outline {
    border: 1px solid var(--gray-500);
    background: transparent;
    color: var(--gray-800);
}
.btn-outline:hover {
    background: var(--gray-100);
}

/* Disabled button */

.slds-button[disabled], .slds-button:disabled{
    color: var(--gray-400) !important;
    border: 0px !important;
}

.slds-button.slds-button_brand[disabled], .slds-button.slds-button_brand:disabled{
    color: var(--gray-400) !important;
    border: 0px !important;
    background-color: var(--gray-100) !important;
}

/* Focus Button */
button.slds-button:focus {
    box-shadow: none !important;
}
button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Combobox button */

.slds-combobox_container button {
    height: 44px;
    align-items: center;
    line-height: 24px !important;
    color: var(--color-black) !important;
    border-radius: 8px 8px;
    font-size: 1rem;
}
.slds-combobox_container .slds-combobox__input.slds-combobox__input-value span {
    width: 98%;
}
.slds-combobox__input:focus, .slds-combobox__input.slds-has-focus{
    outline: none;
    box-shadow: none;
}
lightning-base-combobox lightning-base-combobox-item span {
    font-size: 1rem;
}
.myLettersLibraryContainer lightning-base-combobox-item span.slds-media__figure.slds-listbox__option-icon {
    display: none;
}

/* Button in Table */

table button.slds-button {
    color: var(--color-orange) !important;
}

table button.slds-button:hover{
    text-decoration: none !important;
    color: var(--color-dark-blue) !important;

}
table button.slds-button::after{
    text-decoration: none !important;
    width: 0;
    background: transparent !important;
}


/* Table Filter Button */

.slds-button.slds-button_icon-bare{
    padding: 0 !important;
    border-radius: 0.4rem !important;
}

/* Background button before error */
button.slds-button.slds-button_brand:before {
    display: none;
}

/* Link Button */
a {
    font-size: 1rem;
    color: var(--color-orange) !important;
    line-height: 24px;
}
a:hover, a:focus{
    color: var(--color-dark-blue) !important;
}

/* -----------------------------------------------------
   CARD / SURFACE
----------------------------------------------------- */

.card {
    background: var(--base-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* -----------------------------------------------------
   TABLE SYSTEM
----------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family-body);
    font-size: var(--text-sm);
}

.table thead {
    background: var(--gray-100);
    text-align: left;
}

.table th, .table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
}
.slds-table tbody th, .slds-table tbody td {
    border-right: 1px solid var(--tan-400);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.slds-table tbody th, .slds-table tbody td:first-child {
    border-left: 1px solid var(--tan-400);
}

.table tbody tr:hover {
    background: var(--gray-50);
}
.slds-table tbody tr {
    background-color: var(--tint-4);
}
.slds-table tbody a{
    color: var(--color-orange) !important;
}
.slds-table_striped tbody tr:nth-of-type(even)>td, .slds-table_striped tbody tr:nth-of-type(even)>th, .slds-table--striped tbody tr:nth-of-type(even)>td, .slds-table--striped tbody tr:nth-of-type(even)>th {
    background-color: #ffffff !important;
}
.slds-form-element_readonly {
    border-bottom: 1px solid var(--tan-300) !important;
}
.slds-card {
    border-color: #ffffff !important;
}
.cols-2 {
    gap: 2rem;
}
/* -----------------------------------------------------
   SPACING UTILITIES
----------------------------------------------------- */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }

/* Margin */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Padding */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }


/* -----------------------------------------------------
   FLEX & LAYOUT UTILITIES
----------------------------------------------------- */

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

.cb-section_column {
    padding: 0 !important;
}

/*---------------  Builder CSS Starts  ---------------*/
.header .forceCommunityThemeHeaderCompact {padding-left: 0px; padding-right: 0px; padding: 0 48px;border-top: 8px solid var(--color-orange); border-bottom: 2px solid var(--tan-300); background: #ffffff !important;}

.header .forceCommunityThemeHeaderHelpCenter {padding-left: 0px; padding-right: 0px; padding: 0 48px !important;}

.forceCommunityThemeHeaderHelpCenter{padding-left: 0px !important; padding-right: 0px !important;}

.comm-page-home .a11y-banner {padding: 0 0 0 48px; background-color: #fffaf8; border-top: 8px solid var(--color-orange);}

.comm-page-home .forceCommunityThemeHeroStarter{padding: 103px 0px !important; background-color: #fffaf8;}

.topicItem{ height:100px !important; }

.forceCommunityThemeSearch.helpCenterHomeHero .search-box{
    border: 0 !important;
    border-radius: 0 !important;
}
.forceCommunityThemeSearch.helpCenterInnerHeader .search-box{
    outline: 0px !important;
    outline:rgba(255, 255, 255, 0) !important;
}
.forceCommunityThemeSearch.helpCenterHomeHero .search-box .search-input{
    border: 1px solid var(--tan-300) !important;
    border-radius: 8px !important;
    margin-right: 1rem;
}

.forceCommunityThemeSearch.helpCenterHomeHero .search-box .search-inputSearchButton--right{
    background-color: var(--gray-700) !important;
}
.forceCommunityThemeSearch.helpCenterHomeHero .search-box .search-inputSearchButton--right:hover{
    background-color: var(--color-dark-blue) !important;
}
.forceTopicFeaturedTopicItem.topicItem {
    display: block;
    box-sizing: border-box;
    float: left;
    border-color: rgb(0, 129, 161);
    color: teal;
    background-color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: poppins;
    font-weight: bold;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 32px;
    border-color: rgb(0, 129, 161);
    border-spacing: bold;
    margin-right: 5px;
    margin-bottom: 6px;
   
}

.forceTopicFeaturedTopicItem.topicItem {
    width: 18% !important;
}

.contactus.new {
    background-color: var(--color-black);
}

.contactus20 {
    padding: 30px 50px !important
}

.contactus20 .contactus__menu {
    margin-top: 20px
}

.contactus {
    background-color: transparent;
    padding: 30px 28px;
    text-align: center;
    color: #fff;
}

.contactusbottom {
    background-color: transparent;
    padding: 30px 28px;
    text-align: left;
    color: #fff;
}
.copyright-container{
    background-color: var(--color-black);
}
.copyright-wrapper {
    background-color: var(--color-black);
    color: #fff;
    text-align: center;
    font-weight: 400 !important;
    font-size: 1rem !important;
    font-family: 'poppins' !important;
    border-top: 1px solid hsla(32,21%,83%,.2);
    margin: 0 2rem;
}

.footer-wrapper.new {
    background-color: #969696;
    padding: 40px 32px;
    text-align: center
}


.comm-page-article .selfServiceArticleHeaderDetail .meta .metadata-list .metadata-list-item {
    display: none;
}
.selfServiceArticleHeaderDetail .meta .metadata-list .metadata-list-item {display:none;}

.slds-tile__detail.slds-text-body--small.slds-var-p-bottom_xxx-small.articleMetaData{display:none;}

.search-deflectionItemDetail.slds-truncate {
    display: none;
}
h2.featuredTopicHeader{
    font-size: 1.2rem !important;
    text-transform: none !important;
}
.forceTopicFeaturedTopics .topicList{
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    margin-top: 1rem !important;
}
.topicList li.topicItem.forceTopicFeaturedTopicItem{
    margin: 1rem;
}
.topicItem.forceTopicFeaturedTopicItem{
    height: 132px !important;
    background-color: #ffffff;
    border: 1px solid var(--tan-300);
    cursor: pointer;
}
.topicItem.forceTopicFeaturedTopicItem:hover{
    border: 1px solid var(--tan-300);
    background-color: var(--tan-50);
}
.forceTopicFeaturedTopics .stylingOverrideHook_6070 .topicContent:hover{
    background-color: var(--tan-50) !important;
}
.forceTopicFeaturedTopics .topicContent{
    transition: background .1s ease !important;
}
.topicItem .topicContent:hover{
    background-color: var(--tan-50) !important;
}
.topicItem.forceTopicFeaturedTopicItem .topicLabel{
    font-size: 1.25rem;
    color: var(--color-black) !important;
    letter-spacing: 0.4px;
    font-weight: 700;
    line-height: 1.88rem;
}
.topicItem .topicContent{
    background-color: #ffffff !important;
    box-shadow: none !important;
}
.forceTopicFeaturedTopicItem .topicLink:hover .topicContent, .forceTopicFeaturedTopicItem .topicLink:focus .topicContent{
    box-shadow: none !important;
}
.comm-page-home .siteforceContentArea{
    padding: 0px 40px;
}
.forceCommunityTopArticleList .listContent .singleListContainer{
    padding: 0;
    display: flex;
    width: 100%;
}
.forceCommunityTopArticleList .listContent .singleListContainer li.top-article-item{
    padding-bottom: 4px;
    padding-left: 1rem;
}
.forceCommunityTopArticleList .listContent .singleListContainer h3.topicHeader {
    display: none;
}
.forceCommunityTopArticleList .listContent .singleListContainer .forceCommunityTopArticleListForTopic button {
    display: none;
}
.forceCommunityTopArticleList .listContent .singleListContainer .forceCommunityTopArticleListForTopic .empty-list {
    display: none;
}
.forceCommunityTopArticleList .listContent .singleListContainer .topicArticleList .top-article-item span {
    font-size: 1rem;
}
.showTitle h2.title {
    background-color: var(--orange-25);
    padding: 0.6rem;
    color: var(--color-black);
    margin: 0 0;
    line-height: 24px;
    border-bottom: 1px solid var(--tan-400);
    margin-bottom: 0.75rem;
}
.forceCommunityTopArticleList ul{
    background: #FFFFFF;
}
.comm-topic-trending-articles h2 {
    background-color: var(--orange-25);
    padding: 0.6rem;
    color: var(--color-black);
    margin: 0 0;
    line-height: 24px;
    border-bottom: 1px solid var(--tan-400);
    margin-bottom: 0.75rem;
}
.forceCommunityTopArticleItem .article-title-link{
    text-decoration: none !important;
    color: var(--color-black) !important;
}
.forceCommunityTopArticleItem .article-title-link:hover{
    text-decoration: underline !important;
}
.forceCommunityTopArticleList{
    padding-bottom: 10px;
    background-color: #ffffff;
    border: 1px solid var(--tan-400);
}
.comm-topic-trending-articles{
    display: grid;
    border: 1px solid var(--tan-400);
}
.comm-topic-trending-articles ul{
    background: #FFFFFF;
    padding-bottom: 10px;
}
.comm-topic-trending-articles ul li{
    padding-bottom: 4px;
    padding-left: 1rem;
}
.comm-topic-trending-articles .comm-topic-trending-articles__item a{
    border-bottom: 0px;
    padding: var(--lwc-fcSpacingXSmall,8px) 0;
    text-decoration: none !important;
    color: var(--color-black) !important;
}
.comm-topic-trending-articles .comm-topic-trending-articles__item a:hover{
    text-decoration: underline !important;
}
.comm-topic-trending-articles .comm-topic-trending-articles__item span{
    font-size: 1rem;
}
.hap_subFooterMenu{
    display: flex;
    background-color: var(--color-black);
    justify-content: center;
    margin-top: 2rem;
}
.hap_subFooterMenu a:hover{
    text-decoration: none !important;
}
.copyright-wrapper{
    padding: 30px 32px;
    
}

/*---------------  Builder CSS Ends  ---------------*/

/*---------------  Article Page & Topic Page CSS ---------------*/


.comm-related-articles{
    display: grid;
    border: 1px solid var(--tan-400);
}

.comm-related-articles h2 {
    background-color: var(--orange-25);
    padding: 0.6rem;
    color: var(--color-black);
    margin: 0 0;
    border-bottom: 1px solid var(--tan-400);
    margin-bottom: 0.75rem;
}
.comm-related-articles ul{
    padding-bottom: 10px;
}
.comm-related-articles ul li{
    padding-bottom: 4px;
    padding-left: 1rem;
    display: list-item;
}
.comm-related-articles .comm-related-articles__item a{
    border-bottom: 0px;
    padding: var(--lwc-fcSpacingXSmall,8px) 0;
    text-decoration: underline !important;
    text-decoration: none !important;
    color: var(--color-black) !important;
}
.comm-related-articles .comm-related-articles__item a:hover{
    text-decoration: underline !important;
    color: var(--color-black) !important;
}
.comm-related-articles .comm-related-articles__item span{
    font-size: 1rem;
}
.comm-page-article .test-id__field-label {
    font-size: 18px !important;
    font-family: 'poppins' !important;
    font-weight: 500 !important;
}
.comm-page-article .test-id__field-value .uiOutputText {
    color: var(--color-black);
    font-size: var(--display-lg) !important; 
    font-family: var(--font-family-heading) !important; 
    font-weight: 600 !important; 
    line-height: 48px !important;
}
.comm-page-article .test-id__field-value .uiOutputDateTime {
    font-size: 1rem !important;
    font-family: 'poppins' !important;
}
.comm-page-article .test-id__field-value span {
    font-size: 1rem !important;
    font-family: 'poppins' !important;
}
.comm-page-article .test-id__field-value a{
    font-size: 1rem !important;
    font-family: 'poppins' !important;
    color: var(--color-dark-blue) !important;
    font-weight: 500 !important;
}
.comm-page-article .test-id__field-value span a{
    font-size: 1rem !important;
    font-family: 'poppins' !important;
}
.forceOutputRichText p {
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.comm-page-topic .selfServiceTopicRelatedArticle{
    margin-bottom: 2rem;
    border: 1px solid var(--tan-400);
}
.comm-page-topic .selfServiceTopicRelatedArticle h2{
    padding: 0.5rem;
    text-align: left;
    font-size: 1rem;
    background-color: var(--orange-25);
    padding: 0.6rem;
    color: var(--color-black);
    margin: 0 0;
    line-height: 24px;
    border-bottom: 1px solid var(--tan-400);
}
.comm-page-topic .selfServiceTopicRelatedArticle h2 label{
    color: var(--color-black);
    font-size: var(--display-md) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: 600 !important;
    line-height: 42px !important;
}
.comm-page-topic .selfServiceTopicRelatedArticle .topicRelatedArticleList .article-item h2.article-head{
    background-color: #FFFFFF;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-black) !important;
    text-decoration: none;
    border: 0;
    line-height: 24px !important;
}
.comm-page-topic .selfServiceTopicRelatedArticle .topicRelatedArticleList .article-item h2.article-head:hover{
    color: var(--color-black) !important;
    text-decoration: underline;
}
li.article-item.selfServiceArticleListItem {
    font-weight: var(--lwc-fontWeightRegular, 400);
    display: block;
    padding: 0;
    background: transparent;
    border-bottom: 0px;
}
.full.long-text.forcePageBlockItem.forcePageBlockItemView{
    min-width: 100%;
}
.slds-rich-text-editor__output p{
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.slds-rich-text-editor__output ol{
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.slds-rich-text-editor__output ol li{
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.slds-rich-text-editor__output ul{
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.slds-rich-text-editor__output ul li{
    font-family: 'poppins' !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/*---------------  Search Page CSS ---------------*/
.comm-page-global-search .contentRegion{
    background-color: #ffffff;
}

.comm-page-global-search .listContent ul li.kbResultStencil {
    width: 100%;
    margin: 0 0 1.5rem 0;
    background: var(--gray-100);
    padding: 1rem;
}

.comm-page-global-search .slds-tile p span {
    font-size: 18px;
    text-decoration: underline;
    color: #4f4f4f;
    font-family: 'poppins' !important;
    line-height: 1.7 !important;
    font-weight: 500;
}
.comm-page-global-search .itemTitle a span {
    text-decoration: none !important;
    font-size: var(--text-xl) !important;
}
.comm-page-global-search .itemTitle a:hover span {
    text-decoration: underline !important;
    color: var(--color-orange);
}
.comm-page-global-search .itemTitle a span:hover {
    text-decoration: underline !important;
    color: var(--color-orange);
}
.comm-page-global-search search_results-result-stencil {
    margin-left: 0.6rem;
}

/*---------------  Subheader Tab CSS ---------------*/
.hap_SubHeader{
    background-color: #ffffff;
    display: block;
    margin-top: 1rem;
}

.hap_SubHeader a {
    font-size: 14px;
    color: #ffffff !important;
    margin: 0.4rem;
    border: 1px solid #dfedf0;
    padding: 0.2rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    background-color: #005572;
}
.hap_SubHeader a .unicode{
   color: #dfedf0;
}
.slds-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
}
.comm-page-home .forceCommunityThemeHeroStarter .searchRegion {
    margin-top: 6.9rem;
    margin-top: 8.5rem;
}
h1.heroCustomTitle{
    color: var(--color-dark-blue);
    position: relative;
    top: -8.8rem;
    font-size: var(--display-xl) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: 600 !important;
    line-height: 60px !important;
    padding-bottom: 1.5rem;
    top: -10rem;
}
h1.heroCustomTitle:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--color-orange);
    
}
.comm-page-home .forceTopicFeaturedTopics{
    margin-top: 0 !important;
}

/* Topic Page and Article Page - Search Box (on header) */
.comm-page-topic .forceCommunityHeadline .headlineTitle{
    color: var(--color-black) !important;
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.comm-page-topic .forceCommunityHeadline .headlineTitle:after {
    content: "";
    position: relative;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 4px;
    background-color: var(--color-orange);
    margin-top: 1.5rem;
}
.comm-page-topic .search-region {
    padding: 0.5rem 0.8rem;
}
.comm-page-topic .forceCommunityThemeSearch.helpCenterInnerHeader .search-box input {
    margin-right: 1rem;
    border: 1px solid var(--tan-300) !important;
    border-radius: 8px !important;
}
.comm-page-topic .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button {
    background-color: var(--gray-700) !important;
    width: auto;
}
.comm-page-topic .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button:hover {
    background-color: var(--color-dark-blue) !important;
}

/* Search Page - Search Box (on header) */
.comm-page-global-search .slds-page-header.forceSearchSearchResultsGridHeader{
    display: none;
}
.comm-page-global-search .search-region {
    padding: 0.5rem 0.8rem;
}
.comm-page-global-search .forceCommunityThemeSearch.helpCenterInnerHeader .search-box input {
    margin-right: 1rem;
    border: 1px solid var(--tan-300) !important;
    border-radius: 8px !important;
}
.comm-page-global-search .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button {
    background-color: var(--gray-700) !important;
    width: auto;
}
.comm-page-global-search .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button:hover {
    background-color: var(--color-dark-blue) !important;
}

/* Article Page - Search Box (on header) */
.comm-page-article .search-region {
    padding: 0.5rem 0.8rem;
}
.comm-page-article .search-region input.search-input{
    border: 1px solid var(--tan-300) !important;
    border-radius: 8px !important;
    margin-right: 1rem;
}
.comm-page-article .forceCommunityThemeSearch.helpCenterInnerHeader .search-box input {
    margin-right: 1rem;
    border-radius: 2rem;
}
.comm-page-article .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button {
    background-color: var(--gray-700) !important;
    width: auto;
}
.comm-page-article .forceCommunityThemeSearch.helpCenterInnerHeader .search-box button:hover {
    background-color: var(--color-dark-blue) !important;
}
.comm-page-article .siteforceThemeLayoutStarter .isPageWidthFixed-true{
    padding: 0 40px;
}
.comm-page-global-search .siteforceThemeLayoutStarter .isPageWidthFixed-true{
    padding: 0 40px;
}
.comm-page-topic .siteforceThemeLayoutStarter .isPageWidthFixed-true{
    padding: 0 40px;
}

.comm-page-article article.content fieldset.test-id__section:first-child .slds-form dl{
    display: none;
}
.comm-page-article article.content fieldset.test-id__section:first-child .slds-form dl:first-child{
    display: flex;
}
.headerButtons{
    display: flex;
    margin: 1.5rem 0;
    justify-content: space-between;
    align-items: center;
    width: auto;
    justify-self: flex-end;
    place-self: flex-end;
    gap: 1rem;
}
.headerButtons a{
    background-color: #005572;
    padding: 0.2rem 1rem;
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 250px;
    text-decoration: none;
}

.headerButtons button lightning-primitive-icon{
    transform: scale(1.4);
    margin-top: -4px;
}
.headerButtons a span{
    font-size: 1rem;
}

/* Article Description CSS*/
.comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h1 {
    font-size: 2.125rem !important;
    font-weight: 500 !important;
    line-height: 36px !important;
}
.comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h2 {
    font-size: 1.875rem !important;
    font-weight: 500 !important;
    line-height: 32px !important;
}
.comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h3 {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 26px !important;
}
.comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h4 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 22px !important;
}
.comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h5 {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}
.comm-page-article .content fieldset .section__content .slds-col.full.blank-item{
    display: none;
}
.comm-page-article article.content fieldset .slds-form .slds-grid.forcePageBlockSectionRow:nth-child(2) {
    display: none;
}
.comm-page-article .slds-form-element__label{
    line-height: 24px;
}
.comm-page-article .slds-form-element__label ~ .itemBody {
    margin-bottom: 0.5rem;
}
.siteforceThemeLayoutStarter ::selection{
    background: var(--color-orange) !important;
}
.desktopVisible{
    display: flex !important;
}
.mobileVisible{
    display: none !important;
}
.search-deflectionContainer a .search-deflectionItemSearchText.slds-truncate {
    color: var(--color-black);
    font-family: 'inter';
    font-weight: normal;
}
.search-deflectionContainer li a {
    color: var(--color-black) !important;
    font-weight: 500;
}

.search-deflectionContainer li:hover {
    outline: 2px solid var(--color-orange) !important;
    box-shadow: 0px 0px 0px 0px;
}
.forceCommunityThemeSearch.commThemeCmp .search-deflectionItem:hover, .forceCommunityThemeSearch a.search-deflectionItem.search-deflectionItem--active{
    outline: 2px solid var(--color-orange) !important;
}
.forceCommunityThemeSearch.commThemeCmp .search-deflectionItem:focus{
    outline: 0px !important;
}
community_article-topic-trending-articles-list li a:focus {
    box-shadow: 0 0 0 0 !important;
}
community_article-similar-articles-list li a:focus {
    box-shadow: 0 0 0 0 !important;
}
li.forceCommunityTopArticleItem a:focus{
    box-shadow: 0 0 0 0 !important;
}
.comm-page-global-search .forceCommunitySearch{
    display: flex;
    flex-direction: column;
}
.comm-page-global-search .forceCommunitySearch .forceSearchResultsList .slds-tile{
    max-width: 100% !important;
}
.comm-page-global-search .forceCommunitySearch .slds-border_right.slds-medium-size_1-of-6{
    width: 100%;
    border: 0;
}
.comm-page-global-search .forceCommunitySearch .slds-border_right.slds-medium-size_1-of-6 h1.slds-nav-vertical__title{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 45px;
}
.comm-page-global-search .forceCommunitySearch .slds-border_right.slds-medium-size_1-of-6 h1.slds-nav-vertical__title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
    width: 60px;
    height: 4px;
    background-color: var(--color-orange);
}
.comm-page-global-search .forceCommunitySearch .scopesRibbon.forceSearchScopesRibbon:after {
    content: "Search Results";
    display: inline-block;
    font-family: var(--font-family-heading) !important;
    font-size: var(--display-lg) !important;
    font-weight: 600;
    color: #2b2b2b;
    padding-bottom: 20px;
    background-image: linear-gradient(#ff4500, #ff4500);
    background-size: 60px 5px;
    background-position: bottom center;
    background-repeat: no-repeat;
}
.comm-page-global-search .forceCommunitySearch .scopesRibbon.forceSearchScopesRibbon {
    margin-bottom: 45px;
    border: 0px;
    text-align: center;
}
.comm-page-global-search .forceCommunitySearch .scopesRibbon.forceSearchScopesRibbon .selectorScroller {
    display: none;
}
@media screen and (min-width: 2020px) {
    .comm-page-home .a11y-banner {
        padding: 0 0 0 0;
    }
    .comm-page-home .siteforceContentArea {
        padding: 0px 0px;
    }
    .comm-page-article .siteforceThemeLayoutStarter .isPageWidthFixed-true{
        padding: 0 0;
    }
    .comm-page-topic .siteforceThemeLayoutStarter .isPageWidthFixed-true {
        padding: 0 0;
    }
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 1 1 calc(14% + 20px); /* Further increase for wider screens */
        min-width: 250px;
        max-width: 350px;
    }
}

@media screen and (max-width: 1800px) {
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(18%); /* Increase width proportionally */
        min-width: 250px;
        max-width: 350px;
    }
}
@media screen and (max-width: 1703px) {
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(17.7%); /* Increase width proportionally */
        min-width: 250px;
        max-width: 350px;
    }
}
@media screen and (max-width: 1513px) {
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(22%); /* Increase width proportionally */
        min-width: 200px;
        max-width: 350px;
    }
    .helpCenterHomeHero .bgImage.comm-is-absolute {
        transform: scale(0.7);
        transform-origin: top right;
    }
}
@media screen and (max-width: 1346px) {
    h1.heroCustomTitle {
        font-size: 3rem !important;
    }
    .helpCenterHomeHero .bgImage.comm-is-absolute {
        transform: scale(0.7);
        transform-origin: top right;
    }
}
@media screen and (max-width: 1200px) {
    h1.heroCustomTitle {
        font-size: 3rem !important;
    }
    .topicItem.forceTopicFeaturedTopicItem{
        height: 132px !important;
    }
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(30%); /* Increase width proportionally */
        min-width: 200px;
        max-width: 350px;
    }
    h1.heroCustomTitle{
        font-size: 2.6rem !important;
        line-height: 1.1;
    }
}
@media screen and (max-width: 1063px){
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(29%); /* Increase width proportionally */
        min-width: 200px;
        max-width: 350px;
    }
    .helpCenterHomeHero .bgImage.comm-is-absolute {
        transform: scale(0.6);
        transform-origin: top right;
    }
}
@media screen and (max-width: 920px){
    h1.heroCustomTitle{
        font-size: 2.1rem !important;
        line-height: 1.1;
    }
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(44.9%); /* Increase width proportionally */
        min-width: 150px;
        max-width: 370px;
    }
}
@media screen and (max-width: 767px){
    .forceCommunityThemeHeaderCompact .themeHeaderInner[style].showNavMenuOnLeft-false {
        padding: 10px 0 !important;
    }
    .forceCommunityThemeHeaderCompact .themeLogo{
        transform: none !important;
        left: auto !important;
    }
    .forceCommunityThemeHeaderBase {
        height: 64px !important;
    }
    .desktopVisible{
        display: none !important;
    }
    .mobileVisible{
        display: flex !important;
    }
    .headerButtonContainer{
        flex-direction: column;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-top: -12px;
    }
    .headerButtonContainer .otherButtonContainer{
        background-color: var(--gray-100);
        border-bottom: 1px solid var(--gray-300);
    }
    .otherButtonContainer .otherButtons {
        justify-content: space-between;
        display: flex;
        width: 100%;
    }
    .otherButtonContainer .otherButtons lightning-button:first-child {
        width: 50%;
        border-right: 1px solid var(--gray-300);
        text-align: center;
    }
    .otherButtonContainer .otherButtons lightning-button:last-child {
        width: 50%;
        text-align: center;
    }
    .mobileVisible .otherButtons lightning-button .slds-button {
        padding: 0 !important;
        color: var(--color-dark-blue);
    }
    .headerButtonContainer .headerButtons.backButton {
        display: flex;
        width: 100%;
        margin-top: 1rem;
        padding-left: 28px;
        padding-right: 28px;
    }
    .comm-page-home .a11y-banner {
        padding: 0 0 0 0;
    }
    .topicItem.forceTopicFeaturedTopicItem .topicLabel{
        font-size: 1rem;
        letter-spacing: 0px;
    }
    .footer{
        background-color: #969696;
    }
    .hap_subFooterMenu{
        display: flex;
        background-color: #969696;
        flex-flow: wrap;
	}
    .comm-page-home .siteforceContentArea{
    	padding: 0px 0px;
	}
    .hap_subFooterMenu{
        flex-direction: column;
    }
    .hap_subFooterContactus {
        padding-bottom: 1rem;
    }
    .contactus20 {
        padding: 22px 18px !important
    }
    .selfServiceArticleLayout.zoom.article-column{
        padding: 0 0 0 !important;
    }
    .comm-page-home .forceCommunityThemeHeroBase[style]{
        padding: 4rem 2rem!important;
    }
    .forceCommunityThemeHeaderHelpCenter .themeHeaderInner{
        display: flex;
        justify-content: center;
        top: 1rem;
    }
    .header .forceCommunityThemeHeaderHelpCenter{
        padding: 0 0 !important;
    }
    .comm-page-home .helpCenterHomeHero .bgImage.comm-is-absolute{
        background-position: right !important;
        opacity: 25%;
    }
    .comm-page-home .helpCenterHomeHero .bgOverlay{
        background-color: var(--orange-25) !important;   
    }
    h1.heroCustomTitle{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 2.5rem !important;
        top: -8rem;
    }
    h1.heroCustomTitle:after{
        position: relative;
        margin-top: 1rem;
    }
    .comm-page-topic .search-region {
        border: 1px solid #ffffff;
        border-radius: 2rem;
        padding: 0.2rem 0.2rem;
        background-color: var(--color-orange);
    }
    .comm-page-topic .headlineTitle .headlineTitleText {
        font-size: 1.5rem;
        line-height: 26px;
    }
    .headerButtons{
        margin: 0.5rem 0;
        width: auto;  
    }
    .headerButtons a{
        padding: 0.2rem 0.8rem;
        font-size: 15px;
    }
    .comm-page-article .test-id__field-value .uiOutputText {
        font-size: var(--display-md) !important; 
        font-family: var(--font-family-heading) !important; 
        font-weight: 600 !important; 
        line-height: 42px !important;
    }
    .comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h1 {
        font-size: 1.75rem !important;
        font-weight: 500 !important;
        line-height: 34px !important;
    }
    .comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h2 {
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        line-height: 26px !important;
    }
    .comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h3 {
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        line-height: 22px !important;
    }
    .comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h4 {
        font-size: 1.125rem !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }
    .comm-page-article .selfServiceArticleLayout article .test-id__field-value .slds-rich-text-editor__output.selfServiceOutputRichTextWithSmartLinks h5 {
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        line-height: 19px !important;
    }
    .comm-page-topic .selfServiceTopicRelatedArticle .topicRelatedArticleList .article-item h2.article-head{
        line-height: 1.4rem !important;
    }
}
@media screen and (max-width: 660px){
    .comm-page-home .forceCommunityThemeHeroBase[style]{
        padding: 4rem 2rem!important;
    }
    .comm-page-global-search .siteforceThemeLayoutStarter .isPageWidthFixed-true{
        padding: 0 0;
    }
    .comm-page-article .siteforceThemeLayoutStarter .isPageWidthFixed-true{
        padding: 0 15px;
    }
    .comm-page-topic .siteforceThemeLayoutStarter .isPageWidthFixed-true{
        padding: 0 15px;
    }
    .header .forceCommunityThemeHeaderCompact{
        padding: 0 15px;
    }
    .headerButtons{
        margin: 0.5rem auto;
    }
    .topicList .forceTopicFeaturedTopicItem.topicItem {
        flex: 0 0 calc(45%); /* Increase width proportionally */
        min-width: 100px;
        max-width: 350px;
        margin: 8px !important;
    }
}
@media screen and (max-width: 550px){
    .comm-page-home .forceCommunityThemeHeroBase[style]{
        padding: 2rem 2rem!important;
    }
    .headerButtons button{
        font-size: 13px;
        font-weight: 700;
    }
}
@media screen and (max-width: 460px){
    .comm-page-home .forceCommunityThemeHeroBase[style]{
        padding: 0 2rem!important;
        margin-top: 4rem;
    }
}
@media screen and (max-width: 400px){
    h1.heroCustomTitle {
        top: -8rem;
    }
    .topicList .forceTopicFeaturedTopicItem.topicItem{
        flex: 0 0 calc(96%);
    }
}


.forceCommunityThemeLogo .logoImage{
    width: 225px !important;
    height: 40px !important;
}