/*———— README ————*/

/*
This CSS file was primarily authored by Seawalker Tech in 2025.
There were preexisting novel declarations indicated by the prefix
"ORIGINAL AAR CSS". This adds additional styling to Community Hub
beyond what is possible in Theme Settings (on the Community Hub
Settings tab). This includes several corrections to the Bold Theme
that are not accessible via Theme Settings. It also makes Community
Flow cards look identical to other Community Hub cards.

If you are using the Bold Theme and want to rapidly change the
most prominently featured color in Community Hub, simply do a 
Find and Replace All on the current primary color, which is #00B69A.
This assumes your primary color contrasts well with white (#FFFFFF).
If not, you will find many elements hard to read. We strongly advise
selecting a primary color that contrasts well with white.
In either case, you will need to make additional changes in Theme Settings
since this file is only meant to supplement Theme Settings, not replace it.
*/


/*———— GENERAL ————*/

/* Imports custom fonts specific to AAR's brand, namely Lato and Outfit. */
@import url(https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%7COutfit%3A500&ver=6.8.1);


/*———— GLOBAL HEADER ————*/

/* Removes the right margin from the stock CH CSS on the page contents since it causes horizontal scrolling on small viewports. */
div[id$=":PageContainer"] {
    margin-right: 0px;
}

/* Sets a minimum height on the global nav. This is more so pertinent for the mobile menu. */
.navbar {
    min-height: 60px;
}

/* Sets a maximum height on the mobile logo. */
.m-logo-retina {
    max-height: 45px;
}

/* Fix the font color of the "MENU" Button on Mobile when it's "Active." */
.navbar-default .m-toggle-button.s-active .m-toggle-button-text {
    color: #00B69A;
}

/* ORIGINAL AAR CSS: Restyle Donate Button in main Nav for AAR */
.navbar-default .navbar-nav>li.m-highlight>a {
	background-color: #00B69A;
	border: 1px solid #00B69A;
	padding-bottom: 8px;
	padding-top: 8px;
	margin-top: 7px;
	border-radius: 18px;
	color: #fff;
	transition: all .2s;
	margin-top: 21px
}

/* ORIGINAL AAR CSS: Restyle hover for Donate Button in main Nav for AAR */
.navbar-default .navbar-nav>li.m-highlight>a:hover {
	background-color: #00B69A;
	border-color: #00B69A
}


/*———— MAIN CANVAS ————*/

/* For "Bottom" buttons, adds a margin to the right so there is spacing between each button. */
.card .pull-left .m-margin-separation {
    margin-right:  5px;
}

/* When full-width-button-wrapper is declared, this is intended to target the button div to ensure the
   buttons can take up the entire card width instead of 7/12 of the width. This works on at least
   record lists with non-bottom buttons, i.e., those displayed in the row. */
.card.full-width-button-wrapper .col-sm-7 {
    width: 100%;
}

/* When no-border-top is declared, this hides the top border that the Bold theme puts on a card. */
.card.no-border-top {
    border-top: 0;
}

/* Changes the colors of non-selected buttons in a filter configuration.
   More technically, it styles ALL the buttons, but the next declaration is more specific. */
.card-list .m-filter-group .btn {
    background-color: #FFFFFF;
    border-color: #E0E0E0;
    color: #00B69A;
}

/* Changes the colors of the selected button in a filter configuration.
   Overrides the previous declaration because it is more specific. */
.card-list .m-filter-group .btn.m-btn-selected {
    background-color: #00B69A;
    border-color: #00B69A;
    color: #FFFFFF;
}

/* Changes the border color on cards (default is white). */
.card, 
.card-list {
    border-color: #00B69A !important;
}

/* Changes the top border color on the "Account" navigation menu for larger viewports. */
.l-canvas .list-group {
    border-top-color: #00B69A;
}

/* Changes the default Nimble orange color for global nav items with the "m-highlight" class */
.navbar-default .navbar-nav>li.m-highlight>a {
    background-color: #00B69A;

}

/* Sets the hover and focus colors of "m-highlight" global nav items to be a shade of the primary color. Also sets the border color and font color. */
.navbar-default .navbar-nav>li.m-highlight>a:focus,
.navbar-default .navbar-nav>li.m-highlight>a:hover {
    background-color: #00B69A;
    box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset;
    color: #FFFFFF;
    border-color: #00B69A;
}

/* Adds the missing padding-right for the page heading container, centering it. */
.page-header .container {
    padding-right: 15px;
}

/* Indents and shrinks child navigation menu items (mobile and desktop). */
.nav-child {
    margin-left: 2em;
    font-size: .8em;
}

/* Adds margin above each block button in a list-based card. By default, there is zero margin, causing buttons to touch. */
.card .card-actions .btn-list-button {
    margin-top: 16px;
}

