AURA CSS & Head Markup

- CSS & Head Markup

This GIST contains CSS and Head Markup for Experience Cloud sites (included Site Starter).

Head_Markup.html

<!-- To show a favicon, upload to the Files/Asset Library with public access, uncomment the line, and replace FILENAME) -->
<!-- <link rel="icon" type="image/x-icon" href="/sfsites/c/resource/FILENAME"> -->

<!-- Add Google Icons to the site. This link sets the default size and weight (400). See https://fonts.google.com/icons for image names -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<!-- Font Awesome icons -->


<!-- Script for Messaging -->
<script>
    window.addEventListener("onEmbeddedMessagingReady", () => {
     console.log ('Received the onEmbeddedMessagingReady event...');
     var userId = $A.get('$SObjectType.CurrentUser.Id');
     console.log ('Passing HiddenPrechatUserId = userId (currently Logged In User Id, or ' + userId + ')');
     embeddedservice_bootstrap.prechatAPI.setHiddenPrechatFields({'HiddenPrechatUserId' : userId});
    });
    </script>

Site-Addon.css

/* Site CSS Add-On - Latest Update: 01-03-25.1
 	 Released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */

/* Section padding - Option to not show the automatic component/section padding on the pages listed. Uncomment to use. */
/* .comm-page-home .body .forceCommunitySection, .comm-page-custom-help-center .body .forceCommunitySection, .comm-page-custom-learning .body .forceCommunitySection, .comm-page-custom-community-home .body .forceCommunitySection {
      margin-bottom: 0px !important;} */

/* CMS Detail page collection */
.comm-page-managed-content-news .forceCommunityDynamicCollectionGrid, .comm-page-managed-content-Blogs .forceCommunityDynamicCollectionGrid, .comm-page-managed-content-flexContent .forceCommunityDynamicCollectionGrid, .comm-page-managed-content-externalVideo .forceCommunityDynamicCollectionGrid {
  padding: 24px 24px;}

/* Documentation page - Make all CMS items same height / Subheading */
.comm-page-custom-documentation .slds-rich-text-editor__output {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4 !important;}
/* Documentation page - Make all CMS items same height / Title */
.comm-page-custom-documentation .js-dynamic-collection .forceCommunityDynamicCollectionGrid .forceCommunityCardLayout div.slds-col {min-height: 160px !important;}

/* Flow - SDO SFS Self-Service SchedulingV2 */   
.divHeadline[FSAA-aaNewBookingConfirmation_aaNewBookingConfirmation] {font-size: 1.2rem !important;}
.headlineDate[FSAA-aaNewBookingConfirmation_aaNewBookingConfirmation] {font-size: 1rem !important;}
.headline[FSAA-aaNewBookingConfirmation_aaNewBookingConfirmation] {font-size: 1.6rem !important;}

/* Font styling */

    /* Fonts - CMS Collections text */
    .comm-page-custom-help-center .forceCommunityDynamicCollectionGrid .resetMarginLeft .slds-text-heading_small, .comm-page-custom-community-home .forceCommunityDynamicCollectionGrid .resetMarginLeft .slds-text-heading_small, .comm-page-custom-support .forceCommunityDynamicCollectionGrid .resetMarginLeft .slds-text-heading_small {
      font-size: var(--font-size-default) !important;}

    /* Fonts - Hero Title */
    .hero .content h1,
    .hero .content h2,
    h2.contentTitle,
    .comm-page-home .hero .content h1,
    .comm-page-custom-community-home .hero .content h2,
    .comm-page-custom-community .hero .content h2,
    .comm-page-custom-support h2.contentTitle,
    .comm-page-custom-help-center h2.contentTitle,
    .comm-page-global-search h2.contentTitle,
    .comm-page-my-account h2.contentTitle{
      font-size: var(--font-size-xxl) !important; 
      font-weight: var(--font-weight-light) !important;
    }

    /* Fonts - Hero description (for both type of heros) */
    .comm-page-home .forceCommunityThemeHeroBase .contentTitle,
    .comm-page-custom-community-home .hero .content p,
    .comm-page-custom-community-home .hero .content p,
    .comm-page-my-account .hero .content p{
      font-size: var(--font-size-md) !important;
    }

    /* Fonts - H2 slight bigger (current default is 18px) */
    .forceCommunityRichText h2 {font-size: var(--font-size-lg) !important;}

    /* Fonts - My Account tile menu */
    .comm-tile-menu__item-title.lwc-rfo3qhj7u4 {font-size: var(--font-size-default) !important;}

    /* Fonts - Next Best Action title */
    .comm-page-custom-help-center article.forceCommunityNbaWidget.slds-card .slds-card__header h2, 
    .comm-page-custom-community-home article.forceCommunityNbaWidget.slds-card .slds-card__header h2, 
    .comm-page-custom-support article.forceCommunityNbaWidget.slds-card .slds-card__header h2 {
      font-size: var(--font-size-lg) !important;}

    /* Fonts - Reset to use the new font size defaults */
    .slds-text-heading_small, .slds-text-heading--small {font-size: unset !important;}

    /* Fonts - Additonal p (paragraph) missing items */
    .siteforceThemeLayoutStarter {font-size: var(--font-size-base) !important;}
    .font-size-default {font-size: var(--font-size-base) !important;}
    .font-size-xs {font-size:var(--font-size-xs) !important;}
    .font-size-sm {font-size:var(--font-size-sm) !important;}