/* Adds margin above each inline button in a list-based card. When there are multiple buttons in a card and they break
   across two or more lines, there is zero margin by default, causing buttons to touch. */
.card .card-actions .l-display-inline .btn-list-button {
    margin-top: 8px;
}

/* Removes unnecessary spacing from text-based lists in Read Only Field Set cards. */
.card ul.card-detail li > span > ul li,
.card ul.card-detail li > span > ol li {
    padding-left: 0px;
    padding-right: 0px;
}
.card ul.card-detail li > span > ul li:before,
.card ul.card-detail li > span > ol li:before {
    content: none;
}

/* Makes Community Hub show bullets for unordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ul > li,                                                     /* level 1 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li {                      /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card ul.card-detail li > span > ul > li > ul > li,                                           /* level 2 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li {            /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card ul.card-detail li > span > ul > li > ul > li > ul > li,                                 /* level 3 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {  /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ol > li,                                                     /* level 1 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li {                      /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card ul.card-detail li > span > ol > li > ol > li,                                           /* level 2 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li {            /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card ul.card-detail li > span > ol > li > ol > li > ol > li,                                 /* level 3 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {  /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}

/* Makes Community Hub show bullets for unordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ul > li,                                                      /* level 1 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li {                       /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card div.m-event-description > ul > li > ul > li,                                            /* level 2 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li {             /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card div.m-event-description > ul > li > ul > li > ul > li,                                  /* level 3 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {   /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ol > li,                                                      /* level 1 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li {                       /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card div.m-event-description > ol > li > ol > li,                                            /* level 2 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li {             /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card div.m-event-description > ol > li > ol > li > ol > li,                                  /* level 3 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {   /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}

/* st-full-image
** Reduces the border-radius from 50% to 5% on "Upload Photo" Cards
** when the st-full-image CSS Class is declared on the card. */
.m-profile-card.st-full-image .img-circle {
    border-radius: 5%;
}

/* st-full-image-borderless
** Removes the border and border-radius on "Upload Photo" Cards
** when the st-full-image-borderless CSS Class is declared on the card. */
.m-profile-card.st-full-image-borderless .img-circle {
    border: 0;
    border-radius: 0%;
}


/*———— MOBILE MENU CANVAS ————*/

/* Removes margin from the top of the mobile menu so it aligns with the container div. */
.m-off-canvas-nav {
    margin-top: 0px;
}

/* Changes dark gray background color of mobile menu to light gray. */
.l-off-canvas.l-off-canvas-left {
    background-color: #F9F9F9;
}

/* Sets the color of Navigation Menu Items in the mobile menu to the primary color. */
.m-off-canvas-nav a.list-group-item {
    background-color: #00B69A;
    border-color: #ffffff;
    color: #fff !important;
}

/* Simplifies mobile menu Nav Menu Item hover and focus colors to be a shade of the primary color. */
.m-off-canvas-nav a.list-group-item:focus,
.m-off-canvas-nav a.list-group-item:hover {
    background-color: #00B69A;
    box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset;
}

/* In mobile menu, converts left margin of child Nav Menu Items to left padding
   to prevent white background from appearing. */
.m-off-canvas-nav a.list-group-item.nav-child {
    margin-left: 0;
    padding-left: 2.5em;
}

/* Simplify Mobile Menu "list group" border to be a shade of the primary color using ARGB. */
.l-off-canvas .m-off-canvas-nav .list-group {
    border-bottom-color: #00B69A99;
}

/* Changes the dark gray color of a selected item in a list to the primary color (e.g., Checkout page). */
.m-list-group-select a.list-group-item.active,
.m-list-group-select a.list-group-item.active:focus,
.m-list-group-select a.list-group-item.active:hover,
.m-list-group-select div.list-group-item.active {
    background-color: #00B69A;
}

/* Custom "no-show" class to hide cards, as needed. Used for hiding cards that run JavaScript or that do behind-the-scenes actions. */
.container .no-show {
    display: none;
}


/*———— FONTS ————*/

/* Resizes the page header title's default font. */
.m-page-header h1 {
    font-size: 56px;
    line-height: 1.3;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
}

/* Increases the page header subtitle font-size (default = 16px) */
.page-header.page-header-anchor.m-page-header p {
    font-size: 1.25em; /* Result is 20px */
}

/* Changes the card heading's font, including flow headings. */
/* For flows, the CHFlowStyle_Heading label must be declared at the start of the Display Text element. */
.card .card-heading,
.card-list .card-list-heading,
.card-list .card-list-heading.row,
.card.m-profile-card ul.m-profile-info li:first-of-type, /* "Upload Photo" card, esp. line-height fix */
.nu-lightning-wrapper .slds-card .ch-flow-heading {
    font-size: 28px;
    line-height: 1.4;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
}