/* End of Font Styling */

/* Hero section for Support Home and Search (add background like the Home page) */
.forceCommunityThemeHeroBase .content {
background-color: var(--hero-background-color);
border-radius: var(--border-radius-lg);
box-shadow: 0px 1px 6px 0px rgba(32, 33, 36, var(--hero-box-shadow-transparency)) inset;
font-weight: var(--font-weight-normal) !important;
margin: 60px 0;
padding: 40px;
}

/* Knowledge Articles */   
    /* Article Content - Hides the 2nd title section */
    .comm-page-article .forcePageBlock .slds-section:first-child {display: none;} 

    /* Article Detail - Page title */
    .selfServiceArticleLayout.zoom .article-head {color:#000 !important; font-size: 1.6rem !important;}

    /* Article Detail - Hides the last visible section from from the article page layout to hide unwanted fields. */
    .article-column .test-id__section:last-child,
    .forcePageBlockItemView .tooltipIcon /* Hides the title tooltip which is for internal use */
    {display: none !important;}

    /* Article Detail - Section padding */
    .forcePageBlockItemView.forcePageBlockItem.slds-col>.slds-form-element.slds-form-element_readonly {padding-bottom: 12px !important;}

    /* Article Detail - Section titles */
    .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-label, .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__grouped-field-label-icon {
      font-size: .8rem !important; font-weight: 400 !important; margin-bottom: 12px !important;}

    /* Article Detail - Reset font size 
      NOTE: This is done to display a consistant font size without any unwatned overrides. */
    .slds-rich-text-editor__textarea, .slds-rich-text-editor__output, 
    .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-value {font-size: initial !important;}

    /* Related articles */
    .comm-related-articles .comm-related-articles__item a.slds-border_bottom {border-bottom: none; padding-bottom: 6px !important; padding-top:6px !important;}
    .comm-related-articles .slds-text-heading_small {font-size: var(--font-size-xl) !important; padding-bottom: 12px !important;}
    .comm-related-articles .comm-related-articles__item a.slds-border_bottom .slds-text-body_small {line-height: normal !important;}
    .comm-related-articles {padding: 24px;}    

/* End of Knowledge Articles */

/* Messaging (MIAW) - Make the chat window wider, and responsive height / mobile (width) */
  @media only screen and (min-width: 48em) {
  .embeddedMessagingFrame.isMaximized {height: 90vh !important; width: 580px !important;}}
  /* Mobile */
  @media only screen and (max-width: 480px) {
  .embeddedMessagingFrame.isMaximized {height: 90vh !important; width: 90% !important;}}

  /* Internal bot text width */
  div.embedded-messaging-chat-message[lwc-3cjfrt9r4ka] {max-width: 90% !important;}
  /* Messaging (MIAW) icon */
  .embeddedMessagingConversationButtonWrapper[lwc-9sp7psvd2o] .embeddedMessagingConversationButton[lwc-9sp7psvd2o] {background-color: black !important;}

/* Record List titles - Hide on the pages listed. */
.comm-page-custom-community .forceCommunityRecordListCompact .listTitleContainer, .comm-page-custom-community-groups .forceCommunityRecordListCompact .listTitleContainer, .comm-page-custom-sfs-self-service-scheduling .forceCommunityRecordListCompact .listTitleContainer {
  display: none;
}

/* Record Snapshot padding/margin updates to reduce wrapping with 2 and 3 digit items are shown */
.icon[lwc-24mkgmerck1] {margin-right: 12px !important;}
.profile-section[lwc-24mkgmerck1] {padding: 0em 1em 0em 1em !important;}
.record-snapshot[lwc-24mkgmerck1] {padding: 1rem 1rem 1rem 2rem !important;}
.record-count[lwc-24mkgmerck1] {margin-bottom: 1em !important; margin-right: 0em !important;}
.snapshot-container[lwc-24mkgmerck1] {border-radius: 16px !important;}

/* Tile Menu reset for the Home page only */
.comm-page-home .forceCommunitySection .comm-tile-menu__item .comm-tile-menu__item-link .comm-tile-menu__item-tile {
  height: 150px !important;}
.comm-page-home .forceCommunitySection .comm-tile-menu__item.slds-p-around_small, .forceCommunitySection .comm-tile-menu__item.slds-p-around--small {
  padding: 12px !important;}
  

Site.css

/*  Site CSS - Latest Update: 4-22-25.1
 	Released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */

/* --- Default and base font sizes --- */
/* BASE FONT SIZE */
html {font-size: 100%;}
    /* Tablet */
    @media only screen and (max-width: 820px) {html {font-size: 95%;}}
    /* Mobile */
    @media only screen and (max-width: 480px) {html {font-size: 90%;}}

/* FONTS - Standard font tags with SLDS equivalents. Using rem to insure site-wide consistancy */
H1, .slds-text-heading_large, .profileName
{font-size:2.6rem !important; font-weight: 400 !important; line-height: initial !important;}

H2, .slds-text-heading_medium, .slds-card__header-title.slds-truncate 
{font-size: 1.6rem !important; font-weight: 400 !important;}

H3, .slds-text-heading_small, .slds-text-heading--small, .baseCard__header-title-container, .selfServiceArticleListItem .article-head
{font-size: 1.3rem !important; font-weight: 400 !important;}

p, .slds-text-body_regular, .siteforceThemeLayoutStarter, .slds-text-heading_x-small, .forceCommunityTopArticleItem .article-title,
.forceCommunityCreateRecordButton .triggerLabel, .forceCommunityCreateRecordForm .button 
{font-size: 1.1rem !important; font-weight: 400 !important;}

/* FONTS - Other common SLDS fonts used on the site */
.slds-text-body_small {font-size: .9rem !important;}
.slds-text-title {font-size: .9rem !important;}
.slds-text-title_caps {font-size: .9rem !important;}
.slds-text-title_bold {font-size: .9rem !important;}

/* Branding tokens - Color */
.brand-color {color: var(--dxp-g-brand) !important;}
.brand-color-1 {color: var(--dxp-g-brand-1) !important;}

/* Breadcrumbs */ 
.breadcrumb-style {display: flex; justify-content: left; margin-top:12px; margin-bottom:-24px;}
.breadcrumb-style-object {display: flex; justify-content: left; margin-top:12px; margin-bottom:0px;}

/* Bulleted list spacing */
.forceCommunityRichText ol li {margin-bottom: 6px;}

/* Links - Remove all underlines from links */
a:link, a:visited, a:active {text-decoration: none !important;}
a:hover {text-decoration: underline !important;}

/* Tab links - Remove underline (old and new tabs) */
.forceCommunityTabset>.uiTabBar .uiTabItem .tabHeader {text-decoration: none !important;}
.forceCommunityTabLayout .slds-tabs_default__nav .slds-tabs_default__item .slds-tabs_default__link {text-decoration: none !important;}

/* --- END Default and base font sizes --- */


/* Alerts using SLDS HTML */
.alerts-html {background-color:rgba(220, 220, 220, 0.5); border-radius:5px; min-height:54px;}
.alerts-html-dark {background-color:rgba(50, 50, 50, 0.5); border-radius:5px; min-height:54px;}

/* Alert width desktop */
.alert-width {width:80%;}
    /* Alert width mobile and tablet */
    @media only screen and (max-width: 800px) 
    {.alert-width {width:100%;}
    }

/* Arch Graph title width */
.relatedListNameContainerTruncation[lwc-53qo9sesbe4] {max-width: 14rem !important;}

/* Arch Graph formatting */
.container[lwc-6knp0st1h8u] {display:none;}
.canvas[lwc-492uag72her] {margin-bottom: 24px !important; padding-top: revert !important;}

/* B2B Commerce Footer */
.siteforceB2bBody {font-size: 1.3rem !important;}

/* Backgrounds - Common CSS for background and border update to site components */
.forceCommunityCmsContentItemDetailLayout                	/* CMS Connect Detail */,
.forceCommunityContactSupportForm .relative                 /* Contact Support */,
.forceChatterCompactFeed									/* Feed Compact */,
.forceChatterFeedInner				                    	/* Record feed */,
.forceChatterStyle--default.forceChatterFeedElementFullView .cuf-element /* Question detail */,
.forceChatterGroupDetailCard								/* Group Detail - About */,
.forceChatterAddMemberCard									/* Group Detail - Add Member */,
.forceChatterMessageDetailView.container				    /* Messages */,
.forceCommunityTopicCatalog                               	/* Topic Catelog */,
.forceCommunityTopicDescription.slds-card-wrapper		   	/* Topic Description */,
.forceCommunityTopicMetrics.slds-card-wrapper			   	/* Topic Metrics */,
.forceCommunityRecordListDesktop.slds-card					/* Group List */,
.forceCommunityLeadInbox									/* Lead Inbox */,
.forceCommunityUserProfileStats                          	/* My Profile */,
.forceCommunityUserProfileHeaderDetail .cUserProfileCon,
.forceCommunityUserRecognitions				  		        /* My Profile - Recognition Badges */,
.slds-card.slds-card_boundary.forceCommunityUserRecognitions,
.forceCommunityUserSettingsInternal                      	/* My Settings */,
.forceCommunityUserRecognitions .userRecognitionsHeader 	/* Profile - My Badges */,
.forceCommunitySearch .forceSearchResultsGridView .searchScroller        /* Search */
.forceCommunityLwcRecordDetail .slds-card                   /* Record Details */,
.forceCommunityRecordListDesktop                         	/* Record List */,
.forceRecordLayout.slds-page-header,
.forceCommunityRecordListStandard.forceCommunityObjectHome,
.forceCommunityRecordListCompact,
.HealthCloudGAHcCommunityCareTeamList 						/* My Care Plans */,
.HealthCloudGAHcCommunityTaskList						    /* My Tasks */,
.selfServiceArticleLayout .content							/* Article Detail */,  
.selfServiceTopicArticleList								/* Topic Details - Articles */ 
{background-color:#ffffff !important; border-color:#d4d4d4 !important; border-radius:5px !important; border-style:solid !important; border-width:1px !important; padding:12px !important;}

/* Builder Notes - Assign the audience Builder Notes to the component */
[data-audience-name*="Builder Notes"] {background-color:#eef4ff !important; border-color:#d4d4d4; border-radius:5px; border-style:solid; border-width:1px; padding:12px;}

/* --- Buttons ---  */
.html-button,
.askCommunityBtn,           /* Ask a Question  */ 
.selfServiceContactSupport, /* Contact Support */ 
.contactSupportButton,      /* Contact Support */ 
.forceCommunityCreateRecordButton button, /* New record */
.contactRequestButton {border-radius:5px !important; font-size: 1rem !important; height:46px; margin: auto !important; min-width:260px !important;} /* Contact Us Button */ 

/* Button - Ask & Contact Us */   
.cta_header {font-size: 1.3rem !important; font-weight: 400 !important; margin-bottom: -6px;} 

/* Button - Follow */
.forceCommunityFollow .button {font-size: 1rem !important; width:260px !important;}    
.forceCommunityFollow.group {justify-content:center; width:260px !important;}
.forceCommunityFollow.group.twoButton {width: 260px !important;}

/* Button (HTML) Styling */
.button-style {color:#fff; font-size:1rem; min-height:46px; border-radius:5px; min-width:260px;}
    /* Mobile */ @media only screen and (max-width: 480px) {html .button-style {width:100%;}}

/* Button - Quick Create */
.forceCommunityCreateRecordButton button,
.forceCommunityCreateRecordButton .triggerLink,
.forceCommunityCreateRecordButton {font-size:1rem !important; border-radius:5px !important; font-weight:400 !important; margin:auto !important; max-width: 320px !important;}
/* --- END Buttons ---  */

/* Card Formatting (HTML) */
.component-border {background-color:#ffffff !important; border-color:#d4d4d4; border-radius:5px; border-style:solid; border-width:1px; padding:12px;}

/* Call to actions (e.g.,Have a question or need help?, My Appointments, etc. ) */
.cta-style {margin-bottom:12px;}

/* Chatter feeds cutoff on mobile view */
.forceChatterFeedBodyText .feedBodyInnerTruncated {max-height: revert !important;}

/* CMS Banner */
.forceCommunityBannerLayout .flagContainer {border-radius: 5px !important;}    

/* Chatter feeds cutoff on mobile view */
.forceChatterFeedBodyText .feedBodyInnerTruncated {max-height: revert !important;}

/* CMS tiles
.forceCommunityFlexTileLayout, .forceCommunityFlexTileLayout>.slds-grid {min-height: 100px !important;}
*/

/* CMS Connect description */
.forceCommunityCmsContentCardLayout .contentBox {height: 110px !important; padding-top: 32px;}

/* Contact Support - Case deflection */
.slds-align_absolute-center.comm-deflection-tracking__buttons {padding-top:12px;}
.slds-align_absolute-center.comm-deflection-tracking {margin-top:64px;}

/* Contact Support - Support Form */
.forceSearchInputLookupDesktop.uiInput .uiInputTextForAutocomplete, .forceSearchInputLookupDesktop.uiInput .uiInputTextForAutocomplete:focus {background: white !important;}

/* Contact Support confirmation title */
.forceCommunityContactSupportForm .slds-page-header__title, .forceCommunityContactSupportForm .subtitle, .forceCommunityContactSupportForm .inputLabel>span, .forceCommunityContactSupportForm .selfServiceSupportQuickActionField {
    font-size: 1rem !important;}

/* CRMA title font size fix */
.headerPanel .name .dash-title .label .labelText {font-size: 24px !important;}

/* Events Calendar background */
.fc.fc-ltr.fc-unthemed {background-color: white;}
.noHeaderBorder[cccalendar-cceventDetails_cceventDetails] {padding-bottom: 0px;}

/* Events Calendar Upcoming Events */
.cccalendar_modal__content[cccalendar-cceventDetails_cceventDetails] {padding-top: 0px;}

/* Featured Topics */
.forceTopicFeaturedTopics, .topicLabel {font-size:1.7rem !important; font-weight:600 !important}
.forceTopicFeaturedTopicItem.topicItem {padding:6px !important;}

/* Feed Compact */
.cuf-retryPanel.forceChatterCompactFeed {display:none;}

/* Feed Publisher */
.oneActionsComposer.uiTabset--task .tabs__item a span.title {font-size: 1.1rem !important;}


/* Flow - Fields within a section */
.flowruntime-section-column[lwc-6aa2906q6hj] {padding-top: 12px;}

/* Flow - Borders */
.forceCommunityFlowCommunity {border-style:none !important;}
[lwc-3uma98d0eu4-host] {
    border-color:#d4d4d4 !important; 
    border-radius:5px !important; 
    border-style:solid !important; 
    border-width:1px !important;  
}
    
/* -- Footer -- */
.footer-fullwidth {background-color: black; padding-top: 12px; width: 100%;}  
.footer-maxwidth {margin: auto; max-width: 1280px; padding: 24px 0px 24px 0px;} 
.footer-maxwidth-login {margin: auto; max-width: 580px; padding: 24px 0px 24px 0px;} 
.footer-text {color: #f0f0f0 !important; font-size:13px !important;} 
.footer-text a:link {color: #f0f0f0; text-decoration: underline !important;} 
.footer-text a:hover {color: #0176D3 !important;}
.footer-spacer {color: #A9A9A9;}  

/* Footer - Desktop text alignment */
.footer-center {text-align: center;}						 
.footer-left {text-align:left;}   
.footer-right {display: flex; justify-content: right; align-items: right;}  
    /* Footer - Tablet and Mobile text alignment */
    @media only screen and (max-width: 800px)                    
    {.footer-left {text-align: center; display: flex; justify-content: center; align-items: center;}
        .footer-right {display: flex; justify-content: center; align-items: center; margin-bottom:6px; margin-top:6px;}   
    }

/* Google font icons (see https://fonts.google.com/icons for image names). Also update Head Markup */
.material-icons-18 {font-size: 18px !important;}
.material-icons-24 {font-size: 24px !important;}
.material-icons-36 {font-size: 36px !important;}
.material-icons-48 {font-size: 48px !important;}

/* Group Banner */
.forceCommunityGroupHighlightStencilNapili.forceRecordLayout {background-color : #ffffff;}

/* Group Details */
.forceChatterOutputDescription .gxmorelink {display: none !important;}
.forceChatterOutputInformationBody.gxmorelink {display: none !important;}
.forceDetailPanelDesktop.slds-card {padding:0px !important;}

/* Group Tiles */
.forceChatterGroupTileTemplate {border-color:#e8e8e8;  border-radius:5px; border-style:solid; border-width:1px; margin:6px; width:32%}

/* Group Tiles - Make the group list full width (non-mobile only) */
@media only screen and (min-width: 768px)
{.forceChatterObjectHomeTileView section {width:100% !important;}
}

/* Header - Menu Item font size, except for mobile */
@media screen and (min-width: 490px) 
{.horizontalMenuItem {font-size: 1rem !important;}  
}

/* Header - User Profile Icon (desktop and mobile) */
.forceCommunityThemeProfileMenu .profile-icon {width: 40px !important; height: 40px !important;}
.comm-user-profile-menu .slds-avatar {width: 40px !important; height: 40px ;}

/* Headline - Reduce the padding at the top of the component */
.forceCommunityHeadline .headlineTitle {padding-top:0px !important;}
.forceCommunityHeadline .headlineInfo {margin:0px !important;}

/* Hero - Make all section with backgrounds (images or color) extend right and left */
.comm-page-home .forceCommunitySection .cb-section_background, .forceCommunitySection .cb-section_backgroundOverlay {margin-left: calc(50% - 50vw) !important; width: 99.5vw !important;}

/* Hero */
.forceCommunityThemeHeroBase .contentSubtitle {margin-top: 6px !important;}
    /* Hero on mobile */
    @media only screen and (max-width: 480px) {.forceCommunityThemeSearch.cypressInnerHero .search-box {margin-bottom: -12px !important; margin-top: -24px !important;}}

/* Hero section HTML title outline */
.hero-title {
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 5px;
    box-shadow: 0px 1px 6px 0px rgba(32, 33, 36, 0.28) inset;
    padding: 40px;
}
/* Hero section margin - desktop */
.site-hero {margin-top:80px;}
    /* Hero section margin - tablet */
    @media only screen and (max-width: 820px) {.site-hero {margin-top:48px;}}
    /* Hero section margin - mobile */
    @media only screen and (max-width: 480px) {.site-hero {margin-top:24px;}}

/* Hero title width - desktop */
.hero-width {max-width:680px;}
    /* Hero section margin - tablet */
    @media only screen and (max-width: 820px) {.hero-width {max-width:540px;}}
    /* Hero section margin - mobile */
    @media only screen and (max-width: 480px) {.hero-width {max-width:380px;}}

/* Home Health - Reset font sizes  
   NOTE: Only impacts the Home Health page */
.comm-page-custom-home-health [lwc-6gev3k0ie2n],[lwc-72usf2nsemu], /* Home Health Patient Requests */
.comm-page-custom-home-health [lwc-6o3m80hpddj] /* Home Health Patient Visit Details */,
.comm-page-custom-home-health [lwc-6gev3k0ie2n] /* Home Health Patient Requests */
{font-size: unset !important; font-weight: 400 !important;}

/* Home Health Patient Visits */
.comm-page-custom-home-health [lwc-499uuqvm3cp] {font-size: initial !important;}
.comm-page-custom-home-health [lwc-499uuqvm3cp] .slds-text-heading_large {font-size: 2.0rem !important; padding-bottom: 12px !important;}

/* Home Health Patient Requests */
.comm-page-custom-home-health [lwc-72usf2nsemu], .comm-page-custom-home-health .slds-tabs_default .slds-tabs_default__nav  {margin: 0px 6px 0px 6px !important;}
.comm-page-custom-home-health [lwc-6gev3k0ie2n] {padding-bottom: 3px !important; padding-left: 6px !important;}

/* HTML icon styling */
.icon-style {margin-right:6px;}
.icon-style-multiline {margin-left:6px; margin-right:6px; margin-top:3px;}

/* HTML Span align vertical center */
.align-span-vertical {align-items: center; display:flex;}
.align-span-vertical-centered {align-items: center; display:flex; justify-content: center;}

/* Knowledge Articles */   
  /* Article Content - Hides the 2nd title section */
  .comm-page-article .forcePageBlock .slds-section:first-child {display: none; margin-top:0px !important;} 

  /* Article Detail - Page title */
  .selfServiceArticleLayout.zoom .article-head {color:#000 !important; font-size: 1.6rem !important; margin-top:0px; margin-bottom:0px;}
  
  /* Article Detail - Hides the last visible section from from the article page layout to hide unwanted fields. */
  .article-column .test-id__section:last-child,
  .forcePageBlockItemView .tooltipIcon /* Hides the title tooltip which is for internal use */
  {display: none !important;}

  /* Article Detail - Section padding */
  .forcePageBlockItemView.forcePageBlockItem.slds-col>.slds-form-element.slds-form-element_readonly {padding-bottom: 12px !important;}

  /* Article Detail - Section titles */
  .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-label, .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__grouped-field-label-icon {
    font-size: .8rem !important; font-weight: 400 !important; margin-bottom: 12px !important;}

  /* Padding for content section */
  .selfServiceArticleLayout .forcePageBlockItem.full, .selfServiceArticleLayout .forcePageBlockItem.full:last-child {padding-left:12px !important;}
  .selfServiceArticleLayout.zoom.article-column {padding: 0 0px 0 !important;}

  /* Article Detail - Reset font size 
    NOTE: This is done to display a consistant font size without any unwanted font overrides in the Knowledge article. */
  .slds-rich-text-editor__textarea, .slds-rich-text-editor__output, 
  .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-value {font-size: initial !important;}

  /* Knowledge - Related Articles */
  .selfServiceSimilarArticles42 li>.comm-related-articles__item>a {padding-bottom:12px !important; padding-top:12px !important; border-width: 0px;}
  .comm-related-articles__item .slds-p-bottom_medium {word-break: normal !important;} /* Fix the word break issue */
  .comm-related-articles__item {font-size: 1rem !important;}
  .selfServiceSimilarArticles42 ul {background-color:#ffffff !important; border-color:#d4d4d4 !important; border-radius:5px !important; border-style:solid !important; border-width:1px !important; padding:12px !important;}							
/* End Knowledge Articles */  

/* Lead List */
.forceCommunityLeadInboxStencil .primaryField {max-width: 75% !important;}

/* Login input box width */
.salesforceIdentityLoginForm2 .inputBox {width: 90% !important;}

/* Messages - Top align the messages */
.forceChatterMessageDetailView .messageContent {display: block !important;}

/* Messaging (MIAW) icon */
.embeddedMessagingConversationButtonWrapper[lwc-9sp7psvd2o] .embeddedMessagingConversationButton[lwc-9sp7psvd2o] {background-color: black !important;}

/* Messaging - Make the chat window wider, and responsive height / mobile (width) */
@media only screen and (min-width: 48em) {
  .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {height: 98vh !important; width: 580px !important;}} 
  /* Mobile */
  @media only screen and (max-width: 480px) {
  .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {height: 90vh !important; width: 90% !important;}}
  /* Internal bot text width */
  div.embedded-messaging-chat-message[lwc-3cjfrt9r4ka] {max-width: 90% !important;}

/* My Setting hide top row */
.forceCommunityUserSettingsCustomizable .row:first-child {display:none;}

/* Nav drop down text */
a.menu-item[lwc-sf4l3atjv5], a.menu-item-hover[lwc-sf4l3atjv5] {font-size:16px !important;}

/* Nav pull-down border */
@media only screen and (min-width: 48em)
{.comm-drilldown-navigation__list[community_navigation-drilldownNavigationList_drilldownNavigationList] {outline: unset !important;}}

/* Nav - Mobile only */
@media only screen and (max-width: 480px)
{nav.lwc-44m8jpc5qct a.lwc-44m8jpc5qct, nav.lwc-44m8jpc5qct button.lwc-44m8jpc5qct {font-size: 14px !important;}}

/* Omniscription styling */
.os-step-label[lwc-314pbdlkbi2] {font-size: 28px !important; margin-top: 6px;}
.vlc-separator[lwc-314pbdlkbi2] {display: none;}

/* Profile Image title */
.profile-title {justify-content: center; margin-top:-24px;}

/* Record Banner */
.forceHighlightsStencilDesktop .slds-page-header__detail-row {background-color:rgba(255,255,255,0) !important}

/* Record List mobile buttons */
.forceCommunityActionsContainerMobile {display:none;}

/* Record List - Font size on compact record lists */
.forceCommunityRecordListCompactCard .primaryField {font-size: 1rem !important;}

/* Record List component reset title */
.forceCommunityRecordListStandard .listTitle,
.forceCommunityRecordListCompact .filterListPlaceholder .listTitle {text-transform: revert !important;}

/* Set record list padding all around */
.forceDetailPanelDesktop .forcePageBlock.forceRecordLayout {padding: 16px !important;}

/* Record List Kanban */
.forceCommunityRecordListDesktop .runtime_sales_pipelineboardPipelineView .container {min-height: unset !important;}

/* Record List Detail formating */
.forcePageBlockItemView .slds-form-element__static {font-size:16px !important;}
.slds-form-element__label {font-size:14px !important;}

/* Record List compact */
.forceCommunityRecordListCompact .filterListPlaceholder li {font-size: 0.9rem !important;}

/* Search Results - Discussion results background */
.forceCommunitySearch .compactFeed.forceChatterCompactFeed {background-color : #ffffff !important;} 

/* Search results text size above filters */    
.forceSearchScopesList.scrollerWrapper>.slds-nav-vertical__title {display:none;}

/* Section titles. To change the alignment, set justify-content */
.section-title {margin-bottom:-6px; text-align: left;}
.section-title-center {margin-bottom:-6px; text-align: center;}

/* Suggested Actions */
.slds-m-horizontal_x-small, .slds-m-horizontal--x-small {border-width: 0px; margin-left: 12px; margin-right: 12px; padding: 6px 6px 12px 12px;}
.runtime_communities_nbaNbaCard {margin-bottom: 6px;}

/* Spacing below Search or Buttons */
.forceCommunityThemeHeroStarter .searchRegion {margin-bottom:-12px !important;}
.forceCommunityThemeSearchSection .search-triggerButton {height: unset !important;}

/* --- Tabs --- */
/* Margin and border below tabs */
.slds-tabs_default .slds-tabs_default__nav {
    border: none !important; 
    margin-bottom: 12px;}

/* Tabs Background color */
.forceCommunityTabLayout {background-color: transparent !important;} 

/* Default and non-selected tab styling */
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item {
    background-color: lightgray; 
    border-radius: 5px; 
    padding: 4px 12px;
    overflow: visible;
}

/* Remove/merge font size from tabs area */
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item .slds-tabs_default__link {
    font-size: 16px !important; 
    font-weight: var(--font-weight-normal) !important;
    height: auto;
    line-height: 25px;
}

/* Active Tab */
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item.slds-is-active {background-color: var(--dxp-g-brand);}
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item.slds-is-active {color: white;}
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item.slds-is-active .slds-tabs_default__link {color: white;}

.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item:after {background-color: transparent;}
.slds-tabs_default .slds-tabs_default__nav .slds-tabs_default__item.slds-is-active:after {height: 0;}

/* More menu */
.forceCommunityTabLayout .slds-tabs_default__overflow-button .slds-dropdown-trigger .slds-button {
    padding-left: 0px;
    padding-right: 0px;
    height: auto;
    line-height: 25px;
}
.slds-tabs_default__overflow-button {
    height: auto;
    line-height: 25px;
}

/* Tasks sub-tabs */
.runtime_sales_pipelineboardPipelineViewMultipleRecordTypeTabSet .tabs__item a {font-size:1rem !important;}
.forceCommunityRecordListDesktop.forceListViewManager .listDisplays {min-height: 840px;}

/* Tasks compact view  */
.runtime_sales_activitiesTaskRow.desktop .fields .subject {font-size: 1rem !important;}
.runtime_sales_activitiesTaskContent .right>span {font-size: .9rem !important;}
.forceCommunityRecordListCompact .runtime_sales_activitiesTaskContent .taskContentWrapper {margin-top: 0px !important;}
.forceCommunityRecordListCompact .runtime_sales_activitiesTaskContent div.left {margin-top:8px !important;}

/* Tile Menu */
.comm-tile-menu__item-title.community_navigation-tileMenuItemBanner_tileMenuItemBanner {font-size:1.3rem !important; font-weight:600;}
.comm-tile-menu__item-title.lwc-rfo3qhj7u4 {font-size: 1.4rem !important;}

/* Tiles - HTML tiles for center justified and one row icon left tile cards */
.tile-card {padding: 12px; background: #fff; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; margin-bottom:12px; transition: transform 0.3s ease-in-out;}
.tile-card:hover {box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);}
.tile-card-icon-left {display: flex; flex-direction: row;}

.tile-item_title {color: black; text-decoration: none !important;}
.tile-item_title:hover {color: unset; text-decoration: underline !important;}
.tile-item_text {color:grey;}

/* Timeline padding */
.runtime_sales_activitiesActivityTimelineFixedLayout {padding: 0px !important;}

/* Topic details - hide the article summary */
.selfServiceTopicArticleList .selfServiceArticleListItem .article-summary {display:none !important;}

/* Topic Catelog */
.forceCommunityTopicCatalog .topicHierarchy-topBox {border-width: 0px !important; margin-left:12px;}
.forceCommunityTopicCatalog .topicHierarchy-top {font-weight: 400 !important;}

/* User Profile */
.forceCommunityUserProfileBody .cUserProfileCon {margin-top:0px !important; padding-top:0px !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important;}
.forceCommunityUserProfileBody .cUserProfileDetailCon.large.fullwidth {padding-bottom: 0px; padding-left: 0px; padding-right: 0px;}

/* User Profile Badges */
.communitySetupUserRecognitionBadgeItem {width: fit-content !important;}

/* User Profile Detail */
.forceCommunityUserProfileDetail .userBadge {margin-bottom: 12px;}

/* User Profile Name */
.siteforcePrmBody .cHeader .selfServiceProfileMenuTrigger .profileName, .siteforcePrmBody .cHeader .selfServiceProfileMenu .uiMenuItem a {font-size: 1.2rem !important;}


/* -- AppExchange Components -- */

/* Event Calendar */
.noTruncate[cccalendar-cceventDetails_cceventDetails], 
.truncateEntireContentBlock[cccalendar-cceventDetails_cceventDetails] {font-size: 14px !important;}

/* Onboarding - Header styling */
.Ptnr_Onbd_FmwkHeader {background-color: #414a4c; border-radius: 5px; padding-top: 6px;}
.Ptnr_Onbd_FmwkHeader .help-icon {display: none;}
.Ptnr_Onbd_FmwkCard.task .description {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.Ptnr_Onbd_FmwkCard .task-card {border-radius: 5px !important;  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px !important;}

.Ptnr_Onbd_FmwkCard.task .status {
    left: auto !important;
    right: 6px !important;
    border-radius: 5px !important;
    padding: 6px !important;
    transform: unset !important;
}