/* For card lists, changes the color the main heading and sub-heading fonts, since Theme Settings doesn't apply to these. */
/* The main application of this is the Affiliations card, which states "Primary Affiliation" and "Other Affiliations",
   as well as the Profile Photo card. */
.card-list .card-list-heading,
.card-list .card-list-heading.row,
.card.m-profile-card ul.m-profile-info li:first-of-type,
.card .card-detail, card-list {
    color: #0D0630;
}

/* Additional styling for flow headings, including top and bottom padding. */
/* The CHFlowStyle_Heading label must be declared at the start of the Display Text element. */
.nu-lightning-wrapper .slds-card flowruntime-screen-field .ch-flow-heading {
    color: #0D0630;
    padding: 15px 0;
}

/* Removes top padding from the first ch-flow-heading, since there is already padding at the card level.
/* The CHFlowStyle_Heading label must be declared at the start of the Display Text element. */
.nu-lightning-wrapper .slds-card flowruntime-screen-field:first-of-type .ch-flow-heading {
  padding-top: 0;
}

/* Sets the flow card font to match the CH body font. Also selects stubborn component labels. */
.nu-lightning-wrapper .slds-card .slds-card__body, /* general selector */
.nu-lightning-wrapper .slds-card .slds-card__body .flowruntime-input-label .slds-rich-text-editor__output, /* picklist select label */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-form-element__label .slds-rich-text-editor__output,  /* radio select label */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox_toggle .slds-form-element__label, /* toggle label */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-accordion .slds-accordion__summary-content, /* section heading label */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-form-element .flowruntime-input-error.slds-form-element__help .formatted-rich-text /* error text */ {
    font-size: 18px;
    line-height: 1.6;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    color: #747184;
}

/* Styles the text that shows up beneath the toggle, clarifying what's selected. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox_toggle .slds-checkbox_faux_container{
    font-size: 16px;
    line-height: 1.4;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    color: #747184;
    text-align: center;

}

/* Adds padding below each paragraph. */
/* The CHFlowStyle_Paragraph label must be declared at the start of the Display Text element. */
.nu-lightning-wrapper .slds-card .ch-flow-paragraph {
    padding-bottom: 15px;
}

/* Styles the flow button font and spacing to look like standard CH buttons. */
.nu-lightning-wrapper .slds-card .slds-card__footer .slds-button {
    padding: 8px 14px;
    font-size: 18px;
    line-height: 1.33em;
    font-family: "Lato", sans-serif;
    font-weight: 700;
}


/*———— FLOW CARD CONTAINER ————*/

/* These make the flow card's padding/margins consistent with standard CH card padding. */
.container .nu-lightning-wrapper .slds-card {
    padding: 15px;
}
.container .nu-lightning-wrapper .slds-card .slds-card__body {
    padding: 0;
    margin-top: 0;
}
.container .nu-lightning-wrapper .slds-card .field-element .container {
    padding: 0;
}
.container .nu-lightning-wrapper .slds-card flowruntime-list-container flowruntime-screen-field {
    margin-bottom: 0;
}

/* Adds a top border to flow cards to match the Bold Theme. */
.container .nu-lightning-wrapper .slds-card {
    border-top: 3px solid #00B69A;
}

/* ORIGINAL AAR CSS: flow card width correction */
.flowruntimeBody .container{
	width: 100%;
}


/*———— FLOW BUTTONS ————*/

/* Applies primary color to "Next" button background. */
.nu-lightning-wrapper .slds-card .slds-card__footer .slds-button.slds-button_brand {
    background-color: #00B69A;
    border-color: #00B69A;
    color: #FFFFFF;
}

/* Applies a shade of the primary color to the "Next" button upon hover. */
.nu-lightning-wrapper .slds-card .slds-card__footer .slds-button.slds-button_brand:hover {
    background-color: #00B69Ac7 !important;
    border-color: #00B69Ac7 !important;
}

/* Applies primary color to the text of the secondary flow buttons. */
.nu-lightning-wrapper .slds-card .slds-card__footer .slds-button.slds-button_neutral {
    background-color: #FFFFFF;
    border-color: #C9C9C9;
    color: #00B69A;
}

/* Corrects previous button display within a flow. */
.slds-button.slds-button_neutral.uiButton--default.uiButton{
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #00B69A;
    transition: border .15s linear;
    background-color: #00B69A;
    color: rgb(255, 255, 255);  
}


/*———— FLOW HELP TEXT ————*/

/* Adds a backgound color, border radius, and padding to the SLDS help text bubble. */
lightning-primitive-bubble:not(.slds-hide).slds-popover_tooltip {
    background-color: #00B69A;
    border-radius: 0.5em;
    padding: 0.5em;
}

/* Sets the SLDS help text to use a white font color. */
.slds-popover__body {
    color: #FFFFFF;
}

/* Hides the help text icon for Lookup components since they they never go away once they appear.
They just pull in the Filter Criteria's message, which isn't necessarily helpful.
As of at least Winter '22, you cannot override or disable the help text in the screen flow. */
lightning-lookup lightning-helptext {
    display: none;
}


/*———— FLOW DATA TABLES ————*/
/* Removes height restrictions so that data tables don't become scrollable. */
.nu-lightning-wrapper .slds-card .slds-card__body .container flowruntime-datatable .restrict-scroll {
    max-height: none;
}
.nu-lightning-wrapper .slds-card .slds-card__body .container flowruntime-datatable .restrict-scroll .flow-dt-height-395 {
    height: auto;
}

/* Improves the position on the header row checkbox in data tables. */
.nu-lightning-wrapper .slds-card .slds-card__body .container flowruntime-datatable .slds-table_header-fixed_container .slds-th__action.slds-cell-fixed {
    margin-top: 2.5px;
    background-color: transparent;
}


/*———— FLOW MISCELLANEOUS COMPONENTS ————*/

/* Styles the toggle switch. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux,
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:hover {
    --slds-c-checkbox-toggle-color-background: #00B69A;
    --slds-c-checkbox-toggle-color-border: #00B69A;
}

/* Adds margin above each radio select. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-radio .slds-radio__label {
    margin-top: 8px;
}

/* Styles the radio select button. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-radio .slds-radio_faux {
    height: 1.5em;
    width: 1.5em;
}

/* Styles the colored circle for the selected radio select. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after {
    height: 1em;
    width: 1em;
    background-color: #00B69A;
}

/* Styles the checkbox button. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox .slds-checkbox_faux {
    height: 1.5em;
    width: 1.5em;
}

/* Ensures all lines for the label of a checkbox button are left-aligned, in the event it breaks to additional lines. */
.nu-lightning-wrapper .slds-card .slds-card__body lightning-input.flowruntime-inline:has(> lightning-primitive-input-checkbox) + .flowruntime-input-label {
    padding-left: 1.5em;
    text-indent: -1.1em;
}

/* Styles the colored square for a selected checkbox, replacing Salesforce's stock checkmark. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after {
    height: 1em;
    width: 1em;
    background-color: #00B69A;
    border: none;
    transform: translate3d(-50%, -50%, 0);
}

/* Adds margin between a checkbox and its inline label. */
.flowruntime-inline-container .flowruntime-inline.slds-form-element + .flowruntime-input-label.flowruntime-inline .slds-form-element__label {
    margin-left: 12px;
}

/* Adds margin above single-select picklist. */
.nu-lightning-wrapper .slds-card .slds-card__body .slds-form-element .slds-select_container {
    margin-top: 8px;
}

/* Removes Salesforce bottom margin from sections. */
.nu-lightning-wrapper .slds-card .section.slds-gutters {
    margin-bottom: 0;
}

/* Corrects checkbox option display within a flow. */
.nu-lightning-wrapper .uiBlock .bBody .slds-form-element__control .slds-checkbox {
    width: auto;
}

/* Corrects text area label display within a flow. */
.nu-lightning-wrapper .bBody .inputHeader .richTextLabel {
    display: inline-block;
    float: none;
    text-align: left;
	width: 100%;
}

/* Corrects FlowRuntime fields from extending outside card. */
flowruntime-screen-field div.container,
flowruntime-record-field div.container {
    width: 100%;
}

/* Relocates the required asterisk on Lightning-wrapped components. */
.nu-lightning-wrapper .uiBlock .bBody .inputHeader .required {
	margin-right: auto;
	margin-left: auto;
}

/* Adds padding to radio button inputs within a flow. */
.flowruntimeRadioButtonInput .bBody .slds-form-element__control{
    padding-top: 25px;
}

/* Allows radio select component to occupy full width. Default is 33%. */
.nu-lightning-wrapper .slds-card .slds-form-element__control .slds-radio {
    width: 100%;
}

/* Indents list items in a Display Text component. */
.nu-lightning-wrapper .slds-card flowruntime-display-text-lwc li {
    margin-left: 2rem;
    line-height: 2rem;
}

/* Hides the "Show All Results for" option in the dropdown for Lookup components, since
it doesn't work in Community Hub. */
lightning-base-combobox-item[data-value="actionAdvancedSearch"] {
    display: none !important;
}

/* ORIGINAL AAR CSS: flow footer correction */
footer.slds-scope.footerContainer{
	display:inline;
	position:relative;
}

/* ORIGINAL AAR CSS: Adjusts button text display on File Upload screen component */
.rsmFileUploadButton label.btn.btn-primary.btn-choose-file-button{
	display: inline;
